@copilotkit/vue 1.79.2-canary.1792172552 → 1.81.0

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

@@ -290,8 +290,8 @@ onBeforeUnmount(() => {
                   :class="toolbarButtonClass"
                   class="cpk:h-6 cpk:w-6 cpk:p-0"
                   :disabled="!canGoPrev"
-                  aria-label="Previous branch"
-                  title="Previous branch"
+                  :aria-label="labels.userMessageToolbarPreviousBranchLabel"
+                  :title="labels.userMessageToolbarPreviousBranchLabel"
                   @click="goPrev"
                 >
                   <IconChevronLeft class="cpk:size-[20px]" />
@@ -306,8 +306,8 @@ onBeforeUnmount(() => {
                   :class="toolbarButtonClass"
                   class="cpk:h-6 cpk:w-6 cpk:p-0"
                   :disabled="!canGoNext"
-                  aria-label="Next branch"
-                  title="Next branch"
+                  :aria-label="labels.userMessageToolbarNextBranchLabel"
+                  :title="labels.userMessageToolbarNextBranchLabel"
                   @click="goNext"
                 >
                   <IconChevronRight class="cpk:size-[20px]" />

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

@@ -441,7 +441,7 @@ onBeforeUnmount(() => {
 <template>
   <div
     data-copilotkit
-    class="cpk:@container cpk:relative cpk:h-full"
+    class="copilotKitChat cpk:@container cpk:relative cpk:h-full"
     data-testid="copilot-chat-view"
     v-bind="$attrs"
     @dragover="handleDragOver"
@@ -660,6 +660,7 @@ onBeforeUnmount(() => {
           <button
             type="button"
             data-testid="copilot-chat-view-scroll-to-bottom"
+            :aria-label="labels.chatScrollToBottomLabel"
             class="cpk:rounded-full cpk:w-10 cpk:h-10 cpk:p-0 cpk:pointer-events-auto cpk:bg-white cpk:dark:bg-gray-900 cpk:shadow-lg cpk:border cpk:border-gray-200 cpk:dark:border-gray-700 cpk:hover:bg-gray-50 cpk:dark:hover:bg-gray-800 cpk:flex cpk:items-center cpk:justify-center cpk:cursor-pointer"
             @click="scrollToBottom()"
           >

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

@@ -535,6 +535,45 @@ describe("CopilotChatInput", () => {
     });
   });
 
+  // The send button shows only an icon, so its accessible name comes from the
+  // labels config; that is also what lets an app translate it.
+  it("names the send button with the default label", () => {
+    renderWithProvider({
+      props: { modelValue: "" },
+      listeners: { onSubmitMessage: mockOnSubmitMessage },
+    });
+
+    expect(screen.getByRole("button", { name: "Send message" })).toBe(
+      getSendButton(),
+    );
+  });
+
+  it("names the send button Stop while it stops the run", () => {
+    renderWithProvider({
+      props: { modelValue: "", isRunning: true },
+      listeners: { onSubmitMessage: mockOnSubmitMessage, onStop: vi.fn() },
+    });
+
+    expect(screen.getByRole("button", { name: "Stop" })).toBe(getSendButton());
+  });
+
+  it("names the send button with the configured labels", () => {
+    renderWithProvider({
+      template: `
+        <CopilotChatConfigurationProvider
+          :thread-id="TEST_THREAD_ID"
+          :labels="{ chatInputToolbarSendButtonLabel: 'Nachricht senden' }"
+        >
+          <CopilotChatInput model-value="" />
+        </CopilotChatConfigurationProvider>
+      `,
+    });
+
+    expect(screen.getByRole("button", { name: "Nachricht senden" })).toBe(
+      getSendButton(),
+    );
+  });
+
   it("shows cancel and finish buttons in transcribe mode", () => {
     renderWithProvider({
       props: {

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

@@ -774,7 +774,7 @@ describe("Partial Args Accumulation", () => {
 
     await waitFor(() => {
       const tool = screen.getByTestId("complex-tool");
-      expect(tool.textContent).toContain("Age: 30");
+      expect(tool.textContent).toContain("Age: pending");
       expect(tool.textContent).toContain("City: pending");
     });
 
@@ -787,6 +787,7 @@ describe("Partial Args Accumulation", () => {
 
     await waitFor(() => {
       const tool = screen.getByTestId("complex-tool");
+      expect(tool.textContent).toContain("Age: 30");
       expect(tool.textContent).toContain("City: Paris");
       expect(tool.textContent).toMatch(/Status: (complete|inProgress)/i);
     });

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

@@ -1,9 +1,11 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { h, nextTick } from "vue";
+import { defineComponent, h, nextTick } from "vue";
+import { render, screen } from "@testing-library/vue";
 import { mount } from "@vue/test-utils";
 import type { UserMessage } from "@ag-ui/core";
 import { CopilotChatDefaultLabels } from "../../../providers/types";
 import CopilotChatUserMessage from "../CopilotChatUserMessage.vue";
+import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
 
 describe("CopilotChatUserMessage", () => {
   let originalClipboard: Clipboard | undefined;
@@ -101,6 +103,45 @@ describe("CopilotChatUserMessage", () => {
     ).toBe(false);
   });
 
+  it("names the branch buttons with the configured labels", () => {
+    const Host = defineComponent({
+      components: { CopilotChatConfigurationProvider, CopilotChatUserMessage },
+      setup() {
+        return {
+          message: {
+            id: "user-5",
+            role: "user",
+            timestamp: new Date(),
+            content: "Branch message",
+          } as UserMessage,
+          labels: {
+            userMessageToolbarPreviousBranchLabel: "Vorherige Antwort",
+            userMessageToolbarNextBranchLabel: "Nächste Antwort",
+          },
+          onSwitchToBranch: vi.fn(),
+        };
+      },
+      template: `
+        <CopilotChatConfigurationProvider thread-id="thread-1" :labels="labels">
+          <CopilotChatUserMessage
+            :message="message"
+            :branch-index="1"
+            :number-of-branches="3"
+            :on-switch-to-branch="onSwitchToBranch"
+          />
+        </CopilotChatConfigurationProvider>
+      `,
+    });
+    render(Host);
+
+    expect(
+      screen.getByRole("button", { name: "Vorherige Antwort" }),
+    ).toBeDefined();
+    expect(
+      screen.getByRole("button", { name: "Nächste Antwort" }),
+    ).toBeDefined();
+  });
+
   it("renders branch navigation and emits switch payload exactly once", async () => {
     const onSwitchToBranch = vi.fn();
     const message: UserMessage = {

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

@@ -0,0 +1,69 @@
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+import { h } from "vue";
+import { mount } from "@vue/test-utils";
+import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
+import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
+import CopilotChatView from "../CopilotChatView.vue";
+
+const CHAT_ROOT_SELECTOR = ".copilotKitChat[data-copilotkit]";
+
+// Resolve from this file, so the read does not depend on the working directory.
+// (A `new URL(...)` object fails here: under jsdom it is not Node's URL.)
+const globalsCss = readFileSync(
+  resolve(
+    dirname(fileURLToPath(import.meta.url)),
+    "../../../../styles/globals.css",
+  ),
+  { encoding: "utf8" },
+);
+
+/** Returns the body of the first `@layer <name> { ... }` block. */
+function layerBody(css: string, name: string): string {
+  const start = css.indexOf(`@layer ${name} {`);
+  if (start === -1) return "";
+  let depth = 0;
+  for (let i = css.indexOf("{", start); i < css.length; i++) {
+    if (css[i] === "{") depth++;
+    if (css[i] === "}" && --depth === 0) {
+      return css.slice(css.indexOf("{", start) + 1, i);
+    }
+  }
+  return "";
+}
+
+function mountChatView(props: Record<string, unknown>) {
+  return mount(CopilotKitProvider, {
+    props: { runtimeUrl: "/api/copilotkit" },
+    slots: {
+      default: () =>
+        h(
+          CopilotChatConfigurationProvider,
+          { threadId: "t1" },
+          { default: () => h(CopilotChatView, props) },
+        ),
+    },
+  });
+}
+
+// PE-1053, the Vue side of PE-788: the chat root is an inline-size container
+// (`cpk:@container`), so its content gives it no intrinsic width. As a flex
+// item in a row its auto width collapsed to a narrow column. jsdom does no
+// layout, so these tests pin the two halves of the fix: the base-layer width
+// rule, and a chat root that the rule's selector matches.
+describe("CopilotChatView root width (PE-1053)", () => {
+  it("fills its container from the base layer, so app widths still win", () => {
+    const base = layerBody(globalsCss, "base").replace(/\s+/g, " ");
+    expect(base).toContain(`${CHAT_ROOT_SELECTOR} { width: 100%; }`);
+  });
+
+  // The welcome screen and the message view share this one root element.
+  it("the chat root matches the width rule", () => {
+    const wrapper = mountChatView({ messages: [] });
+    const root = wrapper.find("[data-testid='copilot-chat-view']");
+    expect(root.exists()).toBe(true);
+    expect(root.element.matches(CHAT_ROOT_SELECTOR)).toBe(true);
+  });
+});

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

@@ -1,6 +1,7 @@
 import { describe, expect, it, vi } from "vitest";
 import { defineComponent, h, nextTick, ref } from "vue";
 import { mount } from "@vue/test-utils";
+import { render, screen } from "@testing-library/vue";
 import type { AssistantMessage, Message, UserMessage } from "@ag-ui/core";
 import type { Suggestion } from "@copilotkit/core";
 import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
@@ -404,6 +405,61 @@ describe("CopilotChatView", () => {
       .trigger("click");
   });
 
+  it("names the scroll-to-bottom button with the configured label", async () => {
+    const Host = defineComponent({
+      components: {
+        CopilotKitProvider,
+        CopilotChatConfigurationProvider,
+        CopilotChatView,
+      },
+      setup() {
+        return {
+          messages: createChatMessages(12),
+          labels: { chatScrollToBottomLabel: "Nach unten scrollen" },
+        };
+      },
+      template: `
+        <CopilotKitProvider runtime-url="/api/copilotkit">
+          <CopilotChatConfigurationProvider
+            thread-id="thread-1"
+            agent-id="default"
+            :labels="labels"
+          >
+            <CopilotChatView :messages="messages" />
+          </CopilotChatConfigurationProvider>
+        </CopilotKitProvider>
+      `,
+    });
+    render(Host);
+
+    // Let the initial auto-scroll settle, then scroll away from the bottom so
+    // the button appears.
+    const scrollElement = await screen.findByTestId("copilot-chat-view-scroll");
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    let scrollTop = 0;
+    Object.defineProperty(scrollElement, "scrollHeight", {
+      configurable: true,
+      get: () => 1000,
+    });
+    Object.defineProperty(scrollElement, "clientHeight", {
+      configurable: true,
+      get: () => 300,
+    });
+    Object.defineProperty(scrollElement, "scrollTop", {
+      configurable: true,
+      get: () => scrollTop,
+      set: (value: number) => {
+        scrollTop = value;
+      },
+    });
+    scrollTop = 120;
+    scrollElement.dispatchEvent(new Event("scroll"));
+
+    expect(
+      await screen.findByRole("button", { name: "Nach unten scrollen" }),
+    ).toBeDefined();
+  });
+
   it("preserves scroll position when new messages arrive and the user is scrolled up", async () => {
     const messages = ref<Message[]>(createChatMessages(12));
 

package/src/v2/providers/CopilotKitProvider.types.ts

@@ -92,6 +92,18 @@ export interface CopilotKitProviderProps {
     loadingComponent?: Component;
     includeSchema?: boolean;
   };
+  /** Configuration for the built-in MCP Apps renderer. */
+  mcpApps?: {
+    /**
+     * Restore `allow-same-origin` on the MCP App sandbox. Default `false`.
+     *
+     * **Unsafe.** The widget then runs with your page's origin: it can read
+     * your cookies, storage and DOM, and call your APIs as the signed-in user.
+     * Only set it for widgets you wrote and trust that need `localStorage`,
+     * `IndexedDB` or cookies. By default widgets get an opaque origin.
+     */
+    allowSameOriginFallback?: boolean;
+  };
   /**
    * Enable debug logging for the client-side event pipeline.
    *

package/src/v2/providers/CopilotKitProvider.vue

@@ -10,6 +10,7 @@ import {
   triggerRef,
   watch,
 } from "vue";
+import type { Component, FunctionalComponent } from "vue";
 import { z } from "zod";
 import type { AbstractAgent } from "@ag-ui/client";
 import { ToolCallStatus } from "@copilotkit/core";
@@ -91,6 +92,13 @@ const DEFAULT_DESIGN_SKILL = `When generating UI with generateSandboxedUi, follo
 - Minimal transitions (150ms) for hover/focus states only. No decorative animations.
 - Keep the UI focused and dense — avoid excessive padding. Use compact spacing (8–12px gaps, 10–14px padding in controls).`;
 
+/** The MCP Apps renderer with `mcpApps.allowSameOriginFallback` applied. */
+const SameOriginMCPAppsActivityRenderer: FunctionalComponent = (_, { attrs }) =>
+  h(MCPAppsActivityRenderer as Component, {
+    ...attrs,
+    allowSameOriginFallback: true,
+  });
+
 const props = withDefaults(defineProps<CopilotKitProviderProps>(), {
   headers: () => ({}),
   properties: () => ({}),
@@ -103,6 +111,7 @@ const props = withDefaults(defineProps<CopilotKitProviderProps>(), {
   openGenerativeUI: undefined,
   useSingleEndpoint: undefined,
   a2ui: undefined,
+  mcpApps: undefined,
   enableInspector: undefined,
 });
 
@@ -424,6 +433,8 @@ const builtInFrontendTools = computed<VueFrontendTool[]>(() => {
       description: GENERATE_SANDBOXED_UI_DESCRIPTION,
       parameters: GenerateSandboxedUiArgsSchema,
       handler: async () => "UI generated",
+      // This acknowledgement has no side effects and is safe to reconstruct.
+      reconnectBehavior: "resume-pending",
       followUp: true,
       render:
         OpenGenerativeUIToolRenderer as unknown as VueFrontendTool["render"],
@@ -438,8 +449,9 @@ const builtInActivityRenderers = computed<
     {
       activityType: MCPAppsActivityType,
       content: MCPAppsActivityContentSchema as unknown as z.ZodSchema<unknown>,
-      render:
-        MCPAppsActivityRenderer as unknown as VueActivityMessageRenderer<unknown>["render"],
+      render: (props.mcpApps?.allowSameOriginFallback
+        ? SameOriginMCPAppsActivityRenderer
+        : MCPAppsActivityRenderer) as unknown as VueActivityMessageRenderer<unknown>["render"],
     },
   ];
 

package/src/v2/providers/__tests__/CopilotKitProvider.sandboxReplay.test.ts

@@ -0,0 +1,157 @@
+import { cleanup, render, waitFor } from "@testing-library/vue";
+import { defineComponent } from "vue";
+import CopilotKitProvider from "../CopilotKitProvider.vue";
+import { useCopilotKit } from "../useCopilotKit";
+import { HttpAgent } from "@ag-ui/client";
+import type { Message } from "@ag-ui/client";
+import type { CopilotKitCore } from "@copilotkit/core";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+/** Capture the real provider core after its built-in sandbox tool is registered. */
+async function mountProvider() {
+  let core: CopilotKitCore | undefined;
+  const Capture = defineComponent({
+    /** Expose the injected core without retaining Vue's reactive wrapper. */
+    setup() {
+      core = useCopilotKit().copilotkit.value;
+      return () => null;
+    },
+  });
+  render(
+    defineComponent({
+      components: { CopilotKitProvider, Capture },
+      template:
+        '<CopilotKitProvider :open-generative-u-i="{}"><Capture /></CopilotKitProvider>',
+    }),
+  );
+  await waitFor(() =>
+    expect(core?.getTool({ toolName: "generateSandboxedUi" })).toBeDefined(),
+  );
+  if (!core) throw new Error("Missing core");
+  return core;
+}
+
+/** Hydrate imported tool calls with controlled approval and side-effect handlers. */
+async function setupReplay(completed = false) {
+  const core = await mountProvider();
+  const agent = new HttpAgent({
+    url: "https://runtime.invalid",
+    agentId: "default",
+    threadId: "imported-thread",
+  });
+  const saved: Message[] = [
+    {
+      id: "imported-message",
+      role: "assistant",
+      toolCalls: [
+        {
+          id: "sandbox-id",
+          type: "function",
+          function: {
+            name: "generateSandboxedUi",
+            arguments: JSON.stringify({ html: "<button>Calculator</button>" }),
+          },
+        },
+        {
+          id: "approval-id",
+          type: "function",
+          function: { name: "meeting", arguments: "{}" },
+        },
+        {
+          id: "side-effect-id",
+          type: "function",
+          function: { name: "sendEmail", arguments: "{}" },
+        },
+      ],
+    },
+  ];
+  if (completed)
+    saved.push(
+      {
+        id: "saved-sandbox",
+        role: "tool",
+        toolCallId: "sandbox-id",
+        content: "UI generated",
+      },
+      {
+        id: "saved-approval",
+        role: "tool",
+        toolCallId: "approval-id",
+        content: "approved",
+      },
+    );
+  vi.spyOn(agent, "connectAgent").mockImplementation(async () => {
+    agent.setMessages(structuredClone(saved));
+    return { result: undefined, newMessages: structuredClone(saved) };
+  });
+  const submissions: Message[][] = [];
+  const run = vi.spyOn(agent, "runAgent").mockImplementation(async () => {
+    submissions.push(structuredClone(agent.messages));
+    return { result: undefined, newMessages: [] };
+  });
+  let answer!: (value: string) => void;
+  const pending = new Promise<string>((resolve) => {
+    answer = resolve;
+  });
+  const approval = vi.fn(() => pending);
+  const sideEffect = vi.fn(async () => "sent");
+  core.addTool({
+    name: "meeting",
+    type: "human-in-the-loop",
+    handler: approval,
+  });
+  core.addTool({ name: "sendEmail", handler: sideEffect });
+  return { core, agent, saved, run, submissions, answer, approval, sideEffect };
+}
+
+describe("CopilotKitProvider — sandboxed UI replay", () => {
+  afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+  });
+
+  it("restores the original sandbox result before the pending approval continues", async () => {
+    const { core, agent, run, submissions, answer, approval, sideEffect } =
+      await setupReplay();
+    await core.connectAgent({ agent });
+    await waitFor(() => expect(approval).toHaveBeenCalledTimes(1));
+    expect(agent.messages).toContainEqual(
+      expect.objectContaining({
+        role: "tool",
+        toolCallId: "sandbox-id",
+        content: "UI generated",
+      }),
+    );
+    expect(run).not.toHaveBeenCalled();
+    answer("approved");
+    await waitFor(() => expect(run).toHaveBeenCalledTimes(1));
+    expect(
+      submissions[0]?.filter((message) => message.role === "tool"),
+    ).toEqual([
+      expect.objectContaining({
+        toolCallId: "sandbox-id",
+        content: "UI generated",
+      }),
+      expect.objectContaining({
+        toolCallId: "approval-id",
+        content: "approved",
+      }),
+    ]);
+    expect(sideEffect).not.toHaveBeenCalled();
+  });
+
+  it("leaves saved sandbox and approval results completed across repeated reconnects", async () => {
+    const { core, agent, saved, run, approval, sideEffect } =
+      await setupReplay(true);
+    const tool = core.getTool({ toolName: "generateSandboxedUi" });
+    if (!tool?.handler) throw new Error("Missing sandbox handler");
+    const handler = vi.spyOn(tool, "handler");
+    await core.connectAgent({ agent });
+    await core.connectAgent({ agent });
+    expect(agent.messages).toEqual(saved);
+    expect(handler).not.toHaveBeenCalled();
+    expect(approval).not.toHaveBeenCalled();
+    expect(sideEffect).not.toHaveBeenCalled();
+    expect(run).not.toHaveBeenCalled();
+  });
+});

package/src/v2/providers/types.ts

@@ -5,6 +5,8 @@ export const CopilotChatDefaultLabels = {
   chatInputToolbarFinishTranscribeButtonLabel: "Finish",
   chatInputToolbarAddButtonLabel: "Add photos or files",
   chatInputToolbarToolsButtonLabel: "Tools",
+  chatInputToolbarSendButtonLabel: "Send message",
+  chatInputToolbarStopButtonLabel: "Stop",
   assistantMessageToolbarCopyCodeLabel: "Copy",
   assistantMessageToolbarCopyCodeCopiedLabel: "Copied",
   assistantMessageToolbarCopyMessageLabel: "Copy",
@@ -14,10 +16,13 @@ export const CopilotChatDefaultLabels = {
   assistantMessageToolbarRegenerateLabel: "Regenerate",
   userMessageToolbarCopyMessageLabel: "Copy",
   userMessageToolbarEditMessageLabel: "Edit",
+  userMessageToolbarPreviousBranchLabel: "Previous branch",
+  userMessageToolbarNextBranchLabel: "Next branch",
   chatDisclaimerText:
     "AI can make mistakes. Please verify important information.",
   chatToggleOpenLabel: "Open chat",
   chatToggleCloseLabel: "Close chat",
+  chatScrollToBottomLabel: "Scroll to bottom",
   modalHeaderTitle: "CopilotKit Chat",
   welcomeMessageText: "How can I help you today?",
 } as const;