@copilotkit/react-core 1.56.2 → 1.56.4

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

@@ -1,7 +1,9 @@
 import React from "react";
-import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { z } from "zod";
+import { EventType } from "@ag-ui/client";
 import {
+  MockReconnectableAgent,
   MockStepwiseAgent,
   activitySnapshotEvent,
   renderWithCopilotKit,
@@ -9,10 +11,164 @@ import {
   runStartedEvent,
   testId,
 } from "../../../__tests__/utils/test-helpers";
-import { ReactActivityMessageRenderer } from "../../../types";
-import { useCopilotKit } from "../../../providers";
-import { AbstractAgent } from "@ag-ui/client";
+import type { ReactActivityMessageRenderer } from "../../../types";
+import {
+  CopilotChatConfigurationProvider,
+  CopilotKitProvider,
+  useCopilotKit,
+} from "../../../providers";
+import type { AbstractAgent } from "@ag-ui/client";
+import { IntelligenceAgent } from "@copilotkit/core";
 import { getThreadClone } from "../../../hooks/use-agent";
+import { createA2UIMessageRenderer } from "../../../a2ui/A2UIMessageRenderer";
+import type { Theme } from "@copilotkit/a2ui-renderer";
+import { CopilotChat } from "..";
+
+const {
+  mockWebsandboxCreate,
+  mockWebsandboxDestroy,
+  mockPhoenixSockets,
+  MockPhoenixSocket,
+} = vi.hoisted(() => {
+  const mockDestroy = vi.fn();
+  const mockCreate = vi.fn((..._args: unknown[]) => ({
+    iframe: document.createElement("iframe"),
+    promise: Promise.resolve(),
+    run: vi.fn().mockResolvedValue(undefined),
+    destroy: mockDestroy,
+  }));
+  const mockSockets: MockPhoenixSocket[] = [];
+
+  class MockPhoenixPush {
+    private callbacks = new Map<string, (response?: unknown) => void>();
+
+    receive(
+      status: string,
+      callback: (response?: unknown) => void,
+    ): MockPhoenixPush {
+      this.callbacks.set(status, callback);
+      return this;
+    }
+
+    trigger(status: string, response?: unknown): void {
+      this.callbacks.get(status)?.(response);
+    }
+  }
+
+  class MockPhoenixChannel {
+    public topic: string;
+    public params: Record<string, unknown>;
+    public left = false;
+
+    private handlers = new Map<
+      string,
+      Array<{ ref: number; callback: (payload: unknown) => void }>
+    >();
+    private joinPush = new MockPhoenixPush();
+    private nextRef = 1;
+
+    constructor(topic: string, params: Record<string, unknown>) {
+      this.topic = topic;
+      this.params = params;
+    }
+
+    on(event: string, callback: (payload: unknown) => void): number {
+      if (!this.handlers.has(event)) {
+        this.handlers.set(event, []);
+      }
+      const ref = this.nextRef;
+      this.nextRef += 1;
+      this.handlers.get(event)?.push({ ref, callback });
+      return ref;
+    }
+
+    off(event: string, ref?: number): void {
+      if (ref === undefined) {
+        this.handlers.delete(event);
+        return;
+      }
+      this.handlers.set(
+        event,
+        (this.handlers.get(event) ?? []).filter(
+          (handler) => handler.ref !== ref,
+        ),
+      );
+    }
+
+    join(): MockPhoenixPush {
+      return this.joinPush;
+    }
+
+    leave(): void {
+      this.left = true;
+    }
+
+    triggerJoin(status: string, response?: unknown): void {
+      this.joinPush.trigger(status, response);
+    }
+
+    serverPush(event: string, payload: unknown): void {
+      for (const { callback } of this.handlers.get(event) ?? []) {
+        callback(payload);
+      }
+    }
+  }
+
+  class MockPhoenixSocket {
+    public channels: MockPhoenixChannel[] = [];
+
+    constructor(
+      public url: string,
+      public opts: Record<string, unknown>,
+    ) {
+      mockSockets.push(this);
+    }
+
+    connect(): void {}
+
+    disconnect(): void {}
+
+    onOpen(): void {}
+
+    onError(): void {}
+
+    channel(
+      topic: string,
+      params: Record<string, unknown>,
+    ): MockPhoenixChannel {
+      const channel = new MockPhoenixChannel(topic, params);
+      this.channels.push(channel);
+      return channel;
+    }
+  }
+
+  return {
+    mockWebsandboxCreate: mockCreate,
+    mockWebsandboxDestroy: mockDestroy,
+    mockPhoenixSockets: mockSockets,
+    MockPhoenixSocket,
+  };
+});
+
+vi.mock("phoenix", () => ({
+  Socket: MockPhoenixSocket,
+}));
+
+vi.mock("@jetbrains/websandbox", () => ({
+  default: {
+    create: (...args: unknown[]) => mockWebsandboxCreate(...args),
+  },
+}));
+
+function jsonResponse(body: unknown, status = 200): Response {
+  return {
+    ok: status >= 200 && status < 300,
+    status,
+    statusText: status === 200 ? "OK" : "Error",
+    json: async () => body,
+    text: async () => JSON.stringify(body),
+  } as Response;
+}
 
 describe("CopilotChat activity message rendering", () => {
   it("renders custom components for activity snapshots", async () => {
@@ -208,4 +364,282 @@ describe("CopilotChat activity message rendering", () => {
     expect(capturedAgent).toBe(clone);
     expect(capturedAgent).not.toBe(agent); // must NOT be the registry agent
   });
+
+  it("restores a completed A2UI surface after reconnect from an event-native baseline", async () => {
+    const agent = new MockReconnectableAgent();
+    const threadId = testId("a2ui-thread");
+    const surfaceId = testId("surface");
+    const a2uiRenderer = createA2UIMessageRenderer({
+      theme: {} as Theme,
+    });
+
+    const { unmount } = renderWithCopilotKit({
+      agent,
+      threadId,
+      renderActivityMessages: [a2uiRenderer],
+    });
+
+    const input = await screen.findByRole("textbox");
+    fireEvent.change(input, { target: { value: "Show me the restored UI" } });
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+    await waitFor(() => {
+      expect(screen.getByText("Show me the restored UI")).toBeDefined();
+    });
+
+    agent.emit(runStartedEvent());
+    agent.emit(
+      activitySnapshotEvent({
+        messageId: testId("a2ui-activity"),
+        activityType: "a2ui-surface",
+        content: {
+          a2ui_operations: [
+            {
+              version: "v0.9",
+              createSurface: {
+                surfaceId,
+                catalogId:
+                  "https://a2ui.org/specification/v0_9/basic_catalog.json",
+              },
+            },
+            {
+              version: "v0.9",
+              updateComponents: {
+                surfaceId,
+                components: [
+                  {
+                    id: "root",
+                    component: "Text",
+                    text: "Restored dashboard",
+                    variant: "body",
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      }),
+    );
+    agent.emit(runFinishedEvent());
+    agent.complete();
+
+    await waitFor(() => {
+      expect(
+        document.querySelector(`[data-surface-id='${surfaceId}']`),
+      ).not.toBeNull();
+    });
+
+    unmount();
+    agent.reset();
+
+    renderWithCopilotKit({
+      agent,
+      threadId,
+      renderActivityMessages: [a2uiRenderer],
+    });
+
+    await waitFor(() => {
+      expect(
+        document.querySelector(`[data-surface-id='${surfaceId}']`),
+      ).not.toBeNull();
+    });
+  });
+
+  it("restores a completed A2UI surface from IntelligenceAgent /connect gateway replay", async () => {
+    const threadId = testId("intelligence-connect-thread");
+    const surfaceId = testId("intelligence-connect-surface");
+    const fetchMock = vi.fn().mockResolvedValueOnce(
+      jsonResponse({
+        threadId,
+        runId: null,
+        joinToken: "join-token-1",
+        realtime: {
+          clientUrl: "ws://localhost:4000/client",
+          topic: `thread:${threadId}`,
+        },
+      }),
+    );
+    vi.stubGlobal("fetch", fetchMock);
+    mockPhoenixSockets.length = 0;
+
+    const agent = new IntelligenceAgent({
+      url: "ws://localhost:4000/client",
+      runtimeUrl: "http://localhost:4000",
+      agentId: "my-agent",
+    });
+    const a2uiRenderer = createA2UIMessageRenderer({
+      theme: {} as Theme,
+    });
+
+    try {
+      renderWithCopilotKit({
+        agent,
+        threadId,
+        renderActivityMessages: [a2uiRenderer],
+      });
+
+      await waitFor(() => {
+        expect(fetchMock).toHaveBeenCalledTimes(1);
+      });
+
+      await waitFor(() => {
+        expect(mockPhoenixSockets).toHaveLength(1);
+        expect(mockPhoenixSockets[0]?.channels).toHaveLength(1);
+      });
+
+      const channel = mockPhoenixSockets[0]!.channels[0]!;
+      expect(channel.topic).toBe(`thread:${threadId}`);
+      expect(channel.params).toEqual({
+        stream_mode: "connect",
+        last_seen_event_id: null,
+      });
+
+      channel.triggerJoin("ok");
+      channel.serverPush("ag_ui_event", {
+        type: EventType.RUN_STARTED,
+        threadId,
+        run_id: "backend-run-1",
+        input: {
+          messages: [
+            {
+              id: testId("connect-user-message"),
+              role: "user",
+              content: "show me the restored ui",
+            },
+          ],
+        },
+      });
+      channel.serverPush("ag_ui_event", {
+        type: EventType.ACTIVITY_SNAPSHOT,
+        messageId: testId("connect-a2ui-activity"),
+        activityType: "a2ui-surface",
+        content: {
+          a2ui_operations: [
+            {
+              version: "v0.9",
+              createSurface: {
+                surfaceId,
+                catalogId:
+                  "https://a2ui.org/specification/v0_9/basic_catalog.json",
+              },
+            },
+            {
+              version: "v0.9",
+              updateComponents: {
+                surfaceId,
+                components: [
+                  {
+                    id: "root",
+                    component: "Text",
+                    text: "Restored dashboard",
+                    variant: "body",
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      });
+      channel.serverPush("ag_ui_event", {
+        type: EventType.RUN_FINISHED,
+      });
+      channel.serverPush("stream_idle", { latestEventId: "event-3" });
+
+      await waitFor(() => {
+        expect(screen.getByText("show me the restored ui")).toBeDefined();
+      });
+      await waitFor(() => {
+        expect(
+          document.querySelector(`[data-surface-id='${surfaceId}']`),
+        ).not.toBeNull();
+      });
+
+      const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit];
+      expect(url).toContain("/agent/my-agent/connect");
+      expect(options.method).toBe("POST");
+
+      const requestBody = JSON.parse(String(options.body)) as {
+        threadId: string;
+        lastSeenEventId: string | null;
+        messages: unknown[];
+      };
+      expect(requestBody.threadId).toBe(threadId);
+      expect(requestBody.lastSeenEventId).toBeNull();
+      expect(requestBody.messages).toEqual([]);
+    } finally {
+      vi.unstubAllGlobals();
+    }
+  });
+
+  it("restores a completed Open Generative UI activity after reconnect from an event-native baseline", async () => {
+    mockWebsandboxCreate.mockClear();
+    mockWebsandboxDestroy.mockClear();
+
+    const agent = new MockReconnectableAgent();
+    const threadId = testId("open-generative-ui-thread");
+    const restoredHtml =
+      "<head></head><body><div>Restored open generative UI</div></body>";
+
+    const renderOpenGenerativeUIChat = () =>
+      render(
+        <CopilotKitProvider
+          agents__unsafe_dev_only={{ default: agent }}
+          openGenerativeUI={{}}
+        >
+          <CopilotChatConfigurationProvider threadId={threadId}>
+            <div style={{ height: 400 }}>
+              <CopilotChat welcomeScreen={false} />
+            </div>
+          </CopilotChatConfigurationProvider>
+        </CopilotKitProvider>,
+      );
+
+    const { unmount } = renderOpenGenerativeUIChat();
+
+    const input = await screen.findByRole("textbox");
+    fireEvent.change(input, { target: { value: "Show me the restored app" } });
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+    await waitFor(() => {
+      expect(screen.getByText("Show me the restored app")).toBeDefined();
+    });
+
+    agent.emit(runStartedEvent());
+    agent.emit(
+      activitySnapshotEvent({
+        messageId: testId("open-generative-ui-activity"),
+        activityType: "open-generative-ui",
+        content: {
+          initialHeight: 180,
+          generating: false,
+          html: [restoredHtml],
+          htmlComplete: true,
+        },
+      }),
+    );
+    agent.emit(runFinishedEvent());
+    agent.complete();
+
+    await waitFor(() => {
+      expect(mockWebsandboxCreate).toHaveBeenCalledTimes(1);
+    });
+    expect(mockWebsandboxCreate.mock.calls[0]?.[1]).toMatchObject({
+      frameContent: restoredHtml,
+    });
+
+    unmount();
+
+    agent.reset();
+
+    renderOpenGenerativeUIChat();
+
+    await waitFor(() => {
+      expect(mockWebsandboxCreate).toHaveBeenCalledTimes(2);
+    });
+    expect(mockWebsandboxCreate.mock.calls[1]?.[1]).toMatchObject({
+      frameContent: restoredHtml,
+    });
+
+    expect(mockWebsandboxDestroy).toHaveBeenCalledTimes(1);
+  });
 });

package/src/v2/components/chat/__tests__/CopilotChatView.connectingGate.test.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { CopilotChatView } from "../CopilotChatView";
+import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
+import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
+
+// Minimal provider wrapper. No agent registry is required because these tests
+// only exercise local render decisions (welcome-screen suppression) that
+// don't touch the agent runtime.
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <CopilotKitProvider>
+    <CopilotChatConfigurationProvider threadId="test-thread">
+      <div style={{ height: 400 }}>{children}</div>
+    </CopilotChatConfigurationProvider>
+  </CopilotKitProvider>
+);
+
+describe("CopilotChatView connect-gating", () => {
+  it("suppresses the welcome screen while isConnecting=true", () => {
+    render(
+      <TestWrapper>
+        <CopilotChatView messages={[]} isConnecting />
+      </TestWrapper>,
+    );
+
+    // Switching threads would otherwise flash the welcome greeting before
+    // bootstrap messages arrive.
+    expect(screen.queryByTestId("copilot-welcome-screen")).toBeNull();
+  });
+
+  it("suppresses the welcome screen when hasExplicitThreadId=true", () => {
+    render(
+      <TestWrapper>
+        <CopilotChatView messages={[]} hasExplicitThreadId />
+      </TestWrapper>,
+    );
+
+    // A caller-managed thread (threadId prop / config provider) should never
+    // display the generic "start a new chat" welcome — even when the thread
+    // has no messages yet.
+    expect(screen.queryByTestId("copilot-welcome-screen")).toBeNull();
+  });
+
+  it("shows the welcome screen by default for a fresh empty chat", () => {
+    render(
+      <TestWrapper>
+        <CopilotChatView messages={[]} />
+      </TestWrapper>,
+    );
+
+    // Positive control: with no threadId supplied and no connect in flight,
+    // an empty chat should still render the welcome screen.
+    expect(screen.getByTestId("copilot-welcome-screen")).toBeDefined();
+  });
+});

package/src/v2/components/chat/__tests__/CopilotChatView.inputOverlay.test.tsx

@@ -0,0 +1,172 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, waitFor } from "@testing-library/react";
+import React from "react";
+import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
+import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
+import { CopilotChatView } from "../CopilotChatView";
+import { LastUserMessageContext } from "../last-user-message-context";
+import type { Attachment } from "@copilotkit/shared";
+
+beforeEach(() => {
+  HTMLElement.prototype.scrollTo = vi.fn();
+});
+
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <CopilotKitProvider>
+    <CopilotChatConfigurationProvider threadId="test-thread">
+      <div style={{ height: 400 }}>{children}</div>
+    </CopilotChatConfigurationProvider>
+  </CopilotKitProvider>
+);
+
+const sampleMessages = [
+  { id: "1", role: "user" as const, content: "Hello" },
+  { id: "2", role: "assistant" as const, content: "Hi there!" },
+];
+
+const sampleAttachments: Attachment[] = [
+  {
+    id: "att-1",
+    type: "document",
+    source: {
+      type: "url",
+      value: "https://example.com/doc.txt",
+      mimeType: "text/plain",
+    },
+    filename: "example.txt",
+    size: 42,
+    status: "ready",
+  },
+];
+
+async function waitForMount(screen: {
+  findByTestId: (id: string) => Promise<HTMLElement>;
+}) {
+  await screen.findByTestId("copilot-message-list");
+}
+
+describe("CopilotChatView input overlay layout", () => {
+  it("renders the input inside an absolute-positioned overlay wrapper on the main view", async () => {
+    const screen = render(
+      <TestWrapper>
+        <LastUserMessageContext.Provider value={{ id: null, sendNonce: 0 }}>
+          <CopilotChatView messages={sampleMessages} />
+        </LastUserMessageContext.Provider>
+      </TestWrapper>,
+    );
+    await waitForMount(screen);
+
+    // getByTestId throws if missing — presence is implicit.
+    const overlay = screen.getByTestId("copilot-input-overlay");
+    // Class-level assertion — the cpk: prefix avoids false positives from
+    // consumer classes. Absolute + bottom-0 is the contract we care about.
+    expect(overlay.className).toMatch(/cpk:absolute/);
+    expect(overlay.className).toMatch(/cpk:bottom-0/);
+
+    // Input (send button) lives inside the overlay, not outside it.
+    const sendButton = screen.getByTestId("copilot-send-button");
+    expect(overlay.contains(sendButton)).toBe(true);
+  });
+
+  it("renders the attachment queue above the input inside the overlay wrapper", async () => {
+    const screen = render(
+      <TestWrapper>
+        <LastUserMessageContext.Provider value={{ id: null, sendNonce: 0 }}>
+          <CopilotChatView
+            messages={sampleMessages}
+            attachments={sampleAttachments}
+          />
+        </LastUserMessageContext.Provider>
+      </TestWrapper>,
+    );
+    await waitForMount(screen);
+
+    const overlay = screen.getByTestId("copilot-input-overlay");
+    const queue = overlay.querySelector(
+      '[data-testid="copilot-attachment-queue"]',
+    );
+    const sendButton = overlay.querySelector(
+      '[data-testid="copilot-send-button"]',
+    );
+
+    expect(queue).not.toBeNull();
+    expect(sendButton).not.toBeNull();
+
+    // DOM order: the attachment queue must appear before the send button
+    // in document order so it renders visually above the pill.
+    const position = queue!.compareDocumentPosition(sendButton!);
+    expect(position & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
+  it("does NOT wrap the welcome-screen input in the overlay", async () => {
+    const screen = render(
+      <TestWrapper>
+        <LastUserMessageContext.Provider value={{ id: null, sendNonce: 0 }}>
+          <CopilotChatView messages={[]} />
+        </LastUserMessageContext.Provider>
+      </TestWrapper>,
+    );
+    await screen.findByTestId("copilot-welcome-screen");
+
+    // Welcome screen present → no overlay wrapper exists in this render.
+    expect(screen.queryByTestId("copilot-input-overlay")).toBeNull();
+  });
+
+  it("reserves inputContainerHeight as bottom padding on the scroll content", async () => {
+    // Spy on ResizeObserver so we can trigger a known height. The component
+    // uses ResizeObserver to measure the overlay wrapper; we inject a known
+    // value and assert the scroll content's inline padding-bottom reflects it.
+    const callbacks: Array<{
+      cb: ResizeObserverCallback;
+      target: Element | null;
+    }> = [];
+    const OriginalRO = global.ResizeObserver;
+    class MockResizeObserver {
+      private cb: ResizeObserverCallback;
+      constructor(cb: ResizeObserverCallback) {
+        this.cb = cb;
+      }
+      observe(target: Element) {
+        callbacks.push({ cb: this.cb, target });
+      }
+      unobserve() {}
+      disconnect() {}
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (global as any).ResizeObserver = MockResizeObserver as any;
+
+    try {
+      const screen = render(
+        <TestWrapper>
+          <LastUserMessageContext.Provider value={{ id: null, sendNonce: 0 }}>
+            <CopilotChatView messages={sampleMessages} />
+          </LastUserMessageContext.Provider>
+        </TestWrapper>,
+      );
+      await waitForMount(screen);
+
+      const scrollContent = screen.getByTestId("copilot-scroll-content");
+
+      // Simulate the overlay wrapper reporting a content height of 120px.
+      for (const { cb } of callbacks) {
+        cb(
+          [
+            {
+              contentRect: { height: 120 } as DOMRectReadOnly,
+            } as ResizeObserverEntry,
+          ],
+          {} as ResizeObserver,
+        );
+      }
+
+      // After the resize fires, paddingBottom = 120 (input) + 32 (baseline,
+      // no suggestions) = "152px". The test asserts the formula.
+      await waitFor(() =>
+        expect(scrollContent.style.paddingBottom).toBe("152px"),
+      );
+    } finally {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (global as any).ResizeObserver = OriginalRO;
+    }
+  });
+});