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

package/dist/components/chat/Sidebar.js

@@ -82,10 +82,10 @@ __export(Sidebar_exports, {
   CopilotSidebar: () => CopilotSidebar
 });
 module.exports = __toCommonJS(Sidebar_exports);
-var import_react9 = require("react");
+var import_react11 = require("react");
 
-// src/components/chat/Chat.tsx
-var import_react8 = __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"));
@@ -191,6 +191,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",
   {
@@ -276,6 +310,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");
@@ -299,40 +352,34 @@ var ChatContextProvider = ({
   open,
   setOpen
 }) => {
-  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...",
+      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,
+      pushToTalkIcon: PushToTalkIcon
+    }), {
+      icons
     }),
-    [labels, icons, open, setOpen]
-  );
+    open,
+    setOpen
+  };
   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");
-
 // src/components/chat/Window.tsx
 var import_react2 = __toESM(require("react"));
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -942,7 +989,7 @@ 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)(
@@ -1028,7 +1075,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) {
@@ -1048,7 +1095,7 @@ 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");
@@ -1088,7 +1135,7 @@ var AutoResizingTextarea = (0, import_react6.forwardRef)(
         onKeyDown,
         placeholder,
         style: {
-          overflow: "hidden",
+          overflow: "auto",
           resize: "none",
           maxHeight: `${maxHeight}px`
         },
@@ -1099,18 +1146,121 @@ var AutoResizingTextarea = (0, import_react6.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, children, isVisible = false }) => {
+var Input = ({ inProgress, onSend, isVisible = false }) => {
   const context = useChatContext();
-  const textareaRef = (0, import_react7.useRef)(null);
+  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;
     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)
@@ -1119,17 +1269,20 @@ 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();
     }
   }, [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)("span", { children }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "copilotKitSendButton", disabled, onClick: send, children: icon }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       Textarea_default,
       {
@@ -1146,13 +1299,21 @@ var Input = ({ inProgress, onSend, children, 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 }) => {
@@ -1163,9 +1324,203 @@ var ResponseButton = ({ onClick, inProgress }) => {
   ] });
 };
 
-// src/components/chat/Chat.tsx
+// src/components/chat/Suggestion.tsx
+var import_react_core4 = require("@copilotkit/react-core");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var CopilotChat = ({
+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_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",
+        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/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");
+function CopilotChat({
+  instructions,
+  onSubmitMessage,
+  icons,
+  labels,
+  makeSystemMessage,
+  showResponseButton = true,
+  onInProgress,
+  Messages: Messages2 = Messages,
+  Input: Input2 = Input,
+  ResponseButton: ResponseButton2 = ResponseButton,
+  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] = (0, import_react9.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_core5.useCopilotContext)();
+  (0, import_react9.useEffect)(() => {
+    onInProgress == null ? void 0 : onInProgress(isLoading);
+    abortSuggestions();
+    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
+    );
+    return () => {
+      clearTimeout(debounceTimerRef.current);
+    };
+  }, [isLoading, context.chatSuggestionConfiguration]);
+  const sendMessage = (messageContent) => __async(void 0, null, function* () {
+    abortSuggestions();
+    setCurrentSuggestions([]);
+    onSubmitMessage == null ? void 0 : onSubmitMessage(messageContent);
+    const message = {
+      id: (0, import_nanoid2.nanoid)(),
+      content: messageContent,
+      role: "user"
+    };
+    append(message);
+    return message;
+  });
+  return {
+    visibleMessages,
+    isLoading,
+    currentSuggestions,
+    sendMessage,
+    stop,
+    reload,
+    input,
+    setInput
+  };
+};
+
+// src/components/chat/Modal.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var CopilotModal = ({
   instructions,
   defaultOpen = false,
   clickOutsideToClose = true,
@@ -1187,32 +1542,16 @@ var CopilotChat = ({
   className,
   children
 }) => {
-  const { visibleMessages, append, reload, stop, isLoading, input, setInput } = (0, import_react_core2.useCopilotChat)({
-    id: (0, import_nanoid2.nanoid)(),
-    makeSystemMessage,
-    additionalInstructions: instructions
-  });
-  (0, import_react8.useEffect)(() => {
-    onInProgress == null ? void 0 : onInProgress(isLoading);
-  }, [isLoading]);
-  const [openState, setOpenState] = import_react8.default.useState(defaultOpen);
+  const [openState, setOpenState] = import_react10.default.useState(defaultOpen);
   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({
-      id: (0, import_nanoid2.nanoid)(),
-      content: message,
-      role: "user"
-    });
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ChatContextProvider, { icons, labels, open: openState, setOpen: setOpenState, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.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)(
+    /* @__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,
@@ -1221,9 +1560,20 @@ var CopilotChat = ({
           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 }) })
+            /* @__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
+              }
+            )
           ]
         }
       )
@@ -1232,12 +1582,12 @@ var CopilotChat = ({
 };
 
 // src/components/chat/Sidebar.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var CopilotSidebar = (props) => {
+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_react11.useState)(
     props.defaultOpen ? "sidebarExpanded" : ""
   );
   const onSetOpen = (open) => {
@@ -1245,8 +1595,8 @@ var CopilotSidebar = (props) => {
     (_a = props.onSetOpen) == null ? void 0 : _a.call(props, open);
     setExpandedClassName(open ? "sidebarExpanded" : "");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `copilotKitSidebarContentWrapper ${expandedClassName}`, children: /* @__PURE__ */ (0, import_jsx_runtime13.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)(CopilotModal, __spreadProps(__spreadValues(__spreadValues({}, props), { onSetOpen }), { children: props.children })) });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CopilotSidebar