diff --git a/app/src/components/Generation/FloatingGenerateBox.tsx b/app/src/components/Generation/FloatingGenerateBox.tsx index 1ba4f0fe..96e8f553 100644 --- a/app/src/components/Generation/FloatingGenerateBox.tsx +++ b/app/src/components/Generation/FloatingGenerateBox.tsx @@ -1,8 +1,8 @@ +import { useQuery } from '@tanstack/react-query'; import { useMatchRoute } from '@tanstack/react-router'; import { AnimatePresence, motion } from 'framer-motion'; -import { Loader2, SlidersHorizontal, Sparkles } from 'lucide-react'; +import { Loader2, Sparkles } from 'lucide-react'; import { useEffect, useRef, useState } from 'react'; -import { EffectsChainEditor } from '@/components/Effects/EffectsChainEditor'; import { Button } from '@/components/ui/button'; import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form'; import { @@ -13,7 +13,7 @@ import { SelectValue, } from '@/components/ui/select'; import { Textarea } from '@/components/ui/textarea'; -import type { EffectConfig } from '@/lib/api/types'; +import { apiClient } from '@/lib/api/client'; import { getLanguageOptionsForEngine, type LanguageCode } from '@/lib/constants/languages'; import { useGenerationForm } from '@/lib/hooks/useGenerationForm'; import { useProfile, useProfiles } from '@/lib/hooks/useProfiles'; @@ -39,8 +39,7 @@ export function FloatingGenerateBox({ const { data: selectedProfile } = useProfile(selectedProfileId || ''); const { data: profiles } = useProfiles(); const [isExpanded, setIsExpanded] = useState(false); - const [isInstructMode, setIsInstructMode] = useState(false); - const [effectsChain, setEffectsChain] = useState([]); + const [selectedPresetId, setSelectedPresetId] = useState(null); const containerRef = useRef(null); const textareaRef = useRef(null); const matchRoute = useMatchRoute(); @@ -50,18 +49,28 @@ export function FloatingGenerateBox({ const { data: currentStory } = useStory(selectedStoryId); const addPendingStoryAdd = useGenerationStore((s) => s.addPendingStoryAdd); + // Fetch effect presets for the dropdown + const { data: effectPresets } = useQuery({ + queryKey: ['effectPresets'], + queryFn: () => apiClient.listEffectPresets(), + }); + // Calculate if track editor is visible (on stories route with items) const hasTrackEditor = isStoriesRoute && currentStory && currentStory.items.length > 0; const { form, handleSubmit, isPending } = useGenerationForm({ onSuccess: async (generationId) => { setIsExpanded(false); - // Defer the story add until TTS completes — useGenerationProgress handles it + // Defer the story add until TTS completes -- useGenerationProgress handles it if (isStoriesRoute && selectedStoryId && generationId) { addPendingStoryAdd(generationId, selectedStoryId); } }, - getEffectsChain: () => (effectsChain.length > 0 ? effectsChain : undefined), + getEffectsChain: () => { + if (!selectedPresetId || !effectPresets) return undefined; + const preset = effectPresets.find((p) => p.id === selectedPresetId); + return preset?.effects_chain; + }, }); // Click away handler to collapse the box @@ -189,111 +198,57 @@ export function FloatingGenerateBox({
- - {/* Text field - hidden when in instruct mode */} -
- ( - - - - {form.watch('engine') === 'chatterbox_turbo' ? ( - setIsExpanded(true)} - onFocus={() => setIsExpanded(true)} - /> - ) : ( -