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

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

@@ -1,1004 +0,0 @@
-import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
-import { describe, it, expect, vi } from "vitest";
-import { CopilotChatMessageView } from "../CopilotChatMessageView";
-import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
-import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
-
-// Wrapper to provide required context
-const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <CopilotKitProvider>
-    <CopilotChatConfigurationProvider threadId="test-thread">
-      <div style={{ height: 400 }}>{children}</div>
-    </CopilotChatConfigurationProvider>
-  </CopilotKitProvider>
-);
-
-const sampleMessages = [
-  { id: "1", role: "user" as const, content: "Hello" },
-  { id: "2", role: "assistant" as const, content: "Hi there! How can I help?" },
-  { id: "3", role: "user" as const, content: "Tell me a joke" },
-  {
-    id: "4",
-    role: "assistant" as const,
-    content: "Why did the developer quit? Because he didn't get arrays!",
-  },
-];
-
-describe("CopilotChatMessageView Slot System E2E Tests", () => {
-  // ============================================================================
-  // 1. TAILWIND CLASS TESTS
-  // ============================================================================
-  describe("1. Tailwind Class Slot Override", () => {
-    describe("assistantMessage slot", () => {
-      it("should apply tailwind class string to assistantMessage", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              assistantMessage="bg-blue-100 rounded-lg p-4 shadow-md"
-            />
-          </TestWrapper>,
-        );
-
-        const assistantEl = container.querySelector(".bg-blue-100");
-        expect(assistantEl).toBeDefined();
-        if (assistantEl) {
-          expect(assistantEl.classList.contains("rounded-lg")).toBe(true);
-          expect(assistantEl.classList.contains("p-4")).toBe(true);
-        }
-      });
-
-      it("should override default assistantMessage className", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              assistantMessage="custom-assistant-class"
-            />
-          </TestWrapper>,
-        );
-
-        expect(
-          container.querySelector(".custom-assistant-class"),
-        ).toBeDefined();
-      });
-    });
-
-    describe("userMessage slot", () => {
-      it("should apply tailwind class string to userMessage", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              userMessage="bg-green-100 rounded-lg p-4 ml-auto"
-            />
-          </TestWrapper>,
-        );
-
-        const userEl = container.querySelector(".bg-green-100");
-        expect(userEl).toBeDefined();
-        if (userEl) {
-          expect(userEl.classList.contains("ml-auto")).toBe(true);
-        }
-      });
-
-      it("should override default userMessage className", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              userMessage="custom-user-class"
-            />
-          </TestWrapper>,
-        );
-
-        expect(container.querySelector(".custom-user-class")).toBeDefined();
-      });
-    });
-
-    describe("cursor slot", () => {
-      it("should apply tailwind class string to cursor", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              isRunning={true}
-              cursor="animate-pulse bg-gray-400 w-2 h-4"
-            />
-          </TestWrapper>,
-        );
-
-        const cursorEl = container.querySelector(".animate-pulse");
-        if (cursorEl) {
-          expect(cursorEl.classList.contains("bg-gray-400")).toBe(true);
-        }
-      });
-    });
-
-    describe("multiple slot tailwind classes", () => {
-      it("should apply different tailwind classes to multiple slots", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              assistantMessage="assistant-style-class"
-              userMessage="user-style-class"
-            />
-          </TestWrapper>,
-        );
-
-        expect(container.querySelector(".assistant-style-class")).toBeDefined();
-        expect(container.querySelector(".user-style-class")).toBeDefined();
-      });
-    });
-  });
-
-  // ============================================================================
-  // 2. PROPERTIES (onClick, etc.) TESTS
-  // ============================================================================
-  describe("2. Properties Slot Override", () => {
-    describe("assistantMessage props", () => {
-      it("should pass data-testid prop to assistantMessage", () => {
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              assistantMessage={{ "data-testid": "assistant-with-testid" }}
-            />
-          </TestWrapper>,
-        );
-
-        // Slot props apply to all assistant messages, so use queryAllByTestId
-        expect(
-          screen.queryAllByTestId("assistant-with-testid").length,
-        ).toBeGreaterThan(0);
-      });
-
-      it("should pass onThumbsUp callback to assistantMessage", () => {
-        const handleThumbsUp = vi.fn();
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              assistantMessage={{ onThumbsUp: handleThumbsUp }}
-            />
-          </TestWrapper>,
-        );
-
-        // Find thumbs up button and click it
-        const thumbsUpButtons = document.querySelectorAll(
-          "[aria-label*='thumbs']",
-        );
-        thumbsUpButtons.forEach((btn) => {
-          if (btn.getAttribute("aria-label")?.toLowerCase().includes("up")) {
-            fireEvent.click(btn);
-          }
-        });
-      });
-
-      it("should pass onThumbsDown callback to assistantMessage", () => {
-        const handleThumbsDown = vi.fn();
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              assistantMessage={{ onThumbsDown: handleThumbsDown }}
-            />
-          </TestWrapper>,
-        );
-
-        // Find thumbs down button if visible
-        const buttons = document.querySelectorAll("button");
-        buttons.forEach((btn) => {
-          if (btn.getAttribute("aria-label")?.toLowerCase().includes("down")) {
-            fireEvent.click(btn);
-          }
-        });
-      });
-
-      it("should pass toolbarVisible prop to assistantMessage", () => {
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              assistantMessage={{
-                toolbarVisible: true,
-                "data-testid": "toolbar-visible-test",
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        // Slot props apply to all assistant messages, so use queryAllByTestId
-        expect(
-          screen.queryAllByTestId("toolbar-visible-test").length,
-        ).toBeGreaterThan(0);
-      });
-    });
-
-    describe("userMessage props", () => {
-      it("should pass data-testid prop to userMessage", () => {
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              userMessage={{ "data-testid": "user-with-testid" }}
-            />
-          </TestWrapper>,
-        );
-
-        // Slot props apply to all user messages, so use queryAllByTestId
-        expect(
-          screen.queryAllByTestId("user-with-testid").length,
-        ).toBeGreaterThan(0);
-      });
-
-      it("should pass onEditMessage callback to userMessage", () => {
-        const handleEdit = vi.fn();
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              userMessage={{ onEditMessage: handleEdit }}
-            />
-          </TestWrapper>,
-        );
-
-        // Find edit button if visible
-        const editButtons = document.querySelectorAll("[aria-label*='edit' i]");
-        editButtons.forEach((btn) => fireEvent.click(btn));
-      });
-    });
-
-    describe("cursor props", () => {
-      it("should pass data-testid prop to cursor", () => {
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              isRunning={true}
-              cursor={{ "data-testid": "custom-cursor-testid" }}
-            />
-          </TestWrapper>,
-        );
-
-        const cursor = screen.queryByTestId("custom-cursor-testid");
-        // Cursor may only appear when running and there's streaming content
-      });
-    });
-
-    describe("user props override pre-set props", () => {
-      it("user className should override default className in object slot", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              assistantMessage={{ className: "user-override-assistant" }}
-              userMessage={{ className: "user-override-user" }}
-            />
-          </TestWrapper>,
-        );
-
-        expect(
-          container.querySelector(".user-override-assistant"),
-        ).toBeDefined();
-        expect(container.querySelector(".user-override-user")).toBeDefined();
-      });
-    });
-  });
-
-  // ============================================================================
-  // 3. CUSTOM COMPONENT TESTS
-  // ============================================================================
-  describe("3. Custom Component Slot Override", () => {
-    describe("assistantMessage custom component", () => {
-      it("should render custom assistantMessage component", () => {
-        const CustomAssistant: React.FC<any> = ({ message }) => (
-          <div data-testid="custom-assistant">
-            <span className="label">AI:</span>
-            <span className="content">{message?.content}</span>
-          </div>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              assistantMessage={CustomAssistant}
-            />
-          </TestWrapper>,
-        );
-
-        expect(
-          screen.getAllByTestId("custom-assistant").length,
-        ).toBeGreaterThan(0);
-        // There are multiple assistant messages, so look for multiple "AI:" labels
-        expect(screen.getAllByText("AI:").length).toBeGreaterThan(0);
-      });
-
-      it("custom assistantMessage should receive all props", () => {
-        const receivedProps: any[] = [];
-
-        const CustomAssistant: React.FC<any> = (props) => {
-          receivedProps.push(props);
-          return <div data-testid="props-check">{props.message?.content}</div>;
-        };
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              isRunning={true}
-              assistantMessage={CustomAssistant}
-            />
-          </TestWrapper>,
-        );
-
-        // Should have received props for each assistant message
-        expect(receivedProps.length).toBeGreaterThan(0);
-        expect(receivedProps[0].message).toBeDefined();
-      });
-
-      it("custom assistantMessage should receive messages array", () => {
-        let receivedMessages: any;
-
-        const CustomAssistant: React.FC<any> = (props) => {
-          receivedMessages = props.messages;
-          return <div>{props.message?.content}</div>;
-        };
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              assistantMessage={CustomAssistant}
-            />
-          </TestWrapper>,
-        );
-
-        expect(receivedMessages).toBeDefined();
-        expect(Array.isArray(receivedMessages)).toBe(true);
-      });
-    });
-
-    describe("userMessage custom component", () => {
-      it("should render custom userMessage component", () => {
-        const CustomUser: React.FC<any> = ({ message }) => (
-          <div data-testid="custom-user">
-            <span className="label">You:</span>
-            <span className="content">{message?.content}</span>
-          </div>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              userMessage={CustomUser}
-            />
-          </TestWrapper>,
-        );
-
-        expect(screen.getAllByTestId("custom-user").length).toBeGreaterThan(0);
-        // There are multiple user messages, so look for multiple "You:" labels
-        expect(screen.getAllByText("You:").length).toBeGreaterThan(0);
-      });
-
-      it("custom userMessage should receive message prop", () => {
-        const receivedProps: any[] = [];
-
-        const CustomUser: React.FC<any> = (props) => {
-          receivedProps.push(props);
-          return <div>{props.message?.content}</div>;
-        };
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              userMessage={CustomUser}
-            />
-          </TestWrapper>,
-        );
-
-        expect(receivedProps.length).toBeGreaterThan(0);
-        expect(receivedProps[0].message).toBeDefined();
-        expect(receivedProps[0].message.role).toBe("user");
-      });
-    });
-
-    describe("cursor custom component", () => {
-      it("should render custom cursor component", () => {
-        const CustomCursor: React.FC<any> = () => (
-          <span data-testid="custom-cursor" className="blinking">
-            ▊
-          </span>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              isRunning={true}
-              cursor={CustomCursor}
-            />
-          </TestWrapper>,
-        );
-
-        const cursor = screen.queryByTestId("custom-cursor");
-        if (cursor) {
-          expect(cursor.textContent).toBe("▊");
-        }
-      });
-    });
-
-    describe("multiple custom components", () => {
-      it("should render multiple custom components together", () => {
-        const CustomAssistant: React.FC<any> = ({ message }) => (
-          <div data-testid="multi-assistant">Bot: {message?.content}</div>
-        );
-
-        const CustomUser: React.FC<any> = ({ message }) => (
-          <div data-testid="multi-user">Human: {message?.content}</div>
-        );
-
-        const CustomCursor: React.FC<any> = () => (
-          <span data-testid="multi-cursor">...</span>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              isRunning={true}
-              assistantMessage={CustomAssistant}
-              userMessage={CustomUser}
-              cursor={CustomCursor}
-            />
-          </TestWrapper>,
-        );
-
-        expect(screen.getAllByTestId("multi-assistant").length).toBeGreaterThan(
-          0,
-        );
-        expect(screen.getAllByTestId("multi-user").length).toBeGreaterThan(0);
-      });
-    });
-  });
-
-  // ============================================================================
-  // 4. RECURSIVE DRILL-DOWN TESTS
-  // ============================================================================
-  describe("4. Recursive Subcomponent Drill-Down", () => {
-    describe("assistantMessage -> markdownRenderer drill-down", () => {
-      it("should allow customizing markdownRenderer within assistantMessage", () => {
-        const CustomMarkdown: React.FC<any> = ({ content }) => (
-          <div data-testid="custom-markdown">
-            <strong>Markdown:</strong> {content}
-          </div>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              assistantMessage={{
-                markdownRenderer: CustomMarkdown,
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        // Slot applies to all assistant messages, so there may be multiple
-        const markdownElements = screen.queryAllByTestId("custom-markdown");
-        if (markdownElements.length > 0) {
-          expect(markdownElements[0].textContent).toContain("Markdown:");
-        }
-      });
-    });
-
-    describe("assistantMessage -> toolbar drill-down", () => {
-      it("should allow customizing toolbar within assistantMessage", () => {
-        const CustomToolbar: React.FC<any> = ({ children }) => (
-          <div
-            data-testid="custom-assistant-toolbar"
-            className="toolbar-wrapper"
-          >
-            Actions: {children}
-          </div>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              assistantMessage={{
-                toolbar: CustomToolbar,
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        // Slot applies to all assistant messages, so there may be multiple
-        const toolbarElements = screen.queryAllByTestId(
-          "custom-assistant-toolbar",
-        );
-        if (toolbarElements.length > 0) {
-          expect(toolbarElements[0].textContent).toContain("Actions:");
-        }
-      });
-    });
-
-    describe("assistantMessage -> copyButton drill-down", () => {
-      it("should allow customizing copyButton within assistantMessage", () => {
-        const CustomCopyButton: React.FC<any> = ({ onClick }) => (
-          <button data-testid="custom-copy" onClick={onClick}>
-            📋 Copy Text
-          </button>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              assistantMessage={{
-                copyButton: CustomCopyButton,
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        // Slot applies to all assistant messages, so there may be multiple
-        const copyBtns = screen.queryAllByTestId("custom-copy");
-        if (copyBtns.length > 0) {
-          expect(copyBtns[0].textContent).toContain("Copy Text");
-          fireEvent.click(copyBtns[0]);
-        }
-      });
-    });
-
-    describe("assistantMessage -> thumbsUpButton drill-down", () => {
-      it("should allow customizing thumbsUpButton within assistantMessage", () => {
-        const CustomThumbsUp: React.FC<any> = ({ onClick }) => (
-          <button data-testid="custom-thumbs-up" onClick={onClick}>
-            👍 Good
-          </button>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              assistantMessage={{
-                thumbsUpButton: CustomThumbsUp,
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        // Slot applies to all assistant messages, so there may be multiple
-        const thumbsUpElements = screen.queryAllByTestId("custom-thumbs-up");
-        if (thumbsUpElements.length > 0) {
-          expect(thumbsUpElements[0].textContent).toContain("Good");
-        }
-      });
-    });
-
-    describe("assistantMessage -> thumbsDownButton drill-down", () => {
-      it("should allow customizing thumbsDownButton within assistantMessage", () => {
-        const CustomThumbsDown: React.FC<any> = ({ onClick }) => (
-          <button data-testid="custom-thumbs-down" onClick={onClick}>
-            👎 Bad
-          </button>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              assistantMessage={{
-                thumbsDownButton: CustomThumbsDown,
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        // Slot applies to all assistant messages, so there may be multiple
-        const thumbsDownElements =
-          screen.queryAllByTestId("custom-thumbs-down");
-        if (thumbsDownElements.length > 0) {
-          expect(thumbsDownElements[0].textContent).toContain("Bad");
-        }
-      });
-    });
-
-    describe("assistantMessage -> readAloudButton drill-down", () => {
-      it("should allow customizing readAloudButton within assistantMessage", () => {
-        const CustomReadAloud: React.FC<any> = ({ onClick }) => (
-          <button data-testid="custom-read-aloud" onClick={onClick}>
-            🔊 Read
-          </button>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              assistantMessage={{
-                readAloudButton: CustomReadAloud,
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        // Slot applies to all assistant messages, so there may be multiple
-        const readAloudElements = screen.queryAllByTestId("custom-read-aloud");
-        if (readAloudElements.length > 0) {
-          expect(readAloudElements[0].textContent).toContain("Read");
-        }
-      });
-    });
-
-    describe("assistantMessage -> regenerateButton drill-down", () => {
-      it("should allow customizing regenerateButton within assistantMessage", () => {
-        const CustomRegenerate: React.FC<any> = ({ onClick }) => (
-          <button data-testid="custom-regenerate" onClick={onClick}>
-            🔄 Retry
-          </button>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              assistantMessage={{
-                regenerateButton: CustomRegenerate,
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        // Slot applies to all assistant messages, so there may be multiple
-        const regenerateElements = screen.queryAllByTestId("custom-regenerate");
-        if (regenerateElements.length > 0) {
-          expect(regenerateElements[0].textContent).toContain("Retry");
-        }
-      });
-    });
-
-    describe("assistantMessage -> toolCallsView drill-down", () => {
-      it("should allow customizing toolCallsView within assistantMessage", () => {
-        const CustomToolCallsView: React.FC<any> = ({ toolCalls }) => (
-          <div data-testid="custom-tool-calls">
-            Tool Calls: {toolCalls?.length || 0}
-          </div>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              assistantMessage={{
-                toolCallsView: CustomToolCallsView,
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        // Slot applies to all assistant messages, so there may be multiple
-        const toolCallsElements = screen.queryAllByTestId("custom-tool-calls");
-        if (toolCallsElements.length > 0) {
-          expect(toolCallsElements[0].textContent).toContain("Tool Calls:");
-        }
-      });
-    });
-
-    describe("userMessage -> messageRenderer drill-down", () => {
-      it("should allow customizing messageRenderer within userMessage", () => {
-        const CustomRenderer: React.FC<any> = ({ content }) => (
-          <div data-testid="custom-user-renderer">
-            <em>{content}</em>
-          </div>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              userMessage={{
-                messageRenderer: CustomRenderer,
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        // Slot applies to all user messages, so there may be multiple
-        const rendererElements = screen.queryAllByTestId(
-          "custom-user-renderer",
-        );
-        if (rendererElements.length > 0) {
-          expect(rendererElements[0].querySelector("em")).toBeDefined();
-        }
-      });
-    });
-
-    describe("userMessage -> toolbar drill-down", () => {
-      it("should allow customizing toolbar within userMessage", () => {
-        const CustomToolbar: React.FC<any> = ({ children }) => (
-          <div data-testid="custom-user-toolbar">User Actions: {children}</div>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              userMessage={{
-                toolbar: CustomToolbar,
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        // Slot applies to all user messages, so there may be multiple
-        const toolbarElements = screen.queryAllByTestId("custom-user-toolbar");
-        if (toolbarElements.length > 0) {
-          expect(toolbarElements[0].textContent).toContain("User Actions:");
-        }
-      });
-    });
-
-    describe("userMessage -> copyButton drill-down", () => {
-      it("should allow customizing copyButton within userMessage", () => {
-        const CustomCopy: React.FC<any> = ({ onClick }) => (
-          <button data-testid="custom-user-copy" onClick={onClick}>
-            Copy Mine
-          </button>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              userMessage={{
-                copyButton: CustomCopy,
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        // Slot applies to all user messages, so there may be multiple
-        const copyElements = screen.queryAllByTestId("custom-user-copy");
-        if (copyElements.length > 0) {
-          expect(copyElements[0].textContent).toContain("Copy Mine");
-        }
-      });
-    });
-
-    describe("userMessage -> editButton drill-down", () => {
-      it("should allow customizing editButton within userMessage", () => {
-        const CustomEdit: React.FC<any> = ({ onClick }) => (
-          <button data-testid="custom-edit" onClick={onClick}>
-            ✏️ Modify
-          </button>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              userMessage={{
-                editButton: CustomEdit,
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        // Slot applies to all user messages, so there may be multiple
-        const editElements = screen.queryAllByTestId("custom-edit");
-        if (editElements.length > 0) {
-          expect(editElements[0].textContent).toContain("Modify");
-        }
-      });
-    });
-
-    describe("userMessage -> branchNavigation drill-down", () => {
-      it("should allow customizing branchNavigation within userMessage", () => {
-        const CustomBranch: React.FC<any> = ({
-          branchIndex,
-          numberOfBranches,
-        }) => (
-          <div data-testid="custom-branch">
-            Branch {branchIndex} of {numberOfBranches}
-          </div>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              userMessage={{
-                branchNavigation: CustomBranch,
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        // Slot applies to all user messages, so there may be multiple
-        const branchElements = screen.queryAllByTestId("custom-branch");
-        if (branchElements.length > 0) {
-          expect(branchElements[0].textContent).toContain("Branch");
-        }
-      });
-    });
-
-    describe("multiple nested overrides", () => {
-      it("should allow multiple assistant message subcomponent overrides", () => {
-        const CustomCopy: React.FC<any> = () => (
-          <button data-testid="nested-copy">Copy</button>
-        );
-        const CustomThumbsUp: React.FC<any> = () => (
-          <button data-testid="nested-thumbs-up">Up</button>
-        );
-        const CustomThumbsDown: React.FC<any> = () => (
-          <button data-testid="nested-thumbs-down">Down</button>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              assistantMessage={{
-                copyButton: CustomCopy,
-                thumbsUpButton: CustomThumbsUp,
-                thumbsDownButton: CustomThumbsDown,
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        // Slot applies to all assistant messages, so there may be multiple
-        const nestedCopyElements = screen.queryAllByTestId("nested-copy");
-        expect(nestedCopyElements.length > 0 || true).toBeTruthy();
-      });
-
-      it("should allow multiple user message subcomponent overrides", () => {
-        const CustomCopy: React.FC<any> = () => (
-          <button data-testid="user-nested-copy">UCopy</button>
-        );
-        const CustomEdit: React.FC<any> = () => (
-          <button data-testid="user-nested-edit">UEdit</button>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              userMessage={{
-                copyButton: CustomCopy,
-                editButton: CustomEdit,
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        // Slot applies to all user messages, so there may be multiple
-        const userNestedCopyElements =
-          screen.queryAllByTestId("user-nested-copy");
-        expect(userNestedCopyElements.length > 0 || true).toBeTruthy();
-      });
-    });
-  });
-
-  // ============================================================================
-  // 5. CLASSNAME OVERRIDE TESTS
-  // ============================================================================
-  describe("5. className Override with Tailwind", () => {
-    describe("className prop override", () => {
-      it("should allow className prop in assistantMessage object slot", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              assistantMessage={{ className: "assistant-custom-class" }}
-            />
-          </TestWrapper>,
-        );
-
-        expect(
-          container.querySelector(".assistant-custom-class"),
-        ).toBeDefined();
-      });
-
-      it("should allow className prop in userMessage object slot", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              userMessage={{ className: "user-custom-class" }}
-            />
-          </TestWrapper>,
-        );
-
-        expect(container.querySelector(".user-custom-class")).toBeDefined();
-      });
-
-      it("should allow className prop in cursor object slot", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              isRunning={true}
-              cursor={{ className: "cursor-custom-class" }}
-            />
-          </TestWrapper>,
-        );
-
-        const cursor = container.querySelector(".cursor-custom-class");
-        // May only appear when streaming
-      });
-    });
-
-    describe("tailwind utilities", () => {
-      it("should apply flex utilities to message slots", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              assistantMessage="flex items-start gap-2"
-              userMessage="flex items-end gap-2 justify-end"
-            />
-          </TestWrapper>,
-        );
-
-        const flexAssistant = container.querySelector(".flex.items-start");
-        const flexUser = container.querySelector(".flex.items-end");
-
-        expect(flexAssistant || flexUser).toBeDefined();
-      });
-
-      it("should apply spacing utilities", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatMessageView
-              messages={sampleMessages}
-              assistantMessage="p-4 m-2 space-y-2"
-            />
-          </TestWrapper>,
-        );
-
-        const spacedEl = container.querySelector(".p-4");
-        if (spacedEl) {
-          expect(spacedEl.classList.contains("m-2")).toBe(true);
-        }
-      });
-    });
-  });
-
-  // ============================================================================
-  // 6. CHILDREN RENDER FUNCTION TESTS
-  // ============================================================================
-  describe("6. Children Render Function", () => {
-    it("should support children render function for message view layout", () => {
-      render(
-        <TestWrapper>
-          <CopilotChatMessageView messages={sampleMessages}>
-            {({ assistantMessage, userMessage }) => (
-              <div data-testid="custom-message-layout">
-                <div className="messages-column">
-                  {assistantMessage}
-                  {userMessage}
-                </div>
-              </div>
-            )}
-          </CopilotChatMessageView>
-        </TestWrapper>,
-      );
-
-      expect(screen.getByTestId("custom-message-layout")).toBeDefined();
-    });
-  });
-});