@copilotkit/vue 2.0.0-rc.15 → 2.0.0-rc.16

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/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/types.ts

@@ -179,7 +179,15 @@ export interface CopilotChatProps extends Omit<
   | "onStartTranscribe"
   | "onCancelTranscribe"
   | "onFinishTranscribe"
+  // Redeclared below, deprecated: the chat sets it from its own state
+  | "inputMode"
 > {
+  /**
+   * @deprecated Has no effect. `CopilotChat` sets the input mode from its own
+   * transcription state. To set it yourself, render `CopilotChatView` and pass
+   * `inputMode` there.
+   */
+  inputMode?: CopilotChatInputMode;
   agentId?: string;
   threadId?: string;
   throttleMs?: number;