@copilotkit/vue 1.57.1

package/src/v2/components/chat/__tests__/CopilotSidebarView.test.ts

@@ -0,0 +1,214 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { h, nextTick } from "vue";
+import { mount } from "@vue/test-utils";
+import type { Message } from "@ag-ui/core";
+import type { Suggestion } from "@copilotkit/core";
+import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
+import { CopilotSidebarView } from "../index";
+
+const messages: Message[] = [
+  {
+    id: "sidebar-user",
+    role: "user",
+    content: "Hello from the sidebar",
+    timestamp: new Date(),
+  },
+];
+
+const suggestions: Suggestion[] = [
+  { title: "Summarize", message: "Summarize", isLoading: false },
+];
+
+const originalResizeObserver = globalThis.ResizeObserver;
+const originalGetBoundingClientRect =
+  HTMLElement.prototype.getBoundingClientRect;
+
+function mockGetBoundingClientRect() {
+  return {
+    width: 612,
+    height: 400,
+    top: 0,
+    left: 0,
+    bottom: 400,
+    right: 612,
+    x: 0,
+    y: 0,
+    toJSON() {
+      return {};
+    },
+  } as DOMRect;
+}
+
+function mountSidebarView(
+  props: Record<string, unknown> = {},
+  slots: Parameters<typeof h>[2] = {},
+) {
+  return mount(CopilotKitProvider, {
+    props: { runtimeUrl: "/api/copilotkit" },
+    slots: {
+      default: () => h(CopilotSidebarView, props, slots),
+    },
+  });
+}
+
+describe("CopilotSidebarView", () => {
+  beforeEach(() => {
+    vi.stubGlobal(
+      "ResizeObserver",
+      class ResizeObserver {
+        private callback: ResizeObserverCallback;
+
+        constructor(callback: ResizeObserverCallback) {
+          this.callback = callback;
+        }
+
+        observe() {
+          this.callback([], this as unknown as ResizeObserver);
+        }
+
+        disconnect() {}
+      },
+    );
+
+    HTMLElement.prototype.getBoundingClientRect = mockGetBoundingClientRect;
+  });
+
+  afterEach(() => {
+    if (originalResizeObserver) {
+      globalThis.ResizeObserver = originalResizeObserver;
+    } else {
+      // @ts-expect-error test cleanup for missing ResizeObserver
+      delete globalThis.ResizeObserver;
+    }
+    HTMLElement.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+  });
+
+  it("opens by default and applies measured body margin when width is not provided", async () => {
+    const wrapper = mountSidebarView();
+    await nextTick();
+    await nextTick();
+
+    const sidebar = wrapper.get("[data-copilot-sidebar]");
+    expect(sidebar.attributes("aria-hidden")).toBe("false");
+    expect(sidebar.attributes("style")).toContain("--sidebar-width: 612px");
+    expect(wrapper.html()).toContain("margin-inline-end: 612px");
+  });
+
+  it("applies explicit width and renders default header and toggle button", () => {
+    const wrapper = mountSidebarView({
+      width: 520,
+    });
+
+    expect(wrapper.get("[data-copilot-sidebar]").attributes("style")).toContain(
+      "--sidebar-width: 520px",
+    );
+    expect(wrapper.find("[data-slot='copilot-modal-header']").exists()).toBe(
+      true,
+    );
+    expect(wrapper.find("[data-slot='chat-toggle-button']").exists()).toBe(
+      true,
+    );
+  });
+
+  it("replaces default header and toggle button via slots", () => {
+    const wrapper = mountSidebarView(
+      {},
+      {
+        header: ({ title }: { title: string }) =>
+          h("div", { "data-testid": "custom-header" }, title),
+        "toggle-button": ({ toggle }: { toggle: () => void }) =>
+          h(
+            "button",
+            { "data-testid": "custom-toggle", onClick: toggle },
+            "toggle",
+          ),
+      },
+    );
+
+    expect(wrapper.find("[data-testid='custom-header']").exists()).toBe(true);
+    expect(wrapper.find("[data-testid='custom-toggle']").exists()).toBe(true);
+    expect(wrapper.find("[data-slot='copilot-modal-header']").exists()).toBe(
+      false,
+    );
+  });
+
+  it("forwards chat view slots and emitted interactions", async () => {
+    const onSelectSuggestion = vi.fn();
+    const wrapper = mountSidebarView(
+      {
+        messages,
+        suggestions,
+        onSelectSuggestion,
+      },
+      {
+        "message-view": ({ messages: slotMessages }: { messages: Message[] }) =>
+          h(
+            "div",
+            { "data-testid": "custom-message-view" },
+            String(slotMessages.length),
+          ),
+      },
+    );
+
+    expect(wrapper.get("[data-testid='custom-message-view']").text()).toBe("1");
+    await wrapper
+      .get("[data-testid='copilot-chat-suggestion-pill']")
+      .trigger("click");
+    expect(onSelectSuggestion).toHaveBeenCalledTimes(1);
+  });
+
+  it("uses the default chat welcome screen and still forwards welcome sub-slots", () => {
+    const wrapper = mountSidebarView(
+      {
+        messages: [],
+        suggestions,
+      },
+      {
+        "welcome-message": () =>
+          h("div", { "data-testid": "custom-welcome-message" }, "Hello"),
+      },
+    );
+
+    expect(
+      wrapper.find("[data-testid='copilot-sidebar-welcome-screen']").exists(),
+    ).toBe(false);
+    expect(
+      wrapper.find("[data-testid='copilot-chat-view-welcome-screen']").exists(),
+    ).toBe(true);
+    expect(wrapper.get("[data-testid='custom-welcome-message']").text()).toBe(
+      "Hello",
+    );
+  });
+
+  it("exposes the WelcomeScreen namespaced export", () => {
+    expect(CopilotSidebarView.WelcomeScreen).toBeDefined();
+  });
+
+  it("renders the namespaced WelcomeScreen component when used explicitly", () => {
+    const wrapper = mount(CopilotSidebarView.WelcomeScreen, {
+      props: {
+        suggestions,
+        loadingIndexes: [],
+        modelValue: "",
+        isRunning: false,
+        inputMode: "input",
+        inputToolsMenu: [],
+        onUpdateModelValue: vi.fn(),
+        onSubmitMessage: vi.fn(),
+        onStop: vi.fn(),
+        onSelectSuggestion: vi.fn(),
+      },
+      slots: {
+        "welcome-message": () =>
+          h("div", { "data-testid": "sidebar-welcome-message" }, "Hello"),
+      },
+    });
+
+    expect(
+      wrapper.find("[data-testid='copilot-sidebar-welcome-screen']").exists(),
+    ).toBe(true);
+    expect(wrapper.get("[data-testid='sidebar-welcome-message']").text()).toBe(
+      "Hello",
+    );
+  });
+});

package/src/v2/components/chat/__tests__/MCPAppsUiMessage.e2e.test.ts

@@ -0,0 +1,394 @@
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { defineComponent, nextTick } from "vue";
+import {
+  activitySnapshotEvent,
+  runFinishedEvent,
+  runStartedEvent,
+  testId,
+} from "../../../__tests__/utils/test-helpers";
+import { AbstractAgent, EventType } from "@ag-ui/client";
+import type { BaseEvent, RunAgentInput, RunAgentResult } from "@ag-ui/client";
+import { Observable, Subject } from "rxjs";
+import { MCPAppsActivityType } from "../../MCPAppsActivityRenderer";
+import CopilotChat from "../CopilotChat.vue";
+import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
+import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
+
+class MockMCPProxyAgent extends AbstractAgent {
+  private readonly subject = new Subject<BaseEvent>();
+  private bufferedEvents: BaseEvent[] = [];
+  public runAgentCalls: Array<{ input: Partial<RunAgentInput> }> = [];
+  public addMessageCalls: Array<{
+    id: string;
+    role: string;
+    content: unknown;
+  }> = [];
+  private readonly runAgentResponses = new Map<string, unknown>();
+
+  setRunAgentResponse(method: string, response: unknown): void {
+    this.runAgentResponses.set(method, response);
+  }
+
+  async emit(event: BaseEvent): Promise<void> {
+    if (event.type === EventType.RUN_STARTED) {
+      this.isRunning = true;
+    } else if (
+      event.type === EventType.RUN_FINISHED ||
+      event.type === EventType.RUN_ERROR
+    ) {
+      this.isRunning = false;
+    }
+    if (this.subject.observers.length === 0) {
+      this.bufferedEvents.push(event);
+    } else {
+      this.subject.next(event);
+    }
+    await flushVueUpdates();
+  }
+
+  clone(): MockMCPProxyAgent {
+    const cloned = new MockMCPProxyAgent();
+    cloned.agentId = this.agentId;
+    type Internal = {
+      subject: Subject<BaseEvent>;
+      bufferedEvents: BaseEvent[];
+      runAgentCalls: Array<{ input: Partial<RunAgentInput> }>;
+      addMessageCalls: Array<{ id: string; role: string; content: unknown }>;
+      runAgentResponses: Map<string, unknown>;
+    };
+    (cloned as unknown as Internal).subject = (
+      this as unknown as Internal
+    ).subject;
+    (cloned as unknown as Internal).bufferedEvents = (
+      this as unknown as Internal
+    ).bufferedEvents;
+    (cloned as unknown as Internal).runAgentCalls = (
+      this as unknown as Internal
+    ).runAgentCalls;
+    (cloned as unknown as Internal).addMessageCalls = (
+      this as unknown as Internal
+    ).addMessageCalls;
+    (cloned as unknown as Internal).runAgentResponses = (
+      this as unknown as Internal
+    ).runAgentResponses;
+
+    const registry = this;
+    Object.defineProperty(cloned, "isRunning", {
+      get() {
+        return registry.isRunning;
+      },
+      set(v: boolean) {
+        registry.isRunning = v;
+      },
+      configurable: true,
+      enumerable: true,
+    });
+
+    const proto = MockMCPProxyAgent.prototype;
+    cloned.runAgent = async function (
+      input?: Partial<RunAgentInput>,
+    ): Promise<RunAgentResult> {
+      const proxiedRequest = input?.forwardedProps?.__proxiedMCPRequest;
+      if (proxiedRequest) {
+        return registry.runAgent(input);
+      }
+      return proto.runAgent.call(cloned, input);
+    };
+
+    cloned.run = function (input: RunAgentInput): Observable<BaseEvent> {
+      return registry.run(input);
+    };
+
+    const originalAddMessage = cloned.addMessage.bind(cloned);
+    cloned.addMessage = function (
+      message: Parameters<AbstractAgent["addMessage"]>[0],
+    ) {
+      registry.addMessageCalls.push({
+        id: message.id,
+        role: message.role,
+        content: message.content,
+      });
+      return originalAddMessage(message);
+    };
+
+    return cloned;
+  }
+
+  run(_input: RunAgentInput): Observable<BaseEvent> {
+    return new Observable<BaseEvent>((observer) => {
+      if (this.bufferedEvents.length > 0) {
+        for (const event of this.bufferedEvents) {
+          observer.next(event);
+        }
+        this.bufferedEvents = [];
+      }
+
+      const subscription = this.subject.subscribe(observer);
+      return () => subscription.unsubscribe();
+    });
+  }
+
+  async runAgent(input?: Partial<RunAgentInput>): Promise<RunAgentResult> {
+    const proxiedRequest = input?.forwardedProps?.__proxiedMCPRequest as
+      | {
+          serverHash?: string;
+          serverId?: string;
+          method: string;
+          params?: Record<string, unknown>;
+        }
+      | undefined;
+
+    if (proxiedRequest) {
+      if (input) {
+        this.runAgentCalls.push({ input });
+      }
+      const method = proxiedRequest.method;
+      const response = this.runAgentResponses.get(method);
+      if (response !== undefined) {
+        return { result: response, newMessages: [] };
+      }
+      if (method === "resources/read") {
+        return {
+          result: {
+            contents: [
+              {
+                uri: proxiedRequest.params?.uri,
+                mimeType: "text/html",
+                text: "<html><body>Test content</body></html>",
+              },
+            ],
+          },
+          newMessages: [],
+        };
+      }
+      return { result: {}, newMessages: [] };
+    }
+
+    return super.runAgent(input);
+  }
+}
+
+async function flushVueUpdates(): Promise<void> {
+  await nextTick();
+  await new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+async function setupMCPActivity(
+  agent: MockMCPProxyAgent,
+  userMessage: string,
+): Promise<HTMLIFrameElement> {
+  const threadId = testId("mcp-ui-message-thread");
+  const agentId = agent.agentId ?? "mcp-ui-message-agent";
+  agent.agentId = agentId;
+  agent.setRunAgentResponse("resources/read", {
+    contents: [
+      {
+        uri: "ui://test/app",
+        mimeType: "text/html",
+        text: "<html><body>App</body></html>",
+      },
+    ],
+  });
+
+  const Host = defineComponent({
+    components: {
+      CopilotKitProvider,
+      CopilotChatConfigurationProvider,
+      CopilotChat,
+    },
+    setup() {
+      return {
+        agentId,
+        threadId,
+        agents: { [agentId]: agent },
+      };
+    },
+    template: `
+      <CopilotKitProvider runtimeUrl="/api/copilotkit" :agents__unsafe_dev_only="agents">
+        <CopilotChatConfigurationProvider :thread-id="threadId" :agent-id="agentId">
+          <div style="height: 400px;">
+            <CopilotChat :welcome-screen="false" />
+          </div>
+        </CopilotChatConfigurationProvider>
+      </CopilotKitProvider>
+    `,
+  });
+
+  render(Host);
+
+  const input = await screen.findByRole("textbox");
+  await fireEvent.update(input, userMessage);
+  await fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+  await waitFor(() => {
+    expect(screen.getByText(userMessage)).toBeDefined();
+  });
+
+  await agent.emit(runStartedEvent());
+  await agent.emit(
+    activitySnapshotEvent({
+      messageId: testId("mcp-activity"),
+      activityType: MCPAppsActivityType,
+      content: {
+        resourceUri: "ui://test/app",
+        serverHash: "test-hash",
+        toolInput: {},
+        result: {
+          content: [{ type: "text", text: "Tool output" }],
+          isError: false,
+        },
+      },
+    }),
+  );
+  await agent.emit(runFinishedEvent());
+
+  let iframe: HTMLIFrameElement | null = null;
+  await waitFor(
+    () => {
+      iframe = document.querySelector("iframe[srcdoc]");
+      expect(iframe).not.toBeNull();
+    },
+    { timeout: 3000 },
+  );
+
+  const readyEvent = new MessageEvent("message", {
+    data: {
+      jsonrpc: "2.0",
+      method: "ui/notifications/sandbox-proxy-ready",
+    },
+    source: iframe!.contentWindow,
+    origin: "",
+  });
+  window.dispatchEvent(readyEvent);
+  await flushVueUpdates();
+  await new Promise((resolve) => setTimeout(resolve, 100));
+
+  return iframe!;
+}
+
+async function sendUiMessage(
+  iframe: HTMLIFrameElement,
+  agent: MockMCPProxyAgent,
+  params: {
+    role?: string;
+    content?: Array<{ type: string; text?: string }>;
+    followUp?: boolean;
+  },
+) {
+  const messageEvent = new MessageEvent("message", {
+    data: {
+      jsonrpc: "2.0",
+      id: testId("ui-message-request"),
+      method: "ui/message",
+      params,
+    },
+    source: iframe.contentWindow,
+    origin: "",
+  });
+
+  window.dispatchEvent(messageEvent);
+  await flushVueUpdates();
+  await new Promise((resolve) => setTimeout(resolve, 200));
+
+  // Settle possible follow-up run to avoid leaking queue/running state.
+  await agent.emit(runStartedEvent());
+  await agent.emit(runFinishedEvent());
+}
+
+describe("MCP Apps ui/message followUp behavior", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+    document.body.innerHTML = "";
+  });
+
+  it("user-role message: addMessage IS called and runAgent IS invoked", async () => {
+    const agent = new MockMCPProxyAgent();
+    agent.agentId = "ui-msg-agent-user";
+    const iframe = await setupMCPActivity(agent, "User role test");
+
+    const runSpy = vi.spyOn(agent, "run");
+    const before = runSpy.mock.calls.length;
+
+    await sendUiMessage(iframe, agent, {
+      role: "user",
+      content: [{ type: "text", text: "Hello from MCP app" }],
+    });
+
+    const added = agent.addMessageCalls.some(
+      (message) =>
+        message.role === "user" && message.content === "Hello from MCP app",
+    );
+    expect(added).toBe(true);
+    expect(runSpy.mock.calls.length).toBeGreaterThan(before);
+  });
+
+  it("assistant-role message: addMessage IS called but runAgent is NOT invoked", async () => {
+    const agent = new MockMCPProxyAgent();
+    agent.agentId = "ui-msg-agent-assistant";
+    const iframe = await setupMCPActivity(agent, "Assistant role test");
+
+    const runSpy = vi.spyOn(agent, "run");
+    const before = runSpy.mock.calls.length;
+
+    await sendUiMessage(iframe, agent, {
+      role: "assistant",
+      content: [{ type: "text", text: "Assistant message from MCP app" }],
+    });
+
+    const added = agent.addMessageCalls.some(
+      (message) =>
+        message.role === "assistant" &&
+        message.content === "Assistant message from MCP app",
+    );
+    expect(added).toBe(true);
+    expect(runSpy.mock.calls.length).toBe(before);
+  });
+
+  it("followUp: false on user-role message: addMessage IS called but runAgent is NOT invoked", async () => {
+    const agent = new MockMCPProxyAgent();
+    agent.agentId = "ui-msg-agent-user-no-follow-up";
+    const iframe = await setupMCPActivity(agent, "No follow-up user role test");
+
+    const runSpy = vi.spyOn(agent, "run");
+    const before = runSpy.mock.calls.length;
+
+    await sendUiMessage(iframe, agent, {
+      role: "user",
+      followUp: false,
+      content: [{ type: "text", text: "Display-only message" }],
+    });
+
+    expect(runSpy.mock.calls.length).toBe(before);
+  });
+
+  it("followUp: true on assistant-role message: addMessage IS called AND runAgent IS invoked", async () => {
+    const agent = new MockMCPProxyAgent();
+    agent.agentId = "ui-msg-agent-assistant-follow-up";
+    const iframe = await setupMCPActivity(
+      agent,
+      "Forced follow-up assistant role test",
+    );
+
+    const runSpy = vi.spyOn(agent, "run");
+    const before = runSpy.mock.calls.length;
+
+    await sendUiMessage(iframe, agent, {
+      role: "assistant",
+      followUp: true,
+      content: [{ type: "text", text: "Assistant with follow-up" }],
+    });
+
+    expect(runSpy.mock.calls.length).toBeGreaterThan(before);
+  });
+});

package/src/v2/components/chat/__tests__/copilot-chat-throttle.test.ts

@@ -0,0 +1,82 @@
+// oxlint-disable typescript/consistent-type-imports
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { defineComponent, h, ref } from "vue";
+import type { AbstractAgent } from "@ag-ui/client";
+import { useAgent } from "../../../hooks/use-agent";
+import { mountWithProvider } from "../../../__tests__/utils/mount";
+import { MockStepwiseAgent } from "../../../__tests__/utils/test-helpers";
+import CopilotChat from "../CopilotChat.vue";
+import type { CopilotPopupProps, CopilotSidebarProps } from "../types";
+
+vi.mock("../../../hooks/use-agent", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("../../../hooks/use-agent")>();
+  return {
+    ...actual,
+    useAgent: vi.fn(),
+  };
+});
+
+const mockUseAgent = useAgent as ReturnType<typeof vi.fn>;
+
+function createHost(props: Record<string, unknown> = {}) {
+  return defineComponent({
+    components: { CopilotChat },
+    setup() {
+      return { props };
+    },
+    template: `<CopilotChat v-bind="props" :welcome-screen="false" />`,
+  });
+}
+
+describe("CopilotChat throttleMs prop", () => {
+  let mockAgent: MockStepwiseAgent;
+
+  beforeEach(() => {
+    mockUseAgent.mockReset();
+    mockAgent = new MockStepwiseAgent();
+    mockAgent.agentId = "default";
+    mockUseAgent.mockReturnValue({ agent: ref(mockAgent) });
+  });
+
+  it("passes throttleMs prop to useAgent", () => {
+    mountWithProvider(() => h(createHost({ throttleMs: 500 })), {
+      agents__unsafe_dev_only: { default: mockAgent as AbstractAgent },
+    });
+
+    expect(mockUseAgent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        throttleMs: expect.any(Object),
+      }),
+    );
+    const throttleArg = mockUseAgent.mock.calls[0]?.[0]?.throttleMs;
+    expect(typeof throttleArg).toBe("object");
+    expect(throttleArg?.value).toBe(500);
+  });
+
+  it("passes undefined throttleMs when prop is not set", () => {
+    mountWithProvider(() => h(createHost()), {
+      agents__unsafe_dev_only: { default: mockAgent as AbstractAgent },
+    });
+
+    expect(mockUseAgent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        throttleMs: expect.any(Object),
+      }),
+    );
+    const throttleArg = mockUseAgent.mock.calls[0]?.[0]?.throttleMs;
+    expect(throttleArg?.value).toBeUndefined();
+  });
+});
+
+describe("throttleMs type inheritance", () => {
+  it("CopilotSidebarProps includes throttleMs via CopilotChatProps", () => {
+    const sidebarProps: CopilotSidebarProps = { throttleMs: 1000 };
+    expect(sidebarProps.throttleMs).toBe(1000);
+  });
+
+  it("CopilotPopupProps includes throttleMs via CopilotChatProps", () => {
+    const popupProps: CopilotPopupProps = { throttleMs: 2000 };
+    expect(popupProps.throttleMs).toBe(2000);
+  });
+});