@greatapps/greatagents-ui 0.3.22 → 0.3.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/greatagents-ui",
-  "version": "0.3.22",
+  "version": "0.3.23",
   "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";
@@ -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>
   );
 }

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,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>
@@ -430,7 +430,7 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
               </p>
             </div>
           </div>
-          <DialogFooter>
+          <SheetFooter>
             <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