feat(chat): enhance chat functionality with song integration and UI improvements
- Updated ChatHeader and ChatMessage components to support song selection and display. - Enhanced useContentPanel to handle both film and song content, allowing for richer interactions. - Improved FilmCard and added SongCard components for better media representation. - Refactored environment variables for better configuration management. - Updated .gitignore to include development chat history. Made-with: Cursor
This commit is contained in:
Dorian
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div class="h-full flex flex-col">
|
||||
<div class="p-4 space-y-3" :style="isDark
|
||||
? 'border-bottom: 1px solid rgba(255, 255, 255, 0.08)'
|
||||
: 'border-bottom: 1px solid rgba(0, 0, 0, 0.06)'"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-sm font-bold" :class="isDark ? 'text-white/90' : 'text-gray-900'">
|
||||
{{ title }}
|
||||
</h3>
|
||||
<span class="text-[10px] font-mono" :class="isDark ? 'text-white/30' : 'text-gray-400'">
|
||||
{{ filteredSongs.length }} songs
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<input
|
||||
v-model="search"
|
||||
type="text"
|
||||
placeholder="Search songs..."
|
||||
class="w-full px-3 py-2 rounded-lg text-xs outline-none transition-colors"
|
||||
:class="isDark
|
||||
? 'bg-white/5 text-white/80 placeholder:text-white/25 focus:bg-white/10'
|
||||
: 'bg-black/3 text-gray-800 placeholder:text-gray-400 focus:bg-black/5'"
|
||||
/>
|
||||
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<button
|
||||
v-for="genre in topGenres"
|
||||
:key="genre"
|
||||
class="text-[10px] px-2 py-1 rounded-md transition-all duration-150"
|
||||
:class="activeGenre === genre
|
||||
? 'nav-tab-active'
|
||||
: isDark
|
||||
? 'text-white/40 hover:text-white/70 hover:bg-white/5'
|
||||
: 'text-gray-500 hover:text-gray-800 hover:bg-black/5'"
|
||||
@click="activeGenre = activeGenre === genre ? null : genre"
|
||||
>
|
||||
{{ genre }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto custom-scrollbar p-3">
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
|
||||
<button
|
||||
v-for="song in filteredSongs"
|
||||
:key="song.id"
|
||||
class="group flex flex-col items-stretch text-left w-full"
|
||||
@click="$emit('selectSong', song)"
|
||||
>
|
||||
<div class="cover-card flex-1 min-h-0">
|
||||
<div class="aspect-square relative w-full overflow-hidden rounded-[10px]">
|
||||
<img
|
||||
v-if="coverSrc(song)"
|
||||
:src="coverSrc(song)!"
|
||||
:alt="song.title"
|
||||
class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
|
||||
loading="lazy"
|
||||
@error="onCoverError(song)"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="w-full h-full bg-cover bg-center"
|
||||
:style="{ backgroundImage: `url(${fallbackFor(song)})` }"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
|
||||
|
||||
<div class="absolute bottom-0 left-0 right-0 p-2">
|
||||
<p class="text-[11px] font-semibold text-white/90 leading-tight truncate">
|
||||
{{ song.title }}
|
||||
</p>
|
||||
<p class="text-[9px] text-white/40 truncate mt-0.5">{{ song.artist }}</p>
|
||||
</div>
|
||||
|
||||
<div class="absolute top-1.5 right-1.5 flex gap-0.5 flex-wrap justify-end max-w-[60%]">
|
||||
<span
|
||||
v-for="src in (song.sources ?? []).slice(0, 2)"
|
||||
:key="src.type"
|
||||
class="text-[8px] px-1 py-0.5 rounded bg-black/60 text-white/70 backdrop-blur-sm"
|
||||
>
|
||||
{{ src.type }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs font-semibold mt-2 truncate px-0.5"
|
||||
:class="isDark ? 'text-white/90' : 'text-gray-900'">
|
||||
{{ song.title }}
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="filteredSongs.length === 0" class="flex items-center justify-center py-12">
|
||||
<p class="text-sm" :class="isDark ? 'text-white/30' : 'text-gray-400'">
|
||||
No songs match your search
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, reactive, onMounted, watch } from 'vue'
|
||||
import type { Song } from '@aiui/core/types/content'
|
||||
import { useTheme } from '@/composables/useTheme'
|
||||
import { generateSongCoverFallback, fetchMusicCover } from '@/composables/useImageFallback'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
songs: Song[]
|
||||
title?: string
|
||||
}>(), {
|
||||
title: 'Recommended Songs',
|
||||
})
|
||||
|
||||
defineEmits<{ selectSong: [song: Song] }>()
|
||||
|
||||
const { isDark } = useTheme()
|
||||
const search = ref('')
|
||||
const activeGenre = ref<string | null>(null)
|
||||
const failedCovers = ref<Set<string>>(new Set())
|
||||
const fetchedCovers = reactive<Map<string, string>>(new Map())
|
||||
|
||||
function coverSrc(song: Song): string | null {
|
||||
if (failedCovers.value.has(song.id)) return null
|
||||
const url = song.coverUrl || fetchedCovers.get(song.id)
|
||||
return url || null
|
||||
}
|
||||
|
||||
function fallbackFor(song: Song): string {
|
||||
return generateSongCoverFallback(song.title, song.artist)
|
||||
}
|
||||
|
||||
function onCoverError(song: Song) {
|
||||
failedCovers.value.add(song.id)
|
||||
failedCovers.value = new Set(failedCovers.value)
|
||||
}
|
||||
|
||||
function fetchCoversFor(songs: Song[]) {
|
||||
for (const song of songs) {
|
||||
if (song.coverUrl || fetchedCovers.has(song.id)) continue
|
||||
fetchMusicCover(song.title, song.artist, song.album).then((url) => {
|
||||
if (url) fetchedCovers.set(song.id, url)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => fetchCoversFor(props.songs))
|
||||
watch(() => props.songs, (songs) => fetchCoversFor(songs), { immediate: false })
|
||||
|
||||
const topGenres = computed(() => {
|
||||
const counts = new Map<string, number>()
|
||||
for (const s of props.songs) {
|
||||
for (const g of s.genres ?? []) {
|
||||
counts.set(g, (counts.get(g) ?? 0) + 1)
|
||||
}
|
||||
}
|
||||
return [...counts.entries()]
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.slice(0, 8)
|
||||
.map(([g]) => g)
|
||||
})
|
||||
|
||||
const filteredSongs = computed(() => {
|
||||
let result = props.songs
|
||||
if (search.value) {
|
||||
const q = search.value.toLowerCase()
|
||||
result = result.filter(
|
||||
(s) =>
|
||||
s.title.toLowerCase().includes(q) ||
|
||||
s.artist.toLowerCase().includes(q) ||
|
||||
(s.album ?? '').toLowerCase().includes(q)
|
||||
)
|
||||
}
|
||||
if (activeGenre.value) {
|
||||
result = result.filter((s) => (s.genres ?? []).includes(activeGenre.value!))
|
||||
}
|
||||
return result
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user