@copilotkit/react-core 1.57.3 → 1.58.0

package/src/v2/components/chat/CopilotSidebarView.tsx

@@ -1,269 +0,0 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
-
-import CopilotChatView, {
-  CopilotChatViewProps,
-  WelcomeScreenProps,
-} from "./CopilotChatView";
-import {
-  CopilotChatConfigurationProvider,
-  useCopilotChatConfiguration,
-} from "../../providers/CopilotChatConfigurationProvider";
-import CopilotChatToggleButton from "./CopilotChatToggleButton";
-import { cn } from "../../lib/utils";
-import { CopilotModalHeader } from "./CopilotModalHeader";
-import { renderSlot, SlotValue } from "../../lib/slots";
-
-const DEFAULT_SIDEBAR_WIDTH = 480;
-const SIDEBAR_TRANSITION_MS = 260;
-
-export type CopilotSidebarViewProps = CopilotChatViewProps & {
-  header?: SlotValue<typeof CopilotModalHeader>;
-  toggleButton?: SlotValue<typeof CopilotChatToggleButton>;
-  width?: number | string;
-  defaultOpen?: boolean;
-  position?: "left" | "right";
-};
-
-export function CopilotSidebarView({
-  header,
-  toggleButton,
-  width,
-  defaultOpen = true,
-  position = "right",
-  ...props
-}: CopilotSidebarViewProps) {
-  return (
-    <CopilotChatConfigurationProvider isModalDefaultOpen={defaultOpen}>
-      <CopilotSidebarViewInternal
-        header={header}
-        toggleButton={toggleButton}
-        width={width}
-        position={position}
-        {...props}
-      />
-    </CopilotChatConfigurationProvider>
-  );
-}
-
-function CopilotSidebarViewInternal({
-  header,
-  toggleButton,
-  width,
-  position = "right",
-  ...props
-}: Omit<CopilotSidebarViewProps, "defaultOpen">) {
-  const configuration = useCopilotChatConfiguration();
-
-  const isSidebarOpen = configuration?.isModalOpen ?? false;
-
-  const sidebarRef = useRef<HTMLDivElement | null>(null);
-  const [sidebarWidth, setSidebarWidth] = useState<number | string>(
-    width ?? DEFAULT_SIDEBAR_WIDTH,
-  );
-
-  // Helper to convert width to CSS value
-  const widthToCss = (w: number | string): string => {
-    return typeof w === "number" ? `${w}px` : w;
-  };
-
-  // Helper to extract numeric value for body margin (only works with px values)
-  const widthToMargin = (w: number | string): string => {
-    if (typeof w === "number") {
-      return `${w}px`;
-    }
-    // For string values, use as-is (assumes valid CSS unit)
-    return w;
-  };
-
-  useEffect(() => {
-    // If width is explicitly provided, don't measure
-    if (width !== undefined) {
-      return;
-    }
-
-    if (typeof window === "undefined") {
-      return;
-    }
-
-    const element = sidebarRef.current;
-    if (!element) {
-      return;
-    }
-
-    const updateWidth = () => {
-      const rect = element.getBoundingClientRect();
-      if (rect.width > 0) {
-        setSidebarWidth(rect.width);
-      }
-    };
-
-    updateWidth();
-
-    if (typeof ResizeObserver !== "undefined") {
-      const observer = new ResizeObserver(() => updateWidth());
-      observer.observe(element);
-      return () => observer.disconnect();
-    }
-
-    window.addEventListener("resize", updateWidth);
-    return () => window.removeEventListener("resize", updateWidth);
-  }, [width]);
-
-  // Manage body margin for sidebar docking (desktop only).
-  // useLayoutEffect runs before paint, so defaultOpen={true} never causes a
-  // visible layout shift — the margin is already applied on the first frame.
-  const hasMounted = useRef(false);
-
-  useLayoutEffect(() => {
-    if (
-      typeof window === "undefined" ||
-      typeof window.matchMedia !== "function"
-    )
-      return;
-    if (!window.matchMedia("(min-width: 768px)").matches) return;
-
-    const marginStyleProp =
-      position === "left" ? "marginInlineStart" : "marginInlineEnd";
-    const transitionCssProp =
-      position === "left" ? "margin-inline-start" : "margin-inline-end";
-
-    if (isSidebarOpen) {
-      if (hasMounted.current) {
-        document.body.style.transition = `${transitionCssProp} ${SIDEBAR_TRANSITION_MS}ms ease`;
-      }
-      document.body.style[marginStyleProp] = widthToMargin(sidebarWidth);
-    } else if (hasMounted.current) {
-      document.body.style.transition = `${transitionCssProp} ${SIDEBAR_TRANSITION_MS}ms ease`;
-      document.body.style[marginStyleProp] = "";
-    }
-
-    hasMounted.current = true;
-
-    return () => {
-      document.body.style[marginStyleProp] = "";
-      document.body.style.transition = "";
-    };
-  }, [isSidebarOpen, sidebarWidth, position]);
-
-  const headerElement = renderSlot(header, CopilotModalHeader, {});
-  const toggleButtonElement = renderSlot(
-    toggleButton,
-    CopilotChatToggleButton,
-    position === "left" ? { className: "cpk:left-6 cpk:right-auto" } : {},
-  );
-
-  return (
-    <>
-      {toggleButtonElement}
-      <aside
-        ref={sidebarRef}
-        data-copilotkit
-        data-testid="copilot-sidebar"
-        data-copilot-sidebar
-        data-position={position}
-        className={cn(
-          "copilotKitSidebar copilotKitWindow",
-          "cpk:fixed cpk:top-0 cpk:z-[1200] cpk:flex",
-          position === "left" ? "cpk:left-0" : "cpk:right-0",
-          // Height with dvh fallback and safe area support
-          "cpk:h-[100vh] cpk:h-[100dvh] cpk:max-h-screen",
-          // Responsive width: full on mobile, custom on desktop
-          "cpk:w-full",
-          position === "left" ? "cpk:border-r" : "cpk:border-l",
-          "cpk:border-border cpk:bg-background cpk:text-foreground cpk:shadow-xl",
-          "cpk:transition-transform cpk:duration-300 cpk:ease-out",
-          isSidebarOpen
-            ? "cpk:translate-x-0"
-            : position === "left"
-              ? "cpk:-translate-x-full cpk:pointer-events-none"
-              : "cpk:translate-x-full cpk:pointer-events-none",
-        )}
-        style={
-          {
-            // Use CSS custom property for responsive width
-            ["--sidebar-width" as string]: widthToCss(sidebarWidth),
-            // Safe area insets for iOS
-            paddingTop: "env(safe-area-inset-top)",
-            paddingBottom: "env(safe-area-inset-bottom)",
-          } as React.CSSProperties
-        }
-        aria-hidden={!isSidebarOpen}
-        aria-label="Copilot chat sidebar"
-        role="complementary"
-      >
-        <div className="cpk:flex cpk:h-full cpk:w-full cpk:flex-col cpk:overflow-hidden">
-          {headerElement}
-          <div className="cpk:flex-1 cpk:overflow-hidden" data-sidebar-chat>
-            <CopilotChatView {...props} />
-          </div>
-        </div>
-      </aside>
-    </>
-  );
-}
-
-CopilotSidebarView.displayName = "CopilotSidebarView";
-
-// eslint-disable-next-line @typescript-eslint/no-namespace
-export namespace CopilotSidebarView {
-  /**
-   * Sidebar-specific welcome screen layout:
-   * - Suggestions at the top
-   * - Welcome message in the middle
-   * - Input fixed at the bottom (like normal chat)
-   */
-  export const WelcomeScreen: React.FC<WelcomeScreenProps> = ({
-    welcomeMessage,
-    input,
-    suggestionView,
-    className,
-    children,
-    ...props
-  }) => {
-    // Render the welcomeMessage slot internally
-    const BoundWelcomeMessage = renderSlot(
-      welcomeMessage,
-      CopilotChatView.WelcomeMessage,
-      {},
-    );
-
-    if (children) {
-      return (
-        <div data-copilotkit style={{ display: "contents" }}>
-          {children({
-            welcomeMessage: BoundWelcomeMessage,
-            input,
-            suggestionView,
-            className,
-            ...props,
-          })}
-        </div>
-      );
-    }
-
-    return (
-      <div
-        className={cn("cpk:h-full cpk:flex cpk:flex-col", className)}
-        {...props}
-      >
-        {/* Welcome message - centered vertically */}
-        <div className="cpk:flex-1 cpk:flex cpk:flex-col cpk:items-center cpk:justify-center cpk:px-4">
-          {BoundWelcomeMessage}
-        </div>
-
-        {/* Suggestions and input at bottom */}
-        <div className="cpk:px-8 cpk:pb-4">
-          <div className="cpk:max-w-3xl cpk:mx-auto">
-            {/* Suggestions above input */}
-            <div className="cpk:mb-4 cpk:flex cpk:justify-center">
-              {suggestionView}
-            </div>
-            {input}
-          </div>
-        </div>
-      </div>
-    );
-  };
-}
-
-export default CopilotSidebarView;

package/src/v2/components/chat/Lightbox.tsx

@@ -1,103 +0,0 @@
-import React, { useCallback, useEffect, useId, useRef, useState } from "react";
-import { createPortal, flushSync } from "react-dom";
-import { X } from "lucide-react";
-
-interface LightboxProps {
-  onClose: () => void;
-  children: React.ReactNode;
-}
-
-export function Lightbox({ onClose, children }: LightboxProps) {
-  useEffect(() => {
-    const handleKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", handleKey);
-    return () => document.removeEventListener("keydown", handleKey);
-  }, [onClose]);
-
-  if (typeof document === "undefined") return null;
-
-  return createPortal(
-    <div
-      className="cpk:fixed cpk:inset-0 cpk:z-[9999] cpk:flex cpk:items-center cpk:justify-center cpk:bg-black/80 cpk:animate-fade-in"
-      onClick={onClose}
-    >
-      <button
-        onClick={onClose}
-        className="cpk:absolute cpk:top-4 cpk:right-4 cpk:text-white cpk:bg-white/10 cpk:hover:bg-white/20 cpk:rounded-full cpk:w-10 cpk:h-10 cpk:flex cpk:items-center cpk:justify-center cpk:cursor-pointer cpk:border-none cpk:z-10"
-        aria-label="Close preview"
-      >
-        <X className="cpk:w-5 cpk:h-5" />
-      </button>
-
-      <div onClick={(e) => e.stopPropagation()}>{children}</div>
-    </div>,
-    document.body,
-  );
-}
-
-type DocWithVT = Document & {
-  startViewTransition?: (cb: () => void) => { finished: Promise<void> };
-};
-
-/**
- * Hook that manages lightbox open/close and uses the View Transition API to
- * morph the thumbnail into fullscreen content.
- *
- * The trick: `view-transition-name` must live on exactly ONE element at a time.
- * - Old state (thumbnail visible): name is on the thumbnail.
- * - New state (lightbox visible): name moves to the lightbox content.
- * `flushSync` ensures React commits the DOM change synchronously inside the
- * `startViewTransition` callback so the API can snapshot old → new correctly.
- */
-export function useLightbox() {
-  const thumbnailRef = useRef<HTMLElement>(null);
-  const [open, setOpen] = useState(false);
-  const vtName = useId();
-
-  const openLightbox = useCallback(() => {
-    const thumb = thumbnailRef.current;
-    const doc = document as DocWithVT;
-
-    if (doc.startViewTransition && thumb) {
-      thumb.style.viewTransitionName = vtName;
-
-      doc.startViewTransition(() => {
-        thumb.style.viewTransitionName = "";
-        flushSync(() => setOpen(true));
-      });
-    } else {
-      setOpen(true);
-    }
-  }, [vtName]);
-
-  const closeLightbox = useCallback(() => {
-    const thumb = thumbnailRef.current;
-    const doc = document as DocWithVT;
-
-    if (doc.startViewTransition && thumb) {
-      const transition = doc.startViewTransition(() => {
-        flushSync(() => setOpen(false));
-        thumb.style.viewTransitionName = vtName;
-      });
-      transition.finished
-        .then(() => {
-          thumb.style.viewTransitionName = "";
-        })
-        .catch(() => {
-          thumb.style.viewTransitionName = "";
-        });
-    } else {
-      setOpen(false);
-    }
-  }, [vtName]);
-
-  return {
-    thumbnailRef,
-    vtName,
-    open,
-    openLightbox,
-    closeLightbox,
-  };
-}

package/src/v2/components/chat/__tests__/CopilotChat.absentThreadConnect.test.tsx

@@ -1,66 +0,0 @@
-import React from "react";
-import { describe, it, expect, vi } from "vitest";
-import { render } from "@testing-library/react";
-import { EMPTY, Observable } from "rxjs";
-import { type BaseEvent, type RunAgentInput } from "@ag-ui/client";
-import { MockStepwiseAgent } from "../../../__tests__/utils/test-helpers";
-import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
-import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
-import { CopilotChat } from "../CopilotChat";
-
-describe("CopilotChat avoids /connect for locally-generated threadIds (ENT-314)", () => {
-  function buildAgentWithConnectSpy(): {
-    agent: MockStepwiseAgent;
-    connectSpy: ReturnType<typeof vi.fn>;
-  } {
-    const connectSpy = vi.fn();
-    class SpyAgent extends MockStepwiseAgent {
-      connect(input: RunAgentInput): Observable<BaseEvent> {
-        connectSpy(input);
-        return EMPTY;
-      }
-    }
-    return { agent: new SpyAgent(), connectSpy };
-  }
-
-  it("does not call connect() when no threadId is supplied", async () => {
-    const { agent, connectSpy } = buildAgentWithConnectSpy();
-
-    render(
-      <CopilotKitProvider agents__unsafe_dev_only={{ default: agent }}>
-        <CopilotChat welcomeScreen={false} />
-      </CopilotKitProvider>,
-    );
-
-    await new Promise((resolve) => setTimeout(resolve, 50));
-    expect(connectSpy).not.toHaveBeenCalled();
-  });
-
-  it("calls connect() when a threadId is supplied via props", async () => {
-    const { agent, connectSpy } = buildAgentWithConnectSpy();
-
-    render(
-      <CopilotKitProvider agents__unsafe_dev_only={{ default: agent }}>
-        <CopilotChat welcomeScreen={false} threadId="user-thread-abc" />
-      </CopilotKitProvider>,
-    );
-
-    await new Promise((resolve) => setTimeout(resolve, 50));
-    expect(connectSpy).toHaveBeenCalled();
-  });
-
-  it("calls connect() when a threadId is supplied via configuration provider", async () => {
-    const { agent, connectSpy } = buildAgentWithConnectSpy();
-
-    render(
-      <CopilotKitProvider agents__unsafe_dev_only={{ default: agent }}>
-        <CopilotChatConfigurationProvider threadId="config-thread-xyz">
-          <CopilotChat welcomeScreen={false} />
-        </CopilotChatConfigurationProvider>
-      </CopilotKitProvider>,
-    );
-
-    await new Promise((resolve) => setTimeout(resolve, 50));
-    expect(connectSpy).toHaveBeenCalled();
-  });
-});

package/src/v2/components/chat/__tests__/CopilotChat.attachments.test.tsx

@@ -1,168 +0,0 @@
-import React from "react";
-import { describe, it, expect, vi } from "vitest";
-import { screen, fireEvent, waitFor } from "@testing-library/react";
-import {
-  MockStepwiseAgent,
-  renderWithCopilotKit,
-} from "../../../__tests__/utils/test-helpers";
-import { CopilotChat } from "../CopilotChat";
-import type { AttachmentUploadError } from "@copilotkit/shared";
-import { type BaseEvent, type RunAgentInput } from "@ag-ui/client";
-import { Observable, EMPTY } from "rxjs";
-
-class NoopAgent extends MockStepwiseAgent {
-  run(_input: RunAgentInput): Observable<BaseEvent> {
-    return EMPTY;
-  }
-  connect(_input: RunAgentInput): Observable<BaseEvent> {
-    return EMPTY;
-  }
-}
-
-function createFile(name: string, size: number, type: string): File {
-  const content = new Uint8Array(size);
-  return new File([content], name, { type });
-}
-
-function renderChat(props: {
-  onUploadFailed?: (error: AttachmentUploadError) => void;
-  accept?: string;
-  maxSize?: number;
-  onUpload?: (file: File) => any;
-}) {
-  const agent = new NoopAgent();
-  return renderWithCopilotKit({
-    agent,
-    children: (
-      <CopilotChat
-        welcomeScreen={false}
-        attachments={{
-          enabled: true,
-          accept: props.accept,
-          maxSize: props.maxSize,
-          onUploadFailed: props.onUploadFailed,
-          onUpload: props.onUpload,
-        }}
-      />
-    ),
-  });
-}
-
-async function dropFiles(container: HTMLElement, files: File[]) {
-  const dropTarget = container.querySelector('[data-testid="copilot-chat"]');
-  if (!dropTarget) {
-    throw new Error("Could not find copilot-chat drop target");
-  }
-
-  fireEvent.dragOver(dropTarget, {
-    dataTransfer: { files, types: ["Files"] },
-  });
-  fireEvent.drop(dropTarget, {
-    dataTransfer: { files, types: ["Files"] },
-  });
-}
-
-describe("CopilotChat attachments", () => {
-  describe("onUploadFailed", () => {
-    it("fires with 'invalid-type' when file does not match accept filter", async () => {
-      const onUploadFailed = vi.fn();
-      const { container } = renderChat({
-        accept: "image/*",
-        onUploadFailed,
-      });
-
-      const pdfFile = createFile("document.pdf", 1024, "application/pdf");
-      await dropFiles(container, [pdfFile]);
-
-      await waitFor(() => {
-        expect(onUploadFailed).toHaveBeenCalledTimes(1);
-      });
-
-      const error: AttachmentUploadError = onUploadFailed.mock.calls[0][0];
-      expect(error.reason).toBe("invalid-type");
-      expect(error.file).toBe(pdfFile);
-      expect(error.message).toContain("document.pdf");
-    });
-
-    it("fires with 'file-too-large' when file exceeds maxSize", async () => {
-      const onUploadFailed = vi.fn();
-      const { container } = renderChat({
-        maxSize: 100,
-        onUploadFailed,
-      });
-
-      const largeFile = createFile("big.png", 200, "image/png");
-      await dropFiles(container, [largeFile]);
-
-      await waitFor(() => {
-        expect(onUploadFailed).toHaveBeenCalledTimes(1);
-      });
-
-      const error: AttachmentUploadError = onUploadFailed.mock.calls[0][0];
-      expect(error.reason).toBe("file-too-large");
-      expect(error.file).toBe(largeFile);
-      expect(error.message).toContain("big.png");
-    });
-
-    it("fires with 'upload-failed' when onUpload throws", async () => {
-      const onUploadFailed = vi.fn();
-      const { container } = renderChat({
-        onUpload: () => {
-          throw new Error("S3 upload failed");
-        },
-        onUploadFailed,
-      });
-
-      const file = createFile("photo.png", 50, "image/png");
-      await dropFiles(container, [file]);
-
-      await waitFor(() => {
-        expect(onUploadFailed).toHaveBeenCalledTimes(1);
-      });
-
-      const error: AttachmentUploadError = onUploadFailed.mock.calls[0][0];
-      expect(error.reason).toBe("upload-failed");
-      expect(error.file).toBe(file);
-      expect(error.message).toBe("S3 upload failed");
-    });
-
-    it("fires multiple times for multiple rejected files", async () => {
-      const onUploadFailed = vi.fn();
-      const { container } = renderChat({
-        accept: "image/*",
-        onUploadFailed,
-      });
-
-      const pdf = createFile("a.pdf", 100, "application/pdf");
-      const doc = createFile(
-        "b.docx",
-        100,
-        "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-      );
-      await dropFiles(container, [pdf, doc]);
-
-      await waitFor(() => {
-        expect(onUploadFailed).toHaveBeenCalledTimes(2);
-      });
-
-      expect(onUploadFailed.mock.calls[0][0].reason).toBe("invalid-type");
-      expect(onUploadFailed.mock.calls[1][0].reason).toBe("invalid-type");
-    });
-
-    it("does not fire for valid files", async () => {
-      const onUploadFailed = vi.fn();
-      const { container } = renderChat({
-        accept: "image/*",
-        maxSize: 10000,
-        onUploadFailed,
-      });
-
-      const validFile = createFile("photo.png", 500, "image/png");
-      await dropFiles(container, [validFile]);
-
-      // Give time for any async processing
-      await new Promise((r) => setTimeout(r, 100));
-      expect(onUploadFailed).not.toHaveBeenCalled();
-    });
-  });
-});