@copilotkit/vue 2.0.0-rc.2 → 2.0.0-rc.20

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__/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__/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/copilotChatToolCallItemRender.ts

@@ -1,7 +1,7 @@
 import type { Message, ToolCall, ToolMessage } from "@ag-ui/core";
 import { contentToText } from "@ag-ui/core";
 import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
-import { ToolCallStatus } from "@copilotkit/core";
+import { ToolCallStatus, ɵresolveToolCallRenderer } from "@copilotkit/core";
 import { partialJSONParse } from "@copilotkit/shared";
 import type { CopilotChatToolCallRenderSlotProps } from "./types";
 import type {
@@ -24,23 +24,6 @@ export function getToolCallSlotName(toolName: string): `tool-call-${string}` {
   return `tool-call-${toolName}`;
 }
 
-export function getCoreRenderConfig(
-  toolCall: ToolCall,
-  renderToolCalls: readonly VueToolCallRenderer<unknown>[],
-  agentId: string,
-): VueToolCallRenderer<unknown> | undefined {
-  const exactMatches = renderToolCalls.filter(
-    (renderConfig) => renderConfig.name === toolCall.function.name,
-  );
-
-  return (
-    exactMatches.find((renderConfig) => renderConfig.agentId === agentId) ??
-    exactMatches.find((renderConfig) => !renderConfig.agentId) ??
-    exactMatches[0] ??
-    renderToolCalls.find((renderConfig) => renderConfig.name === "*")
-  );
-}
-
 export function getToolCallRenderProps(
   toolCall: ToolCall,
   messages: Message[],
@@ -122,6 +105,7 @@ export function getToolCallMemoDeps(
     toolCall.function.arguments,
     findToolMessage(messages, toolCall.id)?.content,
     executingToolCallIds.has(toolCall.id),
-    getCoreRenderConfig(toolCall, renderToolCalls, agentId)?.render,
+    ɵresolveToolCallRenderer(renderToolCalls, toolCall.function.name, agentId)
+      ?.render,
   ];
 }

package/src/v2/components/chat/forwarded-slots.ts

@@ -0,0 +1,17 @@
+import type { Slots } from "vue";
+
+/**
+ * Returns the names of the slots that a wrapper passes on to the component it
+ * wraps: every slot in `slots` except the ones in `ownSlots`, which the
+ * wrapper renders itself.
+ *
+ * CopilotChat passes every slot except `chat-view` to CopilotChatView.
+ * CopilotSidebar, CopilotPopup, and their view components use this rule at
+ * each layer, so a slot that works on CopilotChat also works on them.
+ */
+export function forwardedSlotNames(
+  slots: Slots,
+  ownSlots: readonly string[] = [],
+): string[] {
+  return Object.keys(slots).filter((name) => !ownSlots.includes(name));
+}

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

@@ -1,5 +1,4 @@
 export * from "./types";
-export { default as BasicMarkdown } from "./BasicMarkdown.vue";
 export { default as StreamingMarkdownDefault } from "./StreamingMarkdownDefault.vue";
 export { default as CopilotChatAssistantMessage } from "./CopilotChatAssistantMessage.vue";
 export { default as CopilotChatAudioRecorder } from "./CopilotChatAudioRecorder.vue";

package/src/v2/components/chat/inspector-shortcuts.ts

@@ -1,34 +1,28 @@
+import { ɵinspectorShortcuts } from "@copilotkit/core";
 import { onBeforeUnmount, readonly, ref } from "vue";
 import type { Ref } from "vue";
 
-// Page-lifetime preference, shared by every message and chat. Deliberately
-// avoid sessionStorage: it survives reloads, while this preference must not.
-let shortcutsHidden = false;
-const listeners = new Set<() => void>();
-
 /**
  * Whether the user hid the Inspector buttons in the message toolbars ("Hide
- * this icon"), until the page reloads.
+ * this icon"), until the page reloads. Core's `ɵinspectorShortcuts` holds
+ * the page-lifetime preference.
  * @internal
  */
 export function useInspectorShortcutsHidden(): Readonly<Ref<boolean>> {
-  const hidden = ref(shortcutsHidden);
-  const listener = () => {
-    hidden.value = shortcutsHidden;
-  };
-  listeners.add(listener);
-  onBeforeUnmount(() => listeners.delete(listener));
+  const hidden = ref(ɵinspectorShortcuts.hidden);
+  const unsubscribe = ɵinspectorShortcuts.subscribe(() => {
+    hidden.value = ɵinspectorShortcuts.hidden;
+  });
+  onBeforeUnmount(unsubscribe);
   return readonly(hidden);
 }
 
 /** Hides the Inspector buttons of every message until the page reloads. */
 export function hideInspectorShortcuts(): void {
-  shortcutsHidden = true;
-  listeners.forEach((listener) => listener());
+  ɵinspectorShortcuts.hide();
 }
 
 /** @internal Shows the buttons again, so each test starts fresh. */
 export function ɵresetInspectorShortcuts(): void {
-  shortcutsHidden = false;
-  listeners.forEach((listener) => listener());
+  ɵinspectorShortcuts.reset();
 }