@greatapps/greatagents-ui 0.3.10 → 0.3.12

package/package.json

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

package/src/components/agents/agent-tabs.tsx

@@ -1,3 +1,4 @@
+import { useState, useCallback } from "react";
 import type { Agent } from "../../types";
 import type { GagentsHookConfig } from "../../hooks/types";
 import type { IntegrationCardData } from "../../hooks/use-integrations";
@@ -6,26 +7,24 @@ import type { ConfigOption } from "../capabilities/wizard-steps/config-step";
 import { AgentObjectivesList } from "./agent-objectives-list";
 import { AgentPromptEditor } from "./agent-prompt-editor";
 import { AgentConversationsPanel } from "../conversations/agent-conversations-panel";
-import { AgentCapabilitiesPage } from "../../pages/agent-capabilities-page";
+import { CapabilitiesTab } from "../capabilities/capabilities-tab";
+import { IntegrationsTab } from "../capabilities/integrations-tab";
+import { IntegrationWizard } from "../capabilities/integration-wizard";
 import {
   Tabs,
   TabsList,
   TabsTrigger,
   TabsContent,
 } from "@greatapps/greatauth-ui/ui";
-import { Target, FileText, MessageCircle, Blocks } from "lucide-react";
+import { Target, FileText, MessageCircle, Blocks, Plug } from "lucide-react";
 
 interface AgentTabsProps {
   agent: Agent;
   config: GagentsHookConfig;
   renderChatLink?: (inboxId: number) => React.ReactNode;
-  /** Required for the Capacidades tab — gagents API URL for OAuth flows and advanced features. Falls back to config.baseUrl. */
   gagentsApiUrl?: string;
-  /** Resolve wizard metadata for a given integration card. */
   resolveWizardMeta?: (card: IntegrationCardData) => WizardIntegrationMeta;
-  /** Callback to load config options after OAuth completes. */
   loadConfigOptions?: (credentialId: number) => Promise<ConfigOption[]>;
-  /** Called after wizard completes successfully. */
   onWizardComplete?: () => void;
 }
 
@@ -40,53 +39,102 @@ export function AgentTabs({
 }: AgentTabsProps) {
   const apiUrl = gagentsApiUrl || config.baseUrl;
 
+  // Wizard state for Integrações tab
+  const [wizardOpen, setWizardOpen] = useState(false);
+  const [activeCard, setActiveCard] = useState<IntegrationCardData | null>(null);
+
+  const handleConnect = useCallback((card: IntegrationCardData) => {
+    setActiveCard(card);
+    setWizardOpen(true);
+  }, []);
+
+  const handleWizardClose = useCallback((open: boolean) => {
+    if (!open) {
+      setActiveCard(null);
+    }
+    setWizardOpen(open);
+  }, []);
+
+  const handleWizardComplete = useCallback(() => {
+    setWizardOpen(false);
+    setActiveCard(null);
+    onWizardComplete?.();
+  }, [onWizardComplete]);
+
+  // Resolve wizard meta with sensible defaults
+  const wizardMeta: WizardIntegrationMeta | null = activeCard
+    ? (resolveWizardMeta?.(activeCard) ?? {
+        capabilities: [],
+        requirements: [],
+        hasConfigStep: false,
+      })
+    : null;
+
   return (
-    <Tabs defaultValue="prompt">
-      <TabsList>
-        <TabsTrigger value="prompt" className="flex items-center gap-1.5">
-          <FileText aria-hidden="true" className="h-3.5 w-3.5" />
-          Prompt
-        </TabsTrigger>
-        <TabsTrigger value="objetivos" className="flex items-center gap-1.5">
-          <Target aria-hidden="true" className="h-3.5 w-3.5" />
-          Objetivos
-        </TabsTrigger>
-        <TabsTrigger value="capacidades" className="flex items-center gap-1.5">
-          <Blocks aria-hidden="true" className="h-3.5 w-3.5" />
-          Capacidades
-        </TabsTrigger>
-        <TabsTrigger value="conversas" className="flex items-center gap-1.5">
-          <MessageCircle aria-hidden="true" className="h-3.5 w-3.5" />
-          Conversas
-        </TabsTrigger>
-      </TabsList>
+    <>
+      <Tabs defaultValue="prompt">
+        <TabsList>
+          <TabsTrigger value="prompt" className="flex items-center gap-1.5">
+            <FileText aria-hidden="true" className="h-3.5 w-3.5" />
+            Prompt
+          </TabsTrigger>
+          <TabsTrigger value="objetivos" className="flex items-center gap-1.5">
+            <Target aria-hidden="true" className="h-3.5 w-3.5" />
+            Objetivos
+          </TabsTrigger>
+          <TabsTrigger value="capacidades" className="flex items-center gap-1.5">
+            <Blocks aria-hidden="true" className="h-3.5 w-3.5" />
+            Capacidades
+          </TabsTrigger>
+          <TabsTrigger value="integracoes" className="flex items-center gap-1.5">
+            <Plug aria-hidden="true" className="h-3.5 w-3.5" />
+            Integrações
+          </TabsTrigger>
+          <TabsTrigger value="conversas" className="flex items-center gap-1.5">
+            <MessageCircle aria-hidden="true" className="h-3.5 w-3.5" />
+            Conversas
+          </TabsTrigger>
+        </TabsList>
 
-      <TabsContent value="prompt" className="mt-4">
-        <AgentPromptEditor agent={agent} config={config} />
-      </TabsContent>
+        <TabsContent value="prompt" className="mt-4">
+          <AgentPromptEditor agent={agent} config={config} />
+        </TabsContent>
 
-      <TabsContent value="objetivos" className="mt-4">
-        <AgentObjectivesList agent={agent} config={config} />
-      </TabsContent>
+        <TabsContent value="objetivos" className="mt-4">
+          <AgentObjectivesList agent={agent} config={config} />
+        </TabsContent>
 
-      <TabsContent value="capacidades" className="mt-4">
-        <AgentCapabilitiesPage
-          config={config}
+        <TabsContent value="capacidades" className="mt-4">
+          <CapabilitiesTab config={config} agentId={agent.id} />
+        </TabsContent>
+
+        <TabsContent value="integracoes" className="mt-4">
+          <IntegrationsTab config={config} agentId={agent.id} onConnect={handleConnect} />
+        </TabsContent>
+
+        <TabsContent value="conversas" className="mt-4">
+          <AgentConversationsPanel
+            agent={agent}
+            config={config}
+            renderChatLink={renderChatLink}
+          />
+        </TabsContent>
+      </Tabs>
+
+      {activeCard && wizardMeta && (
+        <IntegrationWizard
+          open={wizardOpen}
+          onOpenChange={handleWizardClose}
+          integration={activeCard.definition}
+          meta={wizardMeta}
           agentId={agent.id}
+          config={config}
           gagentsApiUrl={apiUrl}
-          resolveWizardMeta={resolveWizardMeta}
+          existingCredentialId={activeCard.credentialId}
+          onComplete={handleWizardComplete}
           loadConfigOptions={loadConfigOptions}
-          onWizardComplete={onWizardComplete}
-        />
-      </TabsContent>
-
-      <TabsContent value="conversas" className="mt-4">
-        <AgentConversationsPanel
-          agent={agent}
-          config={config}
-          renderChatLink={renderChatLink}
         />
-      </TabsContent>
-    </Tabs>
+      )}
+    </>
   );
 }

package/src/components/capabilities/advanced-tab.tsx

@@ -2,9 +2,7 @@
 
 import { useState } from "react";
 import type { GagentsHookConfig } from "../../hooks/types";
-import { useToolCredentials } from "../../hooks";
 import { ToolsTable } from "../tools/tools-table";
-import { ToolCredentialsForm } from "../tools/tool-credentials-form";
 import { ToolFormDialog } from "../tools/tool-form-dialog";
 import type { Tool } from "../../types";
 import { Info } from "lucide-react";
@@ -24,10 +22,6 @@ export interface AdvancedTabProps {
 // ---------------------------------------------------------------------------
 
 export function AdvancedTab({ config, agentId, gagentsApiUrl }: AdvancedTabProps) {
-  const { data: credentialsData, isLoading: isLoadingCredentials } =
-    useToolCredentials(config);
-  const credentials = credentialsData?.data ?? [];
-
   const [editingTool, setEditingTool] = useState<Tool | null>(null);
   const [showToolForm, setShowToolForm] = useState(false);
 
@@ -49,7 +43,7 @@ export function AdvancedTab({ config, agentId, gagentsApiUrl }: AdvancedTabProps
         <p className="text-sm text-blue-800 dark:text-blue-300">
           Use as abas <strong>Capacidades</strong> e <strong>Integrações</strong> para
           configuração simplificada. Esta aba oferece controlo manual avançado sobre
-          ferramentas e credenciais.
+          ferramentas. As credenciais são geridas dentro de cada ferramenta.
         </p>
       </div>
 
@@ -59,17 +53,6 @@ export function AdvancedTab({ config, agentId, gagentsApiUrl }: AdvancedTabProps
         <ToolsTable onEdit={handleEditTool} config={config} />
       </section>
 
-      {/* Credenciais section */}
-      <section className="space-y-3">
-        <h3 className="text-sm font-medium">Credenciais</h3>
-        <ToolCredentialsForm
-          credentials={credentials}
-          isLoading={isLoadingCredentials}
-          config={config}
-          gagentsApiUrl={gagentsApiUrl}
-        />
-      </section>
-
       {/* Tool edit dialog */}
       <ToolFormDialog
         open={showToolForm}

package/src/components/capabilities/capabilities-tab.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useCallback, useRef, useEffect, useMemo } from "react";
+import { useState, useCallback, useEffect, useMemo } from "react";
 import type { GagentsHookConfig } from "../../hooks/types";
 import {
   useCapabilities,
@@ -31,6 +31,7 @@ import {
   HeartHandshake,
   Package,
   ChevronDown,
+  Loader2,
 } from "lucide-react";
 import { toast } from "sonner";
 
@@ -129,7 +130,6 @@ export function CapabilitiesTab({ config, agentId }: CapabilitiesTabProps) {
   const [localState, setLocalState] = useState<CapabilityState>(new Map());
   const [serverState, setServerState] = useState<CapabilityState>(new Map());
   const [initialized, setInitialized] = useState(false);
-  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   // Sync server data into local state on first load / refetch
   useEffect(() => {
@@ -151,41 +151,12 @@ export function CapabilitiesTab({ config, agentId }: CapabilitiesTabProps) {
     [localState, serverState, initialized],
   );
 
-  // ------ Debounced save ------
-  const scheduleSave = useCallback(
-    (nextState: CapabilityState) => {
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-      debounceRef.current = setTimeout(() => {
-        const payload = stateToPayload(nextState);
-        updateMutation.mutate(
-          { agentId, payload },
-          {
-            onSuccess: () => {
-              setServerState(cloneState(nextState));
-              toast.success("Capacidades salvas");
-            },
-            onError: () => {
-              // Rollback to server state
-              setLocalState(cloneState(serverState));
-              toast.error("Erro ao salvar capacidades");
-            },
-          },
-        );
-      }, 500);
-    },
-    [agentId, updateMutation, serverState],
-  );
-
   // ------ State mutation helpers ------
   const updateState = useCallback(
     (updater: (prev: CapabilityState) => CapabilityState) => {
-      setLocalState((prev) => {
-        const next = updater(prev);
-        scheduleSave(next);
-        return next;
-      });
+      setLocalState((prev) => updater(prev));
     },
-    [scheduleSave],
+    [],
   );
 
   const toggleModule = useCallback(
@@ -242,12 +213,10 @@ export function CapabilitiesTab({ config, agentId }: CapabilitiesTabProps) {
   }, [updateState]);
 
   const discard = useCallback(() => {
-    if (debounceRef.current) clearTimeout(debounceRef.current);
     setLocalState(cloneState(serverState));
   }, [serverState]);
 
   const saveNow = useCallback(() => {
-    if (debounceRef.current) clearTimeout(debounceRef.current);
     const payload = stateToPayload(localState);
     updateMutation.mutate(
       { agentId, payload },
@@ -368,20 +337,15 @@ export function CapabilitiesTab({ config, agentId }: CapabilitiesTabProps) {
 
       {/* Save bar */}
       {hasChanges && (
-        <div className="sticky bottom-0 bg-background border-t py-3 px-4 -mx-4 flex items-center justify-between">
-          <span className="text-sm text-muted-foreground">
-            Você tem alterações não salvas.
-          </span>
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" onClick={discard}>
+        <div className="sticky bottom-0 z-10 flex items-center justify-between gap-2 rounded-lg border bg-background p-3 shadow-sm">
+          <p className="text-sm text-muted-foreground">Você tem alterações não salvas.</p>
+          <div className="flex gap-2">
+            <Button variant="ghost" size="sm" onClick={discard} disabled={updateMutation.isPending}>
               Descartar
             </Button>
-            <Button
-              size="sm"
-              onClick={saveNow}
-              disabled={updateMutation.isPending}
-            >
-              {updateMutation.isPending ? "Salvando..." : "Salvar"}
+            <Button size="sm" onClick={saveNow} disabled={updateMutation.isPending}>
+              {updateMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Salvar
             </Button>
           </div>
         </div>