@greatapps/greatagents-ui 0.3.24 → 0.3.25

package/package.json

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

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/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>
   );
 }