@copilotkit/react-core 1.57.3 → 1.58.0

package/src/v2/components/chat/__tests__/CopilotSidebarView.position.test.tsx

@@ -1,159 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import { describe, it, expect } from "vitest";
-import { CopilotSidebarView } from "../CopilotSidebarView";
-import { CopilotSidebar } from "../CopilotSidebar";
-import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
-import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
-import {
-  MockStepwiseAgent,
-  renderWithCopilotKit,
-} from "../../../__tests__/utils/test-helpers";
-
-const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <CopilotKitProvider>
-    <CopilotChatConfigurationProvider threadId="test-thread">
-      {children}
-    </CopilotChatConfigurationProvider>
-  </CopilotKitProvider>
-);
-
-const sampleMessages = [{ id: "1", role: "user" as const, content: "Hello" }];
-
-function getSidebarAside(container: HTMLElement) {
-  const sidebar = container.querySelector("[data-copilot-sidebar]");
-  if (!sidebar) throw new Error("sidebar aside not found");
-  return sidebar;
-}
-
-describe("CopilotSidebarView position prop", () => {
-  describe("CopilotSidebarView", () => {
-    it("defaults to right-anchored when position is omitted", () => {
-      const { container } = render(
-        <TestWrapper>
-          <CopilotSidebarView messages={sampleMessages} />
-        </TestWrapper>,
-      );
-
-      const aside = getSidebarAside(container);
-      expect(aside.classList.contains("cpk:right-0")).toBe(true);
-      expect(aside.classList.contains("cpk:border-l")).toBe(true);
-      expect(aside.classList.contains("cpk:left-0")).toBe(false);
-      expect(aside.classList.contains("cpk:border-r")).toBe(false);
-    });
-
-    it('renders right-anchored when position="right" explicitly', () => {
-      const { container } = render(
-        <TestWrapper>
-          <CopilotSidebarView messages={sampleMessages} position="right" />
-        </TestWrapper>,
-      );
-
-      const aside = getSidebarAside(container);
-      expect(aside.classList.contains("cpk:right-0")).toBe(true);
-      expect(aside.classList.contains("cpk:border-l")).toBe(true);
-      expect(aside.classList.contains("cpk:left-0")).toBe(false);
-      expect(aside.classList.contains("cpk:border-r")).toBe(false);
-    });
-
-    it('renders left-anchored when position="left"', () => {
-      const { container } = render(
-        <TestWrapper>
-          <CopilotSidebarView messages={sampleMessages} position="left" />
-        </TestWrapper>,
-      );
-
-      const aside = getSidebarAside(container);
-      expect(aside.classList.contains("cpk:left-0")).toBe(true);
-      expect(aside.classList.contains("cpk:border-r")).toBe(true);
-      expect(aside.classList.contains("cpk:right-0")).toBe(false);
-      expect(aside.classList.contains("cpk:border-l")).toBe(false);
-    });
-
-    it('translates off-screen to the right when closed and position="right"', () => {
-      const { container } = render(
-        <TestWrapper>
-          <CopilotSidebarView
-            messages={sampleMessages}
-            defaultOpen={false}
-            position="right"
-          />
-        </TestWrapper>,
-      );
-
-      const aside = getSidebarAside(container);
-      expect(aside.classList.contains("cpk:translate-x-full")).toBe(true);
-      expect(aside.classList.contains("cpk:-translate-x-full")).toBe(false);
-    });
-
-    it('translates off-screen to the left when closed and position="left"', () => {
-      const { container } = render(
-        <TestWrapper>
-          <CopilotSidebarView
-            messages={sampleMessages}
-            defaultOpen={false}
-            position="left"
-          />
-        </TestWrapper>,
-      );
-
-      const aside = getSidebarAside(container);
-      expect(aside.classList.contains("cpk:-translate-x-full")).toBe(true);
-      expect(aside.classList.contains("cpk:translate-x-full")).toBe(false);
-    });
-
-    it('anchors the toggle button to the left when position="left"', () => {
-      const { container } = render(
-        <TestWrapper>
-          <CopilotSidebarView messages={sampleMessages} position="left" />
-        </TestWrapper>,
-      );
-
-      const toggle = container.querySelector(
-        '[data-slot="chat-toggle-button"]',
-      );
-      if (!toggle) throw new Error("toggle button not found");
-      expect(toggle.classList.contains("cpk:left-6")).toBe(true);
-      expect(toggle.classList.contains("cpk:right-auto")).toBe(true);
-    });
-
-    it("keeps the toggle button right-anchored by default", () => {
-      const { container } = render(
-        <TestWrapper>
-          <CopilotSidebarView messages={sampleMessages} />
-        </TestWrapper>,
-      );
-
-      const toggle = container.querySelector(
-        '[data-slot="chat-toggle-button"]',
-      );
-      if (!toggle) throw new Error("toggle button not found");
-      expect(toggle.classList.contains("cpk:right-6")).toBe(true);
-      expect(toggle.classList.contains("cpk:left-6")).toBe(false);
-    });
-  });
-
-  describe("CopilotSidebar wrapper", () => {
-    it('forwards position="left" through to CopilotSidebarView', () => {
-      const { container } = renderWithCopilotKit({
-        agent: new MockStepwiseAgent(),
-        children: <CopilotSidebar position="left" />,
-      });
-
-      const aside = getSidebarAside(container);
-      expect(aside.classList.contains("cpk:left-0")).toBe(true);
-      expect(aside.classList.contains("cpk:border-r")).toBe(true);
-    });
-
-    it("defaults to right-anchored when position is omitted", () => {
-      const { container } = renderWithCopilotKit({
-        agent: new MockStepwiseAgent(),
-        children: <CopilotSidebar />,
-      });
-
-      const aside = getSidebarAside(container);
-      expect(aside.classList.contains("cpk:right-0")).toBe(true);
-      expect(aside.classList.contains("cpk:border-l")).toBe(true);
-    });
-  });
-});

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

@@ -1,502 +0,0 @@
-import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
-import { describe, it, expect, vi } from "vitest";
-import { CopilotSidebarView } from "../CopilotSidebarView";
-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">
-      {children}
-    </CopilotChatConfigurationProvider>
-  </CopilotKitProvider>
-);
-
-const sampleMessages = [
-  { id: "1", role: "user" as const, content: "Hello" },
-  { id: "2", role: "assistant" as const, content: "Hi there!" },
-];
-
-describe("CopilotSidebarView Slot System E2E Tests", () => {
-  // ============================================================================
-  // 1. TAILWIND CLASS TESTS - HEADER SLOT (UNIQUE TO SIDEBAR)
-  // ============================================================================
-  describe("1. Tailwind Class Slot Override - Header Slot", () => {
-    describe("header slot", () => {
-      it("should apply tailwind class string to header", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotSidebarView
-              messages={sampleMessages}
-              header="bg-gradient-to-r from-blue-500 to-purple-500 text-white"
-            />
-          </TestWrapper>,
-        );
-
-        const header = container.querySelector(".bg-gradient-to-r");
-        if (header) {
-          expect(header.classList.contains("from-blue-500")).toBe(true);
-          expect(header.classList.contains("text-white")).toBe(true);
-        }
-      });
-
-      it("should override default header border with custom styles", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotSidebarView
-              messages={sampleMessages}
-              header="border-b-2 border-blue-500"
-            />
-          </TestWrapper>,
-        );
-
-        const header = container.querySelector(".border-b-2");
-        expect(header).toBeDefined();
-      });
-    });
-  });
-
-  // ============================================================================
-  // 2. PROPERTY PASSING TESTS - HEADER SLOT
-  // ============================================================================
-  describe("2. Property Passing - Header Slot", () => {
-    describe("header slot", () => {
-      it("should pass custom props to header", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotSidebarView
-              messages={sampleMessages}
-              header={{ "data-testid": "custom-sidebar-header" }}
-            />
-          </TestWrapper>,
-        );
-
-        const header = screen.queryByTestId("custom-sidebar-header");
-        expect(header).toBeDefined();
-      });
-
-      it("should pass title prop through to header", () => {
-        render(
-          <TestWrapper>
-            <CopilotSidebarView
-              messages={sampleMessages}
-              header={{ title: "My Sidebar Chat" }}
-            />
-          </TestWrapper>,
-        );
-
-        // The title should be rendered in the header
-        expect(screen.queryByText("My Sidebar Chat")).toBeDefined();
-      });
-    });
-  });
-
-  // ============================================================================
-  // 3. CUSTOM COMPONENT TESTS - HEADER SLOT
-  // ============================================================================
-  describe("3. Custom Component - Header Slot", () => {
-    it("should allow custom component for header", () => {
-      const CustomHeader: React.FC = () => (
-        <header
-          data-testid="custom-header-component"
-          className="custom-sidebar-header"
-        >
-          <span>Custom Sidebar Header</span>
-          <button>Custom Close</button>
-        </header>
-      );
-
-      render(
-        <TestWrapper>
-          <CopilotSidebarView
-            messages={sampleMessages}
-            header={CustomHeader as any}
-          />
-        </TestWrapper>,
-      );
-
-      const custom = screen.queryByTestId("custom-header-component");
-      expect(custom).toBeDefined();
-      expect(custom?.textContent).toContain("Custom Sidebar Header");
-    });
-
-    it("should allow passing header props for customization", () => {
-      const { container } = render(
-        <TestWrapper>
-          <CopilotSidebarView
-            messages={sampleMessages}
-            header={{
-              title: "Customized Header",
-              titleContent: "text-xl font-bold",
-              closeButton: "bg-red-500",
-            }}
-          />
-        </TestWrapper>,
-      );
-
-      expect(screen.queryByText("Customized Header")).toBeDefined();
-      expect(container.querySelector(".text-xl")).toBeDefined();
-    });
-  });
-
-  // ============================================================================
-  // 4. INHERITED COPILOTCHATVIEW SLOTS
-  // ============================================================================
-  describe("4. Inherited CopilotChatView Slots", () => {
-    describe("messageView slot (inherited)", () => {
-      it("should apply tailwind class string to inherited messageView", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotSidebarView
-              messages={sampleMessages}
-              messageView="bg-gray-50 rounded-lg"
-            />
-          </TestWrapper>,
-        );
-
-        const messageView = container.querySelector(".bg-gray-50");
-        expect(messageView).toBeDefined();
-      });
-    });
-
-    describe("input slot (inherited)", () => {
-      it("should apply tailwind class string to inherited input", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotSidebarView
-              messages={sampleMessages}
-              input="border-2 border-blue-400"
-            />
-          </TestWrapper>,
-        );
-
-        const input = container.querySelector(".border-blue-400");
-        expect(input).toBeDefined();
-      });
-    });
-
-    describe("scrollView slot (inherited)", () => {
-      it("should apply tailwind class string to inherited scrollView", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotSidebarView
-              messages={sampleMessages}
-              scrollView="overflow-y-scroll bg-white"
-            />
-          </TestWrapper>,
-        );
-
-        const scrollView = container.querySelector(".overflow-y-scroll");
-        expect(scrollView).toBeDefined();
-      });
-    });
-
-    describe("suggestionView slot (inherited)", () => {
-      it("should apply tailwind class string to inherited suggestionView", () => {
-        const suggestions = [
-          { title: "Test", message: "Test message", isLoading: false },
-        ];
-
-        const { container } = render(
-          <TestWrapper>
-            <CopilotSidebarView
-              messages={sampleMessages}
-              suggestions={suggestions}
-              suggestionView="gap-4 p-2"
-            />
-          </TestWrapper>,
-        );
-
-        const suggestionView = container.querySelector(".gap-4");
-        if (suggestionView) {
-          expect(suggestionView.classList.contains("p-2")).toBe(true);
-        }
-      });
-    });
-  });
-
-  // ============================================================================
-  // 5. DRILL-DOWN INTO HEADER SUB-SLOTS
-  // ============================================================================
-  describe("5. Drill-down into Header Sub-slots", () => {
-    it("should allow customizing header titleContent through props object", () => {
-      const { container } = render(
-        <TestWrapper>
-          <CopilotSidebarView
-            messages={sampleMessages}
-            header={{
-              title: "Sidebar Chat",
-              titleContent: "text-2xl text-purple-600 font-extrabold",
-            }}
-          />
-        </TestWrapper>,
-      );
-
-      const titleContent = container.querySelector(".text-2xl");
-      expect(titleContent).toBeDefined();
-      expect(titleContent?.classList.contains("text-purple-600")).toBe(true);
-    });
-
-    it("should allow customizing header closeButton through props object", () => {
-      const { container } = render(
-        <TestWrapper>
-          <CopilotSidebarView
-            messages={sampleMessages}
-            header={{
-              title: "Sidebar",
-              closeButton: "custom-close-btn",
-            }}
-          />
-        </TestWrapper>,
-      );
-
-      const closeBtn = container.querySelector(".custom-close-btn");
-      expect(closeBtn).toBeDefined();
-    });
-
-    it("should allow custom component for header via component slot", () => {
-      const CustomHeader: React.FC = () => (
-        <header data-testid="full-custom-header">
-          <span>Custom Header</span>
-          <button data-testid="sidebar-custom-close">← Back</button>
-        </header>
-      );
-
-      render(
-        <TestWrapper>
-          <CopilotSidebarView
-            messages={sampleMessages}
-            header={CustomHeader as any}
-          />
-        </TestWrapper>,
-      );
-
-      const customClose = screen.queryByTestId("sidebar-custom-close");
-      expect(customClose).toBeDefined();
-      expect(customClose?.textContent).toBe("← Back");
-    });
-  });
-
-  // ============================================================================
-  // 6. CLASSNAME AND MIXED CUSTOMIZATION
-  // ============================================================================
-  describe("6. className Override and Mixed Customization", () => {
-    it("should merge multiple slot classNames correctly", () => {
-      const { container } = render(
-        <TestWrapper>
-          <CopilotSidebarView
-            messages={sampleMessages}
-            header="header-style"
-            messageView="message-style"
-            input="input-style"
-          />
-        </TestWrapper>,
-      );
-
-      expect(container.querySelector(".header-style")).toBeDefined();
-      expect(container.querySelector(".message-style")).toBeDefined();
-      expect(container.querySelector(".input-style")).toBeDefined();
-    });
-
-    it("should work with property objects and class strings mixed", () => {
-      const onClick = vi.fn();
-      const { container } = render(
-        <TestWrapper>
-          <CopilotSidebarView
-            messages={sampleMessages}
-            header={{ onClick, className: "clickable-header" }}
-            input="styled-input"
-          />
-        </TestWrapper>,
-      );
-
-      expect(container.querySelector(".styled-input")).toBeDefined();
-
-      const header = container.querySelector(".clickable-header");
-      if (header) {
-        fireEvent.click(header);
-        expect(onClick).toHaveBeenCalled();
-      }
-    });
-
-    it("should support custom width prop", () => {
-      const { container } = render(
-        <TestWrapper>
-          <CopilotSidebarView messages={sampleMessages} width={600} />
-        </TestWrapper>,
-      );
-
-      const sidebar = container.querySelector("[data-copilot-sidebar]");
-      expect(sidebar).toBeDefined();
-      // Width should be applied via CSS custom property
-      expect(sidebar?.getAttribute("style")).toContain("--sidebar-width");
-    });
-
-    it("should support string width prop", () => {
-      const { container } = render(
-        <TestWrapper>
-          <CopilotSidebarView messages={sampleMessages} width="50vw" />
-        </TestWrapper>,
-      );
-
-      const sidebar = container.querySelector("[data-copilot-sidebar]");
-      expect(sidebar).toBeDefined();
-    });
-  });
-
-  // ============================================================================
-  // 7. INTEGRATION TESTS
-  // ============================================================================
-  describe("7. Integration Tests", () => {
-    it("should render sidebar with all default components", () => {
-      const { container } = render(
-        <TestWrapper>
-          <CopilotSidebarView messages={sampleMessages} />
-        </TestWrapper>,
-      );
-
-      const sidebar = container.querySelector("[data-copilot-sidebar]");
-      expect(sidebar).toBeDefined();
-      // Should have header
-      expect(
-        container.querySelector('[data-slot="copilot-modal-header"]'),
-      ).toBeDefined();
-    });
-
-    it("should render messages in sidebar", () => {
-      render(
-        <TestWrapper>
-          <CopilotSidebarView messages={sampleMessages} />
-        </TestWrapper>,
-      );
-
-      expect(screen.queryByText("Hello")).toBeDefined();
-      expect(screen.queryByText("Hi there!")).toBeDefined();
-    });
-
-    it("should handle empty messages array", () => {
-      const { container } = render(
-        <TestWrapper>
-          <CopilotSidebarView messages={[]} />
-        </TestWrapper>,
-      );
-
-      const sidebar = container.querySelector("[data-copilot-sidebar]");
-      expect(sidebar).toBeDefined();
-    });
-
-    it("should combine header customization with inherited slot customization", () => {
-      const { container } = render(
-        <TestWrapper>
-          <CopilotSidebarView
-            messages={sampleMessages}
-            header={{
-              title: "Full Custom",
-              className: "custom-header-root",
-              titleContent: "custom-title",
-            }}
-            messageView="custom-message"
-            input="custom-input"
-            scrollView="custom-scroll"
-          />
-        </TestWrapper>,
-      );
-
-      expect(container.querySelector(".custom-header-root")).toBeDefined();
-      expect(container.querySelector(".custom-title")).toBeDefined();
-      expect(container.querySelector(".custom-message")).toBeDefined();
-      expect(container.querySelector(".custom-input")).toBeDefined();
-      expect(container.querySelector(".custom-scroll")).toBeDefined();
-    });
-  });
-
-  // ============================================================================
-  // 8. TOGGLE BUTTON SLOT TESTS
-  // ============================================================================
-  describe("8. Toggle Button Slot", () => {
-    describe("toggleButton slot - Tailwind class string", () => {
-      it("should apply tailwind class string to toggle button", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotSidebarView
-              messages={sampleMessages}
-              toggleButton="bg-red-500 hover:bg-red-600"
-            />
-          </TestWrapper>,
-        );
-
-        const toggleButton = container.querySelector(".bg-red-500");
-        expect(toggleButton).toBeDefined();
-        expect(toggleButton?.classList.contains("hover:bg-red-600")).toBe(true);
-      });
-    });
-
-    describe("toggleButton slot - Props object", () => {
-      it("should pass custom props to toggle button", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotSidebarView
-              messages={sampleMessages}
-              toggleButton={{ "data-testid": "custom-toggle-button" }}
-            />
-          </TestWrapper>,
-        );
-
-        const toggleButton = screen.queryByTestId("custom-toggle-button");
-        expect(toggleButton).toBeDefined();
-      });
-
-      it("should pass openIcon and closeIcon sub-slot props", () => {
-        const { container } = render(
-          <TestWrapper>
-            <CopilotSidebarView
-              messages={sampleMessages}
-              toggleButton={{
-                openIcon: "text-green-500",
-                closeIcon: "text-red-500",
-              }}
-            />
-          </TestWrapper>,
-        );
-
-        // The icons should have custom classes applied
-        const openIconSlot = container.querySelector(
-          '[data-slot="chat-toggle-button-open-icon"]',
-        );
-        const closeIconSlot = container.querySelector(
-          '[data-slot="chat-toggle-button-close-icon"]',
-        );
-        expect(openIconSlot).toBeDefined();
-        expect(closeIconSlot).toBeDefined();
-      });
-    });
-
-    describe("toggleButton slot - Custom component", () => {
-      it("should allow custom component for toggle button", () => {
-        const CustomToggleButton: React.FC = () => (
-          <button
-            data-testid="custom-toggle-component"
-            className="custom-toggle"
-          >
-            Toggle Chat
-          </button>
-        );
-
-        render(
-          <TestWrapper>
-            <CopilotSidebarView
-              messages={sampleMessages}
-              toggleButton={CustomToggleButton as any}
-            />
-          </TestWrapper>,
-        );
-
-        const custom = screen.queryByTestId("custom-toggle-component");
-        expect(custom).toBeDefined();
-        expect(custom?.textContent).toBe("Toggle Chat");
-      });
-    });
-  });
-});