@copilotkit/react-core 1.57.3 → 1.58.0-canary.thread-id-propagation

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

@@ -1,279 +0,0 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import { z } from "zod";
-import { vi } from "vitest";
-import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
-import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
-import CopilotChatMessageView, {
-  deduplicateMessages,
-} from "../CopilotChatMessageView";
-import type {
-  ActivityMessage,
-  AssistantMessage,
-  Message,
-  ToolCall,
-  UserMessage,
-} from "@ag-ui/core";
-import type { ReactActivityMessageRenderer } from "../../../types";
-
-// ---------------------------------------------------------------------------
-// Shared constants & helpers
-// ---------------------------------------------------------------------------
-
-const AGENT_ID = "default";
-const THREAD_ID = "thread-test";
-
-/** Typed factory — avoids `as UserMessage` casts everywhere. */
-function userMsg(id: string, content: string) {
-  return { id, role: "user" as const, content };
-}
-
-/** Typed factory — avoids `as AssistantMessage` casts everywhere. */
-function assistantMsg(id: string, content?: string, toolCalls?: ToolCall[]) {
-  return { id, role: "assistant" as const, content, toolCalls };
-}
-
-/** Typed factory — avoids `as ActivityMessage` casts everywhere. */
-function activityMsg(
-  id: string,
-  activityType: string,
-  content: ActivityMessage["content"],
-) {
-  return { id, role: "activity" as const, activityType, content };
-}
-
-/** Typed factory — avoids `as any` casts on tool call objects. */
-function toolCall(id: string, name: string, args = "{}") {
-  return {
-    id,
-    type: "function" as const,
-    function: { name, arguments: args },
-  };
-}
-
-/**
- * Renders CopilotChatMessageView wrapped in the required providers.
- * Unified helper used by all describe blocks in this file.
- */
-function renderMessageView({
-  messages,
-  renderActivityMessages,
-}: {
-  messages: Message[];
-  renderActivityMessages?: ReactActivityMessageRenderer<{ percent: number }>[];
-}) {
-  return render(
-    <CopilotKitProvider renderActivityMessages={renderActivityMessages}>
-      <CopilotChatConfigurationProvider agentId={AGENT_ID} threadId={THREAD_ID}>
-        <CopilotChatMessageView messages={messages} />
-      </CopilotChatConfigurationProvider>
-    </CopilotKitProvider>,
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe("CopilotChatMessageView activity rendering", () => {
-  it("renders activity messages via matching custom renderer", () => {
-    const messages: Message[] = [
-      activityMsg("act-1", "search-progress", { percent: 42 }),
-    ];
-
-    const renderers: ReactActivityMessageRenderer<{ percent: number }>[] = [
-      {
-        activityType: "search-progress",
-        content: z.object({ percent: z.number() }),
-        render: ({ content }) => (
-          <div data-testid="activity-renderer">
-            Progress: {content.percent}%
-          </div>
-        ),
-      },
-    ];
-
-    renderMessageView({ messages, renderActivityMessages: renderers });
-
-    expect(screen.getByTestId("activity-renderer").textContent).toContain("42");
-  });
-
-  it("skips rendering when no activity renderer matches", () => {
-    const messages: Message[] = [
-      activityMsg("act-2", "unknown-type", { message: "should not render" }),
-    ];
-
-    renderMessageView({ messages, renderActivityMessages: [] });
-
-    expect(screen.queryByTestId("activity-renderer")).toBeNull();
-  });
-});
-
-describe("CopilotChatMessageView duplicate message deduplication", () => {
-  it("preserves assistant text content when later duplicate has empty content (multi-tool-call scenario)", () => {
-    const messages: Message[] = [
-      userMsg("user-1", "Record a headache"),
-      assistantMsg("assistant-1", "Let me record that..."),
-      assistantMsg("assistant-1", "", [toolCall("tc-1", "captureData")]),
-      assistantMsg("assistant-1", "", [
-        toolCall("tc-1", "captureData"),
-        toolCall("tc-2", "updateMemory"),
-      ]),
-    ];
-
-    renderMessageView({ messages });
-
-    // One merged assistant message (not three)
-    const assistantMessages = screen.getAllByTestId(
-      "copilot-assistant-message",
-    );
-    expect(assistantMessages).toHaveLength(1);
-
-    // Original text content must survive despite later empty-content duplicates
-    expect(assistantMessages[0].textContent).toContain("Let me record that...");
-  });
-
-  it("uses latest content when all assistant duplicates have non-empty content", () => {
-    const messages: Message[] = [
-      userMsg("user-1", "Hello"),
-      assistantMsg("assistant-1", "Partial response..."),
-      assistantMsg("assistant-1", "Full response from the assistant."),
-    ];
-
-    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
-
-    renderMessageView({ messages });
-
-    // Should render only the last occurrence of assistant-1 (the complete one)
-    const assistantMessages = screen.getAllByTestId(
-      "copilot-assistant-message",
-    );
-    expect(assistantMessages).toHaveLength(1);
-    expect(assistantMessages[0].textContent).toContain(
-      "Full response from the assistant.",
-    );
-
-    // Should render the user message too
-    const userMessages = screen.getAllByTestId("copilot-user-message");
-    expect(userMessages).toHaveLength(1);
-
-    // Should NOT produce React duplicate key warnings
-    const duplicateKeyWarnings = consoleSpy.mock.calls.filter(
-      (call) =>
-        typeof call[0] === "string" && call[0].includes("duplicate key"),
-    );
-    expect(duplicateKeyWarnings).toHaveLength(0);
-
-    consoleSpy.mockRestore();
-  });
-
-  it("preserves order of unique messages (no duplicates)", () => {
-    const messages: Message[] = [
-      userMsg("user-1", "First question"),
-      assistantMsg("assistant-1", "First answer"),
-      userMsg("user-2", "Second question"),
-      assistantMsg("assistant-2", "Second answer"),
-    ];
-
-    renderMessageView({ messages });
-
-    const userMessages = screen.getAllByTestId("copilot-user-message");
-    const assistantMessages = screen.getAllByTestId(
-      "copilot-assistant-message",
-    );
-    expect(userMessages).toHaveLength(2);
-    expect(assistantMessages).toHaveLength(2);
-  });
-});
-
-describe("deduplicateMessages", () => {
-  it("recovers non-empty content and keeps latest toolCalls when later duplicate clears content", () => {
-    const messages: Message[] = [
-      assistantMsg("assistant-1", "Let me record that..."),
-      assistantMsg("assistant-1", "", [toolCall("tc-1", "captureData")]),
-      assistantMsg("assistant-1", "", [
-        toolCall("tc-1", "captureData"),
-        toolCall("tc-2", "updateMemory"),
-      ]),
-    ];
-
-    const result = deduplicateMessages(messages);
-
-    expect(result).toHaveLength(1);
-    const merged = result[0] as AssistantMessage;
-    // Content recovered from the first occurrence
-    expect(merged.content).toBe("Let me record that...");
-    // toolCalls from the latest occurrence (both tc-1 and tc-2)
-    expect(merged.toolCalls).toHaveLength(2);
-    expect(merged.toolCalls?.map((tc) => tc.id)).toEqual(["tc-1", "tc-2"]);
-  });
-
-  it("uses content from a later occurrence when early occurrence has empty content", () => {
-    const messages: Message[] = [
-      assistantMsg("assistant-1", ""),
-      assistantMsg("assistant-1", "Here is the result."),
-    ];
-
-    const result = deduplicateMessages(messages);
-
-    expect(result).toHaveLength(1);
-    expect((result[0] as AssistantMessage).content).toBe("Here is the result.");
-  });
-
-  it("recovers toolCalls when a later occurrence has non-empty content but undefined toolCalls", () => {
-    // A later streaming chunk may carry updated content but omit toolCalls entirely.
-    // The earlier accumulated toolCalls must survive rather than be wiped by the spread.
-    const messages: Message[] = [
-      assistantMsg("assistant-1", "", [toolCall("tc-1", "captureData")]),
-      assistantMsg("assistant-1", "Here is the result."),
-    ];
-
-    const result = deduplicateMessages(messages);
-
-    expect(result).toHaveLength(1);
-    const merged = result[0] as AssistantMessage;
-    expect(merged.content).toBe("Here is the result.");
-    expect(merged.toolCalls).toHaveLength(1);
-    expect(merged.toolCalls?.[0]?.id).toBe("tc-1");
-  });
-
-  it("keeps empty toolCalls array from a later chunk (does not fall back to earlier toolCalls)", () => {
-    // [] means all tool calls completed — it is an intentional value, not absence.
-    // ?? must treat it as defined and keep it rather than falling back.
-    const messages: Message[] = [
-      assistantMsg("assistant-1", "", [toolCall("tc-1", "captureData")]),
-      assistantMsg("assistant-1", "Done.", []),
-    ];
-
-    const result = deduplicateMessages(messages);
-
-    expect(result).toHaveLength(1);
-    expect((result[0] as AssistantMessage).toolCalls).toEqual([]);
-  });
-
-  it("handles undefined content on both occurrences without error", () => {
-    // assistantMsg with no content arg produces content: undefined.
-    // undefined || undefined = undefined — should not throw or produce garbage.
-    const messages: Message[] = [
-      assistantMsg("assistant-1"),
-      assistantMsg("assistant-1"),
-    ];
-
-    const result = deduplicateMessages(messages);
-
-    expect(result).toHaveLength(1);
-    expect((result[0] as AssistantMessage).content).toBeUndefined();
-  });
-
-  it("keeps last entry for non-assistant roles", () => {
-    const messages: Message[] = [
-      userMsg("u-1", "Hello"),
-      userMsg("u-1", "Hello (updated)"),
-    ];
-
-    const result = deduplicateMessages(messages);
-
-    expect(result).toHaveLength(1);
-    expect((result[0] as UserMessage).content).toBe("Hello (updated)");
-  });
-});

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

@@ -1,336 +0,0 @@
-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();
-  });
-
-  // @tanstack/virtual-core 3.13.18 has a latent bug: `scrollToIndex` schedules
-  // a nested rAF that calls `this.targetWindow.requestAnimationFrame(verify)`
-  // with no null-check. The virtualizer's cleanup (run on React unmount) sets
-  // `targetWindow = null`, so if the outer rAF fires after unmount, the inner
-  // schedule throws `Cannot read properties of null (reading 'requestAnimationFrame')`.
-  //
-  // Vitest reports this as an unhandled error and exits non-zero even though
-  // every test passes. We wrap rAF (on BOTH globalThis and window — they're
-  // separate bindings in vitest+jsdom; tanstack uses `targetWindow.rAF` which
-  // resolves to `window.rAF`) so callbacks that hit the known tanstack bug
-  // are swallowed. After each test we drain pending callbacks and replace rAF
-  // with a no-op to keep stragglers from leaking into the next test.
-  const realRAF = globalThis.requestAnimationFrame;
-  const realWindowRAF =
-    typeof window !== "undefined" ? window.requestAnimationFrame : realRAF;
-
-  const isKnownTanstackTeardownError = (err: unknown): boolean => {
-    const message =
-      (err as { message?: string } | null | undefined)?.message ?? "";
-    return (
-      message.includes("Cannot read properties of null") &&
-      message.includes("requestAnimationFrame")
-    );
-  };
-
-  const wrapRAF = (real: typeof requestAnimationFrame) =>
-    ((cb: FrameRequestCallback) =>
-      real((time) => {
-        try {
-          cb(time);
-        } catch (err) {
-          if (isKnownTanstackTeardownError(err)) return;
-          throw err;
-        }
-      })) as typeof requestAnimationFrame;
-
-  const noopRAF = ((_cb: FrameRequestCallback) =>
-    0) as typeof requestAnimationFrame;
-
-  const installSafeRAF = () => {
-    globalThis.requestAnimationFrame = wrapRAF(realRAF);
-    if (typeof window !== "undefined") {
-      window.requestAnimationFrame = wrapRAF(realWindowRAF);
-    }
-  };
-
-  const installNoopRAF = () => {
-    globalThis.requestAnimationFrame = noopRAF;
-    if (typeof window !== "undefined") {
-      window.requestAnimationFrame = noopRAF;
-    }
-  };
-
-  afterEach(async () => {
-    // Best-effort drain of already-queued rAF callbacks.
-    await act(async () => {
-      await new Promise<void>((r) => realRAF(() => r()));
-      await new Promise<void>((r) => realRAF(() => r()));
-    });
-    // Neuter rAF so callbacks scheduled during RTL cleanup are harmless.
-    installNoopRAF();
-  });
-
-  beforeEach(() => {
-    // Install the error-swallowing wrap on rAF for the upcoming test.
-    installSafeRAF();
-  });
-
-  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);
-  });
-});