Refatore o modal de histórico de versões

Atualiza o modal de histórico de versões para exibir o modelo de IA e melhorar a visualização do prompt. Adiciona a funcionalidade de expandir/recolher para o prompt de cada versão.

src/components/agents/VersionHistoryDialog.tsx

@@ -8,8 +8,9 @@ import {
 } from "@/components/ui/dialog";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Badge } from "@/components/ui/badge";
-import { Copy } from "lucide-react";
+import { Copy, ChevronDown, ChevronUp } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
+import { useState } from "react";
 
 interface VersionHistoryDialogProps {
   open: boolean;
@@ -20,6 +21,7 @@ interface VersionHistoryDialogProps {
     version: string;
     type: "major" | "minor" | "patch";
     description: string;
+    model: string;
     prompt: string;
     createdAt: string;
     author: string;
@@ -33,6 +35,17 @@ export function VersionHistoryDialog({
   versions,
 }: VersionHistoryDialogProps) {
   const { toast } = useToast();
+  const [expandedVersions, setExpandedVersions] = useState<Set<number>>(new Set());
+
+  const toggleExpanded = (versionId: number) => {
+    const newExpanded = new Set(expandedVersions);
+    if (newExpanded.has(versionId)) {
+      newExpanded.delete(versionId);
+    } else {
+      newExpanded.add(versionId);
+    }
+    setExpandedVersions(newExpanded);
+  };
 
   const handleCopyPrompt = async (prompt: string) => {
     try {
@@ -74,46 +87,73 @@ export function VersionHistoryDialog({
         </DialogHeader>
         <ScrollArea className="h-[60vh] pr-4">
           <div className="space-y-4">
-            {versions.map((version) => (
-              <div
-                key={version.id}
-                className="p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors"
-              >
-                <div className="flex items-start justify-between mb-2">
-                  <div>
-                    <div className="flex items-center gap-2">
-                      <span className="font-semibold">v{version.version}</span>
-                      <Badge className={getVersionTypeColor(version.type)}>
-                        {version.type}
-                      </Badge>
+            {versions.map((version) => {
+              const isExpanded = expandedVersions.has(version.id);
+              return (
+                <div
+                  key={version.id}
+                  className="p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors"
+                >
+                  <div className="flex items-start justify-between mb-3">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2 mb-2">
+                        <span className="font-semibold">v{version.version}</span>
+                        <Badge className={getVersionTypeColor(version.type)}>
+                          {version.type}
+                        </Badge>
+                      </div>
+                      <div className="space-y-2 text-sm">
+                        <div>
+                          <span className="font-medium text-foreground">Notas da versão:</span>
+                          <p className="text-muted-foreground mt-0.5">{version.description}</p>
+                        </div>
+                        <div>
+                          <span className="font-medium text-foreground">Modelo de IA:</span>
+                          <p className="text-muted-foreground mt-0.5">{version.model}</p>
+                        </div>
+                      </div>
                     </div>
-                    <p className="text-sm text-muted-foreground mt-1">
-                      {version.description}
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8 shrink-0"
+                      onClick={() => handleCopyPrompt(version.prompt)}
+                    >
+                      <Copy className="h-4 w-4" />
+                    </Button>
+                  </div>
+
+                  <div className="mt-3">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="w-full justify-between h-auto py-2 px-3 font-normal"
+                      onClick={() => toggleExpanded(version.id)}
+                    >
+                      <span className="text-sm font-medium">System Prompt da versão</span>
+                      {isExpanded ? (
+                        <ChevronUp className="h-4 w-4" />
+                      ) : (
+                        <ChevronDown className="h-4 w-4" />
+                      )}
+                    </Button>
+                    {isExpanded && (
+                      <div className="mt-2 p-3 rounded bg-muted/50 border">
+                        <p className="text-xs font-mono text-muted-foreground whitespace-pre-wrap">
+                          {version.prompt}
+                        </p>
+                      </div>
+                    )}
+                  </div>
+
+                  <div className="mt-3 pt-3 border-t text-xs text-muted-foreground">
+                    <p>
+                      {version.author} • {version.createdAt}
                     </p>
                   </div>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8"
-                    onClick={() => handleCopyPrompt(version.prompt)}
-                  >
-                    <Copy className="h-4 w-4" />
-                  </Button>
                 </div>
-
-                <div className="mt-3 p-3 rounded bg-muted/50">
-                  <p className="text-xs font-mono text-muted-foreground line-clamp-3">
-                    {version.prompt}
-                  </p>
-                </div>
-
-                <div className="mt-3 text-xs text-muted-foreground">
-                  <p>
-                    {version.author} • {version.createdAt}
-                  </p>
-                </div>
-              </div>
-            ))}
+              );
+            })}
           </div>
         </ScrollArea>
       </DialogContent>

src/pages/AgentDetails.tsx

@@ -36,6 +36,7 @@ export default function AgentDetails() {
       version: "2.1",
       type: "major" as const,
       description: "Melhorias na clareza das respostas",
+      model: "Google Gemini 2.5 Flash",
       prompt: "Você é um assistente de atendimento ao cliente. Seja educado, prestativo e objetivo nas suas respostas. Sempre mantenha um tom profissional e cordial.",
       createdAt: "2024-01-15 14:30",
       author: "João Silva",
@@ -45,6 +46,7 @@ export default function AgentDetails() {
       version: "2.0",
       type: "major" as const,
       description: "Reformulação completa do prompt",
+      model: "Google Gemini 2.5 Pro",
       prompt: "Você é um assistente de atendimento. Seja cordial e ajude o cliente.",
       createdAt: "2024-01-10 09:15",
       author: "Maria Santos",
@@ -54,6 +56,7 @@ export default function AgentDetails() {
       version: "1.5",
       type: "minor" as const,
       description: "Ajustes de tom",
+      model: "OpenAI GPT-5 Mini",
       prompt: "Você é um assistente. Seja educado.",
       createdAt: "2024-01-05 16:45",
       author: "João Silva",