@copilotkit/vue 1.72.1-canary.sp-longthread-perf → 1.73.1

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

@@ -1,7 +1,7 @@
 import { cleanup, fireEvent, screen, waitFor } from "@testing-library/vue";
 import { computed, defineComponent, onMounted } from "vue";
 import type { PropType } from "vue";
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { EventType } from "@ag-ui/client";
 import { z } from "zod";
 import { useConfigureSuggestions } from "../../../hooks/use-configure-suggestions";
@@ -23,6 +23,7 @@ import {
   toolCallResultEvent,
 } from "../../../__tests__/utils/test-helpers";
 import CopilotChat from "../CopilotChat.vue";
+import CopilotPopup from "../CopilotPopup.vue";
 
 afterEach(() => {
   cleanup();
@@ -138,11 +139,33 @@ describe("CopilotChat E2E - Chat Basics and Streaming Patterns", () => {
         components: { CopilotChat },
         template: `
           <CopilotChat :welcome-screen="false">
-            <template #chat-view="{ isRunning, onStop, onSubmitMessage }">
+            <template #chat-view="{
+              isRunning,
+              onStop,
+              onSubmitMessage,
+              onAddFile,
+              onStartTranscribe,
+              onCancelTranscribe,
+              onFinishTranscribe,
+              onFinishTranscribeWithAudio,
+            }">
               <div>
                 <button data-testid="submit" @click="onSubmitMessage('trigger run')">submit</button>
                 <span data-testid="running">{{ isRunning ? "running" : "idle" }}</span>
-                <span data-testid="stop-availability">{{ onStop ? "available" : "missing" }}</span>
+                <span data-testid="stop-availability">
+                  {{
+                    [
+                      onStop,
+                      onAddFile,
+                      onStartTranscribe,
+                      onCancelTranscribe,
+                      onFinishTranscribe,
+                      onFinishTranscribeWithAudio,
+                    ].every((command) => typeof command === "function")
+                      ? "available"
+                      : "missing"
+                  }}
+                </span>
               </div>
             </template>
           </CopilotChat>
@@ -153,7 +176,7 @@ describe("CopilotChat E2E - Chat Basics and Streaming Patterns", () => {
 
       expect(screen.getByTestId("running").textContent).toBe("idle");
       expect(screen.getByTestId("stop-availability").textContent).toBe(
-        "missing",
+        "available",
       );
 
       await fireEvent.click(screen.getByTestId("submit"));
@@ -172,7 +195,7 @@ describe("CopilotChat E2E - Chat Basics and Streaming Patterns", () => {
       await waitFor(() => {
         expect(screen.getByTestId("running").textContent).toBe("idle");
         expect(screen.getByTestId("stop-availability").textContent).toBe(
-          "missing",
+          "available",
         );
       });
     });
@@ -1237,4 +1260,132 @@ describe("CopilotChat E2E - Chat Basics and Streaming Patterns", () => {
       });
     });
   });
+
+  describe("Vue-specific semantics", () => {
+    it("forwards a static stop listener through a custom input slot after a run starts", async () => {
+      const agent = new MockStepwiseAgent();
+      const onStop = vi.fn();
+      const CustomInputChat = defineComponent({
+        components: { CopilotChat },
+        setup() {
+          return { onStop };
+        },
+        template: `
+          <CopilotChat :welcome-screen="false" @stop="onStop">
+            <template #input="{ isRunning, onSubmitMessage, onStop }">
+              <button data-testid="custom-input-submit" @click="onSubmitMessage('Hello')">
+                submit
+              </button>
+              <button v-if="isRunning" data-testid="custom-input-stop" @click="onStop">
+                stop
+              </button>
+            </template>
+          </CopilotChat>
+        `,
+      });
+
+      renderWithCopilotKit({ agent, children: CustomInputChat });
+
+      expect(screen.queryByTestId("custom-input-stop")).toBeNull();
+
+      await fireEvent.click(screen.getByTestId("custom-input-submit"));
+      await waitFor(() => expect(agent.messages.length).toBeGreaterThan(0));
+
+      await agent.emit(runStartedEvent());
+      await waitFor(() => {
+        expect(screen.getByTestId("custom-input-stop")).toBeDefined();
+      });
+
+      await fireEvent.click(screen.getByTestId("custom-input-stop"));
+      expect(onStop).toHaveBeenCalledTimes(1);
+
+      await agent.complete();
+    });
+
+    it("does not emit unavailable transcription commands from a custom chat-view slot", async () => {
+      const agent = new MockStepwiseAgent();
+      const onCancelTranscribe = vi.fn();
+      const onFinishTranscribe = vi.fn();
+      const CustomChatView = defineComponent({
+        components: { CopilotChat },
+        setup() {
+          return { onCancelTranscribe, onFinishTranscribe };
+        },
+        template: `
+          <CopilotChat
+            :welcome-screen="false"
+            @cancel-transcribe="onCancelTranscribe"
+            @finish-transcribe="onFinishTranscribe"
+          >
+            <template #chat-view="{ onCancelTranscribe, onFinishTranscribe }">
+              <button data-testid="custom-cancel-transcribe" @click="onCancelTranscribe">
+                cancel
+              </button>
+              <button data-testid="custom-finish-transcribe" @click="onFinishTranscribe">
+                finish
+              </button>
+            </template>
+          </CopilotChat>
+        `,
+      });
+
+      renderWithCopilotKit({ agent, children: CustomChatView });
+
+      await fireEvent.click(screen.getByTestId("custom-cancel-transcribe"));
+      await fireEvent.click(screen.getByTestId("custom-finish-transcribe"));
+
+      expect(onCancelTranscribe).not.toHaveBeenCalled();
+      expect(onFinishTranscribe).not.toHaveBeenCalled();
+    });
+
+    it("preserves stop behavior through a popup close and reopen", async () => {
+      const agent = new MockStepwiseAgent();
+      const onStop = vi.fn();
+      const CustomPopup = defineComponent({
+        components: { CopilotPopup },
+        setup() {
+          return { onStop };
+        },
+        template: `
+          <CopilotPopup :welcome-screen="false" @stop="onStop">
+            <template #toggle-button="{ toggle }">
+              <button data-testid="popup-toggle" @click="toggle">Toggle</button>
+            </template>
+            <template #input="{ isRunning, onSubmitMessage, onStop }">
+              <button data-testid="popup-submit" @click="onSubmitMessage('Hello')">
+                submit
+              </button>
+              <button v-if="isRunning" data-testid="popup-stop" @click="onStop">
+                stop
+              </button>
+            </template>
+          </CopilotPopup>
+        `,
+      });
+
+      renderWithCopilotKit({ agent, children: CustomPopup });
+
+      await fireEvent.click(screen.getByTestId("popup-submit"));
+      await waitFor(() => expect(agent.messages.length).toBeGreaterThan(0));
+      await agent.emit(runStartedEvent());
+      await waitFor(() => {
+        expect(screen.getByTestId("popup-stop")).toBeDefined();
+      });
+
+      await fireEvent.click(screen.getByTestId("popup-toggle"));
+      await waitFor(() => {
+        expect(screen.queryByTestId("popup-stop")).toBeNull();
+      });
+
+      await fireEvent.click(screen.getByTestId("popup-toggle"));
+      await waitFor(() => {
+        expect(screen.getByTestId("popup-stop")).toBeDefined();
+      });
+
+      await fireEvent.click(screen.getByTestId("popup-stop"));
+      expect(onStop).toHaveBeenCalledTimes(1);
+
+      await agent.complete();
+    });
+  });
 });

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

@@ -562,6 +562,40 @@ describe("CopilotChatInput", () => {
     expect(screen.queryByTestId("copilot-chat-input-send")).toBeNull();
   });
 
+  it("shows finish control when only onFinishTranscribeWithAudio is provided", () => {
+    renderWithProvider({
+      props: {
+        mode: "transcribe",
+      },
+      listeners: {
+        onCancelTranscribe: () => {},
+        onFinishTranscribeWithAudio: () => {},
+      },
+    });
+
+    expect(
+      screen.getByTestId("copilot-chat-input-finish-transcribe"),
+    ).toBeDefined();
+  });
+
+  it("hides finish control when neither finish handler is provided", () => {
+    renderWithProvider({
+      props: {
+        mode: "transcribe",
+      },
+      listeners: {
+        onCancelTranscribe: () => {},
+      },
+    });
+
+    expect(
+      screen.queryByTestId("copilot-chat-input-finish-transcribe"),
+    ).toBeNull();
+    expect(
+      screen.getByTestId("copilot-chat-input-cancel-transcribe"),
+    ).toBeDefined();
+  });
+
   it("disables add menu button in transcribe mode", () => {
     renderWithProvider({
       props: {

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

@@ -0,0 +1,140 @@
+import { defineComponent, ref } from "vue";
+import { render, screen } from "@testing-library/vue";
+import { describe, expect, it } from "vitest";
+import type { Message, ToolCall } from "@ag-ui/core";
+import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
+import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
+import CopilotChatMessageView from "../CopilotChatMessageView.vue";
+
+const AGENT_ID = "default";
+const THREAD_ID = "thread-test";
+
+function toolCall(id: string, name = "approve"): ToolCall {
+  return { id, type: "function", function: { name, arguments: "{}" } };
+}
+
+function assistantMsg(id: string, content?: string, toolCalls?: ToolCall[]) {
+  return { id, role: "assistant" as const, content, toolCalls } as Message;
+}
+
+/**
+ * Renders the view over a reactive message list and returns a setter, so a test
+ * can swap the list on the SAME mounted instance. Row teardown-vs-reuse is only
+ * observable that way — comparing DOM node identity across an update.
+ */
+function renderWithSwappableMessages(initial: Message[]) {
+  const messages = ref<Message[]>(initial);
+
+  const Host = defineComponent({
+    components: {
+      CopilotKitProvider,
+      CopilotChatConfigurationProvider,
+      CopilotChatMessageView,
+    },
+    setup() {
+      return { messages, agentId: AGENT_ID, threadId: THREAD_ID };
+    },
+    template: `
+      <CopilotKitProvider runtime-url="/api/copilotkit">
+        <CopilotChatConfigurationProvider :agent-id="agentId" :thread-id="threadId">
+          <CopilotChatMessageView :messages="messages" />
+        </CopilotChatConfigurationProvider>
+      </CopilotKitProvider>
+    `,
+  });
+
+  render(Host);
+
+  return {
+    async setMessages(next: Message[]) {
+      messages.value = next;
+      // Let Vue flush the patch (and the post-flush prune watcher).
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    },
+  };
+}
+
+function assistantRow() {
+  return screen.getByTestId("copilot-assistant-message");
+}
+
+describe("CopilotChatMessageView stable row keys", () => {
+  it("reuses the row when the message id changes but a tool call is stable", async () => {
+    const { setMessages } = renderWithSwappableMessages([
+      assistantMsg("lc_run--1", "Working...", [toolCall("call_A")]),
+    ]);
+    const node = assistantRow();
+
+    await setMessages([assistantMsg("resp_1", "Done", [toolCall("call_A")])]);
+
+    expect(assistantRow()).toBe(node);
+    expect(assistantRow().textContent).toContain("Done");
+  });
+
+  it("does not tear down the row when a tool call arrives mid-stream", async () => {
+    // Regression guard: keying by the tool-call id instead of recording an
+    // override tears the row down here, for every provider.
+    const { setMessages } = renderWithSwappableMessages([
+      assistantMsg("lc_run--1", "Let me check that..."),
+    ]);
+    const node = assistantRow();
+
+    await setMessages([
+      assistantMsg("lc_run--1", "Let me check that...", [toolCall("call_A")]),
+    ]);
+
+    expect(assistantRow()).toBe(node);
+  });
+
+  it("survives the whole sequence: text, then tool call, then id re-key", async () => {
+    const { setMessages } = renderWithSwappableMessages([
+      assistantMsg("lc_run--1", "Let me check..."),
+    ]);
+    const node = assistantRow();
+
+    await setMessages([
+      assistantMsg("lc_run--1", "Let me check...", [toolCall("call_A")]),
+    ]);
+    expect(assistantRow()).toBe(node);
+
+    await setMessages([assistantMsg("resp_1", "Done", [toolCall("call_A")])]);
+    expect(assistantRow()).toBe(node);
+  });
+
+  it("tears down a text-only row on an id change (documented limitation)", async () => {
+    const { setMessages } = renderWithSwappableMessages([
+      assistantMsg("lc_run--1", "Working..."),
+    ]);
+    const node = assistantRow();
+
+    await setMessages([assistantMsg("resp_1", "Done")]);
+
+    expect(assistantRow()).not.toBe(node);
+  });
+
+  it("renders both rows when a tool-call id is shared", async () => {
+    renderWithSwappableMessages([
+      assistantMsg("a-1", "First", [toolCall("call_X")]),
+      assistantMsg("a-2", "Second", [toolCall("call_X")]),
+    ]);
+
+    const rows = screen.getAllByTestId("copilot-assistant-message");
+    expect(rows).toHaveLength(2);
+    expect(rows[0]!.textContent).toContain("First");
+    expect(rows[1]!.textContent).toContain("Second");
+  });
+
+  it("keeps the first row when the list grows around it", async () => {
+    const { setMessages } = renderWithSwappableMessages([
+      assistantMsg("lc_run--1", "First", [toolCall("call_A")]),
+    ]);
+    const node = assistantRow();
+
+    await setMessages([
+      assistantMsg("resp_1", "First", [toolCall("call_A")]),
+      assistantMsg("lc_run--2", "Second", [toolCall("call_B", "b")]),
+    ]);
+
+    expect(screen.getAllByTestId("copilot-assistant-message")[0]).toBe(node);
+  });
+});

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

@@ -254,6 +254,52 @@ describe("CopilotChatUserMessage", () => {
     });
   });
 
+  it("disables custom branch commands when no switch callback is available", async () => {
+    const message: UserMessage = {
+      id: "user-no-branch-handler",
+      role: "user",
+      timestamp: new Date(),
+      content: "Custom branch controls without a handler",
+    };
+
+    const wrapper = mount(CopilotChatUserMessage, {
+      props: {
+        message,
+        branchIndex: 0,
+        numberOfBranches: 2,
+      },
+      slots: {
+        "branch-navigation": ({
+          canGoPrev,
+          canGoNext,
+          goNext,
+        }: {
+          canGoPrev: boolean;
+          canGoNext: boolean;
+          goNext: () => void;
+        }) =>
+          h("div", [
+            h(
+              "span",
+              { "data-testid": "branch-capabilities" },
+              `${canGoPrev}:${canGoNext}`,
+            ),
+            h(
+              "button",
+              { "data-testid": "branch-next", onClick: goNext },
+              "next",
+            ),
+          ]),
+      },
+    });
+
+    expect(wrapper.get("[data-testid='branch-capabilities']").text()).toBe(
+      "false:false",
+    );
+    await wrapper.get("[data-testid='branch-next']").trigger("click");
+    expect(wrapper.emitted("switch-to-branch")).toBeUndefined();
+  });
+
   it("supports custom layout slot with all control callbacks", async () => {
     const onEditMessage = vi.fn();
     const onSwitchToBranch = vi.fn();

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

@@ -121,6 +121,124 @@ describe("CopilotChatView", () => {
     ]);
   });
 
+  it("forwards a static stop listener through the input slot", async () => {
+    const onStop = vi.fn();
+    const StaticStopHost = defineComponent({
+      components: {
+        CopilotKitProvider,
+        CopilotChatConfigurationProvider,
+        CopilotChatView,
+      },
+      setup() {
+        return { chatMessages, onStop };
+      },
+      template: `
+        <CopilotKitProvider runtime-url="/api/copilotkit">
+          <CopilotChatConfigurationProvider
+            thread-id="thread-1"
+            agent-id="default"
+          >
+            <CopilotChatView :messages="chatMessages" @stop="onStop">
+              <template #input="{ onStop: slotOnStop }">
+                <button data-testid="direct-stop" @click="slotOnStop">
+                  stop
+                </button>
+              </template>
+            </CopilotChatView>
+          </CopilotChatConfigurationProvider>
+        </CopilotKitProvider>
+      `,
+    });
+    const wrapper = mount(StaticStopHost);
+
+    await wrapper.get("[data-testid='direct-stop']").trigger("click");
+
+    expect(onStop).toHaveBeenCalledTimes(1);
+  });
+
+  it("exposes canStop / canAddFile / canTranscribe on the input slot", () => {
+    const CapabilityHost = defineComponent({
+      components: {
+        CopilotKitProvider,
+        CopilotChatConfigurationProvider,
+        CopilotChatView,
+      },
+      setup() {
+        return { chatMessages };
+      },
+      template: `
+        <CopilotKitProvider runtime-url="/api/copilotkit">
+          <CopilotChatConfigurationProvider
+            thread-id="thread-1"
+            agent-id="default"
+          >
+            <CopilotChatView
+              :messages="chatMessages"
+              :on-stop="() => {}"
+              :on-add-file="() => {}"
+            >
+              <template
+                #input="{ canStop, canAddFile, canTranscribe }"
+              >
+                <span data-testid="can-stop">{{ canStop }}</span>
+                <span data-testid="can-add-file">{{ canAddFile }}</span>
+                <span data-testid="can-transcribe">{{ canTranscribe }}</span>
+              </template>
+            </CopilotChatView>
+          </CopilotChatConfigurationProvider>
+        </CopilotKitProvider>
+      `,
+    });
+    const wrapper = mount(CapabilityHost);
+
+    expect(wrapper.get("[data-testid='can-stop']").text()).toBe("true");
+    expect(wrapper.get("[data-testid='can-add-file']").text()).toBe("true");
+    expect(wrapper.get("[data-testid='can-transcribe']").text()).toBe("false");
+  });
+
+  it("exposes canStop / canAddFile / canTranscribe on the welcome-screen slot", () => {
+    const WelcomeCapabilityHost = defineComponent({
+      components: {
+        CopilotKitProvider,
+        CopilotChatConfigurationProvider,
+        CopilotChatView,
+      },
+      template: `
+        <CopilotKitProvider runtime-url="/api/copilotkit">
+          <CopilotChatConfigurationProvider
+            thread-id="thread-1"
+            agent-id="default"
+          >
+            <CopilotChatView
+              :messages="[]"
+              :on-stop="() => {}"
+              :on-start-transcribe="() => {}"
+            >
+              <template
+                #welcome-screen="{ canStop, canAddFile, canTranscribe }"
+              >
+                <span data-testid="welcome-can-stop">{{ canStop }}</span>
+                <span data-testid="welcome-can-add-file">{{ canAddFile }}</span>
+                <span data-testid="welcome-can-transcribe">{{
+                  canTranscribe
+                }}</span>
+              </template>
+            </CopilotChatView>
+          </CopilotChatConfigurationProvider>
+        </CopilotKitProvider>
+      `,
+    });
+    const wrapper = mount(WelcomeCapabilityHost);
+
+    expect(wrapper.get("[data-testid='welcome-can-stop']").text()).toBe("true");
+    expect(wrapper.get("[data-testid='welcome-can-add-file']").text()).toBe(
+      "false",
+    );
+    expect(wrapper.get("[data-testid='welcome-can-transcribe']").text()).toBe(
+      "true",
+    );
+  });
+
   it("renders suggestions and forwards selection callback and event", async () => {
     const onSelectSuggestion = vi.fn();
     const wrapper = mountChatView({

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

@@ -55,6 +55,43 @@ describe("CopilotPopupView", () => {
     );
   });
 
+  it("only exposes stop capability when an onStop callback is available", async () => {
+    const withoutStop = mountPopupView(
+      {},
+      {
+        "welcome-screen": ({ canStop }: { canStop: boolean }) =>
+          h("div", { "data-testid": "popup-can-stop" }, String(canStop)),
+      },
+    );
+
+    expect(withoutStop.get("[data-testid='popup-can-stop']").text()).toBe(
+      "false",
+    );
+
+    const onStop = vi.fn();
+    const withStop = mountPopupView(
+      { onStop },
+      {
+        "welcome-screen": ({
+          canStop,
+          onStop: stop,
+        }: {
+          canStop: boolean;
+          onStop: () => void;
+        }) =>
+          h(
+            "button",
+            { "data-testid": "popup-stop", onClick: stop },
+            String(canStop),
+          ),
+      },
+    );
+
+    expect(withStop.get("[data-testid='popup-stop']").text()).toBe("true");
+    await withStop.get("[data-testid='popup-stop']").trigger("click");
+    expect(onStop).toHaveBeenCalledTimes(1);
+  });
+
   it("closes on escape and outside pointerdown when enabled", async () => {
     const wrapper = mountPopupView({
       clickOutsideToClose: true,
@@ -109,4 +146,46 @@ describe("CopilotPopupView", () => {
   it("exposes the WelcomeScreen namespaced export", () => {
     expect(NamespacedPopupView.WelcomeScreen).toBeDefined();
   });
+
+  it("passes capability flags through the namespaced WelcomeScreen input slot", () => {
+    const wrapper = mount(NamespacedPopupView.WelcomeScreen, {
+      props: {
+        suggestions: [],
+        loadingIndexes: [],
+        modelValue: "",
+        isRunning: false,
+        inputMode: "input",
+        inputToolsMenu: [],
+        canStop: false,
+        canAddFile: false,
+        canTranscribe: false,
+        onUpdateModelValue: vi.fn(),
+        onSubmitMessage: vi.fn(),
+        onStop: vi.fn(),
+        onAddFile: vi.fn(),
+        onStartTranscribe: vi.fn(),
+        onSelectSuggestion: vi.fn(),
+      },
+      slots: {
+        input: ({
+          canStop,
+          canAddFile,
+          canTranscribe,
+        }: {
+          canStop: boolean;
+          canAddFile: boolean;
+          canTranscribe: boolean;
+        }) =>
+          h(
+            "div",
+            { "data-testid": "popup-welcome-capabilities" },
+            `${canStop}:${canAddFile}:${canTranscribe}`,
+          ),
+      },
+    });
+
+    expect(
+      wrapper.get("[data-testid='popup-welcome-capabilities']").text(),
+    ).toBe("false:false:false");
+  });
 });