@copilotkit/vue 1.57.1

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

@@ -0,0 +1,87 @@
+import { defineComponent } from "vue";
+import { render, screen, fireEvent } from "@testing-library/vue";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { AssistantMessage } from "@ag-ui/core";
+import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
+import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
+import CopilotChatAssistantMessage from "../CopilotChatAssistantMessage.vue";
+
+const TEST_THREAD_ID = "test-thread";
+
+const message: AssistantMessage = {
+  id: "msg-1",
+  role: "assistant",
+  content: "Hello from the assistant",
+};
+
+function renderWithProviders(listeners: Record<string, unknown>) {
+  const Host = defineComponent({
+    components: {
+      CopilotKitProvider,
+      CopilotChatConfigurationProvider,
+      CopilotChatAssistantMessage,
+    },
+    setup() {
+      return { message, TEST_THREAD_ID, listeners };
+    },
+    template: `
+      <CopilotKitProvider runtime-url="/api/copilotkit">
+        <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+          <CopilotChatAssistantMessage
+            :message="message"
+            v-bind="listeners"
+          />
+        </CopilotChatConfigurationProvider>
+      </CopilotKitProvider>
+    `,
+  });
+  return render(Host);
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("CopilotChatAssistantMessage thumbs callbacks (#3457 parity)", () => {
+  it("emits thumbs-up with the AssistantMessage payload, not an event", async () => {
+    const onThumbsUp = vi.fn();
+    renderWithProviders({ onThumbsUp });
+
+    const thumbsUpButton = screen.getByRole("button", {
+      name: /good response/i,
+    });
+    await fireEvent.click(thumbsUpButton);
+
+    expect(onThumbsUp).toHaveBeenCalledTimes(1);
+    const arg = onThumbsUp.mock.calls[0]?.[0];
+    expect(arg).toMatchObject({
+      id: "msg-1",
+      role: "assistant",
+      content: "Hello from the assistant",
+    });
+    expect(arg).not.toHaveProperty("nativeEvent");
+    expect(arg).not.toHaveProperty("target");
+    expect(arg).not.toHaveProperty("currentTarget");
+  });
+
+  it("emits thumbs-down with the AssistantMessage payload, not an event", async () => {
+    const onThumbsDown = vi.fn();
+    renderWithProviders({ onThumbsDown });
+
+    const thumbsDownButton = screen.getByRole("button", {
+      name: /bad response/i,
+    });
+    await fireEvent.click(thumbsDownButton);
+
+    expect(onThumbsDown).toHaveBeenCalledTimes(1);
+    const arg = onThumbsDown.mock.calls[0]?.[0];
+    expect(arg).toMatchObject({
+      id: "msg-1",
+      role: "assistant",
+      content: "Hello from the assistant",
+    });
+    expect(arg).not.toHaveProperty("nativeEvent");
+    expect(arg).not.toHaveProperty("target");
+    expect(arg).not.toHaveProperty("currentTarget");
+  });
+});

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

@@ -0,0 +1,277 @@
+import { describe, expect, it } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/vue";
+import type { Attachment } from "@copilotkit/shared";
+import CopilotChatAttachmentQueue from "../CopilotChatAttachmentQueue.vue";
+
+function createAttachment(partial: Partial<Attachment>): Attachment {
+  return {
+    id: partial.id ?? "attachment-id",
+    type: partial.type ?? "document",
+    source: partial.source ?? {
+      type: "url",
+      value: "https://example.com/file.txt",
+      mimeType: "text/plain",
+    },
+    filename: partial.filename,
+    status: partial.status ?? "ready",
+    size: partial.size,
+    metadata: partial.metadata,
+    thumbnail: partial.thumbnail,
+  };
+}
+
+describe("CopilotChatAttachmentQueue", () => {
+  it("renders nothing for an empty queue", () => {
+    const { queryByTestId } = render(CopilotChatAttachmentQueue, {
+      props: {
+        attachments: [],
+      },
+    });
+    expect(queryByTestId("copilot-chat-attachment-queue")).toBeNull();
+  });
+
+  it("image thumbnail click opens lightbox", async () => {
+    const { getByTestId } = render(CopilotChatAttachmentQueue, {
+      props: {
+        attachments: [
+          createAttachment({
+            id: "image-1",
+            type: "image",
+            status: "ready",
+            source: { type: "url", value: "https://example.com/image.png" },
+          }),
+        ],
+      },
+    });
+
+    await fireEvent.click(getByTestId("copilot-chat-attachment-image-button"));
+    expect(
+      screen.getByTestId("copilot-chat-attachment-lightbox-image"),
+    ).not.toBeNull();
+  });
+
+  it("image lightbox closes on backdrop click", async () => {
+    const { getByTestId, queryByTestId } = render(CopilotChatAttachmentQueue, {
+      props: {
+        attachments: [
+          createAttachment({
+            id: "image-2",
+            type: "image",
+            status: "ready",
+            source: { type: "url", value: "https://example.com/image2.png" },
+          }),
+        ],
+      },
+    });
+
+    await fireEvent.click(getByTestId("copilot-chat-attachment-image-button"));
+    await fireEvent.click(
+      screen.getByTestId("copilot-chat-attachment-lightbox"),
+    );
+    expect(queryByTestId("copilot-chat-attachment-lightbox")).toBeNull();
+  });
+
+  it("image lightbox closes on Escape", async () => {
+    const { getByTestId, queryByTestId } = render(CopilotChatAttachmentQueue, {
+      props: {
+        attachments: [
+          createAttachment({
+            id: "image-3",
+            type: "image",
+            status: "ready",
+            source: { type: "url", value: "https://example.com/image3.png" },
+          }),
+        ],
+      },
+    });
+
+    await fireEvent.click(getByTestId("copilot-chat-attachment-image-button"));
+    await fireEvent.keyDown(document, { key: "Escape" });
+    expect(queryByTestId("copilot-chat-attachment-lightbox")).toBeNull();
+  });
+
+  it("video card shows play overlay and opens fullscreen video", async () => {
+    const { getByTestId } = render(CopilotChatAttachmentQueue, {
+      props: {
+        attachments: [
+          createAttachment({
+            id: "video-1",
+            type: "video",
+            status: "ready",
+            source: { type: "url", value: "https://example.com/video.mp4" },
+          }),
+        ],
+      },
+    });
+
+    expect(getByTestId("copilot-chat-attachment-video-play")).not.toBeNull();
+    await fireEvent.click(getByTestId("copilot-chat-attachment-video-play"));
+    expect(
+      screen.getByTestId("copilot-chat-attachment-lightbox-video"),
+    ).not.toBeNull();
+  });
+
+  it("video thumbnail is preferred when attachment.thumbnail exists", () => {
+    const { getByTestId, queryByTestId } = render(CopilotChatAttachmentQueue, {
+      props: {
+        attachments: [
+          createAttachment({
+            id: "video-2",
+            type: "video",
+            status: "ready",
+            thumbnail: "https://example.com/thumb.jpg",
+            source: { type: "url", value: "https://example.com/video2.mp4" },
+          }),
+        ],
+      },
+    });
+
+    expect(
+      getByTestId("copilot-chat-attachment-video-thumbnail"),
+    ).not.toBeNull();
+    expect(queryByTestId("copilot-chat-attachment-video-fallback")).toBeNull();
+  });
+
+  it("previewable PDF document opens iframe lightbox", async () => {
+    const { getByTestId } = render(CopilotChatAttachmentQueue, {
+      props: {
+        attachments: [
+          createAttachment({
+            id: "doc-pdf",
+            type: "document",
+            status: "ready",
+            source: {
+              type: "url",
+              value: "https://example.com/sample.pdf",
+              mimeType: "application/pdf",
+            },
+          }),
+        ],
+      },
+    });
+
+    await fireEvent.click(
+      getByTestId("copilot-chat-attachment-document-button"),
+    );
+    expect(
+      screen.getByTestId("copilot-chat-attachment-lightbox-document-iframe"),
+    ).not.toBeNull();
+  });
+
+  it("previewable base64 text document opens decoded text preview", async () => {
+    const base64Text = btoa("hello attachment preview");
+    const { getByTestId } = render(CopilotChatAttachmentQueue, {
+      props: {
+        attachments: [
+          createAttachment({
+            id: "doc-text",
+            type: "document",
+            status: "ready",
+            source: {
+              type: "data",
+              value: base64Text,
+              mimeType: "text/plain",
+            },
+          }),
+        ],
+      },
+    });
+
+    await fireEvent.click(
+      getByTestId("copilot-chat-attachment-document-button"),
+    );
+    expect(
+      screen.getByTestId("copilot-chat-attachment-lightbox-document-text")
+        .textContent,
+    ).toContain("hello attachment preview");
+  });
+
+  it("non-previewable document remains inert", async () => {
+    const { getByTestId, queryByTestId } = render(CopilotChatAttachmentQueue, {
+      props: {
+        attachments: [
+          createAttachment({
+            id: "doc-bin",
+            type: "document",
+            status: "ready",
+            filename: "archive.bin",
+            size: 2048,
+            source: {
+              type: "url",
+              value: "https://example.com/archive.bin",
+              mimeType: "application/octet-stream",
+            },
+          }),
+        ],
+      },
+    });
+
+    await fireEvent.click(
+      getByTestId("copilot-chat-attachment-document-button"),
+    );
+    expect(queryByTestId("copilot-chat-attachment-lightbox")).toBeNull();
+  });
+
+  it("audio/document cards preserve remove-button behavior", async () => {
+    const { getAllByLabelText, emitted } = render(CopilotChatAttachmentQueue, {
+      props: {
+        attachments: [
+          createAttachment({
+            id: "audio-1",
+            type: "audio",
+            filename: "audio.mp3",
+            status: "ready",
+            source: { type: "url", value: "https://example.com/audio.mp3" },
+          }),
+          createAttachment({
+            id: "doc-1",
+            type: "document",
+            filename: "doc.txt",
+            status: "ready",
+            source: {
+              type: "url",
+              value: "https://example.com/doc.txt",
+              mimeType: "text/plain",
+            },
+          }),
+        ],
+      },
+    });
+
+    const buttons = getAllByLabelText("Remove attachment");
+    await fireEvent.click(buttons[0]);
+    await fireEvent.click(buttons[1]);
+    expect(emitted()["remove-attachment"]).toEqual([["audio-1"], ["doc-1"]]);
+  });
+
+  it("uploading overlay coexists with richer card layout", () => {
+    const { getByTestId, getAllByTestId } = render(CopilotChatAttachmentQueue, {
+      props: {
+        attachments: [
+          createAttachment({
+            id: "uploading-image",
+            type: "image",
+            status: "uploading",
+            source: { type: "url", value: "https://example.com/loading.png" },
+          }),
+          createAttachment({
+            id: "ready-document",
+            type: "document",
+            status: "ready",
+            filename: "notes.txt",
+            source: {
+              type: "url",
+              value: "https://example.com/notes.txt",
+              mimeType: "text/plain",
+            },
+          }),
+        ],
+      },
+    });
+
+    expect(
+      getByTestId("copilot-chat-attachment-uploading-overlay"),
+    ).not.toBeNull();
+    expect(getAllByTestId("copilot-chat-attachment-item").length).toBe(2);
+  });
+});

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

@@ -0,0 +1,124 @@
+import { describe, expect, it } from "vitest";
+import { fireEvent, render, within } from "@testing-library/vue";
+import CopilotChatAttachmentRenderer from "../CopilotChatAttachmentRenderer.vue";
+
+describe("CopilotChatAttachmentRenderer", () => {
+  it("renders image attachments from source", () => {
+    const { getByTestId } = render(CopilotChatAttachmentRenderer, {
+      props: {
+        type: "image",
+        source: { type: "url", value: "https://example.com/image.png" },
+      },
+    });
+
+    const image = getByTestId("copilot-chat-attachment-renderer-image");
+    expect(image.getAttribute("src")).toBe("https://example.com/image.png");
+  });
+
+  it("shows image fallback on load error", async () => {
+    const { getByTestId, queryByTestId } = render(
+      CopilotChatAttachmentRenderer,
+      {
+        props: {
+          type: "image",
+          source: { type: "url", value: "https://example.com/broken.png" },
+        },
+      },
+    );
+
+    await fireEvent.error(
+      getByTestId("copilot-chat-attachment-renderer-image"),
+    );
+    expect(
+      getByTestId("copilot-chat-attachment-renderer-image-fallback"),
+    ).not.toBeNull();
+    expect(queryByTestId("copilot-chat-attachment-renderer-image")).toBeNull();
+  });
+
+  it("renders audio attachments with controls and optional filename", () => {
+    const { getByTestId } = render(CopilotChatAttachmentRenderer, {
+      props: {
+        type: "audio",
+        source: { type: "url", value: "https://example.com/audio.mp3" },
+        filename: "audio.mp3",
+      },
+    });
+
+    const audioContainer = getByTestId(
+      "copilot-chat-attachment-renderer-audio",
+    );
+    const audio = audioContainer.querySelector("audio");
+    expect(audio).not.toBeNull();
+    expect(audio?.hasAttribute("controls")).toBe(true);
+    expect(
+      getByTestId("copilot-chat-attachment-renderer-audio-filename")
+        .textContent,
+    ).toContain("audio.mp3");
+  });
+
+  it("renders video attachments with controls", () => {
+    const { getByTestId } = render(CopilotChatAttachmentRenderer, {
+      props: {
+        type: "video",
+        source: { type: "url", value: "https://example.com/video.mp4" },
+      },
+    });
+
+    const video = getByTestId("copilot-chat-attachment-renderer-video");
+    expect(video.hasAttribute("controls")).toBe(true);
+    expect(video.getAttribute("src")).toBe("https://example.com/video.mp4");
+  });
+
+  it("renders document attachments with icon and filename fallback chain", () => {
+    const { getByTestId } = render(CopilotChatAttachmentRenderer, {
+      props: {
+        type: "document",
+        source: {
+          type: "url",
+          value: "https://example.com/doc.pdf",
+          mimeType: "application/pdf",
+        },
+        filename: "doc.pdf",
+      },
+    });
+
+    expect(
+      getByTestId("copilot-chat-attachment-renderer-document-label")
+        .textContent,
+    ).toContain("doc.pdf");
+    expect(
+      getByTestId("copilot-chat-attachment-renderer-document-icon").textContent,
+    ).toBeTruthy();
+
+    const second = render(CopilotChatAttachmentRenderer, {
+      props: {
+        type: "document",
+        source: {
+          type: "url",
+          value: "https://example.com/doc.pdf",
+          mimeType: "application/pdf",
+        },
+      },
+    });
+    expect(
+      within(second.container).getByTestId(
+        "copilot-chat-attachment-renderer-document-label",
+      ).textContent,
+    ).toContain("application/pdf");
+
+    const third = render(CopilotChatAttachmentRenderer, {
+      props: {
+        type: "document",
+        source: {
+          type: "url",
+          value: "https://example.com/doc.bin",
+        },
+      },
+    });
+    expect(
+      within(third.container).getByTestId(
+        "copilot-chat-attachment-renderer-document-label",
+      ).textContent,
+    ).toContain("Unknown type");
+  });
+});