@superinterface/react 2.0.11 → 2.1.1

package/dist/index.js

@@ -619,7 +619,7 @@ var useToasts = function() {
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
 import { useContext as useContext6 } from "react";
-import { Box as Box9, Avatar as Avatar3 } from "@radix-ui/themes";
+import { Box as Box10, Avatar as Avatar3 } from "@radix-ui/themes";
 import { PersonIcon } from "@radix-ui/react-icons";
 // src/components/messageGroups/MessageGroupBase/AssistantAvatar.tsx
 import { useContext as useContext3 } from "react";
@@ -655,7 +655,7 @@ var AssistantNameContext = createContext4("Assistant");
 import { Flex as Flex10 } from "@radix-ui/themes";
 // src/components/threads/Thread/Message/index.tsx
 import { useMemo as useMemo4 } from "react";
-import { Box as Box8 } from "@radix-ui/themes";
+import { Box as Box9 } from "@radix-ui/themes";
 // src/components/runSteps/RunSteps/index.tsx
 import { Flex as Flex9 } from "@radix-ui/themes";
 // src/components/runSteps/RunStep/ToolCalls/index.tsx
@@ -1039,6 +1039,20 @@ var Code2 = function(param) {
         children: children
     });
 };
+// src/contexts/markdown/MarkdownContext/lib/components/Img.tsx
+import { Box as Box8 } from "@radix-ui/themes";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var Img = function(props) {
+    return /* @__PURE__ */ jsx28(Box8, {
+        pb: "3",
+        children: /* @__PURE__ */ jsx28("img", _object_spread_props(_object_spread({}, props), {
+            style: {
+                maxWidth: "100%",
+                height: "auto"
+            }
+        }))
+    });
+};
 // src/contexts/markdown/MarkdownContext/lib/components/index.tsx
 var components = {
     p: Paragraph,
@@ -1048,7 +1062,8 @@ var components = {
     ol: OrderedList,
     li: ListItem,
     pre: Pre,
-    code: Code2
+    code: Code2,
+    img: Img
 };
 // src/contexts/markdown/MarkdownContext/index.ts
 var MarkdownContext = createContext7({
@@ -1068,7 +1083,7 @@ var TextContent = function(param) {
     return useRemarkSync(content.text.value, markdownContext);
 };
 // src/components/threads/Thread/Message/index.tsx
-import { jsx as jsx28, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs6 } from "react/jsx-runtime";
 var Message = function(param) {
     var message = param.message;
     var _useMemo4 = _sliced_to_array(useMemo4(function() {
@@ -1103,23 +1118,23 @@ var Message = function(param) {
     }, [
         message
     ]), 2), olderRunSteps = _useMemo4[0], laterRunSteps = _useMemo4[1];
-    return /* @__PURE__ */ jsx28(Provider, {
+    return /* @__PURE__ */ jsx29(Provider, {
         value: {
             message: message
         },
-        children: /* @__PURE__ */ jsxs6(Box8, {
+        children: /* @__PURE__ */ jsxs6(Box9, {
             children: [
-                /* @__PURE__ */ jsx28(RunSteps, {
+                /* @__PURE__ */ jsx29(RunSteps, {
                     runSteps: olderRunSteps
                 }),
                 message.content.map(function(content, index) {
-                    return /* @__PURE__ */ jsx28(Box8, {
-                        children: content.type === "text" && /* @__PURE__ */ jsx28(TextContent, {
+                    return /* @__PURE__ */ jsx29(Box9, {
+                        children: content.type === "text" && /* @__PURE__ */ jsx29(TextContent, {
                             content: content
                         })
                     }, index);
                 }),
-                /* @__PURE__ */ jsx28(RunSteps, {
+                /* @__PURE__ */ jsx29(RunSteps, {
                     runSteps: laterRunSteps
                 })
             ]
@@ -1127,36 +1142,36 @@ var Message = function(param) {
     });
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var Content2 = function(param) {
     var messageGroup = param.messageGroup;
-    return /* @__PURE__ */ jsx29(Flex10, {
+    return /* @__PURE__ */ jsx30(Flex10, {
         direction: "column-reverse",
         children: messageGroup.messages.map(function(message) {
-            return /* @__PURE__ */ jsx29(Message, {
+            return /* @__PURE__ */ jsx30(Message, {
                 message: message
             }, message.id);
         })
     });
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
-import { jsx as jsx30, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs7 } from "react/jsx-runtime";
 var MessageGroup = function(param) {
     var messageGroup = param.messageGroup;
     var assistantNameContext = useContext6(AssistantNameContext);
     return /* @__PURE__ */ jsxs7(MessageGroupBase, {
         children: [
-            messageGroup.role === "user" ? /* @__PURE__ */ jsx30(Avatar3, {
-                fallback: /* @__PURE__ */ jsx30(PersonIcon, {}),
+            messageGroup.role === "user" ? /* @__PURE__ */ jsx31(Avatar3, {
+                fallback: /* @__PURE__ */ jsx31(PersonIcon, {}),
                 size: "1"
-            }) : /* @__PURE__ */ jsx30(AssistantAvatar, {}),
-            /* @__PURE__ */ jsxs7(Box9, {
+            }) : /* @__PURE__ */ jsx31(AssistantAvatar, {}),
+            /* @__PURE__ */ jsxs7(Box10, {
                 flexGrow: "1",
                 children: [
-                    /* @__PURE__ */ jsx30(Name, {
+                    /* @__PURE__ */ jsx31(Name, {
                         children: messageGroup.role === "user" ? "You" : assistantNameContext
                     }),
-                    /* @__PURE__ */ jsx30(Content2, {
+                    /* @__PURE__ */ jsx31(Content2, {
                         messageGroup: messageGroup
                     })
                 ]
@@ -1165,7 +1180,7 @@ var MessageGroup = function(param) {
     });
 };
 // src/components/threads/Thread/Messages/Content/index.tsx
-import { Fragment, jsx as jsx31 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx32 } from "react/jsx-runtime";
 var Content3 = function() {
     var _useMessages = useMessages(), messages2 = _useMessages.messages, isLoading = _useMessages.isLoading, isLoadingError = _useMessages.isLoadingError;
     var addToast = useToasts().addToast;
@@ -1184,23 +1199,23 @@ var Content3 = function() {
         addToast
     ]);
     if (isLoading || isLoadingError) {
-        return /* @__PURE__ */ jsx31(MessagesSkeleton, {});
+        return /* @__PURE__ */ jsx32(MessagesSkeleton, {});
     }
-    return /* @__PURE__ */ jsx31(Fragment, {
+    return /* @__PURE__ */ jsx32(Fragment, {
         children: messageGroups2.map(function(messageGroup) {
-            return /* @__PURE__ */ jsx31(MessageGroup, {
+            return /* @__PURE__ */ jsx32(MessageGroup, {
                 messageGroup: messageGroup
             }, messageGroup.id);
         })
     });
 };
 // src/components/threads/Thread/Messages/Progress/index.tsx
-import { Box as Box11 } from "@radix-ui/themes";
+import { Box as Box12 } from "@radix-ui/themes";
 // src/components/skeletons/StartingContentSkeleton/index.tsx
 import { Skeleton as Skeleton2 } from "@radix-ui/themes";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var StartingContentSkeleton = function() {
-    return /* @__PURE__ */ jsx32(Skeleton2, {
+    return /* @__PURE__ */ jsx33(Skeleton2, {
         loading: true,
         mt: "1",
         height: "var(--space-4)",
@@ -1213,21 +1228,21 @@ var StartingContentSkeleton = function() {
 };
 // src/components/skeletons/StartingSkeleton/index.tsx
 import { useContext as useContext7 } from "react";
-import { Box as Box10 } from "@radix-ui/themes";
-import { jsx as jsx33, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Box as Box11 } from "@radix-ui/themes";
+import { jsx as jsx34, jsxs as jsxs8 } from "react/jsx-runtime";
 var StartingSkeleton = function(param) {
     var children = param.children;
     var assistantNameContext = useContext7(AssistantNameContext);
     return /* @__PURE__ */ jsxs8(MessageGroupBase, {
         children: [
-            /* @__PURE__ */ jsx33(AssistantAvatar, {}),
-            /* @__PURE__ */ jsxs8(Box10, {
+            /* @__PURE__ */ jsx34(AssistantAvatar, {}),
+            /* @__PURE__ */ jsxs8(Box11, {
                 children: [
-                    /* @__PURE__ */ jsx33(Name, {
+                    /* @__PURE__ */ jsx34(Name, {
                         children: assistantNameContext
                     }),
                     children,
-                    /* @__PURE__ */ jsx33(StartingContentSkeleton, {})
+                    /* @__PURE__ */ jsx34(StartingContentSkeleton, {})
                 ]
             })
         ]
@@ -1306,19 +1321,6 @@ var useLatestRun = function() {
         props
     ]);
 };
-// src/lib/runs/isRunEditingMessage/index.ts
-import _4 from "lodash";
-var isRunEditingMessage = function(param) {
-    var message = param.message;
-    if (!message) return false;
-    if (message.role === "user") return false;
-    if (!message.run_id) return false;
-    var hasContent = _4.some(message.content, function(content) {
-        var _content_text;
-        return content.type !== "text" || content.type === "text" && ((_content_text = content.text) === null || _content_text === void 0 ? void 0 : _content_text.value) !== "";
-    });
-    return !hasContent;
-};
 // src/hooks/runs/usePollingContext/index.ts
 import { useContext as useContext8 } from "react";
 // src/contexts/runs/PollingContext/index.tsx
@@ -1352,9 +1354,7 @@ var isRunActive = function(param) {
     if (!latestRunProps.latestRun) return false;
     if (progressStatuses.includes(latestRunProps.latestRun.status)) return true;
     if (stoppedStatuses.includes(latestRunProps.latestRun.status)) return false;
-    return isRunEditingMessage({
-        message: latestMessageProps.latestMessage
-    });
+    return false;
 };
 var useIsRunActive = function() {
     var latestRunProps = useLatestRun();
@@ -1398,21 +1398,21 @@ var useIsRunActive = function() {
     ]);
 };
 // src/components/threads/Thread/Messages/Progress/index.tsx
-import { jsx as jsx34, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs9 } from "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__ */ jsx34(StartingSkeleton, {});
+        return /* @__PURE__ */ jsx35(StartingSkeleton, {});
     }
     return /* @__PURE__ */ jsxs9(MessageGroupBase, {
         children: [
-            /* @__PURE__ */ jsx34(Box11, {
+            /* @__PURE__ */ jsx35(Box12, {
                 pl: "5"
             }),
-            /* @__PURE__ */ jsx34(StartingContentSkeleton, {})
+            /* @__PURE__ */ jsx35(StartingContentSkeleton, {})
         ]
     });
 };
@@ -1422,12 +1422,12 @@ import { Flex as Flex11 } from "@radix-ui/themes";
 import { useRef as useRef2 } from "react";
 import { useInView } from "react-intersection-observer";
 // src/hooks/misc/useThrottledEffect/index.tsx
-import _5 from "lodash";
+import _4 from "lodash";
 import { useRef, useEffect as useEffect2, useCallback } from "react";
 var useThrottledEffect = function(cb, delay, additionalDeps) {
     var _cbRef;
     var cbRef = useRef(cb);
-    var throttledCb = useCallback(_5.throttle(function() {
+    var throttledCb = useCallback(_4.throttle(function() {
         for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
             args[_key] = arguments[_key];
         }
@@ -1754,10 +1754,10 @@ var useCreateRun = function() {
     });
 };
 // src/lib/optimistic/isOptimistic.ts
-import _6 from "lodash";
+import _5 from "lodash";
 var isOptimistic = function(param) {
     var id = param.id;
-    return _6.startsWith(id, "-");
+    return _5.startsWith(id, "-");
 };
 // src/hooks/runs/useManageRuns/index.tsx
 var useManageRuns = function() {
@@ -1836,7 +1836,7 @@ var refetch = function() {
                     queryClient = param.queryClient, threadContext = param.threadContext;
                     return [
                         4,
-                        queryClient.invalidateQueries({
+                        queryClient.refetchQueries({
                             queryKey: (_threadContext_defaultOptions_queries_queryKey = threadContext.defaultOptions.queries.queryKey) !== null && _threadContext_defaultOptions_queries_queryKey !== void 0 ? _threadContext_defaultOptions_queries_queryKey : [
                                 "messages",
                                 threadContext.variables
@@ -1847,7 +1847,7 @@ var refetch = function() {
                     _state.sent();
                     return [
                         4,
-                        queryClient.invalidateQueries({
+                        queryClient.refetchQueries({
                             queryKey: (_threadContext_defaultOptions_queries_queryKey1 = threadContext.defaultOptions.queries.queryKey) !== null && _threadContext_defaultOptions_queries_queryKey1 !== void 0 ? _threadContext_defaultOptions_queries_queryKey1 : [
                                 "runs",
                                 threadContext.variables
@@ -1870,12 +1870,15 @@ var refetch = function() {
 var usePolling = function() {
     var threadContext = useSuperinterfaceContext();
     var queryClient = useQueryClient6();
-    var setIsPollRefetching = usePollingContext().setIsPollRefetching;
+    var _usePollingContext = usePollingContext(), isPollRefetching = _usePollingContext.isPollRefetching, setIsPollRefetching = _usePollingContext.setIsPollRefetching;
     var isRunActiveProps = useIsRunActive();
     useInterval(/*#__PURE__*/ _async_to_generator(function() {
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 case 0:
+                    if (isPollRefetching) return [
+                        2
+                    ];
                     setIsPollRefetching(true);
                     return [
                         4,
@@ -1911,8 +1914,7 @@ var usePolling = function() {
     return null;
 };
 // src/hooks/actions/useManageActions/index.tsx
-import { useQueryClient as useQueryClient8 } from "@tanstack/react-query";
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect5, useState as useState2 } from "react";
 // src/hooks/actions/useHandleAction/index.tsx
 import { partob as partob2 } from "radash";
 import { useMutation as useMutation2, useQueryClient as useQueryClient7 } from "@tanstack/react-query";
@@ -1976,34 +1978,34 @@ var useHandleAction = function() {
         superinterfaceContext: superinterfaceContext
     })));
     return _object_spread_props(_object_spread({}, props), {
-        handleAction: partob2(props.mutate, threadContext.variables)
+        handleAction: partob2(props.mutateAsync, threadContext.variables)
     });
 };
 // src/hooks/actions/useManageActions/index.tsx
 var useManageActions = function() {
-    var queryClient = useQueryClient8();
-    var threadContext = useSuperinterfaceContext();
     var latestRunProps = useLatestRun();
     var handleActionProps = useHandleAction();
+    var _useState2 = _sliced_to_array(useState2([]), 2), handledRunIds = _useState2[0], setHandledRunIds = _useState2[1];
     useEffect5(function() {
         if (handleActionProps.isPending) return;
         if (latestRunProps.isFetching) return;
         if (!latestRunProps.latestRun) return;
         if (latestRunProps.latestRun.status !== "requires_action") return;
-        var isMutating = queryClient.isMutating({
-            mutationKey: [
-                "handleAction",
-                threadContext.variables
-            ]
+        if (handledRunIds.includes(latestRunProps.latestRun.id)) return;
+        setHandledRunIds(function(prev) {
+            return _to_consumable_array(prev).concat([
+                latestRunProps.latestRun.id
+            ]);
         });
-        if (isMutating) return;
-        console.log("requires action", {
-            latestRunProps: latestRunProps
+        console.log("Requires action", {
+            latestRunProps: latestRunProps,
+            handleActionProps: handleActionProps
         });
         handleActionProps.handleAction({
             latestRun: latestRunProps.latestRun
         });
     }, [
+        handledRunIds,
         handleActionProps,
         latestRunProps
     ]);
@@ -2017,7 +2019,7 @@ var useLifecycle = function() {
     return null;
 };
 // src/components/threads/Thread/Messages/Root/index.tsx
-import { jsx as jsx35, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs10 } from "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;
@@ -2036,10 +2038,10 @@ var Root = function(param) {
         }),
         children: [
             children,
-            hasNextPage && /* @__PURE__ */ jsx35(Flex11, {
+            hasNextPage && /* @__PURE__ */ jsx36(Flex11, {
                 ref: loaderRef
             }),
-            /* @__PURE__ */ jsx35(Flex11, {
+            /* @__PURE__ */ jsx36(Flex11, {
                 flexShrink: "0",
                 flexGrow: "1"
             })
@@ -2047,30 +2049,30 @@ var Root = function(param) {
     });
 };
 // src/components/threads/Thread/Messages/NextPageSkeleton.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var NextPageSkeleton = function() {
     var hasNextPage = useMessages().hasNextPage;
     if (!hasNextPage) {
         return null;
     }
-    return /* @__PURE__ */ jsx36(MessagesSkeleton, {});
+    return /* @__PURE__ */ jsx37(MessagesSkeleton, {});
 };
 // src/components/threads/Thread/Messages/index.tsx
-import { jsx as jsx37, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs11 } 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__ */ jsxs11(Root, {
         style: style,
         children: [
-            /* @__PURE__ */ jsx37(Flex12, {
+            /* @__PURE__ */ jsx38(Flex12, {
                 flexShrink: "0",
                 height: "var(--space-3)"
             }),
-            /* @__PURE__ */ jsx37(Progress, {}),
+            /* @__PURE__ */ jsx38(Progress, {}),
             children,
-            /* @__PURE__ */ jsx37(Content3, {}),
-            /* @__PURE__ */ jsx37(NextPageSkeleton, {}),
-            /* @__PURE__ */ jsx37(Flex12, {
+            /* @__PURE__ */ jsx38(Content3, {}),
+            /* @__PURE__ */ jsx38(NextPageSkeleton, {}),
+            /* @__PURE__ */ jsx38(Flex12, {
                 flexShrink: "0",
                 flexGrow: "1"
             })
@@ -2084,7 +2086,7 @@ Messages.NextPageSkeleton = NextPageSkeleton;
 import { Flex as Flex14, Text as Text5 } from "@radix-ui/themes";
 // src/components/threads/Thread/MessageForm/Submit/index.tsx
 import { ArrowUpIcon } from "@radix-ui/react-icons";
-import { Button as Button2, Spinner } from "@radix-ui/themes";
+import { IconButton, Spinner } from "@radix-ui/themes";
 // src/hooks/messages/useMessageFormContext/index.ts
 import { useContext as useContext9 } from "react";
 // src/contexts/messages/MessageFormContext/index.ts
@@ -2098,16 +2100,15 @@ var useMessageFormContext = function() {
     return useContext9(MessageFormContext);
 };
 // src/components/threads/Thread/MessageForm/Submit/index.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var Submit = function() {
     var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading;
-    return /* @__PURE__ */ jsx38(Button2, {
+    return /* @__PURE__ */ jsx39(IconButton, {
         type: "submit",
-        radius: "large",
         disabled: isDisabled || isLoading,
-        children: /* @__PURE__ */ jsx38(Spinner, {
+        children: /* @__PURE__ */ jsx39(Spinner, {
             loading: isLoading,
-            children: /* @__PURE__ */ jsx38(ArrowUpIcon, {})
+            children: /* @__PURE__ */ jsx39(ArrowUpIcon, {})
         })
     });
 };
@@ -2116,7 +2117,7 @@ import { useMemo as useMemo9 } from "react";
 import { useForm, FormProvider } from "react-hook-form";
 // src/hooks/messages/useCreateMessage/index.ts
 import { partob as partob3 } from "radash";
-import { useMutation as useMutation3, useQueryClient as useQueryClient9 } from "@tanstack/react-query";
+import { useMutation as useMutation3, useQueryClient as useQueryClient8 } from "@tanstack/react-query";
 // src/hooks/messages/useCreateMessage/lib/mutationOptions/onMutate/index.ts
 import { omit } from "radash";
 // src/hooks/messages/useCreateMessage/lib/mutationOptions/onMutate/data.ts
@@ -2263,7 +2264,7 @@ var useCreateMessage = function() {
     var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {
         onError: function() {}
     }, _ref_onError = _ref.onError, onError = _ref_onError === void 0 ? function() {} : _ref_onError;
-    var queryClient = useQueryClient9();
+    var queryClient = useQueryClient8();
     var superinterfaceContext = useSuperinterfaceContext();
     var threadContext = useSuperinterfaceContext();
     var props = useMutation3(_object_spread({
@@ -2297,7 +2298,7 @@ var formOptions = {
     resolver: zodResolver(schema)
 };
 // src/components/threads/Thread/MessageForm/Root/index.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var Root2 = function(param) {
     var children = param.children;
     var formProps = useForm(formOptions);
@@ -2351,13 +2352,13 @@ var Root2 = function(param) {
         latestMessage,
         isLoading
     ]);
-    return /* @__PURE__ */ jsx39(MessageFormContext.Provider, {
+    return /* @__PURE__ */ jsx40(MessageFormContext.Provider, {
         value: {
             isDisabled: isDisabled,
             isLoading: isLoading
         },
-        children: /* @__PURE__ */ jsx39(FormProvider, _object_spread_props(_object_spread({}, formProps), {
-            children: /* @__PURE__ */ jsx39("form", {
+        children: /* @__PURE__ */ jsx40(FormProvider, _object_spread_props(_object_spread({}, formProps), {
+            children: /* @__PURE__ */ jsx40("form", {
                 onSubmit: handleSubmit(onSubmit),
                 children: children
             })
@@ -2370,15 +2371,15 @@ import { useContext as useContext10, useMemo as useMemo10, useRef as useRef3, us
 // src/components/textareas/TextareaBase/index.tsx
 import { forwardRef as forwardRef3 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
-import { Fragment as Fragment2, jsx as jsx40, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx41, jsxs as jsxs12 } from "react/jsx-runtime";
 var UPSCALE_RATIO = 16 / 14;
 var TextareaBase = forwardRef3(function TextareaBase2(props, ref) {
     return /* @__PURE__ */ jsxs12(Fragment2, {
         children: [
-            /* @__PURE__ */ jsx40("style", {
+            /* @__PURE__ */ jsx41("style", {
                 children: ".superinterface-textarea { min-height: inherit; height: 30px; }\n.superinterface-textarea::placeholder { color: var(--gray-a10); }"
             }),
-            /* @__PURE__ */ jsx40(TextareaAutosize, _object_spread({
+            /* @__PURE__ */ jsx41(TextareaAutosize, _object_spread({
                 ref: ref,
                 className: "rt-reset superinterface-textarea",
                 style: {
@@ -2403,20 +2404,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 jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var Root3 = function(param) {
     var children = param.children;
     var _useFormContext = useFormContext(), errors = _useFormContext.formState.errors;
-    return /* @__PURE__ */ jsx41(Container2, {
+    return /* @__PURE__ */ jsx42(Container2, {
         size: "2",
         flexGrow: "0",
-        children: /* @__PURE__ */ jsx41(Flex13, {
+        children: /* @__PURE__ */ jsx42(Flex13, {
             direction: "column",
             flexShrink: "0",
-            children: /* @__PURE__ */ jsx41(Flex13, {
+            children: /* @__PURE__ */ jsx42(Flex13, {
                 direction: "column",
                 flexShrink: "0",
-                children: /* @__PURE__ */ jsx41(Flex13, {
+                children: /* @__PURE__ */ jsx42(Flex13, {
                     style: _object_spread({
                         borderRadius: "var(--radius-2)",
                         borderWidth: "1px",
@@ -2456,7 +2457,7 @@ var Control = function() {
         isDisabledPrevious,
         textareaProps
     ]);
-    return /* @__PURE__ */ jsx41(TextareaBase, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ jsx42(TextareaBase, _object_spread_props(_object_spread({
         minRows: 1,
         placeholder: "Message ".concat(assistantNameContext, "..."),
         disabled: isDisabled,
@@ -2480,26 +2481,26 @@ var Field = {
     Control: Control
 };
 // src/components/threads/Thread/MessageForm/index.tsx
-import { jsx as jsx42, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs13 } from "react/jsx-runtime";
 var MessageForm = function() {
-    return /* @__PURE__ */ jsx42(Root2, {
+    return /* @__PURE__ */ jsx43(Root2, {
         children: /* @__PURE__ */ jsxs13(Field.Root, {
             children: [
-                /* @__PURE__ */ jsx42(Text5, {
+                /* @__PURE__ */ jsx43(Text5, {
                     size: "2",
                     style: {
                         flexGrow: 1
                     },
-                    children: /* @__PURE__ */ jsx42(Flex14, {
+                    children: /* @__PURE__ */ jsx43(Flex14, {
                         flexGrow: "1",
                         direction: "column",
-                        children: /* @__PURE__ */ jsx42(Field.Control, {})
+                        children: /* @__PURE__ */ jsx43(Field.Control, {})
                     })
                 }),
-                /* @__PURE__ */ jsx42(Flex14, {
+                /* @__PURE__ */ jsx43(Flex14, {
                     flexShrink: "0",
                     align: "end",
-                    children: /* @__PURE__ */ jsx42(Submit, {})
+                    children: /* @__PURE__ */ jsx43(Submit, {})
                 })
             ]
         })
@@ -2511,12 +2512,12 @@ MessageForm.Submit = Submit;
 // src/components/threads/Thread/Root/index.tsx
 import { Flex as Flex15 } from "@radix-ui/themes";
 // src/components/runs/PollingProvider/index.tsx
-import { useState as useState2 } from "react";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { useState as useState3 } from "react";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var PollingProvider = function(param) {
     var children = param.children;
-    var _useState2 = _sliced_to_array(useState2(false), 2), isPollRefetching = _useState2[0], setIsPollRefetching = _useState2[1];
-    return /* @__PURE__ */ jsx43(PollingContext.Provider, {
+    var _useState3 = _sliced_to_array(useState3(false), 2), isPollRefetching = _useState3[0], setIsPollRefetching = _useState3[1];
+    return /* @__PURE__ */ jsx44(PollingContext.Provider, {
         value: {
             isPollRefetching: isPollRefetching,
             setIsPollRefetching: setIsPollRefetching
@@ -2525,20 +2526,20 @@ var PollingProvider = function(param) {
     });
 };
 // src/components/threads/Thread/Provider/index.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var Provider2 = function(args) {
-    return /* @__PURE__ */ jsx44(PollingProvider, {
-        children: /* @__PURE__ */ jsx44(SuperinterfaceProvider, _object_spread({}, args))
+    return /* @__PURE__ */ jsx45(PollingProvider, {
+        children: /* @__PURE__ */ jsx45(SuperinterfaceProvider, _object_spread({}, args))
     });
 };
 // src/components/threads/Thread/Root/index.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var Root4 = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
     ]);
-    return /* @__PURE__ */ jsx45(Provider2, _object_spread_props(_object_spread({}, rest), {
-        children: /* @__PURE__ */ jsx45(Flex15, {
+    return /* @__PURE__ */ jsx46(Provider2, _object_spread_props(_object_spread({}, rest), {
+        children: /* @__PURE__ */ jsx46(Flex15, {
             direction: "column",
             flexGrow: "1",
             children: children
@@ -2546,12 +2547,12 @@ var Root4 = function(_param) {
     }));
 };
 // src/components/threads/Thread/index.tsx
-import { jsx as jsx46, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs14 } from "react/jsx-runtime";
 var Thread = function(props) {
     return /* @__PURE__ */ jsxs14(Root4, _object_spread_props(_object_spread({}, props), {
         children: [
-            /* @__PURE__ */ jsx46(Messages, {}),
-            /* @__PURE__ */ jsx46(MessageForm, {})
+            /* @__PURE__ */ jsx47(Messages, {}),
+            /* @__PURE__ */ jsx47(MessageForm, {})
         ]
     }));
 };
@@ -2563,10 +2564,8 @@ import { useContext as useContext11 } from "react";
 var useMessageContext = function() {
     return useContext11(MessageContext);
 };
-// src/components/threads/ThreadDialog/Root/index.tsx
-import { Flex as Flex17 } from "@radix-ui/themes";
 // src/components/threads/ThreadDialog/Provider/index.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 // src/contexts/threads/ThreadDialogContext/index.ts
 import { createContext as createContext10 } from "react";
 var ThreadDialogContext = createContext10({
@@ -2579,12 +2578,12 @@ var useThreadDialogContext = function() {
     return useContext12(ThreadDialogContext);
 };
 // src/components/threads/ThreadDialog/Provider/index.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var Provider3 = function(param) {
     var children = param.children;
     var threadDialogContext = useThreadDialogContext();
-    var _useState3 = _sliced_to_array(useState3(threadDialogContext.isOpen), 2), isOpen = _useState3[0], setIsOpen = _useState3[1];
-    return /* @__PURE__ */ jsx47(ThreadDialogContext.Provider, {
+    var _useState4 = _sliced_to_array(useState4(threadDialogContext.isOpen), 2), isOpen = _useState4[0], setIsOpen = _useState4[1];
+    return /* @__PURE__ */ jsx48(ThreadDialogContext.Provider, {
         value: {
             isOpen: isOpen,
             setIsOpen: setIsOpen
@@ -2593,31 +2592,31 @@ var Provider3 = function(param) {
     });
 };
 // src/components/toasts/ToastsProvider/index.tsx
-import { useState as useState4, useCallback as useCallback2 } from "react";
+import { useState as useState5, useCallback as useCallback2 } from "react";
 import * as Toast2 from "@radix-ui/react-toast";
 // src/components/toasts/ToastsProvider/CustomToast.tsx
 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 jsx48, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs15 } from "react/jsx-runtime";
 var CustomToast = function(param) {
     var toast = param.toast;
-    return /* @__PURE__ */ jsx48(Toast.Root, {
-        children: /* @__PURE__ */ jsx48(Card, {
-            children: /* @__PURE__ */ jsx48(Toast.Title, {
+    return /* @__PURE__ */ jsx49(Toast.Root, {
+        children: /* @__PURE__ */ jsx49(Card, {
+            children: /* @__PURE__ */ jsx49(Toast.Title, {
                 children: /* @__PURE__ */ jsxs15(Flex16, {
                     children: [
-                        /* @__PURE__ */ jsx48(Flex16, {
+                        /* @__PURE__ */ jsx49(Flex16, {
                             pr: "2",
                             height: "14px",
                             align: "center",
-                            children: toast.type === "success" ? /* @__PURE__ */ jsx48(CheckCircledIcon2, {
+                            children: toast.type === "success" ? /* @__PURE__ */ jsx49(CheckCircledIcon2, {
                                 color: "var(--mint-9)"
-                            }) : /* @__PURE__ */ jsx48(CrossCircledIcon, {
+                            }) : /* @__PURE__ */ jsx49(CrossCircledIcon, {
                                 color: "var(--red-9)"
                             })
                         }),
-                        /* @__PURE__ */ jsx48(Text6, {
+                        /* @__PURE__ */ jsx49(Text6, {
                             weight: "medium",
                             size: "1",
                             children: toast.message
@@ -2629,10 +2628,10 @@ var CustomToast = function(param) {
     });
 };
 // src/components/toasts/ToastsProvider/index.tsx
-import { jsx as jsx49, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs16 } from "react/jsx-runtime";
 var ToastsProvider = function(param) {
     var children = param.children;
-    var _useState4 = _sliced_to_array(useState4([]), 2), toasts = _useState4[0], setToasts = _useState4[1];
+    var _useState5 = _sliced_to_array(useState5([]), 2), toasts = _useState5[0], setToasts = _useState5[1];
     var addToast = useCallback2(function(toast) {
         return setToasts(function(prevToasts) {
             return _to_consumable_array(prevToasts).concat([
@@ -2640,7 +2639,7 @@ var ToastsProvider = function(param) {
             ]);
         });
     }, []);
-    return /* @__PURE__ */ jsx49(ToastsContext.Provider, {
+    return /* @__PURE__ */ jsx50(ToastsContext.Provider, {
         value: {
             toasts: toasts,
             addToast: addToast
@@ -2649,11 +2648,11 @@ var ToastsProvider = function(param) {
             children: [
                 children,
                 Array.from(toasts).map(function(toast, index) {
-                    return /* @__PURE__ */ jsx49(CustomToast, {
+                    return /* @__PURE__ */ jsx50(CustomToast, {
                         toast: toast
                     }, index);
                 }),
-                /* @__PURE__ */ jsx49(Toast2.Viewport, {
+                /* @__PURE__ */ jsx50(Toast2.Viewport, {
                     style: {
                         position: "absolute",
                         bottom: 0,
@@ -2675,34 +2674,26 @@ var ToastsProvider = function(param) {
     });
 };
 // src/components/threads/ThreadDialog/Root/index.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var Root6 = function(param) {
     var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
-    return /* @__PURE__ */ jsx50(ToastsProvider, {
-        children: /* @__PURE__ */ jsx50(Provider3, {
-            children: /* @__PURE__ */ jsx50(Flex17, {
-                direction: "column",
-                justify: "end",
-                align: "end",
-                position: "fixed",
-                style: _object_spread({
-                    bottom: "24px",
-                    right: "24px",
-                    top: "24px",
-                    zIndex: 9999999999
-                }, style),
-                children: children
-            })
+    return /* @__PURE__ */ jsx51(ToastsProvider, {
+        children: /* @__PURE__ */ jsx51(Provider3, {
+            children: children
         })
     });
 };
 // src/components/threads/ThreadDialog/Trigger/index.tsx
-import { Flex as Flex18 } from "@radix-ui/themes";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { Flex as Flex17 } from "@radix-ui/themes";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var Trigger = function(param) {
-    var children = param.children;
-    var setIsOpen = useThreadDialogContext().setIsOpen;
-    return /* @__PURE__ */ jsx51(Flex18, {
+    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__ */ jsx52(Flex17, {
+        display: {
+            initial: isOpen ? "none" : "flex",
+            sm: "flex"
+        },
         onClick: function() {
             return setIsOpen(function(prev) {
                 return !prev;
@@ -2710,66 +2701,143 @@ 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
-import { IconButton } from "@radix-ui/themes";
+import { IconButton as IconButton2 } from "@radix-ui/themes";
 import { ChatBubbleIcon } from "@radix-ui/react-icons";
-import { jsx as jsx52 } from "react/jsx-runtime";
-var Button3 = function() {
-    return /* @__PURE__ */ jsx52(IconButton, {
+import { jsx as jsx53 } from "react/jsx-runtime";
+var Button2 = function() {
+    return /* @__PURE__ */ jsx53(IconButton2, {
         size: "4",
         radius: "full",
-        children: /* @__PURE__ */ jsx52(ChatBubbleIcon, {})
+        children: /* @__PURE__ */ jsx53(ChatBubbleIcon, {})
     });
 };
 // src/components/threads/ThreadDialog/Content/index.tsx
 import { Card as Card2, Inset, Flex as Flex19 } from "@radix-ui/themes";
-import { jsx as jsx53, jsxs as jsxs17 } from "react/jsx-runtime";
+// 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 jsx54 } from "react/jsx-runtime";
+var Close = function() {
+    var _useThreadDialogContext = useThreadDialogContext(), setIsOpen = _useThreadDialogContext.setIsOpen, isOpen = _useThreadDialogContext.isOpen;
+    return /* @__PURE__ */ jsx54(Flex18, {
+        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__ */ jsx54(IconButton3, {
+            size: "2",
+            variant: "soft",
+            children: /* @__PURE__ */ jsx54(Cross1Icon, {})
+        })
+    });
+};
+// src/components/threads/ThreadDialog/Content/index.tsx
+import { jsx as jsx55, jsxs as jsxs17 } from "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__ */ jsx53(Card2, {
-        mb: "3",
-        style: {
-            display: "flex",
-            flexGrow: 1,
-            width: "100vw",
-            maxWidth: "400px",
-            maxHeight: "720px"
+    return /* @__PURE__ */ jsx55(Flex19, {
+        direction: "column",
+        justify: "end",
+        position: "fixed",
+        bottom: {
+            initial: "0",
+            sm: "72px"
         },
-        children: /* @__PURE__ */ jsx53(Inset, {
-            clip: "padding-box",
-            side: "all",
-            pb: "current",
+        right: {
+            initial: "0",
+            sm: "24px"
+        },
+        top: {
+            initial: "0",
+            sm: "24px"
+        },
+        maxHeight: {
+            initial: void 0,
+            sm: "720px"
+        },
+        maxWidth: {
+            initial: void 0,
+            sm: "400px"
+        },
+        width: "100%",
+        style: _object_spread({
+            zIndex: 9999999999
+        }, style),
+        children: /* @__PURE__ */ jsxs17(Card2, {
+            mb: {
+                initial: void 0,
+                sm: "3"
+            },
             style: {
+                position: "relative",
                 display: "flex",
                 flexGrow: 1
             },
-            children: children
+            children: [
+                /* @__PURE__ */ jsx55(Inset, {
+                    clip: "padding-box",
+                    side: "all",
+                    pb: "current",
+                    style: {
+                        display: "flex",
+                        flexGrow: 1
+                    },
+                    children: children
+                }),
+                /* @__PURE__ */ jsx55(Close, {})
+            ]
         })
     });
 };
-var Content4 = function() {
-    return /* @__PURE__ */ jsx53(Root7, {
+var Content4 = function(param) {
+    var _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
+    return /* @__PURE__ */ jsx55(Root7, {
+        style: style,
         children: /* @__PURE__ */ jsxs17(Thread.Root, {
             children: [
-                /* @__PURE__ */ jsx53(Thread.Messages, {
+                /* @__PURE__ */ jsx55(Thread.Messages, {
                     style: {
                         paddingTop: "var(--space-5)",
                         paddingRight: "var(--space-5)",
                         paddingLeft: "var(--space-5)"
                     }
                 }),
-                /* @__PURE__ */ jsx53(Flex19, {
+                /* @__PURE__ */ jsx55(Flex19, {
                     direction: "column",
                     pl: "5",
                     pr: "5",
                     pb: "3",
                     flexShrink: "0",
-                    children: /* @__PURE__ */ jsx53(Thread.MessageForm, {})
+                    children: /* @__PURE__ */ jsx55(Thread.MessageForm, {})
                 })
             ]
         })
@@ -2777,20 +2845,20 @@ var Content4 = function() {
 };
 Content4.Root = Root7;
 // src/components/threads/ThreadDialog/index.tsx
-import { jsx as jsx54, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs18 } from "react/jsx-runtime";
 var ThreadDialog = function() {
     return /* @__PURE__ */ jsxs18(Root6, {
         children: [
-            /* @__PURE__ */ jsx54(Content4, {}),
-            /* @__PURE__ */ jsx54(Trigger, {
-                children: /* @__PURE__ */ jsx54(Button3, {})
+            /* @__PURE__ */ jsx56(Content4, {}),
+            /* @__PURE__ */ jsx56(Trigger, {
+                children: /* @__PURE__ */ jsx56(Button2, {})
             })
         ]
     });
 };
 ThreadDialog.Root = Root6;
 ThreadDialog.Trigger = Trigger;
-ThreadDialog.Button = Button3;
+ThreadDialog.Button = Button2;
 ThreadDialog.Content = Content4;
 // src/components/threads/AudioThread/Root/index.tsx
 import "regenerator-runtime/runtime";
@@ -2892,18 +2960,18 @@ var useStatus = function(param) {
 // src/hooks/audioThreads/useRecorder/index.ts
 import dayjs from "dayjs";
 import { useAudioCapture } from "use-audio-capture";
-import { useMemo as useMemo12, useRef as useRef4, useState as useState5, useCallback as useCallback3, useEffect as useEffect7 } from "react";
+import { useMemo as useMemo12, useRef as useRef4, useState as useState6, useCallback as useCallback3, useEffect as useEffect7 } from "react";
 import { useAudioPlayer } from "react-use-audio-player";
 import { useInterval as useInterval2 } from "react-use";
 var useRecorder = function(param) {
     var isStopOnSilence = param.isStopOnSilence, onStart = param.onStart, onStop = param.onStop;
-    var _useState5 = _sliced_to_array(useState5(null), 2), silenceStart = _useState5[0], setSilenceStart = _useState5[1];
-    var _useState51 = _sliced_to_array(useState5(null), 2), noiseStart = _useState51[0], setNoiseStart = _useState51[1];
-    var _useState52 = _sliced_to_array(useState5(null), 2), mediaStream = _useState52[0], setMediaStream = _useState52[1];
-    var _useState53 = _sliced_to_array(useState5("idle"), 2), status = _useState53[0], setStatus = _useState53[1];
+    var _useState6 = _sliced_to_array(useState6(null), 2), silenceStart = _useState6[0], setSilenceStart = _useState6[1];
+    var _useState61 = _sliced_to_array(useState6(null), 2), noiseStart = _useState61[0], setNoiseStart = _useState61[1];
+    var _useState62 = _sliced_to_array(useState6(null), 2), mediaStream = _useState62[0], setMediaStream = _useState62[1];
+    var _useState63 = _sliced_to_array(useState6("idle"), 2), status = _useState63[0], setStatus = _useState63[1];
     var startAudioPlayer = useAudioPlayer();
     var endAudioPlayer = useAudioPlayer();
-    var _useState54 = _sliced_to_array(useState5(false), 2), isLoaded = _useState54[0], setIsLoaded = _useState54[1];
+    var _useState64 = _sliced_to_array(useState6(false), 2), isLoaded = _useState64[0], setIsLoaded = _useState64[1];
     useEffect7(function() {
         if (isLoaded) return;
         setIsLoaded(true);
@@ -2962,7 +3030,7 @@ var useRecorder = function(param) {
             setNoiseStart(null);
         }
     });
-    var _useState55 = _sliced_to_array(useState5(null), 2), audioEngine = _useState55[0], setAudioEngine = _useState55[1];
+    var _useState65 = _sliced_to_array(useState6(null), 2), audioEngine = _useState65[0], setAudioEngine = _useState65[1];
     var isInited = useRef4(false);
     useEffect7(function() {
         if (!mediaStream) return;
@@ -3040,7 +3108,7 @@ var useRecorder = function(param) {
     });
 };
 // src/hooks/audioThreads/useMessageAudio/index.ts
-import { useMemo as useMemo13, useRef as useRef5, useState as useState6, useEffect as useEffect8 } from "react";
+import { useMemo as useMemo13, useRef as useRef5, useState as useState7, useEffect as useEffect8 } from "react";
 import { Howler } from "howler";
 import { useAudioPlayer as useAudioPlayer2 } from "react-use-audio-player";
 // src/hooks/audioThreads/useMessageAudio/lib/input.ts
@@ -3066,7 +3134,7 @@ var isHtmlAudioSupported = !unsupportedNames.includes(((_detect = detect()) ===
 // src/hooks/audioThreads/useMessageAudio/index.ts
 var useMessageAudio = function(param) {
     var onEnd = param.onEnd;
-    var _useState6 = _sliced_to_array(useState6([]), 2), playedMessageIds = _useState6[0], setPlayedMessageIds = _useState6[1];
+    var _useState7 = _sliced_to_array(useState7([]), 2), playedMessages = _useState7[0], setPlayedMessages = _useState7[1];
     var audioPlayer = useAudioPlayer2();
     var superinterfaceContext = useSuperinterfaceContext();
     var latestMessageProps = useLatestMessage();
@@ -3074,14 +3142,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), {
@@ -3101,11 +3174,11 @@ var useMessageAudio = function(param) {
         superinterfaceContext,
         latestMessageProps,
         audioPlayer,
-        playedMessageIds,
+        playedMessages,
         onEnd
     ]);
     var isInited = useRef5(false);
-    var _useState61 = _sliced_to_array(useState6(null), 2), audioEngine = _useState61[0], setAudioEngine = _useState61[1];
+    var _useState71 = _sliced_to_array(useState7(null), 2), audioEngine = _useState71[0], setAudioEngine = _useState71[1];
     useEffect8(function() {
         if (!audioPlayer.playing) return;
         if (isInited.current) return;
@@ -3141,7 +3214,7 @@ var useMessageAudio = function(param) {
     });
 };
 // src/components/threads/AudioThread/Root/index.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var Root8 = function(param) {
     var children = param.children;
     useLifecycle();
@@ -3201,73 +3274,47 @@ var Root8 = function(param) {
         createMessageProps: createMessageProps,
         messageAudioProps: messageAudioProps
     }).status;
-    return /* @__PURE__ */ jsx55(AudioThreadContext.Provider, {
+    return /* @__PURE__ */ jsx57(AudioThreadContext.Provider, {
         value: {
             status: status,
             recorderProps: recorderProps,
             messageAudioProps: messageAudioProps
         },
-        children: /* @__PURE__ */ jsx55(Flex20, {
+        children: /* @__PURE__ */ jsx57(Flex20, {
             direction: "column",
             flexGrow: "1",
-            p: "5",
+            p: "9",
             children: children
         })
     });
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
-import { Flex as Flex21 } from "@radix-ui/themes";
+import { Flex as Flex22 } from "@radix-ui/themes";
 // src/hooks/threads/useAudioThreadContext/index.ts
 import { useContext as useContext13 } from "react";
 var useAudioThreadContext = function() {
     return useContext13(AudioThreadContext);
 };
-// src/components/threads/AudioThread/Visualization/index.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
-var Visualization = function() {
-    var audioThreadContext = useAudioThreadContext();
-    return /* @__PURE__ */ jsx56(Flex21, {
-        direction: "column",
-        align: "center",
-        justify: "center",
-        mb: "3",
-        flexGrow: "1",
-        children: /* @__PURE__ */ jsx56(Flex21, {
-            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
-import { SpeakerModerateIcon } from "@radix-ui/react-icons";
-import { Flex as Flex24 } from "@radix-ui/themes";
-// src/components/threads/AudioThread/Form/Visualizer/index.tsx
-import _7 from "lodash";
-import { Flex as Flex22, Grid } from "@radix-ui/themes";
-import { useState as useState7, useEffect as useEffect9, useCallback as useCallback4 } from "react";
+// src/components/threads/AudioThread/BarsVisualizer/index.tsx
+import _6 from "lodash";
+import { Flex as Flex21, Grid } from "@radix-ui/themes";
+import { useState as useState8, useEffect as useEffect9, useCallback as useCallback4 } from "react";
 import { cluster } from "radash";
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var barCount = 4;
-var Visualizer = function() {
-    var audioThreadContext = useAudioThreadContext();
-    var visualizationAnalyser = audioThreadContext.recorderProps.visualizationAnalyser;
-    var _useState7 = _sliced_to_array(useState7(function() {
+var BarsVisualizer = function(param) {
+    var visualizationAnalyser = param.visualizationAnalyser, color = param.color, height = param.height, barWidth = param.barWidth;
+    var _useState8 = _sliced_to_array(useState8(function() {
         return new AudioContext().createAnalyser();
-    }), 1), emptyVisualizer = _useState7[0];
-    var _useState71 = _sliced_to_array(useState7([]), 2), barHeights = _useState71[0], setBarHeights = _useState71[1];
+    }), 1), emptyVisualizer = _useState8[0];
+    var _useState81 = _sliced_to_array(useState8([]), 2), barHeights = _useState81[0], setBarHeights = _useState81[1];
     var draw = useCallback4(function(param) {
         var visualizationAnalyser2 = param.visualizationAnalyser;
         var frequencyData = new Uint8Array(visualizationAnalyser2.frequencyBinCount / 15);
         visualizationAnalyser2.getByteFrequencyData(frequencyData);
         var clusteredFrequencyData = cluster(frequencyData, frequencyData.length / barCount);
         setBarHeights(clusteredFrequencyData.map(function(frequencyDataCluster) {
-            return _7.mean(frequencyDataCluster) / 255 * 100;
+            return _6.mean(frequencyDataCluster) / 255 * 100;
         }));
         requestAnimationFrame(function() {
             return draw({
@@ -3284,7 +3331,7 @@ var Visualizer = function() {
         visualizationAnalyser,
         emptyVisualizer
     ]);
-    return /* @__PURE__ */ jsx57(Grid, {
+    return /* @__PURE__ */ jsx58(Grid, {
         columns: "".concat(barCount),
         gap: "1",
         width: "auto",
@@ -3293,18 +3340,18 @@ var Visualizer = function() {
             gridTemplateColumns: "repeat(4, minmax(0, 1fr))"
         },
         children: barHeights.map(function(barHeight, index) {
-            return /* @__PURE__ */ jsx57(Flex22, {
+            return /* @__PURE__ */ jsx58(Flex21, {
                 direction: "column",
                 align: "center",
                 justify: "center",
-                height: "20px",
-                children: /* @__PURE__ */ jsx57(Flex22, {
+                height: height,
+                children: /* @__PURE__ */ jsx58(Flex21, {
                     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)"
                     }
                 })
@@ -3312,32 +3359,63 @@ var Visualizer = function() {
         })
     });
 };
+// src/components/threads/AudioThread/Visualization/index.tsx
+import { jsx as jsx59 } from "react/jsx-runtime";
+var Visualization = function() {
+    var audioThreadContext = useAudioThreadContext();
+    return /* @__PURE__ */ jsx59(Flex22, {
+        direction: "column",
+        align: "center",
+        justify: "center",
+        mb: "3",
+        flexGrow: "1",
+        children: /* @__PURE__ */ jsx59(Flex22, {
+            align: "center",
+            justify: "center",
+            height: "200px",
+            width: "200px",
+            style: {
+                backgroundColor: "var(--".concat(audioThreadContext.status === "playing" ? "mint" : "gray", "-4)"),
+                borderRadius: "9999px"
+            },
+            children: /* @__PURE__ */ jsx59(BarsVisualizer, {
+                visualizationAnalyser: audioThreadContext.messageAudioProps.visualizationAnalyser,
+                color: audioThreadContext.status === "playing" ? "mint" : "gray",
+                height: "40px",
+                barWidth: "24px"
+            })
+        })
+    });
+};
+// src/components/threads/AudioThread/Form/index.tsx
+import { SpeakerModerateIcon } from "@radix-ui/react-icons";
+import { Flex as Flex24 } from "@radix-ui/themes";
 // src/components/threads/AudioThread/Form/ActionButton/index.tsx
-import { Flex as Flex23, IconButton as IconButton2, Tooltip } from "@radix-ui/themes";
+import { Flex as Flex23, IconButton as IconButton4, Tooltip } from "@radix-ui/themes";
 import { PauseIcon, ArrowUpIcon as ArrowUpIcon2, ResumeIcon } from "@radix-ui/react-icons";
-import { jsx as jsx58, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs19 } from "react/jsx-runtime";
 var ActionButton = function() {
     var audioThreadContext = useAudioThreadContext();
     if (audioThreadContext.status === "recording") {
         return /* @__PURE__ */ jsxs19(Flex23, {
             align: "center",
             children: [
-                /* @__PURE__ */ jsx58(Flex23, {
+                /* @__PURE__ */ jsx60(Flex23, {
                     mr: "3",
                     ml: "-7",
-                    children: /* @__PURE__ */ jsx58(IconButton2, {
+                    children: /* @__PURE__ */ jsx60(IconButton4, {
                         onClick: audioThreadContext.recorderProps.pause,
                         color: "gray",
                         radius: "full",
                         size: "1",
-                        children: /* @__PURE__ */ jsx58(PauseIcon, {})
+                        children: /* @__PURE__ */ jsx60(PauseIcon, {})
                     })
                 }),
-                /* @__PURE__ */ jsx58(Tooltip, {
+                /* @__PURE__ */ jsx60(Tooltip, {
                     open: true,
                     content: "Send your message",
                     side: "bottom",
-                    children: /* @__PURE__ */ jsx58(IconButton2, {
+                    children: /* @__PURE__ */ jsx60(IconButton4, {
                         onClick: audioThreadContext.recorderProps.stop,
                         color: "gray",
                         highContrast: true,
@@ -3346,14 +3424,14 @@ var ActionButton = function() {
                         style: {
                             border: "2px solid var(--gray-8)"
                         },
-                        children: /* @__PURE__ */ jsx58(ArrowUpIcon2, {})
+                        children: /* @__PURE__ */ jsx60(ArrowUpIcon2, {})
                     })
                 })
             ]
         });
     }
     if (audioThreadContext.status === "recorderPaused") {
-        return /* @__PURE__ */ jsx58(IconButton2, {
+        return /* @__PURE__ */ jsx60(IconButton4, {
             onClick: audioThreadContext.recorderProps.resume,
             color: "red",
             radius: "full",
@@ -3361,11 +3439,11 @@ var ActionButton = function() {
             style: {
                 border: "2px solid var(--gray-8)"
             },
-            children: /* @__PURE__ */ jsx58(ResumeIcon, {})
+            children: /* @__PURE__ */ jsx60(ResumeIcon, {})
         });
     }
     if (audioThreadContext.status === "idle") {
-        return /* @__PURE__ */ jsx58(IconButton2, {
+        return /* @__PURE__ */ jsx60(IconButton4, {
             onClick: function() {
                 return audioThreadContext.recorderProps.start();
             },
@@ -3378,7 +3456,7 @@ var ActionButton = function() {
         });
     }
     if (audioThreadContext.status === "playing") {
-        return /* @__PURE__ */ jsx58(IconButton2, {
+        return /* @__PURE__ */ jsx60(IconButton4, {
             onClick: function() {
                 return audioThreadContext.messageAudioProps.pause();
             },
@@ -3388,11 +3466,11 @@ var ActionButton = function() {
             style: {
                 border: "2px solid var(--gray-8)"
             },
-            children: /* @__PURE__ */ jsx58(PauseIcon, {})
+            children: /* @__PURE__ */ jsx60(PauseIcon, {})
         });
     }
     if (audioThreadContext.status === "playerPaused") {
-        return /* @__PURE__ */ jsx58(IconButton2, {
+        return /* @__PURE__ */ jsx60(IconButton4, {
             onClick: function() {
                 return audioThreadContext.messageAudioProps.play();
             },
@@ -3402,10 +3480,10 @@ var ActionButton = function() {
             style: {
                 border: "2px solid var(--gray-8)"
             },
-            children: /* @__PURE__ */ jsx58(ResumeIcon, {})
+            children: /* @__PURE__ */ jsx60(ResumeIcon, {})
         });
     }
-    return /* @__PURE__ */ jsx58(IconButton2, {
+    return /* @__PURE__ */ jsx60(IconButton4, {
         size: "4",
         color: "red",
         radius: "full",
@@ -3416,7 +3494,7 @@ var ActionButton = function() {
     });
 };
 // src/components/threads/AudioThread/Form/index.tsx
-import { jsx as jsx59, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs20 } from "react/jsx-runtime";
 var Form = function() {
     var audioThreadContext = useAudioThreadContext();
     return /* @__PURE__ */ jsxs20(Flex24, {
@@ -3427,38 +3505,43 @@ var Form = function() {
                 pb: "3",
                 align: "center",
                 children: [
-                    /* @__PURE__ */ jsx59(Flex24, {
+                    /* @__PURE__ */ jsx61(Flex24, {
                         ml: "-5",
                         mr: "2",
                         align: "center",
-                        children: /* @__PURE__ */ jsx59(SpeakerModerateIcon, {
+                        children: /* @__PURE__ */ jsx61(SpeakerModerateIcon, {
                             style: {
                                 color: "var(--".concat(audioThreadContext.status === "recording" ? "mint" : "gray", "-12)")
                             }
                         })
                     }),
-                    /* @__PURE__ */ jsx59(Flex24, {
+                    /* @__PURE__ */ jsx61(Flex24, {
                         px: "2",
                         py: "1",
                         style: {
                             backgroundColor: "var(--".concat(audioThreadContext.status === "recording" ? "mint" : "gray", "-4)"),
                             borderRadius: "var(--radius-6)"
                         },
-                        children: /* @__PURE__ */ jsx59(Visualizer, {})
+                        children: /* @__PURE__ */ jsx61(BarsVisualizer, {
+                            visualizationAnalyser: audioThreadContext.recorderProps.visualizationAnalyser,
+                            color: audioThreadContext.status === "recording" ? "mint" : "gray",
+                            height: "20px",
+                            barWidth: "12px"
+                        })
                     })
                 ]
             }),
-            /* @__PURE__ */ jsx59(ActionButton, {})
+            /* @__PURE__ */ jsx61(ActionButton, {})
         ]
     });
 };
 // src/components/threads/AudioThread/index.tsx
-import { jsx as jsx60, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs21 } from "react/jsx-runtime";
 var AudioThread = function(props) {
     return /* @__PURE__ */ jsxs21(Root8, _object_spread_props(_object_spread({}, props), {
         children: [
-            /* @__PURE__ */ jsx60(Visualization, {}),
-            /* @__PURE__ */ jsx60(Form, {})
+            /* @__PURE__ */ jsx62(Visualization, {}),
+            /* @__PURE__ */ jsx62(Form, {})
         ]
     }));
 };
@@ -3466,22 +3549,22 @@ AudioThread.Root = Root8;
 AudioThread.Visualization = Visualization;
 AudioThread.Form = Form;
 // src/components/threads/AudioThreadDialog/index.tsx
-import { jsx as jsx61, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs22 } from "react/jsx-runtime";
 var AudioThreadDialog = function() {
     return /* @__PURE__ */ jsxs22(Root6, {
         children: [
-            /* @__PURE__ */ jsx61(Content4.Root, {
-                children: /* @__PURE__ */ jsx61(AudioThread, {})
+            /* @__PURE__ */ jsx63(Content4.Root, {
+                children: /* @__PURE__ */ jsx63(AudioThread, {})
             }),
-            /* @__PURE__ */ jsx61(Trigger, {
-                children: /* @__PURE__ */ jsx61(Button3, {})
+            /* @__PURE__ */ jsx63(Trigger, {
+                children: /* @__PURE__ */ jsx63(Button2, {})
             })
         ]
     });
 };
 AudioThreadDialog.Root = Root6;
 AudioThreadDialog.Trigger = Trigger;
-AudioThreadDialog.Button = Button3;
+AudioThreadDialog.Button = Button2;
 AudioThreadDialog.Content = Content4;
 // src/components/suggestions/Suggestions/index.tsx
 import { useMemo as useMemo15 } from "react";
@@ -3492,12 +3575,12 @@ import { onlyText } from "react-children-utilities";
 import { Flex as Flex25 } from "@radix-ui/themes";
 // src/components/suggestions/Suggestions/Item.tsx
 import { ArrowUpIcon as ArrowUpIcon3 } from "@radix-ui/react-icons";
-import { Text as Text7, Button as Button4, Spinner as Spinner2 } from "@radix-ui/themes";
-import { jsx as jsx62, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Text as Text7, Button as Button3, Spinner as Spinner2 } from "@radix-ui/themes";
+import { jsx as jsx64, jsxs as jsxs23 } 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__ */ jsx62(Content5, {
+    return /* @__PURE__ */ jsx64(Content5, {
         onClick: function() {
             createMessage({
                 // @ts-ignore-next-line
@@ -3511,26 +3594,35 @@ var Item = function(param) {
 };
 var Content5 = function(param) {
     var onClick = param.onClick, isDisabled = param.isDisabled, isPending = param.isPending, children = param.children;
-    return /* @__PURE__ */ jsxs23(Button4, {
+    return /* @__PURE__ */ jsxs23(Button3, {
         variant: "soft",
         onClick: onClick,
         disabled: isDisabled,
+        style: {
+            minHeight: "var(--base-button-height)",
+            height: "inherit",
+            flexShrink: 1
+        },
         children: [
-            /* @__PURE__ */ jsx62(Text7, {
+            /* @__PURE__ */ jsx64(Text7, {
                 size: "1",
                 weight: "regular",
                 children: children
             }),
-            /* @__PURE__ */ jsx62(Spinner2, {
+            /* @__PURE__ */ jsx64(Spinner2, {
                 loading: isPending,
-                children: /* @__PURE__ */ jsx62(ArrowUpIcon3, {})
+                children: /* @__PURE__ */ jsx64(ArrowUpIcon3, {
+                    style: {
+                        flexShrink: 0
+                    }
+                })
             })
         ]
     });
 };
 Item.Content = Content5;
 // src/components/suggestions/Suggestions/Content.tsx
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var Content6 = function(param) {
     var children = param.children;
     var isRunActiveProps = useIsRunActive();
@@ -3549,12 +3641,12 @@ var Content6 = function(param) {
         isRunActiveProps
     ]);
     if (isEmpty2(suggestions)) return null;
-    return /* @__PURE__ */ jsx63(Flex25, {
+    return /* @__PURE__ */ jsx65(Flex25, {
         gap: "2",
         py: "2",
         wrap: "wrap",
         children: suggestions.map(function(suggestion) {
-            return /* @__PURE__ */ jsx63(Item, {
+            return /* @__PURE__ */ jsx65(Item, {
                 suggestion: suggestion,
                 isDisabled: isDisabled
             }, suggestion);
@@ -3562,7 +3654,7 @@ var Content6 = function(param) {
     });
 };
 // src/components/suggestions/Suggestions/index.tsx
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 var Suggestions = function(param) {
     var children = param.children;
     var latestMessageProps = useLatestMessage();
@@ -3575,14 +3667,14 @@ var Suggestions = function(param) {
     ]);
     if (latestMessageProps.isLoading) return null;
     if (isDisabled) return null;
-    return /* @__PURE__ */ jsx64(Content6, {
+    return /* @__PURE__ */ jsx66(Content6, {
         children: children
     });
 };
 Suggestions.Item = Item;
 // src/components/markdown/MarkdownProvider/index.tsx
 import { useMemo as useMemo16 } from "react";
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
 var MarkdownProvider = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
@@ -3594,7 +3686,7 @@ var MarkdownProvider = function(_param) {
         rest,
         prevMarkdownContext
     ]);
-    return /* @__PURE__ */ jsx65(MarkdownContext.Provider, {
+    return /* @__PURE__ */ jsx67(MarkdownContext.Provider, {
         value: value,
         children: children
     });