@copilotkit/vue 2.0.0-rc.1 → 2.0.0-rc.11

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

@@ -36,6 +36,7 @@ const props = withDefaults(
   {
     messages: () => [],
     autoScroll: true,
+    messageFeedback: true,
     isRunning: false,
     suggestions: () => [],
     suggestionLoadingIndexes: () => [],
@@ -44,6 +45,7 @@ const props = withDefaults(
     inputMode: "input",
     inputToolsMenu: () => [],
     width: undefined,
+    position: "right",
     onFinishTranscribeWithAudio: undefined,
   },
 );
@@ -98,12 +100,9 @@ const headerTitle = computed(
     CopilotChatDefaultLabels.modalHeaderTitle,
 );
 const asideClass = computed(() => [
-  "cpk:fixed cpk:right-0 cpk:top-0 cpk:z-[1200] cpk:flex cpk:h-[100vh] cpk:h-[100dvh] cpk:max-h-screen cpk:w-full",
-  "cpk:border-l cpk:border-border cpk:bg-background cpk:text-foreground cpk:shadow-xl",
-  "cpk:transition-transform cpk:duration-300 cpk:ease-out",
-  isSidebarOpen.value
-    ? "cpk:translate-x-0"
-    : "cpk:translate-x-full cpk:pointer-events-none",
+  "copilotKitSidebar copilotKitWindow cpk-sidebar-view",
+  // Slides off its edge when closed.
+  !isSidebarOpen.value && "cpk-sidebar-view-closed",
   attrs.class,
 ]);
 const asideAttrs = computed(() => {
@@ -118,16 +117,19 @@ const asideStyle = computed(
       paddingBottom: "env(safe-area-inset-bottom)",
     }) as Record<string, string>,
 );
-const bodyMarginStyle = computed(
-  () => `
+// The page makes room on the docked edge (desktop only).
+const bodyMarginStyle = computed(() => {
+  const margin =
+    props.position === "left" ? "margin-inline-start" : "margin-inline-end";
+  return `
 @media (min-width: 768px) {
   body {
-    margin-inline-end: ${widthToMargin(resolvedSidebarWidth.value)};
-    transition: margin-inline-end ${SIDEBAR_TRANSITION_MS}ms ease;
+    ${margin}: ${widthToMargin(resolvedSidebarWidth.value)};
+    transition: ${margin} ${SIDEBAR_TRANSITION_MS}ms ease;
   }
 }
-`,
-);
+`;
+});
 
 function widthToCss(width: number | string): string {
   return typeof width === "number" ? `${width}px` : width;
@@ -268,13 +270,18 @@ onBeforeUnmount(() => {
     :open="openSidebar"
     :close="closeSidebar"
   >
-    <CopilotChatToggleButton />
+    <CopilotChatToggleButton
+      :class="
+        position === 'left' ? 'cpk-sidebar-view-toggle-button-left' : undefined
+      "
+    />
   </slot>
 
   <aside
     ref="sidebarRef"
     data-copilotkit
     data-copilot-sidebar
+    :data-position="position"
     :class="asideClass"
     :style="asideStyle"
     :aria-label="
@@ -284,9 +291,7 @@ onBeforeUnmount(() => {
     role="complementary"
     v-bind="asideAttrs"
   >
-    <div
-      class="cpk:flex cpk:h-full cpk:w-full cpk:flex-col cpk:overflow-hidden"
-    >
+    <div class="cpk-sidebar-view-panel">
       <slot
         name="header"
         :title="headerTitle"
@@ -296,7 +301,7 @@ onBeforeUnmount(() => {
         <CopilotModalHeader :title="headerTitle" />
       </slot>
 
-      <div class="cpk:flex-1 cpk:overflow-hidden" data-sidebar-chat>
+      <div class="cpk-sidebar-view-chat" data-sidebar-chat>
         <CopilotChatView
           :messages="messages"
           :auto-scroll="autoScroll"
@@ -307,6 +312,8 @@ onBeforeUnmount(() => {
           :input-value="inputValue"
           :input-mode="inputMode"
           :input-tools-menu="inputToolsMenu"
+          :tool-call-display="toolCallDisplay"
+          :message-feedback="messageFeedback"
           :on-finish-transcribe-with-audio="onFinishTranscribeWithAudio"
           v-bind="chatViewEventProps"
         >

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

@@ -127,26 +127,23 @@ const inputEventProps = computed(() => {
   <slot name="layout" v-bind="layoutSlotProps">
     <div
       data-copilotkit
-      class="cpk:h-full cpk:flex cpk:flex-col"
+      class="cpk-sidebar-view-welcome-screen"
       data-testid="copilot-sidebar-welcome-screen"
     >
-      <div
-        class="cpk:flex-1 cpk:flex cpk:flex-col cpk:items-center cpk:justify-center cpk:px-4"
-      >
+      <div class="cpk-sidebar-view-welcome-screen-message">
         <slot name="welcome-message">
-          <h1
-            class="cpk:text-xl cpk:sm:text-2xl cpk:font-medium cpk:text-foreground cpk:text-center"
-          >
+          <h1 class="cpk-chat-view-welcome-message">
             {{ labels.welcomeMessageText }}
           </h1>
         </slot>
       </div>
 
-      <div class="cpk:px-8 cpk:pb-4">
-        <div class="cpk:max-w-3xl cpk:mx-auto">
-          <div class="cpk:mb-4 cpk:flex cpk:justify-center">
+      <div class="cpk-sidebar-view-welcome-screen-footer">
+        <div class="cpk-sidebar-view-welcome-screen-content">
+          <div class="cpk-sidebar-view-welcome-screen-suggestions">
             <slot name="suggestion-view" v-bind="suggestionViewSlotProps">
               <CopilotChatSuggestionView
+                class="cpk-chat-view-suggestion-view"
                 :suggestions="suggestions"
                 :loading-indexes="loadingIndexes"
                 @select-suggestion="onSelectSuggestion"

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

@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { computed, h, watchEffect } from "vue";
-import {
-  StreamingMarkdownRenderer,
-  type VueStreamingMarkdownNodeRenderer,
-} from "@copilotkit/markdown-renderer/vue";
+import { StreamingMarkdownRenderer } from "@copilotkit/markdown-renderer/vue";
+import type { VueStreamingMarkdownNodeRenderer } from "@copilotkit/markdown-renderer/vue";
 import { warnUnsupportedRichSyntaxOnce } from "@copilotkit/markdown-renderer";
 import type { StreamingMarkdownParserOptions } from "@copilotkit/markdown-renderer";
 import type { DefaultMarkdownRendererProps } from "../../providers/markdown-renderer";
@@ -29,7 +27,7 @@ const defaultCodeBlockRenderer: VueStreamingMarkdownNodeRenderer = (
     {
       "data-streaming-markdown-node": "code-block",
       "data-node-open": String(!node.closed),
-      class: "cpk:overflow-x-auto cpk:rounded-lg cpk:p-3",
+      class: "cpk-markdown-code-block",
     },
     [h("code", { "data-code-info": node.info ?? undefined }, node.text)],
   );

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

@@ -1,7 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { defineComponent, nextTick, onMounted } from "vue";
 import { fireEvent, render, screen } from "@testing-library/vue";
-import type { Message, ReasoningMessage } from "@ag-ui/core";
+import type { ReasoningMessage } from "@ag-ui/core";
 import type { Attachment } from "@copilotkit/shared";
 import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
 import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
@@ -16,6 +16,8 @@ import { CopilotModalHeader, CopilotSidebarView } from "../index";
 // hard-coded English.
 const germanLabels: Partial<Record<keyof CopilotChatLabels, string>> = {
   reasoningMessageThinkingLabel: "Denkt nach…",
+  reasoningMessageThoughtForLabel: "Gedacht für {duration}",
+  reasoningMessageDurationFewSeconds: "ein paar Sekunden",
   chatInputSlashMenuLabel: "Befehle",
   chatInputSlashMenuEmptyText: "Keine Befehle gefunden",
   attachmentRemoveButtonLabel: "Anhang entfernen",
@@ -26,11 +28,11 @@ const germanLabels: Partial<Record<keyof CopilotChatLabels, string>> = {
   sidebarLabel: "Chat-Seitenleiste",
 };
 
-const reasoning = {
+const reasoning: ReasoningMessage = {
   id: "reasoning-1",
   role: "reasoning",
   content: "",
-} as ReasoningMessage;
+};
 
 const video: Attachment = {
   id: "clip",
@@ -66,7 +68,7 @@ function renderWithLabels(template: string) {
       return {
         labels: germanLabels,
         reasoning,
-        reasoningMessages: [reasoning] as Message[],
+        reasoningMessages: [reasoning],
         attachments: [video],
         toolsMenu: [{ label: "Say hi", action: vi.fn() }],
       };
@@ -112,6 +114,19 @@ describe("chat strings from labels", () => {
     expect(screen.queryByText("Thinking…")).toBeNull();
   });
 
+  it("uses the configured duration labels once the model is done", () => {
+    renderWithLabels(`
+      <CopilotChatReasoningMessage
+        :message="reasoning"
+        :messages="reasoningMessages"
+        :is-running="false"
+      />
+    `);
+
+    expect(screen.getByText("Gedacht für ein paar Sekunden")).toBeDefined();
+    expect(screen.queryByText(/Thought for/)).toBeNull();
+  });
+
   it("passes the elapsed reasoning time to a custom header", async () => {
     vi.useFakeTimers();
     renderWithLabels(`

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

@@ -7,6 +7,7 @@ import {
 } from "@testing-library/vue";
 import { defineComponent, ref, toRaw } from "vue";
 import { afterEach, describe, expect, it, vi } from "vitest";
+import type * as CoreModule from "@copilotkit/core";
 import type { AbstractAgent } from "@ag-ui/client";
 import { EventType } from "@ag-ui/client";
 import type { A2UITheme as Theme } from "../../../types";
@@ -160,11 +161,25 @@ vi.mock("phoenix", () => ({
   Socket: MockPhoenixSocket,
 }));
 
-vi.mock("@jetbrains/websandbox", () => ({
-  default: {
-    create: (...args: unknown[]) => mockWebsandboxCreate(...args),
-  },
-}));
+// Run the real core controller against a fake websandbox
+vi.mock("@copilotkit/core", async (importOriginal) => {
+  const actual = await importOriginal<typeof CoreModule>();
+  class TestOpenGenerativeUIController
+    extends actual.ɵOpenGenerativeUIController
+  {
+    constructor() {
+      super({
+        loadWebsandbox: async () => ({
+          create: (...args) => mockWebsandboxCreate(...args),
+        }),
+      });
+    }
+  }
+  return {
+    ...actual,
+    ɵOpenGenerativeUIController: TestOpenGenerativeUIController,
+  };
+});
 
 function jsonResponse(body: unknown, status = 200): Response {
   return {
@@ -667,13 +682,15 @@ describe("CopilotChat activity message rendering", () => {
 
     renderOpenGenerativeUIChat();
 
+    // The restored chat can remount the activity while it reconnects, so wait
+    // until exactly one sandbox, the restored one, is alive.
     await waitFor(() => {
-      expect(mockWebsandboxCreate).toHaveBeenCalledTimes(2);
+      const created = mockWebsandboxCreate.mock.calls.length;
+      expect(created).toBeGreaterThanOrEqual(2);
+      expect(mockWebsandboxDestroy).toHaveBeenCalledTimes(created - 1);
     });
-    expect(mockWebsandboxCreate.mock.calls[1]?.[1]).toMatchObject({
+    expect(mockWebsandboxCreate.mock.calls.at(-1)?.[1]).toMatchObject({
       frameContent: restoredHtml,
     });
-
-    expect(mockWebsandboxDestroy).toHaveBeenCalledTimes(1);
   });
 });

package/src/v2/components/chat/__tests__/CopilotChatAssistantMessage.inspector.test.ts

@@ -0,0 +1,269 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { computed, defineComponent, h, nextTick, provide } from "vue";
+import type { Component } from "vue";
+import { fireEvent, render, screen, waitFor } from "@testing-library/vue";
+import type { AssistantMessage } from "@ag-ui/core";
+import CopilotChatAssistantMessage from "../CopilotChatAssistantMessage.vue";
+import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
+import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
+import { InspectorKey } from "../../../providers/keys";
+import { ɵresetInspectorShortcuts } from "../inspector-shortcuts";
+
+const THREAD_ID = "thread-inspector";
+const message: AssistantMessage = {
+  id: "message-1",
+  role: "assistant",
+  content: "Inspect me",
+};
+
+function renderMessage({
+  enabled = true,
+  openInspector = vi.fn(),
+  slots = {},
+  before,
+}: {
+  enabled?: boolean;
+  openInspector?: ReturnType<typeof vi.fn>;
+  slots?: Record<string, unknown>;
+  before?: () => unknown;
+} = {}) {
+  const InspectorContext = defineComponent({
+    setup(_, { slots: children }) {
+      provide(InspectorKey, {
+        isInspectorEnabled: computed(() => enabled),
+        openInspector,
+      });
+      return () => children.default?.();
+    },
+  });
+  const Harness = defineComponent({
+    setup() {
+      return () =>
+        h(CopilotKitProvider, null, {
+          default: () =>
+            h(InspectorContext, null, {
+              default: () =>
+                h(
+                  CopilotChatConfigurationProvider,
+                  { threadId: THREAD_ID },
+                  {
+                    default: () => [
+                      before?.(),
+                      h(
+                        CopilotChatAssistantMessage as Component,
+                        { message },
+                        slots,
+                      ),
+                    ],
+                  },
+                ),
+            }),
+        });
+    },
+  });
+  render(Harness);
+  return { openInspector };
+}
+
+const expectedRequest = {
+  messageId: message.id,
+  threadId: THREAD_ID,
+  agentId: "default",
+};
+
+describe("CopilotChatAssistantMessage Inspector button", () => {
+  afterEach(() => {
+    ɵresetInspectorShortcuts();
+    document.body.innerHTML = "";
+  });
+
+  it("renders no Inspector button while the Inspector is off", () => {
+    renderMessage({ enabled: false });
+
+    expect(
+      screen.queryByRole("button", { name: /copilotkit inspector/i }),
+    ).toBeNull();
+  });
+
+  it("renders the local Inspector button and opens it from the toolbar", async () => {
+    const { openInspector } = renderMessage();
+
+    const inspectorButton = screen.getByRole("button", {
+      name: "CopilotKit Inspector (local only)",
+    });
+    const inspectorIcon = screen.getByTestId("copilot-inspector-icon");
+    expect(inspectorIcon.classList.contains("lucide-wrench")).toBe(true);
+    expect(inspectorButton.textContent).toBe("");
+    expect(inspectorButton.getAttribute("aria-haspopup")).toBe("menu");
+    expect(inspectorButton.getAttribute("aria-expanded")).toBe("false");
+    expect(screen.queryByRole("menu")).toBeNull();
+
+    await fireEvent.pointerEnter(inspectorButton, { pointerType: "mouse" });
+    const item = await screen.findByRole("menuitem", {
+      name: "View in Inspector Open this message in the Inspector",
+    });
+    expect(inspectorButton.getAttribute("aria-expanded")).toBe("true");
+    expect(screen.getByRole("menu").classList).toContain(
+      "cpk-inspector-button-menu",
+    );
+
+    await fireEvent.click(item);
+
+    expect(openInspector).toHaveBeenCalledWith(expectedRequest);
+    await waitFor(() => expect(screen.queryByRole("menu")).toBeNull());
+  });
+
+  it.each(["click", "hover then click", "Enter", " "])(
+    "opens Inspector directly on %s",
+    async (interaction) => {
+      const { openInspector } = renderMessage();
+      const trigger = screen.getByTestId("copilot-inspector-button");
+      if (interaction === "hover then click") {
+        await fireEvent.pointerEnter(trigger, { pointerType: "mouse" });
+        expect(screen.getByRole("menu")).toBeDefined();
+      }
+      if (interaction.includes("click")) {
+        await fireEvent.pointerDown(trigger, { button: 0 });
+        if (interaction === "click") {
+          expect(screen.queryByRole("menu")).toBeNull();
+        }
+        await fireEvent.click(trigger);
+      } else {
+        await fireEvent.keyDown(trigger, { key: interaction });
+      }
+      expect(openInspector).toHaveBeenCalledExactlyOnceWith(expectedRequest);
+      await waitFor(() => expect(screen.queryByRole("menu")).toBeNull());
+    },
+  );
+
+  it.each(["hover", "keyboard"])(
+    "preserves the appropriate focus when opening by %s",
+    async (interaction) => {
+      renderMessage({
+        before: () => h("textarea", { "aria-label": "Chat input" }),
+      });
+      const input = screen.getByRole("textbox", { name: "Chat input" });
+      input.focus();
+      const trigger = screen.getByTestId("copilot-inspector-button");
+      if (interaction === "hover") {
+        await fireEvent.pointerEnter(trigger, { pointerType: "mouse" });
+      } else {
+        trigger.focus();
+        await fireEvent.keyDown(trigger, { key: "ArrowDown" });
+      }
+      const menu = await screen.findByRole("menu");
+      if (interaction === "hover") {
+        expect(document.activeElement).toBe(input);
+      } else {
+        await waitFor(() =>
+          expect(menu.contains(document.activeElement)).toBe(true),
+        );
+      }
+    },
+  );
+
+  it("Escape closes a keyboard-opened menu and returns focus to the button", async () => {
+    renderMessage();
+    const trigger = screen.getByTestId("copilot-inspector-button");
+    trigger.focus();
+    await fireEvent.keyDown(trigger, { key: "ArrowDown" });
+    const menu = await screen.findByRole("menu");
+    await waitFor(() =>
+      expect(menu.contains(document.activeElement)).toBe(true),
+    );
+
+    await fireEvent.keyDown(document.activeElement!, { key: "Escape" });
+
+    await waitFor(() => expect(screen.queryByRole("menu")).toBeNull());
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it("dismisses the hover menu when the pointer leaves", async () => {
+    renderMessage();
+    const trigger = screen.getByTestId("copilot-inspector-button");
+    await fireEvent.pointerEnter(trigger, { pointerType: "mouse" });
+    const menu = await screen.findByRole("menu");
+    await fireEvent.pointerLeave(trigger, { pointerType: "mouse" });
+    await fireEvent.pointerEnter(menu, { pointerType: "mouse" });
+    await new Promise((resolve) => setTimeout(resolve, 220));
+    expect(screen.getByRole("menu")).toBeDefined();
+    await fireEvent.pointerLeave(menu, { pointerType: "mouse" });
+    await waitFor(() => expect(screen.queryByRole("menu")).toBeNull());
+  });
+
+  it("hides the shortcut until the page reloads", async () => {
+    renderMessage();
+    await fireEvent.pointerEnter(
+      screen.getByTestId("copilot-inspector-button"),
+      { pointerType: "mouse" },
+    );
+
+    await fireEvent.click(
+      await screen.findByRole("menuitem", {
+        name: "Hide this icon Until you reload this page",
+      }),
+    );
+    await nextTick();
+
+    expect(screen.queryByTestId("copilot-inspector-button")).toBeNull();
+  });
+
+  it("replaces the default Inspector button with the inspector-button slot", async () => {
+    const { openInspector } = renderMessage({
+      slots: {
+        "inspector-button": ({ onInspect }: { onInspect: () => void }) =>
+          h("button", { type: "button", onClick: onInspect }, "Custom inspect"),
+      },
+    });
+
+    expect(screen.queryByTestId("copilot-inspector-button")).toBeNull();
+    await fireEvent.click(
+      screen.getByRole("button", { name: "Custom inspect" }),
+    );
+    expect(openInspector).toHaveBeenCalledExactlyOnceWith(expectedRequest);
+  });
+
+  it("does not render the inspector-button slot while the Inspector is off", () => {
+    renderMessage({
+      enabled: false,
+      slots: {
+        "inspector-button": () => h("button", "Custom inspect"),
+      },
+    });
+
+    expect(screen.queryByRole("button", { name: "Custom inspect" })).toBeNull();
+  });
+});
+
+describe("CopilotChatAssistantMessage toolbar tooltips", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("shows each toolbar label as a tooltip instead of a title", async () => {
+    render(
+      defineComponent({
+        setup: () => () =>
+          h(CopilotKitProvider, null, {
+            default: () =>
+              h(CopilotChatAssistantMessage as Component, {
+                message,
+                onRegenerate: () => {},
+              }),
+          }),
+      }),
+    );
+    const copy = screen.getByTestId("copilot-copy-button");
+    expect(copy.hasAttribute("title")).toBe(false);
+
+    await fireEvent.focus(copy);
+    const tooltip = screen.getByRole("tooltip");
+    expect(tooltip.textContent).toBe("Copy");
+    expect(tooltip.getAttribute("data-side")).toBe("bottom");
+    expect(copy.getAttribute("aria-describedby")).toBe(tooltip.id);
+    await fireEvent.blur(copy);
+
+    await fireEvent.focus(screen.getByRole("button", { name: "Regenerate" }));
+    expect(screen.getByRole("tooltip").textContent).toBe("Regenerate");
+  });
+});