@copilotkit/react-core 1.9.1 → 1.9.2-next.0

package/dist/hooks/use-coagent.js

@@ -135,7 +135,7 @@ var emptyCopilotContext = {
   },
   removeChatSuggestionConfiguration: () => {
   },
-  showDevConsole: "auto",
+  showDevConsole: false,
   coagentStates: {},
   setCoagentStates: () => {
   },
@@ -197,7 +197,7 @@ var import_runtime_client_gql4 = require("@copilotkit/runtime-client-gql");
 
 // src/hooks/use-chat.ts
 var import_react6 = require("react");
-var import_shared2 = require("@copilotkit/shared");
+var import_shared4 = require("@copilotkit/shared");
 var import_runtime_client_gql3 = require("@copilotkit/runtime-client-gql");
 
 // src/types/frontend-action.ts
@@ -229,17 +229,126 @@ function processActionsForRuntimeRequest(actions) {
 var import_runtime_client_gql2 = require("@copilotkit/runtime-client-gql");
 
 // src/components/toast/toast-provider.tsx
+var import_react3 = require("react");
+var import_shared2 = require("@copilotkit/shared");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ToastContext = (0, import_react3.createContext)(void 0);
+function useToast() {
+  const context = (0, import_react3.useContext)(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+}
+
+// src/hooks/use-copilot-runtime-client.ts
 var import_react4 = require("react");
+var import_shared3 = require("@copilotkit/shared");
+
+// src/utils/dev-console.ts
+function shouldShowDevConsole(showDevConsole) {
+  return showDevConsole;
+}
+
+// src/hooks/use-copilot-runtime-client.ts
+var useCopilotRuntimeClient = (options) => {
+  const { setBannerError } = useToast();
+  const _a = options, { showDevConsole } = _a, runtimeOptions = __objRest(_a, ["showDevConsole"]);
+  const lastStructuredErrorRef = (0, import_react4.useRef)(null);
+  const runtimeClient = (0, import_react4.useMemo)(() => {
+    return new import_runtime_client_gql2.CopilotRuntimeClient(__spreadProps(__spreadValues({}, runtimeOptions), {
+      handleGQLErrors: (error) => {
+        var _a2;
+        if ((_a2 = error.graphQLErrors) == null ? void 0 : _a2.length) {
+          const graphQLErrors = error.graphQLErrors;
+          const routeError = (gqlError) => {
+            const extensions = gqlError.extensions;
+            const visibility = extensions == null ? void 0 : extensions.visibility;
+            const isDev = shouldShowDevConsole(showDevConsole != null ? showDevConsole : false);
+            if (visibility === import_shared3.ErrorVisibility.SILENT) {
+              console.error("CopilotKit Silent Error:", gqlError.message);
+              return;
+            }
+            if (!isDev) {
+              console.error("CopilotKit Error (hidden in production):", gqlError.message);
+              return;
+            }
+            const now = Date.now();
+            const errorMessage = gqlError.message;
+            if (lastStructuredErrorRef.current && lastStructuredErrorRef.current.message === errorMessage && now - lastStructuredErrorRef.current.timestamp < 150) {
+              return;
+            }
+            lastStructuredErrorRef.current = { message: errorMessage, timestamp: now };
+            const ckError = createStructuredError(gqlError);
+            if (ckError) {
+              setBannerError(ckError);
+            } else {
+              const fallbackError = new import_shared3.CopilotKitError({
+                message: gqlError.message,
+                code: import_shared3.CopilotKitErrorCode.UNKNOWN
+              });
+              setBannerError(fallbackError);
+            }
+          };
+          graphQLErrors.forEach(routeError);
+        } else {
+          const isDev = shouldShowDevConsole(showDevConsole != null ? showDevConsole : false);
+          if (!isDev) {
+            console.error("CopilotKit Error (hidden in production):", error);
+          } else {
+            const fallbackError = new import_shared3.CopilotKitError({
+              message: (error == null ? void 0 : error.message) || String(error),
+              code: import_shared3.CopilotKitErrorCode.UNKNOWN
+            });
+            setBannerError(fallbackError);
+          }
+        }
+      },
+      handleGQLWarning: (message) => {
+        console.warn(message);
+        const warningError = new import_shared3.CopilotKitError({
+          message,
+          code: import_shared3.CopilotKitErrorCode.UNKNOWN
+        });
+        setBannerError(warningError);
+      }
+    }));
+  }, [runtimeOptions, setBannerError, showDevConsole]);
+  return runtimeClient;
+};
+function createStructuredError(gqlError) {
+  var _a, _b, _c;
+  const extensions = gqlError.extensions;
+  const originalError = extensions == null ? void 0 : extensions.originalError;
+  const message = (originalError == null ? void 0 : originalError.message) || gqlError.message;
+  const code = extensions == null ? void 0 : extensions.code;
+  if (code) {
+    return new import_shared3.CopilotKitError({ message, code });
+  }
+  if ((_a = originalError == null ? void 0 : originalError.stack) == null ? void 0 : _a.includes("CopilotApiDiscoveryError")) {
+    return new import_shared3.CopilotKitApiDiscoveryError({ message });
+  }
+  if ((_b = originalError == null ? void 0 : originalError.stack) == null ? void 0 : _b.includes("CopilotKitRemoteEndpointDiscoveryError")) {
+    return new import_shared3.CopilotKitRemoteEndpointDiscoveryError({ message });
+  }
+  if ((_c = originalError == null ? void 0 : originalError.stack) == null ? void 0 : _c.includes("CopilotKitAgentDiscoveryError")) {
+    return new import_shared3.CopilotKitAgentDiscoveryError({
+      agentName: "",
+      availableAgents: []
+    });
+  }
+  return null;
+}
 
 // src/components/error-boundary/error-utils.tsx
-var import_react3 = require("react");
+var import_react5 = require("react");
 
 // src/components/toast/exclamation-mark-icon.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var ExclamationMarkIcon = ({
   className,
   style
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -254,23 +363,23 @@ var ExclamationMarkIcon = ({
     className: `lucide lucide-circle-alert ${className ? className : ""}`,
     style,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
+      /* @__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_runtime2 = require("react/jsx-runtime");
+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_runtime2.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
       {
         style: {
@@ -278,8 +387,8 @@ function ErrorToast({ errors }) {
           marginBottom: 14
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ExclamationMarkIcon, { style: { marginBottom: 4 } }),
-          code && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ExclamationMarkIcon, { style: { marginBottom: 4 } }),
+          code && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
             "div",
             {
               style: {
@@ -287,19 +396,19 @@ function ErrorToast({ errors }) {
                 marginBottom: 4
               },
               children: [
-                "Copilot Cloud Error:",
+                "Copilot Runtime Error:",
                 " ",
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontFamily: "monospace", fontWeight: "normal" }, children: code })
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontFamily: "monospace", fontWeight: "normal" }, children: code })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_markdown.default, { children: message })
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_markdown.default, { children: message })
         ]
       },
       idx
     );
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       style: {
@@ -308,14 +417,14 @@ function ErrorToast({ errors }) {
       },
       children: [
         errorsToRender,
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: "11px", opacity: 0.75 }, children: "NOTE: This error only displays during local development." })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: "11px", opacity: 0.75 }, children: "NOTE: This error only displays during local development." })
       ]
     }
   );
 }
 function useErrorToast() {
   const { addToast } = useToast();
-  return (0, import_react3.useCallback)(
+  return (0, import_react5.useCallback)(
     (error) => {
       const errorId = error.map((err) => {
         var _a, _b;
@@ -327,7 +436,7 @@ function useErrorToast() {
         type: "error",
         id: errorId,
         // Toast libraries typically dedupe by id
-        message: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorToast, { errors: error })
+        message: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorToast, { errors: error })
       });
     },
     [addToast]
@@ -335,7 +444,7 @@ function useErrorToast() {
 }
 function useAsyncCallback(callback, deps) {
   const addErrorToast = useErrorToast();
-  return (0, import_react3.useCallback)((...args) => __async(this, null, function* () {
+  return (0, import_react5.useCallback)((...args) => __async(this, null, function* () {
     try {
       return yield callback(...args);
     } catch (error) {
@@ -346,41 +455,6 @@ function useAsyncCallback(callback, deps) {
   }), deps);
 }
 
-// src/components/toast/toast-provider.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var ToastContext = (0, import_react4.createContext)(void 0);
-function useToast() {
-  const context = (0, import_react4.useContext)(ToastContext);
-  if (!context) {
-    throw new Error("useToast must be used within a ToastProvider");
-  }
-  return context;
-}
-
-// src/hooks/use-copilot-runtime-client.ts
-var import_react5 = require("react");
-var useCopilotRuntimeClient = (options) => {
-  const { addGraphQLErrorsToast } = useToast();
-  const addErrorToast = useErrorToast();
-  const { addToast } = useToast();
-  const runtimeClient = (0, import_react5.useMemo)(() => {
-    return new import_runtime_client_gql2.CopilotRuntimeClient(__spreadProps(__spreadValues({}, options), {
-      handleGQLErrors: (error) => {
-        if (error.graphQLErrors.length) {
-          addGraphQLErrorsToast(error.graphQLErrors);
-        } else {
-          addErrorToast([error]);
-        }
-      },
-      handleGQLWarning: (message) => {
-        console.warn(message);
-        addToast({ type: "warning", message });
-      }
-    }));
-  }, [options, addGraphQLErrorsToast, addToast]);
-  return runtimeClient;
-};
-
 // src/hooks/use-chat.ts
 function useChat(options) {
   const {
@@ -418,12 +492,14 @@ function useChat(options) {
   const extensionsRef = (0, import_react6.useRef)(extensions);
   extensionsRef.current = extensions;
   const publicApiKey = copilotConfig.publicApiKey;
-  const headers = __spreadValues(__spreadValues({}, copilotConfig.headers || {}), publicApiKey ? { [import_shared2.COPILOT_CLOUD_PUBLIC_API_KEY_HEADER]: publicApiKey } : {});
+  const headers = __spreadValues(__spreadValues({}, copilotConfig.headers || {}), publicApiKey ? { [import_shared4.COPILOT_CLOUD_PUBLIC_API_KEY_HEADER]: publicApiKey } : {});
+  const { showDevConsole } = useCopilotContext();
   const runtimeClient = useCopilotRuntimeClient({
     url: copilotConfig.chatApiEndpoint,
     publicApiKey: copilotConfig.publicApiKey,
     headers,
-    credentials: copilotConfig.credentials
+    credentials: copilotConfig.credentials,
+    showDevConsole
   });
   const pendingAppendsRef = (0, import_react6.useRef)([]);
   const runChatCompletion = useAsyncCallback(
@@ -541,7 +617,7 @@ function useChat(options) {
           (metaEvents != null ? metaEvents : []).forEach((ev) => {
             if (ev.name === import_runtime_client_gql3.MetaEventName.LangGraphInterruptEvent) {
               let eventValue = (0, import_runtime_client_gql3.langGraphInterruptEvent)(ev).value;
-              eventValue = (0, import_shared2.parseJson)(eventValue, eventValue);
+              eventValue = (0, import_shared4.parseJson)(eventValue, eventValue);
               setLangGraphInterruptAction({
                 event: __spreadProps(__spreadValues({}, (0, import_runtime_client_gql3.langGraphInterruptEvent)(ev)), {
                   value: eventValue
@@ -615,7 +691,7 @@ function useChat(options) {
               } else {
                 if (agentLock) {
                   setAgentSession({
-                    threadId: (0, import_shared2.randomId)(),
+                    threadId: (0, import_shared4.randomId)(),
                     agentName: agentLock,
                     nodeName: void 0
                   });
@@ -676,7 +752,7 @@ function useChat(options) {
               if (pairedFeAction) {
                 const newExecutionMessage = new import_runtime_client_gql3.ActionExecutionMessage({
                   name: pairedFeAction.name,
-                  arguments: (0, import_shared2.parseJson)(resultMessage.result, resultMessage.result),
+                  arguments: (0, import_shared4.parseJson)(resultMessage.result, resultMessage.result),
                   status: message.status,
                   createdAt: message.createdAt,
                   parentMessageId: message.parentMessageId
@@ -686,7 +762,7 @@ function useChat(options) {
             } else if (message.isResultMessage() && currentResultMessagePairedFeAction) {
               const newExecutionMessage = new import_runtime_client_gql3.ActionExecutionMessage({
                 name: currentResultMessagePairedFeAction.name,
-                arguments: (0, import_shared2.parseJson)(message.result, message.result),
+                arguments: (0, import_shared4.parseJson)(message.result, message.result),
                 status: message.status,
                 createdAt: message.createdAt
               });
@@ -924,7 +1000,7 @@ function getPairedFeAction(actions, message) {
 // src/components/copilot-provider/copilotkit.tsx
 var import_react7 = require("react");
 var import_react_dom = require("react-dom");
-var import_shared3 = require("@copilotkit/shared");
+var import_shared5 = require("@copilotkit/shared");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var defaultCopilotContextCategories = ["global"];
 
@@ -1143,11 +1219,11 @@ ${additionalInstructions}` : "");
 }
 
 // src/hooks/use-coagent.ts
-var import_shared4 = require("@copilotkit/shared");
+var import_shared6 = require("@copilotkit/shared");
 function useCoAgent(options) {
   const generalContext = useCopilotContext();
   const { availableAgents } = generalContext;
-  const { addToast } = useToast();
+  const { setBannerError } = useToast();
   const lastLoadedThreadId = (0, import_react9.useRef)();
   const lastLoadedState = (0, import_react9.useRef)();
   const { name } = options;
@@ -1155,7 +1231,11 @@ function useCoAgent(options) {
     if ((availableAgents == null ? void 0 : availableAgents.length) && !availableAgents.some((a) => a.name === name)) {
       const message = `(useCoAgent): Agent "${name}" not found. Make sure the agent exists and is properly configured.`;
       console.warn(message);
-      addToast({ type: "warning", message });
+      const agentError = new import_shared6.CopilotKitAgentDiscoveryError({
+        agentName: name,
+        availableAgents: availableAgents.map((a) => ({ name: a.name, id: a.id }))
+      });
+      setBannerError(agentError);
     }
   }, [availableAgents]);
   const messagesContext = useCopilotMessagesContext();
@@ -1167,7 +1247,8 @@ function useCoAgent(options) {
     url: copilotApiConfig.chatApiEndpoint,
     publicApiKey: copilotApiConfig.publicApiKey,
     headers,
-    credentials: copilotApiConfig.credentials
+    credentials: copilotApiConfig.credentials,
+    showDevConsole: context.showDevConsole
   });
   const setState = (0, import_react9.useCallback)(
     (newState) => {
@@ -1196,7 +1277,7 @@ function useCoAgent(options) {
       if (((_d = (_c = result.data) == null ? void 0 : _c.loadAgentState) == null ? void 0 : _d.threadExists) && newState && newState != "{}") {
         lastLoadedState.current = newState;
         lastLoadedThreadId.current = threadId;
-        const fetchedState = (0, import_shared4.parseJson)(newState, {});
+        const fetchedState = (0, import_shared6.parseJson)(newState, {});
         isExternalStateManagement(options) ? options.setState(fetchedState) : setState(fetchedState);
       }
     });