@copilotkit/react-ui 1.51.3-next.5 → 1.51.3-next.7

package/dist/components/chat/Sidebar.mjs

@@ -1,7 +1,7 @@
 import {
   CopilotSidebar
-} from "../../chunk-4S4ZEKE6.mjs";
-import "../../chunk-HKZL4P3F.mjs";
+} from "../../chunk-RKQM2AE5.mjs";
+import "../../chunk-OHGUQZJT.mjs";
 import "../../chunk-C3GSYRC3.mjs";
 import "../../chunk-GDSZGYCE.mjs";
 import "../../chunk-V7W6IM2V.mjs";
@@ -12,20 +12,20 @@ import "../../chunk-KXE2JCUH.mjs";
 import "../../chunk-NRA3CFEE.mjs";
 import "../../chunk-BH6PCAAL.mjs";
 import "../../chunk-UFN2VWSR.mjs";
-import "../../chunk-YQOESY4Y.mjs";
+import "../../chunk-PD36EMOZ.mjs";
 import "../../chunk-VHKHX7GV.mjs";
 import "../../chunk-6TWQUA2Q.mjs";
 import "../../chunk-PLHTVHUW.mjs";
 import "../../chunk-3W6J75HS.mjs";
 import "../../chunk-ELGRNEAO.mjs";
 import "../../chunk-QIOJXTIQ.mjs";
-import "../../chunk-UH5GQ7QF.mjs";
-import "../../chunk-PKSW6ZMQ.mjs";
-import "../../chunk-XEZ5ODJS.mjs";
-import "../../chunk-SLM2AOHF.mjs";
+import "../../chunk-WNX755OE.mjs";
+import "../../chunk-F2CDEOFX.mjs";
+import "../../chunk-LBR23XXF.mjs";
+import "../../chunk-LYYDXL2G.mjs";
 import "../../chunk-DBKRAOH7.mjs";
 import "../../chunk-RYUCX3ZK.mjs";
-import "../../chunk-XOBQLKUU.mjs";
+import "../../chunk-JZ3RFQQ6.mjs";
 import "../../chunk-IK2BPURM.mjs";
 import "../../chunk-IEMQ2SQW.mjs";
 import "../../chunk-XWG3L6QC.mjs";

package/dist/components/chat/index.d.ts

@@ -15,4 +15,4 @@ import 'react';
 import 'react/jsx-runtime';
 import './Modal.js';
 import '@copilotkit/react-core';
-import 'streamdown';
+import 'react-markdown';

package/dist/components/chat/index.js

@@ -93,7 +93,7 @@ __export(chat_exports, {
 module.exports = __toCommonJS(chat_exports);
 
 // src/components/chat/Modal.tsx
-var import_react15 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 
 // src/components/chat/ChatContext.tsx
 var import_react = __toESM(require("react"));
@@ -1034,7 +1034,7 @@ var Header = ({}) => {
 };
 
 // src/components/chat/Messages.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_react_core5 = require("@copilotkit/react-core");
 
 // src/components/chat/messages/UserMessage.tsx
@@ -1066,7 +1066,8 @@ var UserMessage = (props) => {
 };
 
 // src/components/chat/Markdown.tsx
-var import_streamdown = require("streamdown");
+var import_react7 = require("react");
+var import_react_markdown = __toESM(require("react-markdown"));
 
 // src/components/chat/CodeBlock.tsx
 var import_react6 = require("react");
@@ -1478,6 +1479,9 @@ var highlightStyle = {
 };
 
 // src/components/chat/Markdown.tsx
+var import_remark_gfm = __toESM(require("remark-gfm"));
+var import_remark_math = __toESM(require("remark-math"));
+var import_rehype_raw = __toESM(require("rehype-raw"));
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var defaultComponents = {
   a(_a) {
@@ -1571,21 +1575,27 @@ var defaultComponents = {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
   }
 };
+var MemoizedReactMarkdown = (0, import_react7.memo)(
+  import_react_markdown.default,
+  (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.components === nextProps.components
+);
 var Markdown = ({ content, components }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "copilotKitMarkdown", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_streamdown.Streamdown,
+    MemoizedReactMarkdown,
     {
       components: __spreadValues(__spreadValues({}, defaultComponents), components),
+      remarkPlugins: [import_remark_gfm.default, [import_remark_math.default, { singleDollarTextMath: false }]],
+      rehypePlugins: [import_rehype_raw.default],
       children: content
     }
   ) });
 };
 
 // src/components/chat/messages/AssistantMessage.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var AssistantMessage = (props) => {
-  var _a;
+  var _a, _b, _c;
   const { icons, labels } = useChatContext();
   const {
     message,
@@ -1598,7 +1608,7 @@ var AssistantMessage = (props) => {
     feedback,
     markdownTagRenderers
   } = props;
-  const [copied, setCopied] = (0, import_react7.useState)(false);
+  const [copied, setCopied] = (0, import_react8.useState)(false);
   const handleCopy = () => {
     const content2 = (message == null ? void 0 : message.content) || "";
     if (content2 && onCopy) {
@@ -1628,8 +1638,12 @@ var AssistantMessage = (props) => {
   };
   const LoadingIcon = () => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: icons.activityIcon });
   const content = (message == null ? void 0 : message.content) || "";
-  const subComponent = (_a = message == null ? void 0 : message.generativeUI) == null ? void 0 : _a.call(message);
+  const subComponent = (_b = (_a = message == null ? void 0 : message.generativeUI) == null ? void 0 : _a.call(message)) != null ? _b : props.subComponent;
+  const subComponentPosition = (_c = message == null ? void 0 : message.generativeUIPosition) != null ? _c : "after";
+  const renderBefore = subComponent && subComponentPosition === "before";
+  const renderAfter = subComponent && subComponentPosition !== "before";
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    renderBefore ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { marginBottom: "0.5rem" }, children: subComponent }) : null,
     content && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "copilotKitMessage copilotKitAssistantMessage", children: [
       content && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Markdown, { content, components: markdownTagRenderers }),
       content && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
@@ -1681,16 +1695,16 @@ var AssistantMessage = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { marginBottom: "0.5rem" }, children: subComponent }),
+    renderAfter ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { marginBottom: "0.5rem" }, children: subComponent }) : null,
     isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LoadingIcon, {})
   ] });
 };
 
 // src/components/chat/messages/ImageRenderer.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var ImageRenderer = ({ image, content, className = "" }) => {
-  const [imageError, setImageError] = (0, import_react8.useState)(false);
+  const [imageError, setImageError] = (0, import_react9.useState)(false);
   const imageSrc = `data:image/${image.format};base64,${image.bytes}`;
   const altText = content || "User uploaded image";
   const handleImageError = () => {
@@ -1933,18 +1947,18 @@ var Messages = ({
   var _a;
   const { labels, icons } = useChatContext();
   const { messages: visibleMessages, interrupt } = (0, import_react_core5.useCopilotChatInternal)();
-  const initialMessages = (0, import_react9.useMemo)(() => makeInitialMessages(labels.initial), [labels.initial]);
+  const initialMessages = (0, import_react10.useMemo)(() => makeInitialMessages(labels.initial), [labels.initial]);
   const messages = [...initialMessages, ...visibleMessages];
   const { messagesContainerRef, messagesEndRef } = useScrollToBottom(messages);
   const hasLegacyProps = !!(RenderTextMessage || RenderActionExecutionMessage || RenderAgentStateMessage || RenderResultMessage || RenderImageMessage);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (hasLegacyProps) {
       console.warn(
         "[CopilotKit] Legacy message render props (RenderTextMessage, RenderActionExecutionMessage, etc.) are deprecated. Please use the unified 'RenderMessage' prop instead. See migration guide: https://docs.copilotkit.ai/migration/render-message"
       );
     }
   }, [hasLegacyProps]);
-  const legacyProps = (0, import_react9.useMemo)(
+  const legacyProps = (0, import_react10.useMemo)(
     () => ({
       RenderTextMessage,
       RenderActionExecutionMessage,
@@ -2015,10 +2029,10 @@ function makeInitialMessages(initial) {
   ];
 }
 function useScrollToBottom(messages) {
-  const messagesEndRef = (0, import_react9.useRef)(null);
-  const messagesContainerRef = (0, import_react9.useRef)(null);
-  const isProgrammaticScrollRef = (0, import_react9.useRef)(false);
-  const isUserScrollUpRef = (0, import_react9.useRef)(false);
+  const messagesEndRef = (0, import_react10.useRef)(null);
+  const messagesContainerRef = (0, import_react10.useRef)(null);
+  const isProgrammaticScrollRef = (0, import_react10.useRef)(false);
+  const isUserScrollUpRef = (0, import_react10.useRef)(false);
   const scrollToBottom = () => {
     if (messagesContainerRef.current && messagesEndRef.current) {
       isProgrammaticScrollRef.current = true;
@@ -2035,7 +2049,7 @@ function useScrollToBottom(messages) {
       isUserScrollUpRef.current = scrollTop + clientHeight < scrollHeight;
     }
   };
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const container = messagesContainerRef.current;
     if (container) {
       container.addEventListener("scroll", handleScroll);
@@ -2046,7 +2060,7 @@ function useScrollToBottom(messages) {
       }
     };
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const container = messagesContainerRef.current;
     if (!container) {
       return;
@@ -2065,7 +2079,7 @@ function useScrollToBottom(messages) {
       mutationObserver.disconnect();
     };
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     isUserScrollUpRef.current = false;
     scrollToBottom();
   }, [messages.filter((m) => m.role === "user").length]);
@@ -2073,12 +2087,12 @@ function useScrollToBottom(messages) {
 }
 
 // src/components/chat/Input.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/components/chat/Textarea.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var AutoResizingTextarea = (0, import_react10.forwardRef)(
+var AutoResizingTextarea = (0, import_react11.forwardRef)(
   ({
     maxRows = 1,
     placeholder,
@@ -2089,10 +2103,10 @@ var AutoResizingTextarea = (0, import_react10.forwardRef)(
     onCompositionEnd,
     autoFocus
   }, ref) => {
-    const internalTextareaRef = (0, import_react10.useRef)(null);
-    const [maxHeight, setMaxHeight] = (0, import_react10.useState)(0);
-    (0, import_react10.useImperativeHandle)(ref, () => internalTextareaRef.current);
-    (0, import_react10.useEffect)(() => {
+    const internalTextareaRef = (0, import_react11.useRef)(null);
+    const [maxHeight, setMaxHeight] = (0, import_react11.useState)(0);
+    (0, import_react11.useImperativeHandle)(ref, () => internalTextareaRef.current);
+    (0, import_react11.useEffect)(() => {
       const calculateMaxHeight = () => {
         const textarea = internalTextareaRef.current;
         if (textarea) {
@@ -2106,7 +2120,7 @@ var AutoResizingTextarea = (0, import_react10.forwardRef)(
       };
       calculateMaxHeight();
     }, [maxRows]);
-    (0, import_react10.useEffect)(() => {
+    (0, import_react11.useEffect)(() => {
       const textarea = internalTextareaRef.current;
       if (textarea) {
         textarea.style.height = "auto";
@@ -2138,7 +2152,7 @@ var Textarea_default = AutoResizingTextarea;
 // src/hooks/use-push-to-talk.tsx
 var import_react_core6 = require("@copilotkit/react-core");
 var import_runtime_client_gql2 = require("@copilotkit/runtime-client-gql");
-var import_react11 = require("react");
+var import_react12 = 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 });
@@ -2187,16 +2201,16 @@ var usePushToTalk = ({
   sendFunction,
   inProgress
 }) => {
-  const [pushToTalkState, setPushToTalkState] = (0, import_react11.useState)("idle");
-  const mediaStreamRef = (0, import_react11.useRef)(null);
-  const audioContextRef = (0, import_react11.useRef)(null);
-  const mediaRecorderRef = (0, import_react11.useRef)(null);
-  const recordedChunks = (0, import_react11.useRef)([]);
+  const [pushToTalkState, setPushToTalkState] = (0, import_react12.useState)("idle");
+  const mediaStreamRef = (0, import_react12.useRef)(null);
+  const audioContextRef = (0, import_react12.useRef)(null);
+  const mediaRecorderRef = (0, import_react12.useRef)(null);
+  const recordedChunks = (0, import_react12.useRef)([]);
   const generalContext = (0, import_react_core6.useCopilotContext)();
   const messagesContext = (0, import_react_core6.useCopilotMessagesContext)();
   const context = __spreadValues(__spreadValues({}, generalContext), messagesContext);
-  const [startReadingFromMessageId, setStartReadingFromMessageId] = (0, import_react11.useState)(null);
-  (0, import_react11.useEffect)(() => {
+  const [startReadingFromMessageId, setStartReadingFromMessageId] = (0, import_react12.useState)(null);
+  (0, import_react12.useEffect)(() => {
     if (pushToTalkState === "recording") {
       startRecording(
         mediaStreamRef,
@@ -2224,7 +2238,7 @@ var usePushToTalk = ({
       stopRecording(mediaRecorderRef);
     };
   }, [pushToTalkState]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (inProgress === false && startReadingFromMessageId) {
       const lastMessageIndex = context.messages.findIndex(
         (message) => message.id === startReadingFromMessageId
@@ -2243,7 +2257,7 @@ var usePushToTalk = ({
 var import_react_core7 = require("@copilotkit/react-core");
 
 // src/components/chat/PoweredByTag.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/hooks/use-dark-mode.ts
 var useDarkMode = () => {
@@ -2255,9 +2269,9 @@ var useDarkMode = () => {
 // src/components/chat/PoweredByTag.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function PoweredByTag({ showPoweredBy = true }) {
-  const [mounted, setMounted] = (0, import_react12.useState)(false);
+  const [mounted, setMounted] = (0, import_react13.useState)(false);
   const isDark = useDarkMode();
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     setMounted(true);
   }, []);
   if (!showPoweredBy) {
@@ -2291,8 +2305,8 @@ var Input = ({
   const copilotContext = (0, import_react_core7.useCopilotContext)();
   const showPoweredBy = !((_a = copilotContext.copilotApiConfig) == null ? void 0 : _a.publicApiKey);
   const pushToTalkConfigured = copilotContext.copilotApiConfig.textToSpeechUrl !== void 0 && copilotContext.copilotApiConfig.transcribeAudioUrl !== void 0;
-  const textareaRef = (0, import_react13.useRef)(null);
-  const [isComposing, setIsComposing] = (0, import_react13.useState)(false);
+  const textareaRef = (0, import_react14.useRef)(null);
+  const [isComposing, setIsComposing] = (0, import_react14.useState)(false);
   const handleDivClick = (event) => {
     var _a2;
     const target = event.target;
@@ -2302,7 +2316,7 @@ var Input = ({
       return;
     (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
   };
-  const [text, setText] = (0, import_react13.useState)("");
+  const [text, setText] = (0, import_react14.useState)("");
   const send = () => {
     var _a2;
     if (inProgress)
@@ -2316,17 +2330,17 @@ var Input = ({
     inProgress
   });
   const isInProgress = inProgress || pushToTalkState === "transcribing";
-  const { buttonIcon, buttonAlt } = (0, import_react13.useMemo)(() => {
+  const { buttonIcon, buttonAlt } = (0, import_react14.useMemo)(() => {
     if (!chatReady)
       return { buttonIcon: context.icons.spinnerIcon, buttonAlt: "Loading" };
     return isInProgress && !hideStopButton && chatReady ? { buttonIcon: context.icons.stopIcon, buttonAlt: "Stop" } : { buttonIcon: context.icons.sendIcon, buttonAlt: "Send" };
   }, [isInProgress, chatReady, hideStopButton, context.icons.stopIcon, context.icons.sendIcon]);
   const showPushToTalk = pushToTalkConfigured && (pushToTalkState === "idle" || pushToTalkState === "recording") && !inProgress;
   const { interrupt } = (0, import_react_core7.useCopilotChatInternal)();
-  const canSend = (0, import_react13.useMemo)(() => {
+  const canSend = (0, import_react14.useMemo)(() => {
     return !isInProgress && text.trim().length > 0 && pushToTalkState === "idle" && !interrupt;
   }, [interrupt, isInProgress, text, pushToTalkState]);
-  const canStop = (0, import_react13.useMemo)(() => {
+  const canStop = (0, import_react14.useMemo)(() => {
     return isInProgress && !hideStopButton;
   }, [isInProgress, hideStopButton]);
   const sendDisabled = !canSend && !canStop;
@@ -2383,7 +2397,7 @@ var Input = ({
 };
 
 // src/components/chat/Chat.tsx
-var import_react14 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_react_core9 = require("@copilotkit/react-core");
 var import_shared3 = require("@copilotkit/shared");
 
@@ -2560,13 +2574,13 @@ function CopilotChat({
     removeInternalErrorHandler
   } = (0, import_react_core9.useCopilotContext)();
   const { publicApiKey, chatApiEndpoint } = copilotApiConfig;
-  const [selectedImages, setSelectedImages] = (0, import_react14.useState)([]);
-  const [chatError, setChatError] = (0, import_react14.useState)(null);
-  const [messageFeedback, setMessageFeedback] = (0, import_react14.useState)(
+  const [selectedImages, setSelectedImages] = (0, import_react15.useState)([]);
+  const [chatError, setChatError] = (0, import_react15.useState)(null);
+  const [messageFeedback, setMessageFeedback] = (0, import_react15.useState)(
     {}
   );
-  const fileInputRef = (0, import_react14.useRef)(null);
-  const triggerObservabilityHook = (0, import_react14.useCallback)(
+  const fileInputRef = (0, import_react15.useRef)(null);
+  const triggerObservabilityHook = (0, import_react15.useCallback)(
     (hookName, ...args) => {
       if (publicApiKey && (observabilityHooks == null ? void 0 : observabilityHooks[hookName])) {
         observabilityHooks[hookName](...args);
@@ -2585,7 +2599,7 @@ function CopilotChat({
     },
     [publicApiKey, observabilityHooks, setBannerError]
   );
-  const triggerChatError = (0, import_react14.useCallback)(
+  const triggerChatError = (0, import_react15.useCallback)(
     (error, operation, originalError) => {
       const errorMessage = (error == null ? void 0 : error.message) || (error == null ? void 0 : error.toString()) || "An error occurred";
       setChatError({
@@ -2631,7 +2645,7 @@ function CopilotChat({
     },
     [publicApiKey, chatApiEndpoint, observabilityHooks, setBannerError]
   );
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const id = "chat-component";
     setInternalErrorHandler({
       [id]: (error) => {
@@ -2644,7 +2658,7 @@ function CopilotChat({
       removeInternalErrorHandler == null ? void 0 : removeInternalErrorHandler(id);
     };
   }, [triggerChatError, setInternalErrorHandler, removeInternalErrorHandler]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!imageUploadsEnabled)
       return;
     const handlePaste = (e) => __async(this, null, function* () {
@@ -2690,7 +2704,7 @@ function CopilotChat({
     document.addEventListener("paste", handlePaste);
     return () => document.removeEventListener("paste", handlePaste);
   }, [imageUploadsEnabled, triggerChatError]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!(additionalInstructions == null ? void 0 : additionalInstructions.length)) {
       setChatInstructions(instructions || "");
       return;
@@ -2718,8 +2732,8 @@ function CopilotChat({
     onStopGeneration,
     onReloadMessages
   });
-  const prevIsLoading = (0, import_react14.useRef)(isLoading);
-  (0, import_react14.useEffect)(() => {
+  const prevIsLoading = (0, import_react15.useRef)(isLoading);
+  (0, import_react15.useEffect)(() => {
     if (prevIsLoading.current !== isLoading) {
       if (isLoading) {
         triggerObservabilityHook("onChatStarted");
@@ -2742,7 +2756,7 @@ function CopilotChat({
       role: "user"
     });
   };
-  const chatContext = import_react14.default.useContext(ChatContext);
+  const chatContext = import_react15.default.useContext(ChatContext);
   const isVisible = chatContext ? chatContext.open : true;
   const handleRegenerate = (messageId) => {
     if (onRegenerate) {
@@ -2886,7 +2900,7 @@ function WrappedCopilotChat({
   labels,
   className
 }) {
-  const chatContext = import_react14.default.useContext(ChatContext);
+  const chatContext = import_react15.default.useContext(ChatContext);
   if (!chatContext) {
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChatContextProvider, { icons, labels, open: true, setOpen: () => {
     }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `copilotKitChat ${className != null ? className : ""}`, children }) });
@@ -2924,7 +2938,7 @@ var CopilotModalInner = (_a) => {
   ]);
   const { copilotApiConfig, setBannerError } = (0, import_react_core10.useCopilotContext)();
   const { publicApiKey } = copilotApiConfig;
-  const triggerObservabilityHook = (0, import_react15.useCallback)(
+  const triggerObservabilityHook = (0, import_react16.useCallback)(
     (hookName, ...args) => {
       if (publicApiKey && (observabilityHooks == null ? void 0 : observabilityHooks[hookName])) {
         observabilityHooks[hookName](...args);
@@ -2944,8 +2958,8 @@ var CopilotModalInner = (_a) => {
     [publicApiKey, observabilityHooks, setBannerError]
   );
   const { open } = useChatContext();
-  const prevOpen = (0, import_react15.useRef)(open);
-  (0, import_react15.useEffect)(() => {
+  const prevOpen = (0, import_react16.useRef)(open);
+  (0, import_react16.useEffect)(() => {
     if (prevOpen.current !== open) {
       onSetOpen == null ? void 0 : onSetOpen(open);
       if (open) {
@@ -2956,8 +2970,8 @@ var CopilotModalInner = (_a) => {
       prevOpen.current = open;
     }
   }, [open, onSetOpen, triggerObservabilityHook]);
-  const memoizedHeader = (0, import_react15.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Header2, {}), [Header2]);
-  const memoizedChildren = (0, import_react15.useMemo)(() => children, [children]);
+  const memoizedHeader = (0, import_react16.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Header2, {}), [Header2]);
+  const memoizedChildren = (0, import_react16.useMemo)(() => children, [children]);
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
     memoizedChildren,
     /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className, children: [
@@ -3037,7 +3051,7 @@ var CopilotModal = (_a) => {
     "children",
     "observabilityHooks"
   ]);
-  const [openState, setOpenState] = import_react15.default.useState(defaultOpen);
+  const [openState, setOpenState] = import_react16.default.useState(defaultOpen);
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChatContextProvider, { icons, labels, open: openState, setOpen: setOpenState, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     CopilotModalInner,
     __spreadProps(__spreadValues({
@@ -3081,13 +3095,13 @@ function CopilotPopup(props) {
 }
 
 // src/components/chat/Sidebar.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 function CopilotSidebar(props) {
   props = __spreadProps(__spreadValues({}, props), {
     className: props.className ? props.className + " copilotKitSidebar" : "copilotKitSidebar"
   });
-  const [expandedClassName, setExpandedClassName] = (0, import_react16.useState)(
+  const [expandedClassName, setExpandedClassName] = (0, import_react17.useState)(
     props.defaultOpen ? "sidebarExpanded" : ""
   );
   const onSetOpen = (open) => {