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

package/dist/components/usage-banner.js

@@ -21,340 +21,209 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var usage_banner_exports = {};
 __export(usage_banner_exports, {
   UsageBanner: () => UsageBanner,
+  getErrorActions: () => getErrorActions,
   renderCopilotKitUsage: () => renderCopilotKitUsage
 });
 module.exports = __toCommonJS(usage_banner_exports);
 var import_shared = require("@copilotkit/shared");
 var import_jsx_runtime = require("react/jsx-runtime");
-var defaultIcons = {
-  [import_shared.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_shared.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_shared.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_shared.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_shared.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_shared.Severity.WARNING]: {
-      bg: "rgba(255, 251, 235, 0.95)",
+      bg: "#fffbeb",
       border: "#fbbf24",
       text: "#92400e",
-      icon: "#f59e0b",
-      primaryBtn: "#f59e0b",
-      primaryBtnHover: "#d97706"
+      accent: "#f59e0b"
     },
     [import_shared.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_shared.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;
+  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); }
+          }
+          
+          .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);
+          }
+          
+          .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);
+          }
+          
+          .banner-message {
+            color: ${theme.text};
+            font-size: 14px;
+            line-height: 1.5;
+            font-weight: 500;
+            flex: 1;
+            letter-spacing: -0.01em;
+          }
+          
+          .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;
             }
-            to {
-              opacity: 1;
-              transform: translateX(-50%) translateY(0);
-              scale: 1;
+            
+            .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;
             }
           }
         ` }),
-        /* @__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
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
+    /* @__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_shared.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_shared.CopilotKitErrorCode.UPGRADE_REQUIRED_ERROR:
+      return {
+        primary: {
+          label: "Upgrade",
+          onClick: () => window.open("https://cloud.copilotkit.ai", "_blank", "noopener,noreferrer")
+        }
+      };
+    default:
+      return void 0;
+  }
+};
 function renderCopilotKitUsage(error, onClose) {
   if (error.visibility !== import_shared.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_shared.ERROR_NAMES.MISSING_PUBLIC_API_KEY_ERROR:
-        return {
-          primary: {
-            label: "Sign In",
-            onClick: () => window.location.href = "https://cloud.copilotkit.ai"
-          }
-        };
-      case import_shared.ERROR_NAMES.UPGRADE_REQUIRED_ERROR:
-        return {
-          primary: {
-            label: "Upgrade",
-            onClick: () => window.location.href = "https://copilotkit.ai/"
-          }
-        };
-      case import_shared.ERROR_NAMES.COPILOT_API_DISCOVERY_ERROR:
-      case import_shared.ERROR_NAMES.COPILOT_REMOTE_ENDPOINT_DISCOVERY_ERROR:
-      case import_shared.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,
     {
@@ -368,6 +237,7 @@ function renderCopilotKitUsage(error, onClose) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   UsageBanner,
+  getErrorActions,
   renderCopilotKitUsage
 });
 //# sourceMappingURL=usage-banner.js.map

package/dist/components/usage-banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/usage-banner.tsx"],"sourcesContent":["import { Severity, CopilotKitError, ERROR_NAMES, ErrorVisibility } from \"@copilotkit/shared\";\n\ninterface UsageBannerProps {\n  severity?: Severity;\n  message?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  actions?: {\n    primary?: {\n      label: string;\n      onClick: () => void;\n    };\n    secondary?: {\n      label: string;\n      onClick: () => void;\n    };\n  };\n}\n\nconst defaultIcons: Record<Severity, JSX.Element> = {\n  [Severity.CRITICAL]: (\n    <svg\n      viewBox=\"0 0 24 24\"\n      width=\"16\"\n      height=\"16\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.5\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\" />\n      <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\" />\n    </svg>\n  ),\n  [Severity.WARNING]: (\n    <svg\n      viewBox=\"0 0 24 24\"\n      width=\"16\"\n      height=\"16\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.5\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <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\" />\n      <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\" />\n      <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\" />\n    </svg>\n  ),\n  [Severity.INFO]: (\n    <svg\n      viewBox=\"0 0 24 24\"\n      width=\"16\"\n      height=\"16\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.5\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\" />\n      <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\" />\n    </svg>\n  ),\n};\n\nexport function UsageBanner({\n  severity = Severity.CRITICAL,\n  message = \"\",\n  icon,\n  onClose,\n  actions,\n}: UsageBannerProps) {\n  if (!message || !severity) {\n    return null;\n  }\n\n  // Enhanced message parsing to clean up technical details\n  const parseMessage = (rawMessage: string) => {\n    // console.log(\"Raw message:\", rawMessage); // Debug\n\n    // Super aggressive cleaning - handle common error patterns first\n    if (\n      rawMessage.toLowerCase().includes(\"authentication\") ||\n      rawMessage.toLowerCase().includes(\"api key\")\n    ) {\n      return \"Authentication failed. Please check your API key.\";\n    }\n\n    if (rawMessage.toLowerCase().includes(\"rate limit\")) {\n      return \"Rate limit exceeded. Please try again later.\";\n    }\n\n    if (rawMessage.toLowerCase().includes(\"checkpointer\")) {\n      return \"Agent configuration error. Please check your setup.\";\n    }\n\n    // For any other error, extract just the main error type\n    let cleanMessage = rawMessage;\n\n    // Remove everything after the first \" - \" or \":\" followed by technical details\n    cleanMessage = cleanMessage.split(\" - \")[0];\n    cleanMessage = cleanMessage.split(\": Error code\")[0];\n    cleanMessage = cleanMessage.split(\": 401\")[0];\n    cleanMessage = cleanMessage.split(\": 403\")[0];\n    cleanMessage = cleanMessage.split(\": 404\")[0];\n    cleanMessage = cleanMessage.split(\": 500\")[0];\n\n    // Remove \"See more\" links\n    cleanMessage = cleanMessage.replace(/See more:.*$/g, \"\").trim();\n\n    // If still too technical, just show a generic message\n    if (cleanMessage.includes(\"{\") || cleanMessage.includes(\"'\") || cleanMessage.length > 60) {\n      return \"Configuration error. Please check your setup.\";\n    }\n\n    return cleanMessage || \"An error occurred. Please check your configuration.\";\n  };\n\n  const cleanMessage = parseMessage(message);\n  const Icon = icon || defaultIcons[severity];\n\n  const themeConfigs = {\n    [Severity.INFO]: {\n      bg: \"rgba(239, 246, 255, 0.95)\",\n      border: \"#93c5fd\",\n      text: \"#1e40af\",\n      icon: \"#3b82f6\",\n      primaryBtn: \"#3b82f6\",\n      primaryBtnHover: \"#2563eb\",\n    },\n    [Severity.WARNING]: {\n      bg: \"rgba(255, 251, 235, 0.95)\",\n      border: \"#fbbf24\",\n      text: \"#92400e\",\n      icon: \"#f59e0b\",\n      primaryBtn: \"#f59e0b\",\n      primaryBtnHover: \"#d97706\",\n    },\n    [Severity.CRITICAL]: {\n      bg: \"rgba(254, 242, 242, 0.95)\",\n      border: \"#f87171\",\n      text: \"#991b1b\",\n      icon: \"#ef4444\",\n      primaryBtn: \"#ef4444\",\n      primaryBtnHover: \"#dc2626\",\n    },\n  };\n\n  const themeConfig = themeConfigs[severity] || themeConfigs[Severity.CRITICAL];\n\n  return (\n    <div\n      style={{\n        position: \"fixed\",\n        bottom: \"24px\",\n        left: \"50%\",\n        transform: \"translateX(-50%)\",\n        width: \"400px\",\n        maxWidth: \"90vw\",\n        zIndex: 10000,\n        animation: \"bannerSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1)\",\n      }}\n    >\n      <style>\n        {`\n          @keyframes bannerSlideIn {\n            from {\n              opacity: 0;\n              transform: translateX(-50%) translateY(20px);\n              scale: 0.95;\n            }\n            to {\n              opacity: 1;\n              transform: translateX(-50%) translateY(0);\n              scale: 1;\n            }\n          }\n        `}\n      </style>\n      <div\n        style={{\n          borderRadius: \"12px\",\n          border: `1px solid ${themeConfig.border}`,\n          background: themeConfig.bg,\n          padding: \"14px\",\n          boxShadow: \"0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08)\",\n          position: \"relative\",\n          backdropFilter: \"blur(12px)\",\n          WebkitBackdropFilter: \"blur(12px)\",\n          boxSizing: \"border-box\",\n          overflow: \"hidden\",\n        }}\n      >\n        {/* Close button */}\n        {onClose && (\n          <button\n            onClick={onClose}\n            style={{\n              position: \"absolute\",\n              top: \"8px\",\n              right: \"8px\",\n              background: \"rgba(255, 255, 255, 0.9)\",\n              border: \"none\",\n              color: themeConfig.text,\n              cursor: \"pointer\",\n              fontSize: \"16px\",\n              lineHeight: \"1\",\n              padding: \"4px\",\n              borderRadius: \"4px\",\n              width: \"20px\",\n              height: \"20px\",\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n            }}\n            title=\"Close\"\n          >\n            ×\n          </button>\n        )}\n\n        {/* Message */}\n        <div\n          style={{\n            fontSize: \"14px\",\n            fontWeight: 500,\n            color: themeConfig.text,\n            lineHeight: \"1.4\",\n            fontFamily: \"-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n            paddingRight: onClose ? \"30px\" : \"0\",\n            marginBottom: actions ? \"12px\" : \"0\",\n            wordBreak: \"break-word\",\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            display: \"-webkit-box\",\n            WebkitLineClamp: 2,\n            WebkitBoxOrient: \"vertical\",\n          }}\n        >\n          {cleanMessage}\n        </div>\n\n        {/* Actions */}\n        {actions && (\n          <div\n            style={{\n              display: \"flex\",\n              gap: \"8px\",\n              flexWrap: \"wrap\",\n            }}\n          >\n            {actions.secondary && (\n              <button\n                onClick={actions.secondary.onClick}\n                style={{\n                  borderRadius: \"8px\",\n                  padding: \"6px 12px\",\n                  fontSize: \"13px\",\n                  fontWeight: 500,\n                  color: themeConfig.text,\n                  backgroundColor: \"rgba(255, 255, 255, 0.9)\",\n                  border: `1px solid ${themeConfig.border}`,\n                  cursor: \"pointer\",\n                  transition: \"all 0.2s ease\",\n                  fontFamily: \"-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n                }}\n                onMouseOver={(e) => {\n                  e.currentTarget.style.backgroundColor = \"rgba(255, 255, 255, 1)\";\n                  e.currentTarget.style.transform = \"translateY(-1px)\";\n                }}\n                onMouseOut={(e) => {\n                  e.currentTarget.style.backgroundColor = \"rgba(255, 255, 255, 0.9)\";\n                  e.currentTarget.style.transform = \"translateY(0)\";\n                }}\n              >\n                {actions.secondary.label}\n              </button>\n            )}\n            {actions.primary && (\n              <button\n                onClick={actions.primary.onClick}\n                style={{\n                  borderRadius: \"8px\",\n                  padding: \"6px 12px\",\n                  fontSize: \"13px\",\n                  fontWeight: 600,\n                  color: \"#fff\",\n                  backgroundColor: themeConfig.primaryBtn,\n                  border: \"none\",\n                  cursor: \"pointer\",\n                  transition: \"all 0.2s ease\",\n                  boxShadow: \"0 2px 8px rgba(0, 0, 0, 0.15)\",\n                  fontFamily: \"-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n                }}\n                onMouseOver={(e) => {\n                  e.currentTarget.style.backgroundColor = themeConfig.primaryBtnHover;\n                  e.currentTarget.style.transform = \"translateY(-1px)\";\n                  e.currentTarget.style.boxShadow = \"0 4px 12px rgba(0, 0, 0, 0.2)\";\n                }}\n                onMouseOut={(e) => {\n                  e.currentTarget.style.backgroundColor = themeConfig.primaryBtn;\n                  e.currentTarget.style.transform = \"translateY(0)\";\n                  e.currentTarget.style.boxShadow = \"0 2px 8px rgba(0, 0, 0, 0.15)\";\n                }}\n              >\n                {actions.primary.label}\n              </button>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport function renderCopilotKitUsage(error: CopilotKitError, onClose?: () => void) {\n  // Route based on error visibility level\n  if (error.visibility !== ErrorVisibility.BANNER) {\n    return null;\n  }\n\n  // Extract URL from markdown links in the message\n  const extractUrlFromMessage = (message: string): string | null => {\n    const linkRegex = /\\[([^\\]]+)\\]\\(([^)]+)\\)/g;\n    const match = linkRegex.exec(message);\n    return match ? match[2] : null;\n  };\n\n  // Get action button based on error type\n  const getErrorActions = (error: CopilotKitError) => {\n    switch (error.name) {\n      case ERROR_NAMES.MISSING_PUBLIC_API_KEY_ERROR:\n        return {\n          primary: {\n            label: \"Sign In\",\n            onClick: () => (window.location.href = \"https://cloud.copilotkit.ai\"),\n          },\n        };\n      case ERROR_NAMES.UPGRADE_REQUIRED_ERROR:\n        return {\n          primary: {\n            label: \"Upgrade\",\n            onClick: () => (window.location.href = \"https://copilotkit.ai/\"),\n          },\n        };\n      case ERROR_NAMES.COPILOT_API_DISCOVERY_ERROR:\n      case ERROR_NAMES.COPILOT_REMOTE_ENDPOINT_DISCOVERY_ERROR:\n      case ERROR_NAMES.COPILOT_KIT_AGENT_DISCOVERY_ERROR:\n        return {\n          primary: {\n            label: \"View Docs\",\n            onClick: () => {\n              // Try to get URL from the error message first, then extensions, then default\n              const urlFromMessage = extractUrlFromMessage(error.message);\n              const urlFromExtensions = (error.extensions as any)?.troubleshootingUrl;\n              const url =\n                urlFromMessage ||\n                urlFromExtensions ||\n                \"https://docs.copilotkit.ai/troubleshooting/common-issues\";\n              window.open(url, \"_blank\");\n            },\n          },\n        };\n      default:\n        return undefined;\n    }\n  };\n\n  return (\n    <UsageBanner\n      severity={error.severity || Severity.CRITICAL}\n      message={error.message}\n      onClose={onClose}\n      actions={getErrorActions(error)}\n    />\n  );\n}\n"],"mappings":"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","names":["cleanMessage","error"]}
+{"version":3,"sources":["../../src/components/usage-banner.tsx"],"sourcesContent":["import {\n  Severity,\n  CopilotKitError,\n  ErrorVisibility,\n  CopilotKitErrorCode,\n} from \"@copilotkit/shared\";\n\ninterface UsageBannerProps {\n  severity?: Severity;\n  message?: string;\n  onClose?: () => void;\n  actions?: {\n    primary?: {\n      label: string;\n      onClick: () => void;\n    };\n    secondary?: {\n      label: string;\n      onClick: () => void;\n    };\n  };\n}\n\nexport function UsageBanner({\n  severity = Severity.CRITICAL,\n  message = \"\",\n  onClose,\n  actions,\n}: UsageBannerProps) {\n  if (!message || !severity) {\n    return null;\n  }\n\n  const themes = {\n    [Severity.INFO]: {\n      bg: \"#f8fafc\",\n      border: \"#e2e8f0\",\n      text: \"#475569\",\n      accent: \"#3b82f6\",\n    },\n    [Severity.WARNING]: {\n      bg: \"#fffbeb\",\n      border: \"#fbbf24\",\n      text: \"#92400e\",\n      accent: \"#f59e0b\",\n    },\n    [Severity.CRITICAL]: {\n      bg: \"#fef2f2\",\n      border: \"#fecaca\",\n      text: \"#dc2626\",\n      accent: \"#ef4444\",\n    },\n  };\n\n  const theme = themes[severity];\n\n  return (\n    <>\n      <style>\n        {`\n          @keyframes slideUp {\n            from { opacity: 0; transform: translateX(-50%) translateY(8px); }\n            to { opacity: 1; transform: translateX(-50%) translateY(0); }\n          }\n          \n          .usage-banner {\n            position: fixed;\n            bottom: 24px;\n            left: 50%;\n            transform: translateX(-50%);\n            width: min(600px, calc(100vw - 32px));\n            z-index: 10000;\n            animation: slideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);\n          }\n          \n          .banner-content {\n            background: linear-gradient(135deg, ${theme.bg} 0%, ${theme.bg}f5 100%);\n            border: 1px solid ${theme.border};\n            border-radius: 12px;\n            padding: 18px 20px;\n            box-shadow: \n              0 4px 24px rgba(0, 0, 0, 0.08),\n              0 2px 8px rgba(0, 0, 0, 0.04),\n              inset 0 1px 0 rgba(255, 255, 255, 0.7);\n            display: flex;\n            align-items: center;\n            gap: 16px;\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n            backdrop-filter: blur(12px);\n            position: relative;\n            overflow: hidden;\n          }\n          \n          .banner-content::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            height: 1px;\n            background: linear-gradient(90deg, transparent, ${theme.accent}40, transparent);\n          }\n          \n          .banner-message {\n            color: ${theme.text};\n            font-size: 14px;\n            line-height: 1.5;\n            font-weight: 500;\n            flex: 1;\n            letter-spacing: -0.01em;\n          }\n          \n          .close-btn {\n            background: rgba(0, 0, 0, 0.05);\n            border: none;\n            color: ${theme.text};\n            cursor: pointer;\n            padding: 0;\n            border-radius: 6px;\n            opacity: 0.6;\n            transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);\n            font-size: 14px;\n            line-height: 1;\n            flex-shrink: 0;\n            width: 24px;\n            height: 24px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n          }\n          \n          .close-btn:hover {\n            opacity: 1;\n            background: rgba(0, 0, 0, 0.08);\n            transform: scale(1.05);\n          }\n          \n          .btn-primary {\n            background: linear-gradient(135deg, ${theme.accent} 0%, ${theme.accent}e6 100%);\n            color: white;\n            border: none;\n            border-radius: 8px;\n            padding: 10px 18px;\n            font-size: 13px;\n            font-weight: 600;\n            cursor: pointer;\n            transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);\n            font-family: inherit;\n            flex-shrink: 0;\n            box-shadow: \n              0 2px 8px ${theme.accent}30,\n              inset 0 1px 0 rgba(255, 255, 255, 0.2);\n            letter-spacing: -0.01em;\n          }\n          \n          .btn-primary:hover {\n            transform: translateY(-1px) scale(1.02);\n            box-shadow: \n              0 4px 12px ${theme.accent}40,\n              inset 0 1px 0 rgba(255, 255, 255, 0.25);\n          }\n          \n          .btn-primary:active {\n            transform: translateY(0) scale(0.98);\n            transition: all 0.08s cubic-bezier(0.16, 1, 0.3, 1);\n          }\n          \n          @media (max-width: 640px) {\n            .usage-banner {\n              width: calc(100vw - 24px);\n            }\n            \n            .banner-content {\n              padding: 16px;\n              gap: 12px;\n            }\n            \n            .banner-message {\n              font-size: 13px;\n              line-height: 1.45;\n            }\n            \n            .btn-primary {\n              padding: 8px 14px;\n              font-size: 12px;\n            }\n            \n            .close-btn {\n              width: 22px;\n              height: 22px;\n              font-size: 12px;\n            }\n          }\n        `}\n      </style>\n\n      <div className=\"usage-banner\">\n        <div className=\"banner-content\">\n          <div className=\"banner-message\">{message}</div>\n          {actions?.primary && (\n            <button className=\"btn-primary\" onClick={actions.primary.onClick}>\n              {actions.primary.label}\n            </button>\n          )}\n          {onClose && (\n            <button className=\"close-btn\" onClick={onClose} title=\"Close\">\n              ×\n            </button>\n          )}\n        </div>\n      </div>\n    </>\n  );\n}\n\n// Get action button based on error type\nexport const getErrorActions = (error: CopilotKitError) => {\n  switch (error.code) {\n    case CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR:\n      return {\n        primary: {\n          label: \"Get Free API Key\",\n          onClick: () =>\n            window.open(\"https://cloud.copilotkit.ai\", \"_blank\", \"noopener,noreferrer\"),\n        },\n      };\n    case CopilotKitErrorCode.UPGRADE_REQUIRED_ERROR:\n      return {\n        primary: {\n          label: \"Upgrade\",\n          onClick: () =>\n            window.open(\"https://cloud.copilotkit.ai\", \"_blank\", \"noopener,noreferrer\"),\n        },\n      };\n    default:\n      return undefined;\n  }\n};\n\nexport function renderCopilotKitUsage(error: CopilotKitError, onClose?: () => void) {\n  // Route based on error visibility level\n  if (error.visibility !== ErrorVisibility.BANNER) {\n    return null;\n  }\n\n  return (\n    <UsageBanner\n      severity={error.severity || Severity.CRITICAL}\n      message={error.message}\n      onClose={onClose}\n      actions={getErrorActions(error)}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/usage-banner.mjs

@@ -1,10 +1,12 @@
 import {
   UsageBanner,
+  getErrorActions,
   renderCopilotKitUsage
-} from "../chunk-57K2ZJ5F.mjs";
+} from "../chunk-AWFAFFO5.mjs";
 import "../chunk-SKC7AJIV.mjs";
 export {
   UsageBanner,
+  getErrorActions,
   renderCopilotKitUsage
 };
 //# sourceMappingURL=usage-banner.mjs.map

package/dist/context/copilot-context.d.ts

@@ -7,5 +7,5 @@ import '../types/chat-suggestion-configuration.js';
 import '../types/coagent-action.js';
 import '../types/coagent-state.js';
 import '@copilotkit/runtime-client-gql';
-export { k as ActionName, A as AgentSession, f as AuthState, j as ChatComponentsCache, b as CoagentInChatRenderFunction, l as ContextTree, c as CopilotApiConfig, C as CopilotContext, a as CopilotContextParams, I as InChatRenderFunction, u as useCopilotContext } from '../copilot-context-bd88d30d.js';
+export { k as ActionName, A as AgentSession, f as AuthState, j as ChatComponentsCache, b as CoagentInChatRenderFunction, l as ContextTree, c as CopilotApiConfig, C as CopilotContext, a as CopilotContextParams, I as InChatRenderFunction, u as useCopilotContext } from '../copilot-context-78fc727c.js';
 import './copilot-messages-context.js';

package/dist/context/copilot-context.js

@@ -129,6 +129,9 @@ var emptyCopilotContext = {
   removeLangGraphInterruptAction: () => null,
   onError: void 0,
   suggestions: [],
+  bannerError: null,
+  setBannerError: () => {
+  },
   setSuggestions: () => {
   }
 };