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

package/dist/components/error-boundary/error-boundary.js

@@ -55,7 +55,7 @@ __export(error_boundary_exports, {
 });
 module.exports = __toCommonJS(error_boundary_exports);
 var import_react3 = __toESM(require("react"));
-var import_shared3 = require("@copilotkit/shared");
+var import_shared4 = require("@copilotkit/shared");
 
 // src/lib/status-checker.ts
 var import_shared = require("@copilotkit/shared");
@@ -115,14 +115,14 @@ var StatusChecker = class {
 var import_shared2 = require("@copilotkit/shared");
 var import_jsx_runtime = require("react/jsx-runtime");
 var defaultIcons = {
-  [import_shared2.Severity.Error]: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  [import_shared2.Severity.CRITICAL]: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "svg",
     {
       viewBox: "0 0 24 24",
-      width: "20",
-      height: "20",
+      width: "18",
+      height: "18",
       stroke: "currentColor",
-      strokeWidth: "2",
+      strokeWidth: "2.5",
       fill: "none",
       strokeLinecap: "round",
       strokeLinejoin: "round",
@@ -132,179 +132,337 @@ var defaultIcons = {
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
       ]
     }
+  ),
+  [import_shared2.Severity.WARNING]: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "18",
+      height: "18",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      fill: "none",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+      ]
+    }
+  ),
+  [import_shared2.Severity.INFO]: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "18",
+      height: "18",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      fill: "none",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+      ]
+    }
   )
 };
 function UsageBanner({
-  severity = import_shared2.Severity.Error,
+  severity = import_shared2.Severity.CRITICAL,
   message = "",
   icon,
+  onClose,
   actions
 }) {
   if (!message || !severity) {
     return null;
   }
+  const parseMessage = (rawMessage) => {
+    const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+    const matches = Array.from(rawMessage.matchAll(linkRegex));
+    if (matches.length > 0) {
+      let cleanMessage2 = rawMessage.replace(/\.\s*See more:\s*\[([^\]]+)\]\(([^)]+)\)/g, ".").replace(/See more:\s*\[([^\]]+)\]\(([^)]+)\)/g, "").trim();
+      return cleanMessage2;
+    }
+    return rawMessage;
+  };
+  const cleanMessage = parseMessage(message);
   const Icon = icon || defaultIcons[severity];
-  const bgColor = {
-    info: "#dbeafe",
-    warning: "#fef3c7",
-    error: "#fee2e2"
-  }[severity];
-  const textColor = {
-    info: "#1e40af",
-    warning: "#854d0e",
-    error: "#991b1b"
-  }[severity];
-  const iconColor = {
-    info: "#3b82f6",
-    warning: "#eab308",
-    error: "#ef4444"
-  }[severity];
-  const primaryButtonColor = {
-    info: "#3b82f6",
-    warning: "#eab308",
-    error: "#ef4444"
-  }[severity];
-  const primaryButtonHoverColor = {
-    info: "#2563eb",
-    warning: "#ca8a04",
-    error: "#dc2626"
-  }[severity];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const themeConfigs = {
+    [import_shared2.Severity.INFO]: {
+      bg: "linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%)",
+      border: "#93c5fd",
+      text: "#1e40af",
+      icon: "#3b82f6",
+      primaryBtn: "#3b82f6",
+      primaryBtnHover: "#2563eb"
+    },
+    [import_shared2.Severity.WARNING]: {
+      bg: "linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%)",
+      border: "#fbbf24",
+      text: "#92400e",
+      icon: "#f59e0b",
+      primaryBtn: "#f59e0b",
+      primaryBtnHover: "#d97706"
+    },
+    [import_shared2.Severity.CRITICAL]: {
+      bg: "linear-gradient(135deg, #fef2f2 0%, #fecaca 100%)",
+      border: "#f87171",
+      text: "#991b1b",
+      icon: "#ef4444",
+      primaryBtn: "#ef4444",
+      primaryBtnHover: "#dc2626"
+    }
+  };
+  const themeConfig = themeConfigs[severity] || themeConfigs[import_shared2.Severity.CRITICAL];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       style: {
         position: "fixed",
-        bottom: "16px",
+        bottom: "20px",
         left: "50%",
         transform: "translateX(-50%)",
-        maxWidth: "90%",
-        zIndex: 9999
+        maxWidth: "min(95vw, 680px)",
+        width: "100%",
+        zIndex: 1e4,
+        animation: "bannerSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1)"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "div",
-        {
-          style: {
-            display: "flex",
-            flexWrap: "wrap",
-            alignItems: "center",
-            gap: "12px",
-            borderRadius: "9999px",
-            border: "1px solid #e5e7eb",
-            backgroundColor: bgColor,
-            padding: "8px 16px",
-            boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)"
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: iconColor }, children: Icon }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "span",
-              {
-                style: {
-                  flex: 1,
-                  fontSize: "14px",
-                  fontWeight: 500,
-                  color: textColor,
-                  whiteSpace: "normal",
-                  wordBreak: "break-word"
-                },
-                children: message
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  gap: "8px",
-                  flexWrap: "wrap"
-                },
-                children: [
-                  (actions == null ? void 0 : actions.secondary) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    "button",
-                    {
-                      onClick: actions.secondary.onClick,
-                      style: {
-                        borderRadius: "9999px",
-                        padding: "4px 12px",
-                        fontSize: "14px",
-                        fontWeight: 500,
-                        color: textColor,
-                        backgroundColor: "transparent",
-                        border: "none",
-                        cursor: "pointer",
-                        transition: "background-color 0.2s"
-                      },
-                      onMouseOver: (e) => e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.5)",
-                      onMouseOut: (e) => e.currentTarget.style.backgroundColor = "transparent",
-                      children: actions.secondary.label
-                    }
-                  ),
-                  (actions == null ? void 0 : actions.primary) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    "button",
-                    {
-                      onClick: actions.primary.onClick,
-                      style: {
-                        borderRadius: "9999px",
-                        padding: "4px 12px",
-                        fontSize: "14px",
-                        fontWeight: 500,
-                        color: "#fff",
-                        backgroundColor: primaryButtonColor,
-                        border: "none",
-                        cursor: "pointer",
-                        transition: "background-color 0.2s"
-                      },
-                      onMouseOver: (e) => e.currentTarget.style.backgroundColor = primaryButtonHoverColor,
-                      onMouseOut: (e) => e.currentTarget.style.backgroundColor = primaryButtonColor,
-                      children: actions.primary.label
-                    }
-                  )
-                ]
-              }
-            )
-          ]
-        }
-      )
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+          @keyframes bannerSlideIn {
+            from {
+              opacity: 0;
+              transform: translateX(-50%) translateY(10px);
+            }
+            to {
+              opacity: 1;
+              transform: translateX(-50%) translateY(0);
+            }
+          }
+        ` }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "flex-start",
+              gap: "14px",
+              borderRadius: "16px",
+              border: `1px solid ${themeConfig.border}`,
+              background: themeConfig.bg,
+              padding: "18px 20px",
+              boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
+              position: "relative",
+              backdropFilter: "blur(10px)",
+              WebkitBackdropFilter: "blur(10px)"
+            },
+            children: [
+              onClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  onClick: onClose,
+                  style: {
+                    position: "absolute",
+                    top: "12px",
+                    right: "12px",
+                    background: "rgba(255, 255, 255, 0.8)",
+                    border: "none",
+                    color: themeConfig.text,
+                    cursor: "pointer",
+                    fontSize: "18px",
+                    lineHeight: "1",
+                    padding: "6px",
+                    borderRadius: "8px",
+                    opacity: 0.7,
+                    transition: "all 0.2s ease",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "28px",
+                    height: "28px"
+                  },
+                  title: "Close",
+                  onMouseOver: (e) => {
+                    e.currentTarget.style.opacity = "1";
+                    e.currentTarget.style.background = "rgba(255, 255, 255, 1)";
+                    e.currentTarget.style.transform = "scale(1.05)";
+                  },
+                  onMouseOut: (e) => {
+                    e.currentTarget.style.opacity = "0.7";
+                    e.currentTarget.style.background = "rgba(255, 255, 255, 0.8)";
+                    e.currentTarget.style.transform = "scale(1)";
+                  },
+                  children: "\xD7"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  style: {
+                    color: themeConfig.icon,
+                    flexShrink: 0,
+                    marginTop: "1px",
+                    padding: "6px",
+                    borderRadius: "10px",
+                    background: "rgba(255, 255, 255, 0.7)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: Icon
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1, paddingRight: onClose ? "40px" : "0" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "15px",
+                      fontWeight: 600,
+                      color: themeConfig.text,
+                      lineHeight: "1.5",
+                      marginBottom: actions ? "12px" : "0",
+                      fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+                    },
+                    children: cleanMessage
+                  }
+                ),
+                actions && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      gap: "10px",
+                      flexWrap: "wrap"
+                    },
+                    children: [
+                      actions.secondary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "button",
+                        {
+                          onClick: actions.secondary.onClick,
+                          style: {
+                            borderRadius: "10px",
+                            padding: "8px 16px",
+                            fontSize: "14px",
+                            fontWeight: 500,
+                            color: themeConfig.text,
+                            backgroundColor: "rgba(255, 255, 255, 0.8)",
+                            border: `1.5px solid ${themeConfig.border}`,
+                            cursor: "pointer",
+                            transition: "all 0.2s ease",
+                            fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+                          },
+                          onMouseOver: (e) => {
+                            e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 1)";
+                            e.currentTarget.style.transform = "translateY(-1px)";
+                            e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.15)";
+                          },
+                          onMouseOut: (e) => {
+                            e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.8)";
+                            e.currentTarget.style.transform = "translateY(0)";
+                            e.currentTarget.style.boxShadow = "none";
+                          },
+                          children: actions.secondary.label
+                        }
+                      ),
+                      actions.primary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "button",
+                        {
+                          onClick: actions.primary.onClick,
+                          style: {
+                            borderRadius: "10px",
+                            padding: "8px 16px",
+                            fontSize: "14px",
+                            fontWeight: 600,
+                            color: "#fff",
+                            backgroundColor: themeConfig.primaryBtn,
+                            border: "none",
+                            cursor: "pointer",
+                            transition: "all 0.2s ease",
+                            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+                            fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+                          },
+                          onMouseOver: (e) => {
+                            e.currentTarget.style.backgroundColor = themeConfig.primaryBtnHover;
+                            e.currentTarget.style.transform = "translateY(-1px)";
+                            e.currentTarget.style.boxShadow = "0 6px 16px rgba(0, 0, 0, 0.2)";
+                          },
+                          onMouseOut: (e) => {
+                            e.currentTarget.style.backgroundColor = themeConfig.primaryBtn;
+                            e.currentTarget.style.transform = "translateY(0)";
+                            e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.15)";
+                          },
+                          children: actions.primary.label
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
     }
   );
 }
-function renderCopilotKitUsage(error) {
-  switch (error.name) {
-    case import_shared2.ERROR_NAMES.CONFIGURATION_ERROR:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsageBanner, { severity: error.severity, message: error.message });
-    case import_shared2.ERROR_NAMES.MISSING_PUBLIC_API_KEY_ERROR:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        UsageBanner,
-        {
-          severity: error.severity,
-          message: error.message,
-          actions: {
-            primary: {
-              label: "Sign In",
-              onClick: () => {
-                window.location.href = "https://cloud.copilotkit.ai";
-              }
-            }
+function renderCopilotKitUsage(error, onClose) {
+  if (error.visibility !== import_shared2.ErrorVisibility.BANNER) {
+    return null;
+  }
+  const extractUrlFromMessage = (message) => {
+    const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+    const match = linkRegex.exec(message);
+    return match ? match[2] : null;
+  };
+  const getErrorActions = (error2) => {
+    switch (error2.name) {
+      case import_shared2.ERROR_NAMES.MISSING_PUBLIC_API_KEY_ERROR:
+        return {
+          primary: {
+            label: "Sign In",
+            onClick: () => window.location.href = "https://cloud.copilotkit.ai"
           }
-        }
-      );
-    case import_shared2.ERROR_NAMES.UPGRADE_REQUIRED_ERROR:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        UsageBanner,
-        {
-          severity: error.severity,
-          message: error.message,
-          actions: {
-            primary: {
-              label: "Upgrade",
-              onClick: () => {
-                window.location.href = "https://copilotkit.ai/";
-              }
+        };
+      case import_shared2.ERROR_NAMES.UPGRADE_REQUIRED_ERROR:
+        return {
+          primary: {
+            label: "Upgrade",
+            onClick: () => window.location.href = "https://copilotkit.ai/"
+          }
+        };
+      case import_shared2.ERROR_NAMES.COPILOT_API_DISCOVERY_ERROR:
+      case import_shared2.ERROR_NAMES.COPILOT_REMOTE_ENDPOINT_DISCOVERY_ERROR:
+      case import_shared2.ERROR_NAMES.COPILOT_KIT_AGENT_DISCOVERY_ERROR:
+        return {
+          primary: {
+            label: "View Docs",
+            onClick: () => {
+              var _a;
+              const urlFromMessage = extractUrlFromMessage(error2.message);
+              const urlFromExtensions = (_a = error2.extensions) == null ? void 0 : _a.troubleshootingUrl;
+              const url = urlFromMessage || urlFromExtensions || "https://docs.copilotkit.ai/troubleshooting/common-issues";
+              window.open(url, "_blank");
             }
           }
-        }
-      );
-  }
+        };
+      default:
+        return void 0;
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    UsageBanner,
+    {
+      severity: error.severity || import_shared2.Severity.CRITICAL,
+      message: error.message,
+      onClose,
+      actions: getErrorActions(error)
+    }
+  );
 }
 
 // src/components/error-boundary/error-utils.tsx
@@ -312,6 +470,7 @@ var import_react2 = require("react");
 
 // src/components/toast/toast-provider.tsx
 var import_react = require("react");
+var import_shared3 = require("@copilotkit/shared");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var ToastContext = (0, import_react.createContext)(void 0);
 function useToast() {
@@ -375,7 +534,7 @@ function ErrorToast({ errors }) {
                 marginBottom: 4
               },
               children: [
-                "Copilot Cloud Error:",
+                "Copilot Runtime Error:",
                 " ",
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontFamily: "monospace", fontWeight: "normal" }, children: code })
               ]
@@ -423,7 +582,6 @@ function useErrorToast() {
 }
 
 // src/components/error-boundary/error-boundary.tsx
-var import_shared4 = require("@copilotkit/shared");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var statusChecker = new StatusChecker();
 var CopilotErrorBoundary = class extends import_react3.default.Component {
@@ -458,9 +616,12 @@ var CopilotErrorBoundary = class extends import_react3.default.Component {
   render() {
     var _a, _b;
     if (this.state.hasError) {
-      if (this.state.error instanceof import_shared3.CopilotKitError) {
-        if (import_shared4.COPILOT_CLOUD_ERROR_NAMES.includes(this.state.error.name)) {
-          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorToast2, { error: this.state.error, children: renderCopilotKitUsage(this.state.error) });
+      if (this.state.error instanceof import_shared4.CopilotKitError) {
+        if (this.state.error.visibility === import_shared4.ErrorVisibility.BANNER) {
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorToast2, { error: this.state.error, children: renderCopilotKitUsage(
+            this.state.error,
+            () => this.setState({ hasError: false, error: void 0 })
+          ) });
         }
         return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
           this.props.children,