@copilotkit/react-core 1.57.3 → 1.58.0

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

@@ -1,129 +0,0 @@
-import React, { useCallback } from "react";
-
-import { cn } from "../../lib/utils";
-import {
-  useCopilotChatConfiguration,
-  CopilotChatDefaultLabels,
-} from "../../providers/CopilotChatConfigurationProvider";
-import { renderSlot, WithSlots } from "../../lib/slots";
-import { X } from "lucide-react";
-
-type HeaderSlots = {
-  titleContent: typeof CopilotModalHeader.Title;
-  closeButton: typeof CopilotModalHeader.CloseButton;
-};
-
-type HeaderRestProps = {
-  title?: string;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
-
-export type CopilotModalHeaderProps = WithSlots<HeaderSlots, HeaderRestProps>;
-
-export function CopilotModalHeader({
-  title,
-  titleContent,
-  closeButton,
-  children,
-  className,
-  ...rest
-}: CopilotModalHeaderProps) {
-  const configuration = useCopilotChatConfiguration();
-
-  const fallbackTitle =
-    configuration?.labels.modalHeaderTitle ??
-    CopilotChatDefaultLabels.modalHeaderTitle;
-  const resolvedTitle = title ?? fallbackTitle;
-
-  const handleClose = useCallback(() => {
-    configuration?.setModalOpen?.(false);
-  }, [configuration]);
-
-  const BoundTitle = renderSlot(titleContent, CopilotModalHeader.Title, {
-    children: resolvedTitle,
-  });
-
-  const BoundCloseButton = renderSlot(
-    closeButton,
-    CopilotModalHeader.CloseButton,
-    {
-      onClick: handleClose,
-    },
-  );
-
-  if (children) {
-    return children({
-      titleContent: BoundTitle,
-      closeButton: BoundCloseButton,
-      title: resolvedTitle,
-      ...rest,
-    });
-  }
-
-  return (
-    <header
-      data-testid="copilot-modal-header"
-      data-slot="copilot-modal-header"
-      className={cn(
-        "copilotKitHeader",
-        "cpk:flex cpk:items-center cpk:justify-between cpk:border-b cpk:border-border cpk:px-4 cpk:py-4",
-        "cpk:bg-background/95 cpk:backdrop-blur cpk:supports-[backdrop-filter]:bg-background/80",
-        className,
-      )}
-      {...rest}
-    >
-      <div className="cpk:flex cpk:w-full cpk:items-center cpk:gap-2">
-        <div className="cpk:flex-1" aria-hidden="true" />
-        <div className="cpk:flex cpk:flex-1 cpk:justify-center cpk:text-center">
-          {BoundTitle}
-        </div>
-        <div className="cpk:flex cpk:flex-1 cpk:justify-end">
-          {BoundCloseButton}
-        </div>
-      </div>
-    </header>
-  );
-}
-
-CopilotModalHeader.displayName = "CopilotModalHeader";
-
-export namespace CopilotModalHeader {
-  export const Title: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
-    children,
-    className,
-    ...props
-  }) => (
-    <div
-      data-testid="copilot-header-title"
-      className={cn(
-        "cpk:w-full cpk:text-base cpk:font-medium cpk:leading-none cpk:tracking-tight cpk:text-foreground",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-
-  export const CloseButton: React.FC<
-    React.ButtonHTMLAttributes<HTMLButtonElement>
-  > = ({ className, ...props }) => (
-    <button
-      type="button"
-      data-testid="copilot-close-button"
-      className={cn(
-        "cpk:inline-flex cpk:size-8 cpk:items-center cpk:justify-center cpk:rounded-full cpk:text-muted-foreground cpk:transition cpk:cursor-pointer",
-        "cpk:hover:bg-muted cpk:hover:text-foreground cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-ring",
-        className,
-      )}
-      aria-label="Close"
-      {...props}
-    >
-      <X className="cpk:h-4 cpk:w-4" aria-hidden="true" />
-    </button>
-  );
-}
-
-CopilotModalHeader.Title.displayName = "CopilotModalHeader.Title";
-CopilotModalHeader.CloseButton.displayName = "CopilotModalHeader.CloseButton";
-
-export default CopilotModalHeader;

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

@@ -1,81 +0,0 @@
-import React, { useEffect, useMemo } from "react";
-import { useLicenseContext } from "../../providers/CopilotKitProvider";
-import { InlineFeatureWarning } from "../license-warning-banner";
-
-import { CopilotChat, CopilotChatProps } from "./CopilotChat";
-import CopilotChatView, { CopilotChatViewProps } from "./CopilotChatView";
-import CopilotPopupView, { CopilotPopupViewProps } from "./CopilotPopupView";
-
-export type CopilotPopupProps = Omit<CopilotChatProps, "chatView"> & {
-  header?: CopilotPopupViewProps["header"];
-  toggleButton?: CopilotPopupViewProps["toggleButton"];
-  defaultOpen?: boolean;
-  width?: CopilotPopupViewProps["width"];
-  height?: CopilotPopupViewProps["height"];
-  clickOutsideToClose?: CopilotPopupViewProps["clickOutsideToClose"];
-};
-
-export function CopilotPopup({
-  header,
-  toggleButton,
-  defaultOpen,
-  width,
-  height,
-  clickOutsideToClose,
-  ...chatProps
-}: CopilotPopupProps) {
-  const { checkFeature } = useLicenseContext();
-  const isPopupLicensed = checkFeature("popup");
-
-  useEffect(() => {
-    if (!isPopupLicensed) {
-      console.warn(
-        '[CopilotKit] Warning: "popup" feature is not licensed. Visit copilotkit.ai/pricing',
-      );
-    }
-  }, [isPopupLicensed]);
-
-  const PopupViewOverride = useMemo(() => {
-    const Component: React.FC<CopilotChatViewProps> = (viewProps) => {
-      const {
-        header: viewHeader,
-        toggleButton: viewToggleButton,
-        width: viewWidth,
-        height: viewHeight,
-        clickOutsideToClose: viewClickOutsideToClose,
-        defaultOpen: viewDefaultOpen,
-        ...restProps
-      } = viewProps as CopilotPopupViewProps;
-
-      return (
-        <CopilotPopupView
-          {...(restProps as CopilotPopupViewProps)}
-          header={header ?? viewHeader}
-          toggleButton={toggleButton ?? viewToggleButton}
-          width={width ?? viewWidth}
-          height={height ?? viewHeight}
-          clickOutsideToClose={clickOutsideToClose ?? viewClickOutsideToClose}
-          defaultOpen={defaultOpen ?? viewDefaultOpen}
-        />
-      );
-    };
-
-    return Object.assign(Component, CopilotChatView);
-  }, [clickOutsideToClose, header, toggleButton, height, width, defaultOpen]);
-
-  return (
-    <>
-      {!isPopupLicensed && <InlineFeatureWarning featureName="Popup" />}
-      <CopilotChat
-        welcomeScreen={CopilotPopupView.WelcomeScreen}
-        {...chatProps}
-        isModalDefaultOpen={defaultOpen}
-        chatView={PopupViewOverride}
-      />
-    </>
-  );
-}
-
-CopilotPopup.displayName = "CopilotPopup";
-
-export default CopilotPopup;

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

@@ -1,317 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import CopilotChatView, {
-  CopilotChatViewProps,
-  WelcomeScreenProps,
-} from "./CopilotChatView";
-import CopilotChatToggleButton from "./CopilotChatToggleButton";
-import { CopilotModalHeader } from "./CopilotModalHeader";
-import { cn } from "../../lib/utils";
-import { renderSlot, SlotValue } from "../../lib/slots";
-import {
-  CopilotChatConfigurationProvider,
-  CopilotChatDefaultLabels,
-  useCopilotChatConfiguration,
-} from "../../providers/CopilotChatConfigurationProvider";
-
-const DEFAULT_POPUP_WIDTH = 420;
-const DEFAULT_POPUP_HEIGHT = 560;
-
-export type CopilotPopupViewProps = CopilotChatViewProps & {
-  header?: SlotValue<typeof CopilotModalHeader>;
-  toggleButton?: SlotValue<typeof CopilotChatToggleButton>;
-  width?: number | string;
-  height?: number | string;
-  clickOutsideToClose?: boolean;
-  defaultOpen?: boolean;
-};
-
-const dimensionToCss = (
-  value: number | string | undefined,
-  fallback: number,
-): string => {
-  if (typeof value === "number" && Number.isFinite(value)) {
-    return `${value}px`;
-  }
-
-  if (typeof value === "string" && value.trim().length > 0) {
-    return value;
-  }
-
-  return `${fallback}px`;
-};
-
-export function CopilotPopupView({
-  header,
-  toggleButton,
-  width,
-  height,
-  clickOutsideToClose,
-  defaultOpen = true,
-  className,
-  ...restProps
-}: CopilotPopupViewProps) {
-  return (
-    <CopilotChatConfigurationProvider isModalDefaultOpen={defaultOpen}>
-      <CopilotPopupViewInternal
-        header={header}
-        toggleButton={toggleButton}
-        width={width}
-        height={height}
-        clickOutsideToClose={clickOutsideToClose}
-        className={className}
-        {...restProps}
-      />
-    </CopilotChatConfigurationProvider>
-  );
-}
-
-function CopilotPopupViewInternal({
-  header,
-  toggleButton,
-  width,
-  height,
-  clickOutsideToClose,
-  className,
-  ...restProps
-}: Omit<CopilotPopupViewProps, "defaultOpen">) {
-  const configuration = useCopilotChatConfiguration();
-  const isPopupOpen = configuration?.isModalOpen ?? false;
-  const setModalOpen = configuration?.setModalOpen;
-  const labels = configuration?.labels ?? CopilotChatDefaultLabels;
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [isRendered, setIsRendered] = useState(isPopupOpen);
-  const [isAnimatingOut, setIsAnimatingOut] = useState(false);
-
-  useEffect(() => {
-    if (isPopupOpen) {
-      setIsRendered(true);
-      setIsAnimatingOut(false);
-      return;
-    }
-
-    if (!isRendered) {
-      return;
-    }
-
-    setIsAnimatingOut(true);
-    const timeout = setTimeout(() => {
-      setIsRendered(false);
-      setIsAnimatingOut(false);
-    }, 200);
-
-    return () => clearTimeout(timeout);
-  }, [isPopupOpen, isRendered]);
-
-  useEffect(() => {
-    if (!isPopupOpen) {
-      return;
-    }
-
-    if (typeof window === "undefined") {
-      return;
-    }
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        setModalOpen?.(false);
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [isPopupOpen, setModalOpen]);
-
-  useEffect(() => {
-    if (!isPopupOpen) {
-      return;
-    }
-
-    const focusTimer = setTimeout(() => {
-      const container = containerRef.current;
-      // Don't steal focus if something inside the popup (like the input) is already focused
-      if (container && !container.contains(document.activeElement)) {
-        container.focus({ preventScroll: true });
-      }
-    }, 200);
-
-    return () => clearTimeout(focusTimer);
-  }, [isPopupOpen]);
-
-  useEffect(() => {
-    if (!isPopupOpen || !clickOutsideToClose) {
-      return;
-    }
-
-    if (typeof document === "undefined") {
-      return;
-    }
-
-    const handlePointerDown = (event: PointerEvent) => {
-      const target = event.target as Node | null;
-      if (!target) {
-        return;
-      }
-
-      const container = containerRef.current;
-      if (container?.contains(target)) {
-        return;
-      }
-
-      const toggleButton = document.querySelector(
-        "[data-slot='chat-toggle-button']",
-      );
-      if (toggleButton && toggleButton.contains(target)) {
-        return;
-      }
-
-      setModalOpen?.(false);
-    };
-
-    document.addEventListener("pointerdown", handlePointerDown);
-    return () => document.removeEventListener("pointerdown", handlePointerDown);
-  }, [isPopupOpen, clickOutsideToClose, setModalOpen]);
-
-  const headerElement = useMemo(
-    () => renderSlot(header, CopilotModalHeader, {}),
-    [header],
-  );
-  const toggleButtonElement = useMemo(
-    () => renderSlot(toggleButton, CopilotChatToggleButton, {}),
-    [toggleButton],
-  );
-
-  const resolvedWidth = dimensionToCss(width, DEFAULT_POPUP_WIDTH);
-  const resolvedHeight = dimensionToCss(height, DEFAULT_POPUP_HEIGHT);
-
-  const popupStyle = useMemo(
-    () =>
-      ({
-        "--copilot-popup-width": resolvedWidth,
-        "--copilot-popup-height": resolvedHeight,
-        "--copilot-popup-max-width": "calc(100vw - 3rem)",
-        "--copilot-popup-max-height": "calc(100dvh - 7.5rem)",
-        paddingTop: "env(safe-area-inset-top)",
-        paddingBottom: "env(safe-area-inset-bottom)",
-        paddingLeft: "env(safe-area-inset-left)",
-        paddingRight: "env(safe-area-inset-right)",
-      }) as React.CSSProperties,
-    [resolvedHeight, resolvedWidth],
-  );
-
-  const popupAnimationClass =
-    isPopupOpen && !isAnimatingOut
-      ? "cpk:pointer-events-auto cpk:translate-y-0 cpk:opacity-100 cpk:md:scale-100"
-      : "cpk:pointer-events-none cpk:translate-y-4 cpk:opacity-0 cpk:md:translate-y-5 cpk:md:scale-[0.95]";
-
-  const popupContent = isRendered ? (
-    <div
-      data-copilotkit
-      className={cn(
-        "cpk:fixed cpk:inset-0 cpk:z-[1200] cpk:flex cpk:max-w-full cpk:flex-col cpk:items-stretch",
-        "cpk:md:inset-auto cpk:md:bottom-24 cpk:md:right-6 cpk:md:items-end cpk:md:gap-4",
-      )}
-    >
-      <div
-        ref={containerRef}
-        tabIndex={-1}
-        role="dialog"
-        aria-label={labels.modalHeaderTitle}
-        data-testid="copilot-popup"
-        data-copilot-popup
-        className={cn(
-          "copilotKitPopup copilotKitWindow",
-          "cpk:relative cpk:flex cpk:h-full cpk:w-full cpk:flex-col cpk:overflow-hidden cpk:bg-background cpk:text-foreground",
-          "cpk:origin-bottom cpk:focus:outline-none cpk:transform-gpu cpk:transition-transform cpk:transition-opacity cpk:duration-200 cpk:ease-out",
-          "cpk:md:transition-transform cpk:md:transition-opacity",
-          "cpk:rounded-none cpk:border cpk:border-border/0 cpk:shadow-none cpk:ring-0",
-          "cpk:md:h-[var(--copilot-popup-height)] cpk:md:w-[var(--copilot-popup-width)]",
-          "cpk:md:max-h-[var(--copilot-popup-max-height)] cpk:md:max-w-[var(--copilot-popup-max-width)]",
-          "cpk:md:origin-bottom-right cpk:md:rounded-2xl cpk:md:border-border cpk:md:shadow-xl cpk:md:ring-1 cpk:md:ring-border/40",
-          popupAnimationClass,
-        )}
-        style={popupStyle}
-      >
-        {headerElement}
-        <div className="cpk:flex-1 cpk:overflow-hidden" data-popup-chat>
-          <CopilotChatView
-            {...restProps}
-            className={cn("cpk:h-full cpk:min-h-0", className)}
-          />
-        </div>
-      </div>
-    </div>
-  ) : null;
-
-  return (
-    <>
-      {toggleButtonElement}
-      {popupContent}
-    </>
-  );
-}
-
-CopilotPopupView.displayName = "CopilotPopupView";
-
-// eslint-disable-next-line @typescript-eslint/no-namespace
-export namespace CopilotPopupView {
-  /**
-   * Popup-specific welcome screen layout:
-   * - Welcome message centered vertically
-   * - Suggestions just above input
-   * - Input fixed at the bottom
-   */
-  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>
-          {/* Suggestions above input */}
-          <div className="cpk:mb-4 cpk:flex cpk:justify-center cpk:px-4">
-            {suggestionView}
-          </div>
-          {input}
-        </div>
-      </div>
-    );
-  };
-}
-
-export default CopilotPopupView;

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

@@ -1,80 +0,0 @@
-import React, { useEffect, useMemo } from "react";
-import { useLicenseContext } from "../../providers/CopilotKitProvider";
-import { InlineFeatureWarning } from "../license-warning-banner";
-
-import { CopilotChat, CopilotChatProps } from "./CopilotChat";
-import CopilotChatView, { CopilotChatViewProps } from "./CopilotChatView";
-import {
-  CopilotSidebarView,
-  CopilotSidebarViewProps,
-} from "./CopilotSidebarView";
-
-export type CopilotSidebarProps = Omit<CopilotChatProps, "chatView"> & {
-  header?: CopilotSidebarViewProps["header"];
-  toggleButton?: CopilotSidebarViewProps["toggleButton"];
-  defaultOpen?: boolean;
-  width?: number | string;
-  position?: CopilotSidebarViewProps["position"];
-};
-
-export function CopilotSidebar({
-  header,
-  toggleButton,
-  defaultOpen,
-  width,
-  position,
-  ...chatProps
-}: CopilotSidebarProps) {
-  const { checkFeature } = useLicenseContext();
-  const isSidebarLicensed = checkFeature("sidebar");
-
-  useEffect(() => {
-    if (!isSidebarLicensed) {
-      console.warn(
-        '[CopilotKit] Warning: "sidebar" feature is not licensed. Visit copilotkit.ai/pricing',
-      );
-    }
-  }, [isSidebarLicensed]);
-
-  const SidebarViewOverride = useMemo(() => {
-    const Component: React.FC<CopilotChatViewProps> = (viewProps) => {
-      const {
-        header: viewHeader,
-        toggleButton: viewToggleButton,
-        width: viewWidth,
-        defaultOpen: viewDefaultOpen,
-        position: viewPosition,
-        ...restProps
-      } = viewProps as CopilotSidebarViewProps;
-
-      return (
-        <CopilotSidebarView
-          {...(restProps as CopilotSidebarViewProps)}
-          header={header ?? viewHeader}
-          toggleButton={toggleButton ?? viewToggleButton}
-          width={width ?? viewWidth}
-          defaultOpen={defaultOpen ?? viewDefaultOpen}
-          position={position ?? viewPosition}
-        />
-      );
-    };
-
-    return Object.assign(Component, CopilotChatView);
-  }, [header, toggleButton, width, defaultOpen, position]);
-
-  return (
-    <>
-      {!isSidebarLicensed && <InlineFeatureWarning featureName="Sidebar" />}
-      <CopilotChat
-        welcomeScreen={CopilotSidebarView.WelcomeScreen}
-        {...chatProps}
-        isModalDefaultOpen={defaultOpen}
-        chatView={SidebarViewOverride}
-      />
-    </>
-  );
-}
-
-CopilotSidebar.displayName = "CopilotSidebar";
-
-export default CopilotSidebar;