@copilotkit/vue 2.0.0-rc.3 → 2.0.0-rc.30

package/src/v2/components/chat/__tests__/CopilotChatMessageView.toolCallDisplay.test.ts

@@ -11,12 +11,7 @@ import type { VueToolCallRenderer } from "../../../types";
 import { useDefaultRenderTool } from "../../../hooks/use-default-render-tool";
 import CopilotChatMessageView from "../CopilotChatMessageView.vue";
 import CopilotChatToolCallsView from "../CopilotChatToolCallsView.vue";
-import {
-  getToolCallLayouts,
-  getToolCallRendererNames,
-  getTurnWork,
-} from "../tool-call-layout";
-import type { CopilotChatToolCallDisplay } from "../tool-call-layout";
+import type { CopilotChatToolCallDisplay } from "@copilotkit/core";
 
 // Ported from React's CopilotChatMessageView.toolCallDisplay tests.
 
@@ -55,13 +50,6 @@ const weather = defineToolCallRenderer({
   render: () => h("div", { "data-testid": "weather-card" }, "Weather"),
 });
 
-const names = {
-  named: new Set(["weather"]),
-  groupedNames: new Set<string>(),
-  wildcard: true,
-  wildcardGroups: true,
-};
-
 interface ViewState {
   messages: Ref<Message[]>;
   isRunning: Ref<boolean>;
@@ -118,92 +106,6 @@ function renderView(
 const firstButton = (element: HTMLElement) =>
   within(element).getAllByRole("button")[0]!;
 
-describe("getToolCallLayouts", () => {
-  it("groups calls made in a row across messages, owned by the first", () => {
-    const messages = [
-      question,
-      callMessage("a"),
-      result("a"),
-      callMessage("b"),
-      result("b"),
-    ];
-    const layouts = getToolCallLayouts(messages, messages, names);
-
-    const first = layouts.get("m-a")!.segments;
-    expect(first).toHaveLength(1);
-    expect(first[0]).toMatchObject({ kind: "group", trailing: true });
-    expect(
-      first[0]!.kind === "group" && first[0]!.calls.map((c) => c.toolCall.id),
-    ).toEqual(["a", "b"]);
-    expect(layouts.get("m-b")!.segments).toEqual([]);
-  });
-
-  it("starts a new group after text or a call with its own renderer", () => {
-    const messages = [
-      question,
-      callMessage("a"),
-      say("t", "Checking more."),
-      callMessage("b"),
-      callMessage("w", "weather"),
-      callMessage("c"),
-    ];
-    const layouts = getToolCallLayouts(messages, messages, names);
-    const kinds = ["m-a", "m-b", "m-w", "m-c"].map((id) =>
-      layouts.get(id)!.segments.map((segment) => segment.kind),
-    );
-    expect(kinds).toEqual([["group"], ["group"], ["call"], ["group"]]);
-  });
-
-  it("changes its signature when a result arrives for a call it holds", () => {
-    const before = [question, callMessage("a"), callMessage("b")];
-    const after = [...before, result("b")];
-    const signature = (messages: Message[]) =>
-      getToolCallLayouts(messages, messages, names).get("m-a")!.signature;
-    expect(signature(after)).not.toBe(signature(before));
-  });
-});
-
-describe("getTurnWork", () => {
-  it("treats everything up to the last call as work, and the rest as the reply", () => {
-    const messages = [
-      question,
-      say("t1", "Looking."),
-      callMessage("a"),
-      result("a"),
-      say("t2", "The answer."),
-    ];
-    const layouts = getToolCallLayouts(messages, messages, names);
-    const turn = getTurnWork(messages, layouts).get("u1")!;
-    expect([...turn.workMessageIds]).toEqual(["t1", "m-a"]);
-    expect(turn.firstMessageId).toBe("t1");
-    expect(turn.calls).toHaveLength(1);
-  });
-});
-
-describe("getToolCallRendererNames", () => {
-  const renderers = [
-    { name: "*", group: true },
-    { name: "search", group: true },
-  ];
-
-  it("reads the renderers' group opt-in", () => {
-    const result = getToolCallRendererNames(renderers);
-    expect([...result.groupedNames]).toEqual(["search"]);
-    expect(result.wildcardGroups).toBe(true);
-  });
-
-  it("never groups calls a tool-call slot draws", () => {
-    const named = getToolCallRendererNames(renderers, ["tool-call-search"]);
-    expect(named.named.has("search")).toBe(true);
-    expect(named.groupedNames.has("search")).toBe(false);
-    expect(named.wildcardGroups).toBe(true);
-
-    const wildcard = getToolCallRendererNames(renderers, ["tool-call"]);
-    expect(wildcard.groupedNames.size).toBe(0);
-    expect(wildcard.wildcardGroups).toBe(false);
-  });
-});
-
 describe("CopilotChatMessageView toolCallDisplay", () => {
   const burst = [
     question,

package/src/v2/components/chat/__tests__/CopilotChatView.pinToSend.test.ts

@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { defineComponent, h, provide, ref } from "vue";
-import { render, waitFor } from "@testing-library/vue";
+import { fireEvent, render, waitFor } from "@testing-library/vue";
 import type { Message } from "@ag-ui/core";
 import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
 import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
@@ -75,6 +75,10 @@ async function waitForMount(screen: ReturnType<typeof render>) {
   await screen.findByTestId("copilot-chat-view");
 }
 
+function rect(top: number, bottom: number) {
+  return { top, bottom, left: 0, right: 0, width: 0, height: bottom - top };
+}
+
 describe("CopilotChatView pin-to-send mode", () => {
   it("renders the pin-to-send spacer element when autoScroll='pin-to-send'", async () => {
     const screen = renderView("pin-to-send");
@@ -163,4 +167,42 @@ describe("CopilotChatView pin-to-send mode", () => {
       expect(spacer.getAttribute("data-pin-to-send-spacer")).not.toBeNull(),
     );
   });
+  // The spacer under the messages is not content: the scroll-to-bottom
+  // button follows the end of the messages, as in React.
+  describe("scroll-to-bottom button", () => {
+    async function setup(contentBottom: number) {
+      const screen = renderView("pin-to-send");
+      await waitForMount(screen);
+      const scrollElement = screen.getByTestId("copilot-chat-view-scroll");
+      const contentElement = screen.getByTestId("copilot-scroll-content");
+      // The spacer makes the scroll height far larger than the view.
+      Object.defineProperty(scrollElement, "scrollHeight", {
+        configurable: true,
+        get: () => 2000,
+      });
+      Object.defineProperty(scrollElement, "clientHeight", {
+        configurable: true,
+        get: () => 400,
+      });
+      scrollElement.getBoundingClientRect = () => rect(0, 400) as DOMRect;
+      contentElement.getBoundingClientRect = () =>
+        rect(-200, contentBottom) as DOMRect;
+      await fireEvent.scroll(scrollElement);
+      return screen;
+    }
+
+    it("stays hidden when only the spacer is below the view", async () => {
+      const screen = await setup(390);
+      expect(
+        screen.queryByTestId("copilot-chat-view-scroll-to-bottom"),
+      ).toBeNull();
+    });
+
+    it("shows when messages sit below the view", async () => {
+      const screen = await setup(700);
+      expect(
+        await screen.findByTestId("copilot-chat-view-scroll-to-bottom"),
+      ).toBeDefined();
+    });
+  });
 });

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

@@ -1,8 +1,9 @@
 import { describe, expect, it } from "vitest";
-import { h } from "vue";
+import { h, nextTick } from "vue";
 import { mount } from "@vue/test-utils";
 import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
 import { StateCapturingAgent } from "../../../__tests__/utils/agents";
+import { mountWithProvider } from "../../../__tests__/utils/mount";
 import CopilotPopup from "../CopilotPopup.vue";
 
 function mountPopup(
@@ -55,4 +56,92 @@ describe("CopilotPopup", () => {
     ).toBe(true);
     expect(wrapper.find("[data-copilot-popup]").exists()).toBe(false);
   });
+
+  it("forwards the scroll-view slot to the chat view", () => {
+    const wrapper = mountPopup(
+      { welcomeScreen: false },
+      {
+        "scroll-view": ({ messages }: { messages: unknown[] }) =>
+          h(
+            "div",
+            { "data-testid": "custom-popup-scroll-view" },
+            String(messages.length),
+          ),
+      },
+    );
+
+    expect(wrapper.get("[data-testid='custom-popup-scroll-view']").text()).toBe(
+      "0",
+    );
+    expect(
+      wrapper.find("[data-testid='copilot-chat-view-scroll']").exists(),
+    ).toBe(false);
+  });
+
+  it("forwards the interrupt slot to the chat view", async () => {
+    const { wrapper, getCore } = mountWithProvider(
+      () =>
+        h(
+          CopilotPopup,
+          { welcomeScreen: false },
+          {
+            interrupt: ({ event }: { event: { value: string } }) =>
+              h("div", { "data-testid": "popup-interrupt" }, event.value),
+          },
+        ),
+      {
+        runtimeUrl: undefined,
+        agents__unsafe_dev_only: { default: new StateCapturingAgent() },
+      },
+    );
+
+    getCore().setInterruptState({
+      event: { name: "on_interrupt", value: "slot-forwarded" },
+      result: null,
+      resolve: () => undefined,
+    });
+    await nextTick();
+
+    expect(wrapper.get("[data-testid='popup-interrupt']").text()).toBe(
+      "slot-forwarded",
+    );
+  });
+
+  it("forwards the assistant-message slot to the message view", () => {
+    const agent = new StateCapturingAgent();
+    agent.setMessages([
+      { id: "assistant-1", role: "assistant", content: "Hello from the agent" },
+    ]);
+
+    const { wrapper } = mountWithProvider(
+      () =>
+        h(
+          CopilotPopup,
+          { welcomeScreen: false },
+          {
+            "assistant-message": ({
+              message,
+            }: {
+              message: { content: string };
+            }) =>
+              h(
+                "div",
+                { "data-testid": "popup-assistant-message" },
+                message.content,
+              ),
+          },
+        ),
+      {
+        runtimeUrl: undefined,
+        agents__unsafe_dev_only: { default: agent },
+      },
+    );
+
+    expect(wrapper.get("[data-testid='popup-assistant-message']").text()).toBe(
+      "Hello from the agent",
+    );
+    expect(
+      wrapper.find("[data-testid='copilot-assistant-message']").exists(),
+    ).toBe(false);
+  });
 });

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

@@ -115,6 +115,25 @@ describe("CopilotPopupView", () => {
     expect(reopened.find("[data-copilot-popup]").exists()).toBe(false);
   });
 
+  it("stays open for a pointer down in a chat popover outside the panel", async () => {
+    const wrapper = mountPopupView({ clickOutsideToClose: true });
+    // Popovers, such as a reply rating's comment, render in a portal.
+    const popover = document.createElement("div");
+    popover.setAttribute("data-copilotkit-popover", "");
+    const field = document.createElement("textarea");
+    popover.append(field);
+    document.body.append(popover);
+
+    field.dispatchEvent(new Event("pointerdown", { bubbles: true }));
+    await nextTick();
+    vi.advanceTimersByTime(200);
+    await nextTick();
+
+    expect(wrapper.find("[data-copilot-popup]").exists()).toBe(true);
+    popover.remove();
+    wrapper.unmount();
+  });
+
   it("ignores outside-close detection when the toggle button is clicked and supports custom slots", async () => {
     const wrapper = mountPopupView(
       {

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

@@ -1,8 +1,9 @@
 import { describe, expect, it } from "vitest";
-import { h } from "vue";
+import { h, nextTick } from "vue";
 import { mount } from "@vue/test-utils";
 import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
 import { StateCapturingAgent } from "../../../__tests__/utils/agents";
+import { mountWithProvider } from "../../../__tests__/utils/mount";
 import CopilotSidebar from "../CopilotSidebar.vue";
 
 function mountSidebar(
@@ -55,4 +56,92 @@ describe("CopilotSidebar", () => {
     ).toBe(true);
     expect(wrapper.find("[data-copilot-sidebar]").exists()).toBe(false);
   });
+
+  it("forwards the scroll-view slot to the chat view", () => {
+    const wrapper = mountSidebar(
+      { welcomeScreen: false },
+      {
+        "scroll-view": ({ messages }: { messages: unknown[] }) =>
+          h(
+            "div",
+            { "data-testid": "custom-sidebar-scroll-view" },
+            String(messages.length),
+          ),
+      },
+    );
+
+    expect(
+      wrapper.get("[data-testid='custom-sidebar-scroll-view']").text(),
+    ).toBe("0");
+    expect(
+      wrapper.find("[data-testid='copilot-chat-view-scroll']").exists(),
+    ).toBe(false);
+  });
+
+  it("forwards the interrupt slot to the chat view", async () => {
+    const { wrapper, getCore } = mountWithProvider(
+      () =>
+        h(
+          CopilotSidebar,
+          { welcomeScreen: false },
+          {
+            interrupt: ({ event }: { event: { value: string } }) =>
+              h("div", { "data-testid": "sidebar-interrupt" }, event.value),
+          },
+        ),
+      {
+        runtimeUrl: undefined,
+        agents__unsafe_dev_only: { default: new StateCapturingAgent() },
+      },
+    );
+
+    getCore().setInterruptState({
+      event: { name: "on_interrupt", value: "slot-forwarded" },
+      result: null,
+      resolve: () => undefined,
+    });
+    await nextTick();
+
+    expect(wrapper.get("[data-testid='sidebar-interrupt']").text()).toBe(
+      "slot-forwarded",
+    );
+  });
+
+  it("forwards the assistant-message slot to the message view", () => {
+    const agent = new StateCapturingAgent();
+    agent.setMessages([
+      { id: "assistant-1", role: "assistant", content: "Hello from the agent" },
+    ]);
+
+    const { wrapper } = mountWithProvider(
+      () =>
+        h(
+          CopilotSidebar,
+          { welcomeScreen: false },
+          {
+            "assistant-message": ({
+              message,
+            }: {
+              message: { content: string };
+            }) =>
+              h(
+                "div",
+                { "data-testid": "sidebar-assistant-message" },
+                message.content,
+              ),
+          },
+        ),
+      {
+        runtimeUrl: undefined,
+        agents__unsafe_dev_only: { default: agent },
+      },
+    );
+
+    expect(
+      wrapper.get("[data-testid='sidebar-assistant-message']").text(),
+    ).toBe("Hello from the agent");
+    expect(
+      wrapper.find("[data-testid='copilot-assistant-message']").exists(),
+    ).toBe(false);
+  });
 });

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

@@ -1,4 +1,4 @@
-import { describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it } from "vitest";
 import { h } from "vue";
 import { mount } from "@vue/test-utils";
 import type { Message } from "@ag-ui/core";
@@ -22,21 +22,31 @@ function cssRule(selector: string): string {
   return stylesheet.slice(body, stylesheet.indexOf("}", body));
 }
 
+/** Mounted sidebars. Only one docked sidebar may own the page margin. */
+const mounted: { unmount: () => void }[] = [];
+afterEach(() => {
+  for (const wrapper of mounted.splice(0)) wrapper.unmount();
+});
+
 function mountSidebarView(props: Record<string, unknown> = {}) {
-  return mount(CopilotKitProvider, {
+  const wrapper = mount(CopilotKitProvider, {
     props: { runtimeUrl: "/api/copilotkit" },
     slots: {
       default: () =>
         h(CopilotSidebarView, { messages: sampleMessages, ...props }),
     },
   });
+  mounted.push(wrapper);
+  return wrapper;
 }
 
 function mountSidebar(props: Record<string, unknown> = {}) {
-  return mount(CopilotKitProvider, {
+  const wrapper = mount(CopilotKitProvider, {
     props: { agents__unsafe_dev_only: { default: new StateCapturingAgent() } },
     slots: { default: () => h(CopilotSidebar, props) },
   });
+  mounted.push(wrapper);
+  return wrapper;
 }
 
 describe("CopilotSidebarView position prop", () => {
@@ -87,12 +97,26 @@ describe("CopilotSidebarView position prop", () => {
     });
 
     it("makes room for the sidebar on the edge it docks to", () => {
-      const left = mountSidebarView({ position: "left", width: 400 });
-      expect(left.html()).toContain("margin-inline-start: 400px");
-      expect(left.html()).not.toContain("margin-inline-end");
+      const body = document.body.style;
+      mountSidebarView({ position: "left", width: 400 });
+      expect(body.marginInlineStart).toBe("400px");
+      expect(body.marginInlineEnd).toBe("");
+      mounted.pop()?.unmount();
+
+      mountSidebarView({ width: 400 });
+      expect(body.marginInlineEnd).toBe("400px");
+    });
+
+    it("gives the page its own margins back on unmount", () => {
+      const body = document.body.style;
+      body.marginInlineEnd = "16px";
+      mountSidebarView({ width: 400 });
+      expect(body.marginInlineEnd).toBe("400px");
+
+      mounted.pop()?.unmount();
 
-      const right = mountSidebarView({ width: 400 });
-      expect(right.html()).toContain("margin-inline-end: 400px");
+      expect(body.marginInlineEnd).toBe("16px");
+      body.marginInlineEnd = "";
     });
   });
 

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

@@ -91,7 +91,8 @@ describe("CopilotSidebarView", () => {
     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");
+    expect(document.body.style.marginInlineEnd).toBe("612px");
+    wrapper.unmount();
   });
 
   it("applies explicit width and renders default header and toggle button", () => {

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

@@ -0,0 +1,54 @@
+import { describe, it, expect } from "vitest";
+import { render, fireEvent } from "@testing-library/vue";
+import StreamingMarkdownDefault from "../StreamingMarkdownDefault.vue";
+
+function renderDefault(props: Record<string, unknown>) {
+  return render(StreamingMarkdownDefault, { props }).container;
+}
+
+describe("StreamingMarkdownDefault (vue)", () => {
+  it("renders nothing for empty content", () => {
+    expect(renderDefault({ content: "" }).innerHTML).toBe("<!--v-if-->");
+  });
+
+  it("renders fenced code with the shared code block class", () => {
+    const pre = renderDefault({ content: "```ts\nx\n```" }).querySelector(
+      "pre",
+    );
+    expect(pre?.classList.contains("cpk-markdown-code-block")).toBe(true);
+    expect(pre?.querySelector("code")?.getAttribute("data-code-info")).toBe(
+      "ts",
+    );
+  });
+
+  it("shows the caret only while streaming", () => {
+    const caret = "[data-streaming-markdown-caret]";
+    expect(
+      renderDefault({ content: "Hi", isStreaming: true }).querySelector(caret),
+    ).not.toBeNull();
+    expect(renderDefault({ content: "Hi" }).querySelector(caret)).toBeNull();
+  });
+
+  it("passes link and citation clicks to the callbacks", async () => {
+    const calls: string[] = [];
+    const container = renderDefault({
+      content:
+        "[link](https://example.com) cite [^ref]\n\n[^ref]: Ref https://example.org",
+      onLinkClick: (event: MouseEvent, url: string) => {
+        event.preventDefault();
+        calls.push(`link:${url}`);
+      },
+      onCitationClick: (event: MouseEvent, citation: { id: string }) => {
+        event.preventDefault();
+        calls.push(`cite:${citation.id}`);
+      },
+    });
+    await fireEvent.click(
+      container.querySelector('a[href="https://example.com"]')!,
+    );
+    await fireEvent.click(
+      container.querySelector('sup a[role="doc-noteref"]')!,
+    );
+    expect(calls).toEqual(["link:https://example.com", "cite:ref"]);
+  });
+});

package/src/v2/components/chat/audioRecorder.ts

@@ -1,11 +1,8 @@
-export type AudioRecorderState = "idle" | "recording" | "processing";
+import type { ɵAudioRecorderState } from "@copilotkit/core";
 
-export class AudioRecorderError extends Error {
-  constructor(message: string) {
-    super(message);
-    this.name = "AudioRecorderError";
-  }
-}
+export type AudioRecorderState = ɵAudioRecorderState;
+
+export { ɵAudioRecorderError as AudioRecorderError } from "@copilotkit/core";
 
 export interface CopilotChatAudioRecorderRef {
   state: AudioRecorderState;