@greatapps/greatagents-ui 0.3.23 → 0.3.25

package/package.json

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

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

@@ -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>
-
-      <SheetFooter>
-        <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>
+    </>
   );
 
   if (open !== undefined && onOpenChange) {
     return (
       <Sheet open={open} onOpenChange={onOpenChange}>
-        <SheetContent className="sm:max-w-md overflow-y-auto">
+        <SheetContent className="sm:max-w-md">
           <SheetHeader>
             <SheetTitle>Editar Agente</SheetTitle>
           </SheetHeader>
-          {formContent}
+          <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

@@ -135,13 +135,14 @@ export function AgentFormDialog({
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="sm:max-w-lg overflow-y-auto">
+      <SheetContent className="sm:max-w-md">
         <SheetHeader>
           <SheetTitle>
             {isEditing ? "Editar Agente" : "Novo Agente"}
           </SheetTitle>
         </SheetHeader>
-        <form onSubmit={handleSubmit} className="space-y-4">
+        <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>
-          <SheetFooter>
+          </div>
+          <SheetFooter className="flex-row justify-end border-t">
             <Button
               type="button"
               variant="outline"

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

@@ -326,13 +326,13 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
 
       {/* Create/Edit Sheet */}
       <Sheet open={formOpen} onOpenChange={setFormOpen}>
-        <SheetContent className="sm:max-w-lg overflow-y-auto">
+        <SheetContent className="sm:max-w-lg">
           <SheetHeader>
             <SheetTitle>
               {editTarget ? "Editar Objetivo" : "Novo Objetivo"}
             </SheetTitle>
           </SheetHeader>
-          <div className="space-y-4">
+          <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>
-          <SheetFooter>
+          <SheetFooter className="flex-row justify-end border-t">
             <Button
               variant="outline"
               onClick={() => setFormOpen(false)}

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

@@ -27,11 +27,11 @@ import {
   PopoverTrigger,
   Input,
   Textarea,
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetFooter,
   Label,
   Select,
   SelectContent,
@@ -291,18 +291,18 @@ export function AgentToolsList({ agent, config }: AgentToolsListProps) {
         </div>
       )}
 
-      {/* Config dialog for custom_instructions */}
-      <Dialog
+      {/* Config sheet for custom_instructions */}
+      <Sheet
         open={!!configTarget}
         onOpenChange={(open) => !open && setConfigTarget(null)}
       >
-        <DialogContent className="sm:max-w-lg">
-          <DialogHeader>
-            <DialogTitle>
+        <SheetContent className="sm:max-w-lg">
+          <SheetHeader>
+            <SheetTitle>
               Instruções da Ferramenta
-            </DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
+            </SheetTitle>
+          </SheetHeader>
+          <div className="flex-1 overflow-y-auto px-4 space-y-4">
             {configTarget && getToolInfo(configTarget.id_tool)?.type !== "none" && (
               <div className="space-y-2">
                 <Label htmlFor="tool-credential">Credencial</Label>
@@ -344,7 +344,7 @@ export function AgentToolsList({ agent, config }: AgentToolsListProps) {
               </p>
             </div>
           </div>
-          <DialogFooter>
+          <SheetFooter className="flex-row justify-end border-t">
             <Button
               variant="outline"
               onClick={() => setConfigTarget(null)}
@@ -357,9 +357,9 @@ export function AgentToolsList({ agent, config }: AgentToolsListProps) {
             >
               Salvar
             </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
 
       {/* Remove 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>

package/src/components/tools/tool-form-dialog.tsx

@@ -3,11 +3,11 @@ import { useCreateTool, useUpdateTool } from "../../hooks";
 import type { Tool } from "../../types";
 import type { GagentsHookConfig } from "../../hooks/types";
 import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetFooter,
   Button,
   Input,
   Textarea,
@@ -177,127 +177,128 @@ export function ToolFormDialog({
   }
 
   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">
+        <SheetHeader>
+          <SheetTitle>
             {isEditing ? "Editar Ferramenta" : "Nova Ferramenta"}
-          </DialogTitle>
-        </DialogHeader>
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="tool-name">Nome *</Label>
-            <Input
-              id="tool-name"
-              name="name"
-              value={form.name}
-              onChange={(e) => {
-                const name = e.target.value;
-                setForm((prev) => ({
-                  ...prev,
-                  name,
-                  nameError: name.trim() ? false : prev.nameError,
-                  ...(!slugManuallyEdited && !isEditing
-                    ? { slug: slugify(name), slugError: false }
-                    : {}),
-                }));
-              }}
-              placeholder="Ex: Google Calendar"
-              disabled={isPending}
-            />
-            {form.nameError && (
-              <p className="text-sm text-destructive">Nome é obrigatório</p>
-            )}
-          </div>
+          </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="space-y-2">
+              <Label htmlFor="tool-name">Nome *</Label>
+              <Input
+                id="tool-name"
+                name="name"
+                value={form.name}
+                onChange={(e) => {
+                  const name = e.target.value;
+                  setForm((prev) => ({
+                    ...prev,
+                    name,
+                    nameError: name.trim() ? false : prev.nameError,
+                    ...(!slugManuallyEdited && !isEditing
+                      ? { slug: slugify(name), slugError: false }
+                      : {}),
+                  }));
+                }}
+                placeholder="Ex: Google Calendar"
+                disabled={isPending}
+              />
+              {form.nameError && (
+                <p className="text-sm text-destructive">Nome é obrigatório</p>
+              )}
+            </div>
 
-          <div className="space-y-2">
-            <Label htmlFor="tool-slug">Slug (identificador único) *</Label>
-            <Input
-              id="tool-slug"
-              name="slug"
-              value={form.slug}
-              onChange={(e) => {
-                setSlugManuallyEdited(true);
-                setForm((prev) => ({
-                  ...prev,
-                  slug: e.target.value,
-                  slugError: e.target.value.trim() ? false : prev.slugError,
-                }));
-              }}
-              placeholder="Ex: google-calendar"
-              disabled={isPending}
-            />
-            <p className="text-xs text-muted-foreground">
-              Gerado automaticamente a partir do nome. Usado internamente para identificar a ferramenta.
-            </p>
-            {form.slugError && (
-              <p className="text-sm text-destructive">Slug é obrigatório</p>
-            )}
-          </div>
+            <div className="space-y-2">
+              <Label htmlFor="tool-slug">Slug (identificador único) *</Label>
+              <Input
+                id="tool-slug"
+                name="slug"
+                value={form.slug}
+                onChange={(e) => {
+                  setSlugManuallyEdited(true);
+                  setForm((prev) => ({
+                    ...prev,
+                    slug: e.target.value,
+                    slugError: e.target.value.trim() ? false : prev.slugError,
+                  }));
+                }}
+                placeholder="Ex: google-calendar"
+                disabled={isPending}
+              />
+              <p className="text-xs text-muted-foreground">
+                Gerado automaticamente a partir do nome. Usado internamente para identificar a ferramenta.
+              </p>
+              {form.slugError && (
+                <p className="text-sm text-destructive">Slug é obrigatório</p>
+              )}
+            </div>
 
-          <div className="space-y-2">
-            <Label htmlFor="tool-type">Tipo de Autenticação *</Label>
-            <Select
-              value={form.type}
-              onValueChange={(value) => {
-                setForm((prev) => ({
-                  ...prev,
-                  type: value,
-                  typeError: false,
-                }));
-              }}
-              disabled={isPending}
-            >
-              <SelectTrigger id="tool-type">
-                <SelectValue placeholder="Selecione o tipo" />
-              </SelectTrigger>
-              <SelectContent>
-                {TOOL_AUTH_TYPES.map((t) => (
-                  <SelectItem key={t.value} value={t.value}>
-                    {t.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <p className="text-xs text-muted-foreground">
-              Define se a ferramenta requer credenciais para funcionar.
-            </p>
-            {form.typeError && (
-              <p className="text-sm text-destructive">Tipo é obrigatório</p>
-            )}
-          </div>
+            <div className="space-y-2">
+              <Label htmlFor="tool-type">Tipo de Autenticação *</Label>
+              <Select
+                value={form.type}
+                onValueChange={(value) => {
+                  setForm((prev) => ({
+                    ...prev,
+                    type: value,
+                    typeError: false,
+                  }));
+                }}
+                disabled={isPending}
+              >
+                <SelectTrigger id="tool-type">
+                  <SelectValue placeholder="Selecione o tipo" />
+                </SelectTrigger>
+                <SelectContent>
+                  {TOOL_AUTH_TYPES.map((t) => (
+                    <SelectItem key={t.value} value={t.value}>
+                      {t.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-muted-foreground">
+                Define se a ferramenta requer credenciais para funcionar.
+              </p>
+              {form.typeError && (
+                <p className="text-sm text-destructive">Tipo é obrigatório</p>
+              )}
+            </div>
 
-          <div className="space-y-2">
-            <Label htmlFor="tool-description">Descrição</Label>
-            <Textarea
-              id="tool-description"
-              name="description"
-              value={form.description}
-              onChange={(e) =>
-                setForm((prev) => ({ ...prev, description: e.target.value }))
-              }
-              placeholder="Descri\u00e7\u00e3o da ferramenta\u2026"
-              rows={3}
-              disabled={isPending}
-            />
-          </div>
+            <div className="space-y-2">
+              <Label htmlFor="tool-description">Descrição</Label>
+              <Textarea
+                id="tool-description"
+                name="description"
+                value={form.description}
+                onChange={(e) =>
+                  setForm((prev) => ({ ...prev, description: e.target.value }))
+                }
+                placeholder="Descri\u00e7\u00e3o da ferramenta\u2026"
+                rows={3}
+                disabled={isPending}
+              />
+            </div>
 
-          <div className="space-y-2">
-            <Label htmlFor="tool-function-defs">
-              Definições de Função (JSON)
-            </Label>
-            <Textarea
-              id="tool-function-defs"
-              name="functionDefs"
-              value={form.functionDefinitions}
-              onChange={(e) => {
-                setForm((prev) => ({
-                  ...prev,
-                  functionDefinitions: e.target.value,
-                  jsonError: false,
-                }));
-              }}
-              placeholder={`[
+            <div className="space-y-2">
+              <Label htmlFor="tool-function-defs">
+                Definições de Função (JSON)
+              </Label>
+              <Textarea
+                id="tool-function-defs"
+                name="functionDefs"
+                value={form.functionDefinitions}
+                onChange={(e) => {
+                  setForm((prev) => ({
+                    ...prev,
+                    functionDefinitions: e.target.value,
+                    jsonError: false,
+                  }));
+                }}
+                placeholder={`[
   {
     "type": "function",
     "function": {
@@ -311,19 +312,20 @@ export function ToolFormDialog({
     }
   }
 ]`}
-              rows={10}
-              className="font-mono text-sm"
-              disabled={isPending}
-            />
-            <p className="text-xs text-muted-foreground">
-              Array de definições no formato OpenAI Function Calling.
-            </p>
-            {form.jsonError && (
-              <p className="text-sm text-destructive">JSON inválido</p>
-            )}
+                rows={10}
+                className="font-mono text-sm"
+                disabled={isPending}
+              />
+              <p className="text-xs text-muted-foreground">
+                Array de definições no formato OpenAI Function Calling.
+              </p>
+              {form.jsonError && (
+                <p className="text-sm text-destructive">JSON inválido</p>
+              )}
+            </div>
           </div>
 
-          <DialogFooter>
+          <SheetFooter className="flex-row justify-end border-t">
             <Button
               type="button"
               variant="outline"
@@ -338,9 +340,9 @@ export function ToolFormDialog({
               ) : null}
               {isEditing ? "Salvar" : "Criar"}
             </Button>
-          </DialogFooter>
+          </SheetFooter>
         </form>
-      </DialogContent>
-    </Dialog>
+      </SheetContent>
+    </Sheet>
   );
 }