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

package/src/v2/lib/__tests__/renderSlot.test.tsx

@@ -1,588 +0,0 @@
-import React, { forwardRef, useImperativeHandle, useRef } from "react";
-import { render, fireEvent, screen } from "@testing-library/react";
-import { vi } from "vitest";
-import "@testing-library/jest-dom";
-import { renderSlot, SlotValue } from "../slots";
-
-// Extend HTMLAttributes to include data attributes
-interface ExtendedDivAttributes extends React.HTMLAttributes<HTMLDivElement> {
-  [key: `data-${string}`]: string | null | undefined;
-}
-
-// Test components for various scenarios
-const SimpleDiv: React.FC<ExtendedDivAttributes> = ({
-  className,
-  children,
-  ...props
-}) => (
-  <div className={className} {...props}>
-    {children}
-  </div>
-);
-
-const ButtonWithClick: React.FC<
-  React.ButtonHTMLAttributes<HTMLButtonElement>
-> = ({ onClick, className, children, ...props }) => (
-  <button className={className} onClick={onClick} {...props}>
-    {children}
-  </button>
-);
-
-const ComponentWithContent: React.FC<{
-  content: string;
-  className?: string;
-}> = ({ content, className }) => <div className={className}>{content}</div>;
-
-const ForwardRefComponent = forwardRef<
-  HTMLInputElement,
-  React.InputHTMLAttributes<HTMLInputElement>
->(({ className, ...props }, ref) => (
-  <input ref={ref} className={className} {...props} />
-));
-
-ForwardRefComponent.displayName = "ForwardRefComponent";
-
-interface CustomHandle {
-  focus: () => void;
-  getValue: () => string;
-}
-
-const ComponentWithImperativeHandle = forwardRef<
-  CustomHandle,
-  { value?: string; className?: string }
->(({ value = "", className }, ref) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useImperativeHandle(ref, () => ({
-    focus: () => inputRef.current?.focus(),
-    getValue: () => inputRef.current?.value || value,
-  }));
-
-  return <input ref={inputRef} defaultValue={value} className={className} />;
-});
-
-ComponentWithImperativeHandle.displayName = "ComponentWithImperativeHandle";
-
-describe("renderSlot", () => {
-  describe("Basic slot value types", () => {
-    test("renders default component when slot is undefined", () => {
-      const element = renderSlot(undefined, SimpleDiv, {
-        children: "test content",
-      });
-      const { container } = render(element);
-
-      expect(container.firstChild).toHaveTextContent("test content");
-      expect(container.firstChild?.nodeName).toBe("DIV");
-    });
-
-    test("uses string slot as className", () => {
-      const element = renderSlot("bg-red-500 text-white", SimpleDiv, {
-        children: "styled content",
-      });
-      const { container } = render(element);
-
-      expect(container.firstChild).toHaveClass("bg-red-500", "text-white");
-      expect(container.firstChild).toHaveTextContent("styled content");
-    });
-
-    test("renders custom component when slot is a function", () => {
-      const CustomComponent: React.FC<{ children: React.ReactNode }> = ({
-        children,
-      }) => <span data-testid="custom">{children}</span>;
-
-      const element = renderSlot(CustomComponent, SimpleDiv, {
-        children: "custom content",
-      });
-      render(element);
-
-      expect(screen.getByTestId("custom")).toHaveTextContent("custom content");
-    });
-
-    test("merges object slot props with base props", () => {
-      const element = renderSlot(
-        { className: "slot-class", "data-slot": "true" },
-        SimpleDiv,
-        { children: "merged content", "data-base": "true" },
-      );
-      const { container } = render(element);
-
-      expect(container.firstChild).toHaveClass("slot-class");
-      expect(container.firstChild).toHaveAttribute("data-slot", "true");
-      expect(container.firstChild).toHaveAttribute("data-base", "true");
-      expect(container.firstChild).toHaveTextContent("merged content");
-    });
-  });
-
-  describe("className handling", () => {
-    test("string slot merges with props className using twMerge", () => {
-      const element = renderSlot("slot-class", SimpleDiv, {
-        className: "props-class",
-        children: "test",
-      });
-      const { container } = render(element);
-
-      // twMerge combines both classes
-      expect(container.firstChild).toHaveClass("slot-class");
-      expect(container.firstChild).toHaveClass("props-class");
-    });
-
-    test("object slot className overrides props className", () => {
-      const element = renderSlot({ className: "slot-class" }, SimpleDiv, {
-        className: "props-class",
-        children: "test",
-      });
-      const { container } = render(element);
-
-      // Object slots use spread, so slot className overrides props className
-      expect(container.firstChild).toHaveClass("slot-class");
-      expect(container.firstChild).not.toHaveClass("props-class");
-    });
-
-    test("props className is used when slot has no className", () => {
-      const element = renderSlot({ "data-test": "true" }, SimpleDiv, {
-        className: "props-class",
-        children: "test",
-      });
-      const { container } = render(element);
-
-      expect(container.firstChild).toHaveClass("props-class");
-      expect(container.firstChild).toHaveAttribute("data-test", "true");
-    });
-
-    test("empty string slot preserves props className", () => {
-      const element = renderSlot("", SimpleDiv, {
-        className: "props-class",
-        children: "test",
-      });
-      const { container } = render(element);
-
-      // Empty string with twMerge preserves the props className
-      expect(container.firstChild).toHaveClass("props-class");
-    });
-  });
-
-  describe("Event handling and callbacks", () => {
-    test("passes click handlers correctly", () => {
-      const mockClick = vi.fn();
-      const element = renderSlot(undefined, ButtonWithClick, {
-        onClick: mockClick,
-        children: "Click me",
-      });
-
-      render(element);
-      fireEvent.click(screen.getByRole("button"));
-
-      expect(mockClick).toHaveBeenCalledTimes(1);
-    });
-
-    test("object slot can override event handlers", () => {
-      const baseMockClick = vi.fn();
-      const slotMockClick = vi.fn();
-
-      const element = renderSlot({ onClick: slotMockClick }, ButtonWithClick, {
-        onClick: baseMockClick,
-        children: "Click me",
-      });
-
-      render(element);
-      fireEvent.click(screen.getByRole("button"));
-
-      expect(slotMockClick).toHaveBeenCalledTimes(1);
-      expect(baseMockClick).not.toHaveBeenCalled();
-    });
-
-    test("custom component receives all event handlers", () => {
-      const mockClick = vi.fn();
-      const CustomButton: React.FC<
-        React.ButtonHTMLAttributes<HTMLButtonElement>
-      > = (props) => <button {...props} data-testid="custom-button" />;
-
-      const element = renderSlot(CustomButton, ButtonWithClick, {
-        onClick: mockClick,
-        children: "Custom button",
-      });
-
-      render(element);
-      fireEvent.click(screen.getByTestId("custom-button"));
-
-      expect(mockClick).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe("Ref forwarding", () => {
-    test("forwards refs to default component", () => {
-      const ref = React.createRef<HTMLInputElement>();
-      const element = renderSlot(undefined, ForwardRefComponent, { ref });
-
-      render(element);
-
-      expect(ref.current).toBeInstanceOf(HTMLInputElement);
-    });
-
-    test("forwards refs to custom component", () => {
-      const ref = React.createRef<HTMLInputElement>();
-      const CustomInput = forwardRef<
-        HTMLInputElement,
-        React.InputHTMLAttributes<HTMLInputElement>
-      >((props, forwardedRef) => (
-        <input {...props} ref={forwardedRef} data-testid="custom-input" />
-      ));
-
-      const element = renderSlot(CustomInput, ForwardRefComponent, { ref });
-
-      render(element);
-
-      expect(ref.current).toBeInstanceOf(HTMLInputElement);
-      // Check if the custom component was actually used
-      const customInput = screen.queryByTestId("custom-input");
-      if (customInput) {
-        expect(customInput).toBe(ref.current);
-      } else {
-        // If custom component wasn't used, this is a bug in renderSlot
-        expect(ref.current).toBeInstanceOf(HTMLInputElement);
-      }
-    });
-
-    test("works with useImperativeHandle", () => {
-      const ref = React.createRef<CustomHandle>();
-      const element = renderSlot(undefined, ComponentWithImperativeHandle, {
-        ref,
-        value: "test-value",
-      });
-
-      render(element);
-
-      expect(ref.current?.getValue()).toBe("test-value");
-      expect(typeof ref.current?.focus).toBe("function");
-    });
-  });
-
-  describe("Complex prop merging", () => {
-    test("deeply nested object props are merged correctly", () => {
-      const ComplexComponent: React.FC<{
-        config?: { theme: string; options: { debug: boolean } };
-        className?: string;
-      }> = ({ config, className }) => (
-        <div className={className} data-config={JSON.stringify(config)}>
-          Complex component
-        </div>
-      );
-
-      const element = renderSlot(
-        {
-          config: { theme: "dark", options: { debug: true } },
-          className: "slot-class",
-        },
-        ComplexComponent,
-        {
-          config: { theme: "light", options: { debug: false } },
-          className: "base-class",
-        },
-      );
-
-      const { container } = render(element);
-      const configData = JSON.parse(
-        (container.firstChild as Element)?.getAttribute("data-config") || "{}",
-      );
-
-      expect(configData.theme).toBe("dark"); // slot overrides base
-      expect(configData.options.debug).toBe(true); // slot overrides base
-      expect(container.firstChild).toHaveClass("slot-class");
-    });
-
-    test("handles undefined and null prop values", () => {
-      const element = renderSlot(
-        { title: undefined, "data-test": null },
-        SimpleDiv,
-        { title: "base-title", "data-base": "value", children: "test" },
-      );
-      const { container } = render(element);
-
-      expect(container.firstChild).toHaveAttribute("data-base", "value");
-
-      // Note: undefined in slot object overrides base props and removes them
-      // This is expected JavaScript spread behavior
-      expect(container.firstChild).not.toHaveAttribute("title");
-    });
-  });
-
-  describe("Real-world usage patterns", () => {
-    test("simulates CopilotChatInput Toolbar usage with twMerge pattern", () => {
-      // This simulates the complex pattern in CopilotChatInput
-      const Toolbar: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
-        className,
-        ...props
-      }) => <div className={`base-toolbar ${className || ""}`} {...props} />;
-
-      const toolbarSlot: SlotValue<typeof Toolbar> = "custom-toolbar-class";
-
-      const element = renderSlot(toolbarSlot, Toolbar, {
-        children: "toolbar content",
-      });
-
-      const { container } = render(element);
-      expect(container.firstChild).toHaveClass("custom-toolbar-class");
-      expect(container.firstChild).toHaveTextContent("toolbar content");
-    });
-
-    test("simulates CopilotChatAssistantMessage content passing", () => {
-      const element = renderSlot(undefined, ComponentWithContent, {
-        content: "message content",
-        className: "message-class",
-      });
-
-      const { container } = render(element);
-      expect(container.firstChild).toHaveTextContent("message content");
-      expect(container.firstChild).toHaveClass("message-class");
-    });
-
-    test("simulates subcomponent property overrides", () => {
-      // This simulates the pattern from CopilotChatMessageView where subcomponent props are overridden
-      const SubComponent: React.FC<{
-        label: string;
-        disabled?: boolean;
-        className?: string;
-      }> = ({ label, disabled, className }) => (
-        <button disabled={disabled} className={className}>
-          {label}
-        </button>
-      );
-
-      const element = renderSlot(
-        { disabled: true, className: "override-class" },
-        SubComponent,
-        { label: "Click me", disabled: false, className: "base-class" },
-      );
-
-      render(element);
-      const button = screen.getByRole("button");
-
-      expect(button).toBeDisabled(); // slot overrides base
-      expect(button).toHaveClass("override-class");
-      expect(button).not.toHaveClass("base-class");
-      expect(button).toHaveTextContent("Click me");
-    });
-  });
-
-  describe("Edge cases and error scenarios", () => {
-    test("handles React elements as slot values", () => {
-      const reactElement = <div data-testid="react-element">React Element</div>;
-
-      // React elements should be treated as objects, not functions
-      const element = renderSlot(reactElement as any, SimpleDiv, {
-        children: "fallback",
-      });
-
-      render(element);
-
-      // Should render the default component since React elements are treated as objects
-      expect(screen.queryByTestId("react-element")).not.toBeInTheDocument();
-    });
-
-    test("handles components with no props", () => {
-      const NoPropsComponent: React.FC = () => <div>No props component</div>;
-
-      const element = renderSlot(NoPropsComponent, SimpleDiv, {
-        children: "test",
-      });
-
-      render(element);
-      expect(screen.getByText("No props component")).toBeInTheDocument();
-    });
-
-    test("handles empty object slot", () => {
-      const element = renderSlot({}, SimpleDiv, { children: "test content" });
-      const { container } = render(element);
-
-      expect(container.firstChild).toHaveTextContent("test content");
-    });
-
-    test("handles component with children render prop pattern", () => {
-      const RenderPropComponent: React.FC<{
-        children: (data: { count: number }) => React.ReactNode;
-        className?: string;
-      }> = ({ children, className }) => (
-        <div className={className}>{children({ count: 5 })}</div>
-      );
-
-      const element = renderSlot(undefined, RenderPropComponent, {
-        children: ({ count }: { count: number }) => <span>Count: {count}</span>,
-        className: "render-prop-class",
-      });
-
-      const { container } = render(element);
-      expect(container.firstChild).toHaveTextContent("Count: 5");
-      expect(container.firstChild).toHaveClass("render-prop-class");
-    });
-
-    test("handles boolean and number props", () => {
-      const ComponentWithBooleans: React.FC<{
-        isVisible: boolean;
-        count: number;
-        className?: string;
-      }> = ({ isVisible, count, className }) => (
-        <div className={className}>
-          {isVisible ? `Visible with count: ${count}` : "Hidden"}
-        </div>
-      );
-
-      const element = renderSlot(
-        { isVisible: false, count: 10 },
-        ComponentWithBooleans,
-        { isVisible: true, count: 5, className: "test-class" },
-      );
-
-      const { container } = render(element);
-      expect(container.firstChild).toHaveTextContent("Hidden"); // slot overrides
-    });
-
-    test("handles array props", () => {
-      const ComponentWithArray: React.FC<{
-        items: string[];
-        className?: string;
-      }> = ({ items, className }) => (
-        <ul className={className}>
-          {items.map((item, index) => (
-            <li key={index}>{item}</li>
-          ))}
-        </ul>
-      );
-
-      const element = renderSlot(
-        { items: ["slot1", "slot2"] },
-        ComponentWithArray,
-        { items: ["base1", "base2"], className: "list-class" },
-      );
-
-      render(element);
-      expect(screen.getByText("slot1")).toBeInTheDocument();
-      expect(screen.getByText("slot2")).toBeInTheDocument();
-      expect(screen.queryByText("base1")).not.toBeInTheDocument();
-    });
-  });
-
-  describe("Performance and optimization", () => {
-    test("does not recreate elements unnecessarily", () => {
-      const renderSpy = vi.fn();
-      const TrackedComponent: React.FC<{ value: string }> = ({ value }) => {
-        renderSpy(value);
-        return <div>{value}</div>;
-      };
-
-      const element1 = renderSlot(undefined, TrackedComponent, {
-        value: "test",
-      });
-      const element2 = renderSlot(undefined, TrackedComponent, {
-        value: "test",
-      });
-
-      render(element1);
-      render(element2);
-
-      expect(renderSpy).toHaveBeenCalledTimes(2);
-      expect(renderSpy).toHaveBeenCalledWith("test");
-    });
-
-    test("handles large prop objects efficiently", () => {
-      const largePropObject: Record<string, string> = {};
-      for (let i = 0; i < 100; i++) {
-        largePropObject[`prop${i}`] = `value${i}`;
-      }
-
-      const element = renderSlot({ className: "slot-class" }, SimpleDiv, {
-        ...largePropObject,
-        children: "test",
-      });
-
-      const { container } = render(element);
-      expect(container.firstChild).toHaveClass("slot-class");
-      expect(container.firstChild).toHaveTextContent("test");
-    });
-  });
-
-  describe("Type compatibility", () => {
-    test("preserves component prop types", () => {
-      // This test ensures type safety is maintained
-      const TypedComponent: React.FC<{
-        requiredProp: string;
-        optionalProp?: number;
-        className?: string;
-      }> = ({ requiredProp, optionalProp, className }) => (
-        <div className={className}>
-          {requiredProp} - {optionalProp}
-        </div>
-      );
-
-      const element = renderSlot({ optionalProp: 42 }, TypedComponent, {
-        requiredProp: "test",
-        className: "typed-class",
-      });
-
-      const { container } = render(element);
-      expect(container.firstChild).toHaveTextContent("test - 42");
-      expect(container.firstChild).toHaveClass("typed-class");
-    });
-  });
-
-  describe("Additional bug hunting", () => {
-    test("function component slot should override default component", () => {
-      const CustomComponent: React.FC<{ children: React.ReactNode }> = ({
-        children,
-      }) => <span data-testid="definitely-custom">{children}</span>;
-
-      const element = renderSlot(CustomComponent, SimpleDiv, {
-        children: "custom content",
-      });
-      render(element);
-
-      const customElement = screen.queryByTestId("definitely-custom");
-      if (customElement) {
-        expect(customElement).toHaveTextContent("custom content");
-      } else {
-        // Fallback assertion to show what actually renders
-        expect(screen.getByText("custom content")).toBeInTheDocument();
-      }
-    });
-
-    test("React.createElement vs JSX differences", () => {
-      // Test if there are differences between React.createElement and JSX rendering
-      const TestComponent: React.FC<{ testProp: string }> = ({ testProp }) => (
-        <div data-test-prop={testProp}>createElement test</div>
-      );
-
-      const element = renderSlot(undefined, TestComponent, {
-        testProp: "test-value",
-      });
-      const { container } = render(element);
-
-      expect(container.firstChild).toHaveAttribute(
-        "data-test-prop",
-        "test-value",
-      );
-      expect(container.firstChild).toHaveTextContent("createElement test");
-    });
-
-    test("nested component slot behavior", () => {
-      const NestedComponent: React.FC<{ children: React.ReactNode }> = ({
-        children,
-      }) => (
-        <div data-testid="nested-wrapper">
-          <span data-testid="nested-inner">{children}</span>
-        </div>
-      );
-
-      const element = renderSlot(NestedComponent, SimpleDiv, {
-        children: "nested content",
-      });
-      render(element);
-
-      // Check if nested structure is preserved
-      const wrapper = screen.queryByTestId("nested-wrapper");
-      const inner = screen.queryByTestId("nested-inner");
-
-      if (wrapper && inner) {
-        expect(inner).toHaveTextContent("nested content");
-      }
-    });
-  });
-});

package/src/v2/lib/__tests__/slots.test.ts

@@ -1,56 +0,0 @@
-import { renderHook } from "@testing-library/react";
-import { describe, it, expect } from "vitest";
-import { useShallowStableRef } from "../slots";
-
-describe("useShallowStableRef", () => {
-  it("returns the same reference when called twice with shallowly equal plain objects", () => {
-    const initial = { a: 1 };
-    const { result, rerender } = renderHook(
-      ({ value }: { value: { a: number } }) => useShallowStableRef(value),
-      { initialProps: { value: initial } },
-    );
-
-    const firstRef = result.current;
-    rerender({ value: { a: 1 } }); // new object, same shape
-    expect(result.current).toBe(firstRef);
-  });
-
-  it("updates the reference when the value changes", () => {
-    const { result, rerender } = renderHook(
-      ({ value }: { value: { a: number } }) => useShallowStableRef(value),
-      { initialProps: { value: { a: 1 } } },
-    );
-
-    const firstRef = result.current;
-    rerender({ value: { a: 2 } });
-    expect(result.current).not.toBe(firstRef);
-    expect(result.current).toEqual({ a: 2 });
-  });
-
-  it("handles undefined without crashing", () => {
-    const { result } = renderHook(() =>
-      useShallowStableRef(undefined as unknown as { a: number }),
-    );
-    expect(result.current).toBeUndefined();
-  });
-
-  it("handles null without crashing", () => {
-    const { result } = renderHook(() =>
-      useShallowStableRef(null as unknown as { a: number }),
-    );
-    expect(result.current).toBeNull();
-  });
-
-  it("does not shallow-compare arrays — treats them by reference", () => {
-    const arr1 = [1, 2, 3];
-    const { result, rerender } = renderHook(
-      ({ value }: { value: number[] }) => useShallowStableRef(value),
-      { initialProps: { value: arr1 } },
-    );
-
-    const firstRef = result.current;
-    rerender({ value: [1, 2, 3] }); // new array, same contents
-    // arrays are not plain objects — reference should update
-    expect(result.current).not.toBe(firstRef);
-  });
-});

package/src/v2/lib/processPartialHtml.ts

@@ -1,45 +0,0 @@
-/**
- * Extracts all complete `<style>` blocks from the raw HTML.
- * Returns the concatenated style tags, suitable for injection into `<head>`.
- */
-export function extractCompleteStyles(html: string): string {
-  const matches = html.match(/<style\b[^>]*>[\s\S]*?<\/style>/gi);
-  return matches ? matches.join("") : "";
-}
-
-/**
- * Processes raw accumulated HTML for safe preview via innerHTML injection.
- * Pure function, no DOM dependencies.
- *
- * Pipeline (order matters):
- * 1. Strip incomplete tag at end
- * 2. Strip complete <style>, <script>, and <head> blocks
- * 3. Strip incomplete <style>/<script>/<head> blocks
- * 4. Strip incomplete HTML entities
- * 5. Extract body content (or use full string if no <body>)
- */
-export function processPartialHtml(html: string): string {
-  let result = html;
-
-  // 1. Strip incomplete tag at end — e.g. `<div class="fo`
-  result = result.replace(/<[^>]*$/, "");
-
-  // 2. Strip complete <style>, <script>, and <head> blocks
-  result = result.replace(/<(style|script|head)\b[^>]*>[\s\S]*?<\/\1>/gi, "");
-
-  // 3. Strip incomplete <style>/<script>/<head> blocks (opening tag, no close)
-  result = result.replace(/<(style|script|head)\b[^>]*>[\s\S]*$/gi, "");
-
-  // 4. Strip incomplete HTML entities — e.g. `&amp` without semicolon
-  result = result.replace(/&[a-zA-Z0-9#]*$/, "");
-
-  // 5. Extract body content
-  const bodyMatch = result.match(/<body[^>]*>([\s\S]*)/i);
-  if (bodyMatch) {
-    result = bodyMatch[1]!;
-    // Strip </body> and everything after
-    result = result.replace(/<\/body>[\s\S]*/i, "");
-  }
-
-  return result;
-}