@copilotkit/react-core 1.9.2-next.8 → 1.9.2-next.9

package/src/components/usage-banner.tsx

@@ -21,8 +21,8 @@ const defaultIcons: Record<Severity, JSX.Element> = {
   [Severity.CRITICAL]: (
     <svg
       viewBox="0 0 24 24"
-      width="18"
-      height="18"
+      width="16"
+      height="16"
       stroke="currentColor"
       strokeWidth="2.5"
       fill="none"
@@ -37,8 +37,8 @@ const defaultIcons: Record<Severity, JSX.Element> = {
   [Severity.WARNING]: (
     <svg
       viewBox="0 0 24 24"
-      width="18"
-      height="18"
+      width="16"
+      height="16"
       stroke="currentColor"
       strokeWidth="2.5"
       fill="none"
@@ -53,8 +53,8 @@ const defaultIcons: Record<Severity, JSX.Element> = {
   [Severity.INFO]: (
     <svg
       viewBox="0 0 24 24"
-      width="18"
-      height="18"
+      width="16"
+      height="16"
       stroke="currentColor"
       strokeWidth="2.5"
       fill="none"
@@ -79,23 +79,46 @@ export function UsageBanner({
     return null;
   }
 
-  // Parse markdown links from message and clean it up
+  // Enhanced message parsing to clean up technical details
   const parseMessage = (rawMessage: string) => {
-    // Extract markdown links: [text](url)
-    const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
-    const matches = Array.from(rawMessage.matchAll(linkRegex));
+    // console.log("Raw message:", rawMessage); // Debug
+
+    // Super aggressive cleaning - handle common error patterns first
+    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.";
+    }
+
+    // For any other error, extract just the main error type
+    let cleanMessage = rawMessage;
 
-    if (matches.length > 0) {
-      // Remove "See more:" and markdown links from the main message
-      let cleanMessage = rawMessage
-        .replace(/\.\s*See more:\s*\[([^\]]+)\]\(([^)]+)\)/g, ".")
-        .replace(/See more:\s*\[([^\]]+)\]\(([^)]+)\)/g, "")
-        .trim();
+    // Remove everything after the first " - " or ":" followed by technical details
+    cleanMessage = cleanMessage.split(" - ")[0];
+    cleanMessage = cleanMessage.split(": Error code")[0];
+    cleanMessage = cleanMessage.split(": 401")[0];
+    cleanMessage = cleanMessage.split(": 403")[0];
+    cleanMessage = cleanMessage.split(": 404")[0];
+    cleanMessage = cleanMessage.split(": 500")[0];
 
-      return cleanMessage;
+    // Remove "See more" links
+    cleanMessage = cleanMessage.replace(/See more:.*$/g, "").trim();
+
+    // If still too technical, just show a generic message
+    if (cleanMessage.includes("{") || cleanMessage.includes("'") || cleanMessage.length > 60) {
+      return "Configuration error. Please check your setup.";
     }
 
-    return rawMessage;
+    return cleanMessage || "An error occurred. Please check your configuration.";
   };
 
   const cleanMessage = parseMessage(message);
@@ -103,7 +126,7 @@ export function UsageBanner({
 
   const themeConfigs = {
     [Severity.INFO]: {
-      bg: "linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%)",
+      bg: "rgba(239, 246, 255, 0.95)",
       border: "#93c5fd",
       text: "#1e40af",
       icon: "#3b82f6",
@@ -111,7 +134,7 @@ export function UsageBanner({
       primaryBtnHover: "#2563eb",
     },
     [Severity.WARNING]: {
-      bg: "linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%)",
+      bg: "rgba(255, 251, 235, 0.95)",
       border: "#fbbf24",
       text: "#92400e",
       icon: "#f59e0b",
@@ -119,7 +142,7 @@ export function UsageBanner({
       primaryBtnHover: "#d97706",
     },
     [Severity.CRITICAL]: {
-      bg: "linear-gradient(135deg, #fef2f2 0%, #fecaca 100%)",
+      bg: "rgba(254, 242, 242, 0.95)",
       border: "#f87171",
       text: "#991b1b",
       icon: "#ef4444",
@@ -134,13 +157,13 @@ export function UsageBanner({
     <div
       style={{
         position: "fixed",
-        bottom: "20px",
+        bottom: "24px",
         left: "50%",
         transform: "translateX(-50%)",
-        maxWidth: "min(95vw, 680px)",
-        width: "100%",
+        width: "400px",
+        maxWidth: "90vw",
         zIndex: 10000,
-        animation: "bannerSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1)",
+        animation: "bannerSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1)",
       }}
     >
       <style>
@@ -148,28 +171,29 @@ export function UsageBanner({
           @keyframes bannerSlideIn {
             from {
               opacity: 0;
-              transform: translateX(-50%) translateY(10px);
+              transform: translateX(-50%) translateY(20px);
+              scale: 0.95;
             }
             to {
               opacity: 1;
               transform: translateX(-50%) translateY(0);
+              scale: 1;
             }
           }
         `}
       </style>
       <div
         style={{
-          display: "flex",
-          alignItems: "flex-start",
-          gap: "14px",
-          borderRadius: "16px",
+          borderRadius: "12px",
           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)",
+          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(10px)",
-          WebkitBackdropFilter: "blur(10px)",
+          backdropFilter: "blur(12px)",
+          WebkitBackdropFilter: "blur(12px)",
+          boxSizing: "border-box",
+          overflow: "hidden",
         }}
       >
         {/* Close button */}
@@ -178,144 +202,117 @@ export function UsageBanner({
             onClick={onClose}
             style={{
               position: "absolute",
-              top: "12px",
-              right: "12px",
-              background: "rgba(255, 255, 255, 0.8)",
+              top: "8px",
+              right: "8px",
+              background: "rgba(255, 255, 255, 0.9)",
               border: "none",
               color: themeConfig.text,
               cursor: "pointer",
-              fontSize: "18px",
+              fontSize: "16px",
               lineHeight: "1",
-              padding: "6px",
-              borderRadius: "8px",
-              opacity: 0.7,
-              transition: "all 0.2s ease",
+              padding: "4px",
+              borderRadius: "4px",
+              width: "20px",
+              height: "20px",
               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)";
-            }}
           >
             ×
           </button>
         )}
 
-        {/* Icon */}
+        {/* Message */}
         <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",
+            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",
           }}
         >
-          {Icon}
+          {cleanMessage}
         </div>
 
-        {/* Content */}
-        <div style={{ flex: 1, paddingRight: onClose ? "40px" : "0" }}>
-          {/* Message */}
+        {/* Actions */}
+        {actions && (
           <div
             style={{
-              fontSize: "15px",
-              fontWeight: 600,
-              color: themeConfig.text,
-              lineHeight: "1.5",
-              marginBottom: actions ? "12px" : "0",
-              fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+              display: "flex",
+              gap: "8px",
+              flexWrap: "wrap",
             }}
           >
-            {cleanMessage}
+            {actions.secondary && (
+              <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)";
+                }}
+              >
+                {actions.secondary.label}
+              </button>
+            )}
+            {actions.primary && (
+              <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)";
+                }}
+              >
+                {actions.primary.label}
+              </button>
+            )}
           </div>
-
-          {/* Actions */}
-          {actions && (
-            <div
-              style={{
-                display: "flex",
-                gap: "10px",
-                flexWrap: "wrap",
-              }}
-            >
-              {actions.secondary && (
-                <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";
-                  }}
-                >
-                  {actions.secondary.label}
-                </button>
-              )}
-              {actions.primary && (
-                <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)";
-                  }}
-                >
-                  {actions.primary.label}
-                </button>
-              )}
-            </div>
-          )}
-        </div>
+        )}
       </div>
     </div>
   );

package/src/hooks/use-chat.ts

@@ -5,6 +5,8 @@ import {
   CoAgentStateRenderHandler,
   randomId,
   parseJson,
+  CopilotKitError,
+  CopilotKitErrorCode,
 } from "@copilotkit/shared";
 import {
   Message,
@@ -39,6 +41,7 @@ import { AgentSession } from "../context/copilot-context";
 import { useCopilotRuntimeClient } from "./use-copilot-runtime-client";
 import { useCopilotContext } from "../context/copilot-context";
 import { useAsyncCallback, useErrorToast } from "../components/error-boundary/error-utils";
+import { useToast } from "../components/toast/toast-provider";
 import {
   LangGraphInterruptAction,
   LangGraphInterruptActionSetter,
@@ -218,6 +221,41 @@ export function useChat(options: UseChatOptions): UseChatHelpers {
   } = options;
   const runChatCompletionRef = useRef<(previousMessages: Message[]) => Promise<Message[]>>();
   const addErrorToast = useErrorToast();
+  const { setBannerError } = useToast();
+
+  // Get onTrace from context since it's not part of copilotConfig
+  const { onTrace } = useCopilotContext();
+
+  // Add tracing functionality to use-chat
+  const traceUIError = async (error: CopilotKitError, originalError?: any) => {
+    // Just check if onTrace and publicApiKey are defined
+    if (!onTrace || !copilotConfig?.publicApiKey) return;
+
+    try {
+      const traceEvent = {
+        type: "error" as const,
+        timestamp: Date.now(),
+        context: {
+          source: "ui" as const,
+          request: {
+            operation: "useChatCompletion",
+            url: copilotConfig.chatApiEndpoint,
+            startTime: Date.now(),
+          },
+          technical: {
+            environment: "browser",
+            userAgent: typeof navigator !== "undefined" ? navigator.userAgent : undefined,
+            stackTrace: originalError instanceof Error ? originalError.stack : undefined,
+          },
+        },
+        error,
+      };
+
+      await onTrace(traceEvent);
+    } catch (traceError) {
+      console.error("Error in use-chat onTrace handler:", traceError);
+    }
+  };
   // We need to keep a ref of coagent states and session because of renderAndWait - making sure
   // the latest state is sent to the API
   // This is a workaround and needs to be addressed in the future
@@ -453,29 +491,91 @@ export function useChat(options: UseChatOptions): UseChatHelpers {
             filterAdjacentAgentStateMessages(rawMessagesResponse),
           );
 
-          if (messages.length === 0) {
-            continue;
-          }
-
           newMessages = [];
 
+          // Handle error statuses BEFORE checking if there are messages
+          // (errors can come in chunks with no messages)
+
           // request failed, display error message and quit
           if (
             value.generateCopilotResponse.status?.__typename === "FailedResponseStatus" &&
             value.generateCopilotResponse.status.reason === "GUARDRAILS_VALIDATION_FAILED"
           ) {
+            const guardrailsReason =
+              value.generateCopilotResponse.status.details?.guardrailsReason || "";
+
             newMessages = [
               new TextMessage({
                 role: MessageRole.Assistant,
-                content: value.generateCopilotResponse.status.details?.guardrailsReason || "",
+                content: guardrailsReason,
               }),
             ];
+
+            // Trace guardrails validation failure
+            const guardrailsError = new CopilotKitError({
+              message: `Guardrails validation failed: ${guardrailsReason}`,
+              code: CopilotKitErrorCode.MISUSE,
+            });
+            await traceUIError(guardrailsError, {
+              statusReason: value.generateCopilotResponse.status.reason,
+              statusDetails: value.generateCopilotResponse.status.details,
+            });
+
             setMessages([...previousMessages, ...newMessages]);
             break;
           }
 
+          // Handle UNKNOWN_ERROR failures (like authentication errors) by routing to banner error system
+          if (
+            value.generateCopilotResponse.status?.__typename === "FailedResponseStatus" &&
+            value.generateCopilotResponse.status.reason === "UNKNOWN_ERROR"
+          ) {
+            const errorMessage =
+              value.generateCopilotResponse.status.details?.description ||
+              "An unknown error occurred";
+
+            // Try to extract original error information from the response details
+            const statusDetails = value.generateCopilotResponse.status.details;
+            const originalError = statusDetails?.originalError || statusDetails?.error;
+
+            // Extract structured error information if available (prioritize top-level over extensions)
+            const originalCode = originalError?.code || originalError?.extensions?.code;
+            const originalSeverity = originalError?.severity || originalError?.extensions?.severity;
+            const originalVisibility =
+              originalError?.visibility || originalError?.extensions?.visibility;
+
+            // Use the original error code if available, otherwise default to NETWORK_ERROR
+            let errorCode = CopilotKitErrorCode.NETWORK_ERROR;
+            if (originalCode && Object.values(CopilotKitErrorCode).includes(originalCode)) {
+              errorCode = originalCode;
+            }
+
+            // Create a structured CopilotKitError preserving original error information
+            const structuredError = new CopilotKitError({
+              message: errorMessage,
+              code: errorCode,
+              severity: originalSeverity,
+              visibility: originalVisibility,
+            });
+
+            // Display the error in the banner
+            setBannerError(structuredError);
+
+            // Trace the error for debugging/observability
+            await traceUIError(structuredError, {
+              statusReason: value.generateCopilotResponse.status.reason,
+              statusDetails: value.generateCopilotResponse.status.details,
+              originalErrorCode: originalCode,
+              preservedStructure: !!originalCode,
+            });
+
+            // Stop processing and break from the loop
+            setIsLoading(false);
+            break;
+          }
+
           // add messages to the chat
-          else {
+          else if (messages.length > 0) {
             newMessages = [...messages];
 
             for (const message of messages) {

package/src/hooks/use-coagent.ts

@@ -278,6 +278,11 @@ export function useCoAgent<T = any>(options: UseCoagentOptions<T>): UseCoagentRe
         agentName: name,
       });
 
+      // Runtime client handles errors automatically via handleGQLErrors
+      if (result.error) {
+        return; // Don't process data on error
+      }
+
       const newState = result.data?.loadAgentState?.state;
       if (newState === lastLoadedState.current) return;
 

package/src/hooks/use-copilot-runtime-client.ts

@@ -32,6 +32,7 @@ export const useCopilotRuntimeClient = (options: CopilotRuntimeClientHookOptions
 
   // Helper function to trace UI errors
   const traceUIError = async (error: CopilotKitError, originalError?: any) => {
+    // Just check if onTrace and publicApiKey are defined
     if (!onTrace || !runtimeOptions.publicApiKey) return;
 
     try {
@@ -46,14 +47,13 @@ export const useCopilotRuntimeClient = (options: CopilotRuntimeClientHookOptions
             startTime: Date.now(),
           },
           technical: {
-            environment: process.env.NODE_ENV,
+            environment: "browser",
             userAgent: typeof navigator !== "undefined" ? navigator.userAgent : undefined,
             stackTrace: originalError instanceof Error ? originalError.stack : undefined,
           },
         },
         error,
       };
-
       await onTrace(traceEvent);
     } catch (traceError) {
       console.error("Error in onTrace handler:", traceError);
@@ -79,7 +79,6 @@ export const useCopilotRuntimeClient = (options: CopilotRuntimeClientHookOptions
               return;
             }
 
-            // Respect showDevConsole setting for ALL errors
             if (!isDev) {
               console.error("CopilotKit Error (hidden in production):", gqlError.message);
               return;
@@ -148,42 +147,6 @@ export const useCopilotRuntimeClient = (options: CopilotRuntimeClientHookOptions
   return runtimeClient;
 };
 
-// Helper to determine if error should show as banner based on structured error system
-function shouldShowAsBanner(gqlError: GraphQLError): boolean {
-  const extensions = gqlError.extensions;
-  if (!extensions) return false;
-
-  // Primary: Check error code and use structured config
-  const code = extensions.code as CopilotKitErrorCode;
-  if (code && ERROR_CONFIG[code]?.visibility === ErrorVisibility.BANNER) {
-    return true;
-  }
-
-  // Fallback: Check for API key errors which should always be banners
-  const errorMessage = gqlError.message.toLowerCase();
-  if (
-    errorMessage.includes("api key") ||
-    errorMessage.includes("401") ||
-    errorMessage.includes("unauthorized") ||
-    errorMessage.includes("authentication") ||
-    errorMessage.includes("incorrect api key")
-  ) {
-    return true;
-  }
-
-  // Legacy: Check by stack trace for discovery errors (for backward compatibility)
-  const originalError = extensions.originalError as any;
-  if (originalError?.stack) {
-    return (
-      originalError.stack.includes("CopilotApiDiscoveryError") ||
-      originalError.stack.includes("CopilotKitRemoteEndpointDiscoveryError") ||
-      originalError.stack.includes("CopilotKitAgentDiscoveryError")
-    );
-  }
-
-  return false;
-}
-
 // Create appropriate structured error from GraphQL error
 function createStructuredError(gqlError: GraphQLError): CopilotKitError | null {
   const extensions = gqlError.extensions;