@greatapps/greatagents-ui 0.3.21 → 0.3.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/greatagents-ui",
-  "version": "0.3.21",
+  "version": "0.3.23",
   "description": "Shared agents UI components for Great platform",
   "type": "module",
   "main": "./dist/index.js",

package/src/client/index.ts

@@ -89,8 +89,8 @@ export function createGagentsClient(config: GagentsClientConfig) {
       idAccount: number,
       id: number,
       body: Partial<
-        Pick<Agent, "title" | "photo" | "delay_typing" | "waiting_time" | "active">
-      > & { prompt?: string; change_notes?: string },
+        Pick<Agent, "title" | "photo" | "delay_typing" | "waiting_time" | "active" | "identity" | "mission" | "tone_style_format" | "rules" | "conversation_flow" | "context">
+      > & { change_notes?: string },
     ) => request<Agent>("PUT", idAccount, `agents/${id}`, body),
 
     deleteAgent: (idAccount: number, id: number) =>
@@ -154,14 +154,14 @@ export function createGagentsClient(config: GagentsClientConfig) {
       idAccount: number,
       idAgent: number,
       body: Pick<Objective, "title"> &
-        Partial<Pick<Objective, "slug" | "prompt" | "order" | "active">>,
+        Partial<Pick<Objective, "slug" | "instruction" | "description" | "conversation_flow" | "rules" | "order" | "active">>,
     ) => request<Objective>("POST", idAccount, `agents/${idAgent}/objectives`, body),
 
     updateObjective: (
       idAccount: number,
       idAgent: number,
       id: number,
-      body: Partial<Pick<Objective, "title" | "slug" | "prompt" | "order" | "active">>,
+      body: Partial<Pick<Objective, "title" | "slug" | "instruction" | "description" | "conversation_flow" | "rules" | "order" | "active">>,
     ) => request<Objective>("PUT", idAccount, `agents/${idAgent}/objectives/${id}`, body),
 
     deleteObjective: (idAccount: number, idAgent: number, id: number) =>

package/src/components/agents/agent-definition-editor.tsx

@@ -0,0 +1,310 @@
+import { useState, useRef, useCallback, useEffect, useMemo } from "react";
+import type { Agent, ConversationFlowStep } from "../../types";
+import type { GagentsHookConfig } from "../../hooks/types";
+import { useUpdateAgent } from "../../hooks";
+import { Button, Label } from "@greatapps/greatauth-ui/ui";
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { ConversationFlowEditor } from "./conversation-flow-editor";
+
+// ---------------------------------------------------------------------------
+// Section config
+// ---------------------------------------------------------------------------
+
+interface SectionDef {
+  key: "identity" | "mission" | "tone_style_format" | "rules" | "conversation_flow" | "context";
+  label: string;
+  helper: string;
+  placeholder: string;
+  required?: boolean;
+  field: keyof Agent;
+  type: "textarea" | "conversation_flow";
+}
+
+const SECTIONS: SectionDef[] = [
+  {
+    key: "identity",
+    label: "Identidade",
+    helper: "Descreva quem é o agente, o seu nome e personalidade",
+    required: true,
+    field: "identity",
+    type: "textarea",
+    placeholder: "Você é a Ana, assistente virtual da Clínica Saúde & Bem-Estar. Você é simpática, profissional e sempre disposta a ajudar os pacientes...",
+  },
+  {
+    key: "mission",
+    label: "Missão",
+    helper: "Qual é a missão principal deste agente",
+    required: true,
+    field: "mission",
+    type: "textarea",
+    placeholder: "Sua missão é ajudar pacientes a agendar consultas, tirar dúvidas sobre horários e especialidades, e fornecer informações sobre a clínica...",
+  },
+  {
+    key: "tone_style_format",
+    label: "Tom, Estilo & Formato",
+    helper: "Defina como o agente comunica e formata as respostas",
+    required: false,
+    field: "tone_style_format",
+    type: "textarea",
+    placeholder: "Use tom empático e acolhedor. Responda de forma clara e objetiva, em no máximo 3 parágrafos. Use listas quando houver múltiplas opções...",
+  },
+  {
+    key: "rules",
+    label: "Regras",
+    helper: "Limites, restrições e comportamentos obrigatórios",
+    required: false,
+    field: "rules",
+    type: "textarea",
+    placeholder: "Nunca forneça diagnósticos médicos. Sempre recomende consulta presencial para urgências. Não agende consultas fora do horário de funcionamento (08h-18h)...",
+  },
+  {
+    key: "conversation_flow",
+    label: "Fluxo de Conversa",
+    helper: "Etapas que o agente segue no início de cada conversa",
+    required: false,
+    field: "conversation_flow",
+    type: "conversation_flow",
+    placeholder: "",
+  },
+  {
+    key: "context",
+    label: "Contexto",
+    helper: "Informações adicionais que o agente deve saber",
+    required: false,
+    field: "context",
+    type: "textarea",
+    placeholder: "A clínica funciona de segunda a sexta, das 08h às 18h. Especialidades disponíveis: Cardiologia, Dermatologia, Ortopedia, Pediatria...",
+  },
+];
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function parseConversationFlow(raw: string | null | undefined): ConversationFlowStep[] {
+  if (!raw) return [];
+  try {
+    const parsed = JSON.parse(raw);
+    if (Array.isArray(parsed)) return parsed;
+    return [];
+  } catch {
+    return [];
+  }
+}
+
+function computeTotals(fields: Record<string, string>, steps: ConversationFlowStep[]) {
+  const textChars = Object.values(fields).reduce((sum, v) => sum + v.length, 0);
+  const flowChars = JSON.stringify(steps).length;
+  const total = textChars + flowChars;
+  return { chars: total, tokens: Math.ceil(total / 4) };
+}
+
+// ---------------------------------------------------------------------------
+// Auto-resize textarea component
+// ---------------------------------------------------------------------------
+
+function AutoTextarea({
+  value,
+  onChange,
+  disabled,
+  placeholder,
+  ariaLabel,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  ariaLabel?: string;
+}) {
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  const autoResize = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.max(120, el.scrollHeight)}px`;
+  }, []);
+
+  useEffect(() => {
+    autoResize();
+  }, [value, autoResize]);
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === "Tab") {
+      e.preventDefault();
+      const el = e.currentTarget;
+      const start = el.selectionStart;
+      const end = el.selectionEnd;
+      const newValue = el.value.substring(0, start) + "  " + el.value.substring(end);
+      onChange(newValue);
+      requestAnimationFrame(() => {
+        el.selectionStart = el.selectionEnd = start + 2;
+      });
+    }
+  }
+
+  return (
+    <textarea
+      ref={ref}
+      aria-label={ariaLabel}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      onKeyDown={handleKeyDown}
+      placeholder={placeholder}
+      disabled={disabled}
+      className="w-full resize-none rounded-lg border bg-background p-3 text-sm leading-relaxed focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
+      style={{ minHeight: "120px" }}
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// AgentDefinitionEditor
+// ---------------------------------------------------------------------------
+
+interface AgentDefinitionEditorProps {
+  agent: Agent;
+  config: GagentsHookConfig;
+}
+
+export function AgentDefinitionEditor({ agent, config }: AgentDefinitionEditorProps) {
+  const updateAgent = useUpdateAgent(config);
+
+  // Track agent ID to reset state on agent switch
+  const [trackedAgentId, setTrackedAgentId] = useState(agent.id);
+
+  // Text field state
+  const [fields, setFields] = useState<Record<string, string>>(() => ({
+    identity: agent.identity ?? "",
+    mission: agent.mission ?? "",
+    tone_style_format: agent.tone_style_format ?? "",
+    rules: agent.rules ?? "",
+    context: agent.context ?? "",
+  }));
+
+  // Conversation flow state
+  const [conversationFlowSteps, setConversationFlowSteps] = useState<ConversationFlowStep[]>(
+    () => parseConversationFlow(agent.conversation_flow),
+  );
+
+  // Reset state when agent changes
+  if (trackedAgentId !== agent.id) {
+    setTrackedAgentId(agent.id);
+    setFields({
+      identity: agent.identity ?? "",
+      mission: agent.mission ?? "",
+      tone_style_format: agent.tone_style_format ?? "",
+      rules: agent.rules ?? "",
+      context: agent.context ?? "",
+    });
+    setConversationFlowSteps(parseConversationFlow(agent.conversation_flow));
+  }
+
+  function updateField(key: string, value: string) {
+    setFields((prev) => ({ ...prev, [key]: value }));
+  }
+
+  const { chars, tokens } = computeTotals(fields, conversationFlowSteps);
+
+  const hasChanges = useMemo(() => {
+    if (fields.identity !== (agent.identity ?? "")) return true;
+    if (fields.mission !== (agent.mission ?? "")) return true;
+    if (fields.tone_style_format !== (agent.tone_style_format ?? "")) return true;
+    if (fields.rules !== (agent.rules ?? "")) return true;
+    if (fields.context !== (agent.context ?? "")) return true;
+    const originalSteps = parseConversationFlow(agent.conversation_flow);
+    if (JSON.stringify(conversationFlowSteps) !== JSON.stringify(originalSteps)) return true;
+    return false;
+  }, [fields, conversationFlowSteps, agent]);
+
+  function discard() {
+    setFields({
+      identity: agent.identity ?? "",
+      mission: agent.mission ?? "",
+      tone_style_format: agent.tone_style_format ?? "",
+      rules: agent.rules ?? "",
+      context: agent.context ?? "",
+    });
+    setConversationFlowSteps(parseConversationFlow(agent.conversation_flow));
+  }
+
+  async function handleSave() {
+    if (!fields.identity.trim() || !fields.mission.trim()) {
+      toast.error("Identidade e Missão são campos obrigatórios");
+      return;
+    }
+
+    const body: Record<string, unknown> = {
+      identity: fields.identity.trim(),
+      mission: fields.mission.trim(),
+      tone_style_format: fields.tone_style_format.trim() || null,
+      rules: fields.rules.trim() || null,
+      conversation_flow: conversationFlowSteps.length > 0
+        ? JSON.stringify(conversationFlowSteps)
+        : null,
+      context: fields.context.trim() || null,
+    };
+
+    try {
+      await updateAgent.mutateAsync({ id: agent.id, body });
+      toast.success("Definição do agente salva com sucesso");
+    } catch {
+      toast.error("Erro ao salvar definição do agente");
+    }
+  }
+
+  return (
+    <div className="space-y-6 p-4">
+      {/* Sections */}
+      {SECTIONS.map((section) => (
+        <div key={section.key} className="space-y-2">
+          <Label className="text-sm font-medium">
+            {section.label}
+            {section.required && <span className="ml-0.5 text-destructive">*</span>}
+          </Label>
+          <p className="text-xs text-muted-foreground">{section.helper}</p>
+
+          {section.type === "textarea" ? (
+            <AutoTextarea
+              value={fields[section.key] ?? ""}
+              onChange={(v) => updateField(section.key, v)}
+              disabled={updateAgent.isPending}
+              placeholder={section.placeholder}
+              ariaLabel={section.label}
+            />
+          ) : (
+            <ConversationFlowEditor
+              steps={conversationFlowSteps}
+              onChange={setConversationFlowSteps}
+              disabled={updateAgent.isPending}
+            />
+          )}
+        </div>
+      ))}
+
+      {/* Character count + token estimate */}
+      <div className="flex items-center gap-3 text-xs text-muted-foreground">
+        <span className="tabular-nums">{chars.toLocaleString("pt-BR")} caracteres</span>
+        <span>·</span>
+        <span className="tabular-nums">~{tokens.toLocaleString("pt-BR")} tokens</span>
+      </div>
+
+      {/* Sticky save/discard bar */}
+      {hasChanges && (
+        <div className="sticky bottom-0 z-10 flex items-center justify-between gap-2 rounded-lg border bg-background p-3 shadow-sm">
+          <p className="text-sm text-muted-foreground">Você tem alterações não salvas.</p>
+          <div className="flex gap-2">
+            <Button variant="ghost" size="sm" onClick={discard} disabled={updateAgent.isPending}>
+              Descartar
+            </Button>
+            <Button size="sm" onClick={handleSave} disabled={updateAgent.isPending}>
+              {updateAgent.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Salvar
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/agents/agent-edit-form.tsx

@@ -7,11 +7,11 @@ import {
   Input,
   Label,
   Switch,
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetFooter,
 } from "@greatapps/greatauth-ui/ui";
 import { Loader2 } from "lucide-react";
 import { toast } from "sonner";
@@ -185,7 +185,7 @@ export function AgentEditForm({ config, agent, idAccount, open, onOpenChange }:
         </div>
       </div>
 
-      <DialogFooter>
+      <SheetFooter>
         <Button
           type="button"
           variant="outline"
@@ -200,20 +200,20 @@ export function AgentEditForm({ config, agent, idAccount, open, onOpenChange }:
           )}
           Salvar
         </Button>
-      </DialogFooter>
+      </SheetFooter>
     </form>
   );
 
   if (open !== undefined && onOpenChange) {
     return (
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle>Editar Agente</DialogTitle>
-          </DialogHeader>
+      <Sheet open={open} onOpenChange={onOpenChange}>
+        <SheetContent className="sm:max-w-md overflow-y-auto">
+          <SheetHeader>
+            <SheetTitle>Editar Agente</SheetTitle>
+          </SheetHeader>
           {formContent}
-        </DialogContent>
-      </Dialog>
+        </SheetContent>
+      </Sheet>
     );
   }
 

package/src/components/agents/agent-form-dialog.tsx

@@ -3,11 +3,11 @@ import { useCreateAgent, useUpdateAgent } from "../../hooks";
 import type { Agent } from "../../types";
 import type { GagentsHookConfig } from "../../hooks/types";
 import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetFooter,
   Button,
   Input,
   Label,
@@ -134,13 +134,13 @@ export function AgentFormDialog({
   }
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-lg">
-        <DialogHeader>
-          <DialogTitle>
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="sm:max-w-lg overflow-y-auto">
+        <SheetHeader>
+          <SheetTitle>
             {isEditing ? "Editar Agente" : "Novo Agente"}
-          </DialogTitle>
-        </DialogHeader>
+          </SheetTitle>
+        </SheetHeader>
         <form onSubmit={handleSubmit} className="space-y-4">
           <div className="flex justify-center">
             <ImageCropUpload
@@ -224,7 +224,7 @@ export function AgentFormDialog({
               </p>
             </div>
           </div>
-          <DialogFooter>
+          <SheetFooter>
             <Button
               type="button"
               variant="outline"
@@ -239,9 +239,9 @@ export function AgentFormDialog({
               ) : null}
               {isEditing ? "Salvar" : "Criar"}
             </Button>
-          </DialogFooter>
+          </SheetFooter>
         </form>
-      </DialogContent>
-    </Dialog>
+      </SheetContent>
+    </Sheet>
   );
 }