@copilotkit/react-core 1.54.1 → 1.55.0-next.7

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

@@ -0,0 +1,621 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { CopilotChatUserMessage } from "../CopilotChatUserMessage";
+import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
+import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
+import { UserMessage } 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 createUserMessage = (content: string): UserMessage => ({
+  id: "msg-1",
+  role: "user",
+  content,
+});
+
+describe("CopilotChatUserMessage Slot System E2E Tests", () => {
+  // ============================================================================
+  // 1. TAILWIND CLASS TESTS
+  // ============================================================================
+  describe("1. Tailwind Class Slot Override", () => {
+    describe("messageRenderer slot", () => {
+      it("should apply tailwind class string to messageRenderer", () => {
+        const message = createUserMessage("Hello");
+        const { container } = render(
+          <TestWrapper>
+            <CopilotChatUserMessage
+              message={message}
+              messageRenderer="bg-blue-500 text-white rounded-xl"
+            />
+          </TestWrapper>,
+        );
+
+        const renderer = container.querySelector(".bg-blue-500");
+        expect(renderer).toBeDefined();
+        expect(renderer?.classList.contains("text-white")).toBe(true);
+        expect(renderer?.classList.contains("rounded-xl")).toBe(true);
+      });
+    });
+
+    describe("toolbar slot", () => {
+      it("should apply tailwind class string to toolbar", () => {
+        const message = createUserMessage("Hello");
+        const { container } = render(
+          <TestWrapper>
+            <CopilotChatUserMessage
+              message={message}
+              toolbar="bg-gray-50 border rounded"
+            />
+          </TestWrapper>,
+        );
+
+        const toolbar = container.querySelector(".bg-gray-50");
+        expect(toolbar).toBeDefined();
+        expect(toolbar?.classList.contains("border")).toBe(true);
+      });
+    });
+
+    describe("copyButton slot", () => {
+      it("should apply tailwind class string to copyButton", () => {
+        const message = createUserMessage("Hello");
+        const { container } = render(
+          <TestWrapper>
+            <CopilotChatUserMessage
+              message={message}
+              copyButton="text-indigo-500 hover:text-indigo-700"
+            />
+          </TestWrapper>,
+        );
+
+        const copyBtn = container.querySelector(".text-indigo-500");
+        expect(copyBtn).toBeDefined();
+      });
+    });
+
+    describe("editButton slot", () => {
+      it("should apply tailwind class string to editButton", () => {
+        const onEditMessage = vi.fn();
+        const message = createUserMessage("Hello");
+        const { container } = render(
+          <TestWrapper>
+            <CopilotChatUserMessage
+              message={message}
+              onEditMessage={onEditMessage}
+              editButton="text-yellow-500"
+            />
+          </TestWrapper>,
+        );
+
+        const editBtn = container.querySelector(".text-yellow-500");
+        expect(editBtn).toBeDefined();
+      });
+    });
+
+    describe("branchNavigation slot", () => {
+      it("should apply tailwind class string to branchNavigation", () => {
+        const onSwitchToBranch = vi.fn();
+        const message = createUserMessage("Hello");
+        const { container } = render(
+          <TestWrapper>
+            <CopilotChatUserMessage
+              message={message}
+              branchIndex={0}
+              numberOfBranches={3}
+              onSwitchToBranch={onSwitchToBranch}
+              branchNavigation="bg-slate-100 px-2 py-1"
+            />
+          </TestWrapper>,
+        );
+
+        const branchNav = container.querySelector(".bg-slate-100");
+        expect(branchNav).toBeDefined();
+        expect(branchNav?.classList.contains("px-2")).toBe(true);
+      });
+    });
+  });
+
+  // ============================================================================
+  // 2. PROPERTY PASSING TESTS
+  // ============================================================================
+  describe("2. Property Passing (onClick, disabled, etc.)", () => {
+    describe("messageRenderer slot", () => {
+      it("should pass custom props to messageRenderer", () => {
+        const message = createUserMessage("Hello");
+        render(
+          <TestWrapper>
+            <CopilotChatUserMessage
+              message={message}
+              messageRenderer={{ "data-testid": "custom-message-renderer" }}
+            />
+          </TestWrapper>,
+        );
+
+        const renderer = screen.queryByTestId("custom-message-renderer");
+        expect(renderer).toBeDefined();
+      });
+    });
+
+    describe("toolbar slot", () => {
+      it("should pass custom onClick to toolbar", () => {
+        const onClick = vi.fn();
+        const message = createUserMessage("Hello");
+        render(
+          <TestWrapper>
+            <CopilotChatUserMessage
+              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 = createUserMessage("Hello");
+        const { container } = render(
+          <TestWrapper>
+            <CopilotChatUserMessage
+              message={message}
+              copyButton={{ onClick: customOnClick }}
+            />
+          </TestWrapper>,
+        );
+
+        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 = createUserMessage("Hello");
+        const { container } = render(
+          <TestWrapper>
+            <CopilotChatUserMessage
+              message={message}
+              copyButton={{ disabled: true }}
+            />
+          </TestWrapper>,
+        );
+
+        const copyBtn = container.querySelector('button[aria-label*="Copy"]');
+        if (copyBtn) {
+          expect(copyBtn.hasAttribute("disabled")).toBe(true);
+        }
+      });
+    });
+
+    describe("editButton slot", () => {
+      it("should call custom onClick on editButton", () => {
+        const customOnClick = vi.fn();
+        const onEditMessage = vi.fn();
+        const message = createUserMessage("Hello");
+        const { container } = render(
+          <TestWrapper>
+            <CopilotChatUserMessage
+              message={message}
+              onEditMessage={onEditMessage}
+              editButton={{ onClick: customOnClick }}
+            />
+          </TestWrapper>,
+        );
+
+        const editBtn = container.querySelector('button[aria-label*="Edit"]');
+        if (editBtn) {
+          fireEvent.click(editBtn);
+          expect(customOnClick).toHaveBeenCalled();
+        }
+      });
+
+      it("should support disabled state on editButton", () => {
+        const onEditMessage = vi.fn();
+        const message = createUserMessage("Hello");
+        const { container } = render(
+          <TestWrapper>
+            <CopilotChatUserMessage
+              message={message}
+              onEditMessage={onEditMessage}
+              editButton={{ disabled: true }}
+            />
+          </TestWrapper>,
+        );
+
+        const editBtn = container.querySelector('button[aria-label*="Edit"]');
+        if (editBtn) {
+          expect(editBtn.hasAttribute("disabled")).toBe(true);
+        }
+      });
+    });
+
+    describe("branchNavigation slot", () => {
+      it("should pass custom props to branchNavigation", () => {
+        const onSwitchToBranch = vi.fn();
+        const message = createUserMessage("Hello");
+        render(
+          <TestWrapper>
+            <CopilotChatUserMessage
+              message={message}
+              branchIndex={1}
+              numberOfBranches={3}
+              onSwitchToBranch={onSwitchToBranch}
+              branchNavigation={{ "data-testid": "custom-branch-nav" }}
+            />
+          </TestWrapper>,
+        );
+
+        const branchNav = screen.queryByTestId("custom-branch-nav");
+        expect(branchNav).toBeDefined();
+      });
+    });
+  });
+
+  // ============================================================================
+  // 3. CUSTOM COMPONENT TESTS
+  // ============================================================================
+  describe("3. Custom Component Receiving Sub-components", () => {
+    it("should allow custom component for messageRenderer", () => {
+      const CustomRenderer: React.FC<{ content: string }> = ({ content }) => (
+        <div data-testid="custom-renderer">[{content}]</div>
+      );
+
+      const message = createUserMessage("Hello");
+      render(
+        <TestWrapper>
+          <CopilotChatUserMessage
+            message={message}
+            messageRenderer={CustomRenderer as any}
+          />
+        </TestWrapper>,
+      );
+
+      const custom = screen.queryByTestId("custom-renderer");
+      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>Actions:</span>
+          {children}
+        </div>
+      );
+
+      const message = createUserMessage("Hello");
+      render(
+        <TestWrapper>
+          <CopilotChatUserMessage
+            message={message}
+            toolbar={CustomToolbar as any}
+          />
+        </TestWrapper>,
+      );
+
+      const custom = screen.queryByTestId("custom-toolbar-component");
+      expect(custom).toBeDefined();
+      expect(custom?.textContent).toContain("Actions");
+    });
+
+    it("should allow custom component for copyButton", () => {
+      const CustomCopyButton: React.FC<
+        React.ButtonHTMLAttributes<HTMLButtonElement>
+      > = (props) => (
+        <button data-testid="custom-copy-btn" {...props}>
+          Copy It
+        </button>
+      );
+
+      const message = createUserMessage("Hello");
+      render(
+        <TestWrapper>
+          <CopilotChatUserMessage
+            message={message}
+            copyButton={CustomCopyButton as any}
+          />
+        </TestWrapper>,
+      );
+
+      const custom = screen.queryByTestId("custom-copy-btn");
+      expect(custom).toBeDefined();
+      expect(custom?.textContent).toBe("Copy It");
+    });
+
+    it("should allow custom component for editButton", () => {
+      const CustomEditButton: React.FC<
+        React.ButtonHTMLAttributes<HTMLButtonElement>
+      > = (props) => (
+        <button data-testid="custom-edit-btn" {...props}>
+          Modify
+        </button>
+      );
+
+      const onEditMessage = vi.fn();
+      const message = createUserMessage("Hello");
+      render(
+        <TestWrapper>
+          <CopilotChatUserMessage
+            message={message}
+            onEditMessage={onEditMessage}
+            editButton={CustomEditButton as any}
+          />
+        </TestWrapper>,
+      );
+
+      const custom = screen.queryByTestId("custom-edit-btn");
+      expect(custom).toBeDefined();
+    });
+
+    it("should allow custom component for branchNavigation", () => {
+      const CustomBranchNav: React.FC<{
+        currentBranch?: number;
+        numberOfBranches?: number;
+      }> = ({ currentBranch = 0, numberOfBranches = 1 }) => (
+        <div data-testid="custom-branch-nav">
+          Branch {currentBranch + 1} of {numberOfBranches}
+        </div>
+      );
+
+      const onSwitchToBranch = vi.fn();
+      const message = createUserMessage("Hello");
+      render(
+        <TestWrapper>
+          <CopilotChatUserMessage
+            message={message}
+            branchIndex={1}
+            numberOfBranches={3}
+            onSwitchToBranch={onSwitchToBranch}
+            branchNavigation={CustomBranchNav as any}
+          />
+        </TestWrapper>,
+      );
+
+      const custom = screen.queryByTestId("custom-branch-nav");
+      expect(custom).toBeDefined();
+      expect(custom?.textContent).toBe("Branch 2 of 3");
+    });
+  });
+
+  // ============================================================================
+  // 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 = createUserMessage("Hello");
+      const onEditMessage = vi.fn();
+      const onSwitchToBranch = vi.fn();
+      const childrenFn = vi.fn((props) => (
+        <div data-testid="children-render">
+          <div data-testid="received-renderer">{props.messageRenderer}</div>
+          <div data-testid="received-toolbar">{props.toolbar}</div>
+          <div data-testid="received-copy">{props.copyButton}</div>
+          <div data-testid="received-edit">{props.editButton}</div>
+          <div data-testid="received-branch">{props.branchNavigation}</div>
+        </div>
+      ));
+
+      render(
+        <TestWrapper>
+          <CopilotChatUserMessage
+            message={message}
+            onEditMessage={onEditMessage}
+            branchIndex={0}
+            numberOfBranches={2}
+            onSwitchToBranch={onSwitchToBranch}
+          >
+            {childrenFn}
+          </CopilotChatUserMessage>
+        </TestWrapper>,
+      );
+
+      expect(childrenFn).toHaveBeenCalled();
+      const callArgs = childrenFn.mock.calls[0][0];
+      expect(callArgs).toHaveProperty("messageRenderer");
+      expect(callArgs).toHaveProperty("toolbar");
+      expect(callArgs).toHaveProperty("copyButton");
+      expect(callArgs).toHaveProperty("editButton");
+      expect(callArgs).toHaveProperty("branchNavigation");
+      expect(callArgs).toHaveProperty("message");
+
+      expect(screen.queryByTestId("children-render")).toBeDefined();
+    });
+
+    it("should pass message and branch info through children render function", () => {
+      const message = createUserMessage("Test message");
+      const childrenFn = vi.fn(() => <div />);
+
+      render(
+        <TestWrapper>
+          <CopilotChatUserMessage
+            message={message}
+            branchIndex={1}
+            numberOfBranches={3}
+          >
+            {childrenFn}
+          </CopilotChatUserMessage>
+        </TestWrapper>,
+      );
+
+      const callArgs = childrenFn.mock.calls[0][0];
+      expect(callArgs.message).toBe(message);
+      expect(callArgs.branchIndex).toBe(1);
+      expect(callArgs.numberOfBranches).toBe(3);
+    });
+
+    it("should allow reorganizing sub-components in children render", () => {
+      const message = createUserMessage("Hello");
+      const onEditMessage = vi.fn();
+
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChatUserMessage
+            message={message}
+            onEditMessage={onEditMessage}
+          >
+            {({ messageRenderer, toolbar, copyButton, editButton }) => (
+              <div data-testid="custom-layout">
+                <div className="message-area">{messageRenderer}</div>
+                <div className="actions-row">
+                  {editButton}
+                  {copyButton}
+                </div>
+                <div className="toolbar-area">{toolbar}</div>
+              </div>
+            )}
+          </CopilotChatUserMessage>
+        </TestWrapper>,
+      );
+
+      const customLayout = screen.queryByTestId("custom-layout");
+      expect(customLayout).toBeDefined();
+      expect(container.querySelector(".message-area")).toBeDefined();
+      expect(container.querySelector(".actions-row")).toBeDefined();
+      expect(container.querySelector(".toolbar-area")).toBeDefined();
+    });
+  });
+
+  // ============================================================================
+  // 5. CLASSNAME OVERRIDE TESTS
+  // ============================================================================
+  describe("5. className Override with Tailwind Strings", () => {
+    it("should override root className while preserving default layout classes", () => {
+      const message = createUserMessage("Hello");
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChatUserMessage
+            message={message}
+            className="custom-root-class bg-purple-50"
+          />
+        </TestWrapper>,
+      );
+
+      const root = container.querySelector(".custom-root-class");
+      expect(root).toBeDefined();
+      expect(root?.classList.contains("bg-purple-50")).toBe(true);
+    });
+
+    it("should allow tailwind utilities to override default styles", () => {
+      const message = createUserMessage("Hello");
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChatUserMessage message={message} className="pt-0" />
+        </TestWrapper>,
+      );
+
+      // pt-0 should override the default pt-10
+      const root = container.querySelector(".pt-0");
+      expect(root).toBeDefined();
+    });
+
+    it("should merge multiple slot classNames correctly", () => {
+      const onEditMessage = vi.fn();
+      const message = createUserMessage("Hello");
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChatUserMessage
+            message={message}
+            onEditMessage={onEditMessage}
+            className="root-custom"
+            messageRenderer="renderer-custom"
+            toolbar="toolbar-custom"
+            copyButton="copy-custom"
+            editButton="edit-custom"
+          />
+        </TestWrapper>,
+      );
+
+      expect(container.querySelector(".root-custom")).toBeDefined();
+      expect(container.querySelector(".renderer-custom")).toBeDefined();
+      expect(container.querySelector(".toolbar-custom")).toBeDefined();
+      expect(container.querySelector(".copy-custom")).toBeDefined();
+      expect(container.querySelector(".edit-custom")).toBeDefined();
+    });
+  });
+
+  // ============================================================================
+  // 6. INTEGRATION / RECURSIVE SLOT TESTS
+  // ============================================================================
+  describe("6. Integration and Recursive Slot Application", () => {
+    it("should correctly render all slots with mixed customization", () => {
+      const onEditMessage = vi.fn();
+      const onSwitchToBranch = vi.fn();
+      const message = createUserMessage("Hello world");
+
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChatUserMessage
+            message={message}
+            onEditMessage={onEditMessage}
+            branchIndex={0}
+            numberOfBranches={2}
+            onSwitchToBranch={onSwitchToBranch}
+            messageRenderer="renderer-style"
+            toolbar="toolbar-style"
+            copyButton="copy-style"
+            editButton="edit-style"
+            branchNavigation="branch-style"
+          />
+        </TestWrapper>,
+      );
+
+      expect(container.querySelector(".renderer-style")).toBeDefined();
+      expect(container.querySelector(".toolbar-style")).toBeDefined();
+      expect(container.querySelector(".copy-style")).toBeDefined();
+      expect(container.querySelector(".edit-style")).toBeDefined();
+      expect(container.querySelector(".branch-style")).toBeDefined();
+    });
+
+    it("should work with property objects and class strings mixed", () => {
+      const onClick = vi.fn();
+      const message = createUserMessage("Hello world");
+
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChatUserMessage
+            message={message}
+            messageRenderer="text-lg font-bold"
+            toolbar={{ onClick, className: "flex gap-4" }}
+          />
+        </TestWrapper>,
+      );
+
+      expect(container.querySelector(".text-lg")).toBeDefined();
+
+      const toolbar = container.querySelector(".flex.gap-4");
+      if (toolbar) {
+        fireEvent.click(toolbar);
+        expect(onClick).toHaveBeenCalled();
+      }
+    });
+
+    it("should correctly display user message content", () => {
+      const message = createUserMessage("This is my message content");
+
+      render(
+        <TestWrapper>
+          <CopilotChatUserMessage message={message} />
+        </TestWrapper>,
+      );
+
+      expect(screen.getByText("This is my message content")).toBeDefined();
+    });
+  });
+});