@greatapps/greatagents-ui 0.3.21 → 0.3.23

package/src/components/agents/agent-objectives-list.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import type { Agent, Objective } from "../../types";
+import type { Agent, Objective, ConversationFlowStep } from "../../types";
 import type { GagentsHookConfig } from "../../hooks/types";
 import {
   useObjectives,
@@ -15,11 +15,11 @@ import {
   Textarea,
   Label,
   Badge,
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetFooter,
   AlertDialog,
   AlertDialogAction,
   AlertDialogCancel,
@@ -36,6 +36,7 @@ import {
   SortableItemHandle,
   SortableOverlay,
 } from "../ui/sortable";
+import { ConversationFlowEditor } from "./conversation-flow-editor";
 import { Trash2, Target, Pencil, Plus, GripVertical } from "lucide-react";
 import { toast } from "sonner";
 
@@ -57,28 +58,12 @@ interface ObjectiveFormState {
   title: string;
   slug: string;
   instruction: string;
-  prompt: string;
+  description: string;
+  conversation_flow: ConversationFlowStep[];
+  rules: string;
 }
 
-const EMPTY_FORM: ObjectiveFormState = { title: "", slug: "", instruction: "", prompt: "" };
-
-/** Split a stored prompt into instruction (first line) and body (rest). */
-function splitPrompt(prompt: string | null | undefined): { instruction: string; body: string } {
-  if (!prompt) return { instruction: "", body: "" };
-  const idx = prompt.indexOf("\n");
-  if (idx === -1) return { instruction: prompt.trim(), body: "" };
-  return { instruction: prompt.slice(0, idx).trim(), body: prompt.slice(idx + 1).trim() };
-}
-
-/** Merge instruction + body into a single prompt string. */
-function mergePrompt(instruction: string, body: string): string {
-  const i = instruction.trim();
-  const b = body.trim();
-  if (!i && !b) return "";
-  if (!b) return i;
-  if (!i) return b;
-  return `${i}\n${b}`;
-}
+const EMPTY_FORM: ObjectiveFormState = { title: "", slug: "", instruction: "", description: "", conversation_flow: [], rules: "" };
 
 export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps) {
   const { data: objectivesData, isLoading } = useObjectives(config, agent.id);
@@ -123,12 +108,17 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
 
   function openEdit(objective: Objective) {
     setEditTarget(objective);
-    const { instruction, body } = splitPrompt(objective.prompt);
+    let parsedFlow: ConversationFlowStep[] = [];
+    if (objective.conversation_flow) {
+      try { parsedFlow = JSON.parse(objective.conversation_flow); } catch { /* invalid JSON */ }
+    }
     setForm({
       title: objective.title,
       slug: objective.slug || "",
-      instruction,
-      prompt: body,
+      instruction: objective.instruction || "",
+      description: objective.description || "",
+      conversation_flow: parsedFlow,
+      rules: objective.rules || "",
     });
     setSlugManual(true);
     setFormOpen(true);
@@ -138,33 +128,32 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
     if (!form.title.trim()) return;
 
     const effectiveSlug = form.slug.trim() || slugify(form.title);
-    const mergedPrompt = mergePrompt(form.instruction, form.prompt) || null;
     const nextOrder =
       sortedObjectives.length > 0
         ? Math.max(...sortedObjectives.map((o) => o.order)) + 1
         : 1;
 
     try {
+      const bodyFields = {
+        title: form.title.trim(),
+        slug: effectiveSlug,
+        instruction: form.instruction.trim() || null,
+        description: form.description.trim() || null,
+        conversation_flow: form.conversation_flow.length > 0 ? JSON.stringify(form.conversation_flow) : null,
+        rules: form.rules.trim() || null,
+      };
+
       if (editTarget) {
         await updateMutation.mutateAsync({
           idAgent: agent.id,
           id: editTarget.id,
-          body: {
-            title: form.title.trim(),
-            slug: effectiveSlug,
-            prompt: mergedPrompt,
-          },
+          body: bodyFields,
         });
         toast.success("Objetivo atualizado");
       } else {
         await createMutation.mutateAsync({
           idAgent: agent.id,
-          body: {
-            title: form.title.trim(),
-            slug: effectiveSlug,
-            prompt: mergedPrompt,
-            order: nextOrder,
-          },
+          body: { ...bodyFields, order: nextOrder },
         });
         toast.success("Objetivo criado");
       }
@@ -274,23 +263,20 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
                       </Badge>
                     )}
                   </div>
-                  {objective.prompt && (() => {
-                    const { instruction, body } = splitPrompt(objective.prompt);
-                    return (
-                      <div className="space-y-0.5">
-                        {instruction && (
-                          <p className="text-xs font-medium text-muted-foreground">
-                            Quando: {instruction}
-                          </p>
-                        )}
-                        {body && (
-                          <p className="line-clamp-1 text-xs text-muted-foreground">
-                            {body}
-                          </p>
-                        )}
-                      </div>
-                    );
-                  })()}
+                  {(objective.instruction || objective.description) && (
+                    <div className="space-y-0.5">
+                      {objective.instruction && (
+                        <p className="text-xs font-medium text-muted-foreground">
+                          Quando: {objective.instruction}
+                        </p>
+                      )}
+                      {objective.description && (
+                        <p className="line-clamp-1 text-xs text-muted-foreground">
+                          {objective.description}
+                        </p>
+                      )}
+                    </div>
+                  )}
                 </div>
 
                 <Switch
@@ -338,14 +324,14 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
         </Sortable>
       )}
 
-      {/* Create/Edit Dialog */}
-      <Dialog open={formOpen} onOpenChange={setFormOpen}>
-        <DialogContent className="sm:max-w-lg">
-          <DialogHeader>
-            <DialogTitle>
+      {/* Create/Edit Sheet */}
+      <Sheet open={formOpen} onOpenChange={setFormOpen}>
+        <SheetContent className="sm:max-w-lg overflow-y-auto">
+          <SheetHeader>
+            <SheetTitle>
               {editTarget ? "Editar Objetivo" : "Novo Objetivo"}
-            </DialogTitle>
-          </DialogHeader>
+            </SheetTitle>
+          </SheetHeader>
           <div className="space-y-4">
             <div className="space-y-2">
               <Label htmlFor="objective-title">Título *</Label>
@@ -395,28 +381,56 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
                 placeholder="Ex: Quando o utilizador quer agendar uma consulta"
               />
               <p className="text-xs text-muted-foreground">
-                Instrução curta que diz ao agente QUANDO ativar este objetivo. Aparece na secção [SKILLS] do prompt.
+                Instrução curta que diz ao agente QUANDO ativar este objetivo. Aparece na secção [OBJETIVOS] do prompt.
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="objective-description">Descrição</Label>
+              <Textarea
+                id="objective-description"
+                name="description"
+                value={form.description}
+                onChange={(e) =>
+                  setForm((f) => ({ ...f, description: e.target.value }))
+                }
+                placeholder="Descreva o propósito deste objectivo..."
+                rows={3}
+              />
+              <p className="text-xs text-muted-foreground">
+                Missão e propósito deste objectivo — o que o agente deve alcançar.
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <Label>Fluxo de Conversa</Label>
+              <ConversationFlowEditor
+                steps={form.conversation_flow}
+                onChange={(steps) => setForm((f) => ({ ...f, conversation_flow: steps }))}
+              />
+              <p className="text-xs text-muted-foreground">
+                Etapas que o agente segue quando este objectivo é activado.
               </p>
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="objective-prompt">Instruções detalhadas</Label>
+              <Label htmlFor="objective-rules">Regras</Label>
               <Textarea
-                id="objective-prompt"
-                name="prompt"
-                value={form.prompt}
+                id="objective-rules"
+                name="rules"
+                value={form.rules}
                 onChange={(e) =>
-                  setForm((f) => ({ ...f, prompt: e.target.value }))
+                  setForm((f) => ({ ...f, rules: e.target.value }))
                 }
-                placeholder="Instruções detalhadas que o agente seguirá quando este objetivo for ativado..."
-                rows={6}
+                placeholder="Regras específicas deste objectivo..."
+                rows={3}
               />
               <p className="text-xs text-muted-foreground">
-                Passos, regras e contexto detalhado para o agente seguir quando este objetivo está ativo.
+                Restrições e limites específicos quando este objectivo está activo.
               </p>
             </div>
           </div>
-          <DialogFooter>
+          <SheetFooter>
             <Button
               variant="outline"
               onClick={() => setFormOpen(false)}
@@ -433,9 +447,9 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
             >
               {editTarget ? "Salvar" : "Criar"}
             </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
 
       {/* Delete confirmation */}
       <AlertDialog

package/src/components/agents/agent-revision-tab.tsx

@@ -0,0 +1,368 @@
+import { useState, useMemo } from "react";
+import type { Agent, PromptVersion, ConversationFlowStep } from "../../types";
+import type { GagentsHookConfig } from "../../hooks/types";
+import { usePromptVersions } from "../../hooks";
+import {
+  Button,
+  Badge,
+  Skeleton,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@greatapps/greatauth-ui/ui";
+import { FileText, RotateCcw, X, AlertTriangle } from "lucide-react";
+import { toast } from "sonner";
+
+interface AgentRevisionTabProps {
+  agent: Agent;
+  config: GagentsHookConfig;
+}
+
+const STRUCTURED_MARKERS = ["[IDENTIDADE]", "[MISSÃO]", "[TOM, ESTILO & FORMATO]"];
+
+function formatDate(dateStr: string): string {
+  const date = new Date(dateStr);
+  return date.toLocaleDateString("pt-BR", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+function computeDiff(
+  oldText: string,
+  newText: string,
+): { type: "added" | "removed" | "equal"; line: string }[] {
+  const oldLines = oldText.split("\n");
+  const newLines = newText.split("\n");
+  const result: { type: "added" | "removed" | "equal"; line: string }[] = [];
+  const maxLen = Math.max(oldLines.length, newLines.length);
+
+  for (let i = 0; i < maxLen; i++) {
+    const oldLine = i < oldLines.length ? oldLines[i] : undefined;
+    const newLine = i < newLines.length ? newLines[i] : undefined;
+
+    if (oldLine === newLine) {
+      result.push({ type: "equal", line: newLine! });
+    } else {
+      if (oldLine !== undefined) {
+        result.push({ type: "removed", line: oldLine });
+      }
+      if (newLine !== undefined) {
+        result.push({ type: "added", line: newLine });
+      }
+    }
+  }
+
+  return result;
+}
+
+function formatConversationFlow(raw: string | null): string {
+  if (!raw) return "";
+  try {
+    const steps: ConversationFlowStep[] = JSON.parse(raw);
+    if (!Array.isArray(steps) || steps.length === 0) return "";
+    return steps
+      .sort((a, b) => a.order - b.order)
+      .map((s) => {
+        let line = `${s.order}. ${s.instruction}`;
+        if (s.example) line += `\n   Exemplo: ${s.example}`;
+        return line;
+      })
+      .join("\n");
+  } catch {
+    // If it's not valid JSON, return raw text
+    return raw;
+  }
+}
+
+function buildAssembledPrompt(agent: Agent): string {
+  const sections: string[] = [];
+
+  if (agent.identity?.trim()) {
+    sections.push(`[IDENTIDADE]\n${agent.identity.trim()}`);
+  }
+  if (agent.mission?.trim()) {
+    sections.push(`[MISSÃO]\n${agent.mission.trim()}`);
+  }
+  if (agent.tone_style_format?.trim()) {
+    sections.push(`[TOM, ESTILO & FORMATO]\n${agent.tone_style_format.trim()}`);
+  }
+  if (agent.rules?.trim()) {
+    sections.push(`[REGRAS]\n${agent.rules.trim()}`);
+  }
+
+  const flowFormatted = formatConversationFlow(agent.conversation_flow);
+  if (flowFormatted) {
+    sections.push(`[FLUXO DE CONVERSA]\n${flowFormatted}`);
+  }
+
+  if (agent.context?.trim()) {
+    sections.push(`[CONTEXTO]\n${agent.context.trim()}`);
+  }
+
+  return sections.join("\n\n");
+}
+
+function isLegacyVersion(version: PromptVersion): boolean {
+  const content = version.prompt_content ?? "";
+  return !STRUCTURED_MARKERS.some((marker) => content.includes(marker));
+}
+
+export function AgentRevisionTab({ agent, config }: AgentRevisionTabProps) {
+  const { data: versionsData, isLoading } = usePromptVersions(config, agent.id);
+
+  const [compareVersionId, setCompareVersionId] = useState<number | null>(null);
+  const [legacyModalVersion, setLegacyModalVersion] = useState<PromptVersion | null>(null);
+
+  const versions = (versionsData?.data || []) as PromptVersion[];
+  const sortedVersions = [...versions].sort(
+    (a, b) => new Date(b.datetime_add).getTime() - new Date(a.datetime_add).getTime(),
+  );
+  const currentVersion = sortedVersions.find((v) => v.is_current) || sortedVersions[0] || null;
+
+  const assembledPrompt = useMemo(() => buildAssembledPrompt(agent), [
+    agent.identity,
+    agent.mission,
+    agent.tone_style_format,
+    agent.rules,
+    agent.conversation_flow,
+    agent.context,
+  ]);
+
+  const charCount = assembledPrompt.length;
+  const tokenEstimate = Math.ceil(charCount / 4);
+
+  const compareVersion = sortedVersions.find((v) => v.id === compareVersionId);
+
+  const diffLines =
+    currentVersion && compareVersion && compareVersion.id !== currentVersion.id
+      ? computeDiff(compareVersion.prompt_content ?? "", currentVersion.prompt_content ?? "")
+      : null;
+
+  function handleRestore(version: PromptVersion) {
+    if (isLegacyVersion(version)) {
+      setLegacyModalVersion(version);
+    } else {
+      toast.info("Restaurar versão estruturada — funcionalidade em desenvolvimento");
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="space-y-3 p-4">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <Skeleton key={i} className="h-14 w-full" />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4 p-4 lg:flex-row">
+      {/* Left: Preview + Diff */}
+      <div className="min-w-0 flex-1 space-y-4">
+        {/* Assembled prompt preview */}
+        <div className="space-y-2">
+          <h3 className="text-sm font-medium text-muted-foreground">
+            Preview do Prompt Montado
+          </h3>
+          <div className="rounded-lg border">
+            <pre className="max-h-[32rem] overflow-auto whitespace-pre-wrap p-4 font-mono text-sm leading-relaxed">
+              {assembledPrompt ? (
+                assembledPrompt.split("\n").map((line, i) => {
+                  const isSectionHeader = /^\[.+\]$/.test(line.trim());
+                  return (
+                    <span
+                      key={i}
+                      className={isSectionHeader ? "font-bold text-foreground" : ""}
+                    >
+                      {line}
+                      {"\n"}
+                    </span>
+                  );
+                })
+              ) : (
+                <span className="italic text-muted-foreground">
+                  Nenhum campo estruturado preenchido.
+                </span>
+              )}
+            </pre>
+          </div>
+          <div className="flex items-center gap-3 text-xs text-muted-foreground">
+            <span className="tabular-nums">{charCount.toLocaleString("pt-BR")} caracteres</span>
+            <span>·</span>
+            <span className="tabular-nums">~{tokenEstimate.toLocaleString("pt-BR")} tokens</span>
+          </div>
+        </div>
+
+        {/* Diff panel (conditional) */}
+        {diffLines && compareVersion && currentVersion && (
+          <div>
+            <div className="mb-2 flex items-center justify-between">
+              <h3 className="text-sm font-medium text-muted-foreground">
+                Diferenças: v{compareVersion.version_number} → v{currentVersion.version_number} (actual)
+              </h3>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setCompareVersionId(null)}
+                className="text-xs"
+              >
+                <X className="mr-1 h-3 w-3" />
+                Fechar
+              </Button>
+            </div>
+            <div className="max-h-64 overflow-auto rounded-lg border font-mono text-sm">
+              {diffLines.map((line, i) => (
+                <div
+                  key={i}
+                  className={`whitespace-pre-wrap px-3 py-0.5 ${
+                    line.type === "added"
+                      ? "bg-green-500/10 text-green-700 dark:text-green-400"
+                      : line.type === "removed"
+                        ? "bg-red-500/10 text-red-700 dark:text-red-400"
+                        : ""
+                  }`}
+                >
+                  <span className="mr-2 inline-block w-4 select-none text-muted-foreground">
+                    {line.type === "added" ? "+" : line.type === "removed" ? "-" : " "}
+                  </span>
+                  {line.line || " "}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Right: Version history timeline */}
+      <div className="w-full space-y-2 lg:w-80 lg:shrink-0">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Histórico de Versões
+        </h3>
+        {sortedVersions.length === 0 ? (
+          <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center">
+            <FileText className="mb-2 h-8 w-8 text-muted-foreground" />
+            <p className="text-sm text-muted-foreground">
+              Nenhuma versão encontrada.
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-1">
+            {sortedVersions.map((version) => {
+              const isCurrent = currentVersion?.id === version.id;
+              const isComparing = version.id === compareVersionId;
+              return (
+                <div
+                  key={version.id}
+                  className={`rounded-lg border p-3 transition-colors ${
+                    isCurrent
+                      ? "border-primary bg-primary/5"
+                      : isComparing
+                        ? "border-muted-foreground/30 bg-muted/50"
+                        : ""
+                  }`}
+                >
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="text-sm font-medium">
+                      v{version.version_number}
+                    </span>
+                    {isCurrent && (
+                      <Badge variant="default" className="text-[10px] px-1.5 py-0">
+                        Actual
+                      </Badge>
+                    )}
+                  </div>
+                  <div className="mt-1 text-xs text-muted-foreground">
+                    {formatDate(version.datetime_add)}
+                  </div>
+                  <div className="mt-1 flex items-center gap-2 text-xs text-muted-foreground">
+                    <span>{(version.prompt_content ?? "").length} chars</span>
+                    <span>·</span>
+                    <span className="truncate font-mono">
+                      {(version.prompt_hash ?? "").slice(0, 8)}
+                    </span>
+                  </div>
+                  {version.change_notes && (
+                    <div className="mt-1.5 text-xs italic text-muted-foreground">
+                      {version.change_notes}
+                    </div>
+                  )}
+                  {!isCurrent && (
+                    <div className="mt-2 flex items-center gap-3">
+                      <button
+                        type="button"
+                        onClick={() => setCompareVersionId(isComparing ? null : version.id)}
+                        className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+                      >
+                        <FileText aria-hidden="true" className="h-3 w-3" />
+                        {isComparing ? "Ocultar diff" : "Comparar"}
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => handleRestore(version)}
+                        className="flex items-center gap-1 text-xs text-primary hover:underline"
+                      >
+                        <RotateCcw aria-hidden="true" className="h-3 w-3" />
+                        Restaurar
+                      </button>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Legacy version modal */}
+      <Dialog
+        open={!!legacyModalVersion}
+        onOpenChange={(open) => {
+          if (!open) setLegacyModalVersion(null);
+        }}
+      >
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="h-5 w-5 text-amber-500" />
+              Versão Legada — v{legacyModalVersion?.version_number}
+            </DialogTitle>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="rounded-lg border border-amber-500/30 bg-amber-500/5 p-3">
+              <p className="text-sm text-amber-700 dark:text-amber-400">
+                Esta versão foi criada antes da reestruturação e não pode ser restaurada nos campos estruturados.
+              </p>
+            </div>
+            <div className="max-h-96 overflow-auto rounded-lg border p-4">
+              <pre className="whitespace-pre-wrap font-mono text-sm leading-relaxed">
+                {legacyModalVersion?.prompt_content ?? ""}
+              </pre>
+            </div>
+            <div className="flex items-center gap-3 text-xs text-muted-foreground">
+              <span>
+                {(legacyModalVersion?.prompt_content ?? "").length.toLocaleString("pt-BR")} caracteres
+              </span>
+              {legacyModalVersion?.change_notes && (
+                <>
+                  <span>·</span>
+                  <span className="italic">{legacyModalVersion.change_notes}</span>
+                </>
+              )}
+            </div>
+          </div>
+          <div className="flex justify-end pt-2">
+            <Button variant="outline" onClick={() => setLegacyModalVersion(null)}>
+              Fechar
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}