48 lines
1.9 KiB
TypeScript
48 lines
1.9 KiB
TypeScript
import { useState } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import * as Icons from "lucide-react"
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import { AuroraButton } from "@/components/effect/aurora-button"
|
|
import confetti from "canvas-confetti"
|
|
import type { PlanFull } from "./planQueries"
|
|
|
|
export function AdjustAIButton({ plan }: { plan: PlanFull }) {
|
|
const [open, setOpen] = useState(false)
|
|
const [prompt, setPrompt] = useState('')
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
async function apply() {
|
|
setLoading(true)
|
|
await fetch(`${import.meta.env.VITE_BACK_ORIGIN}/api/mejorar/plan`, {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ prompt, plan_id: plan.id }),
|
|
}).catch(() => { })
|
|
setLoading(false)
|
|
confetti({ particleCount: 120, spread: 80, origin: { y: 0.6 } })
|
|
setOpen(false)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Button onClick={() => setOpen(true)}>
|
|
<Icons.Sparkles className="w-4 h-4 mr-2" /> Ajustar con IA
|
|
</Button>
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogContent className="max-w-lg">
|
|
<DialogHeader>
|
|
<DialogTitle className="font-mono" >Ajustar con IA</DialogTitle>
|
|
<DialogDescription>Describe cómo quieres modificar el plan actual.</DialogDescription>
|
|
</DialogHeader>
|
|
<Textarea value={prompt} onChange={(e) => setPrompt(e.target.value)} placeholder="Ej.: Enfatiza ciberseguridad y proyectos prácticos…" className="min-h-[120px]" />
|
|
<DialogFooter>
|
|
<AuroraButton onClick={apply} disabled={!prompt.trim() || loading}>
|
|
{loading ? 'Aplicando…' : 'Aplicar ajuste'}
|
|
</AuroraButton>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
)
|
|
}
|