@copilotkit/react-core 1.55.3 → 1.56.1

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),
         );
       });

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

@@ -0,0 +1,72 @@
+import React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { AssistantMessage } from "@ag-ui/core";
+import { CopilotChatAssistantMessage } from "../CopilotChatAssistantMessage";
+import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
+import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
+
+const TEST_THREAD_ID = "test-thread";
+
+const renderWithProvider = (component: React.ReactElement) => {
+  return render(
+    <CopilotKitProvider>
+      <CopilotChatConfigurationProvider threadId={TEST_THREAD_ID}>
+        {component}
+      </CopilotChatConfigurationProvider>
+    </CopilotKitProvider>,
+  );
+};
+
+describe("CopilotChatAssistantMessage thumbs callbacks (#3457)", () => {
+  const message: AssistantMessage = {
+    id: "msg-1",
+    role: "assistant",
+    content: "Hello from the assistant",
+  };
+
+  it("onThumbsUp receives AssistantMessage, not SyntheticEvent", () => {
+    const onThumbsUp = vi.fn();
+
+    renderWithProvider(
+      <CopilotChatAssistantMessage message={message} onThumbsUp={onThumbsUp} />,
+    );
+
+    const thumbsUpButton = screen.getByRole("button", {
+      name: /good response/i,
+    });
+    fireEvent.click(thumbsUpButton);
+
+    expect(onThumbsUp).toHaveBeenCalledTimes(1);
+    const arg = onThumbsUp.mock.calls[0][0];
+    // Should receive AssistantMessage
+    expect(arg).toHaveProperty("id", "msg-1");
+    expect(arg).toHaveProperty("role", "assistant");
+    expect(arg).toHaveProperty("content", "Hello from the assistant");
+    // Should NOT receive a SyntheticEvent (which has nativeEvent, target, etc.)
+    expect(arg).not.toHaveProperty("nativeEvent");
+  });
+
+  it("onThumbsDown receives AssistantMessage, not SyntheticEvent", () => {
+    const onThumbsDown = vi.fn();
+
+    renderWithProvider(
+      <CopilotChatAssistantMessage
+        message={message}
+        onThumbsDown={onThumbsDown}
+      />,
+    );
+
+    const thumbsDownButton = screen.getByRole("button", {
+      name: /bad response/i,
+    });
+    fireEvent.click(thumbsDownButton);
+
+    expect(onThumbsDown).toHaveBeenCalledTimes(1);
+    const arg = onThumbsDown.mock.calls[0][0];
+    expect(arg).toHaveProperty("id", "msg-1");
+    expect(arg).toHaveProperty("role", "assistant");
+    expect(arg).toHaveProperty("content", "Hello from the assistant");
+    expect(arg).not.toHaveProperty("nativeEvent");
+  });
+});

package/src/v2/components/chat/__tests__/CopilotChatCopyButton.clipboard.test.tsx

@@ -0,0 +1,241 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { CopilotChatAssistantMessage } from "../CopilotChatAssistantMessage";
+import { CopilotChatUserMessage } from "../CopilotChatUserMessage";
+import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
+import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
+import { AssistantMessage, UserMessage } from "@ag-ui/core";
+
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <CopilotKitProvider>
+    <CopilotChatConfigurationProvider threadId="test-thread">
+      {children}
+    </CopilotChatConfigurationProvider>
+  </CopilotKitProvider>
+);
+
+const createAssistantMessage = (content: string): AssistantMessage => ({
+  id: "msg-assistant-1",
+  role: "assistant",
+  content,
+});
+
+const createUserMessage = (content: string): UserMessage => ({
+  id: "msg-user-1",
+  role: "user",
+  content,
+});
+
+describe("CopyButton clipboard behavior", () => {
+  let originalClipboard: Clipboard;
+
+  beforeEach(() => {
+    originalClipboard = navigator.clipboard;
+  });
+
+  afterEach(() => {
+    Object.defineProperty(navigator, "clipboard", {
+      value: originalClipboard,
+      writable: true,
+      configurable: true,
+    });
+  });
+
+  describe("AssistantMessage CopyButton", () => {
+    it("shows copied state only after successful clipboard write", async () => {
+      const writeTextMock = vi.fn().mockResolvedValue(undefined);
+      Object.defineProperty(navigator, "clipboard", {
+        value: { writeText: writeTextMock },
+        writable: true,
+        configurable: true,
+      });
+
+      const message = createAssistantMessage("Hello assistant");
+      render(
+        <TestWrapper>
+          <CopilotChatAssistantMessage message={message} />
+        </TestWrapper>,
+      );
+
+      const copyButton = screen.getByTestId("copilot-copy-button");
+      fireEvent.click(copyButton);
+
+      await waitFor(() => {
+        expect(writeTextMock).toHaveBeenCalledWith("Hello assistant");
+      });
+
+      // After successful write, should show check icon
+      await waitFor(() => {
+        const checkIcon = copyButton.querySelector(".lucide-check");
+        expect(checkIcon).not.toBeNull();
+      });
+    });
+
+    it("does NOT show copied state when clipboard API is unavailable", async () => {
+      Object.defineProperty(navigator, "clipboard", {
+        value: undefined,
+        writable: true,
+        configurable: true,
+      });
+
+      const message = createAssistantMessage("Hello assistant");
+      render(
+        <TestWrapper>
+          <CopilotChatAssistantMessage message={message} />
+        </TestWrapper>,
+      );
+
+      const copyButton = screen.getByTestId("copilot-copy-button");
+      fireEvent.click(copyButton);
+
+      // Wait a tick for any async handlers
+      await new Promise((r) => setTimeout(r, 50));
+
+      // Should still show copy icon (not check icon)
+      const checkIcon = copyButton.querySelector(".lucide-check");
+      expect(checkIcon).toBeNull();
+      const copyIcon = copyButton.querySelector(".lucide-copy");
+      expect(copyIcon).not.toBeNull();
+    });
+
+    it("logs error when clipboard write rejects", async () => {
+      const writeTextMock = vi
+        .fn()
+        .mockRejectedValue(new Error("Permission denied"));
+      Object.defineProperty(navigator, "clipboard", {
+        value: { writeText: writeTextMock },
+        writable: true,
+        configurable: true,
+      });
+
+      const consoleSpy = vi
+        .spyOn(console, "error")
+        .mockImplementation(() => {});
+
+      const message = createAssistantMessage("Hello assistant");
+      render(
+        <TestWrapper>
+          <CopilotChatAssistantMessage message={message} />
+        </TestWrapper>,
+      );
+
+      const copyButton = screen.getByTestId("copilot-copy-button");
+      fireEvent.click(copyButton);
+
+      await waitFor(() => {
+        expect(writeTextMock).toHaveBeenCalled();
+      });
+
+      await waitFor(() => {
+        expect(consoleSpy).toHaveBeenCalledWith(
+          "Failed to copy to clipboard:",
+          expect.any(Error),
+        );
+      });
+
+      // Should NOT show copied state when write failed
+      const checkIcon = copyButton.querySelector(".lucide-check");
+      expect(checkIcon).toBeNull();
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe("UserMessage CopyButton", () => {
+    it("shows copied state only after successful clipboard write", async () => {
+      const writeTextMock = vi.fn().mockResolvedValue(undefined);
+      Object.defineProperty(navigator, "clipboard", {
+        value: { writeText: writeTextMock },
+        writable: true,
+        configurable: true,
+      });
+
+      const message = createUserMessage("Hello user");
+      render(
+        <TestWrapper>
+          <CopilotChatUserMessage message={message} />
+        </TestWrapper>,
+      );
+
+      const copyButton = screen.getByTestId("copilot-user-copy-button");
+      fireEvent.click(copyButton);
+
+      await waitFor(() => {
+        expect(writeTextMock).toHaveBeenCalledWith("Hello user");
+      });
+
+      await waitFor(() => {
+        const checkIcon = copyButton.querySelector(".lucide-check");
+        expect(checkIcon).not.toBeNull();
+      });
+    });
+
+    it("does NOT show copied state when clipboard API is unavailable", async () => {
+      Object.defineProperty(navigator, "clipboard", {
+        value: undefined,
+        writable: true,
+        configurable: true,
+      });
+
+      const message = createUserMessage("Hello user");
+      render(
+        <TestWrapper>
+          <CopilotChatUserMessage message={message} />
+        </TestWrapper>,
+      );
+
+      const copyButton = screen.getByTestId("copilot-user-copy-button");
+      fireEvent.click(copyButton);
+
+      await new Promise((r) => setTimeout(r, 50));
+
+      const checkIcon = copyButton.querySelector(".lucide-check");
+      expect(checkIcon).toBeNull();
+      const copyIcon = copyButton.querySelector(".lucide-copy");
+      expect(copyIcon).not.toBeNull();
+    });
+
+    it("logs error when clipboard write rejects", async () => {
+      const writeTextMock = vi
+        .fn()
+        .mockRejectedValue(new Error("Permission denied"));
+      Object.defineProperty(navigator, "clipboard", {
+        value: { writeText: writeTextMock },
+        writable: true,
+        configurable: true,
+      });
+
+      const consoleSpy = vi
+        .spyOn(console, "error")
+        .mockImplementation(() => {});
+
+      const message = createUserMessage("Hello user");
+      render(
+        <TestWrapper>
+          <CopilotChatUserMessage message={message} />
+        </TestWrapper>,
+      );
+
+      const copyButton = screen.getByTestId("copilot-user-copy-button");
+      fireEvent.click(copyButton);
+
+      await waitFor(() => {
+        expect(writeTextMock).toHaveBeenCalled();
+      });
+
+      await waitFor(() => {
+        expect(consoleSpy).toHaveBeenCalledWith(
+          "Failed to copy to clipboard:",
+          expect.any(Error),
+        );
+      });
+
+      // Should NOT show copied state when write failed
+      const checkIcon = copyButton.querySelector(".lucide-check");
+      expect(checkIcon).toBeNull();
+
+      consoleSpy.mockRestore();
+    });
+  });
+});

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

@@ -985,6 +985,44 @@ describe("CopilotChatInput", () => {
       expect((input as HTMLTextAreaElement).value).toBe("test message");
       expect(mockOnSubmitMessage).toHaveBeenCalledWith("test message");
     });
+
+    it("calls onChange with empty string after submission in controlled mode", () => {
+      const mockOnChange = vi.fn();
+      const mockOnSubmitMessage = vi.fn();
+
+      const { container } = renderWithProvider(
+        <CopilotChatInput
+          value="test message"
+          onChange={mockOnChange}
+          onSubmitMessage={mockOnSubmitMessage}
+        />,
+      );
+
+      const sendButton = getSendButton(container);
+      fireEvent.click(sendButton!);
+
+      expect(mockOnSubmitMessage).toHaveBeenCalledWith("test message");
+      expect(mockOnChange).toHaveBeenCalledWith("");
+    });
+
+    it("calls onChange with empty string after Enter submission in controlled mode", () => {
+      const mockOnChange = vi.fn();
+      const mockOnSubmitMessage = vi.fn();
+
+      renderWithProvider(
+        <CopilotChatInput
+          value="hello world"
+          onChange={mockOnChange}
+          onSubmitMessage={mockOnSubmitMessage}
+        />,
+      );
+
+      const input = screen.getByRole("textbox");
+      fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
+
+      expect(mockOnSubmitMessage).toHaveBeenCalledWith("hello world");
+      expect(mockOnChange).toHaveBeenCalledWith("");
+    });
   });
 
   describe("Container dimension cache", () => {

package/src/v2/components/ui/button.tsx

@@ -99,25 +99,26 @@ const buttonVariants = cva(
   },
 );
 
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> &
+    VariantProps<typeof buttonVariants> & {
+      asChild?: boolean;
+    }
+>(function Button(
+  { className, variant, size, asChild = false, ...props },
+  ref,
+) {
   const Comp = asChild ? Slot : "button";
 
   return (
     <Comp
+      ref={ref}
       data-slot="button"
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
   );
-}
+});
 
 export { Button, buttonVariants };

package/src/v2/hooks/__tests__/use-agent-throttle.test.tsx

@@ -313,7 +313,7 @@ describe("useAgent throttleMs", () => {
     expect(screen.getByTestId("count").textContent).toBe("3");
   });
 
-  it("with throttleMs, onStateChanged still fires immediately", () => {
+  it("with throttleMs, onStateChanged still fires immediately", async () => {
     const TestComponent = createTestComponent({
       updates: [
         UseAgentUpdate.OnMessagesChanged,
@@ -330,8 +330,8 @@ describe("useAgent throttleMs", () => {
       notifyMessagesChanged(mockAgent);
     });
 
-    // Fire onStateChanged 10ms later — should render immediately, not throttled
-    act(() => {
+    // Fire onStateChanged 10ms later — fires via microtask batch (not synchronously)
+    await act(async () => {
       vi.advanceTimersByTime(10);
       mockAgent.state = { count: 42 };
       notifyStateChanged(mockAgent);
@@ -372,7 +372,7 @@ describe("useAgent throttleMs", () => {
     expect(renderCount.current).toBe(countBeforeUnmount);
   });
 
-  it("with throttleMs and updates excluding OnMessagesChanged, throttle is a no-op", () => {
+  it("with throttleMs and updates excluding OnMessagesChanged, throttle is a no-op", async () => {
     const TestComponent = createTestComponent({
       updates: [UseAgentUpdate.OnStateChanged],
       throttleMs: 100,
@@ -380,8 +380,8 @@ describe("useAgent throttleMs", () => {
 
     render(<TestComponent />);
 
-    // Only onStateChanged is subscribed — should fire immediately
-    act(() => {
+    // Only onStateChanged is subscribed — fires via microtask batch
+    await act(async () => {
       mockAgent.state = { value: "test" };
       notifyStateChanged(mockAgent);
     });
@@ -649,7 +649,7 @@ describe("useAgent throttleMs", () => {
     expect(renderCount.current).toBe(rendersAfterMount + 1);
   });
 
-  it("with throttleMs, onRunInitialized still fires immediately during throttle window", () => {
+  it("with throttleMs, onRunInitialized still fires immediately during throttle window", async () => {
     const renderCount = { current: 0 };
     const TestComponent = createTestComponent({
       updates: [
@@ -670,13 +670,13 @@ describe("useAgent throttleMs", () => {
     });
     expect(renderCount.current).toBe(rendersAfterMount + 1);
 
-    // Fire onRunInitialized 10ms later — should render immediately
-    act(() => {
+    // Fire onRunInitialized 10ms later — fires via microtask batch
+    await act(async () => {
       vi.advanceTimersByTime(10);
       notifyRunInitialized(mockAgent);
     });
 
-    // Run status notification is NOT throttled — renders immediately
+    // Run status notification fires via microtask batch
     expect(renderCount.current).toBe(rendersAfterMount + 2);
   });