@copilotkit/react-core 1.55.2 → 1.55.3-canary.1776243725

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkit/react-core",
-  "version": "1.55.2",
+  "version": "1.55.3-canary.1776243725",
   "private": false,
   "keywords": [
     "ai",
@@ -73,11 +73,11 @@
     "untruncate-json": "^0.0.1",
     "use-stick-to-bottom": "^1.1.1",
     "zod-to-json-schema": "^3.24.5",
-    "@copilotkit/a2ui-renderer": "1.55.2",
-    "@copilotkit/core": "1.55.2",
-    "@copilotkit/runtime-client-gql": "1.55.2",
-    "@copilotkit/shared": "1.55.2",
-    "@copilotkit/web-inspector": "1.55.2"
+    "@copilotkit/a2ui-renderer": "1.55.3-canary.1776243725",
+    "@copilotkit/core": "1.55.3-canary.1776243725",
+    "@copilotkit/shared": "1.55.3-canary.1776243725",
+    "@copilotkit/runtime-client-gql": "1.55.3-canary.1776243725",
+    "@copilotkit/web-inspector": "1.55.3-canary.1776243725"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.1.11",

package/src/components/copilot-provider/__tests__/error-visibility-prod.test.tsx

@@ -0,0 +1,70 @@
+import { describe, it, expect } from "vitest";
+import { ErrorVisibility } from "@copilotkit/shared";
+import { getErrorSuppression } from "../copilot-messages";
+
+/**
+ * Regression tests for #2431: error visibility when showDevConsole=false.
+ *
+ * The bug: `routeError` returned early for ALL errors when `isDev` was false,
+ * suppressing TOAST and BANNER errors that should always reach the user.
+ *
+ * The fix: only SILENT and DEV_ONLY errors are suppressed in production;
+ * TOAST, BANNER, and untagged errors are always surfaced.
+ */
+describe("getErrorSuppression — error visibility routing (#2431)", () => {
+  // --- Production (isDev = false) ---
+
+  it("surfaces TOAST errors in production", () => {
+    expect(getErrorSuppression(ErrorVisibility.TOAST, false)).toBeNull();
+  });
+
+  it("surfaces BANNER errors in production", () => {
+    expect(getErrorSuppression(ErrorVisibility.BANNER, false)).toBeNull();
+  });
+
+  it("suppresses DEV_ONLY errors in production", () => {
+    expect(getErrorSuppression(ErrorVisibility.DEV_ONLY, false)).not.toBeNull();
+  });
+
+  it("suppresses SILENT errors in production", () => {
+    expect(getErrorSuppression(ErrorVisibility.SILENT, false)).not.toBeNull();
+  });
+
+  it("surfaces errors with no visibility tag in production", () => {
+    expect(getErrorSuppression(undefined, false)).toBeNull();
+  });
+
+  // --- Development (isDev = true) ---
+
+  it("surfaces TOAST errors in development", () => {
+    expect(getErrorSuppression(ErrorVisibility.TOAST, true)).toBeNull();
+  });
+
+  it("surfaces BANNER errors in development", () => {
+    expect(getErrorSuppression(ErrorVisibility.BANNER, true)).toBeNull();
+  });
+
+  it("surfaces DEV_ONLY errors in development", () => {
+    expect(getErrorSuppression(ErrorVisibility.DEV_ONLY, true)).toBeNull();
+  });
+
+  it("suppresses SILENT errors in development", () => {
+    expect(getErrorSuppression(ErrorVisibility.SILENT, true)).not.toBeNull();
+  });
+
+  it("surfaces errors with no visibility tag in development", () => {
+    expect(getErrorSuppression(undefined, true)).toBeNull();
+  });
+
+  // --- Log prefix strings ---
+
+  it("returns a 'Silent Error' prefix for SILENT visibility", () => {
+    const prefix = getErrorSuppression(ErrorVisibility.SILENT, false);
+    expect(prefix).toContain("Silent");
+  });
+
+  it("returns a 'hidden in production' prefix for DEV_ONLY visibility", () => {
+    const prefix = getErrorSuppression(ErrorVisibility.DEV_ONLY, false);
+    expect(prefix).toContain("hidden in production");
+  });
+});

package/src/components/copilot-provider/copilot-messages.tsx

@@ -31,6 +31,33 @@ import {
 } from "@copilotkit/shared";
 import { Suggestion } from "@copilotkit/core";
 
+/**
+ * Determine whether a GraphQL error should be suppressed based on its visibility
+ * and whether the dev console is active.
+ *
+ * Returns `null` when the error should be surfaced to the UI, or a log prefix
+ * string when the error should be suppressed (logged to console only).
+ *
+ * Exported for unit testing.
+ */
+export function getErrorSuppression(
+  visibility: ErrorVisibility | undefined,
+  isDev: boolean,
+): string | null {
+  // Silent errors are always suppressed
+  if (visibility === ErrorVisibility.SILENT) {
+    return "CopilotKit Silent Error:";
+  }
+
+  // DEV_ONLY errors are suppressed in production
+  if (!isDev && visibility === ErrorVisibility.DEV_ONLY) {
+    return "CopilotKit Error (hidden in production):";
+  }
+
+  // All other visibilities (TOAST, BANNER, undefined) are always surfaced
+  return null;
+}
+
 // Helper to determine if error should show as banner based on visibility and legacy patterns
 function shouldShowAsBanner(gqlError: GraphQLError): boolean {
   const extensions = gqlError.extensions;
@@ -224,20 +251,13 @@ export function CopilotMessages({ children }: { children: ReactNode }) {
           const visibility = extensions?.visibility as ErrorVisibility;
           const isDev = shouldShowDevConsole(showDevConsole);
 
-          if (!isDev) {
-            console.error(
-              "CopilotKit Error (hidden in production):",
-              gqlError.message,
-            );
-            return;
-          }
-
-          // Silent errors - just log
-          if (visibility === ErrorVisibility.SILENT) {
-            console.error("CopilotKit Silent Error:", gqlError.message);
+          const suppression = getErrorSuppression(visibility, isDev);
+          if (suppression) {
+            console.error(suppression, gqlError.message);
             return;
           }
 
+          // TOAST and BANNER errors are always surfaced, even in production
           // All other errors (including DEV_ONLY) show as banners for consistency
           const ckError = createStructuredError(gqlError);
           if (ckError) {
@@ -259,19 +279,14 @@ export function CopilotMessages({ children }: { children: ReactNode }) {
         // Process all errors as banners
         graphQLErrors.forEach(routeError);
       } else {
-        const isDev = shouldShowDevConsole(showDevConsole);
-        if (!isDev) {
-          console.error("CopilotKit Error (hidden in production):", error);
-        } else {
-          // Route non-GraphQL errors to banner as well
-          const fallbackError = new CopilotKitError({
-            message: error?.message || String(error),
-            code: CopilotKitErrorCode.UNKNOWN,
-          });
-          setBannerError(fallbackError);
-          // Trace the non-GraphQL error
-          traceUIError(fallbackError, error);
-        }
+        // Non-GraphQL errors are always surfaced to the user
+        const fallbackError = new CopilotKitError({
+          message: error?.message || String(error),
+          code: CopilotKitErrorCode.UNKNOWN,
+        });
+        setBannerError(fallbackError);
+        // Trace the non-GraphQL error
+        traceUIError(fallbackError, error);
       }
     },
     [setBannerError, showDevConsole, traceUIError],

package/src/components/copilot-provider/copilotkit-props.tsx

@@ -68,15 +68,19 @@ export interface CopilotKitProps extends Omit<
 
   /**
    * Additional headers to be sent with the request.
+   * Can be a static object or a function that returns headers dynamically
+   * (useful for refreshing auth tokens).
    *
    * For example:
-   * ```json
-   * {
-   *   "Authorization": "Bearer X"
-   * }
+   * ```tsx
+   * // Static headers
+   * headers={{ "Authorization": "Bearer X" }}
+   *
+   * // Dynamic headers (re-evaluated on each render)
+   * headers={() => ({ "Authorization": `Bearer ${getToken()}` })}
    * ```
    */
-  headers?: Record<string, string>;
+  headers?: Record<string, string> | (() => Record<string, string>);
 
   /**
    * The children to be rendered within the CopilotKit.

package/src/components/copilot-provider/copilotkit.tsx

@@ -311,7 +311,10 @@ export function CopilotKitInternal(cpkProps: CopilotKitProps) {
       publicApiKey: publicApiKey,
       ...(cloud ? { cloud } : {}),
       chatApiEndpoint: chatApiEndpoint,
-      headers: props.headers || {},
+      headers:
+        typeof props.headers === "function"
+          ? props.headers()
+          : props.headers || {},
       properties: props.properties || {},
       transcribeAudioUrl: props.transcribeAudioUrl,
       textToSpeechUrl: props.textToSpeechUrl,

package/src/v2/components/chat/CopilotChatAssistantMessage.tsx

@@ -22,6 +22,7 @@ import {
 import { useKatexStyles } from "../../hooks/useKatexStyles";
 import { WithSlots, renderSlot } from "../../lib/slots";
 import { Streamdown } from "streamdown";
+import { copyToClipboard } from "@copilotkit/shared";
 import CopilotChatToolCallsView from "./CopilotChatToolCallsView";
 
 export type CopilotChatAssistantMessageProps = WithSlots<
@@ -86,12 +87,9 @@ export function CopilotChatAssistantMessage({
     {
       onClick: async () => {
         if (message.content) {
-          try {
-            await navigator.clipboard.writeText(message.content);
-          } catch (err) {
-            console.error("Failed to copy message:", err);
-          }
+          return await copyToClipboard(message.content);
         }
+        return false;
       },
     },
   );
@@ -275,18 +273,23 @@ export namespace CopilotChatAssistantMessage {
       };
     }, []);
 
-    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-      setCopied(true);
-      if (timerRef.current !== null) {
-        clearTimeout(timerRef.current);
+    const handleClick = async (event: React.MouseEvent<HTMLButtonElement>) => {
+      let success = false;
+      if (onClick) {
+        // onClick may return a boolean indicating copy success
+        const result = await Promise.resolve(onClick(event));
+        success = result === true;
       }
-      timerRef.current = setTimeout(() => {
-        timerRef.current = null;
-        setCopied(false);
-      }, 2000);
 
-      if (onClick) {
-        onClick(event);
+      if (success) {
+        setCopied(true);
+        if (timerRef.current !== null) {
+          clearTimeout(timerRef.current);
+        }
+        timerRef.current = setTimeout(() => {
+          timerRef.current = null;
+          setCopied(false);
+        }, 2000);
       }
     };
 

package/src/v2/components/chat/CopilotChatReasoningMessage.tsx

@@ -71,18 +71,31 @@ export function CopilotChatReasoningMessage({
     return () => clearInterval(timer);
   }, [isStreaming]);
 
-  // Default to open while streaming, auto-collapse when streaming ends
+  // Default to open while streaming, auto-collapse when streaming ends.
+  // Track whether the user has manually toggled so auto-collapse doesn't
+  // override their explicit intent (prevents flaky test failures on CI
+  // where async forceUpdate timing can race with click handlers).
   const [isOpen, setIsOpen] = useState(isStreaming);
+  const userToggledRef = useRef(false);
 
   useEffect(() => {
     if (isStreaming) {
+      // Reset user-toggle tracking when a new streaming session starts
+      userToggledRef.current = false;
       setIsOpen(true);
-    } else {
-      // Auto-collapse when reasoning finishes
+    } else if (!userToggledRef.current) {
+      // Auto-collapse only if the user hasn't manually toggled
       setIsOpen(false);
     }
   }, [isStreaming]);
 
+  const handleToggle = hasContent
+    ? () => {
+        userToggledRef.current = true;
+        setIsOpen((prev) => !prev);
+      }
+    : undefined;
+
   const label = isStreaming
     ? "Thinking…"
     : `Thought for ${formatDuration(elapsed)}`;
@@ -92,7 +105,7 @@ export function CopilotChatReasoningMessage({
     label,
     hasContent,
     isStreaming,
-    onClick: hasContent ? () => setIsOpen((prev) => !prev) : undefined,
+    onClick: handleToggle,
   });
 
   const boundContent = renderSlot(

package/src/v2/components/chat/CopilotChatUserMessage.tsx

@@ -18,6 +18,7 @@ import {
   type AudioInputPart,
   type VideoInputPart,
   type DocumentInputPart,
+  copyToClipboard,
 } from "@copilotkit/shared";
 import { CopilotChatAttachmentRenderer } from "./CopilotChatAttachmentRenderer";
 
@@ -147,12 +148,9 @@ export function CopilotChatUserMessage({
     {
       onClick: async () => {
         if (flattenedContent) {
-          try {
-            await navigator.clipboard.writeText(flattenedContent);
-          } catch (err) {
-            console.error("Failed to copy message:", err);
-          }
+          return await copyToClipboard(flattenedContent);
         }
+        return false;
       },
     },
   );
@@ -314,12 +312,17 @@ export namespace CopilotChatUserMessage {
     const labels = config?.labels ?? CopilotChatDefaultLabels;
     const [copied, setCopied] = useState(false);
 
-    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-
+    const handleClick = async (event: React.MouseEvent<HTMLButtonElement>) => {
+      let success = false;
       if (onClick) {
-        onClick(event);
+        // onClick may return a boolean indicating copy success
+        const result = await Promise.resolve(onClick(event));
+        success = result === true;
+      }
+
+      if (success) {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
       }
     };
 

package/src/v2/components/chat/__tests__/CopilotChat.e2e.test.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { screen, fireEvent, waitFor } from "@testing-library/react";
+import { screen, fireEvent, waitFor, act } from "@testing-library/react";
 import { z } from "zod";
 import { defineToolCallRenderer, ReactToolCallRenderer } from "../../../types";
 import {
@@ -1060,6 +1060,128 @@ describe("CopilotChat E2E - Chat Basics and Streaming Patterns", () => {
       agent.complete();
     });
 
+    it("should not auto-collapse when user manually toggled during streaming", async () => {
+      const agent = new MockStepwiseAgent();
+      renderWithCopilotKit({ agent });
+
+      const input = await screen.findByRole("textbox");
+      fireEvent.change(input, { target: { value: "User toggle test" } });
+      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+      await waitFor(() => {
+        expect(screen.getByText("User toggle test")).toBeDefined();
+      });
+
+      const reasoningId = testId("reasoning");
+      const textId = testId("text");
+
+      // Start streaming reasoning — panel should auto-open
+      agent.emit(runStartedEvent());
+      agent.emit(reasoningStartEvent(reasoningId));
+      agent.emit(reasoningMessageStartEvent(reasoningId));
+      agent.emit(
+        reasoningMessageContentEvent(reasoningId, "Deep analysis in progress"),
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText("Thinking…")).toBeDefined();
+      });
+
+      // Panel should be open (aria-expanded="true") while streaming
+      await waitFor(() => {
+        const header = screen.getByText("Thinking…");
+        const button = header.closest("button");
+        expect(button?.getAttribute("aria-expanded")).toBe("true");
+      });
+
+      // User manually collapses during streaming — this sets userToggledRef
+      const header = screen.getByText("Thinking…");
+      const button = header.closest("button");
+      act(() => {
+        if (button) {
+          fireEvent.click(button);
+        }
+      });
+
+      // Should now be collapsed by user action
+      await waitFor(() => {
+        const btn = screen.getByText("Thinking…").closest("button");
+        expect(btn?.getAttribute("aria-expanded")).toBe("false");
+      });
+
+      // Now streaming ends — because userToggledRef is true, the panel
+      // should stay in whatever state the user set (collapsed).
+      agent.emit(reasoningMessageEndEvent(reasoningId));
+      agent.emit(reasoningEndEvent(reasoningId));
+      agent.emit(textChunkEvent(textId, "Done."));
+      agent.emit(runFinishedEvent());
+      agent.complete();
+
+      // Panel should remain collapsed (not flash open then closed)
+      await waitFor(() => {
+        const btn = screen.getByText(/Thought for/).closest("button");
+        expect(btn?.getAttribute("aria-expanded")).toBe("false");
+      });
+    });
+
+    it("should keep panel open when user re-expands during streaming", async () => {
+      const agent = new MockStepwiseAgent();
+      renderWithCopilotKit({ agent });
+
+      const input = await screen.findByRole("textbox");
+      fireEvent.change(input, {
+        target: { value: "Re-expand toggle test" },
+      });
+      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+      await waitFor(() => {
+        expect(screen.getByText("Re-expand toggle test")).toBeDefined();
+      });
+
+      const reasoningId = testId("reasoning");
+      const textId = testId("text");
+
+      // Start streaming reasoning — panel auto-opens
+      agent.emit(runStartedEvent());
+      agent.emit(reasoningStartEvent(reasoningId));
+      agent.emit(reasoningMessageStartEvent(reasoningId));
+      agent.emit(reasoningMessageContentEvent(reasoningId, "Thinking hard"));
+
+      await waitFor(() => {
+        const btn = screen.getByText("Thinking…").closest("button");
+        expect(btn?.getAttribute("aria-expanded")).toBe("true");
+      });
+
+      // User collapses, then re-expands (both set userToggledRef = true)
+      const headerEl = screen.getByText("Thinking…");
+      const btn = headerEl.closest("button");
+      act(() => {
+        if (btn) {
+          fireEvent.click(btn); // collapse
+          fireEvent.click(btn); // re-expand
+        }
+      });
+
+      await waitFor(() => {
+        const b = screen.getByText("Thinking…").closest("button");
+        expect(b?.getAttribute("aria-expanded")).toBe("true");
+      });
+
+      // Streaming ends — because userToggledRef is true, panel should
+      // stay in the user's chosen state (open).
+      agent.emit(reasoningMessageEndEvent(reasoningId));
+      agent.emit(reasoningEndEvent(reasoningId));
+      agent.emit(textChunkEvent(textId, "All done."));
+      agent.emit(runFinishedEvent());
+      agent.complete();
+
+      // Panel should remain open (not auto-collapse)
+      await waitFor(() => {
+        const b = screen.getByText(/Thought for/).closest("button");
+        expect(b?.getAttribute("aria-expanded")).toBe("true");
+      });
+    });
+
     it("should expand and collapse reasoning content on click", async () => {
       const agent = new MockStepwiseAgent();
       renderWithCopilotKit({ agent });
@@ -1094,12 +1216,16 @@ describe("CopilotChat E2E - Chat Basics and Streaming Patterns", () => {
         expect(button?.getAttribute("aria-expanded")).toBe("false");
       });
 
-      // Click to expand
+      // Click to expand — wrap in act() so React 18 flushes the state
+      // update synchronously instead of deferring it through the scheduler,
+      // which can race with waitFor polling on slow CI runners.
       const header = screen.getByText(/Thought for/);
       const button = header.closest("button");
-      if (button) {
-        fireEvent.click(button);
-      }
+      act(() => {
+        if (button) {
+          fireEvent.click(button);
+        }
+      });
 
       // Should now be expanded
       await waitFor(() => {

package/src/v2/components/chat/__tests__/CopilotChatAssistantMessage.test.tsx

@@ -669,7 +669,7 @@ describe("CopilotChatAssistantMessage", () => {
 
       await waitFor(() => {
         expect(consoleSpy).toHaveBeenCalledWith(
-          "Failed to copy message:",
+          "Failed to copy to clipboard:",
           expect.any(Error),
         );
       });