@greatapps/greatagents-ui 0.3.23 → 0.3.24

package/package.json

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