@copilotkit/react-core 1.10.0-next.3 → 1.10.0-next.4

package/dist/components/copilot-provider/index.mjs

@@ -1,20 +1,20 @@
 import {
   CopilotKit,
   defaultCopilotContextCategories
-} from "../../chunk-OMVNJ7S3.mjs";
-import "../../chunk-PYULBXCD.mjs";
-import "../../chunk-SGF6C7I6.mjs";
+} from "../../chunk-L7CWMU4O.mjs";
+import "../../chunk-JLQZVKFX.mjs";
+import "../../chunk-ZTZJIDRJ.mjs";
 import "../../chunk-2IDV5OHF.mjs";
 import "../../chunk-PMAFHQ7P.mjs";
 import "../../chunk-5FHSUKQL.mjs";
 import "../../chunk-RKTVJRK7.mjs";
-import "../../chunk-JWAXDYOW.mjs";
-import "../../chunk-GFJW4RIM.mjs";
-import "../../chunk-3OQM3NEK.mjs";
+import "../../chunk-FAUNHSQU.mjs";
+import "../../chunk-ICIK2BSB.mjs";
+import "../../chunk-N4WEHORG.mjs";
 import "../../chunk-O7ARI5CV.mjs";
-import "../../chunk-YAF2LATQ.mjs";
-import "../../chunk-57K2ZJ5F.mjs";
-import "../../chunk-XGRBCWK6.mjs";
+import "../../chunk-EFL5OBKN.mjs";
+import "../../chunk-AWFAFFO5.mjs";
+import "../../chunk-47GMU44Z.mjs";
 import "../../chunk-DCTJZ742.mjs";
 import "../../chunk-SKC7AJIV.mjs";
 export {

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

@@ -114,345 +114,199 @@ var StatusChecker = class {
 // src/components/usage-banner.tsx
 var import_shared2 = require("@copilotkit/shared");
 var import_jsx_runtime = require("react/jsx-runtime");
-var defaultIcons = {
-  [import_shared2.Severity.CRITICAL]: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "svg",
-    {
-      viewBox: "0 0 24 24",
-      width: "16",
-      height: "16",
-      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: "15", y1: "9", x2: "9", y2: "15" }),
-        /* @__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: "16",
-      height: "16",
-      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: "16",
-      height: "16",
-      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.CRITICAL,
   message = "",
-  icon,
   onClose,
   actions
 }) {
   if (!message || !severity) {
     return null;
   }
-  const parseMessage = (rawMessage) => {
-    if (rawMessage.toLowerCase().includes("authentication") || rawMessage.toLowerCase().includes("api key")) {
-      return "Authentication failed. Please check your API key.";
-    }
-    if (rawMessage.toLowerCase().includes("rate limit")) {
-      return "Rate limit exceeded. Please try again later.";
-    }
-    if (rawMessage.toLowerCase().includes("checkpointer")) {
-      return "Agent configuration error. Please check your setup.";
-    }
-    let cleanMessage2 = rawMessage;
-    cleanMessage2 = cleanMessage2.split(" - ")[0];
-    cleanMessage2 = cleanMessage2.split(": Error code")[0];
-    cleanMessage2 = cleanMessage2.split(": 401")[0];
-    cleanMessage2 = cleanMessage2.split(": 403")[0];
-    cleanMessage2 = cleanMessage2.split(": 404")[0];
-    cleanMessage2 = cleanMessage2.split(": 500")[0];
-    cleanMessage2 = cleanMessage2.replace(/See more:.*$/g, "").trim();
-    if (cleanMessage2.includes("{") || cleanMessage2.includes("'") || cleanMessage2.length > 60) {
-      return "Configuration error. Please check your setup.";
-    }
-    return cleanMessage2 || "An error occurred. Please check your configuration.";
-  };
-  const cleanMessage = parseMessage(message);
-  const Icon = icon || defaultIcons[severity];
-  const themeConfigs = {
+  const themes = {
     [import_shared2.Severity.INFO]: {
-      bg: "rgba(239, 246, 255, 0.95)",
-      border: "#93c5fd",
-      text: "#1e40af",
-      icon: "#3b82f6",
-      primaryBtn: "#3b82f6",
-      primaryBtnHover: "#2563eb"
+      bg: "#f8fafc",
+      border: "#e2e8f0",
+      text: "#475569",
+      accent: "#3b82f6"
     },
     [import_shared2.Severity.WARNING]: {
-      bg: "rgba(255, 251, 235, 0.95)",
+      bg: "#fffbeb",
       border: "#fbbf24",
       text: "#92400e",
-      icon: "#f59e0b",
-      primaryBtn: "#f59e0b",
-      primaryBtnHover: "#d97706"
+      accent: "#f59e0b"
     },
     [import_shared2.Severity.CRITICAL]: {
-      bg: "rgba(254, 242, 242, 0.95)",
-      border: "#f87171",
-      text: "#991b1b",
-      icon: "#ef4444",
-      primaryBtn: "#ef4444",
-      primaryBtnHover: "#dc2626"
+      bg: "#fef2f2",
+      border: "#fecaca",
+      text: "#dc2626",
+      accent: "#ef4444"
     }
   };
-  const themeConfig = themeConfigs[severity] || themeConfigs[import_shared2.Severity.CRITICAL];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
-    {
-      style: {
-        position: "fixed",
-        bottom: "24px",
-        left: "50%",
-        transform: "translateX(-50%)",
-        width: "400px",
-        maxWidth: "90vw",
-        zIndex: 1e4,
-        animation: "bannerSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1)"
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
-          @keyframes bannerSlideIn {
-            from {
-              opacity: 0;
-              transform: translateX(-50%) translateY(20px);
-              scale: 0.95;
-            }
-            to {
-              opacity: 1;
-              transform: translateX(-50%) translateY(0);
-              scale: 1;
-            }
+  const theme = themes[severity];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+          @keyframes slideUp {
+            from { opacity: 0; transform: translateX(-50%) translateY(8px); }
+            to { opacity: 1; transform: translateX(-50%) translateY(0); }
           }
-        ` }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "div",
-          {
-            style: {
-              borderRadius: "12px",
-              border: `1px solid ${themeConfig.border}`,
-              background: themeConfig.bg,
-              padding: "14px",
-              boxShadow: "0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08)",
-              position: "relative",
-              backdropFilter: "blur(12px)",
-              WebkitBackdropFilter: "blur(12px)",
-              boxSizing: "border-box",
-              overflow: "hidden"
-            },
-            children: [
-              onClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "button",
-                {
-                  onClick: onClose,
-                  style: {
-                    position: "absolute",
-                    top: "8px",
-                    right: "8px",
-                    background: "rgba(255, 255, 255, 0.9)",
-                    border: "none",
-                    color: themeConfig.text,
-                    cursor: "pointer",
-                    fontSize: "16px",
-                    lineHeight: "1",
-                    padding: "4px",
-                    borderRadius: "4px",
-                    width: "20px",
-                    height: "20px",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center"
-                  },
-                  title: "Close",
-                  children: "\xD7"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "div",
-                {
-                  style: {
-                    fontSize: "14px",
-                    fontWeight: 500,
-                    color: themeConfig.text,
-                    lineHeight: "1.4",
-                    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
-                    paddingRight: onClose ? "30px" : "0",
-                    marginBottom: actions ? "12px" : "0",
-                    wordBreak: "break-word",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    display: "-webkit-box",
-                    WebkitLineClamp: 2,
-                    WebkitBoxOrient: "vertical"
-                  },
-                  children: cleanMessage
-                }
-              ),
-              actions && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    gap: "8px",
-                    flexWrap: "wrap"
-                  },
-                  children: [
-                    actions.secondary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "button",
-                      {
-                        onClick: actions.secondary.onClick,
-                        style: {
-                          borderRadius: "8px",
-                          padding: "6px 12px",
-                          fontSize: "13px",
-                          fontWeight: 500,
-                          color: themeConfig.text,
-                          backgroundColor: "rgba(255, 255, 255, 0.9)",
-                          border: `1px 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)";
-                        },
-                        onMouseOut: (e) => {
-                          e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.9)";
-                          e.currentTarget.style.transform = "translateY(0)";
-                        },
-                        children: actions.secondary.label
-                      }
-                    ),
-                    actions.primary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "button",
-                      {
-                        onClick: actions.primary.onClick,
-                        style: {
-                          borderRadius: "8px",
-                          padding: "6px 12px",
-                          fontSize: "13px",
-                          fontWeight: 600,
-                          color: "#fff",
-                          backgroundColor: themeConfig.primaryBtn,
-                          border: "none",
-                          cursor: "pointer",
-                          transition: "all 0.2s ease",
-                          boxShadow: "0 2px 8px 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 4px 12px 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 2px 8px rgba(0, 0, 0, 0.15)";
-                        },
-                        children: actions.primary.label
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
+          
+          .usage-banner {
+            position: fixed;
+            bottom: 24px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: min(600px, calc(100vw - 32px));
+            z-index: 10000;
+            animation: slideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
           }
-        )
-      ]
-    }
-  );
-}
-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"
+          
+          .banner-content {
+            background: linear-gradient(135deg, ${theme.bg} 0%, ${theme.bg}f5 100%);
+            border: 1px solid ${theme.border};
+            border-radius: 12px;
+            padding: 18px 20px;
+            box-shadow: 
+              0 4px 24px rgba(0, 0, 0, 0.08),
+              0 2px 8px rgba(0, 0, 0, 0.04),
+              inset 0 1px 0 rgba(255, 255, 255, 0.7);
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+            backdrop-filter: blur(12px);
+            position: relative;
+            overflow: hidden;
+          }
+          
+          .banner-content::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, ${theme.accent}40, transparent);
           }
-        };
-      case import_shared2.ERROR_NAMES.UPGRADE_REQUIRED_ERROR:
-        return {
-          primary: {
-            label: "Upgrade",
-            onClick: () => window.location.href = "https://copilotkit.ai/"
+          
+          .banner-message {
+            color: ${theme.text};
+            font-size: 14px;
+            line-height: 1.5;
+            font-weight: 500;
+            flex: 1;
+            letter-spacing: -0.01em;
           }
-        };
-      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");
+          
+          .close-btn {
+            background: rgba(0, 0, 0, 0.05);
+            border: none;
+            color: ${theme.text};
+            cursor: pointer;
+            padding: 0;
+            border-radius: 6px;
+            opacity: 0.6;
+            transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+            font-size: 14px;
+            line-height: 1;
+            flex-shrink: 0;
+            width: 24px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          
+          .close-btn:hover {
+            opacity: 1;
+            background: rgba(0, 0, 0, 0.08);
+            transform: scale(1.05);
+          }
+          
+          .btn-primary {
+            background: linear-gradient(135deg, ${theme.accent} 0%, ${theme.accent}e6 100%);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            padding: 10px 18px;
+            font-size: 13px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+            font-family: inherit;
+            flex-shrink: 0;
+            box-shadow: 
+              0 2px 8px ${theme.accent}30,
+              inset 0 1px 0 rgba(255, 255, 255, 0.2);
+            letter-spacing: -0.01em;
+          }
+          
+          .btn-primary:hover {
+            transform: translateY(-1px) scale(1.02);
+            box-shadow: 
+              0 4px 12px ${theme.accent}40,
+              inset 0 1px 0 rgba(255, 255, 255, 0.25);
+          }
+          
+          .btn-primary:active {
+            transform: translateY(0) scale(0.98);
+            transition: all 0.08s cubic-bezier(0.16, 1, 0.3, 1);
+          }
+          
+          @media (max-width: 640px) {
+            .usage-banner {
+              width: calc(100vw - 24px);
+            }
+            
+            .banner-content {
+              padding: 16px;
+              gap: 12px;
+            }
+            
+            .banner-message {
+              font-size: 13px;
+              line-height: 1.45;
+            }
+            
+            .btn-primary {
+              padding: 8px 14px;
+              font-size: 12px;
+            }
+            
+            .close-btn {
+              width: 22px;
+              height: 22px;
+              font-size: 12px;
             }
           }
-        };
-      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)
-    }
-  );
+        ` }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usage-banner", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "banner-content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "banner-message", children: message }),
+      (actions == null ? void 0 : actions.primary) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "btn-primary", onClick: actions.primary.onClick, children: actions.primary.label }),
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "close-btn", onClick: onClose, title: "Close", children: "\xD7" })
+    ] }) })
+  ] });
 }
+var getErrorActions = (error) => {
+  switch (error.code) {
+    case import_shared2.CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR:
+      return {
+        primary: {
+          label: "Get Free API Key",
+          onClick: () => window.open("https://cloud.copilotkit.ai", "_blank", "noopener,noreferrer")
+        }
+      };
+    case import_shared2.CopilotKitErrorCode.UPGRADE_REQUIRED_ERROR:
+      return {
+        primary: {
+          label: "Upgrade",
+          onClick: () => window.open("https://cloud.copilotkit.ai", "_blank", "noopener,noreferrer")
+        }
+      };
+    default:
+      return void 0;
+  }
+};
 
 // src/components/error-boundary/error-utils.tsx
 var import_react2 = require("react");
@@ -603,22 +457,17 @@ var CopilotErrorBoundary = class extends import_react3.default.Component {
     console.error("CopilotKit Error:", error, errorInfo);
   }
   render() {
-    var _a, _b;
+    var _a, _b, _c, _d;
     if (this.state.hasError) {
       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,
           this.props.showUsageBanner && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             UsageBanner,
             {
-              severity: (_a = this.state.status) == null ? void 0 : _a.severity,
-              message: (_b = this.state.status) == null ? void 0 : _b.message
+              severity: (_b = (_a = this.state.status) == null ? void 0 : _a.severity) != null ? _b : this.state.error.severity,
+              message: (_d = (_c = this.state.status) == null ? void 0 : _c.message) != null ? _d : this.state.error.message,
+              actions: getErrorActions(this.state.error)
             }
           )
         ] });