@copilotkit/react-core 1.57.3 → 1.58.0

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

@@ -1,72 +0,0 @@
-import React from "react";
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, fireEvent } from "@testing-library/react";
-import { AssistantMessage } from "@ag-ui/core";
-import { CopilotChatAssistantMessage } from "../CopilotChatAssistantMessage";
-import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
-import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
-
-const TEST_THREAD_ID = "test-thread";
-
-const renderWithProvider = (component: React.ReactElement) => {
-  return render(
-    <CopilotKitProvider>
-      <CopilotChatConfigurationProvider threadId={TEST_THREAD_ID}>
-        {component}
-      </CopilotChatConfigurationProvider>
-    </CopilotKitProvider>,
-  );
-};
-
-describe("CopilotChatAssistantMessage thumbs callbacks (#3457)", () => {
-  const message: AssistantMessage = {
-    id: "msg-1",
-    role: "assistant",
-    content: "Hello from the assistant",
-  };
-
-  it("onThumbsUp receives AssistantMessage, not SyntheticEvent", () => {
-    const onThumbsUp = vi.fn();
-
-    renderWithProvider(
-      <CopilotChatAssistantMessage message={message} onThumbsUp={onThumbsUp} />,
-    );
-
-    const thumbsUpButton = screen.getByRole("button", {
-      name: /good response/i,
-    });
-    fireEvent.click(thumbsUpButton);
-
-    expect(onThumbsUp).toHaveBeenCalledTimes(1);
-    const arg = onThumbsUp.mock.calls[0][0];
-    // Should receive AssistantMessage
-    expect(arg).toHaveProperty("id", "msg-1");
-    expect(arg).toHaveProperty("role", "assistant");
-    expect(arg).toHaveProperty("content", "Hello from the assistant");
-    // Should NOT receive a SyntheticEvent (which has nativeEvent, target, etc.)
-    expect(arg).not.toHaveProperty("nativeEvent");
-  });
-
-  it("onThumbsDown receives AssistantMessage, not SyntheticEvent", () => {
-    const onThumbsDown = vi.fn();
-
-    renderWithProvider(
-      <CopilotChatAssistantMessage
-        message={message}
-        onThumbsDown={onThumbsDown}
-      />,
-    );
-
-    const thumbsDownButton = screen.getByRole("button", {
-      name: /bad response/i,
-    });
-    fireEvent.click(thumbsDownButton);
-
-    expect(onThumbsDown).toHaveBeenCalledTimes(1);
-    const arg = onThumbsDown.mock.calls[0][0];
-    expect(arg).toHaveProperty("id", "msg-1");
-    expect(arg).toHaveProperty("role", "assistant");
-    expect(arg).toHaveProperty("content", "Hello from the assistant");
-    expect(arg).not.toHaveProperty("nativeEvent");
-  });
-});

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

@@ -1,241 +0,0 @@
-import React from "react";
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { CopilotChatAssistantMessage } from "../CopilotChatAssistantMessage";
-import { CopilotChatUserMessage } from "../CopilotChatUserMessage";
-import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
-import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
-import { AssistantMessage, UserMessage } from "@ag-ui/core";
-
-const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <CopilotKitProvider>
-    <CopilotChatConfigurationProvider threadId="test-thread">
-      {children}
-    </CopilotChatConfigurationProvider>
-  </CopilotKitProvider>
-);
-
-const createAssistantMessage = (content: string): AssistantMessage => ({
-  id: "msg-assistant-1",
-  role: "assistant",
-  content,
-});
-
-const createUserMessage = (content: string): UserMessage => ({
-  id: "msg-user-1",
-  role: "user",
-  content,
-});
-
-describe("CopyButton clipboard behavior", () => {
-  let originalClipboard: Clipboard;
-
-  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,
-      });
-
-      const message = createAssistantMessage("Hello assistant");
-      render(
-        <TestWrapper>
-          <CopilotChatAssistantMessage message={message} />
-        </TestWrapper>,
-      );
-
-      const copyButton = screen.getByTestId("copilot-copy-button");
-      fireEvent.click(copyButton);
-
-      await waitFor(() => {
-        expect(writeTextMock).toHaveBeenCalledWith("Hello assistant");
-      });
-
-      // After successful write, should show check icon
-      await waitFor(() => {
-        const checkIcon = copyButton.querySelector(".lucide-check");
-        expect(checkIcon).not.toBeNull();
-      });
-    });
-
-    it("does NOT show copied state when clipboard API is unavailable", async () => {
-      Object.defineProperty(navigator, "clipboard", {
-        value: undefined,
-        writable: true,
-        configurable: true,
-      });
-
-      const message = createAssistantMessage("Hello assistant");
-      render(
-        <TestWrapper>
-          <CopilotChatAssistantMessage message={message} />
-        </TestWrapper>,
-      );
-
-      const copyButton = screen.getByTestId("copilot-copy-button");
-      fireEvent.click(copyButton);
-
-      // Wait a tick for any async handlers
-      await new Promise((r) => setTimeout(r, 50));
-
-      // Should still show copy icon (not check icon)
-      const checkIcon = copyButton.querySelector(".lucide-check");
-      expect(checkIcon).toBeNull();
-      const copyIcon = copyButton.querySelector(".lucide-copy");
-      expect(copyIcon).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(() => {});
-
-      const message = createAssistantMessage("Hello assistant");
-      render(
-        <TestWrapper>
-          <CopilotChatAssistantMessage message={message} />
-        </TestWrapper>,
-      );
-
-      const copyButton = screen.getByTestId("copilot-copy-button");
-      fireEvent.click(copyButton);
-
-      await waitFor(() => {
-        expect(writeTextMock).toHaveBeenCalled();
-      });
-
-      await waitFor(() => {
-        expect(consoleSpy).toHaveBeenCalledWith(
-          "Failed to copy to clipboard:",
-          expect.any(Error),
-        );
-      });
-
-      // Should NOT show copied state when write failed
-      const checkIcon = copyButton.querySelector(".lucide-check");
-      expect(checkIcon).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,
-      });
-
-      const message = createUserMessage("Hello user");
-      render(
-        <TestWrapper>
-          <CopilotChatUserMessage message={message} />
-        </TestWrapper>,
-      );
-
-      const copyButton = screen.getByTestId("copilot-user-copy-button");
-      fireEvent.click(copyButton);
-
-      await waitFor(() => {
-        expect(writeTextMock).toHaveBeenCalledWith("Hello user");
-      });
-
-      await waitFor(() => {
-        const checkIcon = copyButton.querySelector(".lucide-check");
-        expect(checkIcon).not.toBeNull();
-      });
-    });
-
-    it("does NOT show copied state when clipboard API is unavailable", async () => {
-      Object.defineProperty(navigator, "clipboard", {
-        value: undefined,
-        writable: true,
-        configurable: true,
-      });
-
-      const message = createUserMessage("Hello user");
-      render(
-        <TestWrapper>
-          <CopilotChatUserMessage message={message} />
-        </TestWrapper>,
-      );
-
-      const copyButton = screen.getByTestId("copilot-user-copy-button");
-      fireEvent.click(copyButton);
-
-      await new Promise((r) => setTimeout(r, 50));
-
-      const checkIcon = copyButton.querySelector(".lucide-check");
-      expect(checkIcon).toBeNull();
-      const copyIcon = copyButton.querySelector(".lucide-copy");
-      expect(copyIcon).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(() => {});
-
-      const message = createUserMessage("Hello user");
-      render(
-        <TestWrapper>
-          <CopilotChatUserMessage message={message} />
-        </TestWrapper>,
-      );
-
-      const copyButton = screen.getByTestId("copilot-user-copy-button");
-      fireEvent.click(copyButton);
-
-      await waitFor(() => {
-        expect(writeTextMock).toHaveBeenCalled();
-      });
-
-      await waitFor(() => {
-        expect(consoleSpy).toHaveBeenCalledWith(
-          "Failed to copy to clipboard:",
-          expect.any(Error),
-        );
-      });
-
-      // Should NOT show copied state when write failed
-      const checkIcon = copyButton.querySelector(".lucide-check");
-      expect(checkIcon).toBeNull();
-
-      consoleSpy.mockRestore();
-    });
-  });
-});

package/src/v2/components/chat/__tests__/CopilotChatCssClasses.test.tsx

@@ -1,107 +0,0 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
-import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
-import CopilotChatMessageView from "../CopilotChatMessageView";
-import { CopilotChatAssistantMessage } from "../CopilotChatAssistantMessage";
-import { CopilotChatUserMessage } from "../CopilotChatUserMessage";
-import { CopilotChatInput } from "../CopilotChatInput";
-import { CopilotModalHeader } from "../CopilotModalHeader";
-import { CopilotChatToggleButton } from "../CopilotChatToggleButton";
-import { CopilotChatView } from "../CopilotChatView";
-import { AssistantMessage, Message, UserMessage } from "@ag-ui/core";
-
-const TEST_THREAD_ID = "test-thread";
-
-const renderWithProvider = (component: React.ReactElement) => {
-  return render(
-    <CopilotKitProvider>
-      <CopilotChatConfigurationProvider threadId={TEST_THREAD_ID}>
-        {component}
-      </CopilotChatConfigurationProvider>
-    </CopilotKitProvider>,
-  );
-};
-
-describe("v2 CopilotChat CSS class compatibility with v1", () => {
-  describe("CopilotChatMessageView", () => {
-    it("includes copilotKitMessages class", () => {
-      const messages: Message[] = [];
-
-      renderWithProvider(<CopilotChatMessageView messages={messages} />);
-
-      const messageList = screen.getByTestId("copilot-message-list");
-      expect(messageList.className).toContain("copilotKitMessages");
-    });
-  });
-
-  describe("CopilotChatAssistantMessage", () => {
-    it("includes copilotKitMessage and copilotKitAssistantMessage classes", () => {
-      const message: AssistantMessage = {
-        role: "assistant",
-        content: "Hello from the assistant",
-        id: "test-assistant-1",
-      };
-
-      renderWithProvider(<CopilotChatAssistantMessage message={message} />);
-
-      const el = screen.getByTestId("copilot-assistant-message");
-      expect(el.className).toContain("copilotKitMessage");
-      expect(el.className).toContain("copilotKitAssistantMessage");
-    });
-  });
-
-  describe("CopilotChatUserMessage", () => {
-    it("includes copilotKitMessage and copilotKitUserMessage classes", () => {
-      const message: UserMessage = {
-        role: "user",
-        content: "Hello from the user",
-        id: "test-user-1",
-      };
-
-      renderWithProvider(<CopilotChatUserMessage message={message} />);
-
-      const el = screen.getByTestId("copilot-user-message");
-      expect(el.className).toContain("copilotKitMessage");
-      expect(el.className).toContain("copilotKitUserMessage");
-    });
-  });
-
-  describe("CopilotChatInput", () => {
-    it("includes copilotKitInput class", () => {
-      renderWithProvider(<CopilotChatInput />);
-
-      const el = screen.getByTestId("copilot-chat-input");
-      expect(el.className).toContain("copilotKitInput");
-    });
-  });
-
-  describe("CopilotModalHeader", () => {
-    it("includes copilotKitHeader class", () => {
-      renderWithProvider(<CopilotModalHeader />);
-
-      const el = screen.getByTestId("copilot-modal-header");
-      expect(el.className).toContain("copilotKitHeader");
-    });
-  });
-
-  describe("CopilotChatToggleButton", () => {
-    it("includes copilotKitButton class", () => {
-      renderWithProvider(<CopilotChatToggleButton />);
-
-      const el = screen.getByTestId("copilot-chat-toggle");
-      expect(el.className).toContain("copilotKitButton");
-    });
-  });
-
-  describe("CopilotChatView", () => {
-    it("includes copilotKitChat class", () => {
-      renderWithProvider(
-        <CopilotChatView messages={[]} welcomeScreen={false} />,
-      );
-
-      const el = screen.getByTestId("copilot-chat");
-      expect(el.className).toContain("copilotKitChat");
-    });
-  });
-});