feat(chat): enhance film integration and UI improvements

- Updated ChatMessage component to display inline film cards and added functionality for selecting films. - Improved ChatWindow to handle film-related content and update the panel with selected films. - Refactored useAI to streamline film recommendation prompts and context. - Enhanced ChatPage layout for better film library access and user experience. - Updated service worker revision for PWA improvements. Made-with: Cursor
2026-03-02 16:48:17 +00:00
parent ece4b8256f
commit 464069b2f2
13 changed files with 658 additions and 112 deletions
@@ -2,6 +2,11 @@
  <div class="p-3 md:p-4">
    <div
      class="glass rounded-2xl px-4 py-3 flex items-end gap-3 transition-all duration-300"
+      :class="focused
+        ? isDark
+          ? 'border-white/30'
+          : 'border-black/20'
+        : ''"
    >
      <textarea
        ref="textareaRef"
@@ -14,6 +19,8 @@
          : 'text-gray-800 placeholder:text-gray-400'"
        @keydown.enter.exact.prevent="send"
        @input="autoResize"
+        @focus="focused = true"
+        @blur="focused = false"
      />
      <button
        :disabled="!canSend"
@@ -53,6 +60,7 @@ const emit = defineEmits<{

 const { isDark } = useTheme()
 const text = ref('')
+const focused = ref(false)
 const textareaRef = ref<HTMLTextAreaElement | null>(null)

 const canSend = computed(() => text.value.trim().length > 0 && !props.disabled)
@@ -5,14 +5,31 @@
    :style="{ animationDelay: `${index * 30}ms` }"
  >
    <div
-      class="max-w-[85%] md:max-w-[70%] rounded-2xl px-4 py-3 transition-all duration-300"
+      class="max-w-[85%] md:max-w-[75%] rounded-2xl px-4 py-3 transition-all duration-300"
      :class="bubbleClasses"
    >
      <p class="text-sm leading-relaxed whitespace-pre-wrap break-words"
-         :class="isDark ? 'text-white/90' : 'text-gray-800'">{{ message.content }}</p>
+         :class="isDark ? 'text-white/90' : 'text-gray-800'">{{ displayText }}</p>
+
+      <div v-if="inlineFilms.length > 0" class="mt-3 space-y-1">
+        <FilmCard
+          v-for="film in inlineFilms"
+          :key="film.id"
+          :film="film"
+          @select="handleFilmSelect"
+        />
+      </div>
+
      <div class="flex items-center gap-2 mt-1.5">
        <span class="text-[10px] select-none"
              :class="isDark ? 'text-white/30' : 'text-gray-400'">{{ formattedTime }}</span>
+        <button
+          v-if="inlineFilms.length > 1"
+          class="text-[10px] text-accent/70 hover:text-accent transition-colors"
+          @click="openPanel"
+        >
+          View all {{ inlineFilms.length }} films →
+        </button>
      </div>
    </div>
  </div>
@@ -21,7 +38,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { Message } from '@aiui/core/types/message'
+import type { Film } from '@aiui/core/types/content'
 import { useTheme } from '@/composables/useTheme'
+import { useContentPanel } from '@/composables/useContentPanel'
+import FilmCard from '@/components/content/FilmCard.vue'

 const props = defineProps<{
  message: Message
@@ -29,6 +49,8 @@ const props = defineProps<{
 }>()

 const { isDark } = useTheme()
+const { extractFilmIds, resolveFilms, stripFilmTags, updatePanelFromText, openFilmDetail } = useContentPanel()
+
 const isUser = computed(() => props.message.role === 'user')

 const bubbleClasses = computed(() =>
@@ -37,8 +59,28 @@ const bubbleClasses = computed(() =>
    : 'glass-card rounded-bl-md'
 )

+const inlineFilms = computed(() => {
+  if (isUser.value) return []
+  const ids = extractFilmIds(props.message.content)
+  return resolveFilms(ids)
+})
+
+const displayText = computed(() => {
+  if (isUser.value) return props.message.content
+  return stripFilmTags(props.message.content)
+})
+
 const formattedTime = computed(() => {
  const d = new Date(props.message.timestamp)
  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
 })
+
+function handleFilmSelect(film: Film) {
+  updatePanelFromText(props.message.content)
+  openFilmDetail(film)
+}
+
+function openPanel() {
+  updatePanelFromText(props.message.content)
+}
 </script>
@@ -48,6 +48,7 @@ import { computed, ref, watch, nextTick } from 'vue'
 import { useChatStore } from '@/stores/chat'
 import { useAI } from '@/composables/useAI'
 import { useTheme } from '@/composables/useTheme'
+import { useContentPanel } from '@/composables/useContentPanel'
 import ChatHeader from './ChatHeader.vue'
 import ChatMessage from './ChatMessage.vue'
 import ChatInput from './ChatInput.vue'
@@ -74,6 +75,7 @@ defineEmits<{
 const chatStore = useChatStore()
 const { sendMessage } = useAI()
 const { isDark } = useTheme()
+const { updatePanelFromText } = useContentPanel()
 const messageListRef = ref<HTMLElement | null>(null)

 const messages = computed(() => chatStore.messages)
@@ -113,11 +115,14 @@ watch(

 watch(
  () => messages.value[messages.value.length - 1]?.content,
-  () => {
+  (content) => {
    nextTick(() => {
      const el = messageListRef.value
      if (el) el.scrollTop = el.scrollHeight
    })
+    if (content && !isStreaming.value) {
+      updatePanelFromText(content)
+    }
  }
 )
 </script>
@@ -0,0 +1,94 @@
+<template>
+  <Transition name="panel">
+    <aside
+      v-if="panelOpen"
+      class="glass-card overflow-hidden flex flex-col"
+      :class="isMobile
+        ? 'fixed inset-0 z-30'
+        : 'w-80 xl:w-96 shrink-0'"
+    >
+      <div
+        v-if="isMobile"
+        class="p-3 flex items-center justify-between"
+        :style="isDark
+          ? 'border-bottom: 1px solid rgba(255, 255, 255, 0.08)'
+          : 'border-bottom: 1px solid rgba(0, 0, 0, 0.06)'"
+      >
+        <h3 class="text-sm font-bold" :class="isDark ? 'text-white/90' : 'text-gray-900'">
+          {{ panelTitle }}
+        </h3>
+        <button
+          class="p-2 rounded-lg transition-colors"
+          :class="isDark
+            ? 'text-white/70 hover:bg-white/10'
+            : 'text-gray-500 hover:bg-black/5'"
+          @click="closePanel"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+
+      <div class="flex-1 min-h-0">
+        <FilmDetail
+          v-if="selectedFilm"
+          :film="selectedFilm"
+          @back="closeFilmDetail"
+        />
+        <FilmGrid
+          v-else
+          :films="panelFilms"
+          :title="panelTitle"
+          @select-film="openFilmDetail"
+        />
+      </div>
+    </aside>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useTheme } from '@/composables/useTheme'
+import { useContentPanel } from '@/composables/useContentPanel'
+import FilmGrid from './FilmGrid.vue'
+import FilmDetail from './FilmDetail.vue'
+
+const { isDark } = useTheme()
+const {
+  panelOpen,
+  panelFilms,
+  panelTitle,
+  selectedFilm,
+  openFilmDetail,
+  closeFilmDetail,
+  closePanel,
+} = useContentPanel()
+
+const windowWidth = ref(window.innerWidth)
+const isMobile = computed(() => windowWidth.value < 1024)
+
+function onResize() {
+  windowWidth.value = window.innerWidth
+}
+
+onMounted(() => window.addEventListener('resize', onResize))
+onUnmounted(() => window.removeEventListener('resize', onResize))
+</script>
+
+<style scoped>
+.panel-enter-active {
+  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+}
+.panel-leave-active {
+  transition: all 0.2s ease-in;
+}
+.panel-enter-from {
+  opacity: 0;
+  transform: translateX(20px);
+}
+.panel-leave-to {
+  opacity: 0;
+  transform: translateX(20px);
+}
+</style>
@@ -0,0 +1,67 @@
+<template>
+  <button
+    class="flex gap-3 p-2 rounded-xl transition-all duration-200 text-left w-full group"
+    :class="isDark
+      ? 'hover:bg-white/5 active:bg-white/10'
+      : 'hover:bg-black/3 active:bg-black/5'"
+    @click="$emit('select', film)"
+  >
+    <img
+      v-if="film.posterUrl"
+      :src="film.posterUrl"
+      :alt="film.title"
+      class="w-12 h-[72px] rounded-lg object-cover shrink-0 shadow-md"
+      loading="lazy"
+      @error="(e) => handleImgError(e, film.title, film.year)"
+    />
+    <div
+      v-else
+      class="w-12 h-[72px] rounded-lg shrink-0 flex items-center justify-center text-lg"
+      :class="isDark ? 'bg-white/10' : 'bg-black/5'"
+    >
+      🎬
+    </div>
+
+    <div class="min-w-0 flex-1 py-0.5">
+      <p class="text-sm font-semibold truncate"
+         :class="isDark ? 'text-white/90' : 'text-gray-900'">{{ film.title }}</p>
+      <p class="text-[11px] mt-0.5"
+         :class="isDark ? 'text-white/40' : 'text-gray-500'">
+        {{ film.year }} · {{ film.director }}
+      </p>
+      <div class="flex items-center gap-1.5 mt-1.5">
+        <span class="text-[10px] font-semibold px-1.5 py-0.5 rounded"
+              :class="ratingClass">
+          ★ {{ film.rating }}
+        </span>
+        <span
+          v-for="src in film.sources.slice(0, 3)"
+          :key="src.type"
+          class="text-[9px] px-1.5 py-0.5 rounded font-medium"
+          :class="isDark ? 'bg-white/8 text-white/50' : 'bg-black/5 text-gray-500'"
+        >
+          {{ src.type }}
+        </span>
+      </div>
+    </div>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Film } from '@aiui/core/types/content'
+import { useTheme } from '@/composables/useTheme'
+import { handleImgError } from '@/composables/useImageFallback'
+
+const props = defineProps<{ film: Film }>()
+defineEmits<{ select: [film: Film] }>()
+
+const { isDark } = useTheme()
+
+const ratingClass = computed(() => {
+  const r = props.film.rating
+  if (r >= 8.5) return isDark.value ? 'bg-success/20 text-success' : 'bg-success/10 text-green-700'
+  if (r >= 7.5) return isDark.value ? 'bg-accent/20 text-accent' : 'bg-accent/10 text-amber-700'
+  return isDark.value ? 'bg-white/10 text-white/50' : 'bg-black/5 text-gray-500'
+})
+</script>
@@ -0,0 +1,113 @@
+<template>
+  <div class="h-full overflow-y-auto custom-scrollbar">
+    <div class="relative">
+      <img
+        v-if="film.backdropUrl"
+        :src="film.backdropUrl"
+        :alt="film.title"
+        class="w-full aspect-video object-cover"
+        @error="(e) => handleImgError(e, film.title, film.year)"
+      />
+      <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent" />
+
+      <button
+        class="absolute top-3 left-3 p-2 rounded-lg backdrop-blur-md transition-colors"
+        :class="'bg-black/30 text-white/80 hover:bg-black/50'"
+        @click="$emit('back')"
+      >
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+        </svg>
+      </button>
+
+      <div class="absolute bottom-0 left-0 right-0 p-4">
+        <h2 class="text-lg font-bold text-white">{{ film.title }}</h2>
+        <div class="flex items-center gap-2 mt-1 text-xs text-white/60">
+          <span class="text-accent font-bold">★ {{ film.rating }}</span>
+          <span>{{ film.year }}</span>
+          <span>{{ film.runtime }}m</span>
+          <span>{{ film.director }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="p-4 space-y-4">
+      <div class="flex flex-wrap gap-1.5">
+        <span
+          v-for="genre in film.genres"
+          :key="genre"
+          class="text-[10px] px-2 py-1 rounded-md font-medium"
+          :class="isDark ? 'bg-white/10 text-white/60' : 'bg-black/5 text-gray-600'"
+        >
+          {{ genre }}
+        </span>
+      </div>
+
+      <p class="text-sm leading-relaxed"
+         :class="isDark ? 'text-white/70' : 'text-gray-600'">
+        {{ film.synopsis }}
+      </p>
+
+      <div>
+        <h4 class="text-xs font-semibold mb-2"
+            :class="isDark ? 'text-white/50' : 'text-gray-500'">Cast</h4>
+        <p class="text-sm" :class="isDark ? 'text-white/70' : 'text-gray-700'">
+          {{ film.cast.join(', ') }}
+        </p>
+      </div>
+
+      <div>
+        <h4 class="text-xs font-semibold mb-2"
+            :class="isDark ? 'text-white/50' : 'text-gray-500'">Watch on</h4>
+        <div class="space-y-2">
+          <a
+            v-for="src in film.sources"
+            :key="src.url"
+            :href="src.url"
+            target="_blank"
+            rel="noopener"
+            class="flex items-center justify-between p-3 rounded-xl transition-colors"
+            :class="isDark
+              ? 'bg-white/5 hover:bg-white/10'
+              : 'bg-black/3 hover:bg-black/5'"
+          >
+            <div class="flex items-center gap-2.5">
+              <span class="text-sm">{{ sourceIcon(src.type) }}</span>
+              <div>
+                <p class="text-xs font-medium"
+                   :class="isDark ? 'text-white/80' : 'text-gray-800'">{{ src.name }}</p>
+                <p class="text-[10px]"
+                   :class="isDark ? 'text-white/30' : 'text-gray-400'">{{ src.quality }}</p>
+              </div>
+            </div>
+            <svg class="w-4 h-4" :class="isDark ? 'text-white/30' : 'text-gray-400'"
+                 fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Film } from '@aiui/core/types/content'
+import { useTheme } from '@/composables/useTheme'
+import { handleImgError } from '@/composables/useImageFallback'
+
+defineProps<{ film: Film }>()
+defineEmits<{ back: [] }>()
+
+const { isDark } = useTheme()
+
+function sourceIcon(type: string): string {
+  const icons: Record<string, string> = {
+    plex: '🟧',
+    nextcloud: '☁️',
+    youtube: '▶️',
+    'free-web': '🌐',
+  }
+  return icons[type] ?? '📺'
+}
+</script>
@@ -0,0 +1,142 @@
+<template>
+  <div class="h-full flex flex-col">
+    <div class="p-4 space-y-3" :style="isDark
+      ? 'border-bottom: 1px solid rgba(255, 255, 255, 0.08)'
+      : 'border-bottom: 1px solid rgba(0, 0, 0, 0.06)'"
+    >
+      <div class="flex items-center justify-between">
+        <h3 class="text-sm font-bold" :class="isDark ? 'text-white/90' : 'text-gray-900'">
+          {{ title }}
+        </h3>
+        <span class="text-[10px] font-mono" :class="isDark ? 'text-white/30' : 'text-gray-400'">
+          {{ filteredFilms.length }} films
+        </span>
+      </div>
+
+      <input
+        v-model="search"
+        type="text"
+        placeholder="Search films..."
+        class="w-full px-3 py-2 rounded-lg text-xs outline-none transition-colors"
+        :class="isDark
+          ? 'bg-white/5 text-white/80 placeholder:text-white/25 focus:bg-white/10'
+          : 'bg-black/3 text-gray-800 placeholder:text-gray-400 focus:bg-black/5'"
+      />
+
+      <div class="flex flex-wrap gap-1.5">
+        <button
+          v-for="genre in topGenres"
+          :key="genre"
+          class="text-[10px] px-2 py-1 rounded-md transition-all duration-150"
+          :class="activeGenre === genre
+            ? 'nav-tab-active'
+            : isDark
+              ? 'text-white/40 hover:text-white/70 hover:bg-white/5'
+              : 'text-gray-500 hover:text-gray-800 hover:bg-black/5'"
+          @click="activeGenre = activeGenre === genre ? null : genre"
+        >
+          {{ genre }}
+        </button>
+      </div>
+    </div>
+
+    <div class="flex-1 overflow-y-auto custom-scrollbar p-3">
+      <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
+        <button
+          v-for="film in filteredFilms"
+          :key="film.id"
+          class="group rounded-xl overflow-hidden transition-all duration-200"
+          :class="isDark ? 'hover:ring-1 hover:ring-white/20' : 'hover:ring-1 hover:ring-black/10'"
+          @click="$emit('selectFilm', film)"
+        >
+          <div class="aspect-[2/3] relative">
+            <img
+              :src="film.posterUrl"
+              :alt="film.title"
+              class="w-full h-full object-cover"
+              loading="lazy"
+              @error="(e) => handleImgError(e, film.title, film.year)"
+            />
+            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent" />
+
+            <div class="absolute bottom-0 left-0 right-0 p-2">
+              <p class="text-[11px] font-semibold text-white/90 leading-tight truncate">
+                {{ film.title }}
+              </p>
+              <div class="flex items-center gap-1 mt-0.5">
+                <span class="text-[9px] text-accent font-bold">★ {{ film.rating }}</span>
+                <span class="text-[9px] text-white/40">{{ film.year }}</span>
+              </div>
+            </div>
+
+            <div class="absolute top-1.5 right-1.5 flex gap-0.5">
+              <span
+                v-for="src in film.sources.slice(0, 2)"
+                :key="src.type"
+                class="text-[8px] px-1 py-0.5 rounded bg-black/60 text-white/70 backdrop-blur-sm"
+              >
+                {{ src.type }}
+              </span>
+            </div>
+          </div>
+        </button>
+      </div>
+
+      <div v-if="filteredFilms.length === 0" class="flex items-center justify-center py-12">
+        <p class="text-sm" :class="isDark ? 'text-white/30' : 'text-gray-400'">
+          No films match your search
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { Film } from '@aiui/core/types/content'
+import { useTheme } from '@/composables/useTheme'
+import { handleImgError } from '@/composables/useImageFallback'
+
+const props = withDefaults(defineProps<{
+  films: Film[]
+  title?: string
+}>(), {
+  title: 'Recommended Films',
+})
+
+defineEmits<{ selectFilm: [film: Film] }>()
+
+const { isDark } = useTheme()
+const search = ref('')
+const activeGenre = ref<string | null>(null)
+
+const topGenres = computed(() => {
+  const counts = new Map<string, number>()
+  for (const f of props.films) {
+    for (const g of f.genres) {
+      counts.set(g, (counts.get(g) ?? 0) + 1)
+    }
+  }
+  return [...counts.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 8)
+    .map(([g]) => g)
+})
+
+const filteredFilms = computed(() => {
+  let result = props.films
+  if (search.value) {
+    const q = search.value.toLowerCase()
+    result = result.filter(
+      (f) =>
+        f.title.toLowerCase().includes(q) ||
+        f.director.toLowerCase().includes(q) ||
+        f.cast.some((c) => c.toLowerCase().includes(q))
+    )
+  }
+  if (activeGenre.value) {
+    result = result.filter((f) => f.genres.includes(activeGenre.value!))
+  }
+  return result
+})
+</script>