@superinterface/react 2.13.4 → 2.15.0

package/dist/index.js

@@ -672,7 +672,7 @@ var useToasts = function() {
     return useContext2(ToastsContext);
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
-import { useContext as useContext6 } from "react";
+import { useContext as useContext7 } from "react";
 import { Box as Box10, Avatar as Avatar3 } from "@radix-ui/themes";
 import { PersonIcon } from "@radix-ui/react-icons";
 // src/components/messageGroups/MessageGroupBase/AssistantAvatar.tsx
@@ -727,6 +727,9 @@ var StartingContentSkeleton = function() {
 };
 // src/components/runSteps/RunSteps/index.tsx
 import { Flex as Flex9 } from "@radix-ui/themes";
+import { useContext as useContext5 } from "react";
+// src/contexts/components/ComponentsContext/index.tsx
+import { createContext as createContext6 } from "react";
 // src/components/runSteps/RunStep/ToolCalls/index.tsx
 import { Flex as Flex8 } from "@radix-ui/themes";
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx
@@ -953,10 +956,16 @@ var Starting = function() {
 };
 // src/components/runSteps/RunStep/ToolCalls/index.tsx
 import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
+var Root = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ jsx18(Flex8, {
+        direction: "column",
+        children: children
+    });
+};
 var ToolCalls = function(param) {
     var stepDetails = param.stepDetails, runStep = param.runStep;
-    return /* @__PURE__ */ jsxs5(Flex8, {
-        direction: "column",
+    return /* @__PURE__ */ jsxs5(Root, {
         children: [
             !stepDetails.tool_calls.length && /* @__PURE__ */ jsx18(Starting, {}),
             stepDetails.tool_calls.map(function(toolCall) {
@@ -968,6 +977,9 @@ var ToolCalls = function(param) {
         ]
     });
 };
+ToolCalls.Root = Root;
+ToolCalls.Starting = Starting;
+ToolCalls.ToolCall = ToolCall;
 // src/components/runSteps/RunStep/index.tsx
 import { jsx as jsx19 } from "react/jsx-runtime";
 var RunStep = function(param) {
@@ -980,14 +992,23 @@ var RunStep = function(param) {
     }
     return null;
 };
+RunStep.ToolCalls = ToolCalls;
+// src/contexts/components/ComponentsContext/index.tsx
+var ComponentsContext = createContext6({
+    components: {
+        RunStep: RunStep
+    }
+});
 // src/components/runSteps/RunSteps/index.tsx
 import { jsx as jsx20 } from "react/jsx-runtime";
 var RunSteps = function(param) {
     var runSteps = param.runSteps;
+    var componentsContext = useContext5(ComponentsContext);
+    var Component = componentsContext.components.RunStep;
     return /* @__PURE__ */ jsx20(Flex9, {
         direction: "column-reverse",
         children: runSteps.map(function(runStep) {
-            return /* @__PURE__ */ jsx20(RunStep, {
+            return /* @__PURE__ */ jsx20(Component, {
                 runStep: runStep
             }, runStep.id);
         })
@@ -1012,18 +1033,18 @@ var useIsMutatingMessage = function() {
     return isMutatingMessage;
 };
 // src/contexts/messages/MessageContext/index.ts
-import { createContext as createContext6 } from "react";
-var MessageContext = createContext6({
+import { createContext as createContext7 } from "react";
+var MessageContext = createContext7({
     message: null
 });
 // src/components/threads/Thread/Message/Provider.tsx
 var Provider = MessageContext.Provider;
 // src/components/threads/Thread/Message/TextContent.tsx
-import { useRemarkSync } from "react-remark";
+import Markdown from "react-markdown";
 // src/hooks/markdown/useMarkdownContext/index.ts
-import { useContext as useContext5 } from "react";
+import { useContext as useContext6 } from "react";
 // src/contexts/markdown/MarkdownContext/index.ts
-import { createContext as createContext7 } from "react";
+import { createContext as createContext8 } from "react";
 // src/contexts/markdown/MarkdownContext/lib/components/Paragraph.tsx
 import { Box as Box3, Text as Text4 } from "@radix-ui/themes";
 import { jsx as jsx21 } from "react/jsx-runtime";
@@ -1153,7 +1174,7 @@ var components = {
     img: Img
 };
 // src/contexts/markdown/MarkdownContext/index.ts
-var MarkdownContext = createContext7({
+var MarkdownContext = createContext8({
     remarkPlugins: [],
     rehypeReactOptions: {
         components: components
@@ -1161,16 +1182,19 @@ var MarkdownContext = createContext7({
 });
 // src/hooks/markdown/useMarkdownContext/index.ts
 var useMarkdownContext = function() {
-    return useContext5(MarkdownContext);
+    return useContext6(MarkdownContext);
 };
 // src/components/threads/Thread/Message/TextContent.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
 var TextContent = function(param) {
     var content = param.content;
     var markdownContext = useMarkdownContext();
-    return useRemarkSync(content.text.value, markdownContext);
+    return /* @__PURE__ */ jsx30(Markdown, _object_spread_props(_object_spread({}, markdownContext), {
+        children: content.text.value
+    }));
 };
 // src/components/threads/Thread/Message/index.tsx
-import { jsx as jsx30, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs6 } from "react/jsx-runtime";
 var Message = function(param) {
     var message = param.message;
     var _useMemo5 = _sliced_to_array(useMemo5(function() {
@@ -1215,28 +1239,28 @@ var Message = function(param) {
     }, [
         message
     ]);
-    return /* @__PURE__ */ jsx30(Provider, {
+    return /* @__PURE__ */ jsx31(Provider, {
         value: {
             message: message
         },
         children: /* @__PURE__ */ jsxs6(Box9, {
             children: [
-                /* @__PURE__ */ jsx30(RunSteps, {
+                /* @__PURE__ */ jsx31(RunSteps, {
                     runSteps: olderRunSteps
                 }),
                 /* @__PURE__ */ jsxs6(Box9, {
                     children: [
                         message.content.map(function(content, index) {
-                            return /* @__PURE__ */ jsx30(Fragment, {
-                                children: content.type === "text" && /* @__PURE__ */ jsx30(TextContent, {
+                            return /* @__PURE__ */ jsx31(Fragment, {
+                                children: content.type === "text" && /* @__PURE__ */ jsx31(TextContent, {
                                     content: content
                                 })
                             }, index);
                         }),
-                        isInProgress && /* @__PURE__ */ jsx30(StartingContentSkeleton, {})
+                        isInProgress && /* @__PURE__ */ jsx31(StartingContentSkeleton, {})
                     ]
                 }),
-                /* @__PURE__ */ jsx30(RunSteps, {
+                /* @__PURE__ */ jsx31(RunSteps, {
                     runSteps: laterRunSteps
                 })
             ]
@@ -1244,36 +1268,36 @@ var Message = function(param) {
     });
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var Content2 = function(param) {
     var messageGroup = param.messageGroup;
-    return /* @__PURE__ */ jsx31(Flex10, {
+    return /* @__PURE__ */ jsx32(Flex10, {
         direction: "column-reverse",
         children: messageGroup.messages.map(function(message) {
-            return /* @__PURE__ */ jsx31(Message, {
+            return /* @__PURE__ */ jsx32(Message, {
                 message: message
             }, message.id);
         })
     });
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
-import { jsx as jsx32, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs7 } from "react/jsx-runtime";
 var MessageGroup = function(param) {
     var messageGroup = param.messageGroup;
-    var assistantNameContext = useContext6(AssistantNameContext);
+    var assistantNameContext = useContext7(AssistantNameContext);
     return /* @__PURE__ */ jsxs7(MessageGroupBase, {
         children: [
-            messageGroup.role === "user" ? /* @__PURE__ */ jsx32(Avatar3, {
-                fallback: /* @__PURE__ */ jsx32(PersonIcon, {}),
+            messageGroup.role === "user" ? /* @__PURE__ */ jsx33(Avatar3, {
+                fallback: /* @__PURE__ */ jsx33(PersonIcon, {}),
                 size: "1"
-            }) : /* @__PURE__ */ jsx32(AssistantAvatar, {}),
+            }) : /* @__PURE__ */ jsx33(AssistantAvatar, {}),
             /* @__PURE__ */ jsxs7(Box10, {
                 flexGrow: "1",
                 children: [
-                    /* @__PURE__ */ jsx32(Name, {
+                    /* @__PURE__ */ jsx33(Name, {
                         children: messageGroup.role === "user" ? "You" : assistantNameContext
                     }),
-                    /* @__PURE__ */ jsx32(Content2, {
+                    /* @__PURE__ */ jsx33(Content2, {
                         messageGroup: messageGroup
                     })
                 ]
@@ -1282,7 +1306,7 @@ var MessageGroup = function(param) {
     });
 };
 // src/components/threads/Thread/Messages/Content/index.tsx
-import { Fragment as Fragment2, jsx as jsx33 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx34 } from "react/jsx-runtime";
 var Content3 = function() {
     var _useMessages = useMessages(), messages2 = _useMessages.messages, isLoading = _useMessages.isLoading, isLoadingError = _useMessages.isLoadingError;
     var addToast = useToasts().addToast;
@@ -1301,11 +1325,11 @@ var Content3 = function() {
         addToast
     ]);
     if (isLoading || isLoadingError) {
-        return /* @__PURE__ */ jsx33(MessagesSkeleton, {});
+        return /* @__PURE__ */ jsx34(MessagesSkeleton, {});
     }
-    return /* @__PURE__ */ jsx33(Fragment2, {
+    return /* @__PURE__ */ jsx34(Fragment2, {
         children: messageGroups2.map(function(messageGroup) {
-            return /* @__PURE__ */ jsx33(MessageGroup, {
+            return /* @__PURE__ */ jsx34(MessageGroup, {
                 messageGroup: messageGroup
             }, messageGroup.id);
         })
@@ -1314,22 +1338,22 @@ var Content3 = function() {
 // src/components/threads/Thread/Messages/Progress/index.tsx
 import { useMemo as useMemo7 } from "react";
 // src/components/skeletons/StartingSkeleton/index.tsx
-import { useContext as useContext7 } from "react";
+import { useContext as useContext8 } from "react";
 import { Box as Box11 } from "@radix-ui/themes";
-import { jsx as jsx34, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs8 } from "react/jsx-runtime";
 var StartingSkeleton = function(param) {
     var children = param.children;
-    var assistantNameContext = useContext7(AssistantNameContext);
+    var assistantNameContext = useContext8(AssistantNameContext);
     return /* @__PURE__ */ jsxs8(MessageGroupBase, {
         children: [
-            /* @__PURE__ */ jsx34(AssistantAvatar, {}),
+            /* @__PURE__ */ jsx35(AssistantAvatar, {}),
             /* @__PURE__ */ jsxs8(Box11, {
                 children: [
-                    /* @__PURE__ */ jsx34(Name, {
+                    /* @__PURE__ */ jsx35(Name, {
                         children: assistantNameContext
                     }),
                     children,
-                    /* @__PURE__ */ jsx34(StartingContentSkeleton, {})
+                    /* @__PURE__ */ jsx35(StartingContentSkeleton, {})
                 ]
             })
         ]
@@ -1354,7 +1378,7 @@ var isOptimistic = function(param) {
     return _4.startsWith(id, "-");
 };
 // src/components/threads/Thread/Messages/Progress/index.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var Progress = function() {
     var latestMessage = useLatestMessage().latestMessage;
     var isMutatingMessage = useIsMutatingMessage();
@@ -1372,7 +1396,7 @@ var Progress = function() {
         isMutatingMessage
     ]);
     if (!isVisible) return null;
-    return /* @__PURE__ */ jsx35(StartingSkeleton, {});
+    return /* @__PURE__ */ jsx36(StartingSkeleton, {});
 };
 // src/components/threads/Thread/Messages/Root/index.tsx
 import { Flex as Flex11 } from "@radix-ui/themes";
@@ -1431,8 +1455,8 @@ var useInfiniteScroll = function(param) {
     };
 };
 // src/components/threads/Thread/Messages/Root/index.tsx
-import { jsx as jsx36, jsxs as jsxs9 } from "react/jsx-runtime";
-var Root = function(param) {
+import { jsx as jsx37, jsxs as jsxs9 } from "react/jsx-runtime";
+var Root2 = function(param) {
     var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
     var _useMessages = useMessages(), isFetchingNextPage = _useMessages.isFetchingNextPage, hasNextPage = _useMessages.hasNextPage, fetchNextPage = _useMessages.fetchNextPage;
     var _useInfiniteScroll = useInfiniteScroll({
@@ -1449,10 +1473,10 @@ var Root = function(param) {
         }),
         children: [
             children,
-            hasNextPage && /* @__PURE__ */ jsx36(Flex11, {
+            hasNextPage && /* @__PURE__ */ jsx37(Flex11, {
                 ref: loaderRef
             }),
-            /* @__PURE__ */ jsx36(Flex11, {
+            /* @__PURE__ */ jsx37(Flex11, {
                 flexShrink: "0",
                 flexGrow: "1"
             })
@@ -1460,37 +1484,37 @@ var Root = function(param) {
     });
 };
 // src/components/threads/Thread/Messages/NextPageSkeleton.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var NextPageSkeleton = function() {
     var hasNextPage = useMessages().hasNextPage;
     if (!hasNextPage) {
         return null;
     }
-    return /* @__PURE__ */ jsx37(MessagesSkeleton, {});
+    return /* @__PURE__ */ jsx38(MessagesSkeleton, {});
 };
 // src/components/threads/Thread/Messages/index.tsx
-import { jsx as jsx38, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs10 } from "react/jsx-runtime";
 var Messages = function(param) {
     var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
-    return /* @__PURE__ */ jsxs10(Root, {
+    return /* @__PURE__ */ jsxs10(Root2, {
         style: style,
         children: [
-            /* @__PURE__ */ jsx38(Flex12, {
+            /* @__PURE__ */ jsx39(Flex12, {
                 flexShrink: "0",
                 height: "var(--space-3)"
             }),
-            /* @__PURE__ */ jsx38(Progress, {}),
+            /* @__PURE__ */ jsx39(Progress, {}),
             children,
-            /* @__PURE__ */ jsx38(Content3, {}),
-            /* @__PURE__ */ jsx38(NextPageSkeleton, {}),
-            /* @__PURE__ */ jsx38(Flex12, {
+            /* @__PURE__ */ jsx39(Content3, {}),
+            /* @__PURE__ */ jsx39(NextPageSkeleton, {}),
+            /* @__PURE__ */ jsx39(Flex12, {
                 flexShrink: "0",
                 flexGrow: "1"
             })
         ]
     });
 };
-Messages.Root = Root;
+Messages.Root = Root2;
 Messages.Message = Message;
 Messages.NextPageSkeleton = NextPageSkeleton;
 // src/components/threads/Thread/MessageForm/index.tsx
@@ -1499,36 +1523,36 @@ import { Flex as Flex14, Text as Text5 } from "@radix-ui/themes";
 import { ArrowUpIcon, StopIcon } from "@radix-ui/react-icons";
 import { IconButton } from "@radix-ui/themes";
 // src/hooks/messages/useMessageFormContext/index.ts
-import { useContext as useContext8 } from "react";
+import { useContext as useContext9 } from "react";
 // src/contexts/messages/MessageFormContext/index.ts
-import { createContext as createContext8 } from "react";
-var MessageFormContext = createContext8({
+import { createContext as createContext9 } from "react";
+var MessageFormContext = createContext9({
     isDisabled: false,
     isLoading: false
 });
 // src/hooks/messages/useMessageFormContext/index.ts
 var useMessageFormContext = function() {
-    return useContext8(MessageFormContext);
+    return useContext9(MessageFormContext);
 };
 // src/components/threads/Thread/MessageForm/Submit/index.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var Submit = function() {
     var superinterfaceContext = useSuperinterfaceContext();
     var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading;
     if (isLoading) {
-        return /* @__PURE__ */ jsx39(IconButton, {
+        return /* @__PURE__ */ jsx40(IconButton, {
             type: "button",
             onClick: function() {
                 var _superinterfaceContext_createMessageAbortControllerRef_current;
                 return (_superinterfaceContext_createMessageAbortControllerRef_current = superinterfaceContext.createMessageAbortControllerRef.current) === null || _superinterfaceContext_createMessageAbortControllerRef_current === void 0 ? void 0 : _superinterfaceContext_createMessageAbortControllerRef_current.abort();
             },
-            children: /* @__PURE__ */ jsx39(StopIcon, {})
+            children: /* @__PURE__ */ jsx40(StopIcon, {})
         });
     }
-    return /* @__PURE__ */ jsx39(IconButton, {
+    return /* @__PURE__ */ jsx40(IconButton, {
         type: "submit",
         disabled: isDisabled,
-        children: /* @__PURE__ */ jsx39(ArrowUpIcon, {})
+        children: /* @__PURE__ */ jsx40(ArrowUpIcon, {})
     });
 };
 // src/components/threads/Thread/MessageForm/Root/index.tsx
@@ -2155,8 +2179,8 @@ var formOptions = {
     resolver: zodResolver(schema)
 };
 // src/components/threads/Thread/MessageForm/Root/index.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
-var Root2 = function(param) {
+import { jsx as jsx41 } from "react/jsx-runtime";
+var Root3 = function(param) {
     var children = param.children;
     var formProps = useForm(formOptions);
     var handleSubmit = formProps.handleSubmit, isSubmitting = formProps.formState.isSubmitting, reset = formProps.reset;
@@ -2227,16 +2251,16 @@ var Root2 = function(param) {
         latestMessage,
         isLoading
     ]);
-    return /* @__PURE__ */ jsx40(MessageFormContext.Provider, {
+    return /* @__PURE__ */ jsx41(MessageFormContext.Provider, {
         value: {
             isDisabled: isDisabled,
             isLoading: isLoading
         },
-        children: /* @__PURE__ */ jsx40(FormProvider, _object_spread_props(_object_spread({}, formProps), {
-            children: /* @__PURE__ */ jsx40(Box12, {
+        children: /* @__PURE__ */ jsx41(FormProvider, _object_spread_props(_object_spread({}, formProps), {
+            children: /* @__PURE__ */ jsx41(Box12, {
                 asChild: true,
                 flexShrink: "0",
-                children: /* @__PURE__ */ jsx40("form", {
+                children: /* @__PURE__ */ jsx41("form", {
                     onSubmit: handleSubmit(onSubmit),
                     children: children
                 })
@@ -2246,19 +2270,19 @@ var Root2 = function(param) {
 };
 // src/components/threads/Thread/MessageForm/Field/index.tsx
 import { usePrevious } from "react-use";
-import { useContext as useContext9, useMemo as useMemo9, useRef as useRef4, useEffect as useEffect3 } from "react";
+import { useContext as useContext10, useMemo as useMemo9, useRef as useRef4, useEffect as useEffect3 } from "react";
 // src/components/textareas/TextareaBase/index.tsx
 import { forwardRef as forwardRef3 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
-import { Fragment as Fragment3, jsx as jsx41, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx42, jsxs as jsxs11 } from "react/jsx-runtime";
 var UPSCALE_RATIO = 16 / 14;
 var TextareaBase = forwardRef3(function TextareaBase2(props, ref) {
     return /* @__PURE__ */ jsxs11(Fragment3, {
         children: [
-            /* @__PURE__ */ jsx41("style", {
+            /* @__PURE__ */ jsx42("style", {
                 children: ".superinterface-textarea { min-height: inherit; height: 30px; }\n.superinterface-textarea::placeholder { color: var(--gray-a10); }"
             }),
-            /* @__PURE__ */ jsx41(TextareaAutosize, _object_spread({
+            /* @__PURE__ */ jsx42(TextareaAutosize, _object_spread({
                 ref: ref,
                 className: "rt-reset superinterface-textarea",
                 style: {
@@ -2283,20 +2307,20 @@ var TextareaBase = forwardRef3(function TextareaBase2(props, ref) {
 // src/components/threads/Thread/MessageForm/Field/index.tsx
 import { useFormContext } from "react-hook-form";
 import { Container as Container2, Flex as Flex13 } from "@radix-ui/themes";
-import { jsx as jsx42 } from "react/jsx-runtime";
-var Root3 = function(param) {
+import { jsx as jsx43 } from "react/jsx-runtime";
+var Root4 = function(param) {
     var children = param.children;
     var _useFormContext = useFormContext(), errors = _useFormContext.formState.errors;
-    return /* @__PURE__ */ jsx42(Container2, {
+    return /* @__PURE__ */ jsx43(Container2, {
         size: "2",
         flexGrow: "0",
-        children: /* @__PURE__ */ jsx42(Flex13, {
+        children: /* @__PURE__ */ jsx43(Flex13, {
             direction: "column",
             flexShrink: "0",
-            children: /* @__PURE__ */ jsx42(Flex13, {
+            children: /* @__PURE__ */ jsx43(Flex13, {
                 direction: "column",
                 flexShrink: "0",
-                children: /* @__PURE__ */ jsx42(Flex13, {
+                children: /* @__PURE__ */ jsx43(Flex13, {
                     style: _object_spread({
                         borderRadius: "var(--radius-2)",
                         borderWidth: "1px",
@@ -2314,7 +2338,7 @@ var Root3 = function(param) {
     });
 };
 var Control = function() {
-    var assistantNameContext = useContext9(AssistantNameContext);
+    var assistantNameContext = useContext10(AssistantNameContext);
     var register = useFormContext().register;
     var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading;
     var isSubmitDisabled = useMemo9(function() {
@@ -2336,7 +2360,7 @@ var Control = function() {
         isDisabledPrevious,
         textareaProps
     ]);
-    return /* @__PURE__ */ jsx42(TextareaBase, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ jsx43(TextareaBase, _object_spread_props(_object_spread({
         minRows: 1,
         placeholder: "Message ".concat(assistantNameContext, "..."),
         disabled: isDisabled,
@@ -2356,36 +2380,36 @@ var Control = function() {
     }));
 };
 var Field = {
-    Root: Root3,
+    Root: Root4,
     Control: Control
 };
 // src/components/threads/Thread/MessageForm/index.tsx
-import { jsx as jsx43, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs12 } from "react/jsx-runtime";
 var MessageForm = function() {
-    return /* @__PURE__ */ jsx43(Root2, {
+    return /* @__PURE__ */ jsx44(Root3, {
         children: /* @__PURE__ */ jsxs12(Field.Root, {
             children: [
-                /* @__PURE__ */ jsx43(Text5, {
+                /* @__PURE__ */ jsx44(Text5, {
                     size: "2",
                     style: {
                         flexGrow: 1
                     },
-                    children: /* @__PURE__ */ jsx43(Flex14, {
+                    children: /* @__PURE__ */ jsx44(Flex14, {
                         flexGrow: "1",
                         direction: "column",
-                        children: /* @__PURE__ */ jsx43(Field.Control, {})
+                        children: /* @__PURE__ */ jsx44(Field.Control, {})
                     })
                 }),
-                /* @__PURE__ */ jsx43(Flex14, {
+                /* @__PURE__ */ jsx44(Flex14, {
                     flexShrink: "0",
                     align: "end",
-                    children: /* @__PURE__ */ jsx43(Submit, {})
+                    children: /* @__PURE__ */ jsx44(Submit, {})
                 })
             ]
         })
     });
 };
-MessageForm.Root = Root2;
+MessageForm.Root = Root3;
 MessageForm.Field = Field;
 MessageForm.Submit = Submit;
 // src/components/threads/Thread/Root/index.tsx
@@ -2393,13 +2417,13 @@ import { Flex as Flex15 } from "@radix-ui/themes";
 // src/components/threads/Thread/Provider/index.tsx
 var Provider2 = SuperinterfaceProvider;
 // src/components/threads/Thread/Root/index.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
-var Root4 = function(_param) {
+import { jsx as jsx45 } from "react/jsx-runtime";
+var Root5 = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
     ]);
-    return /* @__PURE__ */ jsx44(Provider2, _object_spread_props(_object_spread({}, rest), {
-        children: /* @__PURE__ */ jsx44(Flex15, {
+    return /* @__PURE__ */ jsx45(Provider2, _object_spread_props(_object_spread({}, rest), {
+        children: /* @__PURE__ */ jsx45(Flex15, {
             direction: "column",
             flexGrow: "1",
             children: children
@@ -2407,43 +2431,43 @@ var Root4 = function(_param) {
     }));
 };
 // src/components/threads/Thread/index.tsx
-import { jsx as jsx45, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs13 } from "react/jsx-runtime";
 var Thread = function(props) {
-    return /* @__PURE__ */ jsxs13(Root4, _object_spread_props(_object_spread({}, props), {
+    return /* @__PURE__ */ jsxs13(Root5, _object_spread_props(_object_spread({}, props), {
         children: [
-            /* @__PURE__ */ jsx45(Messages, {}),
-            /* @__PURE__ */ jsx45(MessageForm, {})
+            /* @__PURE__ */ jsx46(Messages, {}),
+            /* @__PURE__ */ jsx46(MessageForm, {})
         ]
     }));
 };
-Thread.Root = Root4;
+Thread.Root = Root5;
 Thread.Messages = Messages;
 Thread.MessageForm = MessageForm;
 // src/hooks/messages/useMessageContext/index.ts
-import { useContext as useContext10 } from "react";
+import { useContext as useContext11 } from "react";
 var useMessageContext = function() {
-    return useContext10(MessageContext);
+    return useContext11(MessageContext);
 };
 // src/components/threads/ThreadDialog/Provider/index.tsx
 import { useState } from "react";
 // src/contexts/threads/ThreadDialogContext/index.ts
-import { createContext as createContext9 } from "react";
-var ThreadDialogContext = createContext9({
+import { createContext as createContext10 } from "react";
+var ThreadDialogContext = createContext10({
     isOpen: false,
     setIsOpen: function() {}
 });
 // src/hooks/threads/useThreadDialogContext/index.ts
-import { useContext as useContext11 } from "react";
+import { useContext as useContext12 } from "react";
 var useThreadDialogContext = function() {
-    return useContext11(ThreadDialogContext);
+    return useContext12(ThreadDialogContext);
 };
 // src/components/threads/ThreadDialog/Provider/index.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var Provider3 = function(param) {
     var children = param.children;
     var threadDialogContext = useThreadDialogContext();
     var _useState = _sliced_to_array(useState(threadDialogContext.isOpen), 2), isOpen = _useState[0], setIsOpen = _useState[1];
-    return /* @__PURE__ */ jsx46(ThreadDialogContext.Provider, {
+    return /* @__PURE__ */ jsx47(ThreadDialogContext.Provider, {
         value: {
             isOpen: isOpen,
             setIsOpen: setIsOpen
@@ -2458,25 +2482,25 @@ import * as Toast2 from "@radix-ui/react-toast";
 import * as Toast from "@radix-ui/react-toast";
 import { Card, Text as Text6, Flex as Flex16 } from "@radix-ui/themes";
 import { CheckCircledIcon as CheckCircledIcon2, CrossCircledIcon } from "@radix-ui/react-icons";
-import { jsx as jsx47, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs14 } from "react/jsx-runtime";
 var CustomToast = function(param) {
     var toast = param.toast;
-    return /* @__PURE__ */ jsx47(Toast.Root, {
-        children: /* @__PURE__ */ jsx47(Card, {
-            children: /* @__PURE__ */ jsx47(Toast.Title, {
+    return /* @__PURE__ */ jsx48(Toast.Root, {
+        children: /* @__PURE__ */ jsx48(Card, {
+            children: /* @__PURE__ */ jsx48(Toast.Title, {
                 children: /* @__PURE__ */ jsxs14(Flex16, {
                     children: [
-                        /* @__PURE__ */ jsx47(Flex16, {
+                        /* @__PURE__ */ jsx48(Flex16, {
                             pr: "2",
                             height: "14px",
                             align: "center",
-                            children: toast.type === "success" ? /* @__PURE__ */ jsx47(CheckCircledIcon2, {
+                            children: toast.type === "success" ? /* @__PURE__ */ jsx48(CheckCircledIcon2, {
                                 color: "var(--accent-9)"
-                            }) : /* @__PURE__ */ jsx47(CrossCircledIcon, {
+                            }) : /* @__PURE__ */ jsx48(CrossCircledIcon, {
                                 color: "var(--red-9)"
                             })
                         }),
-                        /* @__PURE__ */ jsx47(Text6, {
+                        /* @__PURE__ */ jsx48(Text6, {
                             weight: "medium",
                             size: "1",
                             children: toast.message
@@ -2488,7 +2512,7 @@ var CustomToast = function(param) {
     });
 };
 // src/components/toasts/ToastsProvider/index.tsx
-import { jsx as jsx48, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs15 } from "react/jsx-runtime";
 var ToastsProvider = function(param) {
     var children = param.children;
     var _useState2 = _sliced_to_array(useState2([]), 2), toasts = _useState2[0], setToasts = _useState2[1];
@@ -2499,7 +2523,7 @@ var ToastsProvider = function(param) {
             ]);
         });
     }, []);
-    return /* @__PURE__ */ jsx48(ToastsContext.Provider, {
+    return /* @__PURE__ */ jsx49(ToastsContext.Provider, {
         value: {
             toasts: toasts,
             addToast: addToast
@@ -2508,11 +2532,11 @@ var ToastsProvider = function(param) {
             children: [
                 children,
                 Array.from(toasts).map(function(toast, index) {
-                    return /* @__PURE__ */ jsx48(CustomToast, {
+                    return /* @__PURE__ */ jsx49(CustomToast, {
                         toast: toast
                     }, index);
                 }),
-                /* @__PURE__ */ jsx48(Toast2.Viewport, {
+                /* @__PURE__ */ jsx49(Toast2.Viewport, {
                     style: {
                         position: "absolute",
                         bottom: 0,
@@ -2534,22 +2558,22 @@ var ToastsProvider = function(param) {
     });
 };
 // src/components/threads/ThreadDialog/Root/index.tsx
-import { jsx as jsx49 } from "react/jsx-runtime";
-var Root6 = function(param) {
+import { jsx as jsx50 } from "react/jsx-runtime";
+var Root7 = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx49(ToastsProvider, {
-        children: /* @__PURE__ */ jsx49(Provider3, {
+    return /* @__PURE__ */ jsx50(ToastsProvider, {
+        children: /* @__PURE__ */ jsx50(Provider3, {
             children: children
         })
     });
 };
 // src/components/threads/ThreadDialog/Trigger/index.tsx
 import { Flex as Flex17 } from "@radix-ui/themes";
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var Trigger = function(param) {
     var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
     var _useThreadDialogContext = useThreadDialogContext(), setIsOpen = _useThreadDialogContext.setIsOpen, isOpen = _useThreadDialogContext.isOpen;
-    return /* @__PURE__ */ jsx50(Flex17, {
+    return /* @__PURE__ */ jsx51(Flex17, {
         display: {
             initial: isOpen ? "none" : "flex",
             sm: "flex"
@@ -2575,12 +2599,12 @@ var Trigger = function(param) {
 // src/components/threads/ThreadDialog/Button/index.tsx
 import { IconButton as IconButton2 } from "@radix-ui/themes";
 import { ChatBubbleIcon } from "@radix-ui/react-icons";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var Button2 = function() {
-    return /* @__PURE__ */ jsx51(IconButton2, {
+    return /* @__PURE__ */ jsx52(IconButton2, {
         size: "4",
         radius: "full",
-        children: /* @__PURE__ */ jsx51(ChatBubbleIcon, {})
+        children: /* @__PURE__ */ jsx52(ChatBubbleIcon, {})
     });
 };
 // src/components/threads/ThreadDialog/Content/index.tsx
@@ -2588,10 +2612,10 @@ import { Card as Card2, Inset, Flex as Flex19 } from "@radix-ui/themes";
 // src/components/threads/ThreadDialog/Close/index.tsx
 import { Cross1Icon } from "@radix-ui/react-icons";
 import { IconButton as IconButton3, Flex as Flex18 } from "@radix-ui/themes";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var Close = function() {
     var _useThreadDialogContext = useThreadDialogContext(), setIsOpen = _useThreadDialogContext.setIsOpen, isOpen = _useThreadDialogContext.isOpen;
-    return /* @__PURE__ */ jsx52(Flex18, {
+    return /* @__PURE__ */ jsx53(Flex18, {
         display: {
             initial: isOpen ? "flex" : "none",
             sm: "none"
@@ -2611,20 +2635,20 @@ var Close = function() {
         style: {
             zIndex: 9999999999
         },
-        children: /* @__PURE__ */ jsx52(IconButton3, {
+        children: /* @__PURE__ */ jsx53(IconButton3, {
             size: "2",
             variant: "soft",
-            children: /* @__PURE__ */ jsx52(Cross1Icon, {})
+            children: /* @__PURE__ */ jsx53(Cross1Icon, {})
         })
     });
 };
 // src/components/threads/ThreadDialog/Content/index.tsx
-import { jsx as jsx53, jsxs as jsxs16 } from "react/jsx-runtime";
-var Root7 = function(param) {
+import { jsx as jsx54, jsxs as jsxs16 } from "react/jsx-runtime";
+var Root8 = function(param) {
     var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
     var isOpen = useThreadDialogContext().isOpen;
     if (!isOpen) return null;
-    return /* @__PURE__ */ jsx53(Flex19, {
+    return /* @__PURE__ */ jsx54(Flex19, {
         direction: "column",
         justify: "end",
         position: "fixed",
@@ -2663,7 +2687,7 @@ var Root7 = function(param) {
                 flexGrow: 1
             },
             children: [
-                /* @__PURE__ */ jsx53(Inset, {
+                /* @__PURE__ */ jsx54(Inset, {
                     clip: "padding-box",
                     side: "all",
                     pb: "current",
@@ -2673,50 +2697,50 @@ var Root7 = function(param) {
                     },
                     children: children
                 }),
-                /* @__PURE__ */ jsx53(Close, {})
+                /* @__PURE__ */ jsx54(Close, {})
             ]
         })
     });
 };
 var Content4 = function(param) {
     var _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
-    return /* @__PURE__ */ jsx53(Root7, {
+    return /* @__PURE__ */ jsx54(Root8, {
         style: style,
         children: /* @__PURE__ */ jsxs16(Thread.Root, {
             children: [
-                /* @__PURE__ */ jsx53(Thread.Messages, {
+                /* @__PURE__ */ jsx54(Thread.Messages, {
                     style: {
                         paddingTop: "var(--space-5)",
                         paddingRight: "var(--space-5)",
                         paddingLeft: "var(--space-5)"
                     }
                 }),
-                /* @__PURE__ */ jsx53(Flex19, {
+                /* @__PURE__ */ jsx54(Flex19, {
                     direction: "column",
                     pl: "5",
                     pr: "5",
                     pb: "3",
                     flexShrink: "0",
-                    children: /* @__PURE__ */ jsx53(Thread.MessageForm, {})
+                    children: /* @__PURE__ */ jsx54(Thread.MessageForm, {})
                 })
             ]
         })
     });
 };
-Content4.Root = Root7;
+Content4.Root = Root8;
 // src/components/threads/ThreadDialog/index.tsx
-import { jsx as jsx54, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs17 } from "react/jsx-runtime";
 var ThreadDialog = function() {
-    return /* @__PURE__ */ jsxs17(Root6, {
+    return /* @__PURE__ */ jsxs17(Root7, {
         children: [
-            /* @__PURE__ */ jsx54(Content4, {}),
-            /* @__PURE__ */ jsx54(Trigger, {
-                children: /* @__PURE__ */ jsx54(Button2, {})
+            /* @__PURE__ */ jsx55(Content4, {}),
+            /* @__PURE__ */ jsx55(Trigger, {
+                children: /* @__PURE__ */ jsx55(Button2, {})
             })
         ]
     });
 };
-ThreadDialog.Root = Root6;
+ThreadDialog.Root = Root7;
 ThreadDialog.Trigger = Trigger;
 ThreadDialog.Button = Button2;
 ThreadDialog.Content = Content4;
@@ -2724,8 +2748,8 @@ ThreadDialog.Content = Content4;
 import "regenerator-runtime/runtime";
 import { Flex as Flex20 } from "@radix-ui/themes";
 // src/contexts/threads/AudioThreadContext/index.ts
-import { createContext as createContext10 } from "react";
-var AudioThreadContext = createContext10({
+import { createContext as createContext11 } from "react";
+var AudioThreadContext = createContext11({
     status: "idle",
     recorderProps: {
         status: "idle",
@@ -3159,8 +3183,8 @@ var useMessageAudio = function(param) {
     });
 };
 // src/components/threads/AudioThread/Root/index.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
-var Root8 = function(param) {
+import { jsx as jsx56 } from "react/jsx-runtime";
+var Root9 = function(param) {
     var children = param.children;
     var createMessageProps = useCreateMessage();
     var recorderProps = useRecorder({
@@ -3217,13 +3241,13 @@ var Root8 = function(param) {
         createMessageProps: createMessageProps,
         messageAudioProps: messageAudioProps
     }).status;
-    return /* @__PURE__ */ jsx55(AudioThreadContext.Provider, {
+    return /* @__PURE__ */ jsx56(AudioThreadContext.Provider, {
         value: {
             status: status,
             recorderProps: recorderProps,
             messageAudioProps: messageAudioProps
         },
-        children: /* @__PURE__ */ jsx55(Flex20, {
+        children: /* @__PURE__ */ jsx56(Flex20, {
             direction: "column",
             flexGrow: "1",
             p: "9",
@@ -3232,20 +3256,20 @@ var Root8 = function(param) {
     });
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
-import { useContext as useContext13, useState as useState6, useCallback as useCallback5, useEffect as useEffect7 } from "react";
+import { useContext as useContext14, useState as useState6, useCallback as useCallback5, useEffect as useEffect7 } from "react";
 import _9 from "lodash";
 import { Flex as Flex22 } from "@radix-ui/themes";
 // src/hooks/threads/useAudioThreadContext/index.ts
-import { useContext as useContext12 } from "react";
+import { useContext as useContext13 } from "react";
 var useAudioThreadContext = function() {
-    return useContext12(AudioThreadContext);
+    return useContext13(AudioThreadContext);
 };
 // src/components/threads/AudioThread/BarsVisualizer/index.tsx
 import _8 from "lodash";
 import { Flex as Flex21, Grid } from "@radix-ui/themes";
 import { useState as useState5, useEffect as useEffect6, useCallback as useCallback4 } from "react";
 import { cluster } from "radash";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var barCount = 4;
 var BarsVisualizer = function(param) {
     var visualizationAnalyser = param.visualizationAnalyser, backgroundColor = param.backgroundColor, height = param.height, barWidth = param.barWidth;
@@ -3276,7 +3300,7 @@ var BarsVisualizer = function(param) {
         draw,
         visualizationAnalyser
     ]);
-    return /* @__PURE__ */ jsx56(Grid, {
+    return /* @__PURE__ */ jsx57(Grid, {
         columns: "".concat(barCount),
         gap: "1",
         width: "auto",
@@ -3285,12 +3309,12 @@ var BarsVisualizer = function(param) {
             gridTemplateColumns: "repeat(4, minmax(0, 1fr))"
         },
         children: barHeights.map(function(barHeight, index) {
-            return /* @__PURE__ */ jsx56(Flex21, {
+            return /* @__PURE__ */ jsx57(Flex21, {
                 direction: "column",
                 align: "center",
                 justify: "center",
                 height: height,
-                children: /* @__PURE__ */ jsx56(Flex21, {
+                children: /* @__PURE__ */ jsx57(Flex21, {
                     minHeight: "50%",
                     maxHeight: "100%",
                     height: "".concat(barHeight + 20, "%"),
@@ -3305,10 +3329,10 @@ var BarsVisualizer = function(param) {
     });
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
-import { jsx as jsx57, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs18 } from "react/jsx-runtime";
 var Visualization = function() {
     var audioThreadContext = useAudioThreadContext();
-    var assistantNameContext = useContext13(AssistantNameContext);
+    var assistantNameContext = useContext14(AssistantNameContext);
     var _useState6 = _sliced_to_array(useState6(0), 2), scale = _useState6[0], setScale = _useState6[1];
     var draw = useCallback5(function(param) {
         var visualizationAnalyser = param.visualizationAnalyser;
@@ -3340,7 +3364,7 @@ var Visualization = function() {
         mb: "3",
         flexGrow: "1",
         children: [
-            /* @__PURE__ */ jsx57(Flex22, {
+            /* @__PURE__ */ jsx58(Flex22, {
                 align: "center",
                 justify: "center",
                 height: "200px",
@@ -3350,7 +3374,7 @@ var Visualization = function() {
                     borderRadius: "9999px",
                     scale: scale
                 },
-                children: /* @__PURE__ */ jsx57(BarsVisualizer, {
+                children: /* @__PURE__ */ jsx58(BarsVisualizer, {
                     visualizationAnalyser: audioThreadContext.messageAudioProps.visualizationAnalyser,
                     backgroundColor: audioThreadContext.status === "playing" ? "var(--accent-11)" : "var(--gray-11)",
                     height: "40px",
@@ -3362,8 +3386,8 @@ var Visualization = function() {
                 gap: "3",
                 pt: "5",
                 children: [
-                    /* @__PURE__ */ jsx57(AssistantAvatar, {}),
-                    /* @__PURE__ */ jsx57(Name, {
+                    /* @__PURE__ */ jsx58(AssistantAvatar, {}),
+                    /* @__PURE__ */ jsx58(Name, {
                         children: assistantNameContext
                     })
                 ]
@@ -3373,7 +3397,7 @@ var Visualization = function() {
 };
 // src/components/threads/AudioThread/Status/StatusMessages.tsx
 import { Flex as Flex23, Text as Text7 } from "@radix-ui/themes";
-import { jsx as jsx58, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs19 } from "react/jsx-runtime";
 var html = function(param) {
     var texts = param.texts;
     return "\n  .status-messages-texts:after {\n    content: '".concat(texts[0], "';\n    animation: texts ").concat(texts.length * 5, "s linear infinite;\n  }\n\n  @keyframes texts {\n    ").concat(texts.map(function(_10, i) {
@@ -3386,13 +3410,13 @@ var StatusMessages = function(param) {
         justify: "center",
         pb: "5",
         children: [
-            /* @__PURE__ */ jsx58(Text7, {
+            /* @__PURE__ */ jsx59(Text7, {
                 size: "2",
                 weight: "regular",
                 color: "gray",
                 className: "status-messages-texts"
             }),
-            /* @__PURE__ */ jsx58("style", {
+            /* @__PURE__ */ jsx59("style", {
                 dangerouslySetInnerHTML: {
                     __html: html({
                         texts: texts
@@ -3403,11 +3427,11 @@ var StatusMessages = function(param) {
     });
 };
 // src/components/threads/AudioThread/Status/index.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var Status = function() {
     var audioThreadContext = useAudioThreadContext();
     if (audioThreadContext.status === "recording") {
-        return /* @__PURE__ */ jsx59(StatusMessages, {
+        return /* @__PURE__ */ jsx60(StatusMessages, {
             texts: [
                 "Start speaking",
                 "Listening",
@@ -3421,20 +3445,20 @@ var Status = function() {
         "idle",
         "playerPaused"
     ].includes(audioThreadContext.status)) {
-        return /* @__PURE__ */ jsx59(StatusMessages, {
+        return /* @__PURE__ */ jsx60(StatusMessages, {
             texts: [
                 "Click the button below to activate"
             ]
         });
     }
     if (audioThreadContext.status === "playing") {
-        return /* @__PURE__ */ jsx59(StatusMessages, {
+        return /* @__PURE__ */ jsx60(StatusMessages, {
             texts: [
                 "Click the button below to interrupt"
             ]
         });
     }
-    return /* @__PURE__ */ jsx59(StatusMessages, {
+    return /* @__PURE__ */ jsx60(StatusMessages, {
         texts: [
             "Thinking"
         ]
@@ -3443,9 +3467,9 @@ var Status = function() {
 // src/components/threads/AudioThread/Form/index.tsx
 import { Flex as Flex25 } from "@radix-ui/themes";
 // src/components/threads/AudioThread/Form/MicIcon.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var MicIcon = function(props) {
-    return /* @__PURE__ */ jsx60("svg", _object_spread_props(_object_spread({
+    return /* @__PURE__ */ jsx61("svg", _object_spread_props(_object_spread({
         xmlns: "http://www.w3.org/2000/svg",
         fill: "currentColor",
         stroke: "currentColor",
@@ -3454,7 +3478,7 @@ var MicIcon = function(props) {
         height: "15",
         width: "15"
     }, props), {
-        children: /* @__PURE__ */ jsx60("path", {
+        children: /* @__PURE__ */ jsx61("path", {
             stroke: "none",
             d: "M192 0c-53 0-96 43-96 96v160c0 53 43 96 96 96s96-43 96-96V96c0-53-43-96-96-96zM64 216c0-13.3-10.7-24-24-24s-24 10.7-24 24v40c0 89.1 66.2 162.7 152 174.4V464h-48c-13.3 0-24 10.7-24 24s10.7 24 24 24h144c13.3 0 24-10.7 24-24s-10.7-24-24-24h-48v-33.6c85.8-11.7 152-85.3 152-174.4v-40c0-13.3-10.7-24-24-24s-24 10.7-24 24v40c0 70.7-57.3 128-128 128S64 326.7 64 256v-40z"
         })
@@ -3463,7 +3487,7 @@ var MicIcon = function(props) {
 // src/components/threads/AudioThread/Form/ActionButton/index.tsx
 import { Flex as Flex24, IconButton as IconButton4 } from "@radix-ui/themes";
 import { StopIcon as StopIcon2, PauseIcon, ArrowUpIcon as ArrowUpIcon2, ResumeIcon } from "@radix-ui/react-icons";
-import { jsx as jsx61, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs20 } from "react/jsx-runtime";
 var ActionButton = function() {
     var audioThreadContext = useAudioThreadContext();
     var superinterfaceContext = useSuperinterfaceContext();
@@ -3471,37 +3495,37 @@ var ActionButton = function() {
         return /* @__PURE__ */ jsxs20(Flex24, {
             align: "center",
             children: [
-                /* @__PURE__ */ jsx61(Flex24, {
+                /* @__PURE__ */ jsx62(Flex24, {
                     mr: "3",
                     ml: "-7",
-                    children: /* @__PURE__ */ jsx61(IconButton4, {
+                    children: /* @__PURE__ */ jsx62(IconButton4, {
                         onClick: audioThreadContext.recorderProps.pause,
                         color: "gray",
                         variant: "soft",
                         size: "1",
-                        children: /* @__PURE__ */ jsx61(PauseIcon, {})
+                        children: /* @__PURE__ */ jsx62(PauseIcon, {})
                     })
                 }),
-                /* @__PURE__ */ jsx61(IconButton4, {
+                /* @__PURE__ */ jsx62(IconButton4, {
                     onClick: audioThreadContext.recorderProps.stop,
                     highContrast: true,
                     variant: "soft",
                     size: "4",
-                    children: /* @__PURE__ */ jsx61(ArrowUpIcon2, {})
+                    children: /* @__PURE__ */ jsx62(ArrowUpIcon2, {})
                 })
             ]
         });
     }
     if (audioThreadContext.status === "recorderPaused") {
-        return /* @__PURE__ */ jsx61(IconButton4, {
+        return /* @__PURE__ */ jsx62(IconButton4, {
             onClick: audioThreadContext.recorderProps.resume,
             color: "red",
             size: "4",
-            children: /* @__PURE__ */ jsx61(ResumeIcon, {})
+            children: /* @__PURE__ */ jsx62(ResumeIcon, {})
         });
     }
     if (audioThreadContext.status === "idle") {
-        return /* @__PURE__ */ jsx61(IconButton4, {
+        return /* @__PURE__ */ jsx62(IconButton4, {
             onClick: function() {
                 return audioThreadContext.recorderProps.start();
             },
@@ -3510,7 +3534,7 @@ var ActionButton = function() {
         });
     }
     if (audioThreadContext.status === "playing") {
-        return /* @__PURE__ */ jsx61(IconButton4, {
+        return /* @__PURE__ */ jsx62(IconButton4, {
             onClick: function() {
                 var _superinterfaceContext_createMessageAbortControllerRef_current;
                 audioThreadContext.messageAudioProps.stop();
@@ -3520,26 +3544,26 @@ var ActionButton = function() {
             size: "4",
             color: "gray",
             variant: "soft",
-            children: /* @__PURE__ */ jsx61(StopIcon2, {})
+            children: /* @__PURE__ */ jsx62(StopIcon2, {})
         });
     }
     if (audioThreadContext.status === "playerPaused") {
-        return /* @__PURE__ */ jsx61(IconButton4, {
+        return /* @__PURE__ */ jsx62(IconButton4, {
             onClick: function() {
                 return audioThreadContext.messageAudioProps.play();
             },
             size: "4",
-            children: /* @__PURE__ */ jsx61(ResumeIcon, {})
+            children: /* @__PURE__ */ jsx62(ResumeIcon, {})
         });
     }
-    return /* @__PURE__ */ jsx61(IconButton4, {
+    return /* @__PURE__ */ jsx62(IconButton4, {
         size: "4",
         variant: "soft",
         disabled: true
     });
 };
 // src/components/threads/AudioThread/Form/index.tsx
-import { jsx as jsx62, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs21 } from "react/jsx-runtime";
 var Form = function() {
     var audioThreadContext = useAudioThreadContext();
     return /* @__PURE__ */ jsxs21(Flex25, {
@@ -3550,24 +3574,24 @@ var Form = function() {
                 pb: "3",
                 align: "center",
                 children: [
-                    /* @__PURE__ */ jsx62(Flex25, {
+                    /* @__PURE__ */ jsx63(Flex25, {
                         ml: "-22.5px",
                         mr: "2",
                         align: "center",
-                        children: /* @__PURE__ */ jsx62(MicIcon, {
+                        children: /* @__PURE__ */ jsx63(MicIcon, {
                             style: {
                                 color: audioThreadContext.status === "recording" ? "var(--accent-11)" : "var(--gray-11)"
                             }
                         })
                     }),
-                    /* @__PURE__ */ jsx62(Flex25, {
+                    /* @__PURE__ */ jsx63(Flex25, {
                         px: "2",
                         py: "1",
                         style: {
                             backgroundColor: audioThreadContext.status === "recording" ? "var(--accent-4)" : "var(--gray-4)",
                             borderRadius: "var(--radius-6)"
                         },
-                        children: /* @__PURE__ */ jsx62(BarsVisualizer, {
+                        children: /* @__PURE__ */ jsx63(BarsVisualizer, {
                             visualizationAnalyser: audioThreadContext.recorderProps.visualizationAnalyser,
                             backgroundColor: audioThreadContext.status === "recording" ? "var(--accent-11)" : "var(--gray-11)",
                             height: "20px",
@@ -3576,39 +3600,39 @@ var Form = function() {
                     })
                 ]
             }),
-            /* @__PURE__ */ jsx62(ActionButton, {})
+            /* @__PURE__ */ jsx63(ActionButton, {})
         ]
     });
 };
 // src/components/threads/AudioThread/index.tsx
-import { jsx as jsx63, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs22 } from "react/jsx-runtime";
 var AudioThread = function(props) {
-    return /* @__PURE__ */ jsxs22(Root8, _object_spread_props(_object_spread({}, props), {
+    return /* @__PURE__ */ jsxs22(Root9, _object_spread_props(_object_spread({}, props), {
         children: [
-            /* @__PURE__ */ jsx63(Visualization, {}),
-            /* @__PURE__ */ jsx63(Status, {}),
-            /* @__PURE__ */ jsx63(Form, {})
+            /* @__PURE__ */ jsx64(Visualization, {}),
+            /* @__PURE__ */ jsx64(Status, {}),
+            /* @__PURE__ */ jsx64(Form, {})
         ]
     }));
 };
-AudioThread.Root = Root8;
+AudioThread.Root = Root9;
 AudioThread.Visualization = Visualization;
 AudioThread.Form = Form;
 // src/components/threads/AudioThreadDialog/index.tsx
-import { jsx as jsx64, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs23 } from "react/jsx-runtime";
 var AudioThreadDialog = function() {
-    return /* @__PURE__ */ jsxs23(Root6, {
+    return /* @__PURE__ */ jsxs23(Root7, {
         children: [
-            /* @__PURE__ */ jsx64(Content4.Root, {
-                children: /* @__PURE__ */ jsx64(AudioThread, {})
+            /* @__PURE__ */ jsx65(Content4.Root, {
+                children: /* @__PURE__ */ jsx65(AudioThread, {})
             }),
-            /* @__PURE__ */ jsx64(Trigger, {
-                children: /* @__PURE__ */ jsx64(Button2, {})
+            /* @__PURE__ */ jsx65(Trigger, {
+                children: /* @__PURE__ */ jsx65(Button2, {})
             })
         ]
     });
 };
-AudioThreadDialog.Root = Root6;
+AudioThreadDialog.Root = Root7;
 AudioThreadDialog.Trigger = Trigger;
 AudioThreadDialog.Button = Button2;
 AudioThreadDialog.Content = Content4;
@@ -3622,11 +3646,11 @@ import { Flex as Flex26 } from "@radix-ui/themes";
 // src/components/suggestions/Suggestions/Item.tsx
 import { ArrowUpIcon as ArrowUpIcon3 } from "@radix-ui/react-icons";
 import { Text as Text8, Button as Button3, Spinner } from "@radix-ui/themes";
-import { jsx as jsx65, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs24 } from "react/jsx-runtime";
 var Item = function(param) {
     var suggestion = param.suggestion, isDisabled = param.isDisabled;
     var _useCreateMessage = useCreateMessage(), createMessage = _useCreateMessage.createMessage, isPending = _useCreateMessage.isPending;
-    return /* @__PURE__ */ jsx65(Content5, {
+    return /* @__PURE__ */ jsx66(Content5, {
         onClick: function() {
             createMessage({
                 // @ts-ignore-next-line
@@ -3650,14 +3674,14 @@ var Content5 = function(param) {
             flexShrink: 1
         },
         children: [
-            /* @__PURE__ */ jsx65(Text8, {
+            /* @__PURE__ */ jsx66(Text8, {
                 size: "1",
                 weight: "regular",
                 children: children
             }),
-            /* @__PURE__ */ jsx65(Spinner, {
+            /* @__PURE__ */ jsx66(Spinner, {
                 loading: isPending,
-                children: /* @__PURE__ */ jsx65(ArrowUpIcon3, {
+                children: /* @__PURE__ */ jsx66(ArrowUpIcon3, {
                     style: {
                         flexShrink: 0
                     }
@@ -3668,7 +3692,7 @@ var Content5 = function(param) {
 };
 Item.Content = Content5;
 // src/components/suggestions/Suggestions/Content.tsx
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
 var Content6 = function(param) {
     var children = param.children;
     var isMutatingMessage = useIsMutatingMessage();
@@ -3682,12 +3706,12 @@ var Content6 = function(param) {
         children
     ]);
     if (isEmpty2(suggestions)) return null;
-    return /* @__PURE__ */ jsx66(Flex26, {
+    return /* @__PURE__ */ jsx67(Flex26, {
         gap: "2",
         py: "2",
         wrap: "wrap",
         children: suggestions.map(function(suggestion) {
-            return /* @__PURE__ */ jsx66(Item, {
+            return /* @__PURE__ */ jsx67(Item, {
                 suggestion: suggestion,
                 isDisabled: isMutatingMessage
             }, suggestion);
@@ -3695,7 +3719,7 @@ var Content6 = function(param) {
     });
 };
 // src/components/suggestions/Suggestions/index.tsx
-import { jsx as jsx67 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 var Suggestions = function(param) {
     var children = param.children;
     var latestMessageProps = useLatestMessage();
@@ -3708,14 +3732,14 @@ var Suggestions = function(param) {
     ]);
     if (latestMessageProps.isLoading) return null;
     if (isDisabled) return null;
-    return /* @__PURE__ */ jsx67(Content6, {
+    return /* @__PURE__ */ jsx68(Content6, {
         children: children
     });
 };
 Suggestions.Item = Item;
 // src/components/markdown/MarkdownProvider/index.tsx
 import { useMemo as useMemo15 } from "react";
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 var MarkdownProvider = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
@@ -3727,10 +3751,35 @@ var MarkdownProvider = function(_param) {
         rest,
         prevMarkdownContext
     ]);
-    return /* @__PURE__ */ jsx68(MarkdownContext.Provider, {
+    return /* @__PURE__ */ jsx69(MarkdownContext.Provider, {
+        value: value,
+        children: children
+    });
+};
+// src/components/components/ComponentsProvider.tsx
+import { useMemo as useMemo16 } from "react";
+// src/hooks/components/useComponents.ts
+import { useContext as useContext15 } from "react";
+var useComponents = function() {
+    return useContext15(ComponentsContext);
+};
+// src/components/components/ComponentsProvider.tsx
+import { jsx as jsx70 } from "react/jsx-runtime";
+var ComponentsProvider = function(_param) {
+    var children = _param.children, rest = _object_without_properties(_param, [
+        "children"
+    ]);
+    var prevComponents = useComponents();
+    var value = useMemo16(function() {
+        return merge(prevComponents, rest);
+    }, [
+        rest,
+        prevComponents
+    ]);
+    return /* @__PURE__ */ jsx70(ComponentsContext.Provider, {
         value: value,
         children: children
     });
 };
-export { AssistantAvatarContext, AssistantNameContext, AudioThread, AudioThreadDialog, FunctionBase, FunctionComponentsContext, MarkdownContext, MarkdownProvider, Suggestions, SuperinterfaceProvider, Thread, ThreadDialog, ThreadDialogContext, useCreateMessage, useLatestMessage, useMarkdownContext, useMessageContext, useMessages, useSuperinterfaceContext, useSuperinterfaceContext as useThreadContext, useThreadDialogContext };
+export { AssistantAvatarContext, AssistantNameContext, AudioThread, AudioThreadDialog, ComponentsProvider, FunctionBase, FunctionComponentsContext, MarkdownContext, MarkdownProvider, RunStep, Suggestions, SuperinterfaceProvider, Thread, ThreadDialog, ThreadDialogContext, useComponents, useCreateMessage, useLatestMessage, useMarkdownContext, useMessageContext, useMessages, useSuperinterfaceContext, useSuperinterfaceContext as useThreadContext, useThreadDialogContext };
 //# sourceMappingURL=index.js.map