@greatapps/greatagents-ui 0.3.17 → 0.3.19

package/package.json

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

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

@@ -1,12 +1,13 @@
 'use client';
 
-import { useCallback, useState } from "react";
+import { useCallback, useState, useEffect, useMemo } from "react";
 import type { GagentsHookConfig } from "../../hooks/types";
 import { useIntegrationState } from "../../hooks/use-integrations";
 import { useAgentTools, useAddAgentTool, useRemoveAgentTool, useUpdateAgentTool } from "../../hooks/use-agent-tools";
 import { useCreateTool, useTools } from "../../hooks/use-tools";
-import { Switch, Tooltip, TooltipContent, TooltipTrigger, Checkbox } from "@greatapps/greatauth-ui/ui";
+import { Switch, Tooltip, TooltipContent, TooltipTrigger, Checkbox, Button } from "@greatapps/greatauth-ui/ui";
 import { Plug, Loader2, ChevronDown, Pencil } from "lucide-react";
+import { toast } from "sonner";
 import type { LucideIcon } from "lucide-react";
 import { CalendarSync } from "lucide-react";
 import { cn } from "../../lib";
@@ -66,7 +67,7 @@ function buildCustomInstructions(
     return `- ${f.slug}: ${instruction}`;
   });
 
-  return `Você tem acesso à integração ${integrationSlug}.\nFunções disponíveis:\n${lines.join("\n")}\n\nUse EXATAMENTE os nomes de função listados acima.`;
+  return `Funções disponíveis (${integrationSlug}):\n${lines.join("\n")}`;
 }
 
 // ---------------------------------------------------------------------------
@@ -82,6 +83,13 @@ export interface IntegrationsTabProps {
 // Component
 // ---------------------------------------------------------------------------
 
+// Local state types
+interface IntegrationLocalState {
+  enabled: boolean;
+  selectedFunctions: Set<string>;
+  functionInstructions: Record<string, string>;
+}
+
 export function IntegrationsTab({
   config,
   agentId,
@@ -97,13 +105,12 @@ export function IntegrationsTab({
   const agentTools = agentToolsData?.data ?? [];
   const allTools = toolsData?.data ?? [];
 
-  // Per-integration function selection state: integrationSlug -> Set of selected function slugs
-  const [selectedFunctions, setSelectedFunctions] = useState<Record<string, Set<string>>>({});
-  // Per-integration per-function custom instructions: integrationSlug -> { fnSlug -> instruction }
-  const [functionInstructions, setFunctionInstructions] = useState<Record<string, Record<string, string>>>({});
-  // Which function is being edited (integrationSlug:fnSlug)
+  // Local state: integrationSlug -> state
+  const [localState, setLocalState] = useState<Record<string, IntegrationLocalState>>({});
+  const [serverState, setServerState] = useState<Record<string, IntegrationLocalState>>({});
+  const [initialized, setInitialized] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
   const [editingFunction, setEditingFunction] = useState<string | null>(null);
-  // Which integration cards are expanded
   const [expandedCards, setExpandedCards] = useState<Set<string>>(new Set());
 
   // Only show connected credentials (account-level)
@@ -111,169 +118,197 @@ export function IntegrationsTab({
     (c) => !c.isAddNew && (c.state === "connected" || c.state === "expired"),
   );
 
-  // Initialize function selections for a card when toggled on
-  const initFunctionsForCard = useCallback((slug: string) => {
-    const fns = INTEGRATION_FUNCTIONS[slug];
-    if (!fns) return;
-
-    setSelectedFunctions((prev) => ({
-      ...prev,
-      [slug]: new Set(fns.map((f) => f.slug)),
-    }));
-    setFunctionInstructions((prev) => ({
-      ...prev,
-      [slug]: Object.fromEntries(fns.map((f) => [f.slug, f.defaultInstructions])),
-    }));
-  }, []);
-
-  const handleToggle = useCallback(
-    async (card: IntegrationCardData, checked: boolean) => {
-      if (checked) {
-        let toolId = card.tool?.id;
-
-        // If no tool record exists for this integration, create one on-the-fly
-        if (!toolId) {
-          const existingTool = allTools.find((t) => t.slug === card.definition.slug);
-          if (existingTool) {
-            toolId = existingTool.id;
-          } else {
-            try {
-              const result = await createTool.mutateAsync({
-                name: card.definition.name,
-                slug: card.definition.slug,
-                type: "integration",
-                description: card.definition.description,
-              });
-              const d = result?.data;
-              toolId = (Array.isArray(d) ? d[0]?.id : (d as Tool | undefined)?.id) ?? undefined;
-              if (!toolId) {
-                console.error("[IntegrationsTab] Failed to create tool — no ID returned");
-                return;
-              }
-            } catch (err) {
-              console.error("[IntegrationsTab] Error creating tool:", err);
-              return;
-            }
-          }
-        }
-
-        // Initialize function selections
-        initFunctionsForCard(card.definition.slug);
-
-        // Build custom_instructions from all functions (all selected by default)
-        const fns = INTEGRATION_FUNCTIONS[card.definition.slug];
-        let customInstructions: string;
-        if (fns) {
-          const allFnSlugs = new Set(fns.map((f) => f.slug));
-          const defaultInstr = Object.fromEntries(fns.map((f) => [f.slug, f.defaultInstructions]));
-          customInstructions = buildCustomInstructions(card.definition.slug, allFnSlugs, defaultInstr);
-        } else {
-          customInstructions = "";
-        }
+  // Initialize state from server data
+  useEffect(() => {
+    if (!connectedCards.length || initialized) return;
 
-        // Expand the card to show functions
-        setExpandedCards((prev) => new Set([...prev, card.definition.slug]));
+    const state: Record<string, IntegrationLocalState> = {};
+    for (const card of connectedCards) {
+      const slug = card.definition.slug;
+      const isLinked = card.linkedToAgent;
+      const fns = INTEGRATION_FUNCTIONS[slug] ?? [];
 
-        addAgentTool.mutate({
-          idAgent: agentId,
-          body: {
-            id_tool: toolId,
-            enabled: true,
-            ...(customInstructions ? { custom_instructions: customInstructions } : {}),
-          },
-        });
-      } else {
-        // Find the agent_tool to remove
+      if (isLinked) {
+        // Parse existing custom_instructions to restore function selections
         const toolId = card.tool?.id;
-        if (toolId) {
-          const agentTool = agentTools.find((at) => at.id_tool === toolId);
-          if (agentTool) {
-            removeAgentTool.mutate({ idAgent: agentId, id: agentTool.id });
+        const agentTool = toolId ? agentTools.find((at) => at.id_tool === toolId) : null;
+        const existingInstructions = agentTool?.custom_instructions || "";
+
+        const selectedFns = new Set<string>();
+        const fnInstr: Record<string, string> = {};
+        for (const fn of fns) {
+          if (!existingInstructions || existingInstructions.includes(fn.slug)) {
+            selectedFns.add(fn.slug);
           }
+          // Extract instruction from custom_instructions if present
+          const match = existingInstructions.match(new RegExp(`- ${fn.slug}: (.+)`));
+          fnInstr[fn.slug] = match?.[1] ?? fn.defaultInstructions;
         }
 
-        // Clean up local state
-        setExpandedCards((prev) => {
-          const next = new Set(prev);
-          next.delete(card.definition.slug);
-          return next;
-        });
-        setSelectedFunctions((prev) => {
-          const next = { ...prev };
-          delete next[card.definition.slug];
-          return next;
-        });
-        setFunctionInstructions((prev) => {
-          const next = { ...prev };
-          delete next[card.definition.slug];
-          return next;
-        });
+        state[slug] = { enabled: true, selectedFunctions: selectedFns, functionInstructions: fnInstr };
+      } else {
+        state[slug] = {
+          enabled: false,
+          selectedFunctions: new Set(fns.map((f) => f.slug)),
+          functionInstructions: Object.fromEntries(fns.map((f) => [f.slug, f.defaultInstructions])),
+        };
+      }
+    }
+
+    setLocalState(state);
+    setServerState(JSON.parse(JSON.stringify(state, (_k, v) => v instanceof Set ? [...v] : v)));
+    setInitialized(true);
+  }, [connectedCards, agentTools, initialized]);
+
+  // Detect changes
+  const hasChanges = useMemo(() => {
+    if (!initialized) return false;
+    const localKeys = Object.keys(localState);
+    for (const slug of localKeys) {
+      const local = localState[slug];
+      const server = serverState[slug];
+      if (!server) return true;
+      if (local.enabled !== server.enabled) return true;
+      const serverFns = server.selectedFunctions instanceof Set ? server.selectedFunctions : new Set(server.selectedFunctions as unknown as string[]);
+      if (local.selectedFunctions.size !== serverFns.size) return true;
+      for (const fn of local.selectedFunctions) {
+        if (!serverFns.has(fn)) return true;
+      }
+      // Check instructions for selected functions
+      for (const fn of local.selectedFunctions) {
+        if ((local.functionInstructions[fn] ?? '') !== (server.functionInstructions[fn] ?? '')) return true;
+      }
+    }
+    return false;
+  }, [localState, serverState, initialized]);
+
+  // Toggle integration on/off (local only)
+  const handleToggle = useCallback(
+    (card: IntegrationCardData, checked: boolean) => {
+      const slug = card.definition.slug;
+      setLocalState((prev) => ({
+        ...prev,
+        [slug]: {
+          ...prev[slug],
+          enabled: checked,
+        },
+      }));
+      if (checked) {
+        setExpandedCards((prev) => new Set([...prev, slug]));
       }
     },
-    [agentTools, allTools, agentId, addAgentTool, removeAgentTool, createTool, initFunctionsForCard],
+    [],
   );
 
-  // Toggle a single function on/off and update agent_tool
+  // Toggle function checkbox (local only)
   const handleToggleFunction = useCallback(
-    (card: IntegrationCardData, fnSlug: string, checked: boolean) => {
-      const integrationSlug = card.definition.slug;
-
-      setSelectedFunctions((prev) => {
-        const current = new Set(prev[integrationSlug] ?? []);
-        if (checked) {
-          current.add(fnSlug);
-        } else {
-          current.delete(fnSlug);
-        }
-        const next = { ...prev, [integrationSlug]: current };
-
-        // Update agent_tool with new custom_instructions
-        const instructions = functionInstructions[integrationSlug] ?? {};
-        const customInstructions = buildCustomInstructions(integrationSlug, current, instructions);
-        updateAgentToolInstructions(card, customInstructions);
-
-        return next;
+    (slug: string, fnSlug: string, checked: boolean) => {
+      setLocalState((prev) => {
+        const current = prev[slug];
+        if (!current) return prev;
+        const fns = new Set(current.selectedFunctions);
+        if (checked) fns.add(fnSlug); else fns.delete(fnSlug);
+        return { ...prev, [slug]: { ...current, selectedFunctions: fns } };
       });
     },
-    [functionInstructions],
+    [],
   );
 
-  // Update function instructions text
-  const handleUpdateFunctionInstruction = useCallback(
-    (card: IntegrationCardData, fnSlug: string, instruction: string) => {
-      const integrationSlug = card.definition.slug;
-
-      setFunctionInstructions((prev) => {
-        const current = { ...(prev[integrationSlug] ?? {}), [fnSlug]: instruction };
-        const next = { ...prev, [integrationSlug]: current };
-
-        // Update agent_tool with new custom_instructions
-        const selected = selectedFunctions[integrationSlug] ?? new Set();
-        const customInstructions = buildCustomInstructions(integrationSlug, selected, current);
-        updateAgentToolInstructions(card, customInstructions);
-
-        return next;
+  // Update function instruction (local only)
+  const handleUpdateInstruction = useCallback(
+    (slug: string, fnSlug: string, instruction: string) => {
+      setLocalState((prev) => {
+        const current = prev[slug];
+        if (!current) return prev;
+        return {
+          ...prev,
+          [slug]: {
+            ...current,
+            functionInstructions: { ...current.functionInstructions, [fnSlug]: instruction },
+          },
+        };
       });
     },
-    [selectedFunctions],
+    [],
   );
 
-  // Helper: update agent_tool custom_instructions
-  const updateAgentToolInstructions = useCallback(
-    (card: IntegrationCardData, customInstructions: string) => {
-      const toolId = card.tool?.id;
-      if (!toolId) return;
-      const agentTool = agentTools.find((at) => at.id_tool === toolId);
-      if (!agentTool) return;
-
-      updateAgentTool.mutate({
-        idAgent: agentId,
-        id: agentTool.id,
-        body: { custom_instructions: customInstructions },
-      });
-    },
-    [agentTools, agentId, updateAgentTool],
-  );
+  // Save all changes
+  const saveNow = useCallback(async () => {
+    setIsSaving(true);
+    try {
+      for (const slug of Object.keys(localState)) {
+        const local = localState[slug];
+        const card = connectedCards.find((c) => c.definition.slug === slug);
+        if (!card) continue;
+
+        const serverEntry = serverState[slug];
+        const wasEnabled = serverEntry?.enabled ?? false;
+
+        if (local.enabled && !wasEnabled) {
+          // Activate: create tool if needed, then add agent_tool
+          let toolId = card.tool?.id;
+          if (!toolId) {
+            const existingTool = allTools.find((t) => t.slug === slug);
+            if (existingTool) {
+              toolId = existingTool.id;
+            } else {
+              const result = await createTool.mutateAsync({
+                name: card.definition.name, slug, type: "integration", description: card.definition.description,
+              });
+              const d = result?.data;
+              toolId = (Array.isArray(d) ? d[0]?.id : (d as Tool | undefined)?.id) ?? undefined;
+              if (!toolId) continue;
+            }
+          }
+          const customInstructions = buildCustomInstructions(slug, local.selectedFunctions, local.functionInstructions);
+          await addAgentTool.mutateAsync({
+            idAgent: agentId,
+            body: { id_tool: toolId, enabled: true, ...(customInstructions ? { custom_instructions: customInstructions } : {}) },
+          });
+        } else if (!local.enabled && wasEnabled) {
+          // Deactivate: remove agent_tool
+          const toolId = card.tool?.id;
+          if (toolId) {
+            const agentTool = agentTools.find((at) => at.id_tool === toolId);
+            if (agentTool) {
+              await removeAgentTool.mutateAsync({ idAgent: agentId, id: agentTool.id });
+            }
+          }
+        } else if (local.enabled && wasEnabled) {
+          // Update: functions or instructions changed
+          const toolId = card.tool?.id;
+          if (toolId) {
+            const agentTool = agentTools.find((at) => at.id_tool === toolId);
+            if (agentTool) {
+              const customInstructions = buildCustomInstructions(slug, local.selectedFunctions, local.functionInstructions);
+              await updateAgentTool.mutateAsync({
+                idAgent: agentId, id: agentTool.id,
+                body: { custom_instructions: customInstructions },
+              });
+            }
+          }
+        }
+      }
+      // Sync server state
+      setServerState(JSON.parse(JSON.stringify(localState, (_k, v) => v instanceof Set ? [...v] : v)));
+      toast.success("Integrações salvas");
+    } catch {
+      toast.error("Erro ao salvar integrações");
+    } finally {
+      setIsSaving(false);
+    }
+  }, [localState, serverState, connectedCards, allTools, agentTools, agentId, addAgentTool, removeAgentTool, updateAgentTool, createTool]);
+
+  const discard = useCallback(() => {
+    const restored: Record<string, IntegrationLocalState> = {};
+    for (const [slug, entry] of Object.entries(serverState)) {
+      restored[slug] = {
+        ...entry,
+        selectedFunctions: entry.selectedFunctions instanceof Set ? entry.selectedFunctions : new Set(entry.selectedFunctions as unknown as string[]),
+      };
+    }
+    setLocalState(restored);
+  }, [serverState]);
 
   // Loading state
   if (isLoading || agentToolsLoading) {
@@ -307,13 +342,13 @@ export function IntegrationsTab({
       <div className="grid grid-cols-1 gap-3">
         {connectedCards.map((card) => {
           const Icon = resolveIcon(card.definition.icon);
-          const isLinked = card.linkedToAgent;
-          const isMutating = addAgentTool.isPending || removeAgentTool.isPending || createTool.isPending;
           const integrationSlug = card.definition.slug;
+          const local = localState[integrationSlug];
+          const isLinked = local?.enabled ?? false;
           const fns = INTEGRATION_FUNCTIONS[integrationSlug];
           const isExpanded = expandedCards.has(integrationSlug);
-          const selected = selectedFunctions[integrationSlug] ?? new Set();
-          const instructions = functionInstructions[integrationSlug] ?? {};
+          const selected = local?.selectedFunctions ?? new Set();
+          const instructions = local?.functionInstructions ?? {};
 
           return (
             <div
@@ -380,7 +415,7 @@ export function IntegrationsTab({
                 {/* Toggle */}
                 <Switch
                   checked={isLinked}
-                  disabled={isMutating}
+                  disabled={isSaving}
                   onCheckedChange={(checked) => handleToggle(card, checked)}
                   aria-label={`${isLinked ? "Desativar" : "Ativar"} ${card.definition.name} para este agente`}
                 />
@@ -403,7 +438,7 @@ export function IntegrationsTab({
                           <Checkbox
                             checked={isSelected}
                             onCheckedChange={(val) =>
-                              handleToggleFunction(card, fn.slug, val === true)
+                              handleToggleFunction(integrationSlug, fn.slug, val === true)
                             }
                             aria-label={fn.label}
                           />
@@ -436,7 +471,7 @@ export function IntegrationsTab({
                               className="w-full rounded-md border bg-background px-3 py-2 text-sm resize-y min-h-[60px] focus:outline-none focus:ring-1 focus:ring-ring"
                               value={currentInstruction}
                               onChange={(e) =>
-                                handleUpdateFunctionInstruction(card, fn.slug, e.target.value)
+                                handleUpdateInstruction(integrationSlug, fn.slug, e.target.value)
                               }
                               placeholder="Instruções personalizadas para esta função..."
                               rows={2}
@@ -452,6 +487,22 @@ export function IntegrationsTab({
           );
         })}
       </div>
+
+      {/* Save bar */}
+      {hasChanges && (
+        <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={isSaving}>
+              Descartar
+            </Button>
+            <Button size="sm" onClick={saveNow} disabled={isSaving}>
+              {isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Salvar
+            </Button>
+          </div>
+        </div>
+      )}
     </div>
   );
 }