@copilotkit/react-ui 0.0.0-0.0.0-max-changeset-10101010101010-20260109191632

package/src/components/chat/Messages.tsx

@@ -0,0 +1,206 @@
+import React, { useEffect, useMemo, useRef } from "react";
+import { MessagesProps } from "./props";
+import { useChatContext } from "./ChatContext";
+import { Message } from "@copilotkit/shared";
+import { useCopilotChatInternal } from "@copilotkit/react-core";
+import { LegacyRenderMessage, LegacyRenderProps } from "./messages/LegacyRenderMessage";
+
+export const Messages = ({
+  inProgress,
+  children,
+  RenderMessage,
+  AssistantMessage,
+  UserMessage,
+  ErrorMessage,
+  ImageRenderer,
+  onRegenerate,
+  onCopy,
+  onThumbsUp,
+  onThumbsDown,
+  messageFeedback,
+  markdownTagRenderers,
+  chatError,
+
+  // Legacy props
+  RenderTextMessage,
+  RenderActionExecutionMessage,
+  RenderAgentStateMessage,
+  RenderResultMessage,
+  RenderImageMessage,
+}: MessagesProps) => {
+  const { labels, icons } = useChatContext();
+  const { messages: visibleMessages, interrupt } = useCopilotChatInternal();
+  const initialMessages = useMemo(() => makeInitialMessages(labels.initial), [labels.initial]);
+  const messages = [...initialMessages, ...visibleMessages];
+  const { messagesContainerRef, messagesEndRef } = useScrollToBottom(messages);
+
+  // Check if any legacy props are provided
+  const hasLegacyProps = !!(
+    RenderTextMessage ||
+    RenderActionExecutionMessage ||
+    RenderAgentStateMessage ||
+    RenderResultMessage ||
+    RenderImageMessage
+  );
+
+  // Show deprecation warning if legacy props are used
+  useEffect(() => {
+    if (hasLegacyProps) {
+      console.warn(
+        "[CopilotKit] Legacy message render props (RenderTextMessage, RenderActionExecutionMessage, etc.) are deprecated. " +
+          "Please use the unified 'RenderMessage' prop instead. " +
+          "See migration guide: https://docs.copilotkit.ai/migration/render-message",
+      );
+    }
+  }, [hasLegacyProps]);
+
+  // Create legacy props object for the adapter
+  const legacyProps: LegacyRenderProps = useMemo(
+    () => ({
+      RenderTextMessage,
+      RenderActionExecutionMessage,
+      RenderAgentStateMessage,
+      RenderResultMessage,
+      RenderImageMessage,
+    }),
+    [
+      RenderTextMessage,
+      RenderActionExecutionMessage,
+      RenderAgentStateMessage,
+      RenderResultMessage,
+      RenderImageMessage,
+    ],
+  );
+
+  // Determine which render component to use
+  const MessageRenderer = hasLegacyProps
+    ? (props: any) => <LegacyRenderMessage {...props} legacyProps={legacyProps} />
+    : RenderMessage;
+
+  const LoadingIcon = () => <span>{icons.activityIcon}</span>;
+
+  return (
+    <div className="copilotKitMessages" ref={messagesContainerRef}>
+      <div className="copilotKitMessagesContainer">
+        {messages.map((message, index) => {
+          const isCurrentMessage = index === messages.length - 1;
+          return (
+            <MessageRenderer
+              key={index}
+              message={message}
+              messages={messages}
+              inProgress={inProgress}
+              index={index}
+              isCurrentMessage={isCurrentMessage}
+              AssistantMessage={AssistantMessage}
+              UserMessage={UserMessage}
+              ImageRenderer={ImageRenderer}
+              onRegenerate={onRegenerate}
+              onCopy={onCopy}
+              onThumbsUp={onThumbsUp}
+              onThumbsDown={onThumbsDown}
+              messageFeedback={messageFeedback}
+              markdownTagRenderers={markdownTagRenderers}
+            />
+          );
+        })}
+        {messages[messages.length - 1]?.role === "user" && inProgress && <LoadingIcon />}
+        {interrupt}
+        {chatError && ErrorMessage && <ErrorMessage error={chatError} isCurrentMessage />}
+      </div>
+      <footer className="copilotKitMessagesFooter" ref={messagesEndRef}>
+        {children}
+      </footer>
+    </div>
+  );
+};
+
+function makeInitialMessages(initial: string | string[] | undefined): Message[] {
+  if (!initial) return [];
+
+  if (Array.isArray(initial)) {
+    return initial.map((message) => {
+      return {
+        id: message,
+        role: "assistant",
+        content: message,
+      };
+    });
+  }
+
+  return [
+    {
+      id: initial,
+      role: "assistant",
+      content: initial,
+    },
+  ];
+}
+
+export function useScrollToBottom(messages: Message[]) {
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const messagesContainerRef = useRef<HTMLDivElement | null>(null);
+  const isProgrammaticScrollRef = useRef(false);
+  const isUserScrollUpRef = useRef(false);
+
+  const scrollToBottom = () => {
+    if (messagesContainerRef.current && messagesEndRef.current) {
+      isProgrammaticScrollRef.current = true;
+      messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
+    }
+  };
+
+  const handleScroll = () => {
+    if (isProgrammaticScrollRef.current) {
+      isProgrammaticScrollRef.current = false;
+      return;
+    }
+
+    if (messagesContainerRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;
+      isUserScrollUpRef.current = scrollTop + clientHeight < scrollHeight;
+    }
+  };
+
+  useEffect(() => {
+    const container = messagesContainerRef.current;
+    if (container) {
+      container.addEventListener("scroll", handleScroll);
+    }
+    return () => {
+      if (container) {
+        container.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    const container = messagesContainerRef.current;
+    if (!container) {
+      return;
+    }
+
+    const mutationObserver = new MutationObserver(() => {
+      if (!isUserScrollUpRef.current) {
+        scrollToBottom();
+      }
+    });
+
+    mutationObserver.observe(container, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+
+    return () => {
+      mutationObserver.disconnect();
+    };
+  }, []);
+
+  useEffect(() => {
+    isUserScrollUpRef.current = false;
+    scrollToBottom();
+  }, [messages.filter((m) => m.role === "user").length]);
+
+  return { messagesEndRef, messagesContainerRef };
+}

package/src/components/chat/Modal.tsx

@@ -0,0 +1,220 @@
+import React, { useMemo, useCallback, useEffect, useRef } from "react";
+import { ChatContextProvider, useChatContext } from "./ChatContext";
+import { ButtonProps, HeaderProps, WindowProps, CopilotObservabilityHooks } from "./props";
+import { Window as DefaultWindow } from "./Window";
+import { Button as DefaultButton } from "./Button";
+import { Header as DefaultHeader } from "./Header";
+import { Messages as DefaultMessages } from "./Messages";
+import { Input as DefaultInput } from "./Input";
+import { CopilotChat, CopilotChatProps } from "./Chat";
+import { AssistantMessage as DefaultAssistantMessage } from "./messages/AssistantMessage";
+import { UserMessage as DefaultUserMessage } from "./messages/UserMessage";
+import { useCopilotContext } from "@copilotkit/react-core";
+import {
+  CopilotKitError,
+  CopilotKitErrorCode,
+  Severity,
+  ErrorVisibility,
+  styledConsole,
+} from "@copilotkit/shared";
+
+export interface CopilotModalProps extends CopilotChatProps {
+  /**
+   * Whether the chat window should be open by default.
+   * @default false
+   */
+  defaultOpen?: boolean;
+
+  /**
+   * If the chat window should close when the user clicks outside of it.
+   * @default true
+   */
+  clickOutsideToClose?: boolean;
+
+  /**
+   * If the chat window should close when the user hits the Escape key.
+   * @default true
+   */
+  hitEscapeToClose?: boolean;
+
+  /**
+   * The shortcut key to open the chat window.
+   * Uses Command-[shortcut] on a Mac and Ctrl-[shortcut] on Windows.
+   * @default '/'
+   */
+  shortcut?: string;
+
+  /**
+   * A callback that gets called when the chat window opens or closes.
+   */
+  onSetOpen?: (open: boolean) => void;
+
+  /**
+   * A custom Window component to use instead of the default.
+   */
+  Window?: React.ComponentType<WindowProps>;
+
+  /**
+   * A custom Button component to use instead of the default.
+   */
+  Button?: React.ComponentType<ButtonProps>;
+
+  /**
+   * A custom Header component to use instead of the default.
+   */
+  Header?: React.ComponentType<HeaderProps>;
+}
+
+// Inner component that has access to the Copilot context
+const CopilotModalInner = ({
+  observabilityHooks,
+  onSetOpen,
+  clickOutsideToClose,
+  hitEscapeToClose,
+  shortcut,
+  className,
+  children,
+  Window,
+  Button,
+  Header,
+  ...chatProps
+}: Omit<CopilotModalProps, "icons" | "labels" | "defaultOpen"> & {
+  Window: React.ComponentType<WindowProps>;
+  Button: React.ComponentType<ButtonProps>;
+  Header: React.ComponentType<HeaderProps>;
+  clickOutsideToClose: boolean;
+  hitEscapeToClose: boolean;
+  shortcut: string;
+}) => {
+  const { copilotApiConfig, setBannerError } = useCopilotContext();
+
+  // Destructure stable values to avoid object reference changes
+  const { publicApiKey } = copilotApiConfig;
+
+  // Helper function to trigger event hooks only if publicApiKey is provided
+  const triggerObservabilityHook = useCallback(
+    (hookName: keyof CopilotObservabilityHooks, ...args: any[]) => {
+      if (publicApiKey && observabilityHooks?.[hookName]) {
+        (observabilityHooks[hookName] as any)(...args);
+      }
+      if (observabilityHooks?.[hookName] && !publicApiKey) {
+        setBannerError(
+          new CopilotKitError({
+            message: "observabilityHooks requires a publicApiKey to function.",
+            code: CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,
+            severity: Severity.CRITICAL,
+            visibility: ErrorVisibility.BANNER,
+          }),
+        );
+        styledConsole.publicApiKeyRequired("observabilityHooks");
+      }
+    },
+    [publicApiKey, observabilityHooks, setBannerError],
+  );
+
+  const { open } = useChatContext();
+  const prevOpen = useRef(open);
+
+  // Monitor open state changes and trigger event hooks
+  useEffect(() => {
+    if (prevOpen.current !== open) {
+      onSetOpen?.(open);
+
+      // Trigger chat minimize/expand events
+      if (open) {
+        triggerObservabilityHook("onChatExpanded");
+      } else {
+        triggerObservabilityHook("onChatMinimized");
+      }
+      prevOpen.current = open;
+    }
+  }, [open, onSetOpen, triggerObservabilityHook]);
+
+  const memoizedHeader = useMemo(() => <Header />, [Header]);
+  const memoizedChildren = useMemo(() => children, [children]);
+
+  return (
+    <>
+      {memoizedChildren}
+      <div className={className}>
+        <Button></Button>
+        <Window
+          clickOutsideToClose={clickOutsideToClose}
+          shortcut={shortcut}
+          hitEscapeToClose={hitEscapeToClose}
+        >
+          {memoizedHeader}
+          <CopilotChat {...chatProps} observabilityHooks={observabilityHooks} />
+        </Window>
+      </div>
+    </>
+  );
+};
+
+export const CopilotModal = ({
+  instructions,
+  defaultOpen = false,
+  clickOutsideToClose = true,
+  hitEscapeToClose = true,
+  onSetOpen,
+  onSubmitMessage,
+  onStopGeneration,
+  onReloadMessages,
+  shortcut = "/",
+  icons,
+  labels,
+  makeSystemMessage,
+  onInProgress,
+  Window = DefaultWindow,
+  Button = DefaultButton,
+  Header = DefaultHeader,
+  Messages = DefaultMessages,
+  Input = DefaultInput,
+  AssistantMessage = DefaultAssistantMessage,
+  UserMessage = DefaultUserMessage,
+  onThumbsUp,
+  onThumbsDown,
+  onCopy,
+  onRegenerate,
+  markdownTagRenderers,
+  className,
+  children,
+  observabilityHooks,
+  ...props
+}: CopilotModalProps) => {
+  const [openState, setOpenState] = React.useState(defaultOpen);
+
+  return (
+    <ChatContextProvider icons={icons} labels={labels} open={openState} setOpen={setOpenState}>
+      <CopilotModalInner
+        observabilityHooks={observabilityHooks}
+        onSetOpen={onSetOpen}
+        clickOutsideToClose={clickOutsideToClose ?? true}
+        hitEscapeToClose={hitEscapeToClose ?? true}
+        shortcut={shortcut ?? "/"}
+        className={className}
+        Window={Window}
+        Button={Button}
+        Header={Header}
+        instructions={instructions}
+        onSubmitMessage={onSubmitMessage}
+        onStopGeneration={onStopGeneration}
+        onReloadMessages={onReloadMessages}
+        makeSystemMessage={makeSystemMessage}
+        onInProgress={onInProgress}
+        Messages={Messages}
+        Input={Input}
+        AssistantMessage={AssistantMessage}
+        UserMessage={UserMessage}
+        onThumbsUp={onThumbsUp}
+        onThumbsDown={onThumbsDown}
+        onCopy={onCopy}
+        onRegenerate={onRegenerate}
+        markdownTagRenderers={markdownTagRenderers}
+        {...props}
+      >
+        {children}
+      </CopilotModalInner>
+    </ChatContextProvider>
+  );
+};

package/src/components/chat/Popup.tsx

@@ -0,0 +1,77 @@
+/**
+ * <br/>
+ * <img src="https://cdn.copilotkit.ai/docs/copilotkit/images/CopilotPopup.gif" width="500" />
+ *
+ * A chatbot popup component for the CopilotKit framework. The component allows for a high degree
+ * of customization through various props and custom CSS.
+ *
+ * See [CopilotSidebar](/reference/components/chat/CopilotSidebar) for a sidebar version of this component.
+ *
+ * ## Install Dependencies
+ *
+ * This component is part of the [@copilotkit/react-ui](https://npmjs.com/package/@copilotkit/react-ui) package.
+ *
+ * ```shell npm2yarn \"@copilotkit/react-ui"\
+ * npm install @copilotkit/react-core @copilotkit/react-ui
+ * ```
+ * ## Usage
+ *
+ * ```tsx
+ * import { CopilotPopup } from "@copilotkit/react-ui";
+ * import "@copilotkit/react-ui/styles.css";
+ *
+ * <CopilotPopup
+ *   labels={{
+ *     title: "Your Assistant",
+ *     initial: "Hi! 👋 How can I assist you today?",
+ *   }}
+ * />
+ * ```
+ *
+ * ### With Observability Hooks
+ *
+ * To monitor user interactions, provide the `observabilityHooks` prop.
+ * **Note:** This requires a `publicApiKey` in the `<CopilotKit>` provider.
+ *
+ * ```tsx
+ * <CopilotKit publicApiKey="YOUR_PUBLIC_API_KEY">
+ *   <CopilotPopup
+ *     observabilityHooks={{
+ *       onChatExpanded: () => {
+ *         console.log("Popup opened");
+ *       },
+ *       onChatMinimized: () => {
+ *         console.log("Popup closed");
+ *       },
+ *     }}
+ *   />
+ * </CopilotKit>
+ * ```
+ *
+ * ### Look & Feel
+ *
+ * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:
+ * ```tsx title="YourRootComponent.tsx"
+ * ...
+ * import "@copilotkit/react-ui/styles.css"; // [!code highlight]
+ *
+ * export function YourRootComponent() {
+ *   return (
+ *     <CopilotKit>
+ *       ...
+ *     </CopilotKit>
+ *   );
+ * }
+ * ```
+ * For more information about how to customize the styles, check out the [Customize Look & Feel](/guides/custom-look-and-feel/customize-built-in-ui-components) guide.
+ */
+
+import { CopilotModal, CopilotModalProps } from "./Modal";
+
+export function CopilotPopup(props: CopilotModalProps) {
+  props = {
+    ...props,
+    className: props.className ? props.className + " copilotKitPopup" : "copilotKitPopup",
+  };
+  return <CopilotModal {...props}>{props.children}</CopilotModal>;
+}

package/src/components/chat/PoweredByTag.tsx

@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from "react";
+import { useDarkMode } from "../../hooks/use-dark-mode";
+
+export function PoweredByTag({ showPoweredBy = true }: { showPoweredBy?: boolean }) {
+  const [mounted, setMounted] = useState(false);
+  const isDark = useDarkMode();
+
+  /*
+    note(tylerslaton):
+
+    Ensure we only use the isDark computed value after client-side mount.
+    This prevents hydration mismatches by using a default color on the
+    server and initial client render, then updating to the correct
+    dark mode color after hydration is complete.
+  */
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!showPoweredBy) {
+    return null;
+  }
+
+  const poweredByStyle = {
+    visibility: "visible",
+    display: "block",
+    position: "static",
+    textAlign: "center",
+    fontSize: "12px",
+    padding: "3px 0",
+    color: mounted && isDark ? "rgb(69, 69, 69)" : "rgb(214, 214, 214)",
+  };
+
+  return (
+    <div>
+      {/*@ts-expect-error -- expecting position not to be a string, but it can be.*/}
+      <p className="poweredBy" style={poweredByStyle}>
+        Powered by CopilotKit
+      </p>
+    </div>
+  );
+}

package/src/components/chat/Sidebar.tsx

@@ -0,0 +1,96 @@
+/**
+ * <br/>
+ * <img src="https://cdn.copilotkit.ai/docs/copilotkit/images/CopilotSidebar.gif" width="500" />
+ *
+ * A chatbot sidebar component for the CopilotKit framework. Highly customizable through various props and custom CSS.
+ *
+ * See [CopilotPopup](/reference/components/chat/CopilotPopup) for a popup version of this component.
+ *
+ * ## Install Dependencies
+ *
+ * This component is part of the [@copilotkit/react-ui](https://npmjs.com/package/@copilotkit/react-ui) package.
+ *
+ * ```shell npm2yarn \"@copilotkit/react-ui"\
+ * npm install @copilotkit/react-core @copilotkit/react-ui
+ * ```
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * import { CopilotSidebar } from "@copilotkit/react-ui";
+ * import "@copilotkit/react-ui/styles.css";
+ *
+ * <CopilotSidebar
+ *   labels={{
+ *     title: "Your Assistant",
+ *     initial: "Hi! 👋 How can I assist you today?",
+ *   }}
+ * >
+ *   <YourApp/>
+ * </CopilotSidebar>
+ * ```
+ *
+ * ### With Observability Hooks
+ *
+ * To monitor user interactions, provide the `observabilityHooks` prop.
+ * **Note:** This requires a `publicApiKey` in the `<CopilotKit>` provider.
+ *
+ * ```tsx
+ * <CopilotKit publicApiKey="YOUR_PUBLIC_API_KEY">
+ *   <CopilotSidebar
+ *     observabilityHooks={{
+ *       onChatExpanded: () => {
+ *         console.log("Sidebar opened");
+ *       },
+ *       onChatMinimized: () => {
+ *         console.log("Sidebar closed");
+ *       },
+ *     }}
+ *   >
+ *     <YourApp/>
+ *   </CopilotSidebar>
+ * </CopilotKit>
+ * ```
+ *
+ * ### Look & Feel
+ *
+ * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:
+ * ```tsx title="YourRootComponent.tsx"
+ * ...
+ * import "@copilotkit/react-ui/styles.css"; // [!code highlight]
+ *
+ * export function YourRootComponent() {
+ *   return (
+ *     <CopilotKit>
+ *       ...
+ *     </CopilotKit>
+ *   );
+ * }
+ * ```
+ * For more information about how to customize the styles, check out the [Customize Look & Feel](/guides/custom-look-and-feel/customize-built-in-ui-components) guide.
+ */
+import React, { useState } from "react";
+import { CopilotModal, CopilotModalProps } from "./Modal";
+
+export function CopilotSidebar(props: CopilotModalProps) {
+  props = {
+    ...props,
+    className: props.className ? props.className + " copilotKitSidebar" : "copilotKitSidebar",
+  };
+  const [expandedClassName, setExpandedClassName] = useState(
+    props.defaultOpen ? "sidebarExpanded" : "",
+  );
+
+  const onSetOpen = (open: boolean) => {
+    props.onSetOpen?.(open);
+    setExpandedClassName(open ? "sidebarExpanded" : "");
+  };
+
+  return (
+    <div className={`copilotKitSidebarContentWrapper ${expandedClassName}`}>
+      <CopilotModal {...props} {...{ onSetOpen }}>
+        {props.children}
+      </CopilotModal>
+    </div>
+  );
+}

package/src/components/chat/Suggestion.tsx

@@ -0,0 +1,29 @@
+import { useCopilotChatInternal } from "@copilotkit/react-core";
+import { SmallSpinnerIcon } from "./Icons";
+
+interface SuggestionsProps {
+  title: string;
+  message: string;
+  partial?: boolean;
+  className?: string;
+  onClick: () => void;
+}
+
+export function Suggestion({ title, onClick, partial, className }: SuggestionsProps) {
+  if (!title) return null;
+  const { isLoading } = useCopilotChatInternal();
+
+  return (
+    <button
+      disabled={partial || isLoading}
+      onClick={(e) => {
+        e.preventDefault();
+        onClick();
+      }}
+      className={className || (partial ? "suggestion loading" : "suggestion")}
+      data-test-id="suggestion"
+    >
+      {partial ? SmallSpinnerIcon : <span>{title}</span>}
+    </button>
+  );
+}

package/src/components/chat/Suggestions.tsx

@@ -0,0 +1,23 @@
+import { Suggestion } from "./Suggestion";
+import { RenderSuggestionsListProps } from "./props";
+
+export function Suggestions({
+  suggestions,
+  onSuggestionClick,
+  isLoading,
+}: RenderSuggestionsListProps) {
+  return (
+    <div className="suggestions">
+      {suggestions.map((suggestion, index) => (
+        <Suggestion
+          key={index}
+          title={suggestion.title}
+          message={suggestion.message}
+          partial={suggestion.isLoading ?? suggestion.partial ?? isLoading}
+          className={suggestion.className}
+          onClick={() => onSuggestionClick(suggestion.message)}
+        />
+      ))}
+    </div>
+  );
+}