@copilotkit/react-ui 0.0.0-feat-dynamic-copilotcloud-qa-20250117190454

package/src/components/chat/Modal.tsx

@@ -0,0 +1,124 @@
+import React from "react";
+import { ChatContextProvider } from "./ChatContext";
+import { ButtonProps, HeaderProps, WindowProps } 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 { ResponseButton as DefaultResponseButton } from "./Response";
+import { CopilotChat, CopilotChatProps } from "./Chat";
+import { Markdown as DefaultRenderer } from "./Markdown";
+import { AssistantMessage as DefaultAssistantMessage } from "./messages/AssistantMessage";
+import { UserMessage as DefaultUserMessage } from "./messages/UserMessage";
+
+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>;
+}
+
+export const CopilotModal = ({
+  instructions,
+  defaultOpen = false,
+  clickOutsideToClose = true,
+  hitEscapeToClose = true,
+  onSetOpen,
+  onSubmitMessage,
+  onStopGeneration,
+  onReloadMessages,
+  shortcut = "/",
+  icons,
+  labels,
+  makeSystemMessage,
+  showResponseButton = true,
+  onInProgress,
+  Window = DefaultWindow,
+  Button = DefaultButton,
+  Header = DefaultHeader,
+  Messages = DefaultMessages,
+  Input = DefaultInput,
+  ResponseButton = DefaultResponseButton,
+  AssistantMessage = DefaultAssistantMessage,
+  UserMessage = DefaultUserMessage,
+  className,
+  children,
+}: CopilotModalProps) => {
+  const [openState, setOpenState] = React.useState(defaultOpen);
+
+  const setOpen = (open: boolean) => {
+    onSetOpen?.(open);
+    setOpenState(open);
+  };
+
+  return (
+    <ChatContextProvider icons={icons} labels={labels} open={openState} setOpen={setOpen}>
+      {children}
+      <div className={className}>
+        <Button></Button>
+        <Window
+          clickOutsideToClose={clickOutsideToClose}
+          shortcut={shortcut}
+          hitEscapeToClose={hitEscapeToClose}
+        >
+          <Header />
+          <CopilotChat
+            instructions={instructions}
+            onSubmitMessage={onSubmitMessage}
+            onStopGeneration={onStopGeneration}
+            onReloadMessages={onReloadMessages}
+            makeSystemMessage={makeSystemMessage}
+            showResponseButton={showResponseButton}
+            onInProgress={onInProgress}
+            Messages={Messages}
+            Input={Input}
+            ResponseButton={ResponseButton}
+            AssistantMessage={AssistantMessage}
+            UserMessage={UserMessage}
+          />
+        </Window>
+      </div>
+    </ChatContextProvider>
+  );
+};

package/src/components/chat/Popup.tsx

@@ -0,0 +1,57 @@
+/**
+ * <br/>
+ * <img src="/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?",
+ *   }}
+ * />
+ * ```
+ *
+ * ### 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/Response.tsx

@@ -0,0 +1,12 @@
+import { useChatContext } from "./ChatContext";
+import { ResponseButtonProps } from "./props";
+
+export const ResponseButton = ({ onClick, inProgress }: ResponseButtonProps) => {
+  const context = useChatContext();
+  return (
+    <button onClick={onClick} className="copilotKitResponseButton">
+      <span>{inProgress ? context.icons.stopIcon : context.icons.regenerateIcon}</span>
+      {inProgress ? context.labels.stopGenerating : context.labels.regenerateResponse}
+    </button>
+  );
+};

package/src/components/chat/Sidebar.tsx

@@ -0,0 +1,74 @@
+/**
+ * <br/>
+ * <img src="/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>
+ * ```
+ *
+ * ### 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,125 @@
+import {
+  CopilotContextParams,
+  extract,
+  CopilotChatSuggestionConfiguration,
+  CopilotMessagesContextParams,
+} from "@copilotkit/react-core";
+import { SuggestionsProps } from "./props";
+import { SmallSpinnerIcon } from "./Icons";
+import { CopilotChatSuggestion } from "../../types/suggestions";
+import { actionParametersToJsonSchema } from "@copilotkit/shared";
+import { CopilotRequestType } from "@copilotkit/runtime-client-gql";
+
+export function Suggestion({ title, message, onClick, partial, className }: SuggestionsProps) {
+  return (
+    <button
+      disabled={partial}
+      onClick={(e) => {
+        e.preventDefault();
+        onClick(message);
+      }}
+      className={className || "suggestion"}
+    >
+      {partial && SmallSpinnerIcon}
+      <span>{title}</span>
+    </button>
+  );
+}
+
+export const reloadSuggestions = async (
+  context: CopilotContextParams & CopilotMessagesContextParams,
+  chatSuggestionConfiguration: { [key: string]: CopilotChatSuggestionConfiguration },
+  setCurrentSuggestions: (suggestions: { title: string; message: string }[]) => void,
+  abortControllerRef: React.MutableRefObject<AbortController | null>,
+) => {
+  const abortController = abortControllerRef.current;
+
+  const tools = JSON.stringify(
+    Object.values(context.actions).map((action) => ({
+      name: action.name,
+      description: action.description,
+      jsonSchema: JSON.stringify(actionParametersToJsonSchema(action.parameters)),
+    })),
+  );
+
+  const allSuggestions: CopilotChatSuggestion[] = [];
+
+  for (const config of Object.values(chatSuggestionConfiguration)) {
+    try {
+      const numOfSuggestionsInstructions =
+        config.minSuggestions === 0
+          ? `Produce up to ${config.maxSuggestions} suggestions. ` +
+            `If there are no highly relevant suggestions you can think of, provide an empty array.`
+          : `Produce between ${config.minSuggestions} and ${config.maxSuggestions} suggestions.`;
+
+      const result = await extract({
+        context,
+        instructions:
+          "Suggest what the user could say next. Provide clear, highly relevant suggestions. Do not literally suggest function calls. ",
+        data:
+          config.instructions +
+          "\n\n" +
+          numOfSuggestionsInstructions +
+          "\n\n" +
+          "Available tools: " +
+          tools +
+          "\n\n",
+        requestType: CopilotRequestType.Task,
+        parameters: [
+          {
+            name: "suggestions",
+            type: "object[]",
+            attributes: [
+              {
+                name: "title",
+                description:
+                  "The title of the suggestion. This is shown as a button and should be short.",
+                type: "string",
+              },
+              {
+                name: "message",
+                description:
+                  "The message to send when the suggestion is clicked. This should be a clear, complete sentence and will be sent as an instruction to the AI.",
+                type: "string",
+              },
+            ],
+          },
+        ],
+        include: {
+          messages: true,
+          readable: true,
+        },
+        abortSignal: abortController?.signal,
+        stream: ({ status, args }) => {
+          const suggestions = args.suggestions || [];
+          const newSuggestions: CopilotChatSuggestion[] = [];
+          for (let i = 0; i < suggestions.length; i++) {
+            // if GPT provides too many suggestions, limit the number of suggestions
+            if (config.maxSuggestions !== undefined && i >= config.maxSuggestions) {
+              break;
+            }
+            const { title, message } = suggestions[i];
+
+            // If this is the last suggestion and the status is not complete, mark it as partial
+            const partial = i == suggestions.length - 1 && status !== "complete";
+
+            newSuggestions.push({
+              title,
+              message,
+              partial,
+              className: config.className,
+            });
+          }
+          setCurrentSuggestions([...allSuggestions, ...newSuggestions]);
+        },
+      });
+      allSuggestions.push(...result.suggestions);
+    } catch (error) {
+      console.error("Error loading suggestions", error);
+    }
+  }
+
+  if (abortControllerRef.current === abortController) {
+    abortControllerRef.current = null;
+  }
+};

package/src/components/chat/Textarea.tsx

@@ -0,0 +1,61 @@
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
+
+interface AutoResizingTextareaProps {
+  maxRows?: number;
+  placeholder?: string;
+  value: string;
+  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  autoFocus?: boolean;
+}
+
+const AutoResizingTextarea = forwardRef<HTMLTextAreaElement, AutoResizingTextareaProps>(
+  ({ maxRows = 1, placeholder, value, onChange, onKeyDown, autoFocus }, ref) => {
+    const internalTextareaRef = useRef<HTMLTextAreaElement>(null);
+    const [maxHeight, setMaxHeight] = useState<number>(0);
+
+    useImperativeHandle(ref, () => internalTextareaRef.current as HTMLTextAreaElement);
+
+    useEffect(() => {
+      const calculateMaxHeight = () => {
+        const textarea = internalTextareaRef.current;
+        if (textarea) {
+          textarea.style.height = "auto";
+          const singleRowHeight = textarea.scrollHeight;
+          setMaxHeight(singleRowHeight * maxRows);
+          if (autoFocus) {
+            textarea.focus();
+          }
+        }
+      };
+
+      calculateMaxHeight();
+    }, [maxRows]);
+
+    useEffect(() => {
+      const textarea = internalTextareaRef.current;
+      if (textarea) {
+        textarea.style.height = "auto";
+        textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
+      }
+    }, [value, maxHeight]);
+
+    return (
+      <textarea
+        ref={internalTextareaRef}
+        value={value}
+        onChange={onChange}
+        onKeyDown={onKeyDown}
+        placeholder={placeholder}
+        style={{
+          overflow: "auto",
+          resize: "none",
+          maxHeight: `${maxHeight}px`,
+        }}
+        rows={1}
+      />
+    );
+  },
+);
+
+export default AutoResizingTextarea;

package/src/components/chat/Window.tsx

@@ -0,0 +1,153 @@
+import React, { useCallback, useEffect } from "react";
+import { WindowProps } from "./props";
+import { useChatContext } from "./ChatContext";
+
+export const Window = ({
+  children,
+  clickOutsideToClose,
+  shortcut,
+  hitEscapeToClose,
+}: WindowProps) => {
+  const windowRef = React.useRef<HTMLDivElement>(null);
+
+  const { open, setOpen } = useChatContext();
+
+  const handleClickOutside = useCallback(
+    (event: MouseEvent) => {
+      if (!clickOutsideToClose) {
+        return;
+      }
+
+      const parentElement = windowRef.current?.parentElement;
+
+      let className = "";
+      if (event.target instanceof HTMLElement) {
+        className = event.target.className;
+      }
+
+      if (
+        open &&
+        parentElement &&
+        !parentElement.contains(event.target as any) &&
+        // prevent closing the window when clicking on the debug menu
+        !className.includes("copilotKitDebugMenu")
+      ) {
+        setOpen(false);
+      }
+    },
+    [clickOutsideToClose, open, setOpen],
+  );
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      const target = event.target as HTMLElement;
+      const isInput =
+        target.tagName === "INPUT" ||
+        target.tagName === "SELECT" ||
+        target.tagName === "TEXTAREA" ||
+        target.isContentEditable;
+
+      const isDescendantOfWrapper = windowRef.current?.contains(target);
+
+      if (
+        open &&
+        event.key === "Escape" &&
+        (!isInput || isDescendantOfWrapper) &&
+        hitEscapeToClose
+      ) {
+        setOpen(false);
+      } else if (
+        event.key === shortcut &&
+        ((isMacOS() && event.metaKey) || (!isMacOS() && event.ctrlKey)) &&
+        (!isInput || isDescendantOfWrapper)
+      ) {
+        setOpen(!open);
+      }
+    },
+    [hitEscapeToClose, shortcut, open, setOpen],
+  );
+
+  const adjustForMobile = useCallback(() => {
+    const copilotKitWindow = windowRef.current;
+    const vv = window.visualViewport;
+    if (!copilotKitWindow || !vv) {
+      return;
+    }
+
+    if (window.innerWidth < 640 && open) {
+      copilotKitWindow.style.height = `${vv.height}px`;
+      copilotKitWindow.style.left = `${vv.offsetLeft}px`;
+      copilotKitWindow.style.top = `${vv.offsetTop}px`;
+
+      document.body.style.position = "fixed";
+      document.body.style.width = "100%";
+      document.body.style.height = `${window.innerHeight}px`;
+      document.body.style.overflow = "hidden";
+      document.body.style.touchAction = "none";
+
+      // Prevent scrolling on iOS
+      document.body.addEventListener("touchmove", preventScroll, {
+        passive: false,
+      });
+    } else {
+      copilotKitWindow.style.height = "";
+      copilotKitWindow.style.left = "";
+      copilotKitWindow.style.top = "";
+      document.body.style.position = "";
+      document.body.style.height = "";
+      document.body.style.width = "";
+      document.body.style.overflow = "";
+      document.body.style.top = "";
+      document.body.style.touchAction = "";
+
+      document.body.removeEventListener("touchmove", preventScroll);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener("resize", adjustForMobile);
+      adjustForMobile();
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+      if (window.visualViewport) {
+        window.visualViewport.removeEventListener("resize", adjustForMobile);
+      }
+    };
+  }, [adjustForMobile, handleClickOutside, handleKeyDown]);
+
+  return (
+    <div className={`copilotKitWindow${open ? " open" : ""}`} ref={windowRef}>
+      {children}
+    </div>
+  );
+};
+
+const preventScroll = (event: TouchEvent): void => {
+  let targetElement = event.target as Element;
+
+  // Function to check if the target has the parent with a given class
+  const hasParentWithClass = (element: Element, className: string): boolean => {
+    while (element && element !== document.body) {
+      if (element.classList.contains(className)) {
+        return true;
+      }
+      element = element.parentElement!;
+    }
+    return false;
+  };
+
+  // Check if the target of the touch event is inside an element with the 'copilotKitMessages' class
+  if (!hasParentWithClass(targetElement, "copilotKitMessages")) {
+    event.preventDefault();
+  }
+};
+
+function isMacOS() {
+  return /Mac|iMac|Macintosh/i.test(navigator.userAgent);
+}

package/src/components/chat/index.tsx

@@ -0,0 +1,8 @@
+export * from "./props";
+export { CopilotPopup } from "./Popup";
+export { CopilotSidebar } from "./Sidebar";
+export { CopilotChat } from "./Chat";
+export { Markdown } from "./Markdown";
+export { AssistantMessage } from "./messages/AssistantMessage";
+export { UserMessage } from "./messages/UserMessage";
+export { useChatContext } from "./ChatContext";

package/src/components/chat/messages/AssistantMessage.tsx

@@ -0,0 +1,20 @@
+import { AssistantMessageProps } from "../props";
+import { useChatContext } from "../ChatContext";
+import { Markdown } from "../Markdown";
+
+export const AssistantMessage = (props: AssistantMessageProps) => {
+  const { icons } = useChatContext();
+  const { message, isLoading, subComponent } = props;
+
+  return (
+    <>
+      {(message || isLoading) && (
+        <div className="copilotKitMessage copilotKitAssistantMessage">
+          {message && <Markdown content={message || ""} />}
+          {isLoading && icons.spinnerIcon}
+        </div>
+      )}
+      <div style={{ marginBottom: "0.5rem" }}>{subComponent}</div>
+    </>
+  );
+};