@copilotkit/react-ui 0.36.0-mme-push-to-talk.0 → 0.36.0-mme-pre.1

package/dist/types/suggestions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/types/suggestions.ts"],"sourcesContent":["export interface CopilotChatSuggestionConfiguration {\n  /**\n   * A prompt or instructions for the GPT to generate suggestions.\n   */\n  instructions: string;\n\n  /**\n   * The minimum number of suggestions to generate. Defaults to `1`.\n   * @default 1\n   */\n  minSuggestions?: number;\n\n  /**\n   * The maximum number of suggestions to generate. Defaults to `3`.\n   * @default 1\n   */\n  maxSuggestions?: number;\n\n  /**\n   * An optional class name to apply to the suggestions.\n   */\n  className?: string;\n}\n\nexport interface CopilotChatSuggestion {\n  title: string;\n  message: string;\n  partial?: boolean;\n  className?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../src/types/suggestions.ts"],"sourcesContent":["export interface CopilotChatSuggestion {\n  title: string;\n  message: string;\n  partial?: boolean;\n  className?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.36.0-mme-push-to-talk.0",
+  "version": "0.36.0-mme-pre.1",
   "sideEffects": [
     "**/*.css"
   ],
@@ -35,9 +35,9 @@
     "ts-jest": "^29.1.1",
     "tsup": "^6.7.0",
     "typescript": "^5.2.3",
-    "eslint-config-custom": "0.11.0-mme-push-to-talk.0",
-    "tailwind-config": "0.10.0-mme-push-to-talk.0",
-    "tsconfig": "0.15.0-mme-push-to-talk.0"
+    "eslint-config-custom": "0.11.0-mme-pre.1",
+    "tailwind-config": "0.10.0-mme-pre.1",
+    "tsconfig": "0.15.0-mme-pre.1"
   },
   "dependencies": {
     "nanoid": "^4.0.2",
@@ -45,8 +45,8 @@
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
-    "@copilotkit/shared": "0.36.0-mme-push-to-talk.0",
-    "@copilotkit/react-core": "0.36.0-mme-push-to-talk.0"
+    "@copilotkit/shared": "0.36.0-mme-pre.1",
+    "@copilotkit/react-core": "0.36.0-mme-pre.1"
   },
   "scripts": {
     "build": "tsup --clean",

package/src/components/chat/Button.tsx

@@ -1,44 +1,11 @@
-import { useEffect, useRef, useState } from "react";
 import { ButtonProps } from "./props";
 import { useChatContext } from "./ChatContext";
 
-export const Button = ({ open, setOpen, pushToTalk, setPushToTalk }: ButtonProps) => {
+export const Button = ({ open, setOpen }: ButtonProps) => {
   const context = useChatContext();
-  const timerRef = useRef<NodeJS.Timeout | null>(null);
-  const [isLongPress, setIsLongPress] = useState(false);
-
-  const handleMouseDown = () => {
-    timerRef.current = setTimeout(() => {
-      setPushToTalk(true);
-      setIsLongPress(true);
-    }, 500); // 500ms for long press
-  };
-
-  const handleMouseUp = () => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      setPushToTalk(false);
-    }
-  };
-
-  const handleClick = () => {
-    if (!isLongPress) {
-      setOpen(!open);
-    } else {
-      setIsLongPress(false);
-    }
-  };
-
-  // we want to handle the mouse up event event outside of the button component
-  useEffect(() => {
-    document.addEventListener("mouseup", handleMouseUp);
-    return () => {
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, []);
 
   return (
-    <div onClick={handleClick} onMouseDown={handleMouseDown}>
+    <div onClick={() => setOpen(!open)}>
       <button
         className={`copilotKitButton ${open ? "open" : ""}`}
         aria-label={open ? "Close Chat" : "Open Chat"}

package/src/components/chat/Chat.tsx

@@ -1,31 +1,66 @@
-import React, { useEffect, useRef, useState } from "react";
-import { CopilotChatIcons, ChatContextProvider, CopilotChatLabels } from "./ChatContext";
-import {
-  SystemMessageFunction,
-  extract,
-  useCopilotChat,
-  useCopilotContext,
-} 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,
-  SuggestionsProps,
-} 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, reloadSuggestions } from "./Suggestion";
-import { CopilotChatSuggestion, CopilotChatSuggestionConfiguration } from "../../types/suggestions";
-import { requestMicAndPlaybackPermission } from "./audio";
+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.
@@ -41,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.
    */
@@ -74,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 "/"
-   */
-  shortcut?: string;
-
   /**
    * Icons can be used to set custom icons for the chat window.
    */
@@ -105,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.
    */
@@ -146,37 +136,78 @@ export interface CopilotChatProps {
   children?: React.ReactNode;
 }
 
-const SUGGESTIONS_DEBOUNCE_TIMEOUT = 1000;
-
-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] = React.useState<CopilotChatSuggestion[]>([]);
+  const [currentSuggestions, setCurrentSuggestions] = useState<CopilotChatSuggestion[]>([]);
   const suggestionsAbortControllerRef = useRef<AbortController | null>(null);
   const debounceTimerRef = useRef<any>();
 
@@ -187,24 +218,6 @@ export const CopilotChat = ({
 
   const context = useCopilotContext();
 
-  const [chatSuggestionConfiguration, setChatSuggestionConfiguration] = useState<{
-    [key: string]: CopilotChatSuggestionConfiguration;
-  }>({});
-
-  const addChatSuggestionConfiguration = (
-    id: string,
-    suggestion: CopilotChatSuggestionConfiguration,
-  ) => {
-    setChatSuggestionConfiguration((prev) => ({ ...prev, [id]: suggestion }));
-  };
-
-  const removeChatSuggestion = (id: string) => {
-    setChatSuggestionConfiguration((prev) => {
-      const { [id]: _, ...rest } = prev;
-      return rest;
-    });
-  };
-
   useEffect(() => {
     onInProgress?.(isLoading);
 
@@ -212,11 +225,11 @@ export const CopilotChat = ({
 
     debounceTimerRef.current = setTimeout(
       () => {
-        if (!isLoading && Object.keys(chatSuggestionConfiguration).length !== 0) {
+        if (!isLoading && Object.keys(context.chatSuggestionConfiguration).length !== 0) {
           suggestionsAbortControllerRef.current = new AbortController();
           reloadSuggestions(
             context,
-            chatSuggestionConfiguration,
+            context.chatSuggestionConfiguration,
             setCurrentSuggestions,
             suggestionsAbortControllerRef,
           );
@@ -228,12 +241,7 @@ export const CopilotChat = ({
     return () => {
       clearTimeout(debounceTimerRef.current);
     };
-  }, [isLoading, chatSuggestionConfiguration]);
-
-  const setOpen = (open: boolean) => {
-    onSetOpen?.(open);
-    setOpenState(open);
-  };
+  }, [isLoading, context.chatSuggestionConfiguration]);
 
   const sendMessage = async (messageContent: string) => {
     abortSuggestions();
@@ -248,151 +256,14 @@ export const CopilotChat = ({
     return message;
   };
 
-  const [openState, setOpenState] = React.useState(defaultOpen);
-  const [pushToTalkState, setPushToTalkState] = React.useState(false);
-  const mediaStreamRef = useRef<MediaStream | null>(null);
-  const audioContextRef = useRef<AudioContext | null>(null);
-  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
-  const [lastMessageIdBeforeAudio, setLastMessageIdBeforeAudio] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (pushToTalkState) {
-      console.log("HERE");
-      if (!mediaStreamRef.current || !audioContextRef.current) {
-        setPushToTalkState(false);
-        requestMicAndPlaybackPermission().then((res) => {
-          if (res) {
-            mediaStreamRef.current = res.stream;
-            audioContextRef.current = res.audioContext;
-          }
-        });
-      } else {
-        console.log("Recording started");
-        const recordedChunks: Blob[] = [];
-
-        mediaRecorderRef.current = new MediaRecorder(mediaStreamRef.current);
-        mediaRecorderRef.current.start(1000);
-        mediaRecorderRef.current.ondataavailable = async (event) => {
-          console.log("Recorded audio: ", event.data);
-          recordedChunks.push(event.data);
-        };
-        mediaRecorderRef.current.onstop = async () => {
-          console.log("Recording stopped");
-          const completeBlob = new Blob(recordedChunks, { type: "audio/mp4" });
-
-          const formData = new FormData();
-          formData.append("file", completeBlob, "recording.mp4");
-
-          const response = await fetch(context.copilotApiConfig.transcribeAudioUrl!, {
-            method: "POST",
-            body: formData,
-          });
-
-          if (!response.ok) {
-            throw new Error(`Error: ${response.statusText}`);
-          }
-
-          const transcription = await response.json();
-          const message = await sendMessage(transcription.text);
-          setLastMessageIdBeforeAudio(message.id);
-        };
-      }
-    } else {
-      if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
-        mediaRecorderRef.current.stop();
-      }
-    }
-
-    return () => {
-      if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
-        mediaRecorderRef.current.stop();
-      }
-    };
-  }, [pushToTalkState]);
-
-  useEffect(() => {
-    if (lastMessageIdBeforeAudio && !isLoading) {
-      if (audioContextRef.current) {
-        const lastMessageIndex = context.messages.findIndex(
-          (message) => message.id === lastMessageIdBeforeAudio,
-        );
-
-        const messagesAfterLast = context.messages
-          .slice(lastMessageIndex + 1)
-          .filter((message) => message.role === "assistant" && message.content);
-
-        const text = messagesAfterLast.map((message) => message.content).join("\n");
-        const encodedText = encodeURIComponent(text);
-        const url = `${context.copilotApiConfig.textToSpeechUrl}?text=${encodedText}`;
-
-        fetch(url)
-          .then((response) => response.arrayBuffer())
-          .then((arrayBuffer) => audioContextRef.current!.decodeAudioData(arrayBuffer))
-          .then((audioBuffer) => {
-            const source = audioContextRef.current!.createBufferSource();
-            source.buffer = audioBuffer;
-            source.connect(audioContextRef.current!.destination);
-            source.start(0);
-          })
-          .catch((error) => {
-            console.error("Error with decoding audio data", error);
-          });
-
-        setLastMessageIdBeforeAudio(null);
-      }
-    }
-  }, [isLoading]);
-
-  return (
-    <ChatContextProvider
-      icons={icons}
-      labels={labels}
-      open={openState}
-      setOpen={setOpenState}
-      addChatSuggestionConfiguration={addChatSuggestionConfiguration}
-      removeChatSuggestionConfiguration={removeChatSuggestion}
-    >
-      {children}
-      <div className={className}>
-        <Button
-          open={openState}
-          setOpen={setOpen}
-          pushToTalk={pushToTalkState}
-          setPushToTalk={setPushToTalkState}
-        ></Button>
-        <Window
-          open={openState}
-          setOpen={setOpen}
-          clickOutsideToClose={clickOutsideToClose}
-          shortcut={shortcut}
-          hitEscapeToClose={hitEscapeToClose}
-        >
-          <Header open={openState} setOpen={setOpen} />
-          <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={openState} />
-        </Window>
-      </div>
-    </ChatContextProvider>
-  );
+  return {
+    visibleMessages,
+    isLoading,
+    currentSuggestions,
+    sendMessage,
+    stop,
+    reload,
+    input,
+    setInput,
+  };
 };

package/src/components/chat/ChatContext.tsx

@@ -1,6 +1,5 @@
 import React, { useMemo, useState } from "react";
 import * as DefaultIcons from "./Icons";
-import { CopilotChatSuggestion, CopilotChatSuggestionConfiguration } from "../../types/suggestions";
 
 /**
  * Icons for CopilotChat component.
@@ -53,6 +52,13 @@ export interface CopilotChatIcons {
    * @default <RegenerateIcon />
    */
   regenerateIcon?: React.ReactNode;
+
+  /**
+   * The icons to use for push to talk.
+   * @default <PushToTalkIcon />
+   */
+
+  pushToTalkIcon?: React.ReactNode;
 }
 
 /**
@@ -76,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."
@@ -106,11 +106,6 @@ interface ChatContext {
   icons: Required<CopilotChatIcons>;
   open: boolean;
   setOpen: (open: boolean) => void;
-  addChatSuggestionConfiguration: (
-    id: string,
-    suggestion: CopilotChatSuggestionConfiguration,
-  ) => void;
-  removeChatSuggestionConfiguration: (id: string) => void;
 }
 
 export const ChatContext = React.createContext<ChatContext | undefined>(undefined);
@@ -134,11 +129,6 @@ interface ChatContextProps {
   children?: React.ReactNode;
   open: boolean;
   setOpen: (open: boolean) => void;
-  addChatSuggestionConfiguration: (
-    id: string,
-    suggestion: CopilotChatSuggestionConfiguration,
-  ) => void;
-  removeChatSuggestionConfiguration: (id: string) => void;
 }
 
 export const ChatContextProvider = ({
@@ -150,8 +140,6 @@ export const ChatContextProvider = ({
   children,
   open,
   setOpen,
-  addChatSuggestionConfiguration,
-  removeChatSuggestionConfiguration,
 }: ChatContextProps) => {
   const context = {
     labels: {
@@ -159,7 +147,6 @@ export const ChatContextProvider = ({
         initial: "",
         title: "CopilotKit",
         placeholder: "Type a message...",
-        thinking: "Thinking...",
         error: "❌ An error occurred. Please try again.",
         stopGenerating: "Stop generating",
         regenerateResponse: "Regenerate response",
@@ -177,13 +164,12 @@ export const ChatContextProvider = ({
         spinnerIcon: DefaultIcons.SpinnerIcon,
         stopIcon: DefaultIcons.StopIcon,
         regenerateIcon: DefaultIcons.RegenerateIcon,
+        pushToTalkIcon: DefaultIcons.PushToTalkIcon,
       },
       icons,
     },
     open,
     setOpen,
-    addChatSuggestionConfiguration,
-    removeChatSuggestionConfiguration,
   };
   return <ChatContext.Provider value={context}>{children}</ChatContext.Provider>;
 };

package/src/components/chat/Icons.tsx

@@ -204,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>
+);