@copilotkit/react-core 1.57.3 → 1.58.0-canary.thread-id-propagation

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

@@ -1,624 +0,0 @@
-import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
-import { describe, it, expect, vi } from "vitest";
-import { CopilotChatAssistantMessage } from "../CopilotChatAssistantMessage";
-import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
-import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
-import { AssistantMessage } from "@ag-ui/core";
-
-// Wrapper to provide required context
-const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <CopilotKitProvider>
-    <CopilotChatConfigurationProvider threadId="test-thread">
-      {children}
-    </CopilotChatConfigurationProvider>
-  </CopilotKitProvider>
-);
-
-const createAssistantMessage = (content: string): AssistantMessage => ({
-  id: "msg-1",
-  role: "assistant",
-  content,
-});
-
-describe("CopilotChatAssistantMessage Slot System E2E Tests", () => {
-  // ============================================================================
-  // 1. TAILWIND CLASS TESTS
-  // ============================================================================
-  describe("1. Tailwind Class Slot Override", () => {
-    describe("markdownRenderer slot", () => {
-      it("should apply tailwind class string to markdownRenderer", () => {
-        const message = createAssistantMessage("Hello world");
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatAssistantMessage
-              message={message}
-              markdownRenderer="bg-blue-100 rounded-lg p-4"
-            />
-          </TestWrapper>,
-        );
-
-        const markdown = container.querySelector(".bg-blue-100");
-        expect(markdown).toBeDefined();
-        expect(markdown?.classList.contains("rounded-lg")).toBe(true);
-      });
-    });
-
-    describe("toolbar slot", () => {
-      it("should apply tailwind class string to toolbar", () => {
-        const message = createAssistantMessage("Hello world");
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatAssistantMessage
-              message={message}
-              toolbar="bg-gray-100 border-t"
-            />
-          </TestWrapper>,
-        );
-
-        const toolbar = container.querySelector(".bg-gray-100");
-        expect(toolbar).toBeDefined();
-        expect(toolbar?.classList.contains("border-t")).toBe(true);
-      });
-    });
-
-    describe("copyButton slot", () => {
-      it("should apply tailwind class string to copyButton", () => {
-        const message = createAssistantMessage("Hello world");
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatAssistantMessage
-              message={message}
-              copyButton="text-green-500 hover:text-green-700"
-            />
-          </TestWrapper>,
-        );
-
-        const copyBtn = container.querySelector(".text-green-500");
-        expect(copyBtn).toBeDefined();
-      });
-    });
-
-    describe("thumbsUpButton slot", () => {
-      it("should apply tailwind class string to thumbsUpButton", () => {
-        const onThumbsUp = vi.fn();
-        const message = createAssistantMessage("Hello world");
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatAssistantMessage
-              message={message}
-              onThumbsUp={onThumbsUp}
-              thumbsUpButton="text-blue-500"
-            />
-          </TestWrapper>,
-        );
-
-        const thumbsUp = container.querySelector(".text-blue-500");
-        expect(thumbsUp).toBeDefined();
-      });
-    });
-
-    describe("thumbsDownButton slot", () => {
-      it("should apply tailwind class string to thumbsDownButton", () => {
-        const onThumbsDown = vi.fn();
-        const message = createAssistantMessage("Hello world");
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatAssistantMessage
-              message={message}
-              onThumbsDown={onThumbsDown}
-              thumbsDownButton="text-red-500"
-            />
-          </TestWrapper>,
-        );
-
-        const thumbsDown = container.querySelector(".text-red-500");
-        expect(thumbsDown).toBeDefined();
-      });
-    });
-
-    describe("readAloudButton slot", () => {
-      it("should apply tailwind class string to readAloudButton", () => {
-        const onReadAloud = vi.fn();
-        const message = createAssistantMessage("Hello world");
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatAssistantMessage
-              message={message}
-              onReadAloud={onReadAloud}
-              readAloudButton="text-purple-500"
-            />
-          </TestWrapper>,
-        );
-
-        const readAloud = container.querySelector(".text-purple-500");
-        expect(readAloud).toBeDefined();
-      });
-    });
-
-    describe("regenerateButton slot", () => {
-      it("should apply tailwind class string to regenerateButton", () => {
-        const onRegenerate = vi.fn();
-        const message = createAssistantMessage("Hello world");
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatAssistantMessage
-              message={message}
-              onRegenerate={onRegenerate}
-              regenerateButton="text-orange-500"
-            />
-          </TestWrapper>,
-        );
-
-        const regenerate = container.querySelector(".text-orange-500");
-        expect(regenerate).toBeDefined();
-      });
-    });
-
-    describe("toolCallsView slot", () => {
-      it("should apply tailwind class string to toolCallsView", () => {
-        const message: AssistantMessage = {
-          ...createAssistantMessage("Hello"),
-          toolCalls: [
-            {
-              id: "tc-1",
-              type: "function",
-              function: { name: "test_tool", arguments: "{}" },
-            },
-          ],
-        };
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatAssistantMessage
-              message={message}
-              toolCallsView="bg-yellow-50 p-2"
-            />
-          </TestWrapper>,
-        );
-
-        const toolCalls = container.querySelector(".bg-yellow-50");
-        // May not be visible if no tool calls rendered
-        if (toolCalls) {
-          expect(toolCalls.classList.contains("p-2")).toBe(true);
-        }
-      });
-    });
-  });
-
-  // ============================================================================
-  // 2. PROPERTY PASSING TESTS
-  // ============================================================================
-  describe("2. Property Passing (onClick, disabled, etc.)", () => {
-    describe("markdownRenderer slot", () => {
-      it("should pass custom props to markdownRenderer", () => {
-        const message = createAssistantMessage("Hello world");
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatAssistantMessage
-              message={message}
-              markdownRenderer={{ "data-testid": "custom-markdown" }}
-            />
-          </TestWrapper>,
-        );
-
-        const markdown = screen.queryByTestId("custom-markdown");
-        expect(markdown).toBeDefined();
-      });
-    });
-
-    describe("toolbar slot", () => {
-      it("should pass custom onClick to toolbar", () => {
-        const onClick = vi.fn();
-        const message = createAssistantMessage("Hello world");
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatAssistantMessage
-              message={message}
-              toolbar={{ onClick, "data-testid": "custom-toolbar" }}
-            />
-          </TestWrapper>,
-        );
-
-        const toolbar = screen.queryByTestId("custom-toolbar");
-        if (toolbar) {
-          fireEvent.click(toolbar);
-          expect(onClick).toHaveBeenCalled();
-        }
-      });
-    });
-
-    describe("copyButton slot", () => {
-      it("should pass custom onClick that wraps default behavior", () => {
-        const customOnClick = vi.fn();
-        const message = createAssistantMessage("Hello world");
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatAssistantMessage
-              message={message}
-              copyButton={{ onClick: customOnClick }}
-            />
-          </TestWrapper>,
-        );
-
-        // Find copy button by aria-label
-        const copyBtn = container.querySelector('button[aria-label*="Copy"]');
-        if (copyBtn) {
-          fireEvent.click(copyBtn);
-          expect(customOnClick).toHaveBeenCalled();
-        }
-      });
-
-      it("should support disabled state on copyButton", () => {
-        const message = createAssistantMessage("Hello world");
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatAssistantMessage
-              message={message}
-              copyButton={{ disabled: true }}
-            />
-          </TestWrapper>,
-        );
-
-        const copyBtn = container.querySelector('button[aria-label*="Copy"]');
-        if (copyBtn) {
-          expect(copyBtn.hasAttribute("disabled")).toBe(true);
-        }
-      });
-    });
-
-    describe("thumbsUpButton slot", () => {
-      it("should call custom onClick on thumbsUpButton", () => {
-        const customOnClick = vi.fn();
-        const onThumbsUp = vi.fn();
-        const message = createAssistantMessage("Hello world");
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatAssistantMessage
-              message={message}
-              onThumbsUp={onThumbsUp}
-              thumbsUpButton={{ onClick: customOnClick }}
-            />
-          </TestWrapper>,
-        );
-
-        const thumbsUpBtn = container.querySelector(
-          'button[aria-label*="Thumbs up"]',
-        );
-        if (thumbsUpBtn) {
-          fireEvent.click(thumbsUpBtn);
-          expect(customOnClick).toHaveBeenCalled();
-        }
-      });
-    });
-
-    describe("thumbsDownButton slot", () => {
-      it("should call custom onClick on thumbsDownButton", () => {
-        const customOnClick = vi.fn();
-        const onThumbsDown = vi.fn();
-        const message = createAssistantMessage("Hello world");
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatAssistantMessage
-              message={message}
-              onThumbsDown={onThumbsDown}
-              thumbsDownButton={{ onClick: customOnClick }}
-            />
-          </TestWrapper>,
-        );
-
-        const thumbsDownBtn = container.querySelector(
-          'button[aria-label*="Thumbs down"]',
-        );
-        if (thumbsDownBtn) {
-          fireEvent.click(thumbsDownBtn);
-          expect(customOnClick).toHaveBeenCalled();
-        }
-      });
-    });
-
-    describe("readAloudButton slot", () => {
-      it("should call custom onClick on readAloudButton", () => {
-        const customOnClick = vi.fn();
-        const onReadAloud = vi.fn();
-        const message = createAssistantMessage("Hello world");
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatAssistantMessage
-              message={message}
-              onReadAloud={onReadAloud}
-              readAloudButton={{ onClick: customOnClick }}
-            />
-          </TestWrapper>,
-        );
-
-        const readAloudBtn = container.querySelector(
-          'button[aria-label*="Read"]',
-        );
-        if (readAloudBtn) {
-          fireEvent.click(readAloudBtn);
-          expect(customOnClick).toHaveBeenCalled();
-        }
-      });
-    });
-
-    describe("regenerateButton slot", () => {
-      it("should call custom onClick on regenerateButton", () => {
-        const customOnClick = vi.fn();
-        const onRegenerate = vi.fn();
-        const message = createAssistantMessage("Hello world");
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatAssistantMessage
-              message={message}
-              onRegenerate={onRegenerate}
-              regenerateButton={{ onClick: customOnClick }}
-            />
-          </TestWrapper>,
-        );
-
-        const regenerateBtn = container.querySelector(
-          'button[aria-label*="Regenerate"]',
-        );
-        if (regenerateBtn) {
-          fireEvent.click(regenerateBtn);
-          expect(customOnClick).toHaveBeenCalled();
-        }
-      });
-    });
-  });
-
-  // ============================================================================
-  // 3. CUSTOM COMPONENT TESTS
-  // ============================================================================
-  describe("3. Custom Component Receiving Sub-components", () => {
-    it("should allow custom component for markdownRenderer", () => {
-      const CustomMarkdown: React.FC<{ content: string }> = ({ content }) => (
-        <div data-testid="custom-markdown-component">
-          {content.toUpperCase()}
-        </div>
-      );
-
-      const message = createAssistantMessage("hello");
-      render(
-        <TestWrapper>
-          <CopilotChatAssistantMessage
-            message={message}
-            markdownRenderer={CustomMarkdown as any}
-          />
-        </TestWrapper>,
-      );
-
-      const custom = screen.queryByTestId("custom-markdown-component");
-      expect(custom).toBeDefined();
-      expect(custom?.textContent).toBe("HELLO");
-    });
-
-    it("should allow custom component for toolbar", () => {
-      const CustomToolbar: React.FC<React.PropsWithChildren> = ({
-        children,
-      }) => (
-        <div data-testid="custom-toolbar-component">
-          <span>Custom Toolbar:</span>
-          {children}
-        </div>
-      );
-
-      const message = createAssistantMessage("Hello");
-      render(
-        <TestWrapper>
-          <CopilotChatAssistantMessage
-            message={message}
-            toolbar={CustomToolbar as any}
-          />
-        </TestWrapper>,
-      );
-
-      const custom = screen.queryByTestId("custom-toolbar-component");
-      expect(custom).toBeDefined();
-      expect(custom?.textContent).toContain("Custom Toolbar");
-    });
-
-    it("should allow custom component for copyButton", () => {
-      const CustomCopyButton: React.FC<
-        React.ButtonHTMLAttributes<HTMLButtonElement>
-      > = (props) => (
-        <button data-testid="custom-copy" {...props}>
-          Custom Copy
-        </button>
-      );
-
-      const message = createAssistantMessage("Hello");
-      render(
-        <TestWrapper>
-          <CopilotChatAssistantMessage
-            message={message}
-            copyButton={CustomCopyButton as any}
-          />
-        </TestWrapper>,
-      );
-
-      const custom = screen.queryByTestId("custom-copy");
-      expect(custom).toBeDefined();
-    });
-  });
-
-  // ============================================================================
-  // 4. CHILDREN RENDER FUNCTION (DRILL-DOWN) TESTS
-  // ============================================================================
-  describe("4. Children Render Function for Drill-down", () => {
-    it("should provide all bound sub-components via children render function", () => {
-      const message = createAssistantMessage("Hello world");
-      const childrenFn = vi.fn((props) => (
-        <div data-testid="children-render">
-          <div data-testid="received-markdown">{props.markdownRenderer}</div>
-          <div data-testid="received-toolbar">{props.toolbar}</div>
-          <div data-testid="received-copy">{props.copyButton}</div>
-          <div data-testid="received-thumbs-up">{props.thumbsUpButton}</div>
-          <div data-testid="received-thumbs-down">{props.thumbsDownButton}</div>
-          <div data-testid="received-read-aloud">{props.readAloudButton}</div>
-          <div data-testid="received-regenerate">{props.regenerateButton}</div>
-          <div data-testid="received-tool-calls">{props.toolCallsView}</div>
-        </div>
-      ));
-
-      render(
-        <TestWrapper>
-          <CopilotChatAssistantMessage
-            message={message}
-            onThumbsUp={vi.fn()}
-            onThumbsDown={vi.fn()}
-            onReadAloud={vi.fn()}
-            onRegenerate={vi.fn()}
-          >
-            {childrenFn}
-          </CopilotChatAssistantMessage>
-        </TestWrapper>,
-      );
-
-      expect(childrenFn).toHaveBeenCalled();
-      const callArgs = childrenFn.mock.calls[0][0];
-      expect(callArgs).toHaveProperty("markdownRenderer");
-      expect(callArgs).toHaveProperty("toolbar");
-      expect(callArgs).toHaveProperty("copyButton");
-      expect(callArgs).toHaveProperty("thumbsUpButton");
-      expect(callArgs).toHaveProperty("thumbsDownButton");
-      expect(callArgs).toHaveProperty("readAloudButton");
-      expect(callArgs).toHaveProperty("regenerateButton");
-      expect(callArgs).toHaveProperty("toolCallsView");
-      expect(callArgs).toHaveProperty("message");
-
-      expect(screen.queryByTestId("children-render")).toBeDefined();
-    });
-
-    it("should pass message and other props through children render function", () => {
-      const message = createAssistantMessage("Test message");
-      const childrenFn = vi.fn(() => <div />);
-
-      render(
-        <TestWrapper>
-          <CopilotChatAssistantMessage
-            message={message}
-            isRunning={true}
-            toolbarVisible={false}
-          >
-            {childrenFn}
-          </CopilotChatAssistantMessage>
-        </TestWrapper>,
-      );
-
-      const callArgs = childrenFn.mock.calls[0][0];
-      expect(callArgs.message).toBe(message);
-      expect(callArgs.isRunning).toBe(true);
-      expect(callArgs.toolbarVisible).toBe(false);
-    });
-  });
-
-  // ============================================================================
-  // 5. CLASSNAME OVERRIDE TESTS
-  // ============================================================================
-  describe("5. className Override with Tailwind Strings", () => {
-    it("should override root className while preserving default prose classes", () => {
-      const message = createAssistantMessage("Hello");
-      const { container } = render(
-        <TestWrapper>
-          <CopilotChatAssistantMessage
-            message={message}
-            className="custom-root-class bg-custom"
-          />
-        </TestWrapper>,
-      );
-
-      const root = container.querySelector(".custom-root-class");
-      expect(root).toBeDefined();
-      // Prose classes are on an inner div wrapping the markdown content
-      const proseDiv = root?.querySelector(".cpk\\:prose");
-      expect(proseDiv).toBeDefined();
-    });
-
-    it("should allow tailwind utilities to override default styles", () => {
-      const message = createAssistantMessage("Hello");
-      const { container } = render(
-        <TestWrapper>
-          <CopilotChatAssistantMessage message={message} className="max-w-sm" />
-        </TestWrapper>,
-      );
-
-      // max-w-sm should override the default max-w-full
-      const root = container.querySelector(".max-w-sm");
-      expect(root).toBeDefined();
-    });
-
-    it("should merge multiple slot classNames correctly", () => {
-      const message = createAssistantMessage("Hello");
-      const { container } = render(
-        <TestWrapper>
-          <CopilotChatAssistantMessage
-            message={message}
-            className="root-custom"
-            toolbar="toolbar-custom"
-            copyButton="copy-custom"
-          />
-        </TestWrapper>,
-      );
-
-      expect(container.querySelector(".root-custom")).toBeDefined();
-      expect(container.querySelector(".toolbar-custom")).toBeDefined();
-      expect(container.querySelector(".copy-custom")).toBeDefined();
-    });
-  });
-
-  // ============================================================================
-  // 6. INTEGRATION / RECURSIVE SLOT TESTS
-  // ============================================================================
-  describe("6. Integration and Recursive Slot Application", () => {
-    it("should correctly render all slots with mixed customization", () => {
-      const onThumbsUp = vi.fn();
-      const onThumbsDown = vi.fn();
-      const message = createAssistantMessage("Hello world");
-
-      const { container } = render(
-        <TestWrapper>
-          <CopilotChatAssistantMessage
-            message={message}
-            onThumbsUp={onThumbsUp}
-            onThumbsDown={onThumbsDown}
-            markdownRenderer="markdown-style"
-            toolbar="toolbar-style"
-            copyButton="copy-style"
-            thumbsUpButton="thumbs-up-style"
-            thumbsDownButton="thumbs-down-style"
-          />
-        </TestWrapper>,
-      );
-
-      expect(container.querySelector(".markdown-style")).toBeDefined();
-      expect(container.querySelector(".toolbar-style")).toBeDefined();
-      expect(container.querySelector(".copy-style")).toBeDefined();
-      expect(container.querySelector(".thumbs-up-style")).toBeDefined();
-      expect(container.querySelector(".thumbs-down-style")).toBeDefined();
-    });
-
-    it("should work with property objects and class strings mixed", () => {
-      const onClick = vi.fn();
-      const message = createAssistantMessage("Hello world");
-
-      const { container } = render(
-        <TestWrapper>
-          <CopilotChatAssistantMessage
-            message={message}
-            markdownRenderer="text-lg"
-            toolbar={{ onClick, className: "flex gap-2" }}
-          />
-        </TestWrapper>,
-      );
-
-      expect(container.querySelector(".text-lg")).toBeDefined();
-
-      const toolbar = container.querySelector(".flex.gap-2");
-      if (toolbar) {
-        fireEvent.click(toolbar);
-        expect(onClick).toHaveBeenCalled();
-      }
-    });
-  });
-});