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

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

@@ -37,6 +37,7 @@ const props = withDefaults(
   {
     messages: () => [],
     autoScroll: true,
+    messageFeedback: true,
     isRunning: false,
     suggestions: () => [],
     suggestionLoadingIndexes: () => [],
@@ -96,8 +97,8 @@ const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
 const headerTitle = computed(() => labels.value.modalHeaderTitle);
 const popupAnimationClass = computed(() =>
   isPopupOpen.value && !isAnimatingOut.value
-    ? "cpk:pointer-events-auto cpk:translate-y-0 cpk:opacity-100 cpk:md:scale-100"
-    : "cpk:pointer-events-none cpk:translate-y-4 cpk:opacity-0 cpk:md:translate-y-5 cpk:md:scale-[0.95]",
+    ? "cpk-popup-view-window-open"
+    : undefined,
 );
 const popupStyle = computed(
   () =>
@@ -109,10 +110,6 @@ const popupStyle = computed(
       ),
       "--copilot-popup-max-width": "calc(100vw - 3rem)",
       "--copilot-popup-max-height": "calc(100dvh - 7.5rem)",
-      width: "var(--copilot-popup-width)",
-      height: "var(--copilot-popup-height)",
-      maxWidth: "var(--copilot-popup-max-width)",
-      maxHeight: "var(--copilot-popup-max-height)",
       paddingTop: "env(safe-area-inset-top)",
       paddingBottom: "env(safe-area-inset-bottom)",
       paddingLeft: "env(safe-area-inset-left)",
@@ -349,11 +346,7 @@ onBeforeUnmount(() => {
     <CopilotChatToggleButton />
   </slot>
 
-  <div
-    v-if="isRendered"
-    data-copilotkit
-    class="cpk:fixed cpk:inset-0 cpk:z-[1200] cpk:flex cpk:max-w-full cpk:flex-col cpk:items-stretch cpk:bg-transparent cpk:md:inset-auto cpk:md:bottom-24 cpk:md:right-6 cpk:md:items-end cpk:md:gap-4"
-  >
+  <div v-if="isRendered" data-copilotkit class="cpk-popup-view">
     <div
       ref="containerRef"
       tabindex="-1"
@@ -361,13 +354,7 @@ onBeforeUnmount(() => {
       :aria-label="labels.modalHeaderTitle"
       data-copilot-popup
       :class="[
-        'cpk:relative cpk:flex cpk:h-full cpk:w-full cpk:flex-col cpk:overflow-hidden cpk:bg-background cpk:text-foreground',
-        'cpk:origin-bottom cpk:focus:outline-none cpk:transform-gpu cpk:transition-transform cpk:transition-opacity cpk:duration-200 cpk:ease-out',
-        'cpk:md:transition-transform cpk:md:transition-opacity',
-        'cpk:rounded-none cpk:border cpk:border-border/0 cpk:shadow-none cpk:ring-0',
-        'cpk:md:h-[var(--copilot-popup-height)] cpk:md:w-[var(--copilot-popup-width)]',
-        'cpk:md:max-h-[var(--copilot-popup-max-height)] cpk:md:max-w-[var(--copilot-popup-max-width)]',
-        'cpk:md:origin-bottom-right cpk:md:rounded-2xl cpk:md:border-border cpk:md:shadow-xl cpk:md:ring-1 cpk:md:ring-border/40',
+        'copilotKitPopup copilotKitWindow cpk-popup-view-window',
         popupAnimationClass,
       ]"
       :style="popupStyle"
@@ -381,8 +368,9 @@ onBeforeUnmount(() => {
         <CopilotModalHeader :title="headerTitle" />
       </slot>
 
-      <div class="cpk:flex-1 cpk:overflow-hidden" data-popup-chat>
+      <div class="cpk-popup-view-chat" data-popup-chat>
         <CopilotChatView
+          class="cpk-popup-view-chat-view"
           :messages="messages"
           :auto-scroll="autoScroll"
           :is-running="isRunning"
@@ -392,6 +380,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="chatViewBindings"
         >

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

@@ -127,25 +127,22 @@ const inputEventProps = computed(() => {
   <slot name="layout" v-bind="layoutSlotProps">
     <div
       data-copilotkit
-      class="cpk:h-full cpk:flex cpk:flex-col"
+      class="cpk-popup-view-welcome-screen"
       data-testid="copilot-popup-welcome-screen"
     >
-      <div
-        class="cpk:flex-1 cpk:flex cpk:flex-col cpk:items-center cpk:justify-center cpk:px-4"
-      >
+      <div class="cpk-popup-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>
-        <div class="cpk:mb-4 cpk:flex cpk:justify-center cpk:px-4">
+        <div class="cpk-popup-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/CopilotSidebar.vue

@@ -36,12 +36,14 @@ function sidebarViewEventBindings(slotProps: CopilotChatViewOverrideSlotProps) {
 
 const props = withDefaults(defineProps<CopilotSidebarProps>(), {
   autoScroll: true,
+  messageFeedback: true,
   welcomeScreen: true,
   inputValue: undefined,
   inputMode: "input",
   inputToolsMenu: () => [],
   width: undefined,
   defaultOpen: true,
+  position: "right",
   onFinishTranscribeWithAudio: undefined,
 });
 
@@ -114,7 +116,10 @@ watch(
         :input-mode="slotProps.inputMode"
         :input-tools-menu="slotProps.inputToolsMenu"
         :width="width"
+        :tool-call-display="slotProps.toolCallDisplay"
+        :message-feedback="slotProps.messageFeedback"
         :default-open="defaultOpen"
+        :position="position"
         :on-finish-transcribe-with-audio="slotProps.onFinishTranscribeWithAudio"
         v-bind="sidebarViewEventBindings(slotProps)"
       >

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

@@ -18,6 +18,7 @@ defineOptions({ inheritAttrs: false });
 const props = withDefaults(defineProps<CopilotSidebarViewProps>(), {
   messages: () => [],
   autoScroll: true,
+  messageFeedback: true,
   isRunning: false,
   suggestions: () => [],
   suggestionLoadingIndexes: () => [],
@@ -27,6 +28,7 @@ const props = withDefaults(defineProps<CopilotSidebarViewProps>(), {
   inputToolsMenu: () => [],
   width: undefined,
   defaultOpen: true,
+  position: "right",
   onFinishTranscribeWithAudio: undefined,
 });
 

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__/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");
+  });
+});