@greatapps/greatagents-ui 0.3.22 → 0.3.24

package/package.json

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

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

@@ -1,8 +1,8 @@
-import { useState, useRef, useCallback, useEffect } from "react";
+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, Input, Label } from "@greatapps/greatauth-ui/ui";
+import { Button, Label } from "@greatapps/greatauth-ui/ui";
 import { Loader2 } from "lucide-react";
 import { toast } from "sonner";
 import { ConversationFlowEditor } from "./conversation-flow-editor";
@@ -15,6 +15,7 @@ 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";
@@ -28,6 +29,7 @@ const SECTIONS: SectionDef[] = [
     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",
@@ -36,6 +38,7 @@ const SECTIONS: SectionDef[] = [
     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",
@@ -44,6 +47,7 @@ const SECTIONS: SectionDef[] = [
     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",
@@ -52,6 +56,7 @@ const SECTIONS: SectionDef[] = [
     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",
@@ -60,6 +65,7 @@ const SECTIONS: SectionDef[] = [
     required: false,
     field: "conversation_flow",
     type: "conversation_flow",
+    placeholder: "",
   },
   {
     key: "context",
@@ -68,6 +74,7 @@ const SECTIONS: SectionDef[] = [
     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...",
   },
 ];
 
@@ -181,8 +188,6 @@ export function AgentDefinitionEditor({ agent, config }: AgentDefinitionEditorPr
     () => parseConversationFlow(agent.conversation_flow),
   );
 
-  const [changeNotes, setChangeNotes] = useState("");
-
   // Reset state when agent changes
   if (trackedAgentId !== agent.id) {
     setTrackedAgentId(agent.id);
@@ -194,7 +199,6 @@ export function AgentDefinitionEditor({ agent, config }: AgentDefinitionEditorPr
       context: agent.context ?? "",
     });
     setConversationFlowSteps(parseConversationFlow(agent.conversation_flow));
-    setChangeNotes("");
   }
 
   function updateField(key: string, value: string) {
@@ -203,6 +207,28 @@ export function AgentDefinitionEditor({ agent, config }: AgentDefinitionEditorPr
 
   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");
@@ -220,13 +246,8 @@ export function AgentDefinitionEditor({ agent, config }: AgentDefinitionEditorPr
       context: fields.context.trim() || null,
     };
 
-    if (changeNotes.trim()) {
-      body.change_notes = changeNotes.trim();
-    }
-
     try {
       await updateAgent.mutateAsync({ id: agent.id, body });
-      setChangeNotes("");
       toast.success("Definição do agente salva com sucesso");
     } catch {
       toast.error("Erro ao salvar definição do agente");
@@ -249,7 +270,7 @@ export function AgentDefinitionEditor({ agent, config }: AgentDefinitionEditorPr
               value={fields[section.key] ?? ""}
               onChange={(v) => updateField(section.key, v)}
               disabled={updateAgent.isPending}
-              placeholder={`${section.label}...`}
+              placeholder={section.placeholder}
               ariaLabel={section.label}
             />
           ) : (
@@ -269,37 +290,21 @@ export function AgentDefinitionEditor({ agent, config }: AgentDefinitionEditorPr
         <span className="tabular-nums">~{tokens.toLocaleString("pt-BR")} tokens</span>
       </div>
 
-      {/* Footer: change notes + save */}
-      <div className="flex items-center gap-3">
-        <Input
-          aria-label="Notas da alteração"
-          name="changeNotes"
-          value={changeNotes}
-          onChange={(e) => setChangeNotes(e.target.value)}
-          placeholder="O que mudou? (opcional)"
-          disabled={updateAgent.isPending}
-          className="flex-1"
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              e.preventDefault();
-              handleSave();
-            }
-          }}
-        />
-        <Button
-          onClick={handleSave}
-          disabled={
-            updateAgent.isPending ||
-            !fields.identity.trim() ||
-            !fields.mission.trim()
-          }
-        >
-          {updateAgent.isPending && (
-            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-          )}
-          Salvar
-        </Button>
-      </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";
@@ -100,8 +100,8 @@ export function AgentEditForm({ config, agent, idAccount, open, onOpenChange }:
     }
   }
 
-  const formContent = (
-    <form onSubmit={handleSubmit} className="space-y-4">
+  const formFields = (
+    <>
       <div className="flex justify-center">
         <ImageCropUpload
           value={form.photo || null}
@@ -184,38 +184,63 @@ export function AgentEditForm({ config, agent, idAccount, open, onOpenChange }:
           </p>
         </div>
       </div>
-
-      <DialogFooter>
-        <Button
-          type="button"
-          variant="outline"
-          onClick={() => onOpenChange?.(false)}
-          disabled={updateAgent.isPending}
-        >
-          Cancelar
-        </Button>
-        <Button type="submit" disabled={updateAgent.isPending}>
-          {updateAgent.isPending && (
-            <Loader2 aria-hidden="true" className="mr-2 h-4 w-4 animate-spin" />
-          )}
-          Salvar
-        </Button>
-      </DialogFooter>
-    </form>
+    </>
   );
 
   if (open !== undefined && onOpenChange) {
     return (
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle>Editar Agente</DialogTitle>
-          </DialogHeader>
-          {formContent}
-        </DialogContent>
-      </Dialog>
+      <Sheet open={open} onOpenChange={onOpenChange}>
+        <SheetContent className="sm:max-w-md">
+          <SheetHeader>
+            <SheetTitle>Editar Agente</SheetTitle>
+          </SheetHeader>
+          <form onSubmit={handleSubmit} className="flex flex-1 flex-col overflow-hidden">
+            <div className="flex-1 overflow-y-auto px-4 space-y-4">
+              {formFields}
+            </div>
+            <SheetFooter className="flex-row justify-end border-t">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange?.(false)}
+                disabled={updateAgent.isPending}
+              >
+                Cancelar
+              </Button>
+              <Button type="submit" disabled={updateAgent.isPending}>
+                {updateAgent.isPending && (
+                  <Loader2 aria-hidden="true" className="mr-2 h-4 w-4 animate-spin" />
+                )}
+                Salvar
+              </Button>
+            </SheetFooter>
+          </form>
+        </SheetContent>
+      </Sheet>
     );
   }
 
-  return <div className="max-w-lg pt-4">{formContent}</div>;
+  return (
+    <div className="max-w-lg pt-4">
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {formFields}
+        <div className="flex justify-end gap-2 pt-4 border-t">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => onOpenChange?.(false)}
+            disabled={updateAgent.isPending}
+          >
+            Cancelar
+          </Button>
+          <Button type="submit" disabled={updateAgent.isPending}>
+            {updateAgent.isPending && (
+              <Loader2 aria-hidden="true" className="mr-2 h-4 w-4 animate-spin" />
+            )}
+            Salvar
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
 }

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,14 +134,15 @@ 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-md">
+        <SheetHeader>
+          <SheetTitle>
             {isEditing ? "Editar Agente" : "Novo Agente"}
-          </DialogTitle>
-        </DialogHeader>
-        <form onSubmit={handleSubmit} className="space-y-4">
+          </SheetTitle>
+        </SheetHeader>
+        <form onSubmit={handleSubmit} className="flex flex-1 flex-col overflow-hidden">
+          <div className="flex-1 overflow-y-auto px-4 space-y-4">
           <div className="flex justify-center">
             <ImageCropUpload
               value={form.photo || null}
@@ -224,7 +225,8 @@ export function AgentFormDialog({
               </p>
             </div>
           </div>
-          <DialogFooter>
+          </div>
+          <SheetFooter className="flex-row justify-end border-t">
             <Button
               type="button"
               variant="outline"
@@ -239,9 +241,9 @@ export function AgentFormDialog({
               ) : null}
               {isEditing ? "Salvar" : "Criar"}
             </Button>
-          </DialogFooter>
+          </SheetFooter>
         </form>
-      </DialogContent>
-    </Dialog>
+      </SheetContent>
+    </Sheet>
   );
 }

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

@@ -15,11 +15,11 @@ import {
   Textarea,
   Label,
   Badge,
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetFooter,
   AlertDialog,
   AlertDialogAction,
   AlertDialogCancel,
@@ -324,15 +324,15 @@ 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">
+          <SheetHeader>
+            <SheetTitle>
               {editTarget ? "Editar Objetivo" : "Novo Objetivo"}
-            </DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
+            </SheetTitle>
+          </SheetHeader>
+          <div className="flex-1 overflow-y-auto px-4 space-y-4">
             <div className="space-y-2">
               <Label htmlFor="objective-title">Título *</Label>
               <Input
@@ -430,7 +430,7 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
               </p>
             </div>
           </div>
-          <DialogFooter>
+          <SheetFooter className="flex-row justify-end border-t">
             <Button
               variant="outline"
               onClick={() => setFormOpen(false)}
@@ -447,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/conversation-flow-editor.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useRef, useState } from "react";
 import type { ConversationFlowStep } from "../../types";
-import { Button, Input } from "@greatapps/greatauth-ui/ui";
+import { Button, Textarea } from "@greatapps/greatauth-ui/ui";
 import {
   Sortable,
   SortableContent,
@@ -9,7 +9,6 @@ import {
   SortableOverlay,
 } from "../ui/sortable";
 import { GripVertical, Plus, Trash2 } from "lucide-react";
-import { cn } from "../../lib";
 
 interface StepWithKey extends ConversationFlowStep {
   _key: number;
@@ -105,47 +104,47 @@ export function ConversationFlowEditor({
               <SortableItem
                 key={step._key}
                 value={step._key}
-                className="flex items-center gap-2 rounded-lg border bg-card p-2"
+                className="flex flex-col gap-2 rounded-lg border bg-card p-3"
               >
-                <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>
+                <div className="flex items-center gap-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">
+                    {step.order}.
+                  </span>
+                  <span className="flex-1 text-sm font-medium truncate">{step.instruction || "Nova etapa"}</span>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    aria-label="Remover etapa"
+                    className="shrink-0 text-muted-foreground hover:text-destructive"
+                    onClick={() => handleRemove(step._key)}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+                <div className="space-y-2 pl-8">
+                  <Textarea
+                    value={step.instruction}
+                    onChange={(e) =>
+                      handleFieldChange(step._key, "instruction", e.target.value)
+                    }
+                    placeholder="Descreva o que o agente deve fazer nesta etapa..."
+                    className="min-h-[2.5rem] resize-none"
+                    rows={2}
+                  />
+                  <Textarea
+                    value={step.example ?? ""}
+                    onChange={(e) =>
+                      handleFieldChange(step._key, "example", e.target.value)
+                    }
+                    placeholder="Exemplo de resposta do agente (opcional)"
+                    className="min-h-[2.5rem] resize-none text-muted-foreground"
+                    rows={1}
+                  />
+                </div>
               </SortableItem>
             ))}
           </SortableContent>