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

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

@@ -1,1050 +0,0 @@
-import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
-import { describe, it, expect, vi } from "vitest";
-import { CopilotChatView } from "../CopilotChatView";
-import { CopilotChatMessageView } from "../CopilotChatMessageView";
-import { CopilotChatInput } from "../CopilotChatInput";
-import { CopilotChatSuggestionView } from "../CopilotChatSuggestionView";
-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!" },
-];
-
-describe("CopilotChatView Slot System E2E Tests", () => {
-  // ============================================================================
-  // 1. TAILWIND CLASS TESTS
-  // ============================================================================
-  describe("1. Tailwind Class Slot Override", () => {
-    describe("messageView slot", () => {
-      it("should apply tailwind class string to messageView", () => {
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              messageView="bg-red-500 text-white p-4"
-            />
-          </TestWrapper>,
-        );
-
-        // The messageView should have the custom tailwind classes
-        const messageContainer = document.querySelector(
-          '[class*="bg-red-500"]',
-        );
-        expect(messageContainer).toBeDefined();
-        expect(messageContainer?.classList.contains("text-white")).toBe(true);
-        expect(messageContainer?.classList.contains("p-4")).toBe(true);
-      });
-
-      it("should override default className with tailwind string", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              messageView="custom-override-class"
-            />
-          </TestWrapper>,
-        );
-
-        const messageContainer = container.querySelector(
-          ".custom-override-class",
-        );
-        expect(messageContainer).toBeDefined();
-      });
-    });
-
-    describe("scrollView slot", () => {
-      it("should apply tailwind class string to scrollView", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              scrollView="overflow-y-auto bg-gray-100"
-            />
-          </TestWrapper>,
-        );
-
-        const scrollContainer = container.querySelector(".overflow-y-auto");
-        expect(scrollContainer).toBeDefined();
-        expect(scrollContainer?.classList.contains("bg-gray-100")).toBe(true);
-      });
-    });
-
-    describe("scrollToBottomButton slot (nested under scrollView)", () => {
-      it("should apply tailwind class string to scrollToBottomButton via scrollView", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              scrollView={{ scrollToBottomButton: "bg-blue-500 rounded-full" }}
-            />
-          </TestWrapper>,
-        );
-
-        // Note: button may only appear when scrolled
-        const button = container.querySelector(".bg-blue-500");
-        if (button) {
-          expect(button.classList.contains("rounded-full")).toBe(true);
-        }
-      });
-    });
-
-    describe("input slot", () => {
-      it("should apply tailwind class string to input", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              input="border-2 border-purple-500"
-            />
-          </TestWrapper>,
-        );
-
-        const inputContainer = container.querySelector(".border-purple-500");
-        expect(inputContainer).toBeDefined();
-      });
-    });
-
-    describe("feather slot (via scrollView)", () => {
-      it("should apply tailwind class string to feather via scrollView", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              scrollView={{ feather: "text-green-500 font-bold" }}
-            />
-          </TestWrapper>,
-        );
-
-        const feather = container.querySelector(".text-green-500");
-        if (feather) {
-          expect(feather.classList.contains("font-bold")).toBe(true);
-        }
-      });
-    });
-
-    describe("suggestionView slot", () => {
-      it("should apply tailwind class string to suggestionView", () => {
-        const suggestions = [
-          { title: "Test", message: "Test message", isLoading: false },
-        ];
-
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              suggestions={suggestions}
-              suggestionView="flex gap-2 bg-indigo-50"
-            />
-          </TestWrapper>,
-        );
-
-        const suggestionContainer = container.querySelector(".bg-indigo-50");
-        expect(suggestionContainer).toBeDefined();
-      });
-    });
-
-    describe("className vs tailwind string precedence", () => {
-      it("tailwind string should completely replace className (not merge)", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              input="only-this-class"
-            />
-          </TestWrapper>,
-        );
-
-        const inputEl = container.querySelector(".only-this-class");
-        expect(inputEl).toBeDefined();
-        // The string replaces className, so default classes should not be present
-      });
-    });
-
-    describe("non-tailwind inline styles should still work", () => {
-      it("should accept style prop alongside className override", () => {
-        const CustomInput = React.forwardRef<HTMLDivElement, any>(
-          (props, ref) => (
-            <div
-              ref={ref}
-              className={props.className}
-              style={{ backgroundColor: "rgb(255, 0, 0)" }}
-              data-testid="custom-input"
-            >
-              {props.children}
-            </div>
-          ),
-        );
-        CustomInput.displayName = "CustomInput";
-
-        render(
-          <TestWrapper>
-            <CopilotChatView messages={sampleMessages} input={CustomInput} />
-          </TestWrapper>,
-        );
-
-        const customInput = screen.queryByTestId("custom-input");
-        if (customInput) {
-          expect(customInput.style.backgroundColor).toBe("rgb(255, 0, 0)");
-        }
-      });
-    });
-  });
-
-  // ============================================================================
-  // 2. PROPERTIES (onClick, disabled, etc.) TESTS
-  // ============================================================================
-  describe("2. Properties Slot Override", () => {
-    describe("scrollToBottomButton props (nested under scrollView)", () => {
-      it("should pass onClick handler to scrollToBottomButton via scrollView", () => {
-        const handleClick = vi.fn();
-
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              scrollView={{ scrollToBottomButton: { onClick: handleClick } }}
-            />
-          </TestWrapper>,
-        );
-
-        // Find and click the scroll button if visible
-        const buttons = document.querySelectorAll("button");
-        buttons.forEach((btn) => {
-          if (btn.getAttribute("aria-label")?.includes("scroll")) {
-            fireEvent.click(btn);
-          }
-        });
-        // Note: onClick may only fire if button is visible
-      });
-
-      it("should pass disabled prop to scrollToBottomButton via scrollView", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              scrollView={{ scrollToBottomButton: { disabled: true } }}
-            />
-          </TestWrapper>,
-        );
-
-        const buttons = container.querySelectorAll("button[disabled]");
-        // Check if any button is disabled
-        expect(buttons).toBeDefined();
-      });
-    });
-
-    describe("input props", () => {
-      it("should pass onFocus handler to input", async () => {
-        const handleFocus = vi.fn();
-
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              input={{ onFocus: handleFocus }}
-            />
-          </TestWrapper>,
-        );
-
-        const textarea = await screen.findByRole("textbox");
-        fireEvent.focus(textarea);
-        // Note: depends on how input passes props through
-      });
-
-      it("should pass autoFocus prop to input", () => {
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              input={{ autoFocus: true }}
-            />
-          </TestWrapper>,
-        );
-
-        // Check if textbox is focused
-        const textarea = document.querySelector("textarea");
-        // autoFocus behavior may vary
-      });
-    });
-
-    describe("messageView props", () => {
-      it("should pass isRunning prop to messageView", () => {
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              isRunning={true}
-              messageView={{ "data-testid": "message-view-running" } as any}
-            />
-          </TestWrapper>,
-        );
-
-        const messageView = screen.queryByTestId("message-view-running");
-        expect(messageView).toBeDefined();
-      });
-    });
-  });
-
-  // ============================================================================
-  // 3. CUSTOM COMPONENT TESTS
-  // ============================================================================
-  describe("3. Custom Component Slot Override", () => {
-    describe("messageView custom component", () => {
-      it("should render custom messageView component", () => {
-        const CustomMessageView: React.FC<any> = ({ messages }) => (
-          <div data-testid="custom-message-view">
-            Custom: {messages?.length || 0} messages
-          </div>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              messageView={CustomMessageView}
-            />
-          </TestWrapper>,
-        );
-
-        expect(screen.getByTestId("custom-message-view")).toBeDefined();
-        expect(screen.getByText(/Custom: 2 messages/)).toBeDefined();
-      });
-
-      it("custom messageView should receive all props including messages", () => {
-        const receivedProps: any = {};
-
-        const CustomMessageView: React.FC<any> = (props) => {
-          Object.assign(receivedProps, props);
-          return <div data-testid="props-receiver">Received</div>;
-        };
-
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              isRunning={true}
-              messageView={CustomMessageView}
-            />
-          </TestWrapper>,
-        );
-
-        expect(receivedProps.messages).toBeDefined();
-        expect(receivedProps.messages.length).toBe(2);
-        expect(receivedProps.isRunning).toBe(true);
-      });
-    });
-
-    describe("input custom component", () => {
-      it("should render custom input component", () => {
-        const CustomInput: React.FC<any> = (props) => (
-          <div data-testid="custom-input">
-            <input
-              type="text"
-              placeholder="Custom input"
-              onChange={(e) => props.onChange?.(e.target.value)}
-            />
-            <button onClick={() => props.onSubmitMessage?.("test")}>
-              Send
-            </button>
-          </div>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatView messages={sampleMessages} input={CustomInput} />
-          </TestWrapper>,
-        );
-
-        expect(screen.getByTestId("custom-input")).toBeDefined();
-        expect(screen.getByPlaceholderText("Custom input")).toBeDefined();
-      });
-
-      it("custom input should receive onSubmitMessage callback", () => {
-        const submitHandler = vi.fn();
-
-        const CustomInput: React.FC<any> = ({ onSubmitMessage }) => (
-          <button
-            data-testid="custom-submit"
-            onClick={() => onSubmitMessage?.("test message")}
-          >
-            Submit
-          </button>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              input={CustomInput}
-              onSubmitMessage={submitHandler}
-            />
-          </TestWrapper>,
-        );
-
-        fireEvent.click(screen.getByTestId("custom-submit"));
-        expect(submitHandler).toHaveBeenCalledWith("test message");
-      });
-    });
-
-    describe("scrollView custom component", () => {
-      it("should render custom scrollView component", () => {
-        const CustomScrollView: React.FC<any> = ({ children }) => (
-          <div
-            data-testid="custom-scroll"
-            style={{ maxHeight: 300, overflow: "auto" }}
-          >
-            {children}
-          </div>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              scrollView={CustomScrollView}
-            />
-          </TestWrapper>,
-        );
-
-        expect(screen.getByTestId("custom-scroll")).toBeDefined();
-      });
-    });
-
-    describe("suggestionView custom component", () => {
-      it("should render custom suggestionView component", () => {
-        const suggestions = [
-          { title: "Option A", message: "Do A", isLoading: false },
-          { title: "Option B", message: "Do B", isLoading: false },
-        ];
-
-        const CustomSuggestionView: React.FC<any> = ({
-          suggestions,
-          onSelectSuggestion,
-        }) => (
-          <div data-testid="custom-suggestions">
-            {suggestions.map((s: any, i: number) => (
-              <button key={i} onClick={() => onSelectSuggestion?.(s, i)}>
-                {s.title}
-              </button>
-            ))}
-          </div>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              suggestions={suggestions}
-              suggestionView={CustomSuggestionView}
-            />
-          </TestWrapper>,
-        );
-
-        expect(screen.getByTestId("custom-suggestions")).toBeDefined();
-        expect(screen.getByText("Option A")).toBeDefined();
-        expect(screen.getByText("Option B")).toBeDefined();
-      });
-    });
-
-    describe("feather custom component (via scrollView)", () => {
-      it("should render custom feather component via scrollView", () => {
-        const CustomFeather: React.FC<any> = () => (
-          <div data-testid="custom-feather">Custom Feather</div>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              scrollView={{ feather: CustomFeather }}
-            />
-          </TestWrapper>,
-        );
-
-        const feather = screen.queryByTestId("custom-feather");
-        if (feather) {
-          expect(feather.textContent).toContain("Custom Feather");
-        }
-      });
-    });
-
-    describe("scrollToBottomButton custom component (nested under scrollView)", () => {
-      it("should render custom scrollToBottomButton component via scrollView", () => {
-        const CustomScrollButton: React.FC<any> = ({ onClick }) => (
-          <button data-testid="custom-scroll-btn" onClick={onClick}>
-            ⬇️ Go Down
-          </button>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              scrollView={{ scrollToBottomButton: CustomScrollButton }}
-            />
-          </TestWrapper>,
-        );
-
-        // Button may only appear when scrolled
-        const btn = screen.queryByTestId("custom-scroll-btn");
-        if (btn) {
-          expect(btn.textContent).toContain("Go Down");
-        }
-      });
-    });
-  });
-
-  // ============================================================================
-  // 4. RECURSIVE DRILL-DOWN TESTS
-  // ============================================================================
-  describe("4. Recursive Subcomponent Drill-Down", () => {
-    describe("messageView -> assistantMessage drill-down", () => {
-      it("should allow customizing assistantMessage within messageView", () => {
-        const CustomAssistantMessage: React.FC<any> = ({ message }) => (
-          <div data-testid="custom-assistant-msg">
-            Custom Assistant: {message?.content}
-          </div>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              messageView={{
-                assistantMessage: CustomAssistantMessage,
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        expect(screen.getByTestId("custom-assistant-msg")).toBeDefined();
-        expect(screen.getByText(/Custom Assistant: Hi there!/)).toBeDefined();
-      });
-    });
-
-    describe("messageView -> userMessage drill-down", () => {
-      it("should allow customizing userMessage within messageView", () => {
-        const CustomUserMessage: React.FC<any> = ({ message }) => (
-          <div data-testid="custom-user-msg">User said: {message?.content}</div>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              messageView={{
-                userMessage: CustomUserMessage,
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        expect(screen.getByTestId("custom-user-msg")).toBeDefined();
-        expect(screen.getByText(/User said: Hello/)).toBeDefined();
-      });
-    });
-
-    describe("messageView -> cursor drill-down", () => {
-      it("should allow customizing cursor within messageView", () => {
-        const CustomCursor: React.FC<any> = () => (
-          <span data-testid="custom-cursor">|</span>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              isRunning={true}
-              messageView={{
-                cursor: CustomCursor,
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        // Cursor appears when running
-        const cursor = screen.queryByTestId("custom-cursor");
-        if (cursor) {
-          expect(cursor.textContent).toBe("|");
-        }
-      });
-    });
-
-    describe("input -> textArea drill-down", () => {
-      it("should allow customizing textArea within input", () => {
-        const CustomTextArea: React.FC<any> = React.forwardRef<
-          HTMLTextAreaElement,
-          any
-        >(({ value, onChange, ...props }, ref) => (
-          <textarea
-            ref={ref}
-            data-testid="custom-textarea"
-            value={value}
-            onChange={(e) => onChange?.(e.target.value)}
-            placeholder="Type here..."
-            {...props}
-          />
-        ));
-
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              input={{
-                textArea: CustomTextArea,
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        const textarea = screen.queryByTestId("custom-textarea");
-        if (textarea) {
-          expect(textarea.getAttribute("placeholder")).toBe("Type here...");
-        }
-      });
-    });
-
-    describe("input -> sendButton drill-down", () => {
-      it("should allow customizing sendButton within input", () => {
-        const CustomSendButton: React.FC<any> = ({ onClick, disabled }) => (
-          <button
-            data-testid="custom-send-btn"
-            onClick={onClick}
-            disabled={disabled}
-          >
-            🚀 Send
-          </button>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              input={{
-                sendButton: CustomSendButton,
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        const sendBtn = screen.queryByTestId("custom-send-btn");
-        if (sendBtn) {
-          expect(sendBtn.textContent).toContain("Send");
-        }
-      });
-    });
-
-    describe("input -> addMenuButton drill-down", () => {
-      it("should allow customizing addMenuButton within input", () => {
-        const CustomAddMenu: React.FC<any> = () => (
-          <button data-testid="custom-add-menu">+ Add</button>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              input={{
-                addMenuButton: CustomAddMenu,
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        const addBtn = screen.queryByTestId("custom-add-menu");
-        if (addBtn) {
-          expect(addBtn.textContent).toContain("Add");
-        }
-      });
-    });
-
-    describe("suggestionView -> suggestion drill-down", () => {
-      it("should allow customizing suggestion pill within suggestionView", () => {
-        const suggestions = [
-          { title: "Suggestion 1", message: "Do 1", isLoading: false },
-        ];
-
-        // Custom suggestion component that handles the props passed by the slot system
-        const CustomSuggestionPill: React.FC<any> = ({
-          suggestion,
-          onClick,
-          title,
-        }) => (
-          <button
-            data-testid="custom-suggestion-pill"
-            onClick={() => onClick?.(suggestion)}
-          >
-            💡 {suggestion?.title ?? title ?? "Suggestion"}
-          </button>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              suggestions={suggestions}
-              suggestionView={{
-                suggestion: CustomSuggestionPill,
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        const pill = screen.queryByTestId("custom-suggestion-pill");
-        if (pill) {
-          expect(pill.textContent).toContain("Suggestion");
-        }
-      });
-    });
-
-    describe("suggestionView -> container drill-down", () => {
-      it("should allow customizing container within suggestionView", () => {
-        const suggestions = [
-          { title: "Test", message: "Test msg", isLoading: false },
-        ];
-
-        const CustomContainer: React.FC<any> = React.forwardRef<
-          HTMLDivElement,
-          any
-        >(({ children, ...props }, ref) => (
-          <div ref={ref} data-testid="custom-suggestion-container" {...props}>
-            <span>Suggestions:</span>
-            {children}
-          </div>
-        ));
-
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              suggestions={suggestions}
-              suggestionView={{
-                container: CustomContainer,
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        const container = screen.queryByTestId("custom-suggestion-container");
-        if (container) {
-          expect(container.textContent).toContain("Suggestions:");
-        }
-      });
-    });
-
-    describe("multiple nested overrides simultaneously", () => {
-      it("should allow overriding multiple nested slots at once", () => {
-        const CustomAssistant: React.FC<any> = ({ message }) => (
-          <div data-testid="nested-assistant">A: {message?.content}</div>
-        );
-
-        const CustomUser: React.FC<any> = ({ message }) => (
-          <div data-testid="nested-user">U: {message?.content}</div>
-        );
-
-        const CustomTextArea: React.FC<any> = React.forwardRef<any, any>(
-          (props, ref) => (
-            <textarea ref={ref} data-testid="nested-textarea" {...props} />
-          ),
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              messageView={{
-                assistantMessage: CustomAssistant,
-                userMessage: CustomUser,
-              }}
-              input={{
-                textArea: CustomTextArea,
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        expect(screen.getByTestId("nested-assistant")).toBeDefined();
-        expect(screen.getByTestId("nested-user")).toBeDefined();
-        const textarea = screen.queryByTestId("nested-textarea");
-        expect(textarea).toBeDefined();
-      });
-    });
-
-    describe("three-level deep nesting", () => {
-      it("should support messageView -> assistantMessage -> toolbar drill-down", () => {
-        const CustomToolbar: React.FC<any> = ({ children }) => (
-          <div data-testid="custom-toolbar" className="custom-toolbar">
-            Custom Toolbar: {children}
-          </div>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              messageView={{
-                assistantMessage: {
-                  toolbar: CustomToolbar,
-                },
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        const toolbar = screen.queryByTestId("custom-toolbar");
-        if (toolbar) {
-          expect(toolbar.textContent).toContain("Custom Toolbar");
-        }
-      });
-
-      it("should support messageView -> assistantMessage -> copyButton drill-down", () => {
-        const CustomCopyButton: React.FC<any> = ({ onClick }) => (
-          <button data-testid="custom-copy-btn" onClick={onClick}>
-            📋 Copy
-          </button>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              messageView={{
-                assistantMessage: {
-                  copyButton: CustomCopyButton,
-                },
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        const copyBtn = screen.queryByTestId("custom-copy-btn");
-        if (copyBtn) {
-          expect(copyBtn.textContent).toContain("Copy");
-        }
-      });
-
-      it("should support messageView -> userMessage -> editButton drill-down", () => {
-        const CustomEditButton: React.FC<any> = ({ onClick }) => (
-          <button data-testid="custom-edit-btn" onClick={onClick}>
-            ✏️ Edit
-          </button>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              messageView={{
-                userMessage: {
-                  editButton: CustomEditButton,
-                },
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        const editBtn = screen.queryByTestId("custom-edit-btn");
-        if (editBtn) {
-          expect(editBtn.textContent).toContain("Edit");
-        }
-      });
-    });
-  });
-
-  // ============================================================================
-  // 5. CLASSNAME OVERRIDE TESTS
-  // ============================================================================
-  describe("5. className Override with Tailwind", () => {
-    describe("className prop override", () => {
-      it("should allow className prop in object slot to override defaults", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              messageView={{ className: "my-custom-class" }}
-            />
-          </TestWrapper>,
-        );
-
-        const customElement = container.querySelector(".my-custom-class");
-        expect(customElement).toBeDefined();
-      });
-
-      it("should merge className with other props in object slot", () => {
-        render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              input={
-                {
-                  className: "custom-input-class",
-                  "data-testid": "input-with-class",
-                } as any
-              }
-            />
-          </TestWrapper>,
-        );
-
-        const input = screen.queryByTestId("input-with-class");
-        if (input) {
-          expect(input.classList.contains("custom-input-class")).toBe(true);
-        }
-      });
-    });
-
-    describe("string slot vs className prop equivalence", () => {
-      it("string slot should behave same as className prop", () => {
-        // String slot version
-        const { container: container1 } = render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              input="test-class-string"
-            />
-          </TestWrapper>,
-        );
-
-        // className prop version
-        const { container: container2 } = render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              input={{ className: "test-class-object" }}
-            />
-          </TestWrapper>,
-        );
-
-        expect(container1.querySelector(".test-class-string")).toBeDefined();
-        expect(container2.querySelector(".test-class-object")).toBeDefined();
-      });
-    });
-
-    describe("tailwind utility class merging", () => {
-      it("should properly apply tailwind utilities like flex, grid, etc.", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              input="flex items-center justify-between gap-4"
-            />
-          </TestWrapper>,
-        );
-
-        // Find the input specifically (it has justify-between which is unique to our slot)
-        const flexContainer = container.querySelector(".justify-between");
-        if (flexContainer) {
-          expect(flexContainer.classList.contains("flex")).toBe(true);
-          expect(flexContainer.classList.contains("items-center")).toBe(true);
-          expect(flexContainer.classList.contains("gap-4")).toBe(true);
-        }
-      });
-
-      it("should apply responsive tailwind classes", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              messageView="p-2 md:p-4 lg:p-6"
-            />
-          </TestWrapper>,
-        );
-
-        const element = container.querySelector(".p-2");
-        if (element) {
-          expect(element.classList.contains("md:p-4")).toBe(true);
-          expect(element.classList.contains("lg:p-6")).toBe(true);
-        }
-      });
-
-      it("should apply dark mode tailwind classes", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              scrollView="bg-white dark:bg-gray-900"
-            />
-          </TestWrapper>,
-        );
-
-        const element = container.querySelector(".bg-white");
-        if (element) {
-          expect(element.classList.contains("dark:bg-gray-900")).toBe(true);
-        }
-      });
-    });
-
-    describe("user className should override pre-set className", () => {
-      it("object slot className should take precedence over defaults", () => {
-        // This tests that when user provides className in object slot,
-        // it should override/replace the default className
-        const { container } = render(
-          <TestWrapper>
-            <CopilotChatView
-              messages={sampleMessages}
-              input={{ className: "user-override-class" }}
-            />
-          </TestWrapper>,
-        );
-
-        const element = container.querySelector(".user-override-class");
-        expect(element).toBeDefined();
-      });
-    });
-  });
-
-  // ============================================================================
-  // 6. CHILDREN RENDER FUNCTION TESTS
-  // ============================================================================
-  describe("6. Children Render Function (Composition Pattern)", () => {
-    it("should support children render function for full control", () => {
-      render(
-        <TestWrapper>
-          <CopilotChatView messages={sampleMessages}>
-            {({ messageView, input }) => (
-              <div data-testid="custom-layout">
-                <div className="messages-area">{messageView}</div>
-                <div className="input-area">{input}</div>
-              </div>
-            )}
-          </CopilotChatView>
-        </TestWrapper>,
-      );
-
-      expect(screen.getByTestId("custom-layout")).toBeDefined();
-      expect(document.querySelector(".messages-area")).toBeDefined();
-      expect(document.querySelector(".input-area")).toBeDefined();
-    });
-
-    it("children render function should receive all slot elements", () => {
-      const receivedSlots: string[] = [];
-
-      render(
-        <TestWrapper>
-          <CopilotChatView messages={sampleMessages}>
-            {(slots) => {
-              receivedSlots.push(...Object.keys(slots));
-              return <div data-testid="render-check">Rendered</div>;
-            }}
-          </CopilotChatView>
-        </TestWrapper>,
-      );
-
-      // Should receive at least messageView, input, scrollView, etc.
-      expect(
-        receivedSlots.includes("messageView") || receivedSlots.length > 0,
-      ).toBe(true);
-    });
-  });
-});