@copilotkit/vue 1.83.0 → 1.84.1

package/src/v2/components/chat/CopilotSidebarView.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { computed, useAttrs } from "vue";
 import CopilotChatConfigurationProvider from "../../providers/CopilotChatConfigurationProvider.vue";
+import { forwardedSlotNames } from "./forwarded-slots";
 import CopilotSidebarViewInternal from "./CopilotSidebarViewInternal.vue";
 import type {
   CopilotChatFeatherSlotProps,
+  CopilotChatInterruptSlotProps,
   CopilotChatWelcomeScreenSlotProps,
   CopilotChatMessageViewSlotProps,
   CopilotChatScrollToBottomButtonSlotProps,
@@ -48,12 +50,16 @@ defineSlots<{
   "scroll-to-bottom-button"?: (
     props: CopilotChatScrollToBottomButtonSlotProps,
   ) => unknown;
+  interrupt?: (props: CopilotChatInterruptSlotProps) => unknown;
   input?: (props: CopilotSidebarWelcomeScreenInputSlotProps) => unknown;
   "suggestion-view"?: (
     props: CopilotSidebarWelcomeScreenSuggestionViewSlotProps,
   ) => unknown;
   "welcome-screen"?: (props: CopilotChatWelcomeScreenSlotProps) => unknown;
   "welcome-message"?: () => unknown;
+  // Any other slot goes to the chat view, as on CopilotChat.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: ((props: any) => unknown) | undefined;
 }>();
 
 const emit = defineEmits<{
@@ -115,47 +121,12 @@ const forwardedEventListeners = computed(() => {
 <template>
   <CopilotChatConfigurationProvider :is-modal-default-open="defaultOpen">
     <CopilotSidebarViewInternal v-bind="internalBindings">
-      <template v-if="$slots.header" #header="slotProps">
-        <slot name="header" v-bind="slotProps" />
-      </template>
-
-      <template v-if="$slots['toggle-button']" #toggle-button="slotProps">
-        <slot name="toggle-button" v-bind="slotProps" />
-      </template>
-
-      <template v-if="$slots['message-view']" #message-view="slotProps">
-        <slot name="message-view" v-bind="slotProps" />
-      </template>
-
-      <template v-if="$slots['scroll-view']" #scroll-view="slotProps">
-        <slot name="scroll-view" v-bind="slotProps" />
-      </template>
-
-      <template v-if="$slots.feather" #feather="slotProps">
-        <slot name="feather" v-bind="slotProps" />
-      </template>
-
       <template
-        v-if="$slots['scroll-to-bottom-button']"
-        #scroll-to-bottom-button="slotProps"
+        v-for="slotName in forwardedSlotNames($slots)"
+        :key="slotName"
+        #[slotName]="slotProps"
       >
-        <slot name="scroll-to-bottom-button" v-bind="slotProps" />
-      </template>
-
-      <template v-if="$slots.input" #input="slotProps">
-        <slot name="input" v-bind="slotProps" />
-      </template>
-
-      <template v-if="$slots['suggestion-view']" #suggestion-view="slotProps">
-        <slot name="suggestion-view" v-bind="slotProps" />
-      </template>
-
-      <template v-if="$slots['welcome-screen']" #welcome-screen="slotProps">
-        <slot name="welcome-screen" v-bind="slotProps" />
-      </template>
-
-      <template v-if="$slots['welcome-message']" #welcome-message>
-        <slot name="welcome-message" />
+        <slot :name="slotName" v-bind="slotProps" />
       </template>
     </CopilotSidebarViewInternal>
   </CopilotChatConfigurationProvider>

package/src/v2/components/chat/CopilotSidebarViewInternal.vue

@@ -13,8 +13,10 @@ import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfi
 import CopilotChatToggleButton from "./CopilotChatToggleButton.vue";
 import CopilotChatView from "./CopilotChatView.vue";
 import CopilotModalHeader from "./CopilotModalHeader.vue";
+import { forwardedSlotNames } from "./forwarded-slots";
 import type {
   CopilotChatFeatherSlotProps,
+  CopilotChatInterruptSlotProps,
   CopilotChatMessageViewSlotProps,
   CopilotChatScrollToBottomButtonSlotProps,
   CopilotChatScrollViewSlotProps,
@@ -57,14 +59,22 @@ defineSlots<{
   "scroll-to-bottom-button"?: (
     props: CopilotChatScrollToBottomButtonSlotProps,
   ) => unknown;
+  interrupt?: (props: CopilotChatInterruptSlotProps) => unknown;
   input?: (props: CopilotSidebarWelcomeScreenInputSlotProps) => unknown;
   "suggestion-view"?: (
     props: CopilotSidebarWelcomeScreenSuggestionViewSlotProps,
   ) => unknown;
   "welcome-screen"?: (props: CopilotChatWelcomeScreenSlotProps) => unknown;
   "welcome-message"?: () => unknown;
+  // Any other slot goes to the chat view, as on CopilotChat.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: ((props: any) => unknown) | undefined;
 }>();
 
+// Slots this component renders itself. It passes every other slot to the
+// chat view.
+const OWN_SLOTS = ["header", "toggle-button"] as const;
+
 const emit = defineEmits<{
   "submit-message": [value: string];
   stop: [];
@@ -310,42 +320,12 @@ onBeforeUnmount(() => {
           :on-finish-transcribe-with-audio="onFinishTranscribeWithAudio"
           v-bind="chatViewEventProps"
         >
-          <template v-if="$slots['message-view']" #message-view="slotProps">
-            <slot name="message-view" v-bind="slotProps" />
-          </template>
-
-          <template v-if="$slots['scroll-view']" #scroll-view="slotProps">
-            <slot name="scroll-view" v-bind="slotProps" />
-          </template>
-
-          <template v-if="$slots.feather" #feather>
-            <slot name="feather" />
-          </template>
-
           <template
-            v-if="$slots['scroll-to-bottom-button']"
-            #scroll-to-bottom-button="slotProps"
+            v-for="slotName in forwardedSlotNames($slots, OWN_SLOTS)"
+            :key="slotName"
+            #[slotName]="slotProps"
           >
-            <slot name="scroll-to-bottom-button" v-bind="slotProps" />
-          </template>
-
-          <template v-if="$slots.input" #input="slotProps">
-            <slot name="input" v-bind="slotProps" />
-          </template>
-
-          <template
-            v-if="$slots['suggestion-view']"
-            #suggestion-view="slotProps"
-          >
-            <slot name="suggestion-view" v-bind="slotProps" />
-          </template>
-
-          <template v-if="$slots['welcome-screen']" #welcome-screen="slotProps">
-            <slot name="welcome-screen" v-bind="slotProps" />
-          </template>
-
-          <template v-if="$slots['welcome-message']" #welcome-message>
-            <slot name="welcome-message" />
+            <slot :name="slotName" v-bind="slotProps" />
           </template>
         </CopilotChatView>
       </div>

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

@@ -116,7 +116,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;