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

package/src/v2/components/chat/__tests__/CopilotChatAssistantMessage.slots.e2e.test.ts

@@ -649,7 +649,7 @@ describe("CopilotChatAssistantMessage Slot System E2E Tests", () => {
   });
 
   describe("5. className Override with Tailwind Strings", () => {
-    it("should override root className while preserving default prose classes", () => {
+    it("should override root className while preserving default markdown classes", () => {
       const Host = defineComponent({
         components: { CopilotChatAssistantMessage },
         setup() {
@@ -664,10 +664,8 @@ describe("CopilotChatAssistantMessage Slot System E2E Tests", () => {
       const { container } = renderInWrapper(Host);
       const root = container.querySelector(".custom-root-class");
       expect(root).toBeDefined();
-      const proseDiv =
-        root?.classList.contains("cpk:prose") ||
-        !!root?.querySelector(".cpk\\:prose");
-      expect(proseDiv).toBe(true);
+      expect(root?.classList.contains("copilotKitAssistantMessage")).toBe(true);
+      expect(root?.querySelector(".cpk-markdown")).not.toBeNull();
     });
 
     it("should allow tailwind utilities to override default styles", () => {

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

@@ -907,7 +907,7 @@ describe("CopilotChatAssistantMessage", () => {
             <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
               <CopilotChatAssistantMessage :message="basicMessage" :toolbar-visible="false">
                 <template #layout="{ toolbar, toolbarVisible, message }">
-                  <span class="cpk:hidden">{{ childrenSpy(toolbar, toolbarVisible, message) }}</span>
+                  <span hidden>{{ childrenSpy(toolbar, toolbarVisible, message) }}</span>
                   <div data-testid="children-render" />
                 </template>
               </CopilotChatAssistantMessage>
@@ -941,7 +941,7 @@ describe("CopilotChatAssistantMessage", () => {
             <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
               <CopilotChatAssistantMessage :message="basicMessage">
                 <template #layout="{ toolbar, toolbarVisible, message }">
-                  <span class="cpk:hidden">{{ childrenSpy(toolbar, toolbarVisible, message) }}</span>
+                  <span hidden>{{ childrenSpy(toolbar, toolbarVisible, message) }}</span>
                   <div />
                 </template>
               </CopilotChatAssistantMessage>

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

@@ -0,0 +1,328 @@
+import { defineComponent, h, nextTick } from "vue";
+import { fireEvent, render, screen, waitFor } from "@testing-library/vue";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
+import CopilotChatInput from "../CopilotChatInput.vue";
+import type { ToolsMenuItem } from "../types";
+
+const getAddButton = () =>
+  screen.getByTestId("copilot-chat-input-add") as HTMLButtonElement;
+
+const pointer = (type: string, init: Record<string, unknown> = {}) =>
+  Object.assign(new Event(type, { bubbles: true, cancelable: true }), {
+    pointerType: "mouse",
+    button: 0,
+    ctrlKey: false,
+    ...init,
+  });
+
+function renderInput(
+  props: Record<string, unknown> = {},
+  labels?: Record<string, string>,
+) {
+  return render(
+    defineComponent({
+      setup() {
+        return () =>
+          h(
+            CopilotChatConfigurationProvider,
+            { threadId: "test-thread", labels },
+            {
+              default: () =>
+                h(CopilotChatInput, {
+                  autoFocus: false,
+                  onSubmitMessage: () => {},
+                  ...props,
+                }),
+            },
+          );
+      },
+    }),
+  );
+}
+
+const toolsMenu = (
+  spies: Record<string, () => void>,
+): (ToolsMenuItem | "-")[] => [
+  { label: "Insert date", action: spies.date! },
+  "-",
+  {
+    label: "Templates",
+    items: [
+      { label: "Bug report", action: spies.bug! },
+      { label: "Feature request", action: spies.feature! },
+    ],
+  },
+  { label: "Clear", action: spies.clear! },
+];
+
+function spies() {
+  return {
+    date: vi.fn(),
+    bug: vi.fn(),
+    feature: vi.fn(),
+    clear: vi.fn(),
+  };
+}
+
+describe("CopilotChatInput add menu", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+    document.body.innerHTML = "";
+  });
+
+  it("marks the trigger as a menu button and points it at the open menu", async () => {
+    renderInput({ toolsMenu: toolsMenu(spies()) });
+    const button = getAddButton();
+    expect(button.getAttribute("aria-haspopup")).toBe("menu");
+    expect(button.getAttribute("aria-expanded")).toBe("false");
+    expect(button.getAttribute("data-state")).toBe("closed");
+
+    await fireEvent.click(button);
+    const content = screen.getByRole("menu");
+    expect(button.getAttribute("aria-expanded")).toBe("true");
+    expect(button.getAttribute("data-state")).toBe("open");
+    expect(button.getAttribute("aria-controls")).toBe(content.id);
+    expect(content.getAttribute("aria-labelledby")).toBe(button.id);
+    expect(content.classList.contains("cpk-dropdown-menu-content")).toBe(true);
+    expect(content.getAttribute("data-slot")).toBe("dropdown-menu-content");
+    expect(content.hasAttribute("data-copilotkit")).toBe(true);
+    // Teleported out of the input, as Radix portals it.
+    expect(
+      screen.getByTestId("copilot-chat-input-container").contains(content),
+    ).toBe(false);
+  });
+
+  it("renders a submenu trigger instead of a flattened labelled group", async () => {
+    renderInput({ toolsMenu: toolsMenu(spies()) });
+    await fireEvent.click(getAddButton());
+
+    const subTrigger = screen.getByRole("menuitem", { name: "Templates" });
+    expect(subTrigger.getAttribute("aria-haspopup")).toBe("menu");
+    expect(subTrigger.getAttribute("aria-expanded")).toBe("false");
+    expect(subTrigger.classList.contains("cpk-dropdown-menu-sub-trigger")).toBe(
+      true,
+    );
+    expect(
+      subTrigger.querySelector(".cpk-dropdown-menu-sub-trigger-icon"),
+    ).not.toBeNull();
+    // The submenu's items are not in the menu until it opens.
+    expect(screen.queryByRole("menuitem", { name: "Bug report" })).toBeNull();
+    expect(document.querySelector(".cpk-dropdown-menu-label")).toBeNull();
+    expect(screen.getAllByRole("separator")).toHaveLength(1);
+  });
+
+  it("opens from the keyboard on its first item, and ArrowUp opens on the last", async () => {
+    renderInput({ toolsMenu: toolsMenu(spies()) });
+    const button = getAddButton();
+
+    await fireEvent.keyDown(button, { key: "ArrowDown" });
+    await waitFor(() =>
+      expect(document.activeElement?.textContent?.trim()).toBe("Insert date"),
+    );
+
+    await fireEvent.keyDown(document.activeElement!, { key: "Escape" });
+    await waitFor(() => expect(document.activeElement).toBe(button));
+    expect(button.getAttribute("aria-expanded")).toBe("false");
+
+    await fireEvent.keyDown(button, { key: "ArrowUp" });
+    await waitFor(() =>
+      expect(document.activeElement?.textContent?.trim()).toBe("Clear"),
+    );
+  });
+
+  it("moves focus with the arrow keys, Home, End, and type-ahead", async () => {
+    renderInput({ toolsMenu: toolsMenu(spies()) });
+    await fireEvent.keyDown(getAddButton(), { key: "Enter" });
+    await waitFor(() =>
+      expect(document.activeElement?.textContent?.trim()).toBe("Insert date"),
+    );
+    const focused = () => document.activeElement?.textContent?.trim();
+
+    await fireEvent.keyDown(document.activeElement!, { key: "ArrowDown" });
+    expect(focused()).toBe("Templates");
+    await fireEvent.keyDown(document.activeElement!, { key: "ArrowDown" });
+    expect(focused()).toBe("Clear");
+    // Radix menus do not wrap by default.
+    await fireEvent.keyDown(document.activeElement!, { key: "ArrowDown" });
+    expect(focused()).toBe("Clear");
+    await fireEvent.keyDown(document.activeElement!, { key: "Home" });
+    expect(focused()).toBe("Insert date");
+    await fireEvent.keyDown(document.activeElement!, { key: "End" });
+    expect(focused()).toBe("Clear");
+    await fireEvent.keyDown(document.activeElement!, { key: "ArrowUp" });
+    expect(focused()).toBe("Templates");
+    await fireEvent.keyDown(document.activeElement!, { key: "i" });
+    expect(focused()).toBe("Insert date");
+  });
+
+  it("runs an item on Enter, closes, and returns focus to the trigger", async () => {
+    const actions = spies();
+    renderInput({ toolsMenu: toolsMenu(actions) });
+    const button = getAddButton();
+    await fireEvent.keyDown(button, { key: "Enter" });
+    await waitFor(() =>
+      expect(document.activeElement?.textContent?.trim()).toBe("Insert date"),
+    );
+
+    await fireEvent.keyDown(document.activeElement!, { key: "Enter" });
+    expect(actions.date).toHaveBeenCalledTimes(1);
+    expect(button.getAttribute("aria-expanded")).toBe("false");
+    expect(document.activeElement).toBe(button);
+  });
+
+  it("opens a submenu with ArrowRight on its first item, and ArrowLeft closes it", async () => {
+    const actions = spies();
+    renderInput({ toolsMenu: toolsMenu(actions) });
+    await fireEvent.keyDown(getAddButton(), { key: "Enter" });
+    await waitFor(() =>
+      expect(document.activeElement?.textContent?.trim()).toBe("Insert date"),
+    );
+    await fireEvent.keyDown(document.activeElement!, { key: "ArrowDown" });
+    const subTrigger = screen.getByRole("menuitem", { name: "Templates" });
+    expect(document.activeElement).toBe(subTrigger);
+
+    await fireEvent.keyDown(subTrigger, { key: "ArrowRight" });
+    const bug = await screen.findByRole("menuitem", { name: "Bug report" });
+    await waitFor(() => expect(document.activeElement).toBe(bug));
+    expect(subTrigger.getAttribute("aria-expanded")).toBe("true");
+    const subContent = bug.closest('[role="menu"]') as HTMLElement;
+    expect(subContent.classList.contains("cpk-dropdown-menu-sub-content")).toBe(
+      true,
+    );
+    expect(subTrigger.getAttribute("aria-controls")).toBe(subContent.id);
+
+    await fireEvent.keyDown(bug, { key: "ArrowLeft" });
+    await waitFor(() => expect(document.activeElement).toBe(subTrigger));
+    expect(subTrigger.getAttribute("aria-expanded")).toBe("false");
+
+    // Enter on the submenu trigger opens it too; Enter on an item runs it.
+    await fireEvent.keyDown(subTrigger, { key: "Enter" });
+    const feature = await screen.findByRole("menuitem", {
+      name: "Feature request",
+    });
+    await waitFor(() =>
+      expect(document.activeElement?.textContent?.trim()).toBe("Bug report"),
+    );
+    await fireEvent.keyDown(document.activeElement!, { key: "ArrowDown" });
+    expect(document.activeElement).toBe(feature);
+    await fireEvent.keyDown(feature, { key: "Enter" });
+    expect(actions.feature).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(screen.queryAllByRole("menu")).toHaveLength(0));
+    expect(document.activeElement).toBe(getAddButton());
+  });
+
+  it("closes the whole menu on Escape in a submenu without reaching outer Escape listeners", async () => {
+    renderInput({ toolsMenu: toolsMenu(spies()) });
+    const windowEscape = vi.fn();
+    const onWindowKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") windowEscape();
+    };
+    window.addEventListener("keydown", onWindowKeyDown);
+    try {
+      await fireEvent.keyDown(getAddButton(), { key: "ArrowDown" });
+      await waitFor(() =>
+        expect(document.activeElement?.textContent?.trim()).toBe("Insert date"),
+      );
+      await fireEvent.keyDown(document.activeElement!, { key: "ArrowDown" });
+      await fireEvent.keyDown(document.activeElement!, { key: "ArrowRight" });
+      const bug = await screen.findByRole("menuitem", { name: "Bug report" });
+      await waitFor(() => expect(document.activeElement).toBe(bug));
+
+      await fireEvent.keyDown(bug, { key: "Escape" });
+      await waitFor(() =>
+        expect(getAddButton().getAttribute("aria-expanded")).toBe("false"),
+      );
+      expect(document.activeElement).toBe(getAddButton());
+      expect(windowEscape).not.toHaveBeenCalled();
+    } finally {
+      window.removeEventListener("keydown", onWindowKeyDown);
+    }
+  });
+
+  it("closes on Tab and returns focus to the trigger", async () => {
+    renderInput({ toolsMenu: toolsMenu(spies()) });
+    await fireEvent.keyDown(getAddButton(), { key: "ArrowDown" });
+    await waitFor(() =>
+      expect(document.activeElement?.textContent?.trim()).toBe("Insert date"),
+    );
+    await fireEvent.keyDown(document.activeElement!, { key: "Tab" });
+    expect(getAddButton().getAttribute("aria-expanded")).toBe("false");
+    expect(document.activeElement).toBe(getAddButton());
+  });
+
+  it("opens on pointer down, and a pointer down outside closes it", async () => {
+    renderInput({ toolsMenu: toolsMenu(spies()) });
+    const button = getAddButton();
+    button.dispatchEvent(pointer("pointerdown"));
+    // The click that follows the pointer down does not toggle it again.
+    await fireEvent.click(button, { detail: 1 });
+    await nextTick();
+    expect(button.getAttribute("aria-expanded")).toBe("true");
+    const content = screen.getByRole("menu");
+    await waitFor(() => expect(document.activeElement).toBe(content));
+
+    document.body.dispatchEvent(pointer("pointerdown"));
+    await nextTick();
+    expect(button.getAttribute("aria-expanded")).toBe("false");
+  });
+
+  it("opens a submenu on hover and focuses the hovered item", async () => {
+    vi.useFakeTimers();
+    const actions = spies();
+    renderInput({ toolsMenu: toolsMenu(actions) });
+    await fireEvent.click(getAddButton(), { detail: 1 });
+    await nextTick();
+    const subTrigger = screen.getByRole("menuitem", { name: "Templates" });
+
+    subTrigger.dispatchEvent(pointer("pointermove"));
+    expect(document.activeElement).toBe(subTrigger);
+    expect(screen.queryByRole("menuitem", { name: "Bug report" })).toBeNull();
+    await vi.advanceTimersByTimeAsync(150);
+    const bug = screen.getByRole("menuitem", { name: "Bug report" });
+    // Opening on hover leaves focus on the trigger.
+    expect(document.activeElement).toBe(subTrigger);
+
+    await fireEvent.click(bug);
+    expect(actions.bug).toHaveBeenCalledTimes(1);
+    await vi.advanceTimersByTimeAsync(500);
+    expect(screen.queryAllByRole("menu")).toHaveLength(0);
+  });
+
+  it("shows the add button label and the / shortcut in its tooltip", async () => {
+    renderInput(
+      { onAddFile: vi.fn() },
+      { chatInputToolbarAddButtonLabel: "Upload attachment" },
+    );
+    const button = getAddButton();
+    await fireEvent.focus(button);
+    const tooltip = screen.getByRole("tooltip");
+    expect(tooltip.textContent).toContain("Upload attachment");
+    expect(tooltip.querySelector("code")?.textContent?.trim()).toBe("/");
+    expect(
+      tooltip.querySelector(".cpk-chat-input-add-menu-tooltip"),
+    ).not.toBeNull();
+    expect(button.getAttribute("aria-describedby")).toBe(tooltip.id);
+  });
+
+  it("hides the add button tooltip while the menu is open", async () => {
+    renderInput({ onAddFile: vi.fn() });
+    const button = getAddButton();
+    await fireEvent.focus(button);
+    expect(screen.getByRole("tooltip")).toBeTruthy();
+
+    await fireEvent.keyDown(button, { key: "Enter" });
+    await waitFor(() => expect(screen.queryByRole("tooltip")).toBeNull());
+  });
+
+  it("gives the transcribe buttons a tooltip with their label instead of a title", async () => {
+    renderInput({ onStartTranscribe: vi.fn() });
+    const start = screen.getByTestId("copilot-chat-input-start-transcribe");
+    expect(start.hasAttribute("title")).toBe(false);
+    await fireEvent.focus(start);
+    const tooltip = screen.getByRole("tooltip");
+    expect(tooltip.textContent?.trim()).toBe("Transcribe");
+    expect(tooltip.getAttribute("data-side")).toBe("bottom");
+    expect(start.getAttribute("aria-describedby")).toBe(tooltip.id);
+  });
+});

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

@@ -992,7 +992,9 @@ describe("CopilotChatInput Slot System E2E Tests", () => {
         "[data-testid='input-container']",
       ) as HTMLElement;
       expect(inputContainer).not.toBeNull();
-      expect(inputContainer.classList.contains("cpk:absolute")).toBe(false);
+      expect(inputContainer.classList.contains("cpk-chat-input-absolute")).toBe(
+        false,
+      );
     });
 
     it("should render absolute positioning when positioning='absolute'", () => {
@@ -1008,8 +1010,9 @@ describe("CopilotChatInput Slot System E2E Tests", () => {
         "[data-testid='absolute-input']",
       ) as HTMLElement;
       expect(inputContainer).not.toBeNull();
-      expect(inputContainer.classList.contains("cpk:absolute")).toBe(true);
-      expect(inputContainer.classList.contains("cpk:bottom-0")).toBe(true);
+      expect(inputContainer.classList.contains("cpk-chat-input-absolute")).toBe(
+        true,
+      );
     });
 
     it("should apply keyboard height transform", () => {

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

@@ -35,7 +35,9 @@ const mockLayoutMetrics = (
   container: HTMLElement,
   options?: { gridWidth?: number; addWidth?: number; actionsWidth?: number },
 ) => {
-  const grid = container.querySelector("div.cpk\\:grid") as HTMLElement | null;
+  const grid = container.querySelector(
+    ".cpk-chat-input-grid",
+  ) as HTMLElement | null;
   if (!grid) {
     throw new Error("Grid container not found in CopilotChatInput layout");
   }
@@ -557,6 +559,38 @@ describe("CopilotChatInput", () => {
     expect(screen.getByRole("button", { name: "Stop" })).toBe(getSendButton());
   });
 
+  describe("Enter while the agent runs", () => {
+    async function pressEnterWhileRunning(modelValue: string) {
+      const onStop = vi.fn();
+      renderWithProvider({
+        props: { modelValue, isRunning: true },
+        listeners: { onSubmitMessage: mockOnSubmitMessage, onStop },
+      });
+      await fireEvent.keyDown(
+        screen.getByPlaceholderText("Type a message..."),
+        {
+          key: "Enter",
+          shiftKey: false,
+        },
+      );
+      return onStop;
+    }
+
+    it("sends the typed text and does not stop the run", async () => {
+      const onStop = await pressEnterWhileRunning("  next question  ");
+
+      expect(mockOnSubmitMessage).toHaveBeenCalledWith("next question");
+      expect(onStop).not.toHaveBeenCalled();
+    });
+
+    it("stops the run when the input is empty", async () => {
+      const onStop = await pressEnterWhileRunning("");
+
+      expect(onStop).toHaveBeenCalledOnce();
+      expect(mockOnSubmitMessage).not.toHaveBeenCalled();
+    });
+  });
+
   it("names the send button with the configured labels", () => {
     renderWithProvider({
       template: `
@@ -694,9 +728,8 @@ describe("CopilotChatInput", () => {
     const layoutCell = textarea.parentElement as HTMLElement;
     const gridContainer = layoutCell.parentElement as HTMLElement;
 
-    expect(layoutCell.className).toContain("col-start-2");
-    expect(layoutCell.className).not.toContain("col-span-3");
-    expect(gridContainer.className).toContain("items-center");
+    expect(layoutCell.className).toContain("cpk-chat-input-field");
+    expect(gridContainer.getAttribute("data-layout")).toBe("compact");
   });
 
   it("toggles textarea padding based on multiline state", async () => {
@@ -706,8 +739,10 @@ describe("CopilotChatInput", () => {
     mockLayoutMetrics(container);
 
     const textarea = screen.getByRole("textbox");
-    expect(textarea.className).toContain("pr-5");
-    expect(textarea.className).not.toContain("px-5");
+    expect(textarea.className).toContain("cpk-chat-input-textarea-compact");
+    expect(textarea.className).not.toContain(
+      "cpk-chat-input-textarea-expanded",
+    );
 
     await fireEvent.input(textarea, {
       target: {
@@ -717,8 +752,10 @@ describe("CopilotChatInput", () => {
     });
 
     await waitFor(() => {
-      expect(textarea.className).toContain("px-5");
-      expect(textarea.className).not.toContain("pr-5");
+      expect(textarea.className).toContain("cpk-chat-input-textarea-expanded");
+      expect(textarea.className).not.toContain(
+        "cpk-chat-input-textarea-compact",
+      );
     });
   });
 
@@ -738,13 +775,16 @@ describe("CopilotChatInput", () => {
       },
     });
     await waitFor(() => {
-      expect(layoutCell.className).toContain("col-span-3");
+      expect(layoutCell.parentElement?.getAttribute("data-layout")).toBe(
+        "expanded",
+      );
     });
 
     await fireEvent.input(textarea, { target: { value: "short" } });
     await waitFor(() => {
-      expect(layoutCell.className).toContain("col-start-2");
-      expect(layoutCell.className).not.toContain("col-span-3");
+      expect(layoutCell.parentElement?.getAttribute("data-layout")).toBe(
+        "compact",
+      );
     });
   });
 
@@ -760,8 +800,9 @@ describe("CopilotChatInput", () => {
 
     await waitFor(() => {
       const layoutCell = textarea.parentElement as HTMLElement;
-      expect(layoutCell.className).toContain("col-span-3");
-      expect(layoutCell.className).not.toContain("col-start-2");
+      expect(layoutCell.parentElement?.getAttribute("data-layout")).toBe(
+        "expanded",
+      );
     });
   });
 
@@ -790,7 +831,7 @@ describe("CopilotChatInput", () => {
 
     await fireEvent.click(addButton);
     const menuItem = await screen.findByRole("menuitem", {
-      name: "Add photos or files",
+      name: "Add attachments",
     });
     await fireEvent.click(menuItem);
     expect(handleAddFile).toHaveBeenCalledTimes(1);

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

@@ -0,0 +1,160 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { nextTick } from "vue";
+import { fireEvent, render, screen } from "@testing-library/vue";
+import CopilotChatAttachmentRenderer from "../CopilotChatAttachmentRenderer.vue";
+
+// Ported from react-core's lightbox and attachment renderer behavior.
+
+const image = {
+  type: "image" as const,
+  source: { type: "url" as const, value: "https://example.com/cat.png" },
+};
+
+async function openLightbox() {
+  const result = render(CopilotChatAttachmentRenderer, { props: image });
+  const thumbnail = screen.getByRole("button", { name: "Image attachment" });
+  thumbnail.focus();
+  await fireEvent.click(thumbnail);
+  await nextTick();
+  return { ...result, thumbnail };
+}
+
+describe("CopilotChatAttachmentRenderer lightbox", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+  });
+
+  it("opens the image full size in a lightbox portalled to the body", async () => {
+    const { container } = await openLightbox();
+
+    const dialog = screen.getByRole("dialog", { name: "Image attachment" });
+    expect(dialog.classList.contains("cpk-attachment-lightbox")).toBe(true);
+    expect(container.contains(dialog)).toBe(false);
+    const full = dialog.querySelector("img");
+    expect(full?.getAttribute("src")).toBe("https://example.com/cat.png");
+    expect(
+      full?.classList.contains("cpk-attachment-renderer-lightbox-image"),
+    ).toBe(true);
+  });
+
+  it("names the close button and moves focus to it", async () => {
+    await openLightbox();
+    const close = screen.getByRole("button", { name: "Close preview" });
+    expect(
+      close.classList.contains("cpk-attachment-lightbox-close-button"),
+    ).toBe(true);
+    expect(document.activeElement).toBe(close);
+  });
+
+  it("closes on Escape and returns focus to the thumbnail", async () => {
+    const { thumbnail } = await openLightbox();
+    await fireEvent.keyDown(document, { key: "Escape" });
+    await nextTick();
+    expect(screen.queryByRole("dialog")).toBeNull();
+    expect(document.activeElement).toBe(thumbnail);
+  });
+
+  it("closes on the close button and on a backdrop click, not a content click", async () => {
+    await openLightbox();
+    await fireEvent.click(screen.getByRole("dialog").querySelector("img")!);
+    expect(screen.queryByRole("dialog")).not.toBeNull();
+
+    await fireEvent.click(screen.getByRole("dialog"));
+    expect(screen.queryByRole("dialog")).toBeNull();
+
+    await fireEvent.click(
+      screen.getByRole("button", { name: "Image attachment" }),
+    );
+    await fireEvent.click(
+      screen.getByRole("button", { name: "Close preview" }),
+    );
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+
+  it("keeps Tab inside the lightbox", async () => {
+    await openLightbox();
+    const close = screen.getByRole("button", { name: "Close preview" });
+    const event = new KeyboardEvent("keydown", {
+      key: "Tab",
+      bubbles: true,
+      cancelable: true,
+    });
+    close.dispatchEvent(event);
+    expect(event.defaultPrevented).toBe(true);
+    expect(document.activeElement).toBe(close);
+  });
+
+  it("morphs the thumbnail with a view transition when the browser has one", async () => {
+    const names: string[] = [];
+    const startViewTransition = vi.fn((callback: () => Promise<void>) => {
+      const thumbnail = document.querySelector<HTMLElement>(
+        ".cpk-attachment-renderer-image",
+      )!;
+      names.push(thumbnail.style.viewTransitionName);
+      const done = callback();
+      return { finished: done.then(() => undefined) };
+    });
+    Object.defineProperty(document, "startViewTransition", {
+      value: startViewTransition,
+      configurable: true,
+    });
+    try {
+      await openLightbox();
+      await nextTick();
+      expect(startViewTransition).toHaveBeenCalledTimes(1);
+      // The name is on the thumbnail before the transition, then on the
+      // lightbox image.
+      expect(names[0]).toMatch(/^cpk-lightbox-/);
+      const full = screen.getByRole("dialog").querySelector("img")!;
+      expect(full.style.viewTransitionName).toBe(names[0]);
+      expect(
+        document.querySelector<HTMLElement>(".cpk-attachment-renderer-image")!
+          .style.viewTransitionName,
+      ).toBe("");
+    } finally {
+      delete (document as { startViewTransition?: unknown })
+        .startViewTransition;
+    }
+  });
+});
+
+describe("CopilotChatAttachmentRenderer document link", () => {
+  it("links a document attachment to its resolved source URL", () => {
+    const href =
+      "https://files.example.test/download/document.pdf?signature=preserved";
+    render(CopilotChatAttachmentRenderer, {
+      props: {
+        type: "document",
+        source: { type: "url", value: href, mimeType: "application/pdf" },
+        filename: "document.pdf",
+      },
+    });
+
+    const link = screen.getByRole("link", { name: "document.pdf" });
+    expect(link.getAttribute("href")).toBe(href);
+    expect(link.getAttribute("download")).toBe("document.pdf");
+    expect(link.getAttribute("target")).toBe("_blank");
+    expect(link.getAttribute("rel")).toBe("noopener noreferrer");
+    expect(link.textContent).toContain("document.pdf");
+  });
+
+  it("keeps a data URL downloadable when no filename is known", () => {
+    render(CopilotChatAttachmentRenderer, {
+      props: {
+        type: "document",
+        source: {
+          type: "data",
+          value: "JVBERi0=",
+          mimeType: "application/pdf",
+        },
+      },
+    });
+
+    const link = screen.getByRole("link", { name: "application/pdf" });
+    expect(link.getAttribute("href")).toBe(
+      "data:application/pdf;base64,JVBERi0=",
+    );
+    expect(link.getAttribute("download")).toBe("");
+  });
+});