@greatapps/greatagents-ui 0.3.24 → 0.3.26

package/package.json

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

package/src/components/agents/agent-revision-tab.tsx

@@ -6,12 +6,8 @@ import {
   Button,
   Badge,
   Skeleton,
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
 } from "@greatapps/greatauth-ui/ui";
-import { FileText, RotateCcw, X, AlertTriangle } from "lucide-react";
+import { FileText, RotateCcw, X } from "lucide-react";
 import { toast } from "sonner";
 
 interface AgentRevisionTabProps {
@@ -19,7 +15,6 @@ interface AgentRevisionTabProps {
   config: GagentsHookConfig;
 }
 
-const STRUCTURED_MARKERS = ["[IDENTIDADE]", "[MISSÃO]", "[TOM, ESTILO & FORMATO]"];
 
 function formatDate(dateStr: string): string {
   const date = new Date(dateStr);
@@ -107,16 +102,10 @@ function buildAssembledPrompt(agent: Agent): string {
   return sections.join("\n\n");
 }
 
-function isLegacyVersion(version: PromptVersion): boolean {
-  const content = version.prompt_content ?? "";
-  return !STRUCTURED_MARKERS.some((marker) => content.includes(marker));
-}
-
 export function AgentRevisionTab({ agent, config }: AgentRevisionTabProps) {
   const { data: versionsData, isLoading } = usePromptVersions(config, agent.id);
 
   const [compareVersionId, setCompareVersionId] = useState<number | null>(null);
-  const [legacyModalVersion, setLegacyModalVersion] = useState<PromptVersion | null>(null);
 
   const versions = (versionsData?.data || []) as PromptVersion[];
   const sortedVersions = [...versions].sort(
@@ -143,12 +132,8 @@ export function AgentRevisionTab({ agent, config }: AgentRevisionTabProps) {
       ? computeDiff(compareVersion.prompt_content ?? "", currentVersion.prompt_content ?? "")
       : null;
 
-  function handleRestore(version: PromptVersion) {
-    if (isLegacyVersion(version)) {
-      setLegacyModalVersion(version);
-    } else {
-      toast.info("Restaurar versão estruturada — funcionalidade em desenvolvimento");
-    }
+  function handleRestore(_version: PromptVersion) {
+    toast.info("Restaurar versão — funcionalidade em desenvolvimento");
   }
 
   if (isLoading) {
@@ -319,50 +304,6 @@ export function AgentRevisionTab({ agent, config }: AgentRevisionTabProps) {
         )}
       </div>
 
-      {/* Legacy version modal */}
-      <Dialog
-        open={!!legacyModalVersion}
-        onOpenChange={(open) => {
-          if (!open) setLegacyModalVersion(null);
-        }}
-      >
-        <DialogContent className="max-w-2xl">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              <AlertTriangle className="h-5 w-5 text-amber-500" />
-              Versão Legada — v{legacyModalVersion?.version_number}
-            </DialogTitle>
-          </DialogHeader>
-          <div className="space-y-3">
-            <div className="rounded-lg border border-amber-500/30 bg-amber-500/5 p-3">
-              <p className="text-sm text-amber-700 dark:text-amber-400">
-                Esta versão foi criada antes da reestruturação e não pode ser restaurada nos campos estruturados.
-              </p>
-            </div>
-            <div className="max-h-96 overflow-auto rounded-lg border p-4">
-              <pre className="whitespace-pre-wrap font-mono text-sm leading-relaxed">
-                {legacyModalVersion?.prompt_content ?? ""}
-              </pre>
-            </div>
-            <div className="flex items-center gap-3 text-xs text-muted-foreground">
-              <span>
-                {(legacyModalVersion?.prompt_content ?? "").length.toLocaleString("pt-BR")} caracteres
-              </span>
-              {legacyModalVersion?.change_notes && (
-                <>
-                  <span>·</span>
-                  <span className="italic">{legacyModalVersion.change_notes}</span>
-                </>
-              )}
-            </div>
-          </div>
-          <div className="flex justify-end pt-2">
-            <Button variant="outline" onClick={() => setLegacyModalVersion(null)}>
-              Fechar
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
     </div>
   );
 }

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