@greatapps/greatagents-ui 0.3.20 → 0.3.22

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>
+  );
+}

package/src/components/agents/agent-tabs.tsx

@@ -1,7 +1,8 @@
 import type { Agent } from "../../types";
 import type { GagentsHookConfig } from "../../hooks/types";
 import { AgentObjectivesList } from "./agent-objectives-list";
-import { AgentPromptEditor } from "./agent-prompt-editor";
+import { AgentDefinitionEditor } from "./agent-definition-editor";
+import { AgentRevisionTab } from "./agent-revision-tab";
 import { AgentConversationsPanel } from "../conversations/agent-conversations-panel";
 import { CapabilitiesTab } from "../capabilities/capabilities-tab";
 import { IntegrationsTab } from "../capabilities/integrations-tab";
@@ -11,7 +12,7 @@ import {
   TabsTrigger,
   TabsContent,
 } from "@greatapps/greatauth-ui/ui";
-import { Target, FileText, MessageCircle, Blocks, Plug } from "lucide-react";
+import { Target, Settings2, MessageCircle, Blocks, Plug, History } from "lucide-react";
 
 interface AgentTabsProps {
   agent: Agent;
@@ -25,11 +26,11 @@ export function AgentTabs({
   renderChatLink,
 }: AgentTabsProps) {
   return (
-    <Tabs defaultValue="prompt">
+    <Tabs defaultValue="definicao">
       <TabsList>
-        <TabsTrigger value="prompt" className="flex items-center gap-1.5">
-          <FileText aria-hidden="true" className="h-3.5 w-3.5" />
-          Prompt
+        <TabsTrigger value="definicao" className="flex items-center gap-1.5">
+          <Settings2 aria-hidden="true" className="h-3.5 w-3.5" />
+          Definição
         </TabsTrigger>
         <TabsTrigger value="objetivos" className="flex items-center gap-1.5">
           <Target aria-hidden="true" className="h-3.5 w-3.5" />
@@ -47,10 +48,14 @@ export function AgentTabs({
           <MessageCircle aria-hidden="true" className="h-3.5 w-3.5" />
           Conversas
         </TabsTrigger>
+        <TabsTrigger value="revisao" className="flex items-center gap-1.5">
+          <History aria-hidden="true" className="h-3.5 w-3.5" />
+          Revisão
+        </TabsTrigger>
       </TabsList>
 
-      <TabsContent value="prompt" className="mt-4">
-        <AgentPromptEditor agent={agent} config={config} />
+      <TabsContent value="definicao" className="mt-4">
+        <AgentDefinitionEditor agent={agent} config={config} />
       </TabsContent>
 
       <TabsContent value="objetivos" className="mt-4">
@@ -72,6 +77,10 @@ export function AgentTabs({
           renderChatLink={renderChatLink}
         />
       </TabsContent>
+
+      <TabsContent value="revisao" className="mt-4">
+        <AgentRevisionTab agent={agent} config={config} />
+      </TabsContent>
     </Tabs>
   );
 }

package/src/components/agents/conversation-flow-editor.tsx

@@ -0,0 +1,180 @@
+import { useCallback, useRef, useState } from "react";
+import type { ConversationFlowStep } from "../../types";
+import { Button, Input } from "@greatapps/greatauth-ui/ui";
+import {
+  Sortable,
+  SortableContent,
+  SortableItem,
+  SortableItemHandle,
+  SortableOverlay,
+} from "../ui/sortable";
+import { GripVertical, Plus, Trash2 } from "lucide-react";
+import { cn } from "../../lib";
+
+interface StepWithKey extends ConversationFlowStep {
+  _key: number;
+}
+
+interface ConversationFlowEditorProps {
+  steps: ConversationFlowStep[];
+  onChange: (steps: ConversationFlowStep[]) => void;
+  disabled?: boolean;
+}
+
+function renumber(steps: ConversationFlowStep[]): ConversationFlowStep[] {
+  return steps.map((s, i) => ({ ...s, order: i + 1 }));
+}
+
+function stripKeys(steps: StepWithKey[]): ConversationFlowStep[] {
+  return steps.map(({ _key, ...rest }) => rest);
+}
+
+export function ConversationFlowEditor({
+  steps,
+  onChange,
+}: ConversationFlowEditorProps) {
+  const nextKey = useRef(steps.length + 1);
+
+  const [internal, setInternal] = useState<StepWithKey[]>(() =>
+    steps.map((s, i) => ({ ...s, _key: i + 1 })),
+  );
+
+  const sync = useCallback(
+    (next: StepWithKey[]) => {
+      const renumbered = renumber(next).map((s, i) => ({
+        ...s,
+        _key: next[i]._key,
+      })) as StepWithKey[];
+      setInternal(renumbered);
+      onChange(stripKeys(renumbered));
+    },
+    [onChange],
+  );
+
+  function handleAdd() {
+    nextKey.current += 1;
+    const newStep: StepWithKey = {
+      order: internal.length + 1,
+      instruction: "",
+      example: null,
+      _key: nextKey.current,
+    };
+    sync([...internal, newStep]);
+  }
+
+  function handleRemove(key: number) {
+    sync(internal.filter((s) => s._key !== key));
+  }
+
+  function handleFieldChange(
+    key: number,
+    field: "instruction" | "example",
+    value: string,
+  ) {
+    const next = internal.map((s) => {
+      if (s._key !== key) return s;
+      if (field === "example") {
+        return { ...s, example: value || null };
+      }
+      return { ...s, [field]: value };
+    });
+    sync(next);
+  }
+
+  function handleReorder(newItems: StepWithKey[]) {
+    sync(newItems);
+  }
+
+  return (
+    <div className="space-y-3">
+      {internal.length === 0 ? (
+        <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center">
+          <p className="text-sm text-muted-foreground">
+            Nenhuma etapa definida. Adicione a primeira etapa do fluxo de
+            conversa.
+          </p>
+        </div>
+      ) : (
+        <Sortable
+          value={internal}
+          onValueChange={handleReorder}
+          getItemValue={(item) => item._key}
+        >
+          <SortableContent className="space-y-2">
+            {internal.map((step) => (
+              <SortableItem
+                key={step._key}
+                value={step._key}
+                className="flex items-center gap-2 rounded-lg border bg-card p-2"
+              >
+                <SortableItemHandle className="shrink-0 cursor-grab text-muted-foreground hover:text-foreground">
+                  <GripVertical aria-hidden="true" className="h-4 w-4" />
+                </SortableItemHandle>
+
+                <span className="shrink-0 text-xs font-medium text-muted-foreground tabular-nums w-6 text-right">
+                  {step.order}.
+                </span>
+
+                <Input
+                  value={step.instruction}
+                  onChange={(e) =>
+                    handleFieldChange(step._key, "instruction", e.target.value)
+                  }
+                  placeholder="Instrução (obrigatório)"
+                  className="flex-1 min-w-0"
+                  required
+                />
+
+                <Input
+                  value={step.example ?? ""}
+                  onChange={(e) =>
+                    handleFieldChange(step._key, "example", e.target.value)
+                  }
+                  placeholder="Exemplo (opcional)"
+                  className="flex-1 min-w-0"
+                />
+
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  aria-label="Remover etapa"
+                  className={cn(
+                    "shrink-0 text-muted-foreground hover:text-destructive",
+                  )}
+                  onClick={() => handleRemove(step._key)}
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </SortableItem>
+            ))}
+          </SortableContent>
+          <SortableOverlay>
+            {({ value }) => {
+              const step = internal.find((s) => s._key === value);
+              return (
+                <div className="flex items-center gap-2 rounded-lg border bg-card p-2 shadow-lg">
+                  <GripVertical
+                    aria-hidden="true"
+                    className="h-4 w-4 text-muted-foreground"
+                  />
+                  <span className="text-xs font-medium text-muted-foreground">
+                    {step?.order}.
+                  </span>
+                  <span className="text-sm truncate">
+                    {step?.instruction || "Etapa sem instrução"}
+                  </span>
+                </div>
+              );
+            }}
+          </SortableOverlay>
+        </Sortable>
+      )}
+
+      <Button type="button" variant="outline" size="sm" onClick={handleAdd}>
+        <Plus className="mr-2 h-4 w-4" />
+        Adicionar etapa
+      </Button>
+    </div>
+  );
+}

package/src/components/capabilities/integrations-tab.tsx

@@ -53,6 +53,7 @@ const INTEGRATION_FUNCTIONS: Record<string, IntegrationFunction[]> = {
 
 function buildCustomInstructions(
   integrationSlug: string,
+  integrationName: string,
   selectedFunctions: Set<string>,
   functionInstructions: Record<string, string>,
 ): string {
@@ -62,12 +63,16 @@ function buildCustomInstructions(
   const activeFns = fns.filter((f) => selectedFunctions.has(f.slug));
   if (activeFns.length === 0) return "";
 
-  const lines = activeFns.map((f) => {
+  const lines: string[] = [];
+  lines.push(`## ${integrationName} (${integrationSlug})`);
+
+  for (const f of activeFns) {
     const instruction = functionInstructions[f.slug] || f.defaultInstructions;
-    return `- ${f.slug}: ${instruction}`;
-  });
+    lines.push(`### ${f.slug}`);
+    lines.push(instruction);
+  }
 
-  return `Funções disponíveis (${integrationSlug}):\n${lines.join("\n")}`;
+  return lines.join("\n");
 }
 
 // ---------------------------------------------------------------------------
@@ -260,7 +265,7 @@ export function IntegrationsTab({
               if (!toolId) continue;
             }
           }
-          const customInstructions = buildCustomInstructions(slug, local.selectedFunctions, local.functionInstructions);
+          const customInstructions = buildCustomInstructions(slug, card.definition.name, local.selectedFunctions, local.functionInstructions);
           await addAgentTool.mutateAsync({
             idAgent: agentId,
             body: { id_tool: toolId, enabled: true, ...(customInstructions ? { custom_instructions: customInstructions } : {}) },
@@ -280,7 +285,7 @@ export function IntegrationsTab({
           if (toolId) {
             const agentTool = agentTools.find((at) => at.id_tool === toolId);
             if (agentTool) {
-              const customInstructions = buildCustomInstructions(slug, local.selectedFunctions, local.functionInstructions);
+              const customInstructions = buildCustomInstructions(slug, card.definition.name, local.selectedFunctions, local.functionInstructions);
               await updateAgentTool.mutateAsync({
                 idAgent: agentId, id: agentTool.id,
                 body: { custom_instructions: customInstructions },

package/src/hooks/use-agents.ts

@@ -34,7 +34,6 @@ export function useCreateAgent(config: GagentsHookConfig) {
   return useMutation({
     mutationFn: (body: {
       title: string;
-      prompt?: string;
       photo?: string;
       delay_typing?: number;
       waiting_time?: number;
@@ -57,7 +56,13 @@ export function useUpdateAgent(config: GagentsHookConfig) {
       id: number;
       body: {
         title?: string;
-        prompt?: string;
+        identity?: string | null;
+        mission?: string | null;
+        tone_style_format?: string | null;
+        rules?: string | null;
+        conversation_flow?: string | null;
+        context?: string | null;
+        change_notes?: string;
         photo?: string;
         delay_typing?: number;
         waiting_time?: number;