feat: Implement asset picker functionality and refactor history loading to refresh with new items instead of appending.

src/views/FlexibleGenerationView.vue

@@ -13,6 +13,7 @@ import MultiSelect from 'primevue/multiselect'
 import ProgressSpinner from 'primevue/progressspinner'
 import ProgressBar from 'primevue/progressbar'
 import Message from 'primevue/message'
+import Skeleton from 'primevue/skeleton'
 
 const router = useRouter()
 const API_URL = import.meta.env.VITE_API_URL
@@ -21,6 +22,12 @@ const API_URL = import.meta.env.VITE_API_URL
 const prompt = ref('')
 const selectedCharacter = ref(null)
 const selectedAssets = ref([])
+// Asset Picker State
+const isAssetPickerVisible = ref(false)
+const assetPickerTab = ref('all') // 'all', 'uploaded', 'generated'
+const modalAssets = ref([])
+const isModalLoading = ref(false)
+const tempSelectedAssets = ref([])
 const quality = ref({ key: 'TWOK', value: '2K' })
 const aspectRatio = ref({ key: "NINESIXTEEN", value: "9:16" })
 const sendToTelegram = ref(false)
@@ -34,7 +41,7 @@ const characters = ref([])
 const allAssets = ref([])
 const historyGenerations = ref([])
 const historyTotal = ref(0)
-const historyRows = ref(20)
+const historyRows = ref(50)
 const historyFirst = ref(0)
 
 const isSettingsVisible = ref(false)
@@ -43,7 +50,7 @@ const generationStatus = ref('')
 const generationProgress = ref(0)
 const generationError = ref(null)
 const generatedResult = ref(null) // For immediate feedback if needed
-const isLoadingMore = ref(false)
+const activeOverlayId = ref(null) // For mobile tap-to-show overlay
 
 // Options
 const qualityOptions = ref([
@@ -159,31 +166,35 @@ const loadData = async () => {
     }
 }
 
-const loadMoreHistory = async () => {
+const refreshHistory = async () => {
-    if (isLoadingMore.value || historyGenerations.value.length >= historyTotal.value) return
-
-    isLoadingMore.value = true
-    historyFirst.value += historyRows.value
-
     try {
-        const response = await aiService.getGenerations(historyRows.value, historyFirst.value)
+        const response = await aiService.getGenerations(historyRows.value, 0)
         if (response && response.generations) {
-            historyGenerations.value = [...historyGenerations.value, ...response.generations]
+            // Update existing items and add new ones at the top
+            const newGenerations = []
+            for (const gen of response.generations) {
+                const existingIndex = historyGenerations.value.findIndex(g => g.id === gen.id)
+                if (existingIndex !== -1) {
+                    // Update existing item in place to preserve state/reactivity
+                    Object.assign(historyGenerations.value[existingIndex], gen)
+                } else {
+                    newGenerations.push(gen)
+                }
+            }
+
+            // Add completely new items to the start of the list
+            if (newGenerations.length > 0) {
+                historyGenerations.value = [...newGenerations, ...historyGenerations.value]
+            }
+
             historyTotal.value = response.total_count || historyTotal.value
         }
     } catch (e) {
-        console.error('Failed to load more history', e)
+        console.error('Failed to refresh history', e)
-    } finally {
-        isLoadingMore.value = false
     }
 }
 
-const onScroll = (event) => {
+
-    const { scrollTop, clientHeight, scrollHeight } = event.target
-    if (scrollTop + clientHeight >= scrollHeight - 50) {
-        loadMoreHistory()
-    }
-}
 
 // --- Generation ---
 const handleGenerate = async () => {
@@ -240,12 +251,8 @@ const pollStatus = async (id) => {
             if (response.status === 'done') {
                 completed = true
 
-                // Refresh history to show new item
+                // Refresh history to show new item without resetting list
-                const historyRes = await aiService.getGenerations(historyRows.value, 0)
+                await refreshHistory()
-                if (historyRes && historyRes.generations) {
-                    historyGenerations.value = historyRes.generations
-                    historyTotal.value = historyRes.total_count || 0
-                }
             } else if (response.status === 'failed') {
                 completed = true
                 generationError.value = response.failed_reason || 'Generation failed'
@@ -265,9 +272,6 @@ const pollStatus = async (id) => {
 // --- Initial Load ---
 onMounted(() => {
     loadData()
-    // Open settings by default if it's a new user or explicitly requested? 
-    // Maybe better to keep it closed or open based on layout preference.
-    // Let's keep it open initially for better UX as they likely want to generate.
     isSettingsVisible.value = true
 })
 
@@ -371,15 +375,73 @@ const deleteGeneration = async (gen) => {
     }
 }
 
+const toggleMobileOverlay = (id) => {
+    // Only for touch/small screens if needed, or just general tap behavior
+    if (activeOverlayId.value === id) {
+        activeOverlayId.value = null
+    } else {
+        activeOverlayId.value = id
+    }
+}
+
+// --- Asset Picker Logic ---
+
+const loadModalAssets = async () => {
+    isModalLoading.value = true
+    try {
+        const typeParam = assetPickerTab.value === 'all' ? undefined : assetPickerTab.value
+        // Use a larger limit for the modal or implement scrolling/pagination if needed. 
+        // For now, 100 should be enough for a demo, or we can add pagination later.
+        const response = await dataService.getAssets(100, 0, typeParam)
+
+        if (response && response.assets) {
+            modalAssets.value = response.assets
+        } else {
+            modalAssets.value = Array.isArray(response) ? response : []
+        }
+    } catch (e) {
+        console.error('Failed to load modal assets', e)
+        modalAssets.value = []
+    } finally {
+        isModalLoading.value = false
+    }
+}
+
+const openAssetPicker = () => {
+    tempSelectedAssets.value = [...selectedAssets.value]
+    isAssetPickerVisible.value = true
+    loadModalAssets()
+}
+
+const toggleAssetSelection = (asset) => {
+    const index = tempSelectedAssets.value.findIndex(a => a.id === asset.id)
+    if (index === -1) {
+        tempSelectedAssets.value.push(asset)
+    } else {
+        tempSelectedAssets.value.splice(index, 1)
+    }
+}
+
+const confirmAssetSelection = () => {
+    selectedAssets.value = [...tempSelectedAssets.value]
+    isAssetPickerVisible.value = false
+}
+
+const removeAsset = (asset) => {
+    selectedAssets.value = selectedAssets.value.filter(a => a.id !== asset.id)
+}
+
+watch(assetPickerTab, () => {
+    if (isAssetPickerVisible.value) {
+        loadModalAssets()
+    }
+})
+
 </script>
 
 <template>
     <div class="flex flex-col h-full font-sans">
-        <!-- Sidebar and Mobile Nav removed (handled by App.vue) -->
-
-        <!-- Main Content -->
         <main class="flex-1 relative flex flex-col h-full overflow-hidden">
-            <!-- Header -->
             <header
                 class="p-4 flex justify-between items-center z-10 border-b border-white/5 bg-slate-900/80 backdrop-blur-sm">
                 <div class="flex items-center gap-3">
@@ -388,27 +450,27 @@ const deleteGeneration = async (gen) => {
                         Gallery</h1>
                     <span class="text-xs text-slate-500 border-l border-white/10 pl-3">History</span>
                 </div>
-                <Button icon="pi pi-cog" @click="isSettingsVisible = true" rounded text
+                <div class="flex items-center gap-2">
-                    class="!text-slate-400 hover:!bg-white/10 !w-8 !h-8" v-if="!isSettingsVisible" />
+                    <Button icon="pi pi-refresh" @click="refreshHistory" rounded text
+                        class="!text-slate-400 hover:!bg-white/10 !w-8 !h-8 md:hidden" />
+                    <Button icon="pi pi-cog" @click="isSettingsVisible = true" rounded text
+                        class="!text-slate-400 hover:!bg-white/10 !w-8 !h-8" v-if="!isSettingsVisible" />
+                </div>
             </header>
 
-            <!-- Gallery Grid -->
+            <div class="flex-1 overflow-y-auto p-4"
-            <div class="flex-1 overflow-y-auto p-4 pb-32 md:pb-32" @scroll="onScroll">
+                :class="{ 'pb-[300px]': isSettingsVisible, 'pb-32': !isSettingsVisible }">
-                <!-- pb-32 to allow space for bottom panel -->
-
                 <div v-if="historyGenerations.length > 0"
-                    class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-2 md:gap-1">
+                    class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-6 gap-2 md:gap-1">
                     <div v-for="gen in historyGenerations" :key="gen.id"
-                        class="aspect-[9/16] relative group overflow-hidden bg-slate-800 transition-all duration-300">
+                        class="aspect-[9/16] relative group overflow-hidden bg-slate-800 transition-all duration-300"
+                        @click="toggleMobileOverlay(gen.id)">
 
-                        <!-- Image -->
-                        <!-- Image -->
                         <img v-if="gen.result_list && gen.result_list.length > 0"
                             :src="API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true'"
                             class="w-full h-full object-cover cursor-pointer"
-                            @click="openImagePreview(API_URL + '/assets/' + gen.result_list[0])" />
+                            @click.stop="openImagePreview(API_URL + '/assets/' + gen.result_list[0])" />
 
-                        <!-- Failed State -->
                         <div v-else-if="gen.status === 'failed'"
                             class="w-full h-full flex flex-col items-center justify-center p-2 text-center bg-red-500/10 border border-red-500/20">
                             <i class="pi pi-times-circle text-red-500 text-2xl mb-1"></i>
@@ -418,35 +480,26 @@ const deleteGeneration = async (gen) => {
                                 v-tooltip.top="gen.failed_reason">{{ gen.failed_reason }}</span>
                         </div>
 
-                        <!-- Processing State -->
                         <div v-else-if="gen.status === 'processing' || gen.status === 'starting'"
                             class="w-full h-full flex flex-col items-center justify-center bg-slate-800/50 border border-violet-500/20">
                             <i class="pi pi-spin pi-spinner text-violet-500 text-xl mb-2"></i>
                             <span class="text-[10px] text-violet-300/70">Creating...</span>
                         </div>
 
-                        <!-- Placeholder -->
                         <div v-else class="w-full h-full flex items-center justify-center text-slate-600 bg-slate-800">
                             <i class="pi pi-image text-4xl opacity-20"></i>
                         </div>
 
-                        <!-- Overlay Info -->
+                        <div class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-2"
-                        <div
+                            :class="{ 'opacity-0 group-hover:opacity-100': activeOverlayId !== gen.id, 'opacity-100': activeOverlayId === gen.id }">
-                            class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col justify-between p-2">
 
-                            <!-- Top Actions -->
                             <div
-                                class="flex justify-between items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200 w-full">
+                                class="flex justify-between items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200 w-full z-10">
                                 <Button icon="pi pi-trash" v-tooltip.right="'Delete'"
                                     class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white"
                                     @click.stop="deleteGeneration(gen)" />
 
                                 <div class="flex gap-1">
-                                    <Button v-if="gen.result_list && gen.result_list.length > 0" icon="pi pi-eye"
-                                        v-tooltip.left="'View Full'"
-                                        class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-blue-500"
-                                        @click.stop="openImagePreview(API_URL + '/assets/' + gen.result_list[0])" />
-
                                     <Button v-if="gen.result_list && gen.result_list.length > 0" icon="pi pi-pencil"
                                         v-tooltip.left="'Edit (Use Result)'"
                                         class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
@@ -454,8 +507,16 @@ const deleteGeneration = async (gen) => {
                                 </div>
                             </div>
 
-                            <!-- Bottom Actions -->
+                            <!-- Centered View Button -->
-                            <div class="translate-y-[10px] group-hover:translate-y-0 transition-transform duration-200">
+                            <div v-if="gen.result_list && gen.result_list.length > 0"
+                                class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">
+                                <Button icon="pi pi-eye" rounded text
+                                    class="!bg-black/50 !text-white !w-12 !h-12 !rounded-full hover:!bg-black/70 hover:!scale-110 transition-all pointer-events-auto !border-2 !border-white/20"
+                                    @click.stop="openImagePreview(API_URL + '/assets/' + gen.result_list[0])" />
+                            </div>
+
+                            <div
+                                class="translate-y-[10px] group-hover:translate-y-0 transition-transform duration-200 z-10">
                                 <div class="flex gap-1 mb-1">
                                     <Button icon="pi pi-comment" v-tooltip.bottom="'Reuse Prompt'"
                                         class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
@@ -477,170 +538,151 @@ const deleteGeneration = async (gen) => {
                 </div>
             </div>
 
-            <!-- Bottom Settings Panel -->
+            <div v-if="isSettingsVisible"
-            <transition name="slide-up">
+                class="absolute bottom-2 left-1/2 -translate-x-1/2 w-[98%] max-w-6xl glass-panel border border-white/10 bg-slate-900/95 backdrop-blur-xl p-4 z-[60] !rounded-[2.5rem] shadow-2xl flex flex-col gap-3 max-h-[85vh] overflow-y-auto">
-                <div v-if="isSettingsVisible"
-                    class="absolute bottom-0 left-0 right-0 glass-panel border-t border-white/10 bg-slate-900/95 backdrop-blur-xl p-6 z-[60] rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.5)] flex flex-col gap-4 max-h-[85vh] overflow-y-auto">
-
-                    <!-- Handle / Close Button -->
-                    <div class="w-full flex justify-center -mt-2 mb-2 cursor-pointer"
-                        @click="isSettingsVisible = false">
-                        <div class="w-16 h-1 bg-white/20 rounded-full hover:bg-white/40 transition-colors"></div>
-                    </div>
-
-                    <div class="flex flex-col lg:flex-row gap-8">
-                        <!-- Left Column: Inputs -->
-                        <div class="flex-1 flex flex-col gap-4">
-                            <!-- Prompt -->
-                            <div class="flex flex-col gap-2">
-                                <div class="flex justify-between items-center">
-                                    <label
-                                        class="text-xs font-bold text-slate-400 uppercase tracking-wider">Prompt</label>
-                                    <div class="flex gap-1">
-                                        <Button v-if="previousPrompt" icon="pi pi-undo"
-                                            class="!p-1 !w-6 !h-6 !text-[10px] !bg-slate-800 hover:!bg-slate-700 !border-white/10 !text-slate-300"
-                                            @click="undoImprovePrompt" v-tooltip.top="'Undo'" />
-                                        <Button icon="pi pi-sparkles" label="Improve" :loading="isImprovingPrompt"
-                                            :disabled="!prompt || prompt.length <= 10"
-                                            class="!py-0.5 !px-2 !text-[10px] !h-6 !bg-violet-600/20 hover:!bg-violet-600/30 !border-violet-500/30 !text-violet-400 disabled:opacity-50"
-                                            @click="handleImprovePrompt" />
-                                        <Button icon="pi pi-times" label="Clear"
-                                            class="!py-0.5 !px-2 !text-[10px] !h-6 !bg-slate-800 hover:!bg-slate-700 !border-white/10 !text-slate-400"
-                                            @click="clearPrompt" />
-                                    </div>
-                                </div>
-                                <Textarea v-model="prompt" rows="3" autoResize
-                                    placeholder="Describe what you want to create..."
-                                    class="w-full bg-slate-800 border-white/10 text-white rounded-xl p-3 focus:border-violet-500 focus:ring-1 focus:ring-violet-500/50 transition-all resize-none shadow-inner" />
-
-                            </div>
-
-                            <!-- Assets & Character Row -->
-                            <div class="flex flex-col md:flex-row gap-4">
-                                <div class="flex-1 flex flex-col gap-2">
-                                    <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Character
-                                        (Optional)</label>
-                                    <Dropdown v-model="selectedCharacter" :options="characters" optionLabel="name"
-                                        placeholder="Select Character" filter showClear
-                                        class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl" :pt="{
-                                            root: { class: '!bg-slate-800' },
-                                            input: { class: '!text-white' },
-                                            trigger: { class: '!text-slate-400' },
-                                            panel: { class: '!bg-slate-800 !border-white/10' },
-                                            item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' }
-                                        }">
-                                        <template #value="slotProps">
-                                            <div v-if="slotProps.value" class="flex items-center gap-2">
-                                                <img v-if="slotProps.value.avatar_image"
-                                                    :src="API_URL + slotProps.value.avatar_image"
-                                                    class="w-6 h-6 rounded-full object-cover" />
-                                                <span>{{ slotProps.value.name }}</span>
-                                            </div>
-                                            <span v-else>{{ slotProps.placeholder }}</span>
-                                        </template>
-                                        <template #option="slotProps">
-                                            <div class="flex items-center gap-2">
-                                                <img v-if="slotProps.option.avatar_image"
-                                                    :src="API_URL + slotProps.option.avatar_image"
-                                                    class="w-8 h-8 rounded-full object-cover" />
-                                                <span>{{ slotProps.option.name }}</span>
-                                            </div>
-                                        </template>
-                                    </Dropdown>
-
-                                    <div v-if="selectedCharacter"
-                                        class="flex items-center gap-2 mt-2 px-1 animate-in fade-in slide-in-from-top-1">
-                                        <Checkbox v-model="useProfileImage" :binary="true" inputId="use-profile-img" />
-                                        <label for="use-profile-img"
-                                            class="text-xs text-slate-300 cursor-pointer select-none">Use Character
-                                            Photo</label>
-                                    </div>
-                                </div>
-
-                                <div class="flex-1 flex flex-col gap-2">
-                                    <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Reference
-                                        Assets</label>
-                                    <MultiSelect v-model="selectedAssets" :options="allAssets" optionLabel="id"
-                                        placeholder="Select Assets" display="chip"
-                                        class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl" :pt="{
-                                            root: { class: '!bg-slate-800' },
-                                            labelContainer: { class: '!text-white' },
-                                            trigger: { class: '!text-slate-400' },
-                                            panel: { class: '!bg-slate-800 !border-white/10' },
-                                            item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' },
-                                            token: { class: '!bg-violet-600/30 !text-violet-200' }
-                                        }">
-                                        <template #option="slotProps">
-                                            <div class="flex items-center gap-2">
-                                                <img :src="API_URL + slotProps.option.url + '?thumbnail=true'"
-                                                    class="w-8 h-8 rounded object-cover border border-white/10" />
-                                                <span class="text-xs truncate max-w-[150px]">{{
-                                                    slotProps.option.name ||
-                                                    'Asset ' + slotProps.option.id.substring(0, 4) }}</span>
-                                            </div>
-                                        </template>
-                                    </MultiSelect>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Right Column: Specs & Action -->
-                        <div class="w-full lg:w-80 flex flex-col gap-4">
-                            <!-- Specs -->
-                            <div class="grid grid-cols-2 gap-4">
-                                <div class="flex flex-col gap-2">
-                                    <label
-                                        class="text-xs font-bold text-slate-400 uppercase tracking-wider">Quality</label>
-                                    <Dropdown v-model="quality" :options="qualityOptions" optionLabel="value"
-                                        class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl"
-                                        :pt="{ input: { class: '!text-white' }, trigger: { class: '!text-slate-400' }, panel: { class: '!bg-slate-800 !border-white/10' }, item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' } }" />
-                                </div>
-                                <div class="flex flex-col gap-2">
-                                    <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Aspect
-                                        Ratio</label>
-                                    <Dropdown v-model="aspectRatio" :options="aspectRatioOptions" optionLabel="value"
-                                        class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl"
-                                        :pt="{ input: { class: '!text-white' }, trigger: { class: '!text-slate-400' }, panel: { class: '!bg-slate-800 !border-white/10' }, item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' } }" />
-                                </div>
-                            </div>
-
-                            <!-- Telegram -->
-                            <div class="flex flex-col gap-2 bg-slate-800/50 p-3 rounded-xl border border-white/5">
-                                <div class="flex items-center gap-2">
-                                    <Checkbox v-model="sendToTelegram" :binary="true" inputId="tg-check" />
-                                    <label for="tg-check" class="text-xs text-slate-300 cursor-pointer">Send to
-                                        Telegram</label>
-                                </div>
-                                <div v-if="sendToTelegram" class="animate-in fade-in slide-in-from-top-1">
-                                    <InputText v-model="telegramId" placeholder="Telegram ID"
-                                        class="w-full !text-xs !bg-slate-900 !border-white/10 !text-white !py-1.5" />
-                                </div>
-                            </div>
-
-                            <!-- Generate Button -->
-                            <div class="mt-auto">
-                                <Button :label="isGenerating ? 'Generating...' : 'Generate'"
-                                    :icon="isGenerating ? 'pi pi-spin pi-spinner' : 'pi pi-sparkles'"
-                                    :loading="isGenerating" @click="handleGenerate"
-                                    class="w-full !py-3 !text-base !font-bold !bg-gradient-to-r from-violet-600 to-cyan-500 !border-none !rounded-xl !shadow-lg !shadow-violet-500/20 hover:!scale-[1.02] transition-all" />
-
-                                <div v-if="isGenerating" class="mt-2 text-center">
-                                    <ProgressBar :value="generationProgress" class="h-1 bg-slate-700"
-                                        :pt="{ value: { class: '!bg-violet-500' } }" :showValue="false" />
-                                    <span class="text-[10px] text-slate-500">{{ generationStatus }}</span>
-                                </div>
-                                <div v-if="generationError"
-                                    class="mt-2 text-center text-xs text-red-400 bg-red-500/10 p-2 rounded border border-red-500/20">
-                                    {{ generationError }}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
 
+                <div class="w-full flex justify-center -mt-2 mb-2 cursor-pointer" @click="isSettingsVisible = false">
+                    <div class="w-16 h-1 bg-white/20 rounded-full hover:bg-white/40 transition-colors"></div>
                 </div>
-            </transition>
 
-            <!-- Toggle Button (when hidden) -->
+                <div class="flex flex-col lg:flex-row gap-8">
+                    <div class="flex-1 flex flex-col gap-4">
+                        <div class="flex flex-col gap-2">
+                            <div class="flex justify-between items-center">
+                                <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Prompt</label>
+                                <div class="flex gap-1">
+                                    <Button v-if="previousPrompt" icon="pi pi-undo"
+                                        class="!p-1 !w-6 !h-6 !text-[10px] !bg-slate-800 hover:!bg-slate-700 !border-white/10 !text-slate-300"
+                                        @click="undoImprovePrompt" v-tooltip.top="'Undo'" />
+                                    <Button icon="pi pi-sparkles" label="Improve" :loading="isImprovingPrompt"
+                                        :disabled="!prompt || prompt.length <= 10"
+                                        class="!py-0.5 !px-2 !text-[10px] !h-6 !bg-violet-600/20 hover:!bg-violet-600/30 !border-violet-500/30 !text-violet-400 disabled:opacity-50"
+                                        @click="handleImprovePrompt" />
+                                    <Button icon="pi pi-times" label="Clear"
+                                        class="!py-0.5 !px-2 !text-[10px] !h-6 !bg-slate-800 hover:!bg-slate-700 !border-white/10 !text-slate-400"
+                                        @click="clearPrompt" />
+                                </div>
+                            </div>
+                            <Textarea v-model="prompt" rows="3" autoResize
+                                placeholder="Describe what you want to create..."
+                                class="w-full bg-slate-800 border-white/10 text-white rounded-xl p-3 focus:border-violet-500 focus:ring-1 focus:ring-violet-500/50 transition-all resize-none shadow-inner" />
+
+                        </div>
+
+                        <div class="flex flex-col md:flex-row gap-4">
+                            <div class="flex-1 flex flex-col gap-2">
+                                <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Character
+                                    (Optional)</label>
+                                <Dropdown v-model="selectedCharacter" :options="characters" optionLabel="name"
+                                    placeholder="Select Character" filter showClear
+                                    class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl" :pt="{
+                                        root: { class: '!bg-slate-800' },
+                                        input: { class: '!text-white' },
+                                        trigger: { class: '!text-slate-400' },
+                                        panel: { class: '!bg-slate-800 !border-white/10' },
+                                        item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' }
+                                    }">
+                                    <template #value="slotProps">
+                                        <div v-if="slotProps.value" class="flex items-center gap-2">
+                                            <img v-if="slotProps.value.avatar_image"
+                                                :src="API_URL + slotProps.value.avatar_image"
+                                                class="w-6 h-6 rounded-full object-cover" />
+                                            <span>{{ slotProps.value.name }}</span>
+                                        </div>
+                                        <span v-else>{{ slotProps.placeholder }}</span>
+                                    </template>
+                                    <template #option="slotProps">
+                                        <div class="flex items-center gap-2">
+                                            <img v-if="slotProps.option.avatar_image"
+                                                :src="API_URL + slotProps.option.avatar_image"
+                                                class="w-8 h-8 rounded-full object-cover" />
+                                            <span>{{ slotProps.option.name }}</span>
+                                        </div>
+                                    </template>
+                                </Dropdown>
+
+                                <div v-if="selectedCharacter"
+                                    class="flex items-center gap-2 mt-2 px-1 animate-in fade-in slide-in-from-top-1">
+                                    <Checkbox v-model="useProfileImage" :binary="true" inputId="use-profile-img" />
+                                    <label for="use-profile-img"
+                                        class="text-xs text-slate-300 cursor-pointer select-none">Use Character
+                                        Photo</label>
+                                </div>
+                            </div>
+
+                            <div class="flex-1 flex flex-col gap-2">
+                                <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Reference
+                                    Assets</label>
+                                <div @click="openAssetPicker"
+                                    class="w-full bg-slate-800 border border-white/10 rounded-xl p-3 min-h-[46px] cursor-pointer hover:bg-slate-700/50 transition-colors flex flex-wrap gap-2">
+                                    <span v-if="selectedAssets.length === 0"
+                                        class="text-slate-400 text-sm py-0.5">Select Assets</span>
+                                    <div v-for="asset in selectedAssets" :key="asset.id"
+                                        class="px-2 py-1 bg-violet-600/30 border border-violet-500/30 text-violet-200 text-xs rounded-md flex items-center gap-2 animate-in fade-in zoom-in duration-200"
+                                        @click.stop>
+                                        <img v-if="asset.url" :src="API_URL + asset.url + '?thumbnail=true'"
+                                            class="w-4 h-4 rounded object-cover" />
+                                        <span class="truncate max-w-[100px]">{{ asset.name || 'Asset ' + (asset.id ?
+                                            asset.id.substring(0, 4) : '') }}</span>
+                                        <i class="pi pi-times cursor-pointer hover:text-white"
+                                            @click.stop="removeAsset(asset)"></i>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="w-full lg:w-80 flex flex-col gap-4">
+                        <div class="grid grid-cols-2 gap-4">
+                            <div class="flex flex-col gap-2">
+                                <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Quality</label>
+                                <Dropdown v-model="quality" :options="qualityOptions" optionLabel="value"
+                                    class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl"
+                                    :pt="{ input: { class: '!text-white' }, trigger: { class: '!text-slate-400' }, panel: { class: '!bg-slate-800 !border-white/10' }, item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' } }" />
+                            </div>
+                            <div class="flex flex-col gap-2">
+                                <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Aspect
+                                    Ratio</label>
+                                <Dropdown v-model="aspectRatio" :options="aspectRatioOptions" optionLabel="value"
+                                    class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl"
+                                    :pt="{ input: { class: '!text-white' }, trigger: { class: '!text-slate-400' }, panel: { class: '!bg-slate-800 !border-white/10' }, item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' } }" />
+                            </div>
+                        </div>
+
+                        <div class="flex flex-col gap-2 bg-slate-800/50 p-3 rounded-xl border border-white/5">
+                            <div class="flex items-center gap-2">
+                                <Checkbox v-model="sendToTelegram" :binary="true" inputId="tg-check" />
+                                <label for="tg-check" class="text-xs text-slate-300 cursor-pointer">Send to
+                                    Telegram</label>
+                            </div>
+                            <div v-if="sendToTelegram" class="animate-in fade-in slide-in-from-top-1">
+                                <InputText v-model="telegramId" placeholder="Telegram ID"
+                                    class="w-full !text-xs !bg-slate-900 !border-white/10 !text-white !py-1.5" />
+                            </div>
+                        </div>
+
+                        <div class="mt-auto">
+                            <Button :label="isGenerating ? 'Generating...' : 'Generate'"
+                                :icon="isGenerating ? 'pi pi-spin pi-spinner' : 'pi pi-sparkles'"
+                                :loading="isGenerating" @click="handleGenerate"
+                                class="w-full !py-3 !text-base !font-bold !bg-gradient-to-r from-violet-600 to-cyan-500 !border-none !rounded-xl !shadow-lg !shadow-violet-500/20 hover:!scale-[1.02] transition-all" />
+
+                            <div v-if="isGenerating" class="mt-2 text-center">
+                                <ProgressBar :value="generationProgress" class="h-1 bg-slate-700"
+                                    :pt="{ value: { class: '!bg-violet-500' } }" :showValue="false" />
+                                <span class="text-[10px] text-slate-500">{{ generationStatus }}</span>
+                            </div>
+                            <div v-if="generationError"
+                                class="mt-2 text-center text-xs text-red-400 bg-red-500/10 p-2 rounded border border-red-500/20">
+                                {{ generationError }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
+
             <transition name="fade">
                 <div v-if="!isSettingsVisible" class="absolute bottom-24 md:bottom-8 left-1/2 -translate-x-1/2 z-10">
                     <Button label="Open Controls" icon="pi pi-chevron-up" @click="isSettingsVisible = true" rounded
@@ -652,7 +694,6 @@ const deleteGeneration = async (gen) => {
 
 
 
-        <!-- Image Preview Modal -->
         <Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
             :style="{ width: '90vw', maxWidth: '1000px', background: 'transparent', boxShadow: 'none' }"
             :pt="{ root: { class: '!bg-transparent !border-none !shadow-none' }, header: { class: '!hidden' }, content: { class: '!bg-transparent !p-0' } }">
@@ -664,6 +705,58 @@ const deleteGeneration = async (gen) => {
             </div>
         </Dialog>
 
+        <Dialog v-model:visible="isAssetPickerVisible" modal header="Select Assets"
+            :style="{ width: '80vw', maxWidth: '900px' }"
+            :pt="{ root: { class: '!bg-slate-900 !border !border-white/10' }, header: { class: '!bg-slate-900 !border-b !border-white/5 !text-white' }, content: { class: '!bg-slate-900 !p-0' }, footer: { class: '!bg-slate-900 !border-t !border-white/5 !p-4' }, closeButton: { class: '!text-slate-400 hover:!text-white' } }">
+            <div class="flex flex-col h-[70vh]">
+                <!-- Tabs -->
+                <div class="flex border-b border-white/5 px-4">
+                    <button v-for="tab in ['all', 'uploaded', 'generated']" :key="tab" @click="assetPickerTab = tab"
+                        class="px-4 py-3 text-sm font-medium border-b-2 transition-colors capitalize"
+                        :class="assetPickerTab === tab ? 'border-violet-500 text-violet-400' : 'border-transparent text-slate-400 hover:text-slate-200'">
+                        {{ tab }}
+                    </button>
+                </div>
+
+                <!-- Grid -->
+                <div class="flex-1 overflow-y-auto p-4 custom-scrollbar">
+                    <div v-if="isModalLoading" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
+                        <Skeleton v-for="i in 10" :key="i" height="150px" class="!bg-slate-800 rounded-xl" />
+                    </div>
+                    <div v-else-if="modalAssets.length > 0"
+                        class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
+                        <div v-for="asset in modalAssets" :key="asset.id" @click="toggleAssetSelection(asset)"
+                            class="relative aspect-square rounded-xl overflow-hidden cursor-pointer border-2 transition-all group"
+                            :class="tempSelectedAssets.some(a => a.id === asset.id) ? 'border-violet-500 ring-2 ring-violet-500/30' : 'border-transparent hover:border-white/20'">
+                            <img :src="API_URL + asset.url + '?thumbnail=true'" class="w-full h-full object-cover" />
+                            <div class="absolute bottom-0 left-0 right-0 p-2 bg-black/60 backdrop-blur-sm">
+                                <p class="text-[10px] text-white truncate">{{ asset.name || 'Asset ' + (asset.id ?
+                                    asset.id.substring(0, 4) : '') }}</p>
+                            </div>
+                            <!-- Checkmark -->
+                            <div v-if="tempSelectedAssets.some(a => a.id === asset.id)"
+                                class="absolute top-2 right-2 w-6 h-6 bg-violet-500 rounded-full flex items-center justify-center shadow-lg animate-in zoom-in duration-200">
+                                <i class="pi pi-check text-white text-xs"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-else class="flex flex-col items-center justify-center h-full text-slate-500">
+                        <i class="pi pi-image text-4xl mb-2 opacity-50"></i>
+                        <p>No assets found</p>
+                    </div>
+                </div>
+            </div>
+
+            <template #footer>
+                <div class="flex justify-end gap-2">
+                    <Button label="Cancel" @click="isAssetPickerVisible = false"
+                        class="!text-slate-300 hover:!bg-white/5" text />
+                    <Button :label="'Select (' + tempSelectedAssets.length + ')'" @click="confirmAssetSelection"
+                        class="!bg-violet-600 !border-none hover:!bg-violet-500" />
+                </div>
+            </template>
+        </Dialog>
+
     </div>
 </template>
 
@@ -712,4 +805,4 @@ const deleteGeneration = async (gen) => {
 .overflow-y-auto::-webkit-scrollbar-thumb:hover {
     background: rgba(255, 255, 255, 0.2);
 }
-</style>
+</style>