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

package/dist/components/chat/index.js

@@ -22,6 +22,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __restKey = (key) => typeof key === "symbol" ? key : key + "";
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -86,7 +87,7 @@ __export(chat_exports, {
 module.exports = __toCommonJS(chat_exports);
 
 // src/components/chat/Chat.tsx
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 
 // src/components/chat/ChatContext.tsx
 var import_react = __toESM(require("react"));
@@ -192,6 +193,40 @@ var SpinnerIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     ]
   }
 );
+var SmallSpinnerIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  "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",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "circle",
+        {
+          style: { opacity: 0.25 },
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          strokeWidth: "4"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "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"
+        }
+      )
+    ]
+  }
+);
 var ActivityIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
   "svg",
   {
@@ -298,41 +333,42 @@ var ChatContextProvider = ({
   icons,
   children,
   open,
-  setOpen
+  setOpen,
+  addChatSuggestionConfiguration,
+  removeChatSuggestionConfiguration
 }) => {
-  const context = (0, import_react.useMemo)(
-    () => ({
-      labels: __spreadValues(__spreadValues({}, {
-        initial: "",
-        title: "CopilotKit",
-        placeholder: "Type a message...",
-        thinking: "Thinking...",
-        error: "\u274C An error occurred. Please try again.",
-        stopGenerating: "Stop generating",
-        regenerateResponse: "Regenerate response"
-      }), labels),
-      icons: __spreadProps(__spreadValues({}, {
-        openIcon: OpenIcon,
-        closeIcon: CloseIcon,
-        headerCloseIcon: HeaderCloseIcon,
-        sendIcon: SendIcon,
-        activityIcon: ActivityIcon,
-        spinnerIcon: SpinnerIcon,
-        stopIcon: StopIcon,
-        regenerateIcon: RegenerateIcon
-      }), {
-        icons
-      }),
-      open,
-      setOpen
+  const context = {
+    labels: __spreadValues(__spreadValues({}, {
+      initial: "",
+      title: "CopilotKit",
+      placeholder: "Type a message...",
+      thinking: "Thinking...",
+      error: "\u274C An error occurred. Please try again.",
+      stopGenerating: "Stop generating",
+      regenerateResponse: "Regenerate response"
+    }), labels),
+    icons: __spreadProps(__spreadValues({}, {
+      openIcon: OpenIcon,
+      closeIcon: CloseIcon,
+      headerCloseIcon: HeaderCloseIcon,
+      sendIcon: SendIcon,
+      activityIcon: ActivityIcon,
+      spinnerIcon: SpinnerIcon,
+      stopIcon: StopIcon,
+      regenerateIcon: RegenerateIcon
+    }), {
+      icons
     }),
-    [labels, icons, open, setOpen]
-  );
+    open,
+    setOpen,
+    addChatSuggestionConfiguration,
+    removeChatSuggestionConfiguration
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChatContext.Provider, { value: context, children });
 };
 
 // src/components/chat/Chat.tsx
-var import_react_core2 = require("@copilotkit/react-core");
+var import_react_core3 = require("@copilotkit/react-core");
 
 // src/components/chat/Window.tsx
 var import_react2 = __toESM(require("react"));
@@ -441,10 +477,38 @@ function isMacOS() {
 }
 
 // src/components/chat/Button.tsx
+var import_react3 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Button = ({ open, setOpen }) => {
+var Button = ({ open, setOpen, pushToTalk, setPushToTalk }) => {
   const context = useChatContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { onClick: () => setOpen(!open), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  const timerRef = (0, import_react3.useRef)(null);
+  const [isLongPress, setIsLongPress] = (0, import_react3.useState)(false);
+  const handleMouseDown = () => {
+    timerRef.current = setTimeout(() => {
+      setPushToTalk(true);
+      setIsLongPress(true);
+    }, 500);
+  };
+  const handleMouseUp = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      setPushToTalk(false);
+    }
+  };
+  const handleClick = () => {
+    if (!isLongPress) {
+      setOpen(!open);
+    } else {
+      setIsLongPress(false);
+    }
+  };
+  (0, import_react3.useEffect)(() => {
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { onClick: handleClick, onMouseDown: handleMouseDown, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "button",
     {
       className: `copilotKitButton ${open ? "open" : ""}`,
@@ -468,16 +532,16 @@ var Header = ({ setOpen }) => {
 };
 
 // src/components/chat/Messages.tsx
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var import_nanoid = require("nanoid");
 var import_shared = require("@copilotkit/shared");
 
 // src/components/chat/Markdown.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_react_markdown = __toESM(require("react-markdown"));
 
 // src/components/chat/CodeBlock.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_react_syntax_highlighter = require("react-syntax-highlighter");
 
 // src/hooks/use-copy-to-clipboard.tsx
@@ -538,7 +602,7 @@ var generateRandomString = (length, lowercase = false) => {
   }
   return lowercase ? result.toLowerCase() : result;
 };
-var CodeBlock = (0, import_react3.memo)(({ language, value }) => {
+var CodeBlock = (0, import_react4.memo)(({ language, value }) => {
   const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2e3 });
   const downloadAsFile = () => {
     if (typeof window === "undefined") {
@@ -884,7 +948,7 @@ var highlightStyle = {
 var import_remark_gfm = __toESM(require("remark-gfm"));
 var import_remark_math = __toESM(require("remark-math"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var MemoizedReactMarkdown = (0, import_react4.memo)(
+var MemoizedReactMarkdown = (0, import_react5.memo)(
   import_react_markdown.default,
   (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.className === nextProps.className
 );
@@ -943,10 +1007,10 @@ var components = {
 // src/components/chat/Messages.tsx
 var import_react_core = require("@copilotkit/react-core");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var Messages = ({ messages, inProgress }) => {
+var Messages = ({ messages, inProgress, children }) => {
   const { chatComponentsCache } = (0, import_react_core.useCopilotContext)();
   const context = useChatContext();
-  const initialMessages = (0, import_react5.useMemo)(
+  const initialMessages = (0, import_react6.useMemo)(
     () => makeInitialMessages(context.labels.initial),
     [context.labels.initial]
   );
@@ -960,7 +1024,7 @@ var Messages = ({ messages, inProgress }) => {
       }
     }
   }
-  const messagesEndRef = import_react5.default.useRef(null);
+  const messagesEndRef = import_react6.default.useRef(null);
   const scrollToBottom = () => {
     if (messagesEndRef.current) {
       messagesEndRef.current.scrollIntoView({
@@ -968,7 +1032,7 @@ var Messages = ({ messages, inProgress }) => {
       });
     }
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     scrollToBottom();
   }, [messages]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "copilotKitMessages", children: [
@@ -1029,7 +1093,7 @@ var Messages = ({ messages, inProgress }) => {
         return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Markdown, { content: message.content }) }, index);
       }
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: messagesEndRef })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("footer", { ref: messagesEndRef, children })
   ] });
 };
 function makeInitialMessages(initial) {
@@ -1049,17 +1113,17 @@ function makeInitialMessages(initial) {
 }
 
 // src/components/chat/Input.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/components/chat/Textarea.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var AutoResizingTextarea = (0, import_react6.forwardRef)(
+var AutoResizingTextarea = (0, import_react7.forwardRef)(
   ({ maxRows = 1, placeholder, value, onChange, onKeyDown, autoFocus }, ref) => {
-    const internalTextareaRef = (0, import_react6.useRef)(null);
-    const [maxHeight, setMaxHeight] = (0, import_react6.useState)(0);
-    (0, import_react6.useImperativeHandle)(ref, () => internalTextareaRef.current);
-    (0, import_react6.useEffect)(() => {
+    const internalTextareaRef = (0, import_react7.useRef)(null);
+    const [maxHeight, setMaxHeight] = (0, import_react7.useState)(0);
+    (0, import_react7.useImperativeHandle)(ref, () => internalTextareaRef.current);
+    (0, import_react7.useEffect)(() => {
       const calculateMaxHeight = () => {
         const textarea = internalTextareaRef.current;
         if (textarea) {
@@ -1073,7 +1137,7 @@ var AutoResizingTextarea = (0, import_react6.forwardRef)(
       };
       calculateMaxHeight();
     }, [maxRows]);
-    (0, import_react6.useEffect)(() => {
+    (0, import_react7.useEffect)(() => {
       const textarea = internalTextareaRef.current;
       if (textarea) {
         textarea.style.height = "auto";
@@ -1102,16 +1166,16 @@ var Textarea_default = AutoResizingTextarea;
 
 // src/components/chat/Input.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var Input = ({ inProgress, onSend, children, isVisible = false }) => {
+var Input = ({ inProgress, onSend, isVisible = false }) => {
   const context = useChatContext();
-  const textareaRef = (0, import_react7.useRef)(null);
+  const textareaRef = (0, import_react8.useRef)(null);
   const handleDivClick = (event) => {
     var _a;
     if (event.target !== event.currentTarget)
       return;
     (_a = textareaRef.current) == null ? void 0 : _a.focus();
   };
-  const [text, setText] = (0, import_react7.useState)("");
+  const [text, setText] = (0, import_react8.useState)("");
   const send = () => {
     var _a;
     if (inProgress)
@@ -1120,7 +1184,7 @@ var Input = ({ inProgress, onSend, children, isVisible = false }) => {
     setText("");
     (_a = textareaRef.current) == null ? void 0 : _a.focus();
   };
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     var _a;
     if (isVisible) {
       (_a = textareaRef.current) == null ? void 0 : _a.focus();
@@ -1129,7 +1193,6 @@ var Input = ({ inProgress, onSend, children, isVisible = false }) => {
   const icon = inProgress ? context.icons.activityIcon : context.icons.sendIcon;
   const disabled = inProgress || text.length === 0;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "copilotKitInput", onClick: handleDivClick, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "copilotKitSendButton", disabled, onClick: send, children: icon }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       Textarea_default,
@@ -1164,8 +1227,105 @@ var ResponseButton = ({ onClick, inProgress }) => {
   ] });
 };
 
-// src/components/chat/Chat.tsx
+// src/components/chat/Suggestion.tsx
+var import_react_core2 = require("@copilotkit/react-core");
 var import_jsx_runtime12 = require("react/jsx-runtime");
+function Suggestion({ title, message, onClick, partial, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "button",
+    {
+      disabled: partial,
+      onClick: (e) => {
+        e.preventDefault();
+        onClick(message);
+      },
+      className: className || "suggestion",
+      children: [
+        partial && SmallSpinnerIcon,
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: title })
+      ]
+    }
+  );
+}
+var reloadSuggestions = (context, chatSuggestionConfiguration, setCurrentSuggestions, abortControllerRef) => __async(void 0, null, function* () {
+  const abortController = abortControllerRef.current;
+  const tools = JSON.stringify(context.getChatCompletionFunctionDescriptions(context.entryPoints));
+  const allSuggestions = [];
+  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 = yield (0, import_react_core2.extract)({
+        context,
+        instructions: "Suggest what the user could say next. Provide clear, highly relevant suggestions. Do not literally suggest function calls. " + config.instructions + "\n\n" + numOfSuggestionsInstructions,
+        data: "Available tools: " + tools + "\n\n",
+        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 == null ? void 0 : abortController.signal,
+        stream: ({ status, args }) => {
+          const suggestions = args.suggestions || [];
+          const newSuggestions = [];
+          for (let i = 0; i < suggestions.length; i++) {
+            if (config.maxSuggestions !== void 0 && i >= config.maxSuggestions) {
+              break;
+            }
+            const { title, message } = suggestions[i];
+            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;
+  }
+});
+
+// src/components/chat/audio.ts
+var requestMicAndPlaybackPermission = () => __async(void 0, null, function* () {
+  try {
+    const stream = yield navigator.mediaDevices.getUserMedia({ audio: true });
+    const audioContext = new window.AudioContext();
+    yield audioContext.resume();
+    return { stream, audioContext };
+  } catch (err) {
+    console.error("Error requesting microphone and playback permissions", err);
+    return null;
+  }
+});
+
+// src/components/chat/Chat.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var SUGGESTIONS_DEBOUNCE_TIMEOUT = 1e3;
 var CopilotChat = ({
   instructions,
   defaultOpen = false,
@@ -1188,67 +1348,218 @@ var CopilotChat = ({
   className,
   children
 }) => {
-  const { visibleMessages, append, reload, stop, isLoading, input, setInput } = (0, import_react_core2.useCopilotChat)({
+  const { visibleMessages, append, reload, stop, isLoading, input, setInput } = (0, import_react_core3.useCopilotChat)({
     id: (0, import_nanoid2.nanoid)(),
     makeSystemMessage,
     additionalInstructions: instructions
   });
-  (0, import_react8.useEffect)(() => {
+  const [currentSuggestions, setCurrentSuggestions] = import_react9.default.useState([]);
+  const suggestionsAbortControllerRef = (0, import_react9.useRef)(null);
+  const debounceTimerRef = (0, import_react9.useRef)();
+  const abortSuggestions = () => {
+    var _a;
+    (_a = suggestionsAbortControllerRef.current) == null ? void 0 : _a.abort();
+    suggestionsAbortControllerRef.current = null;
+  };
+  const context = (0, import_react_core3.useCopilotContext)();
+  const [chatSuggestionConfiguration, setChatSuggestionConfiguration] = (0, import_react9.useState)({});
+  const addChatSuggestionConfiguration = (id, suggestion) => {
+    setChatSuggestionConfiguration((prev) => __spreadProps(__spreadValues({}, prev), { [id]: suggestion }));
+  };
+  const removeChatSuggestion = (id) => {
+    setChatSuggestionConfiguration((prev) => {
+      const _a = prev, { [id]: _ } = _a, rest = __objRest(_a, [__restKey(id)]);
+      return rest;
+    });
+  };
+  (0, import_react9.useEffect)(() => {
     onInProgress == null ? void 0 : onInProgress(isLoading);
-  }, [isLoading]);
-  const [openState, setOpenState] = import_react8.default.useState(defaultOpen);
+    abortSuggestions();
+    debounceTimerRef.current = setTimeout(
+      () => {
+        if (!isLoading && Object.keys(chatSuggestionConfiguration).length !== 0) {
+          suggestionsAbortControllerRef.current = new AbortController();
+          reloadSuggestions(
+            context,
+            chatSuggestionConfiguration,
+            setCurrentSuggestions,
+            suggestionsAbortControllerRef
+          );
+        }
+      },
+      currentSuggestions.length == 0 ? 0 : SUGGESTIONS_DEBOUNCE_TIMEOUT
+    );
+    return () => {
+      clearTimeout(debounceTimerRef.current);
+    };
+  }, [isLoading, chatSuggestionConfiguration]);
   const setOpen = (open) => {
     onSetOpen == null ? void 0 : onSetOpen(open);
     setOpenState(open);
   };
-  const sendMessage = (message) => __async(void 0, null, function* () {
-    onSubmitMessage == null ? void 0 : onSubmitMessage(message);
-    append({
+  const sendMessage = (messageContent) => __async(void 0, null, function* () {
+    abortSuggestions();
+    setCurrentSuggestions([]);
+    onSubmitMessage == null ? void 0 : onSubmitMessage(messageContent);
+    const message = {
       id: (0, import_nanoid2.nanoid)(),
-      content: message,
+      content: messageContent,
       role: "user"
-    });
+    };
+    append(message);
+    return message;
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ChatContextProvider, { icons, labels, open: openState, setOpen: setOpenState, children: [
-    children,
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button2, { open: openState, setOpen }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-        Window2,
-        {
-          open: openState,
-          setOpen,
-          clickOutsideToClose,
-          shortcut,
-          hitEscapeToClose,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Header2, { open: openState, setOpen }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Messages2, { messages: visibleMessages, inProgress: isLoading }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Input2, { inProgress: isLoading, onSend: sendMessage, isVisible: openState, children: showResponseButton && visibleMessages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ResponseButton2, { onClick: isLoading ? stop : reload, inProgress: isLoading }) })
-          ]
-        }
-      )
-    ] })
-  ] });
+  const [openState, setOpenState] = import_react9.default.useState(defaultOpen);
+  const [pushToTalkState, setPushToTalkState] = import_react9.default.useState(false);
+  const mediaStreamRef = (0, import_react9.useRef)(null);
+  const audioContextRef = (0, import_react9.useRef)(null);
+  const mediaRecorderRef = (0, import_react9.useRef)(null);
+  const [lastMessageIdBeforeAudio, setLastMessageIdBeforeAudio] = (0, import_react9.useState)(null);
+  (0, import_react9.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 = [];
+        mediaRecorderRef.current = new MediaRecorder(mediaStreamRef.current);
+        mediaRecorderRef.current.start(1e3);
+        mediaRecorderRef.current.ondataavailable = (event) => __async(void 0, null, function* () {
+          console.log("Recorded audio: ", event.data);
+          recordedChunks.push(event.data);
+        });
+        mediaRecorderRef.current.onstop = () => __async(void 0, null, function* () {
+          console.log("Recording stopped");
+          const completeBlob = new Blob(recordedChunks, { type: "audio/mp4" });
+          const formData = new FormData();
+          formData.append("file", completeBlob, "recording.mp4");
+          const response = yield fetch(context.copilotApiConfig.transcribeAudioUrl, {
+            method: "POST",
+            body: formData
+          });
+          if (!response.ok) {
+            throw new Error(`Error: ${response.statusText}`);
+          }
+          const transcription = yield response.json();
+          const message = yield 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]);
+  (0, import_react9.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 /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    ChatContextProvider,
+    {
+      icons,
+      labels,
+      open: openState,
+      setOpen: setOpenState,
+      addChatSuggestionConfiguration,
+      removeChatSuggestionConfiguration: removeChatSuggestion,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            Button2,
+            {
+              open: openState,
+              setOpen,
+              pushToTalk: pushToTalkState,
+              setPushToTalk: setPushToTalkState
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            Window2,
+            {
+              open: openState,
+              setOpen,
+              clickOutsideToClose,
+              shortcut,
+              hitEscapeToClose,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Header2, { open: openState, setOpen }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Messages2, { messages: visibleMessages, inProgress: isLoading, children: [
+                  currentSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h6", { children: "Suggested:" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "suggestions", children: currentSuggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                      Suggestion,
+                      {
+                        title: suggestion.title,
+                        message: suggestion.message,
+                        partial: suggestion.partial,
+                        className: suggestion.className,
+                        onClick: (message) => sendMessage(message)
+                      },
+                      index
+                    )) })
+                  ] }),
+                  showResponseButton && visibleMessages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ResponseButton2, { onClick: isLoading ? stop : reload, inProgress: isLoading })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Input2, { inProgress: isLoading, onSend: sendMessage, isVisible: openState })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
 };
 
 // src/components/chat/Popup.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var CopilotPopup = (props) => {
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function CopilotPopup(props) {
   props = __spreadProps(__spreadValues({}, props), {
     className: props.className ? props.className + " copilotKitPopup" : "copilotKitPopup"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CopilotChat, __spreadProps(__spreadValues({}, props), { children: props.children }));
-};
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CopilotChat, __spreadProps(__spreadValues({}, props), { children: props.children }));
+}
 
 // src/components/chat/Sidebar.tsx
-var import_react9 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var CopilotSidebar = (props) => {
+var import_react10 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function CopilotSidebar(props) {
   props = __spreadProps(__spreadValues({}, props), {
     className: props.className ? props.className + " copilotKitSidebar" : "copilotKitSidebar"
   });
-  const [expandedClassName, setExpandedClassName] = (0, import_react9.useState)(
+  const [expandedClassName, setExpandedClassName] = (0, import_react10.useState)(
     props.defaultOpen ? "sidebarExpanded" : ""
   );
   const onSetOpen = (open) => {
@@ -1256,8 +1567,8 @@ var CopilotSidebar = (props) => {
     (_a = props.onSetOpen) == null ? void 0 : _a.call(props, open);
     setExpandedClassName(open ? "sidebarExpanded" : "");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `copilotKitSidebarContentWrapper ${expandedClassName}`, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CopilotChat, __spreadProps(__spreadValues(__spreadValues({}, props), { onSetOpen }), { children: props.children })) });
-};
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `copilotKitSidebarContentWrapper ${expandedClassName}`, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CopilotChat, __spreadProps(__spreadValues(__spreadValues({}, props), { onSetOpen }), { children: props.children })) });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CopilotPopup,