@superinterface/react 2.0.10 → 2.1.0

package/dist/index.cjs

@@ -457,7 +457,7 @@ var SuperinterfaceProvider = function(param) {
     });
 };
 // src/components/threads/Thread/Messages/index.tsx
-var import_themes30 = require("@radix-ui/themes");
+var import_themes31 = require("@radix-ui/themes");
 // src/components/threads/Thread/Messages/Content/index.tsx
 var import_react20 = require("react");
 // src/hooks/messages/useMessages/index.tsx
@@ -758,7 +758,7 @@ var useToasts = function() {
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
 var import_react19 = require("react");
-var import_themes25 = require("@radix-ui/themes");
+var import_themes26 = require("@radix-ui/themes");
 var import_react_icons4 = require("@radix-ui/react-icons");
 // src/components/messageGroups/MessageGroupBase/AssistantAvatar.tsx
 var import_react10 = require("react");
@@ -791,10 +791,10 @@ var AssistantAvatar = function() {
 var import_react11 = require("react");
 var AssistantNameContext = (0, import_react11.createContext)("Assistant");
 // src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
-var import_themes24 = require("@radix-ui/themes");
+var import_themes25 = require("@radix-ui/themes");
 // src/components/threads/Thread/Message/index.tsx
 var import_react18 = require("react");
-var import_themes23 = require("@radix-ui/themes");
+var import_themes24 = require("@radix-ui/themes");
 // src/components/runSteps/RunSteps/index.tsx
 var import_themes14 = require("@radix-ui/themes");
 // src/components/runSteps/RunStep/ToolCalls/index.tsx
@@ -1178,6 +1178,20 @@ var Code2 = function(param) {
         children: children
     });
 };
+// src/contexts/markdown/MarkdownContext/lib/components/Img.tsx
+var import_themes23 = require("@radix-ui/themes");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var Img = function(props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_themes23.Box, {
+        pb: "3",
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("img", _object_spread_props(_object_spread({}, props), {
+            style: {
+                maxWidth: "100%",
+                height: "auto"
+            }
+        }))
+    });
+};
 // src/contexts/markdown/MarkdownContext/lib/components/index.tsx
 var components = {
     p: Paragraph,
@@ -1187,7 +1201,8 @@ var components = {
     ol: OrderedList,
     li: ListItem,
     pre: Pre,
-    code: Code2
+    code: Code2,
+    img: Img
 };
 // src/contexts/markdown/MarkdownContext/index.ts
 var MarkdownContext = (0, import_react16.createContext)({
@@ -1207,7 +1222,7 @@ var TextContent = function(param) {
     return (0, import_react_remark.useRemarkSync)(content.text.value, markdownContext);
 };
 // src/components/threads/Thread/Message/index.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var Message = function(param) {
     var message = param.message;
     var _ref = _sliced_to_array((0, import_react18.useMemo)(function() {
@@ -1242,23 +1257,23 @@ var Message = function(param) {
     }, [
         message
     ]), 2), olderRunSteps = _ref[0], laterRunSteps = _ref[1];
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Provider, {
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Provider, {
         value: {
             message: message
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_themes23.Box, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_themes24.Box, {
             children: [
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RunSteps, {
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RunSteps, {
                     runSteps: olderRunSteps
                 }),
                 message.content.map(function(content, index) {
-                    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_themes23.Box, {
-                        children: content.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TextContent, {
+                    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_themes24.Box, {
+                        children: content.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TextContent, {
                             content: content
                         })
                     }, index);
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RunSteps, {
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RunSteps, {
                     runSteps: laterRunSteps
                 })
             ]
@@ -1266,36 +1281,36 @@ var Message = function(param) {
     });
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var Content2 = function(param) {
     var messageGroup = param.messageGroup;
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_themes24.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_themes25.Flex, {
         direction: "column-reverse",
         children: messageGroup.messages.map(function(message) {
-            return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Message, {
+            return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Message, {
                 message: message
             }, message.id);
         })
     });
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var MessageGroup = function(param) {
     var messageGroup = param.messageGroup;
     var assistantNameContext = (0, import_react19.useContext)(AssistantNameContext);
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(MessageGroupBase, {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(MessageGroupBase, {
         children: [
-            messageGroup.role === "user" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_themes25.Avatar, {
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_icons4.PersonIcon, {}),
+            messageGroup.role === "user" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_themes26.Avatar, {
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_icons4.PersonIcon, {}),
                 size: "1"
-            }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AssistantAvatar, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_themes25.Box, {
+            }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AssistantAvatar, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_themes26.Box, {
                 flexGrow: "1",
                 children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Name, {
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Name, {
                         children: messageGroup.role === "user" ? "You" : assistantNameContext
                     }),
-                    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Content2, {
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Content2, {
                         messageGroup: messageGroup
                     })
                 ]
@@ -1304,7 +1319,7 @@ var MessageGroup = function(param) {
     });
 };
 // src/components/threads/Thread/Messages/Content/index.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var Content3 = function() {
     var _useMessages = useMessages(), messages2 = _useMessages.messages, isLoading = _useMessages.isLoading, isLoadingError = _useMessages.isLoadingError;
     var addToast = useToasts().addToast;
@@ -1323,23 +1338,23 @@ var Content3 = function() {
         addToast
     ]);
     if (isLoading || isLoadingError) {
-        return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MessagesSkeleton, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MessagesSkeleton, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, {
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, {
         children: messageGroups2.map(function(messageGroup) {
-            return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MessageGroup, {
+            return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MessageGroup, {
                 messageGroup: messageGroup
             }, messageGroup.id);
         })
     });
 };
 // src/components/threads/Thread/Messages/Progress/index.tsx
-var import_themes28 = require("@radix-ui/themes");
+var import_themes29 = require("@radix-ui/themes");
 // src/components/skeletons/StartingContentSkeleton/index.tsx
-var import_themes26 = require("@radix-ui/themes");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_themes27 = require("@radix-ui/themes");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var StartingContentSkeleton = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_themes26.Skeleton, {
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_themes27.Skeleton, {
         loading: true,
         mt: "1",
         height: "var(--space-4)",
@@ -1352,21 +1367,21 @@ var StartingContentSkeleton = function() {
 };
 // src/components/skeletons/StartingSkeleton/index.tsx
 var import_react21 = require("react");
-var import_themes27 = require("@radix-ui/themes");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_themes28 = require("@radix-ui/themes");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var StartingSkeleton = function(param) {
     var children = param.children;
     var assistantNameContext = (0, import_react21.useContext)(AssistantNameContext);
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(MessageGroupBase, {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(MessageGroupBase, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AssistantAvatar, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_themes27.Box, {
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AssistantAvatar, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_themes28.Box, {
                 children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Name, {
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Name, {
                         children: assistantNameContext
                     }),
                     children,
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StartingContentSkeleton, {})
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StartingContentSkeleton, {})
                 ]
             })
         ]
@@ -1537,26 +1552,26 @@ var useIsRunActive = function() {
     ]);
 };
 // src/components/threads/Thread/Messages/Progress/index.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var Progress = function() {
     var _useIsRunActive = useIsRunActive(), isRunActive2 = _useIsRunActive.isRunActive;
     var latestMessage = useLatestMessage().latestMessage;
     if (!latestMessage) return null;
     if (!isRunActive2) return null;
     if (latestMessage.role === "user") {
-        return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StartingSkeleton, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StartingSkeleton, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(MessageGroupBase, {
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(MessageGroupBase, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_themes28.Box, {
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_themes29.Box, {
                 pl: "5"
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StartingContentSkeleton, {})
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StartingContentSkeleton, {})
         ]
     });
 };
 // src/components/threads/Thread/Messages/Root/index.tsx
-var import_themes29 = require("@radix-ui/themes");
+var import_themes30 = require("@radix-ui/themes");
 // src/hooks/misc/useInfiniteScroll/index.tsx
 var import_react29 = require("react");
 var import_react_intersection_observer = require("react-intersection-observer");
@@ -2156,7 +2171,7 @@ var useLifecycle = function() {
     return null;
 };
 // src/components/threads/Thread/Messages/Root/index.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var Root = 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;
@@ -2166,7 +2181,7 @@ var Root = function(param) {
         hasNextPage: hasNextPage,
         fetchNextPage: fetchNextPage
     }), containerRef = _useInfiniteScroll.containerRef, loaderRef = _useInfiniteScroll.loaderRef;
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_themes29.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_themes30.Flex, {
         ref: containerRef,
         direction: "column-reverse",
         flexGrow: "1",
@@ -2175,10 +2190,10 @@ var Root = function(param) {
         }),
         children: [
             children,
-            hasNextPage && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_themes29.Flex, {
+            hasNextPage && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_themes30.Flex, {
                 ref: loaderRef
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_themes29.Flex, {
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_themes30.Flex, {
                 flexShrink: "0",
                 flexGrow: "1"
             })
@@ -2186,30 +2201,30 @@ var Root = function(param) {
     });
 };
 // src/components/threads/Thread/Messages/NextPageSkeleton.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var NextPageSkeleton = function() {
     var hasNextPage = useMessages().hasNextPage;
     if (!hasNextPage) {
         return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MessagesSkeleton, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MessagesSkeleton, {});
 };
 // src/components/threads/Thread/Messages/index.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var Messages = function(param) {
     var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Root, {
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Root, {
         style: style,
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_themes30.Flex, {
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_themes31.Flex, {
                 flexShrink: "0",
                 height: "var(--space-3)"
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Progress, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Progress, {}),
             children,
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Content3, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(NextPageSkeleton, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_themes30.Flex, {
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Content3, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(NextPageSkeleton, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_themes31.Flex, {
                 flexShrink: "0",
                 flexGrow: "1"
             })
@@ -2220,10 +2235,10 @@ Messages.Root = Root;
 Messages.Message = Message;
 Messages.NextPageSkeleton = NextPageSkeleton;
 // src/components/threads/Thread/MessageForm/index.tsx
-var import_themes33 = require("@radix-ui/themes");
+var import_themes34 = require("@radix-ui/themes");
 // src/components/threads/Thread/MessageForm/Submit/index.tsx
 var import_react_icons5 = require("@radix-ui/react-icons");
-var import_themes31 = require("@radix-ui/themes");
+var import_themes32 = require("@radix-ui/themes");
 // src/hooks/messages/useMessageFormContext/index.ts
 var import_react34 = require("react");
 // src/contexts/messages/MessageFormContext/index.ts
@@ -2237,16 +2252,16 @@ var useMessageFormContext = function() {
     return (0, import_react34.useContext)(MessageFormContext);
 };
 // src/components/threads/Thread/MessageForm/Submit/index.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var Submit = function() {
     var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading;
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_themes31.Button, {
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_themes32.Button, {
         type: "submit",
         radius: "large",
         disabled: isDisabled || isLoading,
-        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_themes31.Spinner, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_themes32.Spinner, {
             loading: isLoading,
-            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_icons5.ArrowUpIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_icons5.ArrowUpIcon, {})
         })
     });
 };
@@ -2436,7 +2451,7 @@ var formOptions = {
     resolver: (0, import_zod2.zodResolver)(schema)
 };
 // src/components/threads/Thread/MessageForm/Root/index.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var Root2 = function(param) {
     var children = param.children;
     var formProps = (0, import_react_hook_form.useForm)(formOptions);
@@ -2490,13 +2505,13 @@ var Root2 = function(param) {
         latestMessage,
         isLoading
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(MessageFormContext.Provider, {
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(MessageFormContext.Provider, {
         value: {
             isDisabled: isDisabled,
             isLoading: isLoading
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_hook_form.FormProvider, _object_spread_props(_object_spread({}, formProps), {
-            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("form", {
+        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_hook_form.FormProvider, _object_spread_props(_object_spread({}, formProps), {
+            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("form", {
                 onSubmit: handleSubmit(onSubmit),
                 children: children
             })
@@ -2509,15 +2524,15 @@ var import_react37 = require("react");
 // src/components/textareas/TextareaBase/index.tsx
 var import_react36 = require("react");
 var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"), 1);
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var UPSCALE_RATIO = 16 / 14;
 var TextareaBase = (0, import_react36.forwardRef)(function TextareaBase2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, {
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("style", {
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("style", {
                 children: ".superinterface-textarea { min-height: inherit; height: 30px; }\n.superinterface-textarea::placeholder { color: var(--gray-a10); }"
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_textarea_autosize.default, _object_spread({
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_textarea_autosize.default, _object_spread({
                 ref: ref,
                 className: "rt-reset superinterface-textarea",
                 style: {
@@ -2541,21 +2556,21 @@ var TextareaBase = (0, import_react36.forwardRef)(function TextareaBase2(props,
 });
 // src/components/threads/Thread/MessageForm/Field/index.tsx
 var import_react_hook_form2 = require("react-hook-form");
-var import_themes32 = require("@radix-ui/themes");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_themes33 = require("@radix-ui/themes");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var Root3 = function(param) {
     var children = param.children;
     var _ref = (0, import_react_hook_form2.useFormContext)(), errors = _ref.formState.errors;
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_themes32.Container, {
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_themes33.Container, {
         size: "2",
         flexGrow: "0",
-        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_themes32.Flex, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_themes33.Flex, {
             direction: "column",
             flexShrink: "0",
-            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_themes32.Flex, {
+            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_themes33.Flex, {
                 direction: "column",
                 flexShrink: "0",
-                children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_themes32.Flex, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_themes33.Flex, {
                     style: _object_spread({
                         borderRadius: "var(--radius-2)",
                         borderWidth: "1px",
@@ -2595,7 +2610,7 @@ var Control = function() {
         isDisabledPrevious,
         textareaProps
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TextareaBase, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TextareaBase, _object_spread_props(_object_spread({
         minRows: 1,
         placeholder: "Message ".concat(assistantNameContext, "..."),
         disabled: isDisabled,
@@ -2619,26 +2634,26 @@ var Field = {
     Control: Control
 };
 // src/components/threads/Thread/MessageForm/index.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var MessageForm = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Root2, {
-        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Field.Root, {
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Root2, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Field.Root, {
             children: [
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_themes33.Text, {
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_themes34.Text, {
                     size: "2",
                     style: {
                         flexGrow: 1
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_themes33.Flex, {
+                    children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_themes34.Flex, {
                         flexGrow: "1",
                         direction: "column",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field.Control, {})
+                        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Field.Control, {})
                     })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_themes33.Flex, {
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_themes34.Flex, {
                     flexShrink: "0",
                     align: "end",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Submit, {})
+                    children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Submit, {})
                 })
             ]
         })
@@ -2648,14 +2663,14 @@ MessageForm.Root = Root2;
 MessageForm.Field = Field;
 MessageForm.Submit = Submit;
 // src/components/threads/Thread/Root/index.tsx
-var import_themes34 = require("@radix-ui/themes");
+var import_themes35 = require("@radix-ui/themes");
 // src/components/runs/PollingProvider/index.tsx
 var import_react38 = require("react");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var PollingProvider = function(param) {
     var children = param.children;
     var _ref = _sliced_to_array((0, import_react38.useState)(false), 2), isPollRefetching = _ref[0], setIsPollRefetching = _ref[1];
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PollingContext.Provider, {
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PollingContext.Provider, {
         value: {
             isPollRefetching: isPollRefetching,
             setIsPollRefetching: setIsPollRefetching
@@ -2664,20 +2679,20 @@ var PollingProvider = function(param) {
     });
 };
 // src/components/threads/Thread/Provider/index.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var Provider2 = function(args) {
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PollingProvider, {
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SuperinterfaceProvider, _object_spread({}, args))
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PollingProvider, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SuperinterfaceProvider, _object_spread({}, args))
     });
 };
 // src/components/threads/Thread/Root/index.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var Root4 = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Provider2, _object_spread_props(_object_spread({}, rest), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_themes34.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Provider2, _object_spread_props(_object_spread({}, rest), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_themes35.Flex, {
             direction: "column",
             flexGrow: "1",
             children: children
@@ -2685,12 +2700,12 @@ var Root4 = function(_param) {
     }));
 };
 // src/components/threads/Thread/index.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var Thread = function(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Root4, _object_spread_props(_object_spread({}, props), {
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Root4, _object_spread_props(_object_spread({}, props), {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Messages, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(MessageForm, {})
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Messages, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(MessageForm, {})
         ]
     }));
 };
@@ -2702,8 +2717,6 @@ var import_react39 = require("react");
 var useMessageContext = function() {
     return (0, import_react39.useContext)(MessageContext);
 };
-// src/components/threads/ThreadDialog/Root/index.tsx
-var import_themes36 = require("@radix-ui/themes");
 // src/components/threads/ThreadDialog/Provider/index.tsx
 var import_react42 = require("react");
 // src/contexts/threads/ThreadDialogContext/index.ts
@@ -2718,12 +2731,12 @@ var useThreadDialogContext = function() {
     return (0, import_react41.useContext)(ThreadDialogContext);
 };
 // src/components/threads/ThreadDialog/Provider/index.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var Provider3 = function(param) {
     var children = param.children;
     var threadDialogContext = useThreadDialogContext();
     var _ref = _sliced_to_array((0, import_react42.useState)(threadDialogContext.isOpen), 2), isOpen = _ref[0], setIsOpen = _ref[1];
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ThreadDialogContext.Provider, {
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ThreadDialogContext.Provider, {
         value: {
             isOpen: isOpen,
             setIsOpen: setIsOpen
@@ -2736,27 +2749,27 @@ var import_react43 = require("react");
 var Toast2 = __toESM(require("@radix-ui/react-toast"), 1);
 // src/components/toasts/ToastsProvider/CustomToast.tsx
 var Toast = __toESM(require("@radix-ui/react-toast"), 1);
-var import_themes35 = require("@radix-ui/themes");
+var import_themes36 = require("@radix-ui/themes");
 var import_react_icons6 = require("@radix-ui/react-icons");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var CustomToast = function(param) {
     var toast = param.toast;
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Toast.Root, {
-        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_themes35.Card, {
-            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Toast.Title, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_themes35.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Toast.Root, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes36.Card, {
+            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Toast.Title, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_themes36.Flex, {
                     children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_themes35.Flex, {
+                        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes36.Flex, {
                             pr: "2",
                             height: "14px",
                             align: "center",
-                            children: toast.type === "success" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react_icons6.CheckCircledIcon, {
+                            children: toast.type === "success" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_icons6.CheckCircledIcon, {
                                 color: "var(--mint-9)"
-                            }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react_icons6.CrossCircledIcon, {
+                            }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_icons6.CrossCircledIcon, {
                                 color: "var(--red-9)"
                             })
                         }),
-                        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_themes35.Text, {
+                        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes36.Text, {
                             weight: "medium",
                             size: "1",
                             children: toast.message
@@ -2768,7 +2781,7 @@ var CustomToast = function(param) {
     });
 };
 // src/components/toasts/ToastsProvider/index.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var ToastsProvider = function(param) {
     var children = param.children;
     var _ref = _sliced_to_array((0, import_react43.useState)([]), 2), toasts = _ref[0], setToasts = _ref[1];
@@ -2779,20 +2792,20 @@ var ToastsProvider = function(param) {
             ]);
         });
     }, []);
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ToastsContext.Provider, {
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ToastsContext.Provider, {
         value: {
             toasts: toasts,
             addToast: addToast
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Toast2.Provider, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Toast2.Provider, {
             children: [
                 children,
                 Array.from(toasts).map(function(toast, index) {
-                    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CustomToast, {
+                    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(CustomToast, {
                         toast: toast
                     }, index);
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Toast2.Viewport, {
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Toast2.Viewport, {
                     style: {
                         position: "absolute",
                         bottom: 0,
@@ -2814,34 +2827,26 @@ var ToastsProvider = function(param) {
     });
 };
 // src/components/threads/ThreadDialog/Root/index.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var Root6 = function(param) {
     var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ToastsProvider, {
-        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Provider3, {
-            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_themes36.Flex, {
-                direction: "column",
-                justify: "end",
-                align: "end",
-                position: "fixed",
-                style: _object_spread({
-                    bottom: "24px",
-                    right: "24px",
-                    top: "24px",
-                    zIndex: 9999999999
-                }, style),
-                children: children
-            })
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ToastsProvider, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Provider3, {
+            children: children
         })
     });
 };
 // src/components/threads/ThreadDialog/Trigger/index.tsx
 var import_themes37 = require("@radix-ui/themes");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var Trigger = function(param) {
-    var children = param.children;
-    var setIsOpen = useThreadDialogContext().setIsOpen;
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_themes37.Flex, {
+    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__ */ (0, import_jsx_runtime52.jsx)(import_themes37.Flex, {
+        display: {
+            initial: isOpen ? "none" : "flex",
+            sm: "flex"
+        },
         onClick: function() {
             return setIsOpen(function(prev) {
                 return !prev;
@@ -2849,66 +2854,144 @@ var Trigger = function(param) {
         },
         direction: "column",
         flexShrink: "0",
+        justify: "end",
+        align: "end",
+        position: "fixed",
+        bottom: "24px",
+        right: "24px",
+        style: _object_spread({
+            zIndex: 9999999999
+        }, style),
         children: children
     });
 };
 // src/components/threads/ThreadDialog/Button/index.tsx
 var import_themes38 = require("@radix-ui/themes");
 var import_react_icons7 = require("@radix-ui/react-icons");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var Button3 = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_themes38.IconButton, {
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_themes38.IconButton, {
         size: "4",
         radius: "full",
-        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_icons7.ChatBubbleIcon, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_icons7.ChatBubbleIcon, {})
     });
 };
 // src/components/threads/ThreadDialog/Content/index.tsx
+var import_themes40 = require("@radix-ui/themes");
+// src/components/threads/ThreadDialog/Close/index.tsx
+var import_react_icons8 = require("@radix-ui/react-icons");
 var import_themes39 = require("@radix-ui/themes");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var Close = function() {
+    var _useThreadDialogContext = useThreadDialogContext(), setIsOpen = _useThreadDialogContext.setIsOpen, isOpen = _useThreadDialogContext.isOpen;
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_themes39.Flex, {
+        display: {
+            initial: isOpen ? "flex" : "none",
+            sm: "none"
+        },
+        onClick: function() {
+            return setIsOpen(function(prev) {
+                return !prev;
+            });
+        },
+        direction: "column",
+        flexShrink: "0",
+        justify: "end",
+        align: "end",
+        position: "absolute",
+        top: "24px",
+        right: "24px",
+        style: {
+            zIndex: 9999999999
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_themes39.IconButton, {
+            size: "2",
+            radius: "full",
+            variant: "soft",
+            children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_icons8.Cross1Icon, {})
+        })
+    });
+};
+// src/components/threads/ThreadDialog/Content/index.tsx
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var Root7 = function(param) {
-    var children = param.children;
+    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__ */ (0, import_jsx_runtime53.jsx)(import_themes39.Card, {
-        mb: "3",
-        style: {
-            display: "flex",
-            flexGrow: 1,
-            width: "100vw",
-            maxWidth: "400px",
-            maxHeight: "720px"
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_themes40.Flex, {
+        direction: "column",
+        justify: "end",
+        position: "fixed",
+        bottom: {
+            initial: "0",
+            sm: "72px"
+        },
+        right: {
+            initial: "0",
+            sm: "24px"
+        },
+        top: {
+            initial: "0",
+            sm: "24px"
+        },
+        maxHeight: {
+            initial: void 0,
+            sm: "720px"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_themes39.Inset, {
-            clip: "padding-box",
-            side: "all",
-            pb: "current",
+        maxWidth: {
+            initial: void 0,
+            sm: "400px"
+        },
+        width: "100%",
+        style: _object_spread({
+            zIndex: 9999999999
+        }, style),
+        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_themes40.Card, {
+            mb: {
+                initial: void 0,
+                sm: "3"
+            },
             style: {
+                position: "relative",
                 display: "flex",
                 flexGrow: 1
             },
-            children: children
+            children: [
+                /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_themes40.Inset, {
+                    clip: "padding-box",
+                    side: "all",
+                    pb: "current",
+                    style: {
+                        display: "flex",
+                        flexGrow: 1
+                    },
+                    children: children
+                }),
+                /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Close, {})
+            ]
         })
     });
 };
-var Content4 = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Root7, {
-        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Thread.Root, {
+var Content4 = function(param) {
+    var _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Root7, {
+        style: style,
+        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Thread.Root, {
             children: [
-                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Thread.Messages, {
+                /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Thread.Messages, {
                     style: {
                         paddingTop: "var(--space-5)",
                         paddingRight: "var(--space-5)",
                         paddingLeft: "var(--space-5)"
                     }
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_themes39.Flex, {
+                /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_themes40.Flex, {
                     direction: "column",
                     pl: "5",
                     pr: "5",
                     pb: "3",
                     flexShrink: "0",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Thread.MessageForm, {})
+                    children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Thread.MessageForm, {})
                 })
             ]
         })
@@ -2916,13 +2999,13 @@ var Content4 = function() {
 };
 Content4.Root = Root7;
 // src/components/threads/ThreadDialog/index.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var ThreadDialog = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Root6, {
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Root6, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Content4, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Trigger, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Button3, {})
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Content4, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Trigger, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Button3, {})
             })
         ]
     });
@@ -2933,7 +3016,7 @@ ThreadDialog.Button = Button3;
 ThreadDialog.Content = Content4;
 // src/components/threads/AudioThread/Root/index.tsx
 var import_runtime = require("regenerator-runtime/runtime");
-var import_themes40 = require("@radix-ui/themes");
+var import_themes41 = require("@radix-ui/themes");
 // src/contexts/threads/AudioThreadContext/index.ts
 var import_react44 = require("react");
 var AudioThreadContext = (0, import_react44.createContext)({
@@ -3205,7 +3288,7 @@ var isHtmlAudioSupported = !unsupportedNames.includes(((_this = (0, import_detec
 // src/hooks/audioThreads/useMessageAudio/index.ts
 var useMessageAudio = function(param) {
     var onEnd = param.onEnd;
-    var _ref = _sliced_to_array((0, import_react47.useState)([]), 2), playedMessageIds = _ref[0], setPlayedMessageIds = _ref[1];
+    var _ref = _sliced_to_array((0, import_react47.useState)([]), 2), playedMessages = _ref[0], setPlayedMessages = _ref[1];
     var audioPlayer = (0, import_react_use_audio_player2.useAudioPlayer)();
     var superinterfaceContext = useSuperinterfaceContext();
     var latestMessageProps = useLatestMessage();
@@ -3213,14 +3296,19 @@ var useMessageAudio = function(param) {
         if (audioPlayer.playing) return;
         if (!latestMessageProps.latestMessage) return;
         if (latestMessageProps.latestMessage.role !== "assistant") return;
-        if (playedMessageIds.includes(latestMessageProps.latestMessage.id)) return;
+        if (playedMessages.find(function(pm) {
+            return pm.id === latestMessageProps.latestMessage.id || isOptimistic({
+                id: pm.id
+            }) && pm.content === latestMessageProps.latestMessage.content;
+        })) return;
+        if (playedMessages.includes(latestMessageProps.latestMessage)) return;
         var input2 = input({
             message: latestMessageProps.latestMessage
         });
         if (!input2) return;
-        setPlayedMessageIds(function(prev) {
+        setPlayedMessages(function(prev) {
             return _to_consumable_array(prev).concat([
-                latestMessageProps.latestMessage.id
+                latestMessageProps.latestMessage
             ]);
         });
         audioPlayer.load("".concat(superinterfaceContext.baseUrl, "/tts?input=").concat(input2), {
@@ -3240,7 +3328,7 @@ var useMessageAudio = function(param) {
         superinterfaceContext,
         latestMessageProps,
         audioPlayer,
-        playedMessageIds,
+        playedMessages,
         onEnd
     ]);
     var isInited = (0, import_react47.useRef)(false);
@@ -3280,7 +3368,7 @@ var useMessageAudio = function(param) {
     });
 };
 // src/components/threads/AudioThread/Root/index.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var Root8 = function(param) {
     var children = param.children;
     useLifecycle();
@@ -3301,6 +3389,7 @@ var Root8 = function(param) {
                 return _ts_generator(this, function(_state) {
                     switch(_state.label){
                         case 0:
+                            console.log("creaing", chunks);
                             blob = new Blob(chunks, {
                                 type: chunks[0].type
                             });
@@ -3340,62 +3429,36 @@ var Root8 = function(param) {
         createMessageProps: createMessageProps,
         messageAudioProps: messageAudioProps
     }).status;
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(AudioThreadContext.Provider, {
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(AudioThreadContext.Provider, {
         value: {
             status: status,
             recorderProps: recorderProps,
             messageAudioProps: messageAudioProps
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_themes40.Flex, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_themes41.Flex, {
             direction: "column",
             flexGrow: "1",
-            p: "5",
+            p: "9",
             children: children
         })
     });
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
-var import_themes41 = require("@radix-ui/themes");
+var import_themes43 = require("@radix-ui/themes");
 // src/hooks/threads/useAudioThreadContext/index.ts
 var import_react48 = require("react");
 var useAudioThreadContext = function() {
     return (0, import_react48.useContext)(AudioThreadContext);
 };
-// src/components/threads/AudioThread/Visualization/index.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
-var Visualization = function() {
-    var audioThreadContext = useAudioThreadContext();
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_themes41.Flex, {
-        direction: "column",
-        align: "center",
-        justify: "center",
-        mb: "3",
-        flexGrow: "1",
-        children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_themes41.Flex, {
-            align: "center",
-            justify: "center",
-            height: "200px",
-            width: "200px",
-            style: {
-                backgroundColor: "var(--".concat(audioThreadContext.status === "playing" ? "mint" : "gray", "-4)"),
-                borderRadius: "9999px"
-            }
-        })
-    });
-};
-// src/components/threads/AudioThread/Form/index.tsx
-var import_react_icons9 = require("@radix-ui/react-icons");
-var import_themes44 = require("@radix-ui/themes");
-// src/components/threads/AudioThread/Form/Visualizer/index.tsx
+// src/components/threads/AudioThread/BarsVisualizer/index.tsx
 var import_lodash7 = __toESM(require("lodash"), 1);
 var import_themes42 = require("@radix-ui/themes");
 var import_react49 = require("react");
 var import_radash10 = require("radash");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var barCount = 4;
-var Visualizer = function() {
-    var audioThreadContext = useAudioThreadContext();
-    var visualizationAnalyser = audioThreadContext.recorderProps.visualizationAnalyser;
+var BarsVisualizer = function(param) {
+    var visualizationAnalyser = param.visualizationAnalyser, color = param.color, height = param.height, barWidth = param.barWidth;
     var _ref = _sliced_to_array((0, import_react49.useState)(function() {
         return new AudioContext().createAnalyser();
     }), 1), emptyVisualizer = _ref[0];
@@ -3423,7 +3486,7 @@ var Visualizer = function() {
         visualizationAnalyser,
         emptyVisualizer
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_themes42.Grid, {
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes42.Grid, {
         columns: "".concat(barCount),
         gap: "1",
         width: "auto",
@@ -3432,18 +3495,18 @@ var Visualizer = function() {
             gridTemplateColumns: "repeat(4, minmax(0, 1fr))"
         },
         children: barHeights.map(function(barHeight, index) {
-            return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_themes42.Flex, {
+            return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes42.Flex, {
                 direction: "column",
                 align: "center",
                 justify: "center",
-                height: "20px",
-                children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_themes42.Flex, {
+                height: height,
+                children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes42.Flex, {
                     minHeight: "50%",
                     maxHeight: "100%",
                     height: "".concat(barHeight + 20, "%"),
-                    width: "12px",
+                    width: barWidth,
                     style: {
-                        backgroundColor: "var(--".concat(audioThreadContext.status === "recording" ? "mint" : "gray", "-11)"),
+                        backgroundColor: "var(--".concat(color, "-11)"),
                         borderRadius: "var(--radius-6)"
                     }
                 })
@@ -3451,32 +3514,63 @@ var Visualizer = function() {
         })
     });
 };
+// src/components/threads/AudioThread/Visualization/index.tsx
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var Visualization = function() {
+    var audioThreadContext = useAudioThreadContext();
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_themes43.Flex, {
+        direction: "column",
+        align: "center",
+        justify: "center",
+        mb: "3",
+        flexGrow: "1",
+        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_themes43.Flex, {
+            align: "center",
+            justify: "center",
+            height: "200px",
+            width: "200px",
+            style: {
+                backgroundColor: "var(--".concat(audioThreadContext.status === "playing" ? "mint" : "gray", "-4)"),
+                borderRadius: "9999px"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(BarsVisualizer, {
+                visualizationAnalyser: audioThreadContext.messageAudioProps.visualizationAnalyser,
+                color: audioThreadContext.status === "playing" ? "mint" : "gray",
+                height: "40px",
+                barWidth: "24px"
+            })
+        })
+    });
+};
+// src/components/threads/AudioThread/Form/index.tsx
+var import_react_icons10 = require("@radix-ui/react-icons");
+var import_themes45 = require("@radix-ui/themes");
 // src/components/threads/AudioThread/Form/ActionButton/index.tsx
-var import_themes43 = require("@radix-ui/themes");
-var import_react_icons8 = require("@radix-ui/react-icons");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_themes44 = require("@radix-ui/themes");
+var import_react_icons9 = require("@radix-ui/react-icons");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var ActionButton = function() {
     var audioThreadContext = useAudioThreadContext();
     if (audioThreadContext.status === "recording") {
-        return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_themes43.Flex, {
+        return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_themes44.Flex, {
             align: "center",
             children: [
-                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes43.Flex, {
+                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_themes44.Flex, {
                     mr: "3",
                     ml: "-7",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes43.IconButton, {
+                    children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_themes44.IconButton, {
                         onClick: audioThreadContext.recorderProps.pause,
                         color: "gray",
                         radius: "full",
                         size: "1",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_icons8.PauseIcon, {})
+                        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_icons9.PauseIcon, {})
                     })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes43.Tooltip, {
+                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_themes44.Tooltip, {
                     open: true,
                     content: "Send your message",
                     side: "bottom",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes43.IconButton, {
+                    children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_themes44.IconButton, {
                         onClick: audioThreadContext.recorderProps.stop,
                         color: "gray",
                         highContrast: true,
@@ -3485,14 +3579,14 @@ var ActionButton = function() {
                         style: {
                             border: "2px solid var(--gray-8)"
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_icons8.ArrowUpIcon, {})
+                        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_icons9.ArrowUpIcon, {})
                     })
                 })
             ]
         });
     }
     if (audioThreadContext.status === "recorderPaused") {
-        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes43.IconButton, {
+        return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_themes44.IconButton, {
             onClick: audioThreadContext.recorderProps.resume,
             color: "red",
             radius: "full",
@@ -3500,11 +3594,11 @@ var ActionButton = function() {
             style: {
                 border: "2px solid var(--gray-8)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_icons8.ResumeIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_icons9.ResumeIcon, {})
         });
     }
     if (audioThreadContext.status === "idle") {
-        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes43.IconButton, {
+        return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_themes44.IconButton, {
             onClick: function() {
                 return audioThreadContext.recorderProps.start();
             },
@@ -3517,7 +3611,7 @@ var ActionButton = function() {
         });
     }
     if (audioThreadContext.status === "playing") {
-        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes43.IconButton, {
+        return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_themes44.IconButton, {
             onClick: function() {
                 return audioThreadContext.messageAudioProps.pause();
             },
@@ -3527,11 +3621,11 @@ var ActionButton = function() {
             style: {
                 border: "2px solid var(--gray-8)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_icons8.PauseIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_icons9.PauseIcon, {})
         });
     }
     if (audioThreadContext.status === "playerPaused") {
-        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes43.IconButton, {
+        return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_themes44.IconButton, {
             onClick: function() {
                 return audioThreadContext.messageAudioProps.play();
             },
@@ -3541,10 +3635,10 @@ var ActionButton = function() {
             style: {
                 border: "2px solid var(--gray-8)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_icons8.ResumeIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_icons9.ResumeIcon, {})
         });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes43.IconButton, {
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_themes44.IconButton, {
         size: "4",
         color: "red",
         radius: "full",
@@ -3555,49 +3649,54 @@ var ActionButton = function() {
     });
 };
 // src/components/threads/AudioThread/Form/index.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var Form = function() {
     var audioThreadContext = useAudioThreadContext();
-    return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_themes44.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_themes45.Flex, {
         direction: "column",
         align: "center",
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_themes44.Flex, {
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_themes45.Flex, {
                 pb: "3",
                 align: "center",
                 children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_themes44.Flex, {
+                    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_themes45.Flex, {
                         ml: "-5",
                         mr: "2",
                         align: "center",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_icons9.SpeakerModerateIcon, {
+                        children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_icons10.SpeakerModerateIcon, {
                             style: {
                                 color: "var(--".concat(audioThreadContext.status === "recording" ? "mint" : "gray", "-12)")
                             }
                         })
                     }),
-                    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_themes44.Flex, {
+                    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_themes45.Flex, {
                         px: "2",
                         py: "1",
                         style: {
                             backgroundColor: "var(--".concat(audioThreadContext.status === "recording" ? "mint" : "gray", "-4)"),
                             borderRadius: "var(--radius-6)"
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Visualizer, {})
+                        children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(BarsVisualizer, {
+                            visualizationAnalyser: audioThreadContext.recorderProps.visualizationAnalyser,
+                            color: audioThreadContext.status === "recording" ? "mint" : "gray",
+                            height: "20px",
+                            barWidth: "12px"
+                        })
                     })
                 ]
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ActionButton, {})
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ActionButton, {})
         ]
     });
 };
 // src/components/threads/AudioThread/index.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var AudioThread = function(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Root8, _object_spread_props(_object_spread({}, props), {
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Root8, _object_spread_props(_object_spread({}, props), {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Visualization, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Form, {})
+            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Visualization, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Form, {})
         ]
     }));
 };
@@ -3605,15 +3704,15 @@ AudioThread.Root = Root8;
 AudioThread.Visualization = Visualization;
 AudioThread.Form = Form;
 // src/components/threads/AudioThreadDialog/index.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var AudioThreadDialog = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Root6, {
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Root6, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Content4.Root, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(AudioThread, {})
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Content4.Root, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(AudioThread, {})
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Trigger, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Button3, {})
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Trigger, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Button3, {})
             })
         ]
     });
@@ -3628,15 +3727,15 @@ var import_react51 = require("react");
 var import_react50 = require("react");
 var import_radash11 = require("radash");
 var import_react_children_utilities = require("react-children-utilities");
-var import_themes46 = require("@radix-ui/themes");
+var import_themes47 = require("@radix-ui/themes");
 // src/components/suggestions/Suggestions/Item.tsx
-var import_react_icons10 = require("@radix-ui/react-icons");
-var import_themes45 = require("@radix-ui/themes");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_react_icons11 = require("@radix-ui/react-icons");
+var import_themes46 = require("@radix-ui/themes");
+var import_jsx_runtime64 = require("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__ */ (0, import_jsx_runtime62.jsx)(Content5, {
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Content5, {
         onClick: function() {
             createMessage({
                 // @ts-ignore-next-line
@@ -3650,30 +3749,37 @@ var Item = function(param) {
 };
 var Content5 = function(param) {
     var onClick = param.onClick, isDisabled = param.isDisabled, isPending = param.isPending, children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_themes45.Button, {
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_themes46.Button, {
         variant: "soft",
         onClick: onClick,
         disabled: isDisabled,
+        style: {
+            minHeight: "var(--base-button-height)",
+            height: "inherit",
+            flexShrink: 1
+        },
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_themes45.Text, {
+            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_themes46.Text, {
                 size: "1",
                 weight: "regular",
                 children: children
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_themes45.Spinner, {
+            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_themes46.Spinner, {
                 loading: isPending,
-                children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react_icons10.ArrowUpIcon, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react_icons11.ArrowUpIcon, {
+                    style: {
+                        flexShrink: 0
+                    }
+                })
             })
         ]
     });
 };
 Item.Content = Content5;
 // src/components/suggestions/Suggestions/Content.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var Content6 = function(param) {
     var children = param.children;
-    var messageContext = useMessageContext();
-    var latestMessageProps = useLatestMessage();
     var isRunActiveProps = useIsRunActive();
     var suggestions = (0, import_react50.useMemo)(function() {
         return (0, import_react_children_utilities.onlyText)(children).split(/\r?\n/).filter(function(c) {
@@ -3685,20 +3791,17 @@ var Content6 = function(param) {
         children
     ]);
     var isDisabled = (0, import_react50.useMemo)(function() {
-        var _messageContext_message;
-        return ((_messageContext_message = messageContext.message) === null || _messageContext_message === void 0 ? void 0 : _messageContext_message.id) !== latestMessageProps.latestMessage.id || isRunActiveProps.isRunActive;
+        return isRunActiveProps.isRunActive;
     }, [
-        messageContext,
-        latestMessageProps,
         isRunActiveProps
     ]);
     if ((0, import_radash11.isEmpty)(suggestions)) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_themes46.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_themes47.Flex, {
         gap: "2",
         py: "2",
         wrap: "wrap",
         children: suggestions.map(function(suggestion) {
-            return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Item, {
+            return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Item, {
                 suggestion: suggestion,
                 isDisabled: isDisabled
             }, suggestion);
@@ -3706,7 +3809,7 @@ var Content6 = function(param) {
     });
 };
 // src/components/suggestions/Suggestions/index.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var Suggestions = function(param) {
     var children = param.children;
     var latestMessageProps = useLatestMessage();
@@ -3719,14 +3822,14 @@ var Suggestions = function(param) {
     ]);
     if (latestMessageProps.isLoading) return null;
     if (isDisabled) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Content6, {
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Content6, {
         children: children
     });
 };
 Suggestions.Item = Item;
 // src/components/markdown/MarkdownProvider/index.tsx
 var import_react52 = require("react");
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var MarkdownProvider = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
@@ -3738,7 +3841,7 @@ var MarkdownProvider = function(_param) {
         rest,
         prevMarkdownContext
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(MarkdownContext.Provider, {
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(MarkdownContext.Provider, {
         value: value,
         children: children
     });