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

<template>
  <div
    class="flex animate-fade-up-fast"
    :class="isUser ? 'justify-end' : 'justify-start'"
    :style="{ animationDelay: `${index * 30}ms` }"
  >
    <div
      class="max-w-[85%] md:max-w-[75%] rounded-2xl px-4 py-3 transition-all duration-300"
      :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>

      <div v-if="inlineFilms.length > 0" class="mt-3 space-y-1" @click.stop>
        <FilmCard
          v-for="film in inlineFilms"
          :key="film.id"
          :film="film"
          @select="handleFilmSelect"
        />
      </div>

      <div v-if="inlineSongs.length > 0" class="mt-3 space-y-1" @click.stop>
        <SongCard
          v-for="song in inlineSongs"
          :key="song.id"
          :song="song"
          @select="handleSongSelect"
        />
      </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.stop="openPanel"
        >
          View all {{ inlineFilms.length }} films →
        </button>
        <button
          v-else-if="inlineSongs.length > 1"
          class="text-[10px] text-accent/70 hover:text-accent transition-colors"
          @click.stop="openPanel"
        >
          View all {{ inlineSongs.length }} songs →
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { Message } from '@aiui/core/types/message'
import type { Film, Song } from '@aiui/core/types/content'
import { useTheme } from '@/composables/useTheme'
import { useContentPanel } from '@/composables/useContentPanel'
import FilmCard from '@/components/content/FilmCard.vue'
import SongCard from '@/components/content/SongCard.vue'

const props = defineProps<{
  message: Message
  index: number
}>()

const { isDark } = useTheme()
const { extractAllFilms, extractAllSongs, stripContentTags, updatePanelFromText, openFilmDetail, openSongDetail, closeFilmDetail, closeSongDetail } = useContentPanel()

const isUser = computed(() => props.message.role === 'user')

const bubbleClasses = computed(() =>
  isUser.value
    ? 'glass-strong rounded-br-md'
    : 'glass-card rounded-bl-md'
)

const inlineFilms = computed(() => {
  if (isUser.value) return []
  return extractAllFilms(props.message.content)
})

const inlineSongs = computed(() => {
  if (isUser.value) return []
  return extractAllSongs(props.message.content)
})

const hasContext = computed(() => !isUser.value && (inlineFilms.value.length > 0 || inlineSongs.value.length > 0))

const displayText = computed(() => {
  if (isUser.value) return props.message.content
  return stripContentTags(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)
  closeSongDetail()
  openFilmDetail(film)
}

function handleSongSelect(song: Song) {
  updatePanelFromText(props.message.content)
  closeFilmDetail()
  openSongDetail(song)
}

function openPanel() {
  closeFilmDetail()
  closeSongDetail()
  updatePanelFromText(props.message.content)
}

function handleBubbleClick() {
  if (hasContext.value) openPanel()
}
</script>