@copilotkit/react-core 1.4.1-pre.5 → 1.4.1

package/dist/components/copilot-provider/copilotkit.js

@@ -81,10 +81,11 @@ var __async = (__this, __arguments, generator) => {
 var copilotkit_exports = {};
 __export(copilotkit_exports, {
   CopilotKit: () => CopilotKit,
+  CopilotKitInternal: () => CopilotKitInternal,
   defaultCopilotContextCategories: () => defaultCopilotContextCategories
 });
 module.exports = __toCommonJS(copilotkit_exports);
-var import_react6 = require("react");
+var import_react8 = require("react");
 
 // src/context/copilot-context.tsx
 var import_react = __toESM(require("react"));
@@ -114,6 +115,7 @@ var emptyCopilotContext = {
   addDocumentContext: () => returnAndThrowInDebug(""),
   removeDocumentContext: () => {
   },
+  runtimeClient: {},
   copilotApiConfig: new class {
     get chatApiEndpoint() {
       throw new Error("Remember to wrap your app in a `<CopilotKit> {...} </CopilotKit>` !!!");
@@ -373,9 +375,254 @@ function CopilotMessages(_a) {
   );
 }
 
-// src/components/copilot-provider/copilotkit.tsx
+// src/components/toast/toast-provider.tsx
+var import_react6 = require("react");
+
+// 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/toast/toast-provider.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ToastContext = (0, import_react6.createContext)(void 0);
+function useToast() {
+  const context = (0, import_react6.useContext)(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+}
+function ToastProvider({
+  enabled,
+  children
+}) {
+  const [toasts, setToasts] = (0, import_react6.useState)([]);
+  const addToast = (0, import_react6.useCallback)((toast) => {
+    const id = Math.random().toString(36).substring(2, 9);
+    setToasts((currentToasts) => [...currentToasts, __spreadProps(__spreadValues({}, toast), { id })]);
+    if (toast.duration) {
+      setTimeout(() => {
+        removeToast(id);
+      }, toast.duration);
+    }
+  }, []);
+  const addGraphQLErrorsToast = (0, import_react6.useCallback)((errors) => {
+    const errorsToRender = errors.map((error, idx) => {
+      var _a;
+      const message = error.message;
+      const code = (_a = error.extensions) == null ? void 0 : _a.code;
+      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 Cloud Error:",
+                  " ",
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontFamily: "monospace", fontWeight: "normal" }, children: code })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: message })
+          ]
+        },
+        idx
+      );
+    });
+    addToast({
+      type: "error",
+      message: /* @__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 is a Copilot Cloud error, and it only displays during local development." })
+          ]
+        }
+      )
+    });
+  }, []);
+  const removeToast = (0, import_react6.useCallback)((id) => {
+    setToasts((currentToasts) => currentToasts.filter((toast) => toast.id !== id));
+  }, []);
+  const value = {
+    toasts,
+    addToast,
+    addGraphQLErrorsToast,
+    removeToast,
+    enabled
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(ToastContext.Provider, { value, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          bottom: "1rem",
+          left: "50%",
+          transform: "translateX(-50%)",
+          zIndex: 50,
+          display: "flex",
+          flexDirection: "column",
+          gap: "0.5rem"
+        },
+        children: [
+          toasts.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { textAlign: "right" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              onClick: () => setToasts([]),
+              style: {
+                padding: "4px 8px",
+                fontSize: "12px",
+                cursor: "pointer",
+                background: "white",
+                border: "1px solid rgba(0,0,0,0.2)",
+                borderRadius: "4px"
+              },
+              children: "Close All"
+            }
+          ) }),
+          toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            Toast,
+            {
+              message: toast.message,
+              type: toast.type,
+              onClose: () => removeToast(toast.id)
+            },
+            toast.id
+          ))
+        ]
+      }
+    ),
+    children
+  ] });
+}
+function Toast({
+  message,
+  type = "info",
+  onClose
+}) {
+  const bgColors = {
+    info: "#3b82f6",
+    success: "#22c55e",
+    warning: "#eab308",
+    error: "#ef4444"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      style: {
+        backgroundColor: bgColors[type],
+        color: "white",
+        padding: "0.5rem 1rem",
+        borderRadius: "0.25rem",
+        boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+        position: "relative",
+        minWidth: "200px"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: message }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            onClick: onClose,
+            style: {
+              position: "absolute",
+              top: "0",
+              right: "0",
+              background: "none",
+              border: "none",
+              color: "white",
+              cursor: "pointer",
+              padding: "0.5rem",
+              fontSize: "1rem"
+            },
+            children: "\u2715"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/hooks/use-copilot-runtime-client.ts
+var import_runtime_client_gql = require("@copilotkit/runtime-client-gql");
+var import_react7 = require("react");
+var useCopilotRuntimeClient = (options) => {
+  const { addGraphQLErrorsToast } = useToast();
+  const runtimeClient = (0, import_react7.useMemo)(() => {
+    return new import_runtime_client_gql.CopilotRuntimeClient(__spreadProps(__spreadValues({}, options), {
+      handleGQLErrors: (error) => {
+        if (error.graphQLErrors.length) {
+          addGraphQLErrorsToast(error.graphQLErrors);
+        }
+      }
+    }));
+  }, [options, addGraphQLErrorsToast]);
+  return runtimeClient;
+};
+
+// src/utils/dev-console.ts
+function shouldShowDevConsole(showDevConsole) {
+  if (typeof showDevConsole === "boolean") {
+    return showDevConsole;
+  }
+  return getHostname() === "localhost" || getHostname() === "127.0.0.1" || getHostname() === "0.0.0.0" || getHostname() === "::1";
+}
+function getHostname() {
+  if (typeof window !== "undefined" && window.location) {
+    return window.location.hostname;
+  }
+  return "";
+}
+
+// src/components/copilot-provider/copilotkit.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function CopilotKit(_a) {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  const showDevConsole = props.showDevConsole === void 0 ? "auto" : props.showDevConsole;
+  const enabled = shouldShowDevConsole(showDevConsole);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ToastProvider, { enabled, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CopilotKitInternal, __spreadProps(__spreadValues({}, props), { children })) });
+}
+function CopilotKitInternal(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
   if (!props.runtimeUrl && !props.publicApiKey) {
     throw new Error(
@@ -383,49 +630,49 @@ function CopilotKit(_a) {
     );
   }
   const chatApiEndpoint = props.runtimeUrl || import_shared3.COPILOT_CLOUD_CHAT_URL;
-  const [actions, setActions] = (0, import_react6.useState)({});
-  const [coAgentStateRenders, setCoAgentStateRenders] = (0, import_react6.useState)({});
-  const chatComponentsCache = (0, import_react6.useRef)({
+  const [actions, setActions] = (0, import_react8.useState)({});
+  const [coAgentStateRenders, setCoAgentStateRenders] = (0, import_react8.useState)({});
+  const chatComponentsCache = (0, import_react8.useRef)({
     actions: {},
     coAgentStateRenders: {}
   });
   const { addElement, removeElement, printTree } = use_tree_default();
-  const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
-  const [chatInstructions, setChatInstructions] = (0, import_react6.useState)("");
+  const [isLoading, setIsLoading] = (0, import_react8.useState)(false);
+  const [chatInstructions, setChatInstructions] = (0, import_react8.useState)("");
   const {
     addElement: addDocument,
     removeElement: removeDocument,
     allElements: allDocuments
   } = use_flat_category_store_default();
-  const setAction = (0, import_react6.useCallback)((id, action) => {
+  const setAction = (0, import_react8.useCallback)((id, action) => {
     setActions((prevPoints) => {
       return __spreadProps(__spreadValues({}, prevPoints), {
         [id]: action
       });
     });
   }, []);
-  const removeAction = (0, import_react6.useCallback)((id) => {
+  const removeAction = (0, import_react8.useCallback)((id) => {
     setActions((prevPoints) => {
       const newPoints = __spreadValues({}, prevPoints);
       delete newPoints[id];
       return newPoints;
     });
   }, []);
-  const setCoAgentStateRender = (0, import_react6.useCallback)((id, stateRender) => {
+  const setCoAgentStateRender = (0, import_react8.useCallback)((id, stateRender) => {
     setCoAgentStateRenders((prevPoints) => {
       return __spreadProps(__spreadValues({}, prevPoints), {
         [id]: stateRender
       });
     });
   }, []);
-  const removeCoAgentStateRender = (0, import_react6.useCallback)((id) => {
+  const removeCoAgentStateRender = (0, import_react8.useCallback)((id) => {
     setCoAgentStateRenders((prevPoints) => {
       const newPoints = __spreadValues({}, prevPoints);
       delete newPoints[id];
       return newPoints;
     });
   }, []);
-  const getContextString = (0, import_react6.useCallback)(
+  const getContextString = (0, import_react8.useCallback)(
     (documents, categories) => {
       const documentsString = documents.map((document) => {
         return `${document.name} (${document.sourceApplication}):
@@ -438,37 +685,37 @@ ${nonDocumentStrings}`;
     },
     [printTree]
   );
-  const addContext = (0, import_react6.useCallback)(
+  const addContext = (0, import_react8.useCallback)(
     (context, parentId, categories = defaultCopilotContextCategories) => {
       return addElement(context, categories, parentId);
     },
     [addElement]
   );
-  const removeContext = (0, import_react6.useCallback)(
+  const removeContext = (0, import_react8.useCallback)(
     (id) => {
       removeElement(id);
     },
     [removeElement]
   );
-  const getFunctionCallHandler = (0, import_react6.useCallback)(
+  const getFunctionCallHandler = (0, import_react8.useCallback)(
     (customEntryPoints) => {
       return entryPointsToFunctionCallHandler(Object.values(customEntryPoints || actions));
     },
     [actions]
   );
-  const getDocumentsContext = (0, import_react6.useCallback)(
+  const getDocumentsContext = (0, import_react8.useCallback)(
     (categories) => {
       return allDocuments(categories);
     },
     [allDocuments]
   );
-  const addDocumentContext = (0, import_react6.useCallback)(
+  const addDocumentContext = (0, import_react8.useCallback)(
     (documentPointer, categories = defaultCopilotContextCategories) => {
       return addDocument(documentPointer, categories);
     },
     [addDocument]
   );
-  const removeDocumentContext = (0, import_react6.useCallback)(
+  const removeDocumentContext = (0, import_react8.useCallback)(
     (documentId) => {
       removeDocument(documentId);
     },
@@ -481,7 +728,7 @@ ${nonDocumentStrings}`;
       );
     }
   }
-  const copilotApiConfig = (0, import_react6.useMemo)(() => {
+  const copilotApiConfig = (0, import_react8.useMemo)(() => {
     var _a2, _b2;
     let cloud = void 0;
     if (props.publicApiKey) {
@@ -516,7 +763,14 @@ ${nonDocumentStrings}`;
     props.credentials,
     props.cloudRestrictToTopic
   ]);
-  const [chatSuggestionConfiguration, setChatSuggestionConfiguration] = (0, import_react6.useState)({});
+  const headers = __spreadValues(__spreadValues({}, copilotApiConfig.headers || {}), copilotApiConfig.publicApiKey ? { [import_shared3.COPILOT_CLOUD_PUBLIC_API_KEY_HEADER]: copilotApiConfig.publicApiKey } : {});
+  const runtimeClient = useCopilotRuntimeClient({
+    url: copilotApiConfig.chatApiEndpoint,
+    publicApiKey: copilotApiConfig.publicApiKey,
+    headers,
+    credentials: copilotApiConfig.credentials
+  });
+  const [chatSuggestionConfiguration, setChatSuggestionConfiguration] = (0, import_react8.useState)({});
   const addChatSuggestionConfiguration = (id, suggestion) => {
     setChatSuggestionConfiguration((prev) => __spreadProps(__spreadValues({}, prev), { [id]: suggestion }));
   };
@@ -526,15 +780,16 @@ ${nonDocumentStrings}`;
       return rest;
     });
   };
-  const [coagentStates, setCoagentStates] = (0, import_react6.useState)({});
+  const [coagentStates, setCoagentStates] = (0, import_react8.useState)({});
   let initialAgentSession = null;
   if (props.agent) {
     initialAgentSession = {
       agentName: props.agent
     };
   }
-  const [agentSession, setAgentSession] = (0, import_react6.useState)(initialAgentSession);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  const [agentSession, setAgentSession] = (0, import_react8.useState)(initialAgentSession);
+  const showDevConsole = props.showDevConsole === void 0 ? "auto" : props.showDevConsole;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     CopilotContext.Provider,
     {
       value: {
@@ -560,13 +815,14 @@ ${nonDocumentStrings}`;
         removeChatSuggestionConfiguration,
         chatInstructions,
         setChatInstructions,
-        showDevConsole: props.showDevConsole === void 0 ? "auto" : props.showDevConsole,
+        showDevConsole,
         coagentStates,
         setCoagentStates,
         agentSession,
-        setAgentSession
+        setAgentSession,
+        runtimeClient
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CopilotMessages, { children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CopilotMessages, { children })
     }
   );
 }
@@ -599,6 +855,7 @@ function entryPointsToFunctionCallHandler(actions) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CopilotKit,
+  CopilotKitInternal,
   defaultCopilotContextCategories
 });
 //# sourceMappingURL=copilotkit.js.map