@greatapps/greatagents-ui 0.3.12 → 0.3.14

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

@@ -3,8 +3,6 @@ import type { ColumnDef } from "@tanstack/react-table";
 import type { Tool, ToolCredential } from "../../types";
 import type { GagentsHookConfig } from "../../hooks/types";
 import {
-  useCreateToolCredential,
-  useUpdateToolCredential,
   useDeleteToolCredential,
 } from "../../hooks";
 import { useTools } from "../../hooks";
@@ -16,11 +14,6 @@ import {
   Tooltip,
   TooltipTrigger,
   TooltipContent,
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
   AlertDialog,
   AlertDialogAction,
   AlertDialogCancel,
@@ -29,13 +22,8 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
 } from "@greatapps/greatauth-ui/ui";
-import { Trash2, Pencil, Link, Search } from "lucide-react";
+import { Trash2, Search } from "lucide-react";
 import { format } from "date-fns";
 import { ptBR } from "date-fns/locale";
 import { toast } from "sonner";
@@ -45,8 +33,6 @@ interface ToolCredentialsFormProps {
   isLoading: boolean;
   config: GagentsHookConfig;
   gagentsApiUrl: string;
-  createOpen?: boolean;
-  onCreateOpenChange?: (open: boolean) => void;
 }
 
 function formatDate(dateStr: string | null): string {
@@ -56,8 +42,6 @@ function formatDate(dateStr: string | null): string {
 
 function useColumns(
   tools: Tool[],
-  onEdit: (cred: ToolCredential) => void,
-  onConnect: (cred: ToolCredential) => void,
   onRemove: (cred: ToolCredential) => void,
 ): ColumnDef<ToolCredential>[] {
   function getToolName(idTool: number | null): string {
@@ -66,12 +50,6 @@ function useColumns(
     return tool?.name || `Ferramenta #${idTool}`;
   }
 
-  function getToolType(idTool: number | null): string | null {
-    if (!idTool) return null;
-    const tool = tools.find((t) => t.id === idTool);
-    return tool?.type || null;
-  }
-
   return [
     {
       accessorKey: "label",
@@ -123,36 +101,6 @@ function useColumns(
       enableSorting: false,
       cell: ({ row }) => (
         <div className="flex items-center gap-1">
-          {getToolType(row.original.id_tool) === "oauth2" && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-8 w-8"
-                  aria-label="Vincular"
-                  disabled
-                >
-                  <Link className="h-4 w-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Em breve</TooltipContent>
-            </Tooltip>
-          )}
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8"
-                aria-label="Editar"
-                onClick={() => onEdit(row.original)}
-              >
-                <Pencil className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Editar</TooltipContent>
-          </Tooltip>
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
@@ -178,35 +126,12 @@ export function ToolCredentialsForm({
   isLoading,
   config,
   gagentsApiUrl,
-  createOpen: externalCreateOpen,
-  onCreateOpenChange,
 }: ToolCredentialsFormProps) {
-  const createMutation = useCreateToolCredential(config);
-  const updateMutation = useUpdateToolCredential(config);
   const deleteMutation = useDeleteToolCredential(config);
   const { data: toolsData } = useTools(config);
   const tools: Tool[] = (toolsData?.data || []).filter((t: Tool) => !t.slug?.startsWith("gclinic_"));
 
   const [search, setSearch] = useState("");
-  const [internalCreateOpen, setInternalCreateOpen] = useState(false);
-  const showCreateDialog = externalCreateOpen ?? internalCreateOpen;
-  const setShowCreateDialog = onCreateOpenChange ?? setInternalCreateOpen;
-  const [createForm, setCreateForm] = useState({
-    id_tool: "",
-    label: "",
-    credentials_encrypted: "",
-    expires_at: "",
-  });
-
-  const [editTarget, setEditTarget] = useState<ToolCredential | null>(null);
-  const [editForm, setEditForm] = useState({
-    id_tool: "",
-    label: "",
-    credentials_encrypted: "",
-    expires_at: "",
-    status: "" as "active" | "expired" | "",
-  });
-
   const [removeTarget, setRemoveTarget] = useState<ToolCredential | null>(null);
 
   // Build a set of internal tool IDs to exclude from credentials display
@@ -237,86 +162,9 @@ export function ToolCredentialsForm({
 
   const columns = useColumns(
     tools,
-    (cred) => startEdit(cred),
-    (cred) => handleConnect(cred),
     (cred) => setRemoveTarget(cred),
   );
 
-  async function handleCreate() {
-    const idTool = parseInt(createForm.id_tool, 10);
-    if (!idTool || !createForm.label.trim() || !createForm.credentials_encrypted.trim()) return;
-
-    try {
-      const result = await createMutation.mutateAsync({
-        id_tool: idTool,
-        label: createForm.label.trim(),
-        credentials_encrypted: createForm.credentials_encrypted.trim(),
-        ...(createForm.expires_at ? { expires_at: createForm.expires_at } : {}),
-      });
-      if (result.status === 1) {
-        toast.success("Credencial criada");
-        setShowCreateDialog(false);
-        setCreateForm({ id_tool: "", label: "", credentials_encrypted: "", expires_at: "" });
-      } else {
-        toast.error(result.message || "Erro ao criar credencial");
-      }
-    } catch {
-      toast.error("Erro ao criar credencial");
-    }
-  }
-
-  function startEdit(cred: ToolCredential) {
-    setEditTarget(cred);
-    setEditForm({
-      id_tool: cred.id_tool ? String(cred.id_tool) : "",
-      label: cred.label || "",
-      credentials_encrypted: "",
-      expires_at: cred.expires_at || "",
-      status: cred.status,
-    });
-  }
-
-  async function handleSaveEdit() {
-    if (!editTarget) return;
-    const body: Record<string, unknown> = {};
-    const newIdTool = editForm.id_tool ? parseInt(editForm.id_tool, 10) : null;
-    if (newIdTool && newIdTool !== editTarget.id_tool) {
-      body.id_tool = newIdTool;
-    }
-    if (editForm.label.trim() && editForm.label.trim() !== (editTarget.label || "")) {
-      body.label = editForm.label.trim();
-    }
-    if (editForm.credentials_encrypted.trim()) {
-      body.credentials_encrypted = editForm.credentials_encrypted.trim();
-    }
-    if (editForm.expires_at !== (editTarget.expires_at || "")) {
-      body.expires_at = editForm.expires_at || null;
-    }
-    if (editForm.status && editForm.status !== editTarget.status) {
-      body.status = editForm.status;
-    }
-
-    if (Object.keys(body).length === 0) {
-      setEditTarget(null);
-      return;
-    }
-
-    try {
-      const result = await updateMutation.mutateAsync({
-        id: editTarget.id,
-        body: body as Parameters<typeof updateMutation.mutateAsync>[0]["body"],
-      });
-      if (result.status === 1) {
-        toast.success("Credencial atualizada");
-        setEditTarget(null);
-      } else {
-        toast.error(result.message || "Erro ao atualizar credencial");
-      }
-    } catch {
-      toast.error("Erro ao atualizar credencial");
-    }
-  }
-
   async function handleRemove() {
     if (!removeTarget) return;
     try {
@@ -333,14 +181,6 @@ export function ToolCredentialsForm({
     }
   }
 
-  function handleConnect(cred: ToolCredential) {
-    if (!config.accountId || !config.token) return;
-    const language = config.language ?? "pt-br";
-    const idWl = config.idWl ?? 1;
-    const url = `${gagentsApiUrl}/v1/${language}/${idWl}/accounts/${config.accountId}/oauth/connect?id_tool=${cred.id_tool}`;
-    window.open(url, "_blank");
-  }
-
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-3">
@@ -365,219 +205,6 @@ export function ToolCredentialsForm({
         emptyMessage="Nenhuma credencial encontrada"
       />
 
-      {/* Create Dialog */}
-      <Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Nova Credencial</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <div>
-              <label htmlFor="cred-tool" className="mb-1 block text-sm font-medium">
-                Ferramenta *
-              </label>
-              <Select
-                value={createForm.id_tool}
-                onValueChange={(val) =>
-                  setCreateForm((f) => ({ ...f, id_tool: val }))
-                }
-              >
-                <SelectTrigger id="cred-tool">
-                  <SelectValue placeholder="Selecione a ferramenta" />
-                </SelectTrigger>
-                <SelectContent>
-                  {tools.map((tool) => (
-                    <SelectItem key={tool.id} value={String(tool.id)}>
-                      {tool.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div>
-              <label htmlFor="cred-label" className="mb-1 block text-sm font-medium">
-                Label *
-              </label>
-              <Input
-                id="cred-label"
-                name="label"
-                value={createForm.label}
-                onChange={(e) =>
-                  setCreateForm((f) => ({ ...f, label: e.target.value }))
-                }
-                placeholder="Ex: Google Calendar - Clínica São Paulo"
-              />
-            </div>
-            <div>
-              <label htmlFor="cred-credential" className="mb-1 block text-sm font-medium">
-                Credencial *
-              </label>
-              <Input
-                id="cred-credential"
-                name="credential"
-                autoComplete="off"
-                type="password"
-                value={createForm.credentials_encrypted}
-                onChange={(e) =>
-                  setCreateForm((f) => ({
-                    ...f,
-                    credentials_encrypted: e.target.value,
-                  }))
-                }
-                placeholder="Credencial encriptada"
-              />
-            </div>
-            <div>
-              <label htmlFor="cred-expires" className="mb-1 block text-sm font-medium">
-                Data de Expiração (opcional)
-              </label>
-              <Input
-                id="cred-expires"
-                name="expires"
-                type="date"
-                value={createForm.expires_at}
-                onChange={(e) =>
-                  setCreateForm((f) => ({ ...f, expires_at: e.target.value }))
-                }
-              />
-            </div>
-          </div>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => setShowCreateDialog(false)}
-            >
-              Cancelar
-            </Button>
-            <Button
-              onClick={handleCreate}
-              disabled={
-                !createForm.id_tool ||
-                !createForm.label.trim() ||
-                !createForm.credentials_encrypted.trim() ||
-                createMutation.isPending
-              }
-            >
-              Criar
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {/* Edit Dialog */}
-      <Dialog
-        open={!!editTarget}
-        onOpenChange={(open) => !open && setEditTarget(null)}
-      >
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Editar Credencial</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <div>
-              <label htmlFor="edit-cred-tool" className="mb-1 block text-sm font-medium">
-                Ferramenta *
-              </label>
-              <Select
-                value={editForm.id_tool}
-                onValueChange={(val) =>
-                  setEditForm((f) => ({ ...f, id_tool: val }))
-                }
-              >
-                <SelectTrigger id="edit-cred-tool">
-                  <SelectValue placeholder="Selecione a ferramenta" />
-                </SelectTrigger>
-                <SelectContent>
-                  {tools.map((tool) => (
-                    <SelectItem key={tool.id} value={String(tool.id)}>
-                      {tool.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div>
-              <label htmlFor="edit-cred-label" className="mb-1 block text-sm font-medium">
-                Label
-              </label>
-              <Input
-                id="edit-cred-label"
-                name="label"
-                value={editForm.label}
-                onChange={(e) =>
-                  setEditForm((f) => ({ ...f, label: e.target.value }))
-                }
-                placeholder="Label da credencial"
-              />
-            </div>
-            <div>
-              <label htmlFor="edit-cred-credential" className="mb-1 block text-sm font-medium">
-                Nova Credencial (vazio = manter atual)
-              </label>
-              <Input
-                id="edit-cred-credential"
-                name="credential"
-                autoComplete="off"
-                type="password"
-                value={editForm.credentials_encrypted}
-                onChange={(e) =>
-                  setEditForm((f) => ({
-                    ...f,
-                    credentials_encrypted: e.target.value,
-                  }))
-                }
-                placeholder="Nova credencial"
-              />
-            </div>
-            <div>
-              <label htmlFor="edit-cred-expires" className="mb-1 block text-sm font-medium">
-                Data de Expiração
-              </label>
-              <Input
-                id="edit-cred-expires"
-                name="expires"
-                type="date"
-                value={editForm.expires_at}
-                onChange={(e) =>
-                  setEditForm((f) => ({ ...f, expires_at: e.target.value }))
-                }
-              />
-            </div>
-            <div>
-              <label htmlFor="edit-cred-status" className="mb-1 block text-sm font-medium">Status</label>
-              <Select
-                value={editForm.status || undefined}
-                onValueChange={(val) =>
-                  setEditForm((f) => ({
-                    ...f,
-                    status: val as "active" | "expired",
-                  }))
-                }
-              >
-                <SelectTrigger id="edit-cred-status">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="active">Ativo</SelectItem>
-                  <SelectItem value="expired">Expirado</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setEditTarget(null)}>
-              Cancelar
-            </Button>
-            <Button
-              onClick={handleSaveEdit}
-              disabled={updateMutation.isPending}
-            >
-              Salvar
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
       {/* Delete confirmation */}
       <AlertDialog
         open={!!removeTarget}

package/src/pages/agent-capabilities-page.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useState, useCallback } from "react";
 import {
   Tabs,
   TabsList,
@@ -10,13 +9,9 @@ import {
 import { Blocks, Plug, Settings } from "lucide-react";
 
 import type { GagentsHookConfig } from "../hooks/types";
-import type { IntegrationCardData } from "../hooks/use-integrations";
-import type { WizardIntegrationMeta } from "../components/capabilities/types";
 import { CapabilitiesTab } from "../components/capabilities/capabilities-tab";
 import { IntegrationsTab } from "../components/capabilities/integrations-tab";
-import { IntegrationWizard } from "../components/capabilities/integration-wizard";
 import { AdvancedTab } from "../components/capabilities/advanced-tab";
-import type { ConfigOption } from "../components/capabilities/wizard-steps/config-step";
 
 // ---------------------------------------------------------------------------
 // Props
@@ -26,33 +21,6 @@ export interface AgentCapabilitiesPageProps {
   config: GagentsHookConfig;
   agentId: number;
   gagentsApiUrl: string;
-  /**
-   * Resolve wizard metadata for a given integration card.
-   * The consuming app provides this so the wizard gets correct
-   * capabilities, requirements, and config step flag.
-   */
-  resolveWizardMeta?: (card: IntegrationCardData) => WizardIntegrationMeta;
-  /**
-   * Callback to load config options after OAuth completes
-   * (e.g. load Google Calendar list). Forwarded to IntegrationWizard.
-   */
-  loadConfigOptions?: (credentialId: number) => Promise<ConfigOption[]>;
-  /** Called after wizard completes successfully. */
-  onWizardComplete?: () => void;
-}
-
-// ---------------------------------------------------------------------------
-// Default wizard meta resolver
-// ---------------------------------------------------------------------------
-
-function defaultResolveWizardMeta(card: IntegrationCardData): WizardIntegrationMeta {
-  return {
-    capabilities: [
-      { label: card.definition.name, description: card.definition.description },
-    ],
-    requirements: [],
-    hasConfigStep: false,
-  };
 }
 
 // ---------------------------------------------------------------------------
@@ -63,42 +31,13 @@ export function AgentCapabilitiesPage({
   config,
   agentId,
   gagentsApiUrl,
-  resolveWizardMeta = defaultResolveWizardMeta,
-  loadConfigOptions,
-  onWizardComplete,
 }: AgentCapabilitiesPageProps) {
-  // Wizard dialog state
-  const [wizardOpen, setWizardOpen] = useState(false);
-  const [activeCard, setActiveCard] = useState<IntegrationCardData | null>(null);
-
-  const handleConnect = useCallback(
-    (card: IntegrationCardData) => {
-      setActiveCard(card);
-      setWizardOpen(true);
-    },
-    [],
-  );
-
-  const handleWizardComplete = useCallback(() => {
-    setWizardOpen(false);
-    setActiveCard(null);
-    onWizardComplete?.();
-  }, [onWizardComplete]);
-
-  const handleWizardOpenChange = useCallback((open: boolean) => {
-    setWizardOpen(open);
-    if (!open) setActiveCard(null);
-  }, []);
-
-  // Derive wizard meta from active card
-  const wizardMeta = activeCard ? resolveWizardMeta(activeCard) : null;
-
   return (
     <div className="space-y-4">
       <div>
         <h2 className="text-lg font-semibold">Capacidades e Integrações</h2>
         <p className="text-sm text-muted-foreground">
-          Configure o que este agente pode fazer e quais serviços externos ele utiliza.
+          Configure o que este agente pode fazer e quais integrações ele utiliza.
         </p>
       </div>
 
@@ -123,11 +62,7 @@ export function AgentCapabilitiesPage({
         </TabsContent>
 
         <TabsContent value="integracoes" className="mt-4">
-          <IntegrationsTab
-            config={config}
-            agentId={agentId}
-            onConnect={handleConnect}
-          />
+          <IntegrationsTab config={config} agentId={agentId} />
         </TabsContent>
 
         <TabsContent value="avancado" className="mt-4">
@@ -138,22 +73,6 @@ export function AgentCapabilitiesPage({
           />
         </TabsContent>
       </Tabs>
-
-      {/* Integration Wizard Dialog */}
-      {activeCard && wizardMeta && (
-        <IntegrationWizard
-          open={wizardOpen}
-          onOpenChange={handleWizardOpenChange}
-          integration={activeCard.definition}
-          meta={wizardMeta}
-          agentId={agentId}
-          config={config}
-          onComplete={handleWizardComplete}
-          gagentsApiUrl={gagentsApiUrl}
-          existingCredentialId={activeCard.credential?.id}
-          loadConfigOptions={loadConfigOptions}
-        />
-      )}
     </div>
   );
 }

package/src/pages/credentials-page.tsx

@@ -1,8 +1,5 @@
-import { useState } from "react";
 import { useToolCredentials } from "../hooks";
 import { ToolCredentialsForm } from "../components/tools/tool-credentials-form";
-import { Button } from "@greatapps/greatauth-ui/ui";
-import { Plus } from "lucide-react";
 import type { GagentsHookConfig } from "../hooks/types";
 
 export interface CredentialsPageProps {
@@ -20,7 +17,6 @@ export function CredentialsPage({
 }: CredentialsPageProps) {
   const { data: credentialsData, isLoading: credentialsLoading } =
     useToolCredentials(config);
-  const [createOpen, setCreateOpen] = useState(false);
 
   const credentials = credentialsData?.data || [];
 
@@ -31,10 +27,6 @@ export function CredentialsPage({
           <h1 className="text-xl font-semibold">{title}</h1>
           <p className="text-sm text-muted-foreground">{subtitle}</p>
         </div>
-        <Button onClick={() => setCreateOpen(true)} size="sm">
-          <Plus className="mr-2 h-4 w-4" />
-          Nova Credencial
-        </Button>
       </div>
 
       <ToolCredentialsForm
@@ -42,8 +34,6 @@ export function CredentialsPage({
         gagentsApiUrl={gagentsApiUrl}
         credentials={credentials}
         isLoading={credentialsLoading}
-        createOpen={createOpen}
-        onCreateOpenChange={setCreateOpen}
       />
     </div>
   );