@copilotkit/react-ui 1.10.5 → 1.10.6-next.0

package/dist/components/chat/Popup.mjs

@@ -1,7 +1,7 @@
 import {
   CopilotPopup
-} from "../../chunk-QPONDGDJ.mjs";
-import "../../chunk-DSNTTAJX.mjs";
+} from "../../chunk-5HQD6ZPA.mjs";
+import "../../chunk-7HAFY2YK.mjs";
 import "../../chunk-C3GSYRC3.mjs";
 import "../../chunk-GDSZGYCE.mjs";
 import "../../chunk-V7W6IM2V.mjs";
@@ -12,12 +12,12 @@ import "../../chunk-KXE2JCUH.mjs";
 import "../../chunk-NRA3CFEE.mjs";
 import "../../chunk-BH6PCAAL.mjs";
 import "../../chunk-UFN2VWSR.mjs";
-import "../../chunk-K2FLPUR5.mjs";
+import "../../chunk-G7VB7A4O.mjs";
 import "../../chunk-226ZMOE3.mjs";
 import "../../chunk-W26XFBEG.mjs";
 import "../../chunk-PLHTVHUW.mjs";
-import "../../chunk-DTRPPNSA.mjs";
-import "../../chunk-CGEAG65D.mjs";
+import "../../chunk-ZJCHKHE4.mjs";
+import "../../chunk-ELGRNEAO.mjs";
 import "../../chunk-QIOJXTIQ.mjs";
 import "../../chunk-W7ONZTSW.mjs";
 import "../../chunk-2LIO4Z3E.mjs";

package/dist/components/chat/PoweredByTag.js

@@ -23,6 +23,7 @@ __export(PoweredByTag_exports, {
   PoweredByTag: () => PoweredByTag
 });
 module.exports = __toCommonJS(PoweredByTag_exports);
+var import_react = require("react");
 
 // src/hooks/use-dark-mode.ts
 var useDarkMode = () => {
@@ -34,7 +35,11 @@ var useDarkMode = () => {
 // src/components/chat/PoweredByTag.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function PoweredByTag({ showPoweredBy = true }) {
+  const [mounted, setMounted] = (0, import_react.useState)(false);
   const isDark = useDarkMode();
+  (0, import_react.useEffect)(() => {
+    setMounted(true);
+  }, []);
   if (!showPoweredBy) {
     return null;
   }
@@ -45,7 +50,7 @@ function PoweredByTag({ showPoweredBy = true }) {
     textAlign: "center",
     fontSize: "12px",
     padding: "3px 0",
-    color: isDark ? "rgb(69, 69, 69)" : "rgb(214, 214, 214)"
+    color: mounted && isDark ? "rgb(69, 69, 69)" : "rgb(214, 214, 214)"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "poweredBy", style: poweredByStyle, children: "Powered by CopilotKit" }) });
 }

package/dist/components/chat/PoweredByTag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/chat/PoweredByTag.tsx","../../../src/hooks/use-dark-mode.ts"],"sourcesContent":["import React from \"react\";\nimport { useDarkMode } from \"../../hooks/use-dark-mode\";\n\nexport function PoweredByTag({ showPoweredBy = true }: { showPoweredBy?: boolean }) {\n  const isDark = useDarkMode();\n\n  if (!showPoweredBy) {\n    return null;\n  }\n\n  const poweredByStyle = {\n    visibility: \"visible\",\n    display: \"block\",\n    position: \"static\",\n    textAlign: \"center\",\n    fontSize: \"12px\",\n    padding: \"3px 0\",\n    color: isDark ? \"rgb(69, 69, 69)\" : \"rgb(214, 214, 214)\",\n  };\n\n  return (\n    <div>\n      {/*@ts-expect-error -- expecting position not to be a string, but it can be.*/}\n      <p className=\"poweredBy\" style={poweredByStyle}>\n        Powered by CopilotKit\n      </p>\n    </div>\n  );\n}\n","export const useDarkMode = () => {\n  if (typeof window === \"undefined\") return false;\n  return (\n    document.documentElement.classList.contains(\"dark\") ||\n    document.body.classList.contains(\"dark\") ||\n    document.documentElement.getAttribute(\"data-theme\") === \"dark\" ||\n    document.body.getAttribute(\"data-theme\") === \"dark\" ||\n    window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,IAAM,cAAc,MAAM;AAC/B,MAAI,OAAO,WAAW;AAAa,WAAO;AAC1C,SACE,SAAS,gBAAgB,UAAU,SAAS,MAAM,KAClD,SAAS,KAAK,UAAU,SAAS,MAAM,KACvC,SAAS,gBAAgB,aAAa,YAAY,MAAM,UACxD,SAAS,KAAK,aAAa,YAAY,MAAM,UAC7C,OAAO,WAAW,8BAA8B,EAAE;AAEtD;;;ADcM;AApBC,SAAS,aAAa,EAAE,gBAAgB,KAAK,GAAgC;AAClF,QAAM,SAAS,YAAY;AAE3B,MAAI,CAAC,eAAe;AAClB,WAAO;AAAA,EACT;AAEA,QAAM,iBAAiB;AAAA,IACrB,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,IACX,UAAU;AAAA,IACV,SAAS;AAAA,IACT,OAAO,SAAS,oBAAoB;AAAA,EACtC;AAEA,SACE,4CAAC,SAEC,sDAAC,OAAE,WAAU,aAAY,OAAO,gBAAgB,mCAEhD,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/chat/PoweredByTag.tsx","../../../src/hooks/use-dark-mode.ts"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { useDarkMode } from \"../../hooks/use-dark-mode\";\n\nexport function PoweredByTag({ showPoweredBy = true }: { showPoweredBy?: boolean }) {\n  const [mounted, setMounted] = useState(false);\n  const isDark = useDarkMode();\n\n  /*\n    note(tylerslaton):\n\n    Ensure we only use the isDark computed value after client-side mount.\n    This prevents hydration mismatches by using a default color on the\n    server and initial client render, then updating to the correct\n    dark mode color after hydration is complete.\n  */\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  if (!showPoweredBy) {\n    return null;\n  }\n\n  const poweredByStyle = {\n    visibility: \"visible\",\n    display: \"block\",\n    position: \"static\",\n    textAlign: \"center\",\n    fontSize: \"12px\",\n    padding: \"3px 0\",\n    color: mounted && isDark ? \"rgb(69, 69, 69)\" : \"rgb(214, 214, 214)\",\n  };\n\n  return (\n    <div>\n      {/*@ts-expect-error -- expecting position not to be a string, but it can be.*/}\n      <p className=\"poweredBy\" style={poweredByStyle}>\n        Powered by CopilotKit\n      </p>\n    </div>\n  );\n}\n","export const useDarkMode = () => {\n  if (typeof window === \"undefined\") return false;\n  return (\n    document.documentElement.classList.contains(\"dark\") ||\n    document.body.classList.contains(\"dark\") ||\n    document.documentElement.getAttribute(\"data-theme\") === \"dark\" ||\n    document.body.getAttribute(\"data-theme\") === \"dark\" ||\n    window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2C;;;ACApC,IAAM,cAAc,MAAM;AAC/B,MAAI,OAAO,WAAW;AAAa,WAAO;AAC1C,SACE,SAAS,gBAAgB,UAAU,SAAS,MAAM,KAClD,SAAS,KAAK,UAAU,SAAS,MAAM,KACvC,SAAS,gBAAgB,aAAa,YAAY,MAAM,UACxD,SAAS,KAAK,aAAa,YAAY,MAAM,UAC7C,OAAO,WAAW,8BAA8B,EAAE;AAEtD;;;AD2BM;AAjCC,SAAS,aAAa,EAAE,gBAAgB,KAAK,GAAgC;AAClF,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAC5C,QAAM,SAAS,YAAY;AAU3B,8BAAU,MAAM;AACd,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,eAAe;AAClB,WAAO;AAAA,EACT;AAEA,QAAM,iBAAiB;AAAA,IACrB,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,IACX,UAAU;AAAA,IACV,SAAS;AAAA,IACT,OAAO,WAAW,SAAS,oBAAoB;AAAA,EACjD;AAEA,SACE,4CAAC,SAEC,sDAAC,OAAE,WAAU,aAAY,OAAO,gBAAgB,mCAEhD,GACF;AAEJ;","names":[]}

package/dist/components/chat/PoweredByTag.mjs

@@ -1,6 +1,6 @@
 import {
   PoweredByTag
-} from "../../chunk-CGEAG65D.mjs";
+} from "../../chunk-ELGRNEAO.mjs";
 import "../../chunk-JGMFJZMG.mjs";
 import "../../chunk-MRXNTQOX.mjs";
 export {

package/dist/components/chat/Sidebar.js

@@ -82,10 +82,10 @@ __export(Sidebar_exports, {
   CopilotSidebar: () => CopilotSidebar
 });
 module.exports = __toCommonJS(Sidebar_exports);
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // 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"));
@@ -2037,7 +2037,7 @@ 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_react11 = require("react");
@@ -2206,6 +2206,9 @@ var usePushToTalk = ({
 // src/components/chat/Input.tsx
 var import_react_core7 = require("@copilotkit/react-core");
 
+// src/components/chat/PoweredByTag.tsx
+var import_react13 = require("react");
+
 // src/hooks/use-dark-mode.ts
 var useDarkMode = () => {
   if (typeof window === "undefined")
@@ -2216,7 +2219,11 @@ var useDarkMode = () => {
 // src/components/chat/PoweredByTag.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function PoweredByTag({ showPoweredBy = true }) {
+  const [mounted, setMounted] = (0, import_react13.useState)(false);
   const isDark = useDarkMode();
+  (0, import_react13.useEffect)(() => {
+    setMounted(true);
+  }, []);
   if (!showPoweredBy) {
     return null;
   }
@@ -2227,7 +2234,7 @@ function PoweredByTag({ showPoweredBy = true }) {
     textAlign: "center",
     fontSize: "12px",
     padding: "3px 0",
-    color: isDark ? "rgb(69, 69, 69)" : "rgb(214, 214, 214)"
+    color: mounted && isDark ? "rgb(69, 69, 69)" : "rgb(214, 214, 214)"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "poweredBy", style: poweredByStyle, children: "Powered by CopilotKit" }) });
 }
@@ -2248,8 +2255,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;
@@ -2259,7 +2266,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)
@@ -2275,13 +2282,13 @@ var Input = ({
   const isInProgress = inProgress || pushToTalkState === "transcribing";
   const buttonIcon = isInProgress && !hideStopButton ? context.icons.stopIcon : context.icons.sendIcon;
   const showPushToTalk = pushToTalkConfigured && (pushToTalkState === "idle" || pushToTalkState === "recording") && !inProgress;
-  const canSend = (0, import_react13.useMemo)(() => {
+  const canSend = (0, import_react14.useMemo)(() => {
     var _a2;
     const interruptEvent = (_a2 = copilotContext.langGraphInterruptAction) == null ? void 0 : _a2.event;
     const interruptInProgress = (interruptEvent == null ? void 0 : interruptEvent.name) === "LangGraphInterruptEvent" && !(interruptEvent == null ? void 0 : interruptEvent.response);
     return !isInProgress && text.trim().length > 0 && pushToTalkState === "idle" && !interruptInProgress;
   }, [(_b = copilotContext.langGraphInterruptAction) == null ? void 0 : _b.event, isInProgress, text, pushToTalkState]);
-  const canStop = (0, import_react13.useMemo)(() => {
+  const canStop = (0, import_react14.useMemo)(() => {
     return isInProgress && !hideStopButton;
   }, [isInProgress, hideStopButton]);
   const sendDisabled = !canSend && !canStop;
@@ -2337,7 +2344,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");
 var import_shared4 = require("@copilotkit/shared");
@@ -2508,10 +2515,10 @@ 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 fileInputRef = (0, import_react14.useRef)(null);
-  const triggerObservabilityHook = (0, import_react14.useCallback)(
+  const [selectedImages, setSelectedImages] = (0, import_react15.useState)([]);
+  const [chatError, setChatError] = (0, import_react15.useState)(null);
+  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);
@@ -2530,7 +2537,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({
@@ -2576,7 +2583,7 @@ function CopilotChat({
     },
     [publicApiKey, chatApiEndpoint, observabilityHooks, setBannerError]
   );
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const id = "chat-component";
     setInternalErrorHandler({
       [id]: (error) => {
@@ -2589,7 +2596,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* () {
@@ -2635,7 +2642,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;
@@ -2663,8 +2670,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");
@@ -2683,7 +2690,7 @@ function CopilotChat({
     triggerObservabilityHook("onMessageSent", text);
     return sendMessage(text, images);
   };
-  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) {
@@ -2818,7 +2825,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 }) });
@@ -2847,15 +2854,15 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, disableSystemMess
   const generalContext = (0, import_react_core9.useCopilotContext)();
   const messagesContext = (0, import_react_core9.useCopilotMessagesContext)();
   const { actions } = generalContext;
-  const [suggestionsFailed, setSuggestionsFailed] = (0, import_react14.useState)(false);
-  const hasGeneratedInitialSuggestions = (0, import_react14.useRef)(false);
-  (0, import_react14.useEffect)(() => {
+  const [suggestionsFailed, setSuggestionsFailed] = (0, import_react15.useState)(false);
+  const hasGeneratedInitialSuggestions = (0, import_react15.useRef)(false);
+  (0, import_react15.useEffect)(() => {
     if (Array.isArray(chatSuggestions)) {
       setSuggestions(chatSuggestions);
       hasGeneratedInitialSuggestions.current = true;
     }
   }, [JSON.stringify(chatSuggestions), setSuggestions]);
-  const generateSuggestionsWithErrorHandling = (0, import_react14.useCallback)(
+  const generateSuggestionsWithErrorHandling = (0, import_react15.useCallback)(
     (context) => __async(void 0, null, function* () {
       try {
         yield generateSuggestions();
@@ -2866,7 +2873,7 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, disableSystemMess
     }),
     [generateSuggestions]
   );
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (chatSuggestions !== "auto" || isLoadingSuggestions || suggestionsFailed) {
       return;
     }
@@ -2896,13 +2903,13 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, disableSystemMess
     // Use stable string instead of object reference
     generateSuggestionsWithErrorHandling
   ]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (chatSuggestions !== "auto") {
       hasGeneratedInitialSuggestions.current = false;
       setSuggestionsFailed(false);
     }
   }, [chatSuggestions]);
-  const stableContext = (0, import_react14.useMemo)(
+  const stableContext = (0, import_react15.useMemo)(
     () => __spreadValues(__spreadValues({}, generalContext), messagesContext),
     [
       // Only include stable dependencies
@@ -2911,12 +2918,12 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, disableSystemMess
       generalContext.isLoading
     ]
   );
-  const resetSuggestions = (0, import_react14.useCallback)(() => {
+  const resetSuggestions = (0, import_react15.useCallback)(() => {
     resetSuggestionsFromHook();
     setSuggestionsFailed(false);
     hasGeneratedInitialSuggestions.current = false;
   }, [resetSuggestionsFromHook]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     onInProgress == null ? void 0 : onInProgress(isLoading);
   }, [onInProgress, isLoading]);
   const safelySendMessage = (messageContent, imagesToUse) => __async(void 0, null, function* () {
@@ -3089,7 +3096,7 @@ var CopilotModalInner = (_a) => {
   ]);
   const { copilotApiConfig, setBannerError } = (0, import_react_core11.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);
@@ -3109,8 +3116,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) {
@@ -3121,8 +3128,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: [
@@ -3202,7 +3209,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({
@@ -3242,7 +3249,7 @@ 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) => {