Nova versao codex Parecer, atualizacao completa
This commit is contained in:
Vitex Tecnologia
@@ -0,0 +1,423 @@
|
||||
import React, { useState, useEffect, useRef, forwardRef } from "react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import { ArrowLeft, ArrowRight, Sparkles, User } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
import { ShimmerButton } from "@/components/ui/shimmer-button";
|
||||
import { SparklesText } from "@/components/ui/sparkles-text";
|
||||
import { InteractiveHoverButton } from "@/components/ui/interactive-hover-button";
|
||||
import { BorderBeam } from "@/components/ui/border-beam";
|
||||
import { AnimatedShinyText } from "@/components/ui/animated-shiny-text";
|
||||
import { Confetti, type ConfettiRef } from "@/components/ui/confetti";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { usePrompts } from "@/contexts/PromptsContext";
|
||||
import { areasService, type AreaItem } from "@/services/areas";
|
||||
import { PromptGeneratingScreen } from "@/components/prompts/PromptGeneratingScreen";
|
||||
import { assistentePromptsService } from "@/services/assistentePrompts";
|
||||
import { promptsService } from "@/services/promptsApi";
|
||||
import { toast } from "sonner";
|
||||
import { playSuccessSound } from "@/utils/sound";
|
||||
|
||||
export function PromptsFormView() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { prompts, setPrompts } = usePrompts();
|
||||
const isEdit = Boolean(id);
|
||||
|
||||
const prompt = id ? prompts.find((p) => p.id === id) : null;
|
||||
|
||||
const [areaItems, setAreaItems] = useState<AreaItem[]>([]);
|
||||
const [areasLoading, setAreasLoading] = useState(true);
|
||||
|
||||
const [titulo, setTitulo] = useState("");
|
||||
const [descricao, setDescricao] = useState("");
|
||||
const [areaId, setAreaId] = useState("");
|
||||
const [conteudo, setConteudo] = useState("");
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
const [isAssistantOpen, setIsAssistantOpen] = useState(false);
|
||||
const [assistantMode, setAssistantMode] = useState<"create" | "refine">("create");
|
||||
const [assistantInstructions, setAssistantInstructions] = useState("");
|
||||
const [isAssistantLoading, setIsAssistantLoading] = useState(false);
|
||||
const [isAssistantWorkingInBackground, setIsAssistantWorkingInBackground] = useState(false);
|
||||
const [showGeneratingModal, setShowGeneratingModal] = useState(false);
|
||||
|
||||
const confettiRef = useRef<ConfettiRef>(null);
|
||||
const abortControllerRef = useRef<AbortController | null>(null);
|
||||
|
||||
const hasContent = conteudo.trim().length > 0;
|
||||
|
||||
const effectiveAreaId = areaId && areaItems.some((a) => a.id === areaId) ? areaId : (areaItems[0]?.id ?? "");
|
||||
const effectiveAreaName = areaItems.find((a) => a.id === effectiveAreaId)?.nome ?? "";
|
||||
|
||||
useEffect(() => {
|
||||
setAreasLoading(true);
|
||||
areasService.listarTotal()
|
||||
.then((data) => setAreaItems(data))
|
||||
.catch(() => setAreaItems([]))
|
||||
.finally(() => setAreasLoading(false));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (prompt) {
|
||||
setTitulo(prompt.titulo);
|
||||
setDescricao(prompt.descricao ?? "");
|
||||
setAreaId(prompt.area_id ?? "");
|
||||
setConteudo(prompt.conteudo ?? "");
|
||||
} else if (!id) {
|
||||
setTitulo("");
|
||||
setDescricao("");
|
||||
setAreaId("");
|
||||
setConteudo("");
|
||||
}
|
||||
}, [prompt, id]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id && areaItems.length > 0 && !areaId) {
|
||||
setAreaId(areaItems[0].id);
|
||||
}
|
||||
}, [id, areaItems, areaId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (id && !prompt && prompts.length > 0) {
|
||||
navigate("/codex/prompts", { replace: true });
|
||||
}
|
||||
}, [id, prompt, prompts.length, navigate]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!conteudo.trim() && assistantMode === "refine") {
|
||||
setAssistantMode("create");
|
||||
}
|
||||
}, [conteudo, assistantMode]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
abortControllerRef.current?.abort();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleSave = async () => {
|
||||
const finalTitulo = titulo.trim();
|
||||
const finalAreaId = effectiveAreaId;
|
||||
const finalConteudo = conteudo.trim();
|
||||
if (!finalTitulo || !finalAreaId) {
|
||||
toast.error("Preencha o título e a área.");
|
||||
return;
|
||||
}
|
||||
if (!finalConteudo) {
|
||||
toast.error("Preencha o conteúdo do prompt.");
|
||||
return;
|
||||
}
|
||||
const finalAreaName = areaItems.find((a) => a.id === finalAreaId)?.nome ?? "";
|
||||
const finalDescricao = descricao.trim();
|
||||
|
||||
setIsSaving(true);
|
||||
try {
|
||||
if (isEdit && prompt) {
|
||||
const res = await promptsService.editar(prompt.id, {
|
||||
titulo: finalTitulo,
|
||||
descricao: finalDescricao,
|
||||
area_id: finalAreaId,
|
||||
conteudo: finalConteudo,
|
||||
});
|
||||
setPrompts((prev) =>
|
||||
prev.map((p) =>
|
||||
p.id === prompt.id
|
||||
? { ...p, id: res.id, titulo: res.titulo, area: finalAreaName, area_id: res.area_id, descricao: finalDescricao || undefined, conteudo: res.conteudo ?? "" }
|
||||
: p
|
||||
)
|
||||
);
|
||||
toast.success("Prompt atualizado.");
|
||||
} else {
|
||||
const res = await promptsService.criar({
|
||||
titulo: finalTitulo,
|
||||
descricao: finalDescricao,
|
||||
area_id: finalAreaId,
|
||||
conteudo: finalConteudo,
|
||||
});
|
||||
setPrompts((prev) => [...prev, { id: res.id, titulo: res.titulo, area: finalAreaName, area_id: finalAreaId, descricao: finalDescricao || undefined, conteudo: res.conteudo ?? "" }]);
|
||||
toast.success("Prompt criado.");
|
||||
}
|
||||
navigate("/codex/prompts");
|
||||
} catch (e: unknown) {
|
||||
const message = e && typeof e === "object" && "message" in e ? (e as { message: string }).message : "Erro ao salvar.";
|
||||
toast.error(message);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAssistantSubmit = () => {
|
||||
if (!assistantInstructions.trim()) {
|
||||
toast.error("Preencha as instruções.");
|
||||
return;
|
||||
}
|
||||
if (assistantMode === "refine" && !conteudo.trim()) {
|
||||
toast.error("Não há conteúdo para melhorar.");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsAssistantOpen(false);
|
||||
setShowGeneratingModal(true);
|
||||
setIsAssistantWorkingInBackground(true);
|
||||
setIsAssistantLoading(true);
|
||||
|
||||
const ac = new AbortController();
|
||||
abortControllerRef.current = ac;
|
||||
const signal = ac.signal;
|
||||
|
||||
const onSuccess = (text: string) => {
|
||||
setConteudo(text);
|
||||
confettiRef.current?.fire({});
|
||||
playSuccessSound();
|
||||
const msg =
|
||||
assistantMode === "create" ? "Modelo inicial gerado!" : "Conteúdo atualizado!";
|
||||
toast.success(msg, {
|
||||
className: "bg-green-600 border-green-700 text-white",
|
||||
});
|
||||
};
|
||||
|
||||
const onFinish = () => {
|
||||
setShowGeneratingModal(false);
|
||||
setIsAssistantLoading(false);
|
||||
setIsAssistantWorkingInBackground(false);
|
||||
abortControllerRef.current = null;
|
||||
};
|
||||
|
||||
const onError = (e: unknown) => {
|
||||
const isAborted =
|
||||
(e && typeof e === "object" && "code" in e && (e as { code: string }).code === "ERR_CANCELED") ||
|
||||
(e && typeof e === "object" && "name" in e && (e as { name: string }).name === "AbortError");
|
||||
if (!isAborted) {
|
||||
const message =
|
||||
e && typeof e === "object" && "message" in e
|
||||
? (e as { message: string }).message
|
||||
: "Erro ao processar.";
|
||||
toast.error(message);
|
||||
}
|
||||
};
|
||||
|
||||
if (assistantMode === "create") {
|
||||
assistentePromptsService.gerar(assistantInstructions, signal)
|
||||
.then(onSuccess)
|
||||
.catch(onError)
|
||||
.finally(onFinish);
|
||||
} else {
|
||||
assistentePromptsService.refinar(conteudo, assistantInstructions, signal)
|
||||
.then(onSuccess)
|
||||
.catch(onError)
|
||||
.finally(onFinish);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex flex-col h-full overflow-hidden pb-16 md:pb-0 relative">
|
||||
<Confetti
|
||||
ref={confettiRef}
|
||||
manualstart
|
||||
className="absolute inset-0 size-full pointer-events-none z-50"
|
||||
/>
|
||||
<div className="border-b border-border p-3 md:p-6 flex-shrink-0">
|
||||
<div className="flex flex-col gap-3">
|
||||
<Button variant="ghost" size="sm" className="w-fit gap-2" onClick={() => navigate("/codex/prompts")}>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Voltar
|
||||
</Button>
|
||||
<div className="flex flex-wrap items-end gap-4">
|
||||
<div className="flex-1 min-w-[200px] space-y-2">
|
||||
<Label htmlFor="form-titulo">Título</Label>
|
||||
<Input
|
||||
id="form-titulo"
|
||||
value={titulo}
|
||||
onChange={(e) => setTitulo(e.target.value)}
|
||||
placeholder="Ex: Prompt para análise de documentos"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full sm:w-[220px] space-y-2">
|
||||
<Label htmlFor="form-area">Área</Label>
|
||||
<Select value={effectiveAreaId || "none"} onValueChange={(v) => setAreaId(v === "none" ? "" : v)} disabled={areasLoading}>
|
||||
<SelectTrigger id="form-area">
|
||||
<SelectValue placeholder={areasLoading ? "Carregando áreas..." : "Selecione a área"} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">Selecione a área</SelectItem>
|
||||
{areaItems.map((a) => (
|
||||
<SelectItem key={a.id} value={a.id}>
|
||||
{a.nome}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="form-descricao">Descrição <span className="text-muted-foreground font-normal">(opcional)</span></Label>
|
||||
<Input
|
||||
id="form-descricao"
|
||||
value={descricao}
|
||||
onChange={(e) => setDescricao(e.target.value)}
|
||||
placeholder="Ex: Breve descrição do prompt"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex flex-col min-h-0 p-3 md:p-6 gap-2">
|
||||
<div className="flex items-center justify-between gap-2 flex-wrap">
|
||||
<Label htmlFor="form-conteudo">Conteúdo do Prompt</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
{isAssistantWorkingInBackground && (
|
||||
<div
|
||||
className="w-2 h-2 rounded-full bg-primary animate-pulse-glow shrink-0"
|
||||
title="Gerando em andamento"
|
||||
/>
|
||||
)}
|
||||
<ShimmerButton
|
||||
type="button"
|
||||
onClick={() => setIsAssistantOpen(true)}
|
||||
disabled={isAssistantWorkingInBackground}
|
||||
background="rgb(255,255,255)"
|
||||
shimmerColor="rgba(0,0,0,0.06)"
|
||||
className={cn(
|
||||
"gap-2 px-5 py-2.5 text-sm font-medium text-neutral-900 border border-neutral-200 shadow-md hover:shadow-lg transition-shadow dark:border-neutral-300",
|
||||
isAssistantWorkingInBackground && "opacity-70 pointer-events-none"
|
||||
)}
|
||||
>
|
||||
{isAssistantWorkingInBackground ? (
|
||||
<span className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
|
||||
Gerando em segundo plano...
|
||||
</span>
|
||||
) : (
|
||||
<SparklesText sparklesCount={5} className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
|
||||
✨ Assistente de Criação de Prompt
|
||||
</SparklesText>
|
||||
)}
|
||||
</ShimmerButton>
|
||||
</div>
|
||||
</div>
|
||||
<Textarea
|
||||
id="form-conteudo"
|
||||
value={conteudo}
|
||||
onChange={(e) => setConteudo(e.target.value)}
|
||||
placeholder="Digite o conteúdo do prompt..."
|
||||
className="flex-1 min-h-[200px] resize-none p-3"
|
||||
/>
|
||||
<div className="flex justify-end pt-2">
|
||||
<InteractiveHoverButton
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
disabled={!titulo.trim() || !effectiveAreaId || !conteudo.trim() || isSaving}
|
||||
className="disabled:opacity-50 disabled:pointer-events-none"
|
||||
>
|
||||
{isSaving ? "Salvando..." : isEdit ? "Salvar alterações" : "Criar prompt"}
|
||||
</InteractiveHoverButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showGeneratingModal && (
|
||||
<PromptGeneratingScreen
|
||||
mode={assistantMode}
|
||||
message="Está em processamento. Aguarde que em breve o prompt ficará pronto. O modal será fechado assim que finalizar."
|
||||
/>
|
||||
)}
|
||||
|
||||
<Dialog open={isAssistantOpen} onOpenChange={setIsAssistantOpen}>
|
||||
<DialogContent className="max-w-2xl max-h-[90vh] flex flex-col p-8 gap-6 overflow-hidden rounded-xl border-border/80 bg-gradient-to-b from-background to-muted/20">
|
||||
<div className="absolute inset-0 overflow-hidden rounded-[inherit] pointer-events-none">
|
||||
<BorderBeam duration={8} size={100} colorFrom="#a78bfa" colorTo="#06b6d4" />
|
||||
</div>
|
||||
<DialogHeader className="space-y-4 relative z-10">
|
||||
<div className="flex justify-center">
|
||||
<div
|
||||
className={cn(
|
||||
"inline-flex w-fit rounded-full border border-black/5 bg-neutral-100 text-base transition-all ease-in hover:bg-neutral-200 dark:border-white/5 dark:bg-neutral-900 dark:hover:bg-neutral-800"
|
||||
)}
|
||||
>
|
||||
<AnimatedShinyText className="inline-flex items-center justify-center px-4 py-2 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400">
|
||||
<span>✨ Assistente de Criação de Prompt</span>
|
||||
</AnimatedShinyText>
|
||||
</div>
|
||||
</div>
|
||||
<DialogTitle className="sr-only">Assistente de Criação de Prompt</DialogTitle>
|
||||
<DialogDescription className="text-base text-muted-foreground">
|
||||
Escolha criar um novo prompt do zero ou melhorar o conteúdo atual. Preencha as instruções e o assistente gerará o texto.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-8 overflow-y-auto flex-1 min-h-0 px-1 pt-1 pb-2 pr-3 relative z-10">
|
||||
<div className="space-y-4">
|
||||
<Label className="text-base font-medium">O que deseja fazer?</Label>
|
||||
<RadioGroup
|
||||
value={assistantMode}
|
||||
onValueChange={(v) => setAssistantMode(v as "create" | "refine")}
|
||||
className="grid gap-4"
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
<RadioGroupItem value="create" id="assistant-create" />
|
||||
<Label htmlFor="assistant-create" className="font-normal cursor-pointer">
|
||||
Criar novo
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<RadioGroupItem
|
||||
value="refine"
|
||||
id="assistant-refine"
|
||||
disabled={!hasContent}
|
||||
/>
|
||||
<Label
|
||||
htmlFor="assistant-refine"
|
||||
className={`font-normal ${!hasContent ? "cursor-not-allowed text-muted-foreground" : "cursor-pointer"}`}
|
||||
>
|
||||
Melhorar atual
|
||||
{!hasContent && " (preencha o conteúdo do prompt antes)"}
|
||||
</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Label htmlFor="assistant-instructions" className="text-base font-medium">
|
||||
Instruções
|
||||
</Label>
|
||||
<Textarea
|
||||
id="assistant-instructions"
|
||||
value={assistantInstructions}
|
||||
onChange={(e) => setAssistantInstructions(e.target.value)}
|
||||
placeholder={
|
||||
assistantMode === "create"
|
||||
? "Ex: Um prompt que resuma reuniões em tópicos e ações..."
|
||||
: "Ex: Tornar mais conciso, adicionar seção de exemplos..."
|
||||
}
|
||||
rows={8}
|
||||
className="resize-none text-base py-4 px-4 min-h-[180px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="gap-3 pt-4 relative z-10">
|
||||
<Button variant="outline" className="hover:bg-slate-100 hover:text-slate-800 dark:hover:bg-slate-800" onClick={() => setIsAssistantOpen(false)} disabled={isAssistantLoading}>
|
||||
Fechar
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleAssistantSubmit}
|
||||
disabled={
|
||||
!assistantInstructions.trim() ||
|
||||
isAssistantLoading ||
|
||||
(assistantMode === "refine" && !hasContent)
|
||||
}
|
||||
className="gap-2"
|
||||
>
|
||||
<Sparkles className="w-4 h-4 shrink-0" />
|
||||
{assistantMode === "create" ? "Gerar" : "Melhorar"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user