@copilotkit/react-core 1.10.6 → 1.50.0-beta.0

package/dist/hooks/use-copilot-authenticated-action.js

@@ -22,6 +22,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -70,7 +82,7 @@ __export(use_copilot_authenticated_action_exports, {
   useCopilotAuthenticatedAction_c: () => useCopilotAuthenticatedAction_c
 });
 module.exports = __toCommonJS(use_copilot_authenticated_action_exports);
-var import_react5 = require("react");
+var import_react9 = require("react");
 
 // src/context/copilot-context.tsx
 var import_react = __toESM(require("react"));
@@ -80,10 +92,8 @@ var emptyCopilotContext = {
   },
   removeAction: () => {
   },
-  coAgentStateRenders: {},
-  setCoAgentStateRender: () => {
-  },
-  removeCoAgentStateRender: () => {
+  setRegisteredActions: () => "",
+  removeRegisteredAction: () => {
   },
   chatComponentsCache: { current: { actions: {}, coAgentStateRenders: {} } },
   getContextString: (documents, categories) => returnAndThrowInDebug(""),
@@ -103,7 +113,6 @@ var emptyCopilotContext = {
   addDocumentContext: () => returnAndThrowInDebug(""),
   removeDocumentContext: () => {
   },
-  runtimeClient: {},
   copilotApiConfig: new class {
     get chatApiEndpoint() {
       throw new Error("Remember to wrap your app in a `<CopilotKit> {...} </CopilotKit>` !!!");
@@ -143,10 +152,15 @@ var emptyCopilotContext = {
   extensions: {},
   setExtensions: () => {
   },
-  langGraphInterruptAction: null,
-  setLangGraphInterruptAction: () => {
+  interruptActions: {},
+  setInterruptAction: () => {
+  },
+  removeInterruptAction: () => {
+  },
+  interruptEventQueue: {},
+  addInterruptEvent: () => {
   },
-  removeLangGraphInterruptAction: () => {
+  removeInterruptEvent: () => {
   },
   onError: () => {
   },
@@ -172,281 +186,243 @@ function returnAndThrowInDebug(_value) {
 }
 
 // src/hooks/use-copilot-action.ts
-var import_shared2 = require("@copilotkit/shared");
-var import_react4 = require("react");
+var import_react8 = require("react");
 
-// src/components/error-boundary/error-utils.tsx
-var import_react3 = require("react");
-
-// src/components/toast/toast-provider.tsx
-var import_react2 = require("react");
+// src/hooks/use-frontend-tool.ts
+var import_react2 = __toESM(require("react"));
 var import_shared = require("@copilotkit/shared");
-var import_jsx_runtime = require("react/jsx-runtime");
-var ToastContext = (0, import_react2.createContext)(void 0);
-function useToast() {
-  const context = (0, import_react2.useContext)(ToastContext);
-  if (!context) {
-    throw new Error("useToast must be used within a ToastProvider");
-  }
-  return context;
-}
-
-// src/components/toast/exclamation-mark-icon.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ExclamationMarkIcon = ({
-  className,
-  style
-}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: `lucide lucide-circle-alert ${className ? className : ""}`,
-    style,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
-    ]
-  }
-);
-
-// src/components/error-boundary/error-utils.tsx
-var import_react_markdown = __toESM(require("react-markdown"));
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function ErrorToast({ errors }) {
-  const errorsToRender = errors.map((error, idx) => {
-    var _a, _b, _c;
-    const originalError = "extensions" in error ? (_a = error.extensions) == null ? void 0 : _a.originalError : {};
-    const message = (_b = originalError == null ? void 0 : originalError.message) != null ? _b : error.message;
-    const code = "extensions" in error ? (_c = error.extensions) == null ? void 0 : _c.code : null;
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      "div",
-      {
-        style: {
-          marginTop: idx === 0 ? 0 : 10,
-          marginBottom: 14
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ExclamationMarkIcon, { style: { marginBottom: 4 } }),
-          code && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-            "div",
-            {
-              style: {
-                fontWeight: "600",
-                marginBottom: 4
-              },
-              children: [
-                "Copilot Runtime Error:",
-                " ",
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontFamily: "monospace", fontWeight: "normal" }, children: code })
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_markdown.default, { children: message })
-        ]
-      },
-      idx
-    );
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "div",
-    {
-      style: {
-        fontSize: "13px",
-        maxWidth: "600px"
-      },
-      children: [
-        errorsToRender,
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: "11px", opacity: 0.75 }, children: "NOTE: This error only displays during local development." })
-      ]
+var import_shared2 = require("@copilotkit/shared");
+var import_react3 = require("@copilotkitnext/react");
+function useFrontendTool(tool, dependencies) {
+  const { name, description, parameters, render, followUp } = tool;
+  const zodParameters = (0, import_shared.getZodParameters)(parameters);
+  const normalizedRender = (() => {
+    if (typeof render === "undefined") {
+      return void 0;
     }
-  );
-}
-function useErrorToast() {
-  const { addToast } = useToast();
-  return (0, import_react3.useCallback)(
-    (error) => {
-      const errorId = error.map((err) => {
-        var _a, _b;
-        const message = "extensions" in err ? ((_b = (_a = err.extensions) == null ? void 0 : _a.originalError) == null ? void 0 : _b.message) || err.message : err.message;
-        const stack = err.stack || "";
-        return btoa(message + stack).slice(0, 32);
-      }).join("|");
-      addToast({
-        type: "error",
-        id: errorId,
-        // Toast libraries typically dedupe by id
-        message: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorToast, { errors: error })
-      });
-    },
-    [addToast]
-  );
-}
-function useAsyncCallback(callback, deps) {
-  const addErrorToast = useErrorToast();
-  return (0, import_react3.useCallback)((...args) => __async(this, null, function* () {
-    try {
-      return yield callback(...args);
-    } catch (error) {
-      console.error("Error in async callback:", error);
-      addErrorToast([error]);
-      throw error;
+    if (typeof render === "string") {
+      const staticRender = render;
+      return () => import_react2.default.createElement(import_react2.default.Fragment, null, staticRender);
     }
-  }), deps);
+    return (args) => {
+      const renderArgs = __spreadProps(__spreadValues({}, args), {
+        result: typeof args.result === "string" ? (0, import_shared2.parseJson)(args.result, args.result) : args.result
+      });
+      const rendered = render(renderArgs);
+      if (typeof rendered === "string") {
+        return import_react2.default.createElement(import_react2.default.Fragment, null, rendered);
+      }
+      return rendered != null ? rendered : null;
+    };
+  })();
+  (0, import_react3.useFrontendTool)({
+    name,
+    description,
+    parameters: zodParameters,
+    handler: tool.handler,
+    followUp,
+    render: normalizedRender
+  });
 }
 
-// src/hooks/use-copilot-action.ts
-function useCopilotAction(action, dependencies) {
-  const { setAction, removeAction, actions, chatComponentsCache } = useCopilotContext();
-  const idRef = (0, import_react4.useRef)((0, import_shared2.randomId)());
-  const renderAndWaitRef = (0, import_react4.useRef)(null);
-  const activatingMessageIdRef = (0, import_react4.useRef)(null);
-  const { addToast } = useToast();
-  action = __spreadValues({}, action);
-  if (
-    // renderAndWaitForResponse is not available for catch all actions
-    isFrontendAction(action) && // check if renderAndWaitForResponse is set
-    (action.renderAndWait || action.renderAndWaitForResponse)
-  ) {
-    action._isRenderAndWait = true;
-    const renderAndWait = action.renderAndWait || action.renderAndWaitForResponse;
-    action.renderAndWait = void 0;
-    action.renderAndWaitForResponse = void 0;
-    action._setActivatingMessageId = (id) => {
-      activatingMessageIdRef.current = id;
-    };
-    action.handler = useAsyncCallback(() => __async(this, null, function* () {
-      const currentActivatingId = activatingMessageIdRef.current;
-      let resolve;
-      let reject;
-      const promise = new Promise((resolvePromise, rejectPromise) => {
-        resolve = resolvePromise;
-        reject = rejectPromise;
-      });
-      renderAndWaitRef.current = {
-        promise,
-        resolve,
-        reject,
-        messageId: currentActivatingId
-      };
-      const result = yield promise;
-      return result;
-    }), []);
-    action.render = (props) => {
-      const currentRenderMessageId = props.messageId;
-      let status = props.status;
-      if (props.status === "executing") {
-        if (!renderAndWaitRef.current || !renderAndWaitRef.current.promise) {
-          status = "inProgress";
-        } else if (renderAndWaitRef.current.messageId !== currentRenderMessageId && activatingMessageIdRef.current !== currentRenderMessageId) {
-          status = "inProgress";
-        }
+// src/hooks/use-render-tool-call.ts
+var import_shared3 = require("@copilotkit/shared");
+var import_react4 = require("react");
+var import_react5 = require("@copilotkitnext/react");
+var import_shared4 = require("@copilotkit/shared");
+function useRenderToolCall(tool, dependencies) {
+  const { copilotkit } = (0, import_react5.useCopilotKit)();
+  const hasAddedRef = (0, import_react4.useRef)(false);
+  (0, import_react4.useEffect)(() => {
+    const { name, parameters, render } = tool;
+    const zodParameters = (0, import_shared3.getZodParameters)(parameters);
+    const renderToolCall = name === "*" ? (0, import_react5.defineToolCallRenderer)({
+      name: "*",
+      render: (args) => {
+        return render(__spreadProps(__spreadValues({}, args), {
+          result: args.result ? (0, import_shared4.parseJson)(args.result, args.result) : args.result
+        }));
       }
-      const waitProps = {
-        status,
-        args: props.args,
-        result: props.result,
-        // handler and respond should only be provided if this is the truly active instance
-        // and its promise infrastructure is ready.
-        handler: status === "executing" && renderAndWaitRef.current && renderAndWaitRef.current.messageId === currentRenderMessageId ? renderAndWaitRef.current.resolve : void 0,
-        respond: status === "executing" && renderAndWaitRef.current && renderAndWaitRef.current.messageId === currentRenderMessageId ? renderAndWaitRef.current.resolve : void 0
-      };
-      const isNoArgsRenderWait = (_fn) => {
-        var _a;
-        return ((_a = action.parameters) == null ? void 0 : _a.length) === 0;
-      };
-      if (renderAndWait) {
-        if (isNoArgsRenderWait(renderAndWait)) {
-          return renderAndWait(waitProps);
-        } else {
-          return renderAndWait(waitProps);
+    }) : (0, import_react5.defineToolCallRenderer)({
+      name,
+      args: zodParameters,
+      render: (args) => {
+        return render(__spreadProps(__spreadValues({}, args), {
+          result: args.result ? (0, import_shared4.parseJson)(args.result, args.result) : args.result
+        }));
+      }
+    });
+    const existingIndex = copilotkit.renderToolCalls.findIndex((r) => r.name === name);
+    if (existingIndex !== -1) {
+      copilotkit.renderToolCalls.splice(existingIndex, 1);
+    }
+    copilotkit.renderToolCalls.push(renderToolCall);
+    hasAddedRef.current = true;
+    return () => {
+      if (hasAddedRef.current) {
+        const index = copilotkit.renderToolCalls.findIndex((r) => r.name === name);
+        if (index !== -1) {
+          copilotkit.renderToolCalls.splice(index, 1);
         }
+        hasAddedRef.current = false;
       }
-      return (0, import_react4.createElement)(import_react4.Fragment);
     };
-  }
-  if (dependencies === void 0) {
-    if (actions[idRef.current]) {
-      if (isFrontendAction(action)) {
-        actions[idRef.current].handler = action.handler;
+  }, [tool, ...dependencies != null ? dependencies : []]);
+}
+
+// src/hooks/use-human-in-the-loop.ts
+var import_shared5 = require("@copilotkit/shared");
+var import_react6 = require("@copilotkitnext/react");
+var import_core = require("@copilotkitnext/core");
+var import_react7 = __toESM(require("react"));
+function useHumanInTheLoop(tool, dependencies) {
+  const _a = tool, { render } = _a, toolRest = __objRest(_a, ["render"]);
+  const { name, description, parameters, followUp } = toolRest;
+  const zodParameters = (0, import_shared5.getZodParameters)(parameters);
+  const renderRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    renderRef.current = (args) => {
+      if (typeof render === "string") {
+        return import_react7.default.createElement(import_react7.default.Fragment, null, render);
       }
-      if (typeof action.render === "function") {
-        if (chatComponentsCache.current !== null) {
-          chatComponentsCache.current.actions[action.name] = action.render;
+      if (!render) {
+        return null;
+      }
+      const renderProps = (() => {
+        const mappedArgs = args.args;
+        switch (args.status) {
+          case import_core.ToolCallStatus.InProgress:
+            return {
+              args: mappedArgs,
+              respond: args.respond,
+              status: args.status,
+              handler: void 0
+            };
+          case import_core.ToolCallStatus.Executing:
+            return {
+              args: mappedArgs,
+              respond: args.respond,
+              status: args.status,
+              handler: () => {
+              }
+            };
+          case import_core.ToolCallStatus.Complete:
+            return {
+              args: mappedArgs,
+              respond: args.respond,
+              status: args.status,
+              result: args.result ? (0, import_shared5.parseJson)(args.result, args.result) : args.result,
+              handler: void 0
+            };
+          default:
+            throw new import_shared5.CopilotKitError({
+              code: import_shared5.CopilotKitErrorCode.UNKNOWN,
+              message: `Invalid tool call status: ${args.status}`
+            });
         }
+      })();
+      const rendered = render(renderProps);
+      if (typeof rendered === "string") {
+        return import_react7.default.createElement(import_react7.default.Fragment, null, rendered);
       }
+      return rendered != null ? rendered : null;
+    };
+  }, [render, ...dependencies != null ? dependencies : []]);
+  (0, import_react6.useHumanInTheLoop)({
+    name,
+    description,
+    followUp,
+    parameters: zodParameters,
+    render: (args) => {
+      var _a2, _b;
+      return (_b = (_a2 = renderRef.current) == null ? void 0 : _a2.call(renderRef, args)) != null ? _b : null;
     }
+  });
+}
+
+// src/hooks/use-copilot-action.ts
+function getActionConfig(action) {
+  if (action.name === "*") {
+    return {
+      type: "render",
+      action
+    };
   }
-  (0, import_react4.useEffect)(() => {
-    const hasDuplicate = Object.values(actions).some(
-      (otherAction) => otherAction.name === action.name && otherAction !== actions[idRef.current]
-    );
-    if (hasDuplicate) {
-      addToast({
-        type: "warning",
-        message: `Found an already registered action with name ${action.name}.`,
-        id: `dup-action-${action.name}`
-      });
+  if ("renderAndWaitForResponse" in action || "renderAndWait" in action) {
+    let render = action.render;
+    if (!render && "renderAndWaitForResponse" in action) {
+      render = action.renderAndWaitForResponse;
     }
-  }, [actions]);
-  (0, import_react4.useEffect)(() => {
-    setAction(idRef.current, action);
-    if (chatComponentsCache.current !== null && action.render !== void 0) {
-      chatComponentsCache.current.actions[action.name] = action.render;
+    if (!render && "renderAndWait" in action) {
+      render = action.renderAndWait;
     }
-    return () => {
-      removeAction(idRef.current);
+    return {
+      type: "hitl",
+      action: __spreadProps(__spreadValues({}, action), { render })
+    };
+  }
+  if ("available" in action) {
+    if (action.available === "enabled" || action.available === "remote") {
+      return {
+        type: "frontend",
+        action
+      };
+    }
+    if (action.available === "frontend" || action.available === "disabled") {
+      return {
+        type: "render",
+        action
+      };
+    }
+  }
+  if ("handler" in action) {
+    return {
+      type: "frontend",
+      action
     };
-  }, [
-    setAction,
-    removeAction,
-    isFrontendAction(action) ? action.description : void 0,
-    action.name,
-    isFrontendAction(action) ? action.disabled : void 0,
-    isFrontendAction(action) ? action.available : void 0,
-    // This should be faster than deep equality checking
-    // In addition, all major JS engines guarantee the order of object keys
-    JSON.stringify(isFrontendAction(action) ? action.parameters : []),
-    // include render only if it's a string
-    typeof action.render === "string" ? action.render : void 0,
-    // dependencies set by the developer
-    ...dependencies || []
-  ]);
+  }
+  throw new Error("Invalid action configuration");
 }
-function isFrontendAction(action) {
-  return action.name !== "*";
+function useCopilotAction(action, dependencies) {
+  const [initialActionConfig] = (0, import_react8.useState)(getActionConfig(action));
+  const currentActionConfig = getActionConfig(action);
+  if (initialActionConfig.type !== currentActionConfig.type) {
+    throw new Error("Action configuration changed between renders");
+  }
+  switch (currentActionConfig.type) {
+    case "render":
+      return useRenderToolCall(currentActionConfig.action, dependencies);
+    case "hitl":
+      return useHumanInTheLoop(currentActionConfig.action, dependencies);
+    case "frontend":
+      return useFrontendTool(currentActionConfig.action, dependencies);
+    default:
+      throw new Error("Invalid action configuration");
+  }
 }
 
 // src/hooks/use-copilot-authenticated-action.ts
-var import_react6 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 function useCopilotAuthenticatedAction_c(action, dependencies) {
   const { authConfig_c, authStates_c, setAuthStates_c } = useCopilotContext();
-  const pendingActionRef = (0, import_react5.useRef)(null);
-  const executeAction = (0, import_react5.useCallback)(
+  const pendingActionRef = (0, import_react9.useRef)(null);
+  const executeAction = (0, import_react9.useCallback)(
     (props) => {
       if (typeof action.render === "function") {
         return action.render(props);
       }
-      return action.render || import_react6.default.createElement(import_react5.Fragment);
+      return action.render || import_react10.default.createElement(import_react9.Fragment);
     },
     [action]
   );
-  const wrappedRender = (0, import_react5.useCallback)(
+  const wrappedRender = (0, import_react9.useCallback)(
     (props) => {
       const isAuthenticated = Object.values(authStates_c || {}).some(
         (state) => state.status === "authenticated"
       );
       if (!isAuthenticated) {
         pendingActionRef.current = props;
-        return (authConfig_c == null ? void 0 : authConfig_c.SignInComponent) ? import_react6.default.createElement(authConfig_c.SignInComponent, {
+        return (authConfig_c == null ? void 0 : authConfig_c.SignInComponent) ? import_react10.default.createElement(authConfig_c.SignInComponent, {
           onSignInComplete: (authState) => {
             setAuthStates_c == null ? void 0 : setAuthStates_c((prev) => __spreadProps(__spreadValues({}, prev), { [action.name]: authState }));
             if (pendingActionRef.current) {
@@ -454,7 +430,7 @@ function useCopilotAuthenticatedAction_c(action, dependencies) {
               pendingActionRef.current = null;
             }
           }
-        }) : import_react6.default.createElement(import_react5.Fragment);
+        }) : import_react10.default.createElement(import_react9.Fragment);
       }
       return executeAction(props);
     },