@copilotkit/react-ui 1.51.3-next.4 → 1.51.3-next.6

package/dist/components/chat/Popup.mjs

@@ -1,7 +1,7 @@
 import {
   CopilotPopup
-} from "../../chunk-O4PPO3K3.mjs";
-import "../../chunk-HKZL4P3F.mjs";
+} from "../../chunk-VVCCMYGT.mjs";
+import "../../chunk-BVKKSSB2.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-NSJWSIPR.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-HIW7RXCD.mjs";
+import "../../chunk-7OURDQZJ.mjs";
+import "../../chunk-NCIAFFQ2.mjs";
+import "../../chunk-IHFR6PYG.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/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"));
@@ -1026,7 +1026,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
@@ -1058,7 +1058,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");
@@ -1470,6 +1471,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) {
@@ -1563,18 +1567,24 @@ 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;
@@ -1590,7 +1600,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) {
@@ -1679,10 +1689,10 @@ var AssistantMessage = (props) => {
 };
 
 // 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 = () => {
@@ -1925,18 +1935,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,
@@ -2007,10 +2017,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;
@@ -2027,7 +2037,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);
@@ -2038,7 +2048,7 @@ function useScrollToBottom(messages) {
       }
     };
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const container = messagesContainerRef.current;
     if (!container) {
       return;
@@ -2057,7 +2067,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]);
@@ -2065,12 +2075,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,
@@ -2081,10 +2091,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) {
@@ -2098,7 +2108,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";
@@ -2130,7 +2140,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 });
@@ -2179,16 +2189,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,
@@ -2216,7 +2226,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
@@ -2235,7 +2245,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 = () => {
@@ -2247,9 +2257,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) {
@@ -2283,8 +2293,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;
@@ -2294,7 +2304,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)
@@ -2308,17 +2318,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;
@@ -2375,7 +2385,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");
 
@@ -2552,13 +2562,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);
@@ -2577,7 +2587,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({
@@ -2623,7 +2633,7 @@ function CopilotChat({
     },
     [publicApiKey, chatApiEndpoint, observabilityHooks, setBannerError]
   );
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const id = "chat-component";
     setInternalErrorHandler({
       [id]: (error) => {
@@ -2636,7 +2646,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* () {
@@ -2682,7 +2692,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;
@@ -2710,8 +2720,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");
@@ -2734,7 +2744,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) {
@@ -2878,7 +2888,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 }) });
@@ -2916,7 +2926,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);
@@ -2936,8 +2946,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) {
@@ -2948,8 +2958,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: [
@@ -3029,7 +3039,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({
@@ -3069,7 +3079,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) => {