feat(chat): integrate podcast support into chat components

- Updated ChatMessage and ChatWindow components to handle podcast content alongside films and songs.
- Enhanced useContentPanel to extract and manage podcasts, allowing for richer media interactions.
- Added PodcastCard and PodcastGrid components for displaying podcast information.
- Improved UI elements to accommodate podcast selection and detail viewing.
- Updated styles for empty state icons and added new CSS for podcast-related elements.

Made-with: Cursor

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

@@ -5,9 +5,8 @@
     :class="isDark ? '!border-b-white/10' : '!border-b-black/8'"
   >
     <div class="flex items-center gap-3 min-w-0 flex-1">
-      <div class="w-8 h-8 rounded-full flex items-center justify-center shrink-0"
-           :class="isDark ? 'bg-accent/20' : 'bg-accent/10'">
-        <span class="text-accent text-sm font-bold">AI</span>
+      <div class="w-8 h-8 rounded-xl path-glass-icon flex items-center justify-center shrink-0 overflow-hidden">
+        <span class="text-base" :class="isDark ? 'text-[#fafafa]' : 'text-gray-800'">✦</span>
       </div>
       <div class="min-w-0 flex-1 relative">
         <button

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

@@ -30,6 +30,15 @@
         />
       </div>
 
+      <div v-if="inlinePodcasts.length > 0" class="mt-3 space-y-1" @click.stop>
+        <PodcastCard
+          v-for="podcast in inlinePodcasts"
+          :key="podcast.id"
+          :podcast="podcast"
+          @select="handlePodcastSelect"
+        />
+      </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>
@@ -47,6 +56,13 @@
         >
           View all {{ inlineSongs.length }} songs →
         </button>
+        <button
+          v-else-if="inlinePodcasts.length > 1"
+          class="text-[10px] text-accent/70 hover:text-accent transition-colors"
+          @click.stop="openPanel"
+        >
+          View all {{ inlinePodcasts.length }} podcasts →
+        </button>
       </div>
     </div>
   </div>
@@ -55,11 +71,12 @@
 <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 type { Film, Song, Podcast } 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'
+import PodcastCard from '@/components/content/PodcastCard.vue'
 
 const props = defineProps<{
   message: Message
@@ -67,7 +84,7 @@ const props = defineProps<{
 }>()
 
 const { isDark } = useTheme()
-const { extractAllFilms, extractAllSongs, stripContentTags, updatePanelFromText, openFilmDetail, openSongDetail, closeFilmDetail, closeSongDetail } = useContentPanel()
+const { extractAllFilms, extractAllSongs, extractAllPodcasts, stripContentTags, updatePanelFromText, openFilmDetail, openSongDetail, openPodcastDetail, closeFilmDetail, closeSongDetail, closePodcastDetail } = useContentPanel()
 
 const isUser = computed(() => props.message.role === 'user')
 
@@ -87,7 +104,12 @@ const inlineSongs = computed(() => {
   return extractAllSongs(props.message.content)
 })
 
-const hasContext = computed(() => !isUser.value && (inlineFilms.value.length > 0 || inlineSongs.value.length > 0))
+const inlinePodcasts = computed(() => {
+  if (isUser.value) return []
+  return extractAllPodcasts(props.message.content)
+})
+
+const hasContext = computed(() => !isUser.value && (inlineFilms.value.length > 0 || inlineSongs.value.length > 0 || inlinePodcasts.value.length > 0))
 
 const displayText = computed(() => {
   if (isUser.value) return props.message.content
@@ -102,18 +124,28 @@ const formattedTime = computed(() => {
 function handleFilmSelect(film: Film) {
   updatePanelFromText(props.message.content)
   closeSongDetail()
+  closePodcastDetail()
   openFilmDetail(film)
 }
 
 function handleSongSelect(song: Song) {
   updatePanelFromText(props.message.content)
   closeFilmDetail()
+  closePodcastDetail()
   openSongDetail(song)
 }
 
+function handlePodcastSelect(podcast: Podcast) {
+  updatePanelFromText(props.message.content)
+  closeFilmDetail()
+  closeSongDetail()
+  openPodcastDetail(podcast)
+}
+
 function openPanel() {
   closeFilmDetail()
   closeSongDetail()
+  closePodcastDetail()
   updatePanelFromText(props.message.content)
 }
 

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

@@ -16,8 +16,8 @@
     >
       <div v-if="messages.length === 0" class="flex items-center justify-center h-full">
         <div class="text-center space-y-3 animate-fade-up">
-          <div class="w-16 h-16 rounded-2xl path-glass-card flex items-center justify-center mx-auto overflow-hidden">
-            <img src="/icon.svg" alt="AIUI" class="w-10 h-10 object-contain" />
+          <div class="empty-state-icon w-16 h-16 rounded-2xl path-glass-icon flex items-center justify-center mx-auto overflow-hidden">
+            <span class="text-2xl" :class="isDark ? 'text-[#fafafa]' : 'text-gray-800'">✦</span>
           </div>
           <p class="text-sm" :class="isDark ? 'text-white/30' : 'text-gray-400'">
             Start a conversation