@superinterface/react 3.4.1 → 3.5.1

package/dist/index.js

@@ -456,7 +456,7 @@ var SuperinterfaceProvider = function(param) {
 // src/components/threads/Thread/Messages/index.tsx
 import { Flex as Flex18 } from "@radix-ui/themes";
 // src/components/threads/Thread/Message/index.tsx
-import { useMemo as useMemo8 } from "react";
+import { useMemo as useMemo9 } from "react";
 import { isEmpty as isEmpty2 } from "radash";
 import { Box as Box9 } from "@radix-ui/themes";
 // src/components/skeletons/StartingContentSkeleton/index.tsx
@@ -908,7 +908,11 @@ var Attachments = function(param) {
     });
 };
 // src/components/threads/Thread/Message/ContentPart/TextContent.tsx
-import Markdown from "react-markdown";
+import { useState as useState2, useEffect as useEffect2, useMemo as useMemo8 } from "react";
+import { compile } from "@mdx-js/mdx";
+import { MDXProvider, useMDXComponents } from "@mdx-js/react";
+import * as runtime from "react/jsx-runtime";
+import recmaMdxEscapeMissingComponents from "recma-mdx-escape-missing-components";
 // src/hooks/markdown/useMarkdownContext/index.ts
 import { useContext as useContext5 } from "react";
 // src/contexts/markdown/MarkdownContext/index.ts
@@ -2532,11 +2536,26 @@ var components = {
             ]
         });
     },
-    thead: Table.Header,
-    tbody: Table.Body,
-    tr: Table.Row,
-    td: Table.Cell,
-    th: Table.ColumnHeaderCell
+    thead: function(props) {
+        return /* @__PURE__ */ jsx43(Table.Header, _object_spread({}, props));
+    },
+    tbody: function(props) {
+        return /* @__PURE__ */ jsx43(Table.Body, _object_spread({}, props));
+    },
+    tr: function(props) {
+        return /* @__PURE__ */ jsx43(Table.Row, _object_spread({}, props));
+    },
+    td: function(_param) {
+        var width2 = _param.width, rest = _object_without_properties(_param, [
+            "width"
+        ]);
+        return /* @__PURE__ */ jsx43(Table.Cell, _object_spread_props(_object_spread({}, rest), {
+            width: width2
+        }));
+    },
+    th: function(props) {
+        return /* @__PURE__ */ jsx43(Table.ColumnHeaderCell, _object_spread({}, props));
+    }
 };
 // src/contexts/markdown/MarkdownContext/lib/getRemarkPlugins.ts
 import remarkGfm from "remark-gfm";
@@ -2721,18 +2740,106 @@ var useMarkdownContext = function() {
 };
 // src/components/threads/Thread/Message/ContentPart/TextContent.tsx
 import { jsx as jsx44 } from "react/jsx-runtime";
+var evaluate = /*#__PURE__*/ function() {
+    var _ref = _async_to_generator(function(param) {
+        var code, fn;
+        return _ts_generator(this, function(_state) {
+            code = param.code;
+            fn = new Function("runtime", "useMDXComponents", code);
+            return [
+                2,
+                fn(_object_spread_props(_object_spread({}, runtime), {
+                    useMDXComponents: useMDXComponents
+                }))
+            ];
+        });
+    });
+    return function evaluate(_) {
+        return _ref.apply(this, arguments);
+    };
+}();
 var TextContent = function(param) {
     var content = param.content;
-    var _useMarkdownContext = useMarkdownContext(), getRemarkPlugins2 = _useMarkdownContext.getRemarkPlugins, rest = _object_without_properties(_useMarkdownContext, [
-        "getRemarkPlugins"
-    ]);
-    return(// @ts-ignore-next-line
-    /* @__PURE__ */ jsx44(Markdown, _object_spread_props(_object_spread({}, rest), {
-        remarkPlugins: getRemarkPlugins2({
+    var _useMarkdownContext = useMarkdownContext(), getRemarkPlugins2 = _useMarkdownContext.getRemarkPlugins, components2 = _useMarkdownContext.components;
+    var remarkPlugins = useMemo8(function() {
+        return getRemarkPlugins2({
             content: content
-        }),
-        children: content.text.value
-    })));
+        });
+    }, [
+        content,
+        getRemarkPlugins2
+    ]);
+    var _useState2 = _sliced_to_array(useState2(null), 2), MDXComponent = _useState2[0], setMDXComponent = _useState2[1];
+    useEffect2(function() {
+        var compileMDX = /*#__PURE__*/ function() {
+            var _ref = _async_to_generator(function() {
+                var compiled, code, module, MDXContent, error;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            _state.trys.push([
+                                0,
+                                3,
+                                ,
+                                4
+                            ]);
+                            return [
+                                4,
+                                compile(content.text.value, {
+                                    outputFormat: "function-body",
+                                    remarkPlugins: remarkPlugins,
+                                    recmaPlugins: [
+                                        recmaMdxEscapeMissingComponents
+                                    ],
+                                    providerImportSource: "@mdx-js/react"
+                                })
+                            ];
+                        case 1:
+                            compiled = _state.sent();
+                            code = String(compiled);
+                            return [
+                                4,
+                                evaluate({
+                                    code: code
+                                })
+                            ];
+                        case 2:
+                            module = _state.sent();
+                            MDXContent = module.default;
+                            setMDXComponent(function() {
+                                return MDXContent;
+                            });
+                            return [
+                                3,
+                                4
+                            ];
+                        case 3:
+                            error = _state.sent();
+                            return [
+                                3,
+                                4
+                            ];
+                        case 4:
+                            return [
+                                2
+                            ];
+                    }
+                });
+            });
+            return function compileMDX() {
+                return _ref.apply(this, arguments);
+            };
+        }();
+        compileMDX();
+    }, [
+        content,
+        remarkPlugins
+    ]);
+    if (!MDXComponent) return content.text.value;
+    return /* @__PURE__ */ jsx44(MDXProvider, {
+        components: components2,
+        children: /* @__PURE__ */ jsx44(MDXComponent, {})
+    });
 };
 // src/components/threads/Thread/Message/ContentPart/ImageFileContent.tsx
 import { jsx as jsx45 } from "react/jsx-runtime";
@@ -2765,7 +2872,7 @@ var ContentPart = function(param) {
 import { jsx as jsx47, jsxs as jsxs16 } from "react/jsx-runtime";
 var Message = function(param) {
     var message = param.message, className = param.className, style = param.style;
-    var _useMemo8 = _sliced_to_array(useMemo8(function() {
+    var _useMemo9 = _sliced_to_array(useMemo9(function() {
         if (!message.runSteps.length) return [
             [],
             []
@@ -2796,9 +2903,9 @@ var Message = function(param) {
         ];
     }, [
         message
-    ]), 2), olderRunSteps = _useMemo8[0], laterRunSteps = _useMemo8[1];
+    ]), 2), olderRunSteps = _useMemo9[0], laterRunSteps = _useMemo9[1];
     var isMutatingMessage = useIsMutatingMessage();
-    var isInProgress = useMemo8(function() {
+    var isInProgress = useMemo9(function() {
         if (!isMutatingMessage) return false;
         if (message.status === "in_progress") return true;
         return message.runSteps.some(function(rs) {
@@ -2842,9 +2949,9 @@ var Message = function(param) {
     });
 };
 // src/components/threads/Thread/Messages/Content/index.tsx
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect3 } from "react";
 // src/hooks/messageGroups/useMessageGroups/index.ts
-import { useMemo as useMemo9 } from "react";
+import { useMemo as useMemo10 } from "react";
 // src/hooks/messageGroups/useMessageGroups/lib/messageGroups/index.ts
 import _6 from "lodash";
 import { last as last2 } from "radash";
@@ -2906,7 +3013,7 @@ var messageGroups = function(param) {
 // src/hooks/messageGroups/useMessageGroups/index.ts
 var useMessageGroups = function(param) {
     var messages2 = param.messages;
-    return useMemo9(function() {
+    return useMemo10(function() {
         return {
             messageGroups: messageGroups({
                 messages: messages2
@@ -3104,7 +3211,7 @@ var Content6 = function() {
     var _useMessageGroups = useMessageGroups({
         messages: messages2
     }), messageGroups2 = _useMessageGroups.messageGroups;
-    useEffect2(function() {
+    useEffect3(function() {
         if (isLoadingError) {
             addToast({
                 type: "error",
@@ -3127,7 +3234,7 @@ var Content6 = function() {
     });
 };
 // src/components/threads/Thread/Messages/Progress/index.tsx
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo11 } from "react";
 // src/components/skeletons/StartingSkeleton/index.tsx
 import { useContext as useContext9 } from "react";
 import { Box as Box12 } from "@radix-ui/themes";
@@ -3155,7 +3262,7 @@ import { jsx as jsx59 } from "react/jsx-runtime";
 var Progress = function() {
     var latestMessage = useLatestMessage().latestMessage;
     var isMutatingMessage = useIsMutatingMessage();
-    var isVisible = useMemo10(function() {
+    var isVisible = useMemo11(function() {
         if (!latestMessage) return false;
         if (latestMessage.role !== "user") return false;
         if (latestMessage.status === "in_progress") return false;
@@ -3178,7 +3285,7 @@ import { useRef as useRef3 } from "react";
 import { useInView } from "react-intersection-observer";
 // src/hooks/misc/useThrottledEffect/index.tsx
 import _7 from "lodash";
-import { useRef as useRef2, useEffect as useEffect3, useCallback } from "react";
+import { useRef as useRef2, useEffect as useEffect4, useCallback } from "react";
 var useThrottledEffect = function(cb, delay, additionalDeps) {
     var _cbRef;
     var cbRef = useRef2(cb);
@@ -3193,10 +3300,10 @@ var useThrottledEffect = function(cb, delay, additionalDeps) {
     }), [
         delay
     ]);
-    useEffect3(function() {
+    useEffect4(function() {
         cbRef.current = cb;
     });
-    useEffect3(throttledCb, [
+    useEffect4(throttledCb, [
         throttledCb
     ].concat(_to_consumable_array(additionalDeps)));
 };
@@ -3353,7 +3460,7 @@ Submit.Root = Root3;
 Submit.Button = Button3;
 // src/components/threads/Thread/MessageForm/Root/index.tsx
 import { useQueryClient as useQueryClient5 } from "@tanstack/react-query";
-import { useMemo as useMemo11, useState as useState2 } from "react";
+import { useMemo as useMemo12, useState as useState3 } from "react";
 import { useForm, FormProvider } from "react-hook-form";
 import { Box as Box13 } from "@radix-ui/themes";
 // src/components/threads/Thread/MessageForm/Root/lib/formOptions.ts
@@ -3370,7 +3477,7 @@ import { partob as partob2 } from "radash";
 import { jsx as jsx64 } from "react/jsx-runtime";
 var Root4 = function(param) {
     var children = param.children, onSubmitArg = param.onSubmit, isDisabledArg = param.isDisabled, style = param.style, className = param.className;
-    var _useState2 = _sliced_to_array(useState2([]), 2), files = _useState2[0], setFiles = _useState2[1];
+    var _useState3 = _sliced_to_array(useState3([]), 2), files = _useState3[0], setFiles = _useState3[1];
     var formProps = useForm(formOptions);
     var handleSubmit = formProps.handleSubmit, isSubmitting = formProps.formState.isSubmitting, reset = formProps.reset, watch = formProps.watch;
     var addToast = useToasts().addToast;
@@ -3384,7 +3491,7 @@ var Root4 = function(param) {
         })
     }).createMessage;
     var isMutatingMessage = useIsMutatingMessage();
-    var isFileLoading = useMemo11(function() {
+    var isFileLoading = useMemo12(function() {
         return files.some(function(file) {
             return isOptimistic({
                 id: file.id
@@ -3393,14 +3500,14 @@ var Root4 = function(param) {
     }, [
         files
     ]);
-    var isLoading = useMemo11(function() {
+    var isLoading = useMemo12(function() {
         return isMutatingMessage || isSubmitting;
     }, [
         isMutatingMessage,
         isSubmitting
     ]);
     var latestMessage = useLatestMessage().latestMessage;
-    var isDisabled = useMemo11(function() {
+    var isDisabled = useMemo12(function() {
         var // @ts-ignore-next-line
         _latestMessage_metadata;
         return (latestMessage === null || latestMessage === void 0 ? void 0 : (_latestMessage_metadata = latestMessage.metadata) === null || _latestMessage_metadata === void 0 ? void 0 : _latestMessage_metadata.isBlocking) || isDisabledArg;
@@ -3490,16 +3597,16 @@ import { Container as RadixContainer, Flex as Flex23 } from "@radix-ui/themes";
 import { Flex as Flex20 } from "@radix-ui/themes";
 import { useFormContext } from "react-hook-form";
 // src/hooks/misc/usePrevious.ts
-import { useEffect as useEffect4, useRef as useRef4 } from "react";
+import { useEffect as useEffect5, useRef as useRef4 } from "react";
 var usePrevious = function(state) {
     var ref = useRef4();
-    useEffect4(function() {
+    useEffect5(function() {
         ref.current = state;
     });
     return ref.current;
 };
 // src/components/threads/Thread/MessageForm/Field/Control.tsx
-import { useContext as useContext11, useMemo as useMemo12, useRef as useRef5, useEffect as useEffect5 } from "react";
+import { useContext as useContext11, useMemo as useMemo13, useRef as useRef5, useEffect as useEffect6 } from "react";
 // src/components/textareas/TextareaBase/index.tsx
 import { forwardRef as forwardRef3 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
@@ -3546,7 +3653,7 @@ var Input = function(props) {
     var assistantNameContext = useContext11(AssistantNameContext);
     var register = useFormContext().register;
     var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading;
-    var isSubmitDisabled = useMemo12(function() {
+    var isSubmitDisabled = useMemo13(function() {
         return isDisabled || isLoading;
     }, [
         isDisabled,
@@ -3555,7 +3662,7 @@ var Input = function(props) {
     var isDisabledPrevious = usePrevious(isDisabled);
     var textareaRef = useRef5(null);
     var textareaProps = register("content");
-    useEffect5(function() {
+    useEffect6(function() {
         if (isDisabled) return;
         if (!isDisabledPrevious) return;
         if (!textareaRef.current) return;
@@ -4050,7 +4157,7 @@ import { Flex as Flex25 } from "@radix-ui/themes";
 // src/components/threads/Thread/Provider/index.tsx
 var Provider2 = SuperinterfaceProvider;
 // src/components/toasts/ToastsProvider/index.tsx
-import { useState as useState3, useCallback as useCallback3 } from "react";
+import { useState as useState4, useCallback as useCallback3 } from "react";
 import * as Toast2 from "@radix-ui/react-toast";
 // src/components/toasts/ToastsProvider/CustomToast.tsx
 import * as Toast from "@radix-ui/react-toast";
@@ -4089,7 +4196,7 @@ var CustomToast = function(param) {
 import { jsx as jsx72, jsxs as jsxs27 } from "react/jsx-runtime";
 var ToastsProvider = function(param) {
     var children = param.children, _param_bottom = param.bottom, bottom = _param_bottom === void 0 ? 0 : _param_bottom;
-    var _useState3 = _sliced_to_array(useState3([]), 2), toasts = _useState3[0], setToasts = _useState3[1];
+    var _useState4 = _sliced_to_array(useState4([]), 2), toasts = _useState4[0], setToasts = _useState4[1];
     var addToast = useCallback3(function(toast) {
         return setToasts(function(prevToasts) {
             return _to_consumable_array(prevToasts).concat([
@@ -4171,7 +4278,7 @@ var useMessageContext = function() {
     return useContext12(MessageContext);
 };
 // src/hooks/assistants/useAssistant/index.ts
-import { useMemo as useMemo13 } from "react";
+import { useMemo as useMemo14 } from "react";
 import { useQuery } from "@tanstack/react-query";
 // src/hooks/assistants/useAssistant/lib/queryOptions/index.ts
 import { queryOptions as tanstackQueryOptions } from "@tanstack/react-query";
@@ -4260,7 +4367,7 @@ var useAssistant = function(param) {
         assistantId: assistantId,
         superinterfaceContext: superinterfaceContext
     }));
-    return useMemo13(function() {
+    return useMemo14(function() {
         return _object_spread_props(_object_spread({}, props), {
             assistant: props.data ? props.data.assistant : null
         });
@@ -4269,7 +4376,7 @@ var useAssistant = function(param) {
     ]);
 };
 // src/components/threads/ThreadDialog/Provider/index.tsx
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 // src/contexts/threads/ThreadDialogContext/index.ts
 import { createContext as createContext11 } from "react";
 var ThreadDialogContext = createContext11({
@@ -4286,7 +4393,7 @@ import { jsx as jsx75 } from "react/jsx-runtime";
 var Provider4 = function(param) {
     var children = param.children;
     var threadDialogContext = useThreadDialogContext();
-    var _useState4 = _sliced_to_array(useState4(threadDialogContext.isOpen), 2), isOpen = _useState4[0], setIsOpen = _useState4[1];
+    var _useState5 = _sliced_to_array(useState5(threadDialogContext.isOpen), 2), isOpen = _useState5[0], setIsOpen = _useState5[1];
     return /* @__PURE__ */ jsx75(ThreadDialogContext.Provider, {
         value: {
             isOpen: isOpen,
@@ -4562,7 +4669,7 @@ var AudioThreadContext = createContext12({
     }
 });
 // src/hooks/misc/usePermission/index.ts
-import { useEffect as useEffect6, useState as useState5 } from "react";
+import { useEffect as useEffect7, useState as useState6 } from "react";
 // src/hooks/misc/usePermission/util.ts
 var noop = function() {};
 function on(obj) {
@@ -4585,8 +4692,8 @@ function off(obj) {
 }
 // src/hooks/misc/usePermission/index.ts
 var usePermission = function(permissionDesc) {
-    var _useState5 = _sliced_to_array(useState5(""), 2), state = _useState5[0], setState = _useState5[1];
-    useEffect6(function() {
+    var _useState6 = _sliced_to_array(useState6(""), 2), state = _useState6[0], setState = _useState6[1];
+    useEffect7(function() {
         var mounted = true;
         var permissionStatus = null;
         var onChange = function() {
@@ -4624,11 +4731,11 @@ var blobToData = function(blob) {
     });
 };
 // src/hooks/audioThreads/useStatus/index.ts
-import { useMemo as useMemo14 } from "react";
+import { useMemo as useMemo15 } from "react";
 var useStatus = function(param) {
     var messageAudioProps = param.messageAudioProps, recorderProps = param.recorderProps, createMessageProps = param.createMessageProps;
     var latestMessageProps = useLatestMessage();
-    var status = useMemo14(function() {
+    var status = useMemo15(function() {
         var _latestMessageProps_latestMessage;
         if (recorderProps.status === "recording") return "recording";
         if (createMessageProps.isPending) return "creatingMessage";
@@ -4652,16 +4759,16 @@ var useStatus = function(param) {
 // src/hooks/audioThreads/useRecorder/index.ts
 import dayjs3 from "dayjs";
 import { useAudioCapture } from "use-audio-capture";
-import { useMemo as useMemo15, useRef as useRef7, useState as useState6, useCallback as useCallback4, useEffect as useEffect8 } from "react";
+import { useMemo as useMemo16, useRef as useRef7, useState as useState7, useCallback as useCallback4, useEffect as useEffect9 } from "react";
 import { useAudioPlayer } from "react-use-audio-player";
 // src/hooks/misc/useInterval.ts
-import { useEffect as useEffect7, useRef as useRef6 } from "react";
+import { useEffect as useEffect8, useRef as useRef6 } from "react";
 var useInterval = function(callback, delay) {
     var savedCallback = useRef6(function() {});
-    useEffect7(function() {
+    useEffect8(function() {
         savedCallback.current = callback;
     });
-    useEffect7(function() {
+    useEffect8(function() {
         if (delay !== null) {
             var interval = setInterval(function() {
                 return savedCallback.current();
@@ -4678,14 +4785,14 @@ var useInterval = function(callback, delay) {
 // src/hooks/audioThreads/useRecorder/index.ts
 var useRecorder = function(param) {
     var isStopOnSilence = param.isStopOnSilence, onStart = param.onStart, onStop = param.onStop;
-    var _useState6 = _sliced_to_array(useState6(null), 2), silenceStart = _useState6[0], setSilenceStart = _useState6[1];
-    var _useState61 = _sliced_to_array(useState6(null), 2), noiseStart = _useState61[0], setNoiseStart = _useState61[1];
-    var _useState62 = _sliced_to_array(useState6(null), 2), mediaStream = _useState62[0], setMediaStream = _useState62[1];
-    var _useState63 = _sliced_to_array(useState6("idle"), 2), status = _useState63[0], setStatus = _useState63[1];
+    var _useState7 = _sliced_to_array(useState7(null), 2), silenceStart = _useState7[0], setSilenceStart = _useState7[1];
+    var _useState71 = _sliced_to_array(useState7(null), 2), noiseStart = _useState71[0], setNoiseStart = _useState71[1];
+    var _useState72 = _sliced_to_array(useState7(null), 2), mediaStream = _useState72[0], setMediaStream = _useState72[1];
+    var _useState73 = _sliced_to_array(useState7("idle"), 2), status = _useState73[0], setStatus = _useState73[1];
     var startAudioPlayer = useAudioPlayer();
     var endAudioPlayer = useAudioPlayer();
-    var _useState64 = _sliced_to_array(useState6(false), 2), isLoaded = _useState64[0], setIsLoaded = _useState64[1];
-    useEffect8(function() {
+    var _useState74 = _sliced_to_array(useState7(false), 2), isLoaded = _useState74[0], setIsLoaded = _useState74[1];
+    useEffect9(function() {
         if (isLoaded) return;
         setIsLoaded(true);
     }, [
@@ -4743,9 +4850,9 @@ var useRecorder = function(param) {
             setNoiseStart(null);
         }
     });
-    var _useState65 = _sliced_to_array(useState6(null), 2), audioEngine = _useState65[0], setAudioEngine = _useState65[1];
+    var _useState75 = _sliced_to_array(useState7(null), 2), audioEngine = _useState75[0], setAudioEngine = _useState75[1];
     var isInited = useRef7(false);
-    useEffect8(function() {
+    useEffect9(function() {
         if (!mediaStream) return;
         if (isInited.current) return;
         isInited.current = true;
@@ -4758,7 +4865,7 @@ var useRecorder = function(param) {
         isInited,
         mediaStream
     ]);
-    var visualizationAnalyser = useMemo15(function() {
+    var visualizationAnalyser = useMemo16(function() {
         if (!audioEngine) return null;
         var result = audioEngine.audioContext.createAnalyser();
         audioEngine.source.connect(result);
@@ -4766,7 +4873,7 @@ var useRecorder = function(param) {
     }, [
         audioEngine
     ]);
-    var silenceAnalyser = useMemo15(function() {
+    var silenceAnalyser = useMemo16(function() {
         if (!audioEngine) return null;
         var result = audioEngine.audioContext.createAnalyser();
         result.minDecibels = -60;
@@ -4798,7 +4905,7 @@ var useRecorder = function(param) {
         setNoiseStart,
         setSilenceStart
     ]);
-    useEffect8(function() {
+    useEffect9(function() {
         if (!isStopOnSilence) return;
         requestAnimationFrame(function() {
             return handleSilence();
@@ -4821,7 +4928,7 @@ var useRecorder = function(param) {
     });
 };
 // src/hooks/audioThreads/useMessageAudio/index.ts
-import { useMemo as useMemo16, useRef as useRef8, useState as useState7, useEffect as useEffect9 } from "react";
+import { useMemo as useMemo17, useRef as useRef8, useState as useState8, useEffect as useEffect10 } from "react";
 import nlp from "compromise";
 import { Howler } from "howler";
 import { useAudioPlayer as useAudioPlayer2 } from "react-use-audio-player";
@@ -4859,15 +4966,15 @@ var getMessageSentences = function(param) {
 };
 var useMessageAudio = function(param) {
     var onEnd = param.onEnd;
-    var _useState7 = _sliced_to_array(useState7(false), 2), isAudioPlayed = _useState7[0], setIsAudioPlayed = _useState7[1];
-    var _useState71 = _sliced_to_array(useState7([]), 2), stoppedMessageIds = _useState71[0], setStoppedMessageIds = _useState71[1];
-    var _useState72 = _sliced_to_array(useState7([]), 2), playedMessageSentences = _useState72[0], setPlayedMessageSentences = _useState72[1];
+    var _useState8 = _sliced_to_array(useState8(false), 2), isAudioPlayed = _useState8[0], setIsAudioPlayed = _useState8[1];
+    var _useState81 = _sliced_to_array(useState8([]), 2), stoppedMessageIds = _useState81[0], setStoppedMessageIds = _useState81[1];
+    var _useState82 = _sliced_to_array(useState8([]), 2), playedMessageSentences = _useState82[0], setPlayedMessageSentences = _useState82[1];
     var audioPlayer = useAudioPlayer2();
     var nextAudioPlayer = useAudioPlayer2();
     var superinterfaceContext = useSuperinterfaceContext();
-    var _useState73 = _sliced_to_array(useState7(false), 2), isPlaying = _useState73[0], setIsPlaying = _useState73[1];
+    var _useState83 = _sliced_to_array(useState8(false), 2), isPlaying = _useState83[0], setIsPlaying = _useState83[1];
     var latestMessageProps = useLatestMessage();
-    var unplayedMessageSentences = useMemo16(function() {
+    var unplayedMessageSentences = useMemo17(function() {
         if (!latestMessageProps.latestMessage) return [];
         if (latestMessageProps.latestMessage.role !== "assistant") return [];
         if (stoppedMessageIds.includes(latestMessageProps.latestMessage.id)) return [];
@@ -4888,7 +4995,7 @@ var useMessageAudio = function(param) {
         latestMessageProps,
         playedMessageSentences
     ]);
-    useEffect9(function() {
+    useEffect10(function() {
         if (isPlaying) return;
         if (audioPlayer.playing) return;
         if (!latestMessageProps.latestMessage) return;
@@ -4956,7 +5063,7 @@ var useMessageAudio = function(param) {
         playedMessageSentences,
         onEnd
     ]);
-    useEffect9(function() {
+    useEffect10(function() {
         if (isHtmlAudioSupported) {
             var _Howler__howls___sounds_, _Howler__howls_;
             if (!(Howler === null || Howler === void 0 ? void 0 : (_Howler__howls_ = Howler._howls[0]) === null || _Howler__howls_ === void 0 ? void 0 : (_Howler__howls___sounds_ = _Howler__howls_._sounds[0]) === null || _Howler__howls___sounds_ === void 0 ? void 0 : _Howler__howls___sounds_._node)) return;
@@ -4965,9 +5072,9 @@ var useMessageAudio = function(param) {
     }, [
         audioPlayer
     ]);
-    var _useState74 = _sliced_to_array(useState7(null), 2), audioEngine = _useState74[0], setAudioEngine = _useState74[1];
+    var _useState84 = _sliced_to_array(useState8(null), 2), audioEngine = _useState84[0], setAudioEngine = _useState84[1];
     var isAudioEngineInited = useRef8(false);
-    useEffect9(function() {
+    useEffect10(function() {
         if (!audioPlayer.playing) return;
         if (isAudioEngineInited.current) return;
         isAudioEngineInited.current = true;
@@ -4988,7 +5095,7 @@ var useMessageAudio = function(param) {
         audioPlayer,
         isAudioEngineInited
     ]);
-    var visualizationAnalyser = useMemo16(function() {
+    var visualizationAnalyser = useMemo17(function() {
         if (!audioEngine) return null;
         var result = audioEngine.audioContext.createAnalyser();
         audioEngine.source.connect(audioEngine.audioContext.destination);
@@ -4997,7 +5104,7 @@ var useMessageAudio = function(param) {
     }, [
         audioEngine
     ]);
-    var isPending = useMemo16(function() {
+    var isPending = useMemo17(function() {
         return isPlaying || unplayedMessageSentences.length > 0;
     }, [
         isPlaying,
@@ -5109,7 +5216,7 @@ var Root12 = function(_param) {
     });
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
-import { useContext as useContext15, useState as useState9, useCallback as useCallback6, useEffect as useEffect11 } from "react";
+import { useContext as useContext15, useState as useState10, useCallback as useCallback6, useEffect as useEffect12 } from "react";
 import _9 from "lodash";
 import { Flex as Flex31 } from "@radix-ui/themes";
 // src/hooks/threads/useAudioThreadContext/index.ts
@@ -5120,13 +5227,13 @@ var useAudioThreadContext = function() {
 // src/components/threads/AudioThread/BarsVisualizer/index.tsx
 import _8 from "lodash";
 import { Flex as Flex30, Grid } from "@radix-ui/themes";
-import { useState as useState8, useEffect as useEffect10, useCallback as useCallback5 } from "react";
+import { useState as useState9, useEffect as useEffect11, useCallback as useCallback5 } from "react";
 import { cluster } from "radash";
 import { jsx as jsx83 } from "react/jsx-runtime";
 var barCount = 4;
 var BarsVisualizer = function(param) {
     var visualizationAnalyser = param.visualizationAnalyser, backgroundColor = param.backgroundColor, height = param.height, barWidth = param.barWidth;
-    var _useState8 = _sliced_to_array(useState8([]), 2), barHeights = _useState8[0], setBarHeights = _useState8[1];
+    var _useState9 = _sliced_to_array(useState9([]), 2), barHeights = _useState9[0], setBarHeights = _useState9[1];
     var draw = useCallback5(function(param) {
         var visualizationAnalyser2 = param.visualizationAnalyser;
         if (!visualizationAnalyser2) {
@@ -5145,7 +5252,7 @@ var BarsVisualizer = function(param) {
             });
         });
     }, []);
-    useEffect10(function() {
+    useEffect11(function() {
         draw({
             visualizationAnalyser: visualizationAnalyser
         });
@@ -5186,7 +5293,7 @@ import { jsx as jsx84, jsxs as jsxs31 } from "react/jsx-runtime";
 var Visualization = function(props) {
     var audioThreadContext = useAudioThreadContext();
     var assistantNameContext = useContext15(AssistantNameContext);
-    var _useState9 = _sliced_to_array(useState9(0), 2), scale = _useState9[0], setScale = _useState9[1];
+    var _useState10 = _sliced_to_array(useState10(0), 2), scale = _useState10[0], setScale = _useState10[1];
     var draw = useCallback6(function(param) {
         var visualizationAnalyser = param.visualizationAnalyser;
         if (!visualizationAnalyser) {
@@ -5202,7 +5309,7 @@ var Visualization = function(props) {
             });
         });
     }, []);
-    useEffect11(function() {
+    useEffect12(function() {
         draw({
             visualizationAnalyser: audioThreadContext.recorderProps.visualizationAnalyser
         });
@@ -5492,14 +5599,15 @@ AudioThreadDialog.Root = Root9;
 AudioThreadDialog.Trigger = Trigger;
 AudioThreadDialog.Content = Content7;
 // src/components/markdown/MarkdownProvider/index.tsx
-import { useMemo as useMemo17 } from "react";
+import { useMemo as useMemo18 } from "react";
 import { jsx as jsx92 } from "react/jsx-runtime";
 var MarkdownProvider = function(_param) {
-    var children = _param.children, rest = _object_without_properties(_param, [
-        "children"
+    var children = _param.children, components2 = _param.components, rest = _object_without_properties(_param, [
+        "children",
+        "components"
     ]);
     var prevMarkdownContext = useMarkdownContext();
-    var value = useMemo17(function() {
+    var value = useMemo18(function() {
         return merge(prevMarkdownContext, rest);
     }, [
         rest,
@@ -5581,7 +5689,7 @@ var ImageAvatar = function(param) {
     });
 };
 // src/components/iconAvatars/IconAvatar.tsx
-import { useMemo as useMemo18 } from "react";
+import { useMemo as useMemo19 } from "react";
 import { Avatar as Avatar5 } from "@radix-ui/themes";
 // src/lib/iconAvatars/iconAvatarComponents.ts
 import { BackpackIcon, RocketIcon, MagicWandIcon, CubeIcon, TargetIcon, DiscIcon, GlobeIcon, StarIcon, LightningBoltIcon as LightningBoltIcon2, FaceIcon, PersonIcon as PersonIcon2, HeartIcon } from "@radix-ui/react-icons";
@@ -5591,7 +5699,7 @@ var iconAvatarComponents = (_obj = {}, _define_property(_obj, "BACKPACK" /* BACK
 import { jsx as jsx94 } from "react/jsx-runtime";
 var IconAvatar = function(param) {
     var iconAvatar = param.iconAvatar, size = param.size, className = param.className, style = param.style;
-    var Component = useMemo18(function() {
+    var Component = useMemo19(function() {
         return iconAvatarComponents[iconAvatar.name];
     }, [
         iconAvatar
@@ -5633,7 +5741,7 @@ var Avatar6 = function(param) {
     });
 };
 // src/components/components/ComponentsProvider.tsx
-import { useMemo as useMemo19 } from "react";
+import { useMemo as useMemo20 } from "react";
 // src/hooks/components/useComponents.ts
 import { useContext as useContext16 } from "react";
 var useComponents = function() {
@@ -5646,7 +5754,7 @@ var ComponentsProvider = function(_param) {
         "children"
     ]);
     var prevComponents = useComponents();
-    var value = useMemo19(function() {
+    var value = useMemo20(function() {
         return merge(prevComponents, rest);
     }, [
         rest,