@copilotkit/vue 1.57.1

package/src/v2/components/chat/__tests__/CopilotChatCopyButton.clipboard.test.ts

@@ -0,0 +1,230 @@
+import { defineComponent } from "vue";
+import { render, screen, fireEvent, waitFor } from "@testing-library/vue";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import type { AssistantMessage, UserMessage } from "@ag-ui/core";
+import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
+import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
+import CopilotChatAssistantMessage from "../CopilotChatAssistantMessage.vue";
+import CopilotChatUserMessage from "../CopilotChatUserMessage.vue";
+
+const TEST_THREAD_ID = "test-thread";
+
+const createAssistantMessage = (content: string): AssistantMessage => ({
+  id: "msg-assistant-1",
+  role: "assistant",
+  content,
+});
+
+const createUserMessage = (content: string): UserMessage => ({
+  id: "msg-user-1",
+  role: "user",
+  content,
+});
+
+const renderAssistantMessage = (message: AssistantMessage) => {
+  const Host = defineComponent({
+    components: {
+      CopilotKitProvider,
+      CopilotChatConfigurationProvider,
+      CopilotChatAssistantMessage,
+    },
+    setup() {
+      return { message, TEST_THREAD_ID };
+    },
+    template: `
+      <CopilotKitProvider runtime-url="/api/copilotkit">
+        <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+          <CopilotChatAssistantMessage :message="message" />
+        </CopilotChatConfigurationProvider>
+      </CopilotKitProvider>
+    `,
+  });
+
+  return render(Host);
+};
+
+const renderUserMessage = (message: UserMessage) => {
+  const Host = defineComponent({
+    components: {
+      CopilotKitProvider,
+      CopilotChatConfigurationProvider,
+      CopilotChatUserMessage,
+    },
+    setup() {
+      return { message, TEST_THREAD_ID };
+    },
+    template: `
+      <CopilotKitProvider runtime-url="/api/copilotkit">
+        <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+          <CopilotChatUserMessage :message="message" />
+        </CopilotChatConfigurationProvider>
+      </CopilotKitProvider>
+    `,
+  });
+
+  return render(Host);
+};
+
+describe("CopyButton clipboard behavior", () => {
+  let originalClipboard: Clipboard | undefined;
+
+  beforeEach(() => {
+    originalClipboard = navigator.clipboard;
+  });
+
+  afterEach(() => {
+    Object.defineProperty(navigator, "clipboard", {
+      value: originalClipboard,
+      writable: true,
+      configurable: true,
+    });
+  });
+
+  describe("AssistantMessage CopyButton", () => {
+    it("shows copied state only after successful clipboard write", async () => {
+      const writeTextMock = vi.fn().mockResolvedValue(undefined);
+      Object.defineProperty(navigator, "clipboard", {
+        value: { writeText: writeTextMock },
+        writable: true,
+        configurable: true,
+      });
+
+      renderAssistantMessage(createAssistantMessage("Hello assistant"));
+
+      const copyButton = screen.getByTestId("copilot-copy-button");
+      await fireEvent.click(copyButton);
+
+      await waitFor(() => {
+        expect(writeTextMock).toHaveBeenCalledWith("Hello assistant");
+      });
+      await waitFor(() => {
+        expect(copyButton.querySelector(".lucide-check")).not.toBeNull();
+      });
+    });
+
+    it("does NOT show copied state when clipboard API is unavailable", async () => {
+      Object.defineProperty(navigator, "clipboard", {
+        value: undefined,
+        writable: true,
+        configurable: true,
+      });
+
+      renderAssistantMessage(createAssistantMessage("Hello assistant"));
+
+      const copyButton = screen.getByTestId("copilot-copy-button");
+      await fireEvent.click(copyButton);
+
+      await waitFor(() => {
+        expect(copyButton.querySelector(".lucide-check")).toBeNull();
+        expect(copyButton.querySelector(".lucide-copy")).not.toBeNull();
+      });
+    });
+
+    it("logs error when clipboard write rejects", async () => {
+      const writeTextMock = vi
+        .fn()
+        .mockRejectedValue(new Error("Permission denied"));
+      Object.defineProperty(navigator, "clipboard", {
+        value: { writeText: writeTextMock },
+        writable: true,
+        configurable: true,
+      });
+      const consoleSpy = vi
+        .spyOn(console, "error")
+        .mockImplementation(() => {});
+
+      renderAssistantMessage(createAssistantMessage("Hello assistant"));
+
+      const copyButton = screen.getByTestId("copilot-copy-button");
+      await fireEvent.click(copyButton);
+
+      await waitFor(() => {
+        expect(writeTextMock).toHaveBeenCalledWith("Hello assistant");
+      });
+      await waitFor(() => {
+        expect(consoleSpy).toHaveBeenCalledWith(
+          "Failed to copy to clipboard:",
+          expect.any(Error),
+        );
+      });
+      expect(copyButton.querySelector(".lucide-check")).toBeNull();
+      expect(copyButton.querySelector(".lucide-copy")).not.toBeNull();
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe("UserMessage CopyButton", () => {
+    it("shows copied state only after successful clipboard write", async () => {
+      const writeTextMock = vi.fn().mockResolvedValue(undefined);
+      Object.defineProperty(navigator, "clipboard", {
+        value: { writeText: writeTextMock },
+        writable: true,
+        configurable: true,
+      });
+
+      renderUserMessage(createUserMessage("Hello user"));
+
+      const copyButton = screen.getByTestId("copilot-user-copy-button");
+      await fireEvent.click(copyButton);
+
+      await waitFor(() => {
+        expect(writeTextMock).toHaveBeenCalledWith("Hello user");
+      });
+      await waitFor(() => {
+        expect(copyButton.querySelector(".lucide-check")).not.toBeNull();
+      });
+    });
+
+    it("does NOT show copied state when clipboard API is unavailable", async () => {
+      Object.defineProperty(navigator, "clipboard", {
+        value: undefined,
+        writable: true,
+        configurable: true,
+      });
+
+      renderUserMessage(createUserMessage("Hello user"));
+
+      const copyButton = screen.getByTestId("copilot-user-copy-button");
+      await fireEvent.click(copyButton);
+
+      await waitFor(() => {
+        expect(copyButton.querySelector(".lucide-check")).toBeNull();
+        expect(copyButton.querySelector(".lucide-copy")).not.toBeNull();
+      });
+    });
+
+    it("logs error when clipboard write rejects", async () => {
+      const writeTextMock = vi
+        .fn()
+        .mockRejectedValue(new Error("Permission denied"));
+      Object.defineProperty(navigator, "clipboard", {
+        value: { writeText: writeTextMock },
+        writable: true,
+        configurable: true,
+      });
+      const consoleSpy = vi
+        .spyOn(console, "error")
+        .mockImplementation(() => {});
+
+      renderUserMessage(createUserMessage("Hello user"));
+
+      const copyButton = screen.getByTestId("copilot-user-copy-button");
+      await fireEvent.click(copyButton);
+
+      await waitFor(() => {
+        expect(writeTextMock).toHaveBeenCalledWith("Hello user");
+      });
+      await waitFor(() => {
+        expect(consoleSpy).toHaveBeenCalledWith(
+          "Failed to copy to clipboard:",
+          expect.any(Error),
+        );
+      });
+      expect(copyButton.querySelector(".lucide-check")).toBeNull();
+      expect(copyButton.querySelector(".lucide-copy")).not.toBeNull();
+
+      consoleSpy.mockRestore();
+    });
+  });
+});

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

@@ -0,0 +1,83 @@
+import { defineComponent, h } from "vue";
+import { render, screen } from "@testing-library/vue";
+import { describe, expect, it } from "vitest";
+import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
+import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
+import CopilotChatInput from "../CopilotChatInput.vue";
+import CopilotChatView from "../CopilotChatView.vue";
+
+const TEST_THREAD_ID = "test-thread";
+
+const PADDING_VAR = "var(--copilotkit-license-banner-offset, 0px)";
+
+function renderInput(props: Record<string, unknown>) {
+  const Host = defineComponent({
+    render() {
+      return h(
+        CopilotChatConfigurationProvider,
+        { threadId: TEST_THREAD_ID },
+        { default: () => h(CopilotChatInput, props) },
+      );
+    },
+  });
+  return render(Host);
+}
+
+describe("CopilotChatInput bottom-anchored offset", () => {
+  it('reserves padding-bottom for the license banner when positioning="absolute"', () => {
+    renderInput({ modelValue: "", positioning: "absolute" });
+    const container = screen.getByTestId(
+      "copilot-chat-input-container",
+    ) as HTMLElement;
+    expect(container.style.paddingBottom).toBe(PADDING_VAR);
+  });
+
+  it('reserves padding-bottom for the license banner when bottomAnchored=true (positioning="static")', () => {
+    renderInput({
+      modelValue: "",
+      positioning: "static",
+      bottomAnchored: true,
+    });
+    const container = screen.getByTestId(
+      "copilot-chat-input-container",
+    ) as HTMLElement;
+    expect(container.style.paddingBottom).toBe(PADDING_VAR);
+  });
+
+  it("does NOT reserve padding-bottom for the welcome (static, non-bottomAnchored) input", () => {
+    renderInput({ modelValue: "", positioning: "static" });
+    const container = screen.getByTestId(
+      "copilot-chat-input-container",
+    ) as HTMLElement;
+    expect(container.style.paddingBottom).toBe("");
+  });
+
+  it("CopilotChatView main overlay forwards bottomAnchored=true to its input", () => {
+    const Host = defineComponent({
+      render() {
+        return h(CopilotKitProvider, null, {
+          default: () =>
+            h(
+              CopilotChatConfigurationProvider,
+              { threadId: TEST_THREAD_ID },
+              {
+                default: () =>
+                  h(CopilotChatView, {
+                    messages: [
+                      { id: "m1", role: "user", content: "hi" },
+                      { id: "m2", role: "assistant", content: "hello" },
+                    ],
+                  }),
+              },
+            ),
+        });
+      },
+    });
+
+    const view = render(Host);
+    const container = view.getByTestId(
+      "copilot-chat-input-container",
+    ) as HTMLElement;
+    expect(container.style.paddingBottom).toBe(PADDING_VAR);
+  });
+});