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

package/dist/components/chat/Popup.js

@@ -22,7 +22,6 @@ 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)
@@ -84,8 +83,8 @@ __export(Popup_exports, {
 });
 module.exports = __toCommonJS(Popup_exports);
 
-// src/components/chat/Chat.tsx
-var import_react9 = __toESM(require("react"));
+// src/components/chat/Modal.tsx
+var import_react10 = __toESM(require("react"));
 
 // src/components/chat/ChatContext.tsx
 var import_react = __toESM(require("react"));
@@ -310,6 +309,25 @@ var RegenerateIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("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" })
   }
 );
+var PushToTalkIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "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",
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "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"
+      }
+    )
+  }
+);
 
 // src/components/chat/ChatContext.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -331,16 +349,13 @@ var ChatContextProvider = ({
   icons,
   children,
   open,
-  setOpen,
-  addChatSuggestionConfiguration,
-  removeChatSuggestionConfiguration
+  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"
@@ -353,21 +368,17 @@ var ChatContextProvider = ({
       activityIcon: ActivityIcon,
       spinnerIcon: SpinnerIcon,
       stopIcon: StopIcon,
-      regenerateIcon: RegenerateIcon
+      regenerateIcon: RegenerateIcon,
+      pushToTalkIcon: PushToTalkIcon
     }), {
       icons
     }),
     open,
-    setOpen,
-    addChatSuggestionConfiguration,
-    removeChatSuggestionConfiguration
+    setOpen
   };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChatContext.Provider, { value: context, children });
 };
 
-// src/components/chat/Chat.tsx
-var import_react_core3 = require("@copilotkit/react-core");
-
 // src/components/chat/Window.tsx
 var import_react2 = __toESM(require("react"));
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -475,38 +486,10 @@ function isMacOS() {
 }
 
 // src/components/chat/Button.tsx
-var import_react3 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Button = ({ open, setOpen, pushToTalk, setPushToTalk }) => {
+var Button = ({ open, setOpen }) => {
   const context = useChatContext();
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { onClick: () => setOpen(!open), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "button",
     {
       className: `copilotKitButton ${open ? "open" : ""}`,
@@ -530,16 +513,16 @@ var Header = ({ setOpen }) => {
 };
 
 // src/components/chat/Messages.tsx
-var import_react6 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_nanoid = require("nanoid");
 var import_shared = require("@copilotkit/shared");
 
 // src/components/chat/Markdown.tsx
-var import_react5 = require("react");
+var import_react4 = require("react");
 var import_react_markdown = __toESM(require("react-markdown"));
 
 // src/components/chat/CodeBlock.tsx
-var import_react4 = require("react");
+var import_react3 = require("react");
 var import_react_syntax_highlighter = require("react-syntax-highlighter");
 
 // src/hooks/use-copy-to-clipboard.tsx
@@ -600,7 +583,7 @@ var generateRandomString = (length, lowercase = false) => {
   }
   return lowercase ? result.toLowerCase() : result;
 };
-var CodeBlock = (0, import_react4.memo)(({ language, value }) => {
+var CodeBlock = (0, import_react3.memo)(({ language, value }) => {
   const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2e3 });
   const downloadAsFile = () => {
     if (typeof window === "undefined") {
@@ -946,7 +929,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_react5.memo)(
+var MemoizedReactMarkdown = (0, import_react4.memo)(
   import_react_markdown.default,
   (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.className === nextProps.className
 );
@@ -1008,7 +991,7 @@ var import_jsx_runtime8 = require("react/jsx-runtime");
 var Messages = ({ messages, inProgress, children }) => {
   const { chatComponentsCache } = (0, import_react_core.useCopilotContext)();
   const context = useChatContext();
-  const initialMessages = (0, import_react6.useMemo)(
+  const initialMessages = (0, import_react5.useMemo)(
     () => makeInitialMessages(context.labels.initial),
     [context.labels.initial]
   );
@@ -1022,7 +1005,7 @@ var Messages = ({ messages, inProgress, children }) => {
       }
     }
   }
-  const messagesEndRef = import_react6.default.useRef(null);
+  const messagesEndRef = import_react5.default.useRef(null);
   const scrollToBottom = () => {
     if (messagesEndRef.current) {
       messagesEndRef.current.scrollIntoView({
@@ -1030,7 +1013,7 @@ var Messages = ({ messages, inProgress, children }) => {
       });
     }
   };
-  (0, import_react6.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     scrollToBottom();
   }, [messages]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "copilotKitMessages", children: [
@@ -1114,14 +1097,14 @@ function makeInitialMessages(initial) {
 var import_react8 = require("react");
 
 // src/components/chat/Textarea.tsx
-var import_react7 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var AutoResizingTextarea = (0, import_react7.forwardRef)(
+var AutoResizingTextarea = (0, import_react6.forwardRef)(
   ({ maxRows = 1, placeholder, value, onChange, onKeyDown, autoFocus }, ref) => {
-    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 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 calculateMaxHeight = () => {
         const textarea = internalTextareaRef.current;
         if (textarea) {
@@ -1135,7 +1118,7 @@ var AutoResizingTextarea = (0, import_react7.forwardRef)(
       };
       calculateMaxHeight();
     }, [maxRows]);
-    (0, import_react7.useEffect)(() => {
+    (0, import_react6.useEffect)(() => {
       const textarea = internalTextareaRef.current;
       if (textarea) {
         textarea.style.height = "auto";
@@ -1151,7 +1134,7 @@ var AutoResizingTextarea = (0, import_react7.forwardRef)(
         onKeyDown,
         placeholder,
         style: {
-          overflow: "hidden",
+          overflow: "auto",
           resize: "none",
           maxHeight: `${maxHeight}px`
         },
@@ -1162,10 +1145,113 @@ var AutoResizingTextarea = (0, import_react7.forwardRef)(
 );
 var Textarea_default = AutoResizingTextarea;
 
+// src/hooks/use-push-to-talk.tsx
+var import_react_core2 = require("@copilotkit/react-core");
+var import_react7 = require("react");
+var startRecording = (mediaStreamRef, mediaRecorderRef, audioContextRef, recordedChunks, onStop) => __async(void 0, null, function* () {
+  if (!mediaStreamRef.current || !audioContextRef.current) {
+    mediaStreamRef.current = yield navigator.mediaDevices.getUserMedia({ audio: true });
+    audioContextRef.current = new window.AudioContext();
+    yield audioContextRef.current.resume();
+  }
+  mediaRecorderRef.current = new MediaRecorder(mediaStreamRef.current);
+  mediaRecorderRef.current.start(1e3);
+  mediaRecorderRef.current.ondataavailable = (event) => {
+    recordedChunks.push(event.data);
+  };
+  mediaRecorderRef.current.onstop = onStop;
+});
+var stopRecording = (mediaRecorderRef) => {
+  if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+    mediaRecorderRef.current.stop();
+  }
+};
+var transcribeAudio = (recordedChunks, transcribeAudioUrl) => __async(void 0, null, function* () {
+  const completeBlob = new Blob(recordedChunks, { type: "audio/mp4" });
+  const formData = new FormData();
+  formData.append("file", completeBlob, "recording.mp4");
+  const response = yield fetch(transcribeAudioUrl, {
+    method: "POST",
+    body: formData
+  });
+  if (!response.ok) {
+    throw new Error(`Error: ${response.statusText}`);
+  }
+  const transcription = yield response.json();
+  return transcription.text;
+});
+var playAudioResponse = (text, textToSpeechUrl, audioContext) => {
+  const encodedText = encodeURIComponent(text);
+  const url = `${textToSpeechUrl}?text=${encodedText}`;
+  fetch(url).then((response) => response.arrayBuffer()).then((arrayBuffer) => audioContext.decodeAudioData(arrayBuffer)).then((audioBuffer) => {
+    const source = audioContext.createBufferSource();
+    source.buffer = audioBuffer;
+    source.connect(audioContext.destination);
+    source.start(0);
+  }).catch((error) => {
+    console.error("Error with decoding audio data", error);
+  });
+};
+var usePushToTalk = ({
+  sendFunction,
+  inProgress
+}) => {
+  const [pushToTalkState, setPushToTalkState] = (0, import_react7.useState)("idle");
+  const mediaStreamRef = (0, import_react7.useRef)(null);
+  const audioContextRef = (0, import_react7.useRef)(null);
+  const mediaRecorderRef = (0, import_react7.useRef)(null);
+  const recordedChunks = (0, import_react7.useRef)([]);
+  const context = (0, import_react_core2.useCopilotContext)();
+  const [startReadingFromMessageId, setStartReadingFromMessageId] = (0, import_react7.useState)(null);
+  (0, import_react7.useEffect)(() => {
+    if (pushToTalkState === "recording") {
+      startRecording(
+        mediaStreamRef,
+        mediaRecorderRef,
+        audioContextRef,
+        recordedChunks.current,
+        () => {
+          setPushToTalkState("transcribing");
+        }
+      );
+    } else {
+      stopRecording(mediaRecorderRef);
+      if (pushToTalkState === "transcribing") {
+        transcribeAudio(recordedChunks.current, context.copilotApiConfig.transcribeAudioUrl).then(
+          (transcription) => __async(void 0, null, function* () {
+            recordedChunks.current = [];
+            setPushToTalkState("idle");
+            const message = yield sendFunction(transcription);
+            setStartReadingFromMessageId(message.id);
+          })
+        );
+      }
+    }
+    return () => {
+      stopRecording(mediaRecorderRef);
+    };
+  }, [pushToTalkState]);
+  (0, import_react7.useEffect)(() => {
+    if (inProgress === false && startReadingFromMessageId) {
+      const lastMessageIndex = context.messages.findIndex(
+        (message) => message.id === startReadingFromMessageId
+      );
+      const messagesAfterLast = context.messages.slice(lastMessageIndex + 1).filter((message) => message.role === "assistant" && message.content);
+      const text = messagesAfterLast.map((message) => message.content).join("\n");
+      playAudioResponse(text, context.copilotApiConfig.textToSpeechUrl, audioContextRef.current);
+      setStartReadingFromMessageId(null);
+    }
+  }, [startReadingFromMessageId, inProgress]);
+  return { pushToTalkState, setPushToTalkState };
+};
+
 // src/components/chat/Input.tsx
+var import_react_core3 = require("@copilotkit/react-core");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var Input = ({ inProgress, onSend, isVisible = false }) => {
   const context = useChatContext();
+  const copilotContext = (0, import_react_core3.useCopilotContext)();
+  const pushToTalkConfigured = copilotContext.copilotApiConfig.textToSpeechUrl !== void 0 && copilotContext.copilotApiConfig.transcribeAudioUrl !== void 0;
   const textareaRef = (0, import_react8.useRef)(null);
   const handleDivClick = (event) => {
     var _a;
@@ -1188,10 +1274,14 @@ var Input = ({ inProgress, onSend, isVisible = false }) => {
       (_a = textareaRef.current) == null ? void 0 : _a.focus();
     }
   }, [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 /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "copilotKitInput", onClick: handleDivClick, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "copilotKitSendButton", disabled, onClick: send, children: icon }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       Textarea_default,
       {
@@ -1208,13 +1298,21 @@ var Input = ({ inProgress, onSend, isVisible = false }) => {
           }
         }
       }
-    )
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "copilotKitInputControls", children: [
+      showPushToTalk && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "button",
+        {
+          onClick: () => setPushToTalkState(pushToTalkState === "idle" ? "recording" : "transcribing"),
+          className: pushToTalkState === "recording" ? "copilotKitPushToTalkRecording" : "",
+          children: context.icons.pushToTalkIcon
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { disabled: sendDisabled, onClick: send, children: sendIcon })
+    ] })
   ] });
 };
 
-// src/components/chat/Chat.tsx
-var import_nanoid2 = require("nanoid");
-
 // src/components/chat/Response.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var ResponseButton = ({ onClick, inProgress }) => {
@@ -1226,7 +1324,7 @@ var ResponseButton = ({ onClick, inProgress }) => {
 };
 
 // src/components/chat/Suggestion.tsx
-var import_react_core2 = require("@copilotkit/react-core");
+var import_react_core4 = 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)(
@@ -1252,7 +1350,7 @@ var reloadSuggestions = (context, chatSuggestionConfiguration, setCurrentSuggest
   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)({
+      const result = yield (0, import_react_core4.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",
@@ -1308,50 +1406,64 @@ var reloadSuggestions = (context, chatSuggestionConfiguration, setCurrentSuggest
   }
 });
 
-// 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_react9 = __toESM(require("react"));
+var import_react_core5 = require("@copilotkit/react-core");
+var import_nanoid2 = require("nanoid");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var SUGGESTIONS_DEBOUNCE_TIMEOUT = 1e3;
-var CopilotChat = ({
+function CopilotChat({
   instructions,
-  defaultOpen = false,
-  clickOutsideToClose = true,
-  hitEscapeToClose = true,
-  onSetOpen,
   onSubmitMessage,
-  shortcut = "/",
   icons,
   labels,
   makeSystemMessage,
   showResponseButton = true,
   onInProgress,
-  Window: Window2 = Window,
-  Button: Button2 = Button,
-  Header: Header2 = Header,
   Messages: Messages2 = Messages,
   Input: Input2 = Input,
   ResponseButton: ResponseButton2 = ResponseButton,
-  className,
-  children
-}) => {
-  const { visibleMessages, append, reload, stop, isLoading, input, setInput } = (0, import_react_core3.useCopilotChat)({
+  className
+}) {
+  const { visibleMessages, isLoading, currentSuggestions, sendMessage, stop, reload } = useCopilotChatLogic(instructions, makeSystemMessage, onInProgress, onSubmitMessage);
+  const context = import_react9.default.useContext(ChatContext);
+  let open = true;
+  let setOpen = () => {
+  };
+  if (context) {
+    icons = context.icons;
+    labels = context.labels;
+    open = context.open;
+    setOpen = context.setOpen;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChatContextProvider, { icons, labels, open, setOpen, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `copilotKitPanel ${className}`, children: [
+    /* @__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: true })
+  ] }) });
+}
+var SUGGESTIONS_DEBOUNCE_TIMEOUT = 1e3;
+var useCopilotChatLogic = (instructions, makeSystemMessage, onInProgress, onSubmitMessage) => {
+  const { visibleMessages, append, reload, stop, isLoading, input, setInput } = (0, import_react_core5.useCopilotChat)({
     id: (0, import_nanoid2.nanoid)(),
     makeSystemMessage,
     additionalInstructions: instructions
   });
-  const [currentSuggestions, setCurrentSuggestions] = import_react9.default.useState([]);
+  const [currentSuggestions, setCurrentSuggestions] = (0, import_react9.useState)([]);
   const suggestionsAbortControllerRef = (0, import_react9.useRef)(null);
   const debounceTimerRef = (0, import_react9.useRef)();
   const abortSuggestions = () => {
@@ -1359,27 +1471,17 @@ var CopilotChat = ({
     (_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;
-    });
-  };
+  const context = (0, import_react_core5.useCopilotContext)();
   (0, import_react9.useEffect)(() => {
     onInProgress == null ? void 0 : onInProgress(isLoading);
     abortSuggestions();
     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
           );
@@ -1390,11 +1492,7 @@ var CopilotChat = ({
     return () => {
       clearTimeout(debounceTimerRef.current);
     };
-  }, [isLoading, chatSuggestionConfiguration]);
-  const setOpen = (open) => {
-    onSetOpen == null ? void 0 : onSetOpen(open);
-    setOpenState(open);
-  };
+  }, [isLoading, context.chatSuggestionConfiguration]);
   const sendMessage = (messageContent) => __async(void 0, null, function* () {
     abortSuggestions();
     setCurrentSuggestions([]);
@@ -1407,147 +1505,88 @@ var CopilotChat = ({
     append(message);
     return message;
   });
-  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 })
-              ]
-            }
-          )
-        ] })
-      ]
-    }
-  );
+  return {
+    visibleMessages,
+    isLoading,
+    currentSuggestions,
+    sendMessage,
+    stop,
+    reload,
+    input,
+    setInput
+  };
 };
 
-// src/components/chat/Popup.tsx
+// src/components/chat/Modal.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
+var CopilotModal = ({
+  instructions,
+  defaultOpen = false,
+  clickOutsideToClose = true,
+  hitEscapeToClose = true,
+  onSetOpen,
+  onSubmitMessage,
+  shortcut = "/",
+  icons,
+  labels,
+  makeSystemMessage,
+  showResponseButton = true,
+  onInProgress,
+  Window: Window2 = Window,
+  Button: Button2 = Button,
+  Header: Header2 = Header,
+  Messages: Messages2 = Messages,
+  Input: Input2 = Input,
+  ResponseButton: ResponseButton2 = ResponseButton,
+  className,
+  children
+}) => {
+  const [openState, setOpenState] = import_react10.default.useState(defaultOpen);
+  const setOpen = (open) => {
+    onSetOpen == null ? void 0 : onSetOpen(open);
+    setOpenState(open);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ChatContextProvider, { icons, labels, open: openState, setOpen: setOpenState, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button2, { open: openState, setOpen }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        Window2,
+        {
+          open: openState,
+          setOpen,
+          clickOutsideToClose,
+          shortcut,
+          hitEscapeToClose,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Header2, { open: openState, setOpen }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              CopilotChat,
+              {
+                instructions,
+                makeSystemMessage,
+                onInProgress,
+                onSubmitMessage,
+                showResponseButton,
+                Messages: Messages2,
+                Input: Input2,
+                ResponseButton: ResponseButton2
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/chat/Popup.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function CopilotPopup(props) {
   props = __spreadProps(__spreadValues({}, props), {
     className: props.className ? props.className + " copilotKitPopup" : "copilotKitPopup"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CopilotChat, __spreadProps(__spreadValues({}, props), { children: props.children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CopilotModal, __spreadProps(__spreadValues({}, props), { children: props.children }));
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {