Refactor agent and prompt management
Restructures the application to integrate prompt management directly into the agent details view. Removes the separate "Prompts" page and its associated components. Agents are now the root route, and clicking an agent navigates to a detail page where its system prompt, AI model, and version history can be managed.
This commit is contained in:
gpt-engineer-app[bot]
@@ -2,7 +2,6 @@ import { useState } from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import {
|
||||
Bot,
|
||||
FileText,
|
||||
TestTube,
|
||||
ArrowLeft,
|
||||
ChevronLeft,
|
||||
@@ -14,7 +13,6 @@ import { ThemeToggle } from "./ThemeToggle";
|
||||
|
||||
const menuItems = [
|
||||
{ title: "Agentes", url: "/", icon: Bot },
|
||||
{ title: "Prompts", url: "/prompts", icon: FileText },
|
||||
{ title: "Testar Prompt", url: "/test", icon: TestTube },
|
||||
];
|
||||
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import { useState } from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import { Bot, FileText, TestTube, Menu, X } from "lucide-react";
|
||||
import { Bot, TestTube, Menu, X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ThemeToggle } from "./ThemeToggle";
|
||||
|
||||
const menuItems = [
|
||||
{ title: "Agentes", url: "/", icon: Bot },
|
||||
{ title: "Prompts", url: "/prompts", icon: FileText },
|
||||
{ title: "Testar Prompt", url: "/test", icon: TestTube },
|
||||
];
|
||||
|
||||
|
||||
@@ -1,266 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Wand2 } from "lucide-react";
|
||||
|
||||
interface CreatePromptDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export function CreatePromptDialog({ open, onOpenChange }: CreatePromptDialogProps) {
|
||||
const [title, setTitle] = useState("");
|
||||
const [systemPrompt, setSystemPrompt] = useState("");
|
||||
|
||||
// Assistente fields
|
||||
const [agentName, setAgentName] = useState("");
|
||||
const [agentRole, setAgentRole] = useState("");
|
||||
const [targetAudience, setTargetAudience] = useState("");
|
||||
const [mainObjective, setMainObjective] = useState("");
|
||||
const [toneOfVoice, setToneOfVoice] = useState("");
|
||||
const [forbiddenPatterns, setForbiddenPatterns] = useState("");
|
||||
const [refinementInstructions, setRefinementInstructions] = useState("");
|
||||
const [isGenerated, setIsGenerated] = useState(false);
|
||||
|
||||
const handleGeneratePrompt = () => {
|
||||
let generatedPrompt = `Você é ${agentName}, ${agentRole}.
|
||||
|
||||
Público-alvo: ${targetAudience}
|
||||
|
||||
Objetivo principal: ${mainObjective}
|
||||
|
||||
Tom de voz: ${toneOfVoice}
|
||||
|
||||
${forbiddenPatterns ? `Padrões proibidos:\n${forbiddenPatterns}` : ''}
|
||||
|
||||
Siga estas diretrizes em todas as suas interações.`;
|
||||
|
||||
if (refinementInstructions && isGenerated) {
|
||||
generatedPrompt += `\n\nInstruções adicionais:\n${refinementInstructions}`;
|
||||
}
|
||||
|
||||
setSystemPrompt(generatedPrompt);
|
||||
setIsGenerated(true);
|
||||
};
|
||||
|
||||
const handleStartOver = () => {
|
||||
setAgentName("");
|
||||
setAgentRole("");
|
||||
setTargetAudience("");
|
||||
setMainObjective("");
|
||||
setToneOfVoice("");
|
||||
setForbiddenPatterns("");
|
||||
setRefinementInstructions("");
|
||||
setSystemPrompt("");
|
||||
setIsGenerated(false);
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
console.log("Salvando prompt:", { title, systemPrompt });
|
||||
// Aqui você implementaria a lógica de salvar no backend
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto w-[95vw] sm:w-full">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Criar Novo Prompt</DialogTitle>
|
||||
<DialogDescription>
|
||||
Crie um prompt manualmente ou use o assistente para gerar automaticamente.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="title">Título</Label>
|
||||
<Input
|
||||
id="title"
|
||||
placeholder="Nome do prompt"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="manual" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
<TabsTrigger value="assistant">
|
||||
<Wand2 className="w-4 h-4 mr-2" />
|
||||
Assistente
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="manual" className="space-y-4 mt-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="systemPrompt">System Prompt</Label>
|
||||
<Textarea
|
||||
id="systemPrompt"
|
||||
placeholder="Digite o system prompt..."
|
||||
value={systemPrompt}
|
||||
onChange={(e) => setSystemPrompt(e.target.value)}
|
||||
className="min-h-[400px] font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="assistant" className="space-y-4 mt-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="agentName">Nome do Agente</Label>
|
||||
<Input
|
||||
id="agentName"
|
||||
placeholder="Ex: Clara"
|
||||
value={agentName}
|
||||
onChange={(e) => setAgentName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="agentRole">Função / Papel do Agente</Label>
|
||||
<Input
|
||||
id="agentRole"
|
||||
placeholder="Ex: assistente de atendimento ao cliente"
|
||||
value={agentRole}
|
||||
onChange={(e) => setAgentRole(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="targetAudience">Público-alvo</Label>
|
||||
<Input
|
||||
id="targetAudience"
|
||||
placeholder="Ex: Clientes da loja online de eletrônicos"
|
||||
value={targetAudience}
|
||||
onChange={(e) => setTargetAudience(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="mainObjective">Objetivo Principal</Label>
|
||||
<Textarea
|
||||
id="mainObjective"
|
||||
placeholder="Ex: Ajudar clientes com dúvidas sobre produtos e pedidos"
|
||||
value={mainObjective}
|
||||
onChange={(e) => setMainObjective(e.target.value)}
|
||||
className="min-h-[80px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="toneOfVoice">Tom de Voz</Label>
|
||||
<Select value={toneOfVoice} onValueChange={setToneOfVoice}>
|
||||
<SelectTrigger id="toneOfVoice">
|
||||
<SelectValue placeholder="Selecione o tom de voz" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="amigavel">Amigável</SelectItem>
|
||||
<SelectItem value="formal">Formal</SelectItem>
|
||||
<SelectItem value="tecnico">Técnico</SelectItem>
|
||||
<SelectItem value="educado">Educado</SelectItem>
|
||||
<SelectItem value="institucional">Institucional</SelectItem>
|
||||
<SelectItem value="neutro">Neutro</SelectItem>
|
||||
<SelectItem value="engracado">Engraçado</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="forbiddenPatterns">Padrões Proibidos</Label>
|
||||
<Textarea
|
||||
id="forbiddenPatterns"
|
||||
placeholder="Ex: Não usar gírias, não dar opiniões pessoais, evitar emojis"
|
||||
value={forbiddenPatterns}
|
||||
onChange={(e) => setForbiddenPatterns(e.target.value)}
|
||||
className="min-h-[100px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={handleGeneratePrompt}
|
||||
className="flex-1"
|
||||
variant="secondary"
|
||||
disabled={!agentName || !agentRole}
|
||||
>
|
||||
<Wand2 className="w-4 h-4 mr-2" />
|
||||
{isGenerated ? "Regenerar Prompt" : "Gerar System Prompt"}
|
||||
</Button>
|
||||
{isGenerated && (
|
||||
<Button
|
||||
onClick={handleStartOver}
|
||||
variant="outline"
|
||||
>
|
||||
Começar do Zero
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{systemPrompt && (
|
||||
<div className="space-y-4 p-4 border rounded-lg bg-muted/50">
|
||||
<div className="space-y-2">
|
||||
<Label>Prompt Gerado</Label>
|
||||
<Textarea
|
||||
value={systemPrompt}
|
||||
onChange={(e) => setSystemPrompt(e.target.value)}
|
||||
className="min-h-[400px] font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="refinement">
|
||||
Instruções Adicionais (opcional)
|
||||
</Label>
|
||||
<Textarea
|
||||
id="refinement"
|
||||
placeholder="Ex: Adicione mais empatia nas respostas, seja mais direto, inclua exemplos práticos..."
|
||||
value={refinementInstructions}
|
||||
onChange={(e) => setRefinementInstructions(e.target.value)}
|
||||
className="min-h-[100px]"
|
||||
/>
|
||||
<Button
|
||||
onClick={handleGeneratePrompt}
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
disabled={!refinementInstructions}
|
||||
>
|
||||
<Wand2 className="w-4 h-4 mr-2" />
|
||||
Aplicar Refinamento
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-4 border-t">
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={!title || !systemPrompt}>
|
||||
Criar Prompt
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -1,210 +0,0 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
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 { Wand2, GitBranch } from "lucide-react";
|
||||
|
||||
interface EditPromptDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
prompt: {
|
||||
id: number;
|
||||
title: string;
|
||||
systemPrompt?: string;
|
||||
version?: string;
|
||||
} | null;
|
||||
}
|
||||
|
||||
export function EditPromptDialog({ open, onOpenChange, prompt }: EditPromptDialogProps) {
|
||||
const [title, setTitle] = useState("");
|
||||
const [systemPrompt, setSystemPrompt] = useState("");
|
||||
const [versionType, setVersionType] = useState<"major" | "minor" | "patch">("minor");
|
||||
const [changeDescription, setChangeDescription] = useState("");
|
||||
const [assistantInstructions, setAssistantInstructions] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (prompt && open) {
|
||||
setTitle(prompt.title);
|
||||
setSystemPrompt(prompt.systemPrompt || "");
|
||||
setChangeDescription("");
|
||||
setVersionType("minor");
|
||||
setAssistantInstructions("");
|
||||
}
|
||||
}, [prompt, open]);
|
||||
|
||||
const handleApplyAssistant = () => {
|
||||
// Aqui você implementaria a lógica de IA para modificar o prompt
|
||||
// Por enquanto, vamos apenas adicionar as instruções ao final do prompt
|
||||
const updatedPrompt = `${systemPrompt}\n\n[Aplicar mudanças: ${assistantInstructions}]`;
|
||||
setSystemPrompt(updatedPrompt);
|
||||
setAssistantInstructions("");
|
||||
console.log("Aplicando instruções do assistente:", assistantInstructions);
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
console.log("Salvando nova versão:", {
|
||||
promptId: prompt?.id,
|
||||
title,
|
||||
systemPrompt,
|
||||
versionType,
|
||||
changeDescription
|
||||
});
|
||||
// Aqui você implementaria a lógica de salvar nova versão no backend
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
const getVersionDescription = () => {
|
||||
switch (versionType) {
|
||||
case "major":
|
||||
return "Mudanças significativas que alteram a funcionalidade principal";
|
||||
case "minor":
|
||||
return "Novas funcionalidades ou melhorias sem quebrar compatibilidade";
|
||||
case "patch":
|
||||
return "Correções e ajustes menores";
|
||||
}
|
||||
};
|
||||
|
||||
if (!prompt) return null;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto w-[95vw] sm:w-full">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Editar Prompt</DialogTitle>
|
||||
<DialogDescription>
|
||||
Edite o prompt e descreva as mudanças. Uma nova versão será criada preservando o histórico.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2 p-3 bg-muted/50 rounded-lg">
|
||||
<GitBranch className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Versão atual: <span className="font-medium text-foreground">{prompt.version || "1.0.0"}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="title">Título</Label>
|
||||
<Input
|
||||
id="title"
|
||||
placeholder="Nome do prompt"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="systemPrompt">System Prompt</Label>
|
||||
<Textarea
|
||||
id="systemPrompt"
|
||||
placeholder="Digite o system prompt..."
|
||||
value={systemPrompt}
|
||||
onChange={(e) => setSystemPrompt(e.target.value)}
|
||||
className="min-h-[300px] font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 p-4 border rounded-lg bg-muted/30">
|
||||
<div className="flex items-center gap-2">
|
||||
<Wand2 className="h-4 w-4 text-primary" />
|
||||
<Label htmlFor="assistantInstructions" className="text-base font-medium">
|
||||
Assistente de Prompt
|
||||
</Label>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Descreva o que deseja incluir ou modificar no prompt acima
|
||||
</p>
|
||||
<Textarea
|
||||
id="assistantInstructions"
|
||||
placeholder="Ex: Adicione mais empatia nas respostas, seja mais técnico ao explicar produtos, inclua exemplos práticos..."
|
||||
value={assistantInstructions}
|
||||
onChange={(e) => setAssistantInstructions(e.target.value)}
|
||||
className="min-h-[100px]"
|
||||
/>
|
||||
<Button
|
||||
onClick={handleApplyAssistant}
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
disabled={!assistantInstructions}
|
||||
className="w-full"
|
||||
>
|
||||
<Wand2 className="w-4 h-4 mr-2" />
|
||||
Aplicar Mudanças com Assistente
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 p-4 border rounded-lg bg-muted/30">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="versionType">Tipo de Versão</Label>
|
||||
<Select value={versionType} onValueChange={(v) => setVersionType(v as "major" | "minor" | "patch")}>
|
||||
<SelectTrigger id="versionType">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="major">
|
||||
<div className="flex flex-col items-start">
|
||||
<span className="font-medium">Major (X.0.0)</span>
|
||||
<span className="text-xs text-muted-foreground">Mudanças significativas</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="minor">
|
||||
<div className="flex flex-col items-start">
|
||||
<span className="font-medium">Minor (0.X.0)</span>
|
||||
<span className="text-xs text-muted-foreground">Novas funcionalidades</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="patch">
|
||||
<div className="flex flex-col items-start">
|
||||
<span className="font-medium">Patch (0.0.X)</span>
|
||||
<span className="text-xs text-muted-foreground">Correções menores</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-xs text-muted-foreground">{getVersionDescription()}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="changeDescription">Descrição das Mudanças</Label>
|
||||
<Textarea
|
||||
id="changeDescription"
|
||||
placeholder="Descreva o que foi alterado nesta versão..."
|
||||
value={changeDescription}
|
||||
onChange={(e) => setChangeDescription(e.target.value)}
|
||||
className="min-h-[100px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-4 border-t">
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={!title || !systemPrompt || !changeDescription}
|
||||
>
|
||||
Salvar Nova Versão
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
import { FileText, Edit, History, Copy, TestTube } from "lucide-react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
interface PromptCardProps {
|
||||
title: string;
|
||||
creator: string;
|
||||
lastModified: string;
|
||||
status: "draft" | "published";
|
||||
onEdit: () => void;
|
||||
onHistory: () => void;
|
||||
onTest: () => void;
|
||||
onDuplicate: () => void;
|
||||
}
|
||||
|
||||
export function PromptCard({
|
||||
title,
|
||||
creator,
|
||||
lastModified,
|
||||
status,
|
||||
onEdit,
|
||||
onHistory,
|
||||
onTest,
|
||||
onDuplicate,
|
||||
}: PromptCardProps) {
|
||||
return (
|
||||
<Card className="p-5 hover:shadow-hover transition-all duration-200 animate-fade-in">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-lg bg-accent/10 flex items-center justify-center">
|
||||
<FileText className="h-5 w-5 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground">{title}</h3>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
por {creator} • {lastModified}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant={status === "published" ? "default" : "secondary"}>
|
||||
{status === "published" ? "Publicado" : "Rascunho"}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button onClick={onEdit} variant="outline" size="sm" className="flex-1">
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
Editar
|
||||
</Button>
|
||||
<Button onClick={onHistory} variant="outline" size="sm">
|
||||
<History className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button onClick={onTest} variant="outline" size="sm">
|
||||
<TestTube className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button onClick={onDuplicate} variant="outline" size="sm">
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -1,229 +0,0 @@
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { GitBranch, Clock, User, FileText, Copy, Check } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
|
||||
interface PromptVersion {
|
||||
version: string;
|
||||
type: "major" | "minor" | "patch";
|
||||
changeDescription: string;
|
||||
systemPrompt: string;
|
||||
createdAt: string;
|
||||
createdBy: string;
|
||||
}
|
||||
|
||||
interface PromptHistoryDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
prompt: {
|
||||
id: number;
|
||||
title: string;
|
||||
currentVersion: string;
|
||||
} | null;
|
||||
}
|
||||
|
||||
export function PromptHistoryDialog({ open, onOpenChange, prompt }: PromptHistoryDialogProps) {
|
||||
const { toast } = useToast();
|
||||
const [copiedVersion, setCopiedVersion] = useState<string | null>(null);
|
||||
|
||||
const handleCopyPrompt = async (content: string, version: string) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(content);
|
||||
setCopiedVersion(version);
|
||||
toast({
|
||||
title: "Conteúdo copiado!",
|
||||
description: `Prompt da versão ${version} copiado para a área de transferência.`,
|
||||
});
|
||||
setTimeout(() => setCopiedVersion(null), 2000);
|
||||
} catch (err) {
|
||||
toast({
|
||||
title: "Erro ao copiar",
|
||||
description: "Não foi possível copiar o conteúdo.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Mock data - substituir por dados reais do backend
|
||||
const versions: PromptVersion[] = [
|
||||
{
|
||||
version: "2.1.0",
|
||||
type: "minor",
|
||||
changeDescription: "Adicionado mais empatia nas respostas e incluídos exemplos práticos",
|
||||
systemPrompt: "Você é Clara, assistente de atendimento ao cliente. Seja empática...",
|
||||
createdAt: "2 dias atrás",
|
||||
createdBy: "João Silva",
|
||||
},
|
||||
{
|
||||
version: "2.0.0",
|
||||
type: "major",
|
||||
changeDescription: "Reformulação completa do tom de voz e objetivos principais",
|
||||
systemPrompt: "Você é Clara, assistente de atendimento ao cliente...",
|
||||
createdAt: "1 semana atrás",
|
||||
createdBy: "Maria Santos",
|
||||
},
|
||||
{
|
||||
version: "1.5.0",
|
||||
type: "minor",
|
||||
changeDescription: "Adicionadas instruções sobre política de devolução",
|
||||
systemPrompt: "Você é um assistente virtual de atendimento...",
|
||||
createdAt: "2 semanas atrás",
|
||||
createdBy: "João Silva",
|
||||
},
|
||||
{
|
||||
version: "1.0.0",
|
||||
type: "major",
|
||||
changeDescription: "Versão inicial do prompt",
|
||||
systemPrompt: "Você é um assistente virtual...",
|
||||
createdAt: "1 mês atrás",
|
||||
createdBy: "João Silva",
|
||||
},
|
||||
];
|
||||
|
||||
const getVersionTypeColor = (type: string) => {
|
||||
switch (type) {
|
||||
case "major":
|
||||
return "destructive";
|
||||
case "minor":
|
||||
return "default";
|
||||
case "patch":
|
||||
return "secondary";
|
||||
default:
|
||||
return "secondary";
|
||||
}
|
||||
};
|
||||
|
||||
const getVersionTypeLabel = (type: string) => {
|
||||
switch (type) {
|
||||
case "major":
|
||||
return "Major";
|
||||
case "minor":
|
||||
return "Minor";
|
||||
case "patch":
|
||||
return "Patch";
|
||||
default:
|
||||
return type;
|
||||
}
|
||||
};
|
||||
|
||||
if (!prompt) return null;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-4xl max-h-[90vh] w-[95vw] sm:w-full">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<GitBranch className="h-5 w-5" />
|
||||
Histórico de Versões
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
Histórico completo de versões do prompt "{prompt.title}"
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<ScrollArea className="h-[600px] pr-4">
|
||||
<div className="space-y-4">
|
||||
{versions.map((version, index) => (
|
||||
<div key={version.version}>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className={`w-3 h-3 rounded-full ${
|
||||
version.version === prompt.currentVersion
|
||||
? "bg-primary ring-4 ring-primary/20"
|
||||
: "bg-muted-foreground"
|
||||
}`} />
|
||||
{index < versions.length - 1 && (
|
||||
<div className="w-0.5 h-full min-h-[80px] bg-border mt-2" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 space-y-3 pb-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<code className="text-sm font-mono font-semibold">
|
||||
v{version.version}
|
||||
</code>
|
||||
{version.version === prompt.currentVersion && (
|
||||
<Badge variant="outline" className="bg-primary/10">
|
||||
Atual
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-4 text-sm text-muted-foreground">
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
{version.createdAt}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<User className="h-3 w-3" />
|
||||
{version.createdBy}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-2">
|
||||
<FileText className="h-4 w-4 mt-0.5 text-muted-foreground flex-shrink-0" />
|
||||
<p className="text-sm">{version.changeDescription}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs font-medium text-muted-foreground uppercase">
|
||||
Conteúdo do Prompt
|
||||
</p>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => handleCopyPrompt(version.systemPrompt, version.version)}
|
||||
className="h-7"
|
||||
>
|
||||
{copiedVersion === version.version ? (
|
||||
<>
|
||||
<Check className="h-3 w-3 mr-1" />
|
||||
Copiado
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="h-3 w-3 mr-1" />
|
||||
Copiar
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
<ScrollArea className="h-[200px] w-full rounded-md border bg-muted/30">
|
||||
<div className="p-4">
|
||||
<p className="text-sm whitespace-pre-wrap leading-relaxed">
|
||||
{version.systemPrompt}
|
||||
</p>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Fechar
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user