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/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)
 }