@copilotkit/react-ui 0.22.0 → 0.36.0-mme-pre.1

package/src/components/chat/Chat.tsx

@@ -1,21 +1,66 @@
-import React, { useEffect } from "react";
-import { CopilotChatIcons, ChatContextProvider, CopilotChatLabels } from "./ChatContext";
-import { SystemMessageFunction, useCopilotChat } from "@copilotkit/react-core";
+/**
+ * An embeddable chat panel for CopilotKit.
+ *
+ * <img src="/images/CopilotChat/CopilotChat.gif" width="500" />
+ *
+ * A chatbot panel component for the CopilotKit framework. The component allows for a high degree
+ * of customization through various props and custom CSS.
+ *
+ * <RequestExample>
+ *   ```jsx CopilotChat Example
+ *   import { CopilotChat } from "@copilotkit/react-ui";
+ *
+ *   <CopilotChat
+ *     labels={{
+ *       title: "Your Assistant",
+ *       initial: "Hi! 👋 How can I assist you today?",
+ *     }}
+ *   />
+ *   ```
+ * </RequestExample>
+ *
+ * ## Custom CSS
+ *
+ * You can customize the colors of the panel by overriding the CSS variables
+ * defined in the [default styles](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-ui/src/css/colors.css).
+ *
+ * For example, to set the primary color to purple:
+ *
+ * ```jsx
+ * <div style={{ "--copilot-kit-primary-color": "#7D5BA6" }}>
+ *   <CopilotPopup />
+ * </div>
+ * ```
+ *
+ * To further customize the panel, you can override the CSS classes defined
+ * [here](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-ui/src/css/).
+ *
+ * For example:
+ *
+ * ```css
+ * .copilotKitButton {
+ *   border-radius: 0;
+ * }
+ * ```
+ */
+
 import {
-  ButtonProps,
-  HeaderProps,
-  WindowProps,
-  MessagesProps,
-  InputProps,
-  ResponseButtonProps,
-} from "./props";
-import { Window as DefaultWindow } from "./Window";
-import { Button as DefaultButton } from "./Button";
-import { Header as DefaultHeader } from "./Header";
+  ChatContext,
+  ChatContextProvider,
+  CopilotChatIcons,
+  CopilotChatLabels,
+} from "./ChatContext";
 import { Messages as DefaultMessages } from "./Messages";
 import { Input as DefaultInput } from "./Input";
-import { nanoid } from "nanoid";
 import { ResponseButton as DefaultResponseButton } from "./Response";
+import { Suggestion } from "./Suggestion";
+import React, { useEffect, useRef, useState } from "react";
+import { SystemMessageFunction, useCopilotChat, useCopilotContext } from "@copilotkit/react-core";
+import { nanoid } from "nanoid";
+import { reloadSuggestions } from "./Suggestion";
+import { CopilotChatSuggestion } from "../../types/suggestions";
+import { Message } from "@copilotkit/shared";
+import { InputProps, MessagesProps, ResponseButtonProps } from "./props";
 
 /**
  * Props for CopilotChat component.
@@ -31,29 +76,6 @@ export interface CopilotChatProps {
    */
   instructions?: string;
 
-  /**
-   * 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;
-
-  /**
-   * A callback that gets called when the chat window opens or closes.
-   */
-  onSetOpen?: (open: boolean) => void;
-
   /**
    * A callback that gets called when the in progress state changes.
    */
@@ -64,13 +86,6 @@ export interface CopilotChatProps {
    */
   onSubmitMessage?: (message: string) => void;
 
-  /**
-   * The shortcut key to open the chat window.
-   * Uses Command-<shortcut> on a Mac and Ctrl-<shortcut> on Windows.
-   * @default "e"
-   */
-  shortcut?: string;
-
   /**
    * Icons can be used to set custom icons for the chat window.
    */
@@ -95,21 +110,6 @@ export interface CopilotChatProps {
    */
   showResponseButton?: boolean;
 
-  /**
-   * 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>;
-
   /**
    * A custom Messages component to use instead of the default.
    */
@@ -136,75 +136,134 @@ export interface CopilotChatProps {
   children?: React.ReactNode;
 }
 
-export const CopilotChat = ({
+export function CopilotChat({
   instructions,
-  defaultOpen = false,
-  clickOutsideToClose = true,
-  hitEscapeToClose = true,
-  onSetOpen,
   onSubmitMessage,
-  shortcut = "/",
   icons,
   labels,
   makeSystemMessage,
   showResponseButton = true,
   onInProgress,
-  Window = DefaultWindow,
-  Button = DefaultButton,
-  Header = DefaultHeader,
   Messages = DefaultMessages,
   Input = DefaultInput,
   ResponseButton = DefaultResponseButton,
   className,
-  children,
-}: CopilotChatProps) => {
+}: CopilotChatProps) {
+  const { visibleMessages, isLoading, currentSuggestions, sendMessage, stop, reload } =
+    useCopilotChatLogic(instructions, makeSystemMessage, onInProgress, onSubmitMessage);
+
+  const context = React.useContext(ChatContext);
+  let open = true;
+  let setOpen: (open: boolean) => void = () => {};
+  if (context) {
+    icons = context.icons;
+    labels = context.labels;
+    open = context.open;
+    setOpen = context.setOpen;
+  }
+
+  return (
+    <ChatContextProvider icons={icons} labels={labels} open={open} setOpen={setOpen}>
+      <div className={`copilotKitPanel ${className}`}>
+        <Messages messages={visibleMessages} inProgress={isLoading}>
+          {currentSuggestions.length > 0 && (
+            <div>
+              <h6>Suggested:</h6>
+              <div className="suggestions">
+                {currentSuggestions.map((suggestion, index) => (
+                  <Suggestion
+                    key={index}
+                    title={suggestion.title}
+                    message={suggestion.message}
+                    partial={suggestion.partial}
+                    className={suggestion.className}
+                    onClick={(message) => sendMessage(message)}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+          {showResponseButton && visibleMessages.length > 0 && (
+            <ResponseButton onClick={isLoading ? stop : reload} inProgress={isLoading} />
+          )}
+        </Messages>
+        <Input inProgress={isLoading} onSend={sendMessage} isVisible={true} />
+      </div>
+    </ChatContextProvider>
+  );
+}
+
+const SUGGESTIONS_DEBOUNCE_TIMEOUT = 1000;
+
+export const useCopilotChatLogic = (
+  instructions?: string,
+  makeSystemMessage?: SystemMessageFunction,
+  onInProgress?: (isLoading: boolean) => void,
+  onSubmitMessage?: (messageContent: string) => void,
+) => {
   const { visibleMessages, append, reload, stop, isLoading, input, setInput } = useCopilotChat({
     id: nanoid(),
     makeSystemMessage,
     additionalInstructions: instructions,
   });
 
+  const [currentSuggestions, setCurrentSuggestions] = useState<CopilotChatSuggestion[]>([]);
+  const suggestionsAbortControllerRef = useRef<AbortController | null>(null);
+  const debounceTimerRef = useRef<any>();
+
+  const abortSuggestions = () => {
+    suggestionsAbortControllerRef.current?.abort();
+    suggestionsAbortControllerRef.current = null;
+  };
+
+  const context = useCopilotContext();
+
   useEffect(() => {
     onInProgress?.(isLoading);
-  }, [isLoading]);
 
-  const [openState, setOpenState] = React.useState(defaultOpen);
+    abortSuggestions();
 
-  const setOpen = (open: boolean) => {
-    onSetOpen?.(open);
-    setOpenState(open);
-  };
+    debounceTimerRef.current = setTimeout(
+      () => {
+        if (!isLoading && Object.keys(context.chatSuggestionConfiguration).length !== 0) {
+          suggestionsAbortControllerRef.current = new AbortController();
+          reloadSuggestions(
+            context,
+            context.chatSuggestionConfiguration,
+            setCurrentSuggestions,
+            suggestionsAbortControllerRef,
+          );
+        }
+      },
+      currentSuggestions.length == 0 ? 0 : SUGGESTIONS_DEBOUNCE_TIMEOUT,
+    );
 
-  const sendMessage = async (message: string) => {
-    onSubmitMessage?.(message);
-    append({
+    return () => {
+      clearTimeout(debounceTimerRef.current);
+    };
+  }, [isLoading, context.chatSuggestionConfiguration]);
+
+  const sendMessage = async (messageContent: string) => {
+    abortSuggestions();
+    setCurrentSuggestions([]);
+    onSubmitMessage?.(messageContent);
+    const message: Message = {
       id: nanoid(),
-      content: message,
+      content: messageContent,
       role: "user",
-    });
+    };
+    append(message);
+    return message;
   };
 
-  return (
-    <ChatContextProvider icons={icons} labels={labels} open={openState} setOpen={setOpenState}>
-      {children}
-      <div className={className}>
-        <Button open={openState} setOpen={setOpen}></Button>
-        <Window
-          open={openState}
-          setOpen={setOpen}
-          clickOutsideToClose={clickOutsideToClose}
-          shortcut={shortcut}
-          hitEscapeToClose={hitEscapeToClose}
-        >
-          <Header open={openState} setOpen={setOpen} />
-          <Messages messages={visibleMessages} inProgress={isLoading} />
-          <Input inProgress={isLoading} onSend={sendMessage} isVisible={openState}>
-            {showResponseButton && visibleMessages.length > 0 && (
-              <ResponseButton onClick={isLoading ? stop : reload} inProgress={isLoading} />
-            )}
-          </Input>
-        </Window>
-      </div>
-    </ChatContextProvider>
-  );
+  return {
+    visibleMessages,
+    isLoading,
+    currentSuggestions,
+    sendMessage,
+    stop,
+    reload,
+    input,
+    setInput,
+  };
 };

package/src/components/chat/ChatContext.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useState } from "react";
 import * as DefaultIcons from "./Icons";
 
 /**
@@ -52,6 +52,13 @@ export interface CopilotChatIcons {
    * @default <RegenerateIcon />
    */
   regenerateIcon?: React.ReactNode;
+
+  /**
+   * The icons to use for push to talk.
+   * @default <PushToTalkIcon />
+   */
+
+  pushToTalkIcon?: React.ReactNode;
 }
 
 /**
@@ -75,12 +82,6 @@ export interface CopilotChatLabels {
    */
   placeholder?: string;
 
-  /**
-   * The message to display while the chat GPT is "thinking".
-   * @default "Thinking..."
-   */
-  thinking?: string;
-
   /**
    * The message to display when an error occurs.
    * @default "❌ An error occurred. Please try again."
@@ -140,38 +141,35 @@ export const ChatContextProvider = ({
   open,
   setOpen,
 }: ChatContextProps) => {
-  const context = useMemo(
-    () => ({
-      labels: {
-        ...{
-          initial: "",
-          title: "CopilotKit",
-          placeholder: "Type a message...",
-          thinking: "Thinking...",
-          error: "❌ An error occurred. Please try again.",
-          stopGenerating: "Stop generating",
-          regenerateResponse: "Regenerate response",
-        },
-        ...labels,
+  const context = {
+    labels: {
+      ...{
+        initial: "",
+        title: "CopilotKit",
+        placeholder: "Type a message...",
+        error: "❌ An error occurred. Please try again.",
+        stopGenerating: "Stop generating",
+        regenerateResponse: "Regenerate response",
       },
-
-      icons: {
-        ...{
-          openIcon: DefaultIcons.OpenIcon,
-          closeIcon: DefaultIcons.CloseIcon,
-          headerCloseIcon: DefaultIcons.HeaderCloseIcon,
-          sendIcon: DefaultIcons.SendIcon,
-          activityIcon: DefaultIcons.ActivityIcon,
-          spinnerIcon: DefaultIcons.SpinnerIcon,
-          stopIcon: DefaultIcons.StopIcon,
-          regenerateIcon: DefaultIcons.RegenerateIcon,
-        },
-        icons,
+      ...labels,
+    },
+
+    icons: {
+      ...{
+        openIcon: DefaultIcons.OpenIcon,
+        closeIcon: DefaultIcons.CloseIcon,
+        headerCloseIcon: DefaultIcons.HeaderCloseIcon,
+        sendIcon: DefaultIcons.SendIcon,
+        activityIcon: DefaultIcons.ActivityIcon,
+        spinnerIcon: DefaultIcons.SpinnerIcon,
+        stopIcon: DefaultIcons.StopIcon,
+        regenerateIcon: DefaultIcons.RegenerateIcon,
+        pushToTalkIcon: DefaultIcons.PushToTalkIcon,
       },
-      open,
-      setOpen,
-    }),
-    [labels, icons, open, setOpen],
-  );
+      icons,
+    },
+    open,
+    setOpen,
+  };
   return <ChatContext.Provider value={context}>{children}</ChatContext.Provider>;
 };

package/src/components/chat/Icons.tsx

@@ -92,6 +92,33 @@ export const SpinnerIcon = (
   </svg>
 );
 
+export const SmallSpinnerIcon = (
+  <svg
+    style={{
+      animation: "copilotKitSpinAnimation 1s linear infinite",
+    }}
+    width="13"
+    height="13"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      style={{ opacity: 0.25 }}
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      strokeWidth="4"
+    ></circle>
+    <path
+      style={{ opacity: 0.75 }}
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+);
+
 export const ActivityIcon = (
   <svg
     style={{
@@ -177,3 +204,20 @@ export const RegenerateIcon = (
     <path d="M197.67 186.37a8 8 0 0 1 0 11.29C196.58 198.73 170.82 224 128 224c-37.39 0-64.53-22.4-80-39.85V208a8 8 0 0 1-16 0v-48a8 8 0 0 1 8-8h48a8 8 0 0 1 0 16H55.44C67.76 183.35 93 208 128 208c36 0 58.14-21.46 58.36-21.68a8 8 0 0 1 11.31.05ZM216 40a8 8 0 0 0-8 8v23.85C192.53 54.4 165.39 32 128 32c-42.82 0-68.58 25.27-69.66 26.34a8 8 0 0 0 11.3 11.34C69.86 69.46 92 48 128 48c35 0 60.24 24.65 72.56 40H168a8 8 0 0 0 0 16h48a8 8 0 0 0 8-8V48a8 8 0 0 0-8-8Z" />
   </svg>
 );
+
+export const PushToTalkIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    className="w-6 h-6"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z"
+    />
+  </svg>
+);

package/src/components/chat/Input.tsx

@@ -2,9 +2,17 @@ import React, { useEffect, useRef, useState } from "react";
 import { InputProps } from "./props";
 import { useChatContext } from "./ChatContext";
 import AutoResizingTextarea from "./Textarea";
+import { usePushToTalk } from "../../hooks/use-push-to-talk";
+import { useCopilotContext } from "@copilotkit/react-core";
 
-export const Input = ({ inProgress, onSend, children, isVisible = false }: InputProps) => {
+export const Input = ({ inProgress, onSend, isVisible = false }: InputProps) => {
   const context = useChatContext();
+  const copilotContext = useCopilotContext();
+
+  const pushToTalkConfigured =
+    copilotContext.copilotApiConfig.textToSpeechUrl !== undefined &&
+    copilotContext.copilotApiConfig.transcribeAudioUrl !== undefined;
+
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   const handleDivClick = (event: React.MouseEvent<HTMLDivElement>) => {
@@ -29,15 +37,23 @@ export const Input = ({ inProgress, onSend, children, isVisible = false }: Input
     }
   }, [isVisible]);
 
-  const icon = inProgress ? context.icons.activityIcon : context.icons.sendIcon;
-  const disabled = inProgress || text.length === 0;
+  const { pushToTalkState, setPushToTalkState } = usePushToTalk({
+    sendFunction: onSend,
+    inProgress,
+  });
+
+  const sendIcon =
+    inProgress || pushToTalkState === "transcribing"
+      ? context.icons.activityIcon
+      : context.icons.sendIcon;
+  const showPushToTalk =
+    pushToTalkConfigured &&
+    (pushToTalkState === "idle" || pushToTalkState === "recording") &&
+    !inProgress;
+  const sendDisabled = inProgress || text.length === 0 || pushToTalkState !== "idle";
 
   return (
     <div className="copilotKitInput" onClick={handleDivClick}>
-      <span>{children}</span>
-      <button className="copilotKitSendButton" disabled={disabled} onClick={send}>
-        {icon}
-      </button>
       <AutoResizingTextarea
         ref={textareaRef}
         placeholder={context.labels.placeholder}
@@ -52,6 +68,21 @@ export const Input = ({ inProgress, onSend, children, isVisible = false }: Input
           }
         }}
       />
+      <div className="copilotKitInputControls">
+        {showPushToTalk && (
+          <button
+            onClick={() =>
+              setPushToTalkState(pushToTalkState === "idle" ? "recording" : "transcribing")
+            }
+            className={pushToTalkState === "recording" ? "copilotKitPushToTalkRecording" : ""}
+          >
+            {context.icons.pushToTalkIcon}
+          </button>
+        )}
+        <button disabled={sendDisabled} onClick={send}>
+          {sendIcon}
+        </button>
+      </div>
     </div>
   );
 };

package/src/components/chat/Messages.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useMemo } from "react";
-import { MessagesProps } from "./props";
+import { MessagesProps, SuggestionsProps } from "./props";
 import { useChatContext } from "./ChatContext";
 import { nanoid } from "nanoid";
 import { Message, decodeResult } from "@copilotkit/shared";
 import { Markdown } from "./Markdown";
 import { ActionRenderProps, RenderFunctionStatus, useCopilotContext } from "@copilotkit/react-core";
 
-export const Messages = ({ messages, inProgress }: MessagesProps) => {
+export const Messages = ({ messages, inProgress, children }: MessagesProps) => {
   const { chatComponentsCache } = useCopilotContext();
   const context = useChatContext();
   const initialMessages = useMemo(
@@ -145,7 +145,7 @@ export const Messages = ({ messages, inProgress }: MessagesProps) => {
           );
         }
       })}
-      <div ref={messagesEndRef} />
+      <footer ref={messagesEndRef}>{children}</footer>
     </div>
   );
 };

package/src/components/chat/Modal.tsx

@@ -0,0 +1,115 @@
+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";
+
+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,
+  shortcut = "/",
+  icons,
+  labels,
+  makeSystemMessage,
+  showResponseButton = true,
+  onInProgress,
+  Window = DefaultWindow,
+  Button = DefaultButton,
+  Header = DefaultHeader,
+  Messages = DefaultMessages,
+  Input = DefaultInput,
+  ResponseButton = DefaultResponseButton,
+  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={setOpenState}>
+      {children}
+      <div className={className}>
+        <Button open={openState} setOpen={setOpen}></Button>
+        <Window
+          open={openState}
+          setOpen={setOpen}
+          clickOutsideToClose={clickOutsideToClose}
+          shortcut={shortcut}
+          hitEscapeToClose={hitEscapeToClose}
+        >
+          <Header open={openState} setOpen={setOpen} />
+          <CopilotChat
+            instructions={instructions}
+            makeSystemMessage={makeSystemMessage}
+            onInProgress={onInProgress}
+            onSubmitMessage={onSubmitMessage}
+            showResponseButton={showResponseButton}
+            Messages={Messages}
+            Input={Input}
+            ResponseButton={ResponseButton}
+          />
+        </Window>
+      </div>
+    </ChatContextProvider>
+  );
+};