@copilotkit/react-core 1.54.1-next.6 → 1.55.0-next.7

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

@@ -0,0 +1,129 @@
+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

@@ -0,0 +1,81 @@
+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

@@ -0,0 +1,317 @@
+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

@@ -0,0 +1,76 @@
+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;
+};
+
+export function CopilotSidebar({
+  header,
+  toggleButton,
+  defaultOpen,
+  width,
+  ...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,
+        ...restProps
+      } = viewProps as CopilotSidebarViewProps;
+
+      return (
+        <CopilotSidebarView
+          {...(restProps as CopilotSidebarViewProps)}
+          header={header ?? viewHeader}
+          toggleButton={toggleButton ?? viewToggleButton}
+          width={width ?? viewWidth}
+          defaultOpen={defaultOpen ?? viewDefaultOpen}
+        />
+      );
+    };
+
+    return Object.assign(Component, CopilotChatView);
+  }, [header, toggleButton, width, defaultOpen]);
+
+  return (
+    <>
+      {!isSidebarLicensed && <InlineFeatureWarning featureName="Sidebar" />}
+      <CopilotChat
+        welcomeScreen={CopilotSidebarView.WelcomeScreen}
+        {...chatProps}
+        isModalDefaultOpen={defaultOpen}
+        chatView={SidebarViewOverride}
+      />
+    </>
+  );
+}
+
+CopilotSidebar.displayName = "CopilotSidebar";
+
+export default CopilotSidebar;