From 6f79f0860de9acac5bd7df37b3f6b9ace999920d Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Mon, 2 Mar 2026 16:49:47 +0000
Subject: [PATCH] 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 |  9 ++++++++-
 packages/app/src/composables/useContentPanel.ts  | 11 ++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/app/src/components/chat/ChatMessage.vue b/packages/app/src/components/chat/ChatMessage.vue
index d77482a3..6cbd83af 100644
--- a/packages/app/src/components/chat/ChatMessage.vue
+++ b/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>
diff --git a/packages/app/src/composables/useContentPanel.ts b/packages/app/src/composables/useContentPanel.ts
index 67a05304..9076b3d8 100644
--- a/packages/app/src/composables/useContentPanel.ts
+++ b/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
   }