Spaces:
Sleeping
Sleeping
File size: 2,641 Bytes
f871fed |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
'use client'
import { useState, useEffect } from 'react'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
import { ChevronDown, ChevronRight, Settings } from 'lucide-react'
import { useDefaultPrompt, useUpdateDefaultPrompt } from '@/lib/hooks/use-transformations'
export function DefaultPromptEditor() {
const [isOpen, setIsOpen] = useState(false)
const [prompt, setPrompt] = useState('')
const { data: defaultPrompt, isLoading } = useDefaultPrompt()
const updateDefaultPrompt = useUpdateDefaultPrompt()
useEffect(() => {
if (defaultPrompt) {
setPrompt(defaultPrompt.transformation_instructions || '')
}
}, [defaultPrompt])
const handleSave = () => {
updateDefaultPrompt.mutate({ transformation_instructions: prompt })
}
return (
<Collapsible open={isOpen} onOpenChange={setIsOpen}>
<Card>
<CollapsibleTrigger className="w-full">
<CardHeader className="cursor-pointer">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Settings className="h-5 w-5" />
<div className="text-left">
<CardTitle className="text-lg">Default Transformation Prompt</CardTitle>
<CardDescription>
This will be added to all your transformation prompts
</CardDescription>
</div>
</div>
{isOpen ? (
<ChevronDown className="h-5 w-5" />
) : (
<ChevronRight className="h-5 w-5" />
)}
</div>
</CardHeader>
</CollapsibleTrigger>
<CollapsibleContent>
<CardContent className="space-y-4">
<Textarea
value={prompt}
onChange={(e) => setPrompt(e.target.value)}
placeholder="Enter your default transformation instructions..."
className="min-h-[200px] font-mono text-sm"
disabled={isLoading}
/>
<div className="flex justify-end">
<Button
onClick={handleSave}
disabled={isLoading || updateDefaultPrompt.isPending}
>
Save
</Button>
</div>
</CardContent>
</CollapsibleContent>
</Card>
</Collapsible>
)
} |