@dev-fastn-ai/react-core 2.4.12 → 2.4.14

package/README.md

@@ -156,6 +156,8 @@ interface Connector {
   imageUri?: string;
   status: ConnectorStatus;
   actions: ConnectorAction[];
+  isMultiConnection?: boolean;
+  connectorsDetails?: Record<string, any> | null;
 }
 
 enum ConnectorStatus {
@@ -167,7 +169,8 @@ enum ConnectorStatus {
 interface ConnectorAction {
   name: string;
   actionType: ConnectorActionType | string;
-  onClick?: () => Promise<ConnectorActionResult>;
+  onClick?: (args?: { connectionId?: string; connectionIds?: string[] }) => Promise<ConnectorActionResult>;
+  onSubmit?: (formData: Record<string, Primitive>, args?: { connectionId?: string; connectionIds?: string[] }) => Promise<ConnectorActionResult>;
 }
 
 interface ConnectorActionResult {
@@ -1223,6 +1226,139 @@ function MultiLevelSelectForm() {
 
 ---
 
+### **Multi-Connection Support**
+
+Some connectors support multiple simultaneous connections (e.g. connecting to multiple workspaces or accounts). When `connector.isMultiConnection` is `true`, you can add and remove individual connections.
+
+#### Detecting Multi-Connection Connectors
+
+```tsx
+function ConnectorCard({ connector }) {
+  const isMultiConn = connector.isMultiConnection;
+  const isActive = connector.status === "ACTIVE";
+
+  const handleActionClick = (action) => {
+    if (action.actionType === "ACTIVATION" && isMultiConn && isActive) {
+      // Connector is already active — show a "Manage Connections" UI
+      // instead of the normal activation flow
+      openManageConnectionsModal();
+    } else {
+      // Normal activation/deactivation flow
+      action.onClick?.();
+    }
+  };
+
+  // ...
+}
+```
+
+#### Adding a New Connection
+
+Pass a `connectionId` when activating to create a named connection:
+
+```tsx
+// Non-form action (direct OAuth or no-input activation)
+const activateAction = connector.actions.find(a => a.actionType === "ACTIVATION");
+await activateAction?.onClick?.({ connectionId: "my-new-connection" });
+
+// Form-based action (connector requires input fields)
+await activateAction?.onSubmit?.(formData, { connectionId: "my-new-connection" });
+```
+
+The `connectionId` is sent in the API request body as `connections: ["my-new-connection"]`.
+
+#### Disconnecting a Specific Connection
+
+Pass both the connection name and its connector ID keys when deactivating:
+
+```tsx
+const deactivateAction = connector.actions.find(a => a.actionType === "DEACTIVATION");
+
+await deactivateAction?.onClick?.({
+  connectionId: "my-connection-name",              // the connection name
+  connectionIds: ["_knexa_e494e021-4f8d-..."],     // connector ID keys from connectorsDetails
+});
+```
+
+#### Reading Existing Connections
+
+Existing connections are in `connector.connectorsDetails?.connectionsIds` — a map of connector ID keys to arrays of connection names:
+
+```tsx
+const connectionsIds = connector.connectorsDetails?.connectionsIds;
+
+// Example structure:
+// {
+//   "_knexa_e494e021-...": ["default", "my-connection"],
+//   "_knexa_abc12345-...": ["my-connection"]
+// }
+
+// Process into a deduplicated list:
+const connectionMap = new Map();
+if (connectionsIds) {
+  Object.entries(connectionsIds).forEach(([key, names]) => {
+    names.forEach((name) => {
+      if (connectionMap.has(name)) {
+        connectionMap.get(name).keys.push(key);
+      } else {
+        connectionMap.set(name, { name, keys: [key] });
+      }
+    });
+  });
+}
+const connections = Array.from(connectionMap.values());
+// connections = [{ name: "default", keys: ["_knexa_e494e021-..."] }, ...]
+```
+
+#### Full Example: Manage Connections Modal
+
+```tsx
+function ManageConnectionsModal({ connector, onClose }) {
+  const [connectionName, setConnectionName] = useState("");
+
+  const activateAction = connector.actions.find(a => a.actionType === "ACTIVATION");
+  const deactivateAction = connector.actions.find(a => a.actionType === "DEACTIVATION");
+
+  // Process existing connections from connectorsDetails
+  const connectionsIds = connector.connectorsDetails?.connectionsIds;
+  const connections = processConnections(connectionsIds); // deduplicated list
+
+  const handleConnect = async () => {
+    const connId = connectionName.trim();
+    if (!connId) return;
+    await activateAction?.onClick?.({ connectionId: connId });
+    setConnectionName("");
+  };
+
+  const handleDisconnect = async (connName, connIdKeys) => {
+    await deactivateAction?.onClick?.({
+      connectionId: connName,
+      connectionIds: connIdKeys,
+    });
+  };
+
+  return (
+    <div>
+      {/* Add new connection */}
+      <input value={connectionName} onChange={e => setConnectionName(e.target.value)} />
+      <button onClick={handleConnect}>Connect</button>
+
+      {/* List existing connections */}
+      {connections.map(conn => (
+        <div key={conn.name}>
+          <span>{conn.name}</span>
+          <button onClick={() => handleDisconnect(conn.name, conn.keys)}>
+            Disconnect
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+---
+
 ### **Error Handling and Loading States**
 
 ```tsx

package/dist/core/provider.d.ts

@@ -1,6 +1,6 @@
 import { QueryClient } from "@tanstack/react-query";
-import { Fastn } from "@fastn-ai/core";
-import type { FastnConfig } from "@fastn-ai/core";
+import { Fastn } from "@dev-fastn-ai/core";
+import type { FastnConfig } from "@dev-fastn-ai/core";
 export declare const FastnProvider: ({ children, config, queryClient, }: {
     children: React.ReactNode;
     config: FastnConfig;

package/dist/core/use-configuration-form.d.ts

@@ -1,2 +1,2 @@
-import { GetConfigurationFormInput } from "@fastn-ai/core";
-export declare const useConfigurationForm: (input: GetConfigurationFormInput) => import("@tanstack/react-query").UseQueryResult<import("@fastn-ai/core").ConfigurationForm, Error>;
+import { GetConfigurationFormInput } from "@dev-fastn-ai/core";
+export declare const useConfigurationForm: (input: GetConfigurationFormInput) => import("@tanstack/react-query").UseQueryResult<import("@dev-fastn-ai/core").ConfigurationForm, Error>;

package/dist/core/use-configurations.d.ts

@@ -1,2 +1,2 @@
-import { GetConfigurationsInput } from "@fastn-ai/core";
-export declare const useConfigurations: (input: GetConfigurationsInput) => import("@tanstack/react-query").UseQueryResult<import("@fastn-ai/core").Configuration[], Error>;
+import { GetConfigurationsInput } from "@dev-fastn-ai/core";
+export declare const useConfigurations: (input: GetConfigurationsInput) => import("@tanstack/react-query").UseQueryResult<import("@dev-fastn-ai/core").Configuration[], Error>;

package/dist/core/use-field-options.d.ts

@@ -1,4 +1,4 @@
-import type { ConnectorField, SelectOption, FormData } from "@fastn-ai/core";
+import type { ConnectorField, SelectOption, FormData } from "@dev-fastn-ai/core";
 /**
  * Custom hook to manage async select field options with search, pagination, and error handling using React Query.
  *

package/dist/index.cjs.js

@@ -3,7 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var reactQuery = require('@tanstack/react-query');
-var core = require('@fastn-ai/core');
+var core = require('@dev-fastn-ai/core');
 
 const FastnContext = react.createContext(null);
 const FastnProvider = ({ children, config, queryClient, }) => {

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { QueryClient } from '@tanstack/react-query';
-import * as _fastn_ai_core from '@fastn-ai/core';
-import { FastnConfig, GetConfigurationsInput, GetConfigurationFormInput, ConnectorField, FormData, SelectOption } from '@fastn-ai/core';
-export * from '@fastn-ai/core';
+import * as _dev_fastn_ai_core from '@dev-fastn-ai/core';
+import { FastnConfig, GetConfigurationsInput, GetConfigurationFormInput, ConnectorField, FormData, SelectOption } from '@dev-fastn-ai/core';
+export * from '@dev-fastn-ai/core';
 
 declare const FastnProvider: ({ children, config, queryClient, }: {
     children: React.ReactNode;
@@ -11,11 +11,11 @@ declare const FastnProvider: ({ children, config, queryClient, }: {
     queryClient?: QueryClient;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const useConfigurations: (input: GetConfigurationsInput) => _tanstack_react_query.UseQueryResult<_fastn_ai_core.Configuration[], Error>;
+declare const useConfigurations: (input: GetConfigurationsInput) => _tanstack_react_query.UseQueryResult<_dev_fastn_ai_core.Configuration[], Error>;
 
-declare const useConfigurationForm: (input: GetConfigurationFormInput) => _tanstack_react_query.UseQueryResult<_fastn_ai_core.ConfigurationForm, Error>;
+declare const useConfigurationForm: (input: GetConfigurationFormInput) => _tanstack_react_query.UseQueryResult<_dev_fastn_ai_core.ConfigurationForm, Error>;
 
-declare const useConnectors: () => _tanstack_react_query.UseQueryResult<_fastn_ai_core.Connector[], Error>;
+declare const useConnectors: () => _tanstack_react_query.UseQueryResult<_dev_fastn_ai_core.Connector[], Error>;
 
 /**
  * Custom hook to manage async select field options with search, pagination, and error handling using React Query.

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { createContext, useMemo, useContext, useEffect, useState, useCallback } from 'react';
 import { QueryClientProvider, QueryClient, useQuery, useQueryClient, useInfiniteQuery } from '@tanstack/react-query';
-import { Fastn } from '@fastn-ai/core';
-export * from '@fastn-ai/core';
+import { Fastn } from '@dev-fastn-ai/core';
+export * from '@dev-fastn-ai/core';
 
 const FastnContext = createContext(null);
 const FastnProvider = ({ children, config, queryClient, }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev-fastn-ai/react-core",
-  "version": "2.4.12",
+  "version": "2.4.14",
   "description": "React hooks and components for integrating Fastn AI connector marketplace into your applications. Built on top of @fastn-ai/core with React Query for optimal performance.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -52,14 +52,14 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/dev-fastn-ai/react-core.git"
+    "url": "https://github.com/fastn-ai/react-core.git"
   },
   "bugs": {
-    "url": "https://github.com/dev-fastn-ai/react-core/issues"
+    "url": "https://github.com/fastn-ai/react-core/issues"
   },
   "homepage": "https://docs.fastn.ai",
   "dependencies": {
-    "@dev-fastn-ai/core": "^2.0.7",
+    "@dev-fastn-ai/core": "^2.4.14",
     "@fastn-ai/core": "^1.0.8",
     "@types/lodash": "^4.17.20",
     "lodash": "^4.17.21"
@@ -89,4 +89,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}