feat(chat): enhance ChatMessage component with context-aware film interaction

- Updated ChatMessage component to support click interactions for film context.
- Added computed property to determine if a message has associated films.
- Refactored film ID extraction to normalize film IDs for consistency.

Made-with: Cursor

packages/app/src/components/chat/ChatMessage.vue

@@ -6,7 +6,8 @@
   >
     <div
       class="max-w-[85%] md:max-w-[75%] rounded-2xl px-4 py-3 transition-all duration-300"
-      :class="bubbleClasses"
+      :class="[bubbleClasses, { 'cursor-pointer': hasContext }]"
+      @click="handleBubbleClick"
     >
       <p class="text-sm leading-relaxed whitespace-pre-wrap break-words"
          :class="isDark ? 'text-white/90' : 'text-gray-800'">{{ displayText }}</p>
@@ -65,6 +66,8 @@ const inlineFilms = computed(() => {
   return resolveFilms(ids)
 })
 
+const hasContext = computed(() => !isUser.value && inlineFilms.value.length > 0)
+
 const displayText = computed(() => {
   if (isUser.value) return props.message.content
   return stripFilmTags(props.message.content)
@@ -83,4 +86,8 @@ function handleFilmSelect(film: Film) {
 function openPanel() {
   updatePanelFromText(props.message.content)
 }
+
+function handleBubbleClick() {
+  if (hasContext.value) openPanel()
+}
 </script>

packages/app/src/composables/useContentPanel.ts

@@ -7,15 +7,20 @@ const panelFilms = ref<Film[]>([])
 const selectedFilm = ref<Film | null>(null)
 const panelTitle = ref('Recommended Films')
 
-const FILM_TAG_RE = /\[\[film:(f\d+)\]\]/g
+const FILM_TAG_RE = /\[\[film:(f?\d+)\]\]/gi
 
 export function useContentPanel() {
+  function normalizeFilmId(raw: string): string {
+    return raw.startsWith('f') ? raw : `f${raw}`
+  }
+
   function extractFilmIds(text: string): string[] {
     const ids: string[] = []
     let match: RegExpExecArray | null
-    const re = new RegExp(FILM_TAG_RE.source, 'g')
+    const re = new RegExp(FILM_TAG_RE.source, 'gi')
     while ((match = re.exec(text)) !== null) {
-      if (!ids.includes(match[1])) ids.push(match[1])
+      const id = normalizeFilmId(match[1])
+      if (!ids.includes(id)) ids.push(id)
     }
     return ids
   }