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

package/src/components/error-boundary/error-boundary.tsx

@@ -1,9 +1,8 @@
 import React, { useEffect } from "react";
-import { Severity, CopilotKitError } from "@copilotkit/shared";
+import { Severity, CopilotKitError, ErrorVisibility } from "@copilotkit/shared";
 import { StatusChecker } from "../../lib/status-checker";
 import { renderCopilotKitUsage, UsageBanner } from "../usage-banner";
 import { useErrorToast } from "./error-utils";
-import { COPILOT_CLOUD_ERROR_NAMES } from "@copilotkit/shared";
 
 const statusChecker = new StatusChecker();
 
@@ -58,11 +57,13 @@ export class CopilotErrorBoundary extends React.Component<Props, State> {
   render() {
     if (this.state.hasError) {
       if (this.state.error instanceof CopilotKitError) {
-        // @ts-expect-error -- It's a copilotkit error at this state. Name is valid
-        if (COPILOT_CLOUD_ERROR_NAMES.includes(this.state.error.name)) {
+        // Check if error should be shown as banner based on visibility
+        if (this.state.error.visibility === ErrorVisibility.BANNER) {
           return (
             <ErrorToast error={this.state.error}>
-              {renderCopilotKitUsage(this.state.error)}
+              {renderCopilotKitUsage(this.state.error, () =>
+                this.setState({ hasError: false, error: undefined }),
+              )}
             </ErrorToast>
           );
         }

package/src/components/error-boundary/error-utils.tsx

@@ -33,7 +33,7 @@ export function ErrorToast({ errors }: { errors: (Error | GraphQLError)[] }) {
               marginBottom: 4,
             }}
           >
-            Copilot Cloud Error:{" "}
+            Copilot Runtime Error:{" "}
             <span style={{ fontFamily: "monospace", fontWeight: "normal" }}>{code}</span>
           </div>
         )}

package/src/components/toast/toast-provider.tsx

@@ -1,7 +1,8 @@
 import { GraphQLError } from "@copilotkit/runtime-client-gql";
 import React, { createContext, useContext, useState, useCallback } from "react";
 import { ErrorToast } from "../error-boundary/error-utils";
-import { PartialBy } from "@copilotkit/shared";
+import { PartialBy, CopilotKitError, CopilotKitErrorCode, Severity } from "@copilotkit/shared";
+import { renderCopilotKitUsage } from "../usage-banner";
 
 interface Toast {
   id: string;
@@ -16,10 +17,80 @@ interface ToastContextValue {
   addGraphQLErrorsToast: (errors: GraphQLError[]) => void;
   removeToast: (id: string) => void;
   enabled: boolean;
+  // Banner management
+  bannerError: CopilotKitError | null;
+  setBannerError: (error: CopilotKitError | null) => void;
 }
 
 const ToastContext = createContext<ToastContextValue | undefined>(undefined);
 
+// Helper functions for error banner styling
+type ErrorSeverity = "critical" | "warning" | "info";
+
+interface ErrorColors {
+  background: string;
+  border: string;
+  text: string;
+  icon: string;
+}
+
+function getErrorSeverity(error: CopilotKitError): ErrorSeverity {
+  // Use structured error severity if available
+  if (error.severity) {
+    switch (error.severity) {
+      case Severity.CRITICAL:
+        return "critical";
+      case Severity.WARNING:
+        return "warning";
+      case Severity.INFO:
+        return "info";
+      default:
+        return "info";
+    }
+  }
+
+  // Fallback: Check for API key errors which should always be critical
+  const message = error.message.toLowerCase();
+  if (
+    message.includes("api key") ||
+    message.includes("401") ||
+    message.includes("unauthorized") ||
+    message.includes("authentication") ||
+    message.includes("incorrect api key")
+  ) {
+    return "critical";
+  }
+
+  // Default to info level
+  return "info";
+}
+
+function getErrorColors(severity: ErrorSeverity): ErrorColors {
+  switch (severity) {
+    case "critical":
+      return {
+        background: "#fee2e2",
+        border: "#dc2626",
+        text: "#7f1d1d",
+        icon: "#dc2626",
+      };
+    case "warning":
+      return {
+        background: "#fef3c7",
+        border: "#d97706",
+        text: "#78350f",
+        icon: "#d97706",
+      };
+    case "info":
+      return {
+        background: "#dbeafe",
+        border: "#2563eb",
+        text: "#1e3a8a",
+        icon: "#2563eb",
+      };
+  }
+}
+
 export function useToast() {
   const context = useContext(ToastContext);
   if (!context) {
@@ -36,9 +107,15 @@ export function ToastProvider({
   children: React.ReactNode;
 }) {
   const [toasts, setToasts] = useState<Toast[]>([]);
+  const [bannerError, setBannerErrorState] = useState<CopilotKitError | null>(null);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+
   const addToast = useCallback(
     (toast: PartialBy<Toast, "id">) => {
-      // We do not display these errors unless we are in dev mode.
+      // Respect the enabled flag for ALL toasts
       if (!enabled) {
         return;
       }
@@ -56,18 +133,24 @@ export function ToastProvider({
         }, toast.duration);
       }
     },
+    [enabled, removeToast],
+  );
+
+  const setBannerError = useCallback(
+    (error: CopilotKitError | null) => {
+      // Respect the enabled flag for ALL errors
+      if (!enabled && error !== null) {
+        return;
+      }
+      setBannerErrorState(error);
+    },
     [enabled],
   );
 
   const addGraphQLErrorsToast = useCallback((errors: GraphQLError[]) => {
-    addToast({
-      type: "error",
-      message: <ErrorToast errors={errors} />,
-    });
-  }, []);
-
-  const removeToast = useCallback((id: string) => {
-    setToasts((currentToasts) => currentToasts.filter((toast) => toast.id !== id));
+    // DEPRECATED: All errors now route to banners for consistency
+    console.warn("addGraphQLErrorsToast is deprecated. All errors now show as banners.");
+    // Function kept for backward compatibility - does nothing
   }, []);
 
   const value = {
@@ -76,98 +159,182 @@ export function ToastProvider({
     addGraphQLErrorsToast,
     removeToast,
     enabled,
+    bannerError,
+    setBannerError,
   };
 
   return (
     <ToastContext.Provider value={value}>
-      <div
-        style={{
-          position: "fixed",
-          bottom: "1rem",
-          left: "50%",
-          transform: "translateX(-50%)",
-          zIndex: 50,
-          display: "flex",
-          flexDirection: "column",
-          gap: "0.5rem",
-        }}
-      >
-        {toasts.length > 1 && (
-          <div style={{ textAlign: "right" }}>
-            <button
-              onClick={() => setToasts([])}
+      {/* Banner Error Display */}
+      {bannerError &&
+        (() => {
+          const severity = getErrorSeverity(bannerError);
+          const colors = getErrorColors(severity);
+
+          return (
+            <div
               style={{
-                padding: "4px 8px",
-                fontSize: "12px",
-                cursor: "pointer",
-                background: "white",
-                border: "1px solid rgba(0,0,0,0.2)",
-                borderRadius: "4px",
+                position: "fixed",
+                bottom: "20px",
+                left: "50%",
+                transform: "translateX(-50%)",
+                zIndex: 9999,
+                backgroundColor: colors.background,
+                border: `1px solid ${colors.border}`,
+                borderLeft: `4px solid ${colors.border}`,
+                borderRadius: "8px",
+                padding: "10px 14px",
+                fontSize: "13px",
+                boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+                backdropFilter: "blur(8px)",
+                maxWidth: "500px",
+                minWidth: "350px",
               }}
             >
-              Close All
-            </button>
-          </div>
-        )}
-        {toasts.map((toast) => (
-          <Toast
-            key={toast.id}
-            message={toast.message}
-            type={toast.type}
-            onClose={() => removeToast(toast.id)}
-          />
-        ))}
-      </div>
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  gap: "10px",
+                }}
+              >
+                <div style={{ display: "flex", alignItems: "center", gap: "8px", flex: 1 }}>
+                  <div
+                    style={{
+                      width: "12px",
+                      height: "12px",
+                      borderRadius: "50%",
+                      backgroundColor: colors.border,
+                      flexShrink: 0,
+                    }}
+                  />
+                  <div style={{ display: "flex", alignItems: "center", gap: "10px", flex: 1 }}>
+                    <div
+                      style={{
+                        color: colors.text,
+                        lineHeight: "1.4",
+                        fontWeight: "400",
+                        fontSize: "13px",
+                        flex: 1,
+                        wordWrap: "break-word",
+                        overflowWrap: "break-word",
+                        hyphens: "auto",
+                      }}
+                    >
+                      {(() => {
+                        const message = bannerError.message;
+                        const markdownLinkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+                        const plainUrlRegex = /(https?:\/\/[^\s)]+)/g;
+
+                        // Remove URLs and markdown links from the message, keep just the text
+                        let cleanMessage = message
+                          .replace(markdownLinkRegex, "") // Remove [text](url)
+                          .replace(plainUrlRegex, "") // Remove plain URLs
+                          .replace(/See more:\s*/g, "") // Remove "See more:" text
+                          .replace(/\s+/g, " ") // Clean up extra spaces
+                          .trim();
+
+                        // Truncate very long messages for better display
+                        if (cleanMessage.length > 120) {
+                          cleanMessage = cleanMessage.substring(0, 117) + "...";
+                        }
+
+                        return cleanMessage;
+                      })()}
+                    </div>
+
+                    {(() => {
+                      const message = bannerError.message;
+                      const markdownLinkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+                      const plainUrlRegex = /(https?:\/\/[^\s)]+)/g;
+
+                      // Extract the first URL found
+                      let url = null;
+                      let buttonText = "See More";
+
+                      // Check for markdown links first
+                      const markdownMatch = markdownLinkRegex.exec(message);
+                      if (markdownMatch) {
+                        url = markdownMatch[2];
+                        buttonText = "See More";
+                      } else {
+                        // Check for plain URLs
+                        const urlMatch = plainUrlRegex.exec(message);
+                        if (urlMatch) {
+                          url = urlMatch[0];
+                          buttonText = "See More";
+                        }
+                      }
+
+                      if (!url) return null;
+
+                      return (
+                        <button
+                          onClick={() => window.open(url, "_blank", "noopener,noreferrer")}
+                          style={{
+                            background: colors.border,
+                            color: "white",
+                            border: "none",
+                            borderRadius: "5px",
+                            padding: "4px 10px",
+                            fontSize: "11px",
+                            fontWeight: "500",
+                            cursor: "pointer",
+                            transition: "all 0.2s ease",
+                            flexShrink: 0,
+                          }}
+                          onMouseEnter={(e) => {
+                            e.currentTarget.style.opacity = "0.9";
+                            e.currentTarget.style.transform = "translateY(-1px)";
+                          }}
+                          onMouseLeave={(e) => {
+                            e.currentTarget.style.opacity = "1";
+                            e.currentTarget.style.transform = "translateY(0)";
+                          }}
+                        >
+                          {buttonText}
+                        </button>
+                      );
+                    })()}
+                  </div>
+                </div>
+                <button
+                  onClick={() => setBannerError(null)}
+                  style={{
+                    background: "transparent",
+                    border: "none",
+                    color: colors.text,
+                    cursor: "pointer",
+                    padding: "2px",
+                    borderRadius: "3px",
+                    fontSize: "14px",
+                    lineHeight: "1",
+                    opacity: 0.6,
+                    transition: "all 0.2s ease",
+                    flexShrink: 0,
+                  }}
+                  title="Dismiss"
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.opacity = "1";
+                    e.currentTarget.style.background = "rgba(0, 0, 0, 0.05)";
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.opacity = "0.6";
+                    e.currentTarget.style.background = "transparent";
+                  }}
+                >
+                  ×
+                </button>
+              </div>
+            </div>
+          );
+        })()}
+
+      {/* Toast Display - Deprecated: All errors now show as banners */}
       {children}
     </ToastContext.Provider>
   );
 }
 
-function Toast({
-  message,
-  type = "info",
-  onClose,
-}: {
-  message: string | React.ReactNode;
-  type: "info" | "success" | "warning" | "error";
-  onClose: () => void;
-}) {
-  const bgColors = {
-    info: "#3b82f6",
-    success: "#22c55e",
-    warning: "#eab308",
-    error: "#ef4444",
-  };
-
-  return (
-    <div
-      style={{
-        backgroundColor: bgColors[type],
-        color: "white",
-        padding: "0.5rem 1.5rem",
-        borderRadius: "0.25rem",
-        boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
-        position: "relative",
-        minWidth: "200px",
-      }}
-    >
-      <div>{message}</div>
-      <button
-        onClick={onClose}
-        style={{
-          position: "absolute",
-          top: "0",
-          right: "0",
-          background: "none",
-          border: "none",
-          color: "white",
-          cursor: "pointer",
-          padding: "0.5rem",
-          fontSize: "1rem",
-        }}
-      >
-        ✕
-      </button>
-    </div>
-  );
-}
+// Toast component removed - all errors now show as banners for consistency