@copilotkit/react-core 1.55.0-next.9 → 1.55.1-next.0

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

@@ -0,0 +1,268 @@
+import React from "react";
+import { act, screen, fireEvent, waitFor } from "@testing-library/react";
+import {
+  MockStepwiseAgent,
+  renderWithCopilotKit,
+  runStartedEvent,
+  runFinishedEvent,
+  textChunkEvent,
+  stateSnapshotEvent,
+  generateMessages,
+} from "../../../__tests__/utils/test-helpers";
+import { CopilotChat } from "../CopilotChat";
+import { CopilotChatAssistantMessage } from "../CopilotChatAssistantMessage";
+import CopilotChatMessageView from "../CopilotChatMessageView";
+import { ScrollElementContext } from "../scroll-element-context";
+import type { Message } from "@ag-ui/core";
+
+// ---------------------------------------------------------------------------
+// Spy component — must be module-level so its reference is stable across
+// renders. MemoizedAssistantMessage's custom comparator bails out if
+// AssistantMessageComponent changes reference, so an unstable spy would
+// produce false positives.
+// ---------------------------------------------------------------------------
+const renderCounts = new Map<string, number>();
+
+const SpyAssistantMessage = (
+  props: React.ComponentProps<typeof CopilotChatAssistantMessage>,
+) => {
+  renderCounts.set(
+    props.message.id,
+    (renderCounts.get(props.message.id) ?? 0) + 1,
+  );
+  return React.createElement(CopilotChatAssistantMessage, props);
+};
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Render CopilotChat with the spy wired in as the assistant message component. */
+function renderWithSpy(agent: MockStepwiseAgent) {
+  return renderWithCopilotKit({
+    agent,
+    children: (
+      <div style={{ height: 400 }}>
+        <CopilotChat
+          welcomeScreen={false}
+          messageView={
+            {
+              assistantMessage:
+                SpyAssistantMessage as unknown as typeof CopilotChatAssistantMessage,
+            } as any
+          }
+        />
+      </div>
+    ),
+  });
+}
+
+/**
+ * Submit a dummy user message so CopilotChat calls agent.run() and subscribes
+ * to the Subject. Without this, emitted events are dropped since nothing is
+ * listening to the observable yet.
+ */
+async function triggerRun() {
+  const input = await screen.findByRole("textbox");
+  fireEvent.change(input, { target: { value: "go" } });
+  fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+  // Wait for the user message to appear in the DOM before emitting agent events
+  await waitFor(() => {
+    expect(screen.getByText("go")).toBeDefined();
+  });
+}
+
+/**
+ * Trigger a run then emit generateMessages(n) and wait for all n assistant
+ * messages to have been rendered at least once by the spy.
+ */
+async function emitBatch(agent: MockStepwiseAgent, n: number) {
+  await triggerRun();
+
+  agent.emit(runStartedEvent());
+  for (const event of generateMessages(n)) {
+    agent.emit(event);
+  }
+  // Don't call agent.complete() — that terminates the Subject and subsequent
+  // agent.emit() calls would be silently dropped. runFinishedEvent() alone is
+  // sufficient to mark the run as done without closing the stream.
+  agent.emit(runFinishedEvent());
+
+  await waitFor(
+    () => {
+      expect(renderCounts.size).toBeGreaterThanOrEqual(n);
+    },
+    { timeout: 10_000 },
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+// Note: the virtual render path (useVirtualizer, activated above VIRTUALIZE_THRESHOLD=50)
+// is not exercised here. jsdom always returns clientHeight=0, which causes the
+// jsdom guard in CopilotChatMessageView to skip virtualization. The 100-message
+// test below runs the flat path even at 100 messages. Browser/Playwright tests
+// are required to cover the virtual path.
+//
+// Note: the MemoizedAssistantMessage comparator is not tested for the case where
+// a non-last message's content changes after being committed. A bug returning
+// `true` (bail-out) in that scenario would cause stale renders silently.
+
+describe("CopilotChat perf — re-render regression", () => {
+  beforeEach(() => {
+    renderCounts.clear();
+  });
+
+  it("completed messages do not re-render when a new message is added", async () => {
+    const agent = new MockStepwiseAgent();
+    renderWithSpy(agent);
+
+    await emitBatch(agent, 20);
+
+    const baselineCounts = new Map(renderCounts);
+    expect(baselineCounts.size).toBeGreaterThan(0);
+
+    // Add one fresh assistant message in a second run
+    const newMsgId = "perf-new-assistant-msg";
+    agent.emit(runStartedEvent());
+    agent.emit(textChunkEvent(newMsgId, "A brand new message"));
+    agent.emit(runFinishedEvent());
+    agent.complete();
+
+    await waitFor(() => {
+      expect(renderCounts.get(newMsgId)).toBeGreaterThan(0);
+    });
+
+    // None of the original 20 assistant messages should have re-rendered
+    for (const [id, count] of baselineCounts) {
+      expect(renderCounts.get(id)).toBe(count);
+    }
+  });
+
+  it("completed messages do not re-render when a state snapshot arrives", async () => {
+    const agent = new MockStepwiseAgent();
+    renderWithSpy(agent);
+
+    await emitBatch(agent, 10);
+
+    const baselineCounts = new Map(renderCounts);
+
+    // STATE_SNAPSHOT triggers forceUpdate inside CopilotChatMessageView.
+    // With deduplicatedMessages memoized on [messages], the same messages
+    // array reference is passed down and MemoizedAssistantMessage wrappers
+    // should not re-render.
+    agent.emit(stateSnapshotEvent({ counter: 1 }));
+    agent.emit(stateSnapshotEvent({ counter: 2 }));
+
+    // Flush React's update queue so all snapshot-triggered re-renders are
+    // committed before we inspect render counts. The Observable subscription
+    // ends after RUN_FINISHED so we cannot use a sentinel message to create a
+    // positive signal; act+tick is the idiomatic jsdom alternative.
+    await act(async () => {
+      await new Promise<void>((r) => setTimeout(r, 50));
+    });
+
+    // None of the original 10 assistant messages should have re-rendered
+    for (const [id, count] of baselineCounts) {
+      expect(renderCounts.get(id)).toBe(count);
+    }
+  });
+
+  it("virtual path: renders only a window of messages above VIRTUALIZE_THRESHOLD", async () => {
+    const TOTAL = 60; // above VIRTUALIZE_THRESHOLD (50)
+
+    // Create a fake scroll element that passes two jsdom guards:
+    // 1. clientHeight > 0 — our guard in CopilotChatMessageView
+    // 2. getBoundingClientRect().height > 0 — TanStack Virtual calls this
+    //    immediately in observeElementRect() to set the viewport size. Without
+    //    this, it overrides initialRect with { height: 0 } and renders no items.
+    const fakeScrollEl = document.createElement("div");
+    Object.defineProperty(fakeScrollEl, "clientHeight", {
+      get: () => 600,
+      configurable: true,
+    });
+    fakeScrollEl.getBoundingClientRect = () =>
+      ({
+        height: 600,
+        width: 800,
+        top: 0,
+        left: 0,
+        bottom: 600,
+        right: 800,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+      }) as DOMRect;
+
+    const messages: Message[] = Array.from({ length: TOTAL }, (_, i) => ({
+      id: `virt-msg-${i}`,
+      role: "assistant" as const,
+      content: `Message ${i}`,
+    }));
+
+    const { unmount } = renderWithCopilotKit({
+      children: (
+        <ScrollElementContext.Provider value={fakeScrollEl}>
+          <div style={{ height: 600 }}>
+            <CopilotChatMessageView messages={messages} />
+          </div>
+        </ScrollElementContext.Provider>
+      ),
+    });
+
+    await waitFor(() => {
+      // The virtual container div (position:relative, height = estimateSize × count)
+      // must exist — this confirms the virtual code path activated.
+      const virtualContainer = document.querySelector(
+        '[data-testid="copilot-message-list"] > div[style*="position: relative"]',
+      );
+      expect(virtualContainer).not.toBeNull();
+      // jsdom can't measure the viewport (getBoundingClientRect returns {height:0}
+      // for child elements that TanStack Virtual measures internally), so
+      // getVirtualItems() returns []. nodes.length === 0, which is still less
+      // than TOTAL — virtualization is active even if the window is empty in jsdom.
+      const nodes = document.querySelectorAll("[data-message-id]");
+      expect(nodes.length).toBeLessThan(TOTAL);
+    });
+
+    // Drain pending animation frames before unmounting. TanStack Virtual
+    // schedules rAF callbacks for measurement; if they fire after jsdom tears
+    // down (window === null) they produce a spurious uncaught exception.
+    await act(async () => {
+      await new Promise<void>((r) => requestAnimationFrame(() => r()));
+      await new Promise<void>((r) => requestAnimationFrame(() => r()));
+    });
+    unmount();
+  });
+
+  it("renders 100 messages without error and within 5 s", async () => {
+    const agent = new MockStepwiseAgent();
+    renderWithCopilotKit({ agent });
+
+    await triggerRun();
+
+    const start = performance.now();
+
+    agent.emit(runStartedEvent());
+    for (const event of generateMessages(100)) {
+      agent.emit(event);
+    }
+    agent.emit(runFinishedEvent());
+    agent.complete();
+
+    await waitFor(
+      () => {
+        const nodes = document.querySelectorAll("[data-message-id]");
+        expect(nodes.length).toBeGreaterThanOrEqual(100);
+      },
+      { timeout: 5_000 },
+    );
+
+    const elapsed = performance.now() - start;
+    // 5 000 ms is a generous CI-safe ceiling; the /perf page is the right tool
+    // for tighter measurements against browser rendering.
+    expect(elapsed).toBeLessThan(5_000);
+  });
+});

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

@@ -0,0 +1,249 @@
+/**
+ * Regression tests for FOR-75: messageView / labels props freeze
+ *
+ * These tests prove that passing `messageView` or `labels` as inline props
+ * to CopilotChat does NOT cause completed assistant messages to re-render on
+ * every keystroke.
+ *
+ * Tests FAIL on unfixed code (reproducing the bug).
+ * Tests PASS after the fix is applied.
+ *
+ * Render counts are deterministic regardless of hardware — the bug is about
+ * reference instability, not wall-clock timing.
+ */
+import React from "react";
+import {
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+  act,
+} from "@testing-library/react";
+import {
+  AbstractAgent,
+  EventType,
+  type BaseEvent,
+  type RunAgentInput,
+} from "@ag-ui/client";
+import { Observable, Subject } from "rxjs";
+import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
+import { CopilotChat } from "../CopilotChat";
+import { CopilotChatAssistantMessage } from "../CopilotChatAssistantMessage";
+import { useCopilotChatConfiguration } from "../../../providers/CopilotChatConfigurationProvider";
+
+// ---------------------------------------------------------------------------
+// Shared mock agent (same pattern as CopilotChatToolRerenders.e2e.test.tsx)
+// ---------------------------------------------------------------------------
+class MockStepwiseAgent extends AbstractAgent {
+  private subject = new Subject<BaseEvent>();
+
+  emit(event: BaseEvent) {
+    if (event.type === EventType.RUN_STARTED) {
+      this.isRunning = true;
+    } else if (
+      event.type === EventType.RUN_FINISHED ||
+      event.type === EventType.RUN_ERROR
+    ) {
+      this.isRunning = false;
+    }
+    act(() => {
+      this.subject.next(event);
+    });
+  }
+
+  complete() {
+    this.isRunning = false;
+    this.subject.complete();
+  }
+
+  clone(): MockStepwiseAgent {
+    const cloned = new MockStepwiseAgent();
+    cloned.agentId = this.agentId;
+    (cloned as unknown as { subject: Subject<BaseEvent> }).subject =
+      this.subject;
+    return cloned;
+  }
+
+  async detachActiveRun(): Promise<void> {}
+
+  run(_input: RunAgentInput): Observable<BaseEvent> {
+    return this.subject.asObservable();
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Helper: submit a user message (triggers agent.run()), then emit a complete
+// assistant response and wait for the counting component to appear in the DOM.
+//
+// Uses data-testid rather than text content to avoid false positives from
+// components that render fixed strings regardless of the message payload.
+// ---------------------------------------------------------------------------
+async function submitAndReceiveAssistantMessage(
+  agent: MockStepwiseAgent,
+  messageId: string,
+) {
+  const input = await screen.findByRole("textbox");
+  fireEvent.change(input, { target: { value: "hello" } });
+  fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+  await waitFor(() => {
+    expect(screen.getByText("hello")).toBeDefined();
+  });
+
+  agent.emit({ type: EventType.RUN_STARTED } as BaseEvent);
+  agent.emit({
+    type: EventType.TEXT_MESSAGE_CHUNK,
+    messageId,
+    delta: "assistant reply",
+  } as BaseEvent);
+  agent.emit({ type: EventType.RUN_FINISHED } as BaseEvent);
+
+  await waitFor(() => {
+    expect(screen.getByTestId("counting-assistant")).toBeDefined();
+  });
+
+  await act(async () => {
+    agent.complete();
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Test 1 — messageView inline object
+//
+// Counting component defined OUTSIDE the test so its function reference is
+// stable. The outer messageView object is inline (new ref on every render),
+// which is what triggers the bug.
+// ---------------------------------------------------------------------------
+let assistantRenderCount = 0;
+function CountingAssistantMessage(
+  _props: React.ComponentProps<typeof CopilotChatAssistantMessage>,
+) {
+  assistantRenderCount++;
+  return <div data-testid="counting-assistant" />;
+}
+
+// ---------------------------------------------------------------------------
+// Test 2 — labels inline object
+//
+// Reads directly from useCopilotChatConfiguration() so that context churn
+// (caused by the labels fix being absent) is observable independently of
+// whether the messageView slot is re-rendered. Context consumers re-render
+// when their context value changes regardless of parent memoization, so this
+// is a genuine guard for the labels stabilization fix.
+// ---------------------------------------------------------------------------
+let labelConsumerRenderCount = 0;
+function LabelConsumerMessage(
+  _props: React.ComponentProps<typeof CopilotChatAssistantMessage>,
+) {
+  useCopilotChatConfiguration(); // subscribe to CopilotChatConfiguration context
+  labelConsumerRenderCount++;
+  return <div data-testid="counting-assistant" />;
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("FOR-75: messageView / labels props — no re-renders on input change", () => {
+  beforeEach(() => {
+    assistantRenderCount = 0;
+    labelConsumerRenderCount = 0;
+  });
+
+  /**
+   * Test 1: messageView inline object
+   *
+   * When `messageView` is passed as an inline object prop (e.g.
+   * `messageView={{ assistantMessage: Cmp }}`), a new object reference is
+   * created on every parent render. Without the fix, ts-deepmerge clones the
+   * value, producing a new reference that defeats MemoizedSlotWrapper's
+   * shallow equality check → the whole message list re-renders on every
+   * keystroke.
+   *
+   * Fix: useShallowStableRef in CopilotChat.tsx keeps the same object
+   * reference as long as the slot props are shallowly equal.
+   */
+  it("messageView inline object: completed messages do not re-render on keystroke", async () => {
+    const agent = new MockStepwiseAgent();
+
+    render(
+      <CopilotKitProvider agents__unsafe_dev_only={{ default: agent }}>
+        <div style={{ height: 400 }}>
+          <CopilotChat
+            messageView={{
+              assistantMessage:
+                CountingAssistantMessage as unknown as typeof CopilotChatAssistantMessage,
+            }}
+          />
+        </div>
+      </CopilotKitProvider>,
+    );
+
+    await submitAndReceiveAssistantMessage(agent, "msg-1");
+
+    const renderCountAfterMessage = assistantRenderCount;
+    expect(renderCountAfterMessage).toBeGreaterThan(0);
+
+    // Type into the input — only inputValue state changes; messages unchanged.
+    // Completed messages must NOT re-render.
+    const input = screen.getByRole("textbox");
+    fireEvent.change(input, { target: { value: "a" } });
+    fireEvent.change(input, { target: { value: "ab" } });
+    fireEvent.change(input, { target: { value: "abc" } });
+
+    await act(async () => {});
+
+    expect(assistantRenderCount).toBe(renderCountAfterMessage);
+  });
+
+  /**
+   * Test 2: labels inline object
+   *
+   * When `labels` is passed as an inline object, it is a new reference every
+   * render. Without the fix, this invalidates the mergedLabels useMemo in
+   * CopilotChatConfigurationProvider → new context value → all context
+   * consumers re-render on every keystroke.
+   *
+   * LabelConsumerMessage reads directly from useCopilotChatConfiguration(),
+   * making it a genuine guard for this fix: context consumers re-render when
+   * their context value changes regardless of parent memo boundaries, so
+   * labelConsumerRenderCount increases if the labels fix is regressed.
+   *
+   * Fix: useJsonStable in CopilotChatConfigurationProvider stabilizes the
+   * labels reference so the context value doesn't change when the caller
+   * passes an inline object.
+   */
+  it("labels inline object: context consumers do not re-render on keystroke", async () => {
+    const agent = new MockStepwiseAgent();
+
+    render(
+      <CopilotKitProvider agents__unsafe_dev_only={{ default: agent }}>
+        <div style={{ height: 400 }}>
+          <CopilotChat
+            messageView={{
+              assistantMessage:
+                LabelConsumerMessage as unknown as typeof CopilotChatAssistantMessage,
+            }}
+            // Inline labels object — new reference on every render of the
+            // parent. Without the fix, this churns the context value.
+            labels={{ chatInputPlaceholder: "Type here..." }}
+          />
+        </div>
+      </CopilotKitProvider>,
+    );
+
+    await submitAndReceiveAssistantMessage(agent, "msg-labels-1");
+
+    const renderCountAfterMessage = labelConsumerRenderCount;
+    expect(renderCountAfterMessage).toBeGreaterThan(0);
+
+    const input = screen.getByRole("textbox");
+    fireEvent.change(input, { target: { value: "a" } });
+    fireEvent.change(input, { target: { value: "ab" } });
+    fireEvent.change(input, { target: { value: "abc" } });
+
+    await act(async () => {});
+
+    expect(labelConsumerRenderCount).toBe(renderCountAfterMessage);
+  });
+});

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

@@ -8,6 +8,7 @@
  * 4. Tool calls proxied back through the agent
  */
 import { fireEvent, screen, waitFor, act } from "@testing-library/react";
+import { z } from "zod";
 import { vi } from "vitest";
 import {
   activitySnapshotEvent,
@@ -94,6 +95,44 @@ class MockMCPProxyAgent extends AbstractAgent {
     (cloned as unknown as Internal).runAgentResponses = (
       this as unknown as Internal
     ).runAgentResponses;
+    // Share isRunning with the original so that emit(runFinishedEvent()) on the
+    // registry is visible to waitForAgentIdle() which now receives the clone.
+    //
+    // Also proxy runAgent dynamically so tests that monkey-patch agent.runAgent
+    // after renderWithCopilotKit (which creates the clone) still take effect.
+    // The clone is created and cached before tests can override runAgent, so a
+    // static copy would always see the pre-patch prototype method.
+    const registry = this;
+    Object.defineProperty(cloned, "isRunning", {
+      get() {
+        return registry.isRunning;
+      },
+      set(v: boolean) {
+        registry.isRunning = v;
+      },
+      configurable: true,
+      enumerable: true,
+    });
+    // Override runAgent so that:
+    // - Proxied MCP requests delegate to registry.runAgent (picking up any
+    //   monkey-patches the test installed after renderWithCopilotKit).
+    // - User-message runs call the prototype method with `this = clone` so
+    //   that clone.messages is updated (CopilotKit renders clone.messages).
+    const proto = MockMCPProxyAgent.prototype;
+    cloned.runAgent = async function (
+      input?: Partial<RunAgentInput>,
+    ): Promise<RunAgentResult> {
+      const proxiedRequest = input?.forwardedProps?.__proxiedMCPRequest;
+      if (proxiedRequest) {
+        // Delegate to the registry so that monkey-patches applied by tests
+        // (e.g. "throws an error", "uses a controlled promise") take effect.
+        return registry.runAgent(input);
+      }
+      // For user-message runs: call the prototype method bound to the clone
+      // so AbstractAgent.runAgent processes events on clone and updates
+      // clone.messages (which is what CopilotKit reads to render messages).
+      return proto.runAgent.call(cloned, input);
+    };
     return cloned;
   }
 
@@ -605,12 +644,14 @@ describe("MCP Apps Activity Renderer E2E", () => {
       agent.agentId = agentId;
 
       // Custom renderer that overrides the built-in
-      const customRenderer: ReactActivityMessageRenderer<unknown> = {
+      const customRenderer: ReactActivityMessageRenderer<
+        z.infer<typeof MCPAppsActivityContentSchema>
+      > = {
         activityType: MCPAppsActivityType,
         content: MCPAppsActivityContentSchema,
         render: ({ content }) => (
           <div data-testid="custom-mcp-renderer">
-            Custom MCP Renderer: {(content as any).resourceUri}
+            Custom MCP Renderer: {content.resourceUri}
           </div>
         ),
       };