@superinterface/react 3.19.1 → 3.20.0

package/dist/index.js

@@ -37811,27 +37811,11 @@ var SuperinterfaceProvider = function(_ref) {
     });
 };
 // src/components/threads/Thread/Messages/index.tsx
-import { Flex as Flex18 } from "@radix-ui/themes";
+import { Flex as Flex19 } from "@radix-ui/themes";
 // src/components/threads/Thread/Message/index.tsx
 import { c as _c26 } from "react-compiler-runtime";
 import { useMemo as useMemo10 } from "react";
-import { isEmpty as isEmpty2 } from "radash";
 import { Box as Box9 } from "@radix-ui/themes";
-// src/components/skeletons/StartingContentSkeleton/index.tsx
-import { Skeleton } from "@radix-ui/themes";
-import { jsx as _jsx2 } from "react/jsx-runtime";
-var StartingContentSkeleton = function() {
-    return /* @__PURE__ */ _jsx2(Skeleton, {
-        loading: true,
-        mt: "1",
-        height: "var(--space-4)",
-        width: "var(--space-4)",
-        style: {
-            borderRadius: "var(--radius-6)",
-            flexShrink: 0
-        }
-    });
-};
 // src/components/runSteps/RunSteps/index.tsx
 import { c as _c8 } from "react-compiler-runtime";
 import { Flex as Flex5 } from "@radix-ui/themes";
@@ -37853,7 +37837,7 @@ import { useContext as useContext2 } from "react";
 import { createContext as createContext2 } from "react";
 var FunctionComponentsContext = /* @__PURE__ */ createContext2({});
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/index.tsx
-import { jsx as _jsx3 } from "react/jsx-runtime";
+import { jsx as _jsx2 } from "react/jsx-runtime";
 var Fn = function(t0) {
     var $ = _c(4);
     var fn = t0.fn, runStep = t0.runStep;
@@ -37862,7 +37846,7 @@ var Fn = function(t0) {
     var Component2 = functionComponentsContext[fn.name] || componentsContext.components.Function;
     var t1;
     if ($[0] !== Component2 || $[1] !== fn || $[2] !== runStep) {
-        t1 = /* @__PURE__ */ _jsx3(Component2, {
+        t1 = /* @__PURE__ */ _jsx2(Component2, {
             fn: fn,
             runStep: runStep
         });
@@ -37879,13 +37863,13 @@ var Fn = function(t0) {
 import { Popover, Flex as Flex2 } from "@radix-ui/themes";
 // src/components/toolCalls/ToolCallBase/index.tsx
 import { Flex, Button } from "@radix-ui/themes";
-import { jsx as _jsx4 } from "react/jsx-runtime";
+import { jsx as _jsx3 } from "react/jsx-runtime";
 var ToolCallBase = function(_ref) {
     var children = _ref.children;
-    return /* @__PURE__ */ _jsx4(Flex, {
+    return /* @__PURE__ */ _jsx3(Flex, {
         py: "1",
         ml: "-2",
-        children: /* @__PURE__ */ _jsx4(Button, {
+        children: /* @__PURE__ */ _jsx3(Button, {
             size: "1",
             color: "gold",
             variant: "outline",
@@ -37898,10 +37882,10 @@ var ToolCallBase = function(_ref) {
 };
 // src/components/toolCalls/ToolCallBase/ToolCallTitle.tsx
 import { Text } from "@radix-ui/themes";
-import { jsx as _jsx5 } from "react/jsx-runtime";
+import { jsx as _jsx4 } from "react/jsx-runtime";
 var ToolCallTitle = function(_ref) {
     var children = _ref.children;
-    return /* @__PURE__ */ _jsx5(Text, {
+    return /* @__PURE__ */ _jsx4(Text, {
         weight: "regular",
         children: children
     });
@@ -37909,14 +37893,14 @@ var ToolCallTitle = function(_ref) {
 // src/components/toolCalls/ToolCallBase/ToolCallIcon.tsx
 import { c as _c2 } from "react-compiler-runtime";
 import { CircleIcon, CircleBackslashIcon, CheckCircledIcon } from "@radix-ui/react-icons";
-import { jsx as _jsx6 } from "react/jsx-runtime";
+import { jsx as _jsx5 } from "react/jsx-runtime";
 var ToolCallIcon = function(t0) {
     var $ = _c2(3);
     var runStep = t0.runStep;
     if (runStep.completed_at) {
         var t1;
         if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-            t1 = /* @__PURE__ */ _jsx6(CheckCircledIcon, {});
+            t1 = /* @__PURE__ */ _jsx5(CheckCircledIcon, {});
             $[0] = t1;
         } else {
             t1 = $[0];
@@ -37926,7 +37910,7 @@ var ToolCallIcon = function(t0) {
         if (runStep.cancelled_at || runStep.failed_at || runStep.status === "expired") {
             var _t;
             if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-                _t = /* @__PURE__ */ _jsx6(CircleBackslashIcon, {});
+                _t = /* @__PURE__ */ _jsx5(CircleBackslashIcon, {});
                 $[1] = _t;
             } else {
                 _t = $[1];
@@ -37935,7 +37919,7 @@ var ToolCallIcon = function(t0) {
         } else {
             var _t2;
             if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-                _t2 = /* @__PURE__ */ _jsx6(CircleIcon, {});
+                _t2 = /* @__PURE__ */ _jsx5(CircleIcon, {});
                 $[2] = _t2;
             } else {
                 _t2 = $[2];
@@ -37947,7 +37931,7 @@ var ToolCallIcon = function(t0) {
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/CodeInterpreter/Content.tsx
 import { c as _c3 } from "react-compiler-runtime";
 import { Code, Box } from "@radix-ui/themes";
-import { jsx as _jsx7, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx6, jsxs as _jsxs } from "react/jsx-runtime";
 var Content = function(t0) {
     var $ = _c3(10);
     var codeInterpreter = t0.codeInterpreter;
@@ -37966,7 +37950,7 @@ var Content = function(t0) {
     }
     var t2;
     if ($[1] !== codeInterpreter.input) {
-        t2 = /* @__PURE__ */ _jsx7(Box, {
+        t2 = /* @__PURE__ */ _jsx6(Box, {
             children: codeInterpreter.input
         });
         $[1] = codeInterpreter.input;
@@ -37984,7 +37968,7 @@ var Content = function(t0) {
     }
     var t4;
     if ($[5] !== t3) {
-        t4 = /* @__PURE__ */ _jsx7(Box, {
+        t4 = /* @__PURE__ */ _jsx6(Box, {
             children: t3
         });
         $[5] = t3;
@@ -38012,28 +37996,28 @@ var Content = function(t0) {
     return t5;
 };
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/CodeInterpreter/index.tsx
-import { jsx as _jsx8, jsxs as _jsxs2 } from "react/jsx-runtime";
+import { jsx as _jsx7, jsxs as _jsxs2 } from "react/jsx-runtime";
 var CodeInterpreter = function(_ref) {
     var codeInterpreter = _ref.codeInterpreter, runStep = _ref.runStep;
     return /* @__PURE__ */ _jsxs2(Popover.Root, {
         children: [
-            /* @__PURE__ */ _jsx8(Popover.Trigger, {
-                children: /* @__PURE__ */ _jsx8(Flex2, {
+            /* @__PURE__ */ _jsx7(Popover.Trigger, {
+                children: /* @__PURE__ */ _jsx7(Flex2, {
                     children: /* @__PURE__ */ _jsxs2(ToolCallBase, {
                         children: [
-                            /* @__PURE__ */ _jsx8(ToolCallIcon, {
+                            /* @__PURE__ */ _jsx7(ToolCallIcon, {
                                 runStep: runStep
                             }),
-                            /* @__PURE__ */ _jsx8(ToolCallTitle, {
+                            /* @__PURE__ */ _jsx7(ToolCallTitle, {
                                 children: "Using code interpreter"
                             })
                         ]
                     })
                 })
             }),
-            /* @__PURE__ */ _jsx8(Popover.Content, {
+            /* @__PURE__ */ _jsx7(Popover.Content, {
                 maxHeight: "200px",
-                children: /* @__PURE__ */ _jsx8(Content, {
+                children: /* @__PURE__ */ _jsx7(Content, {
                     codeInterpreter: codeInterpreter
                 })
             })
@@ -38041,27 +38025,27 @@ var CodeInterpreter = function(_ref) {
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/FileSearch.tsx
-import { jsx as _jsx9, jsxs as _jsxs3 } from "react/jsx-runtime";
+import { jsx as _jsx8, jsxs as _jsxs3 } from "react/jsx-runtime";
 var FileSearch = function(_ref) {
     var runStep = _ref.runStep, toolCall = _ref.toolCall;
     return /* @__PURE__ */ _jsxs3(ToolCallBase, {
         children: [
-            /* @__PURE__ */ _jsx9(ToolCallIcon, {
+            /* @__PURE__ */ _jsx8(ToolCallIcon, {
                 runStep: runStep
             }),
-            /* @__PURE__ */ _jsx9(ToolCallTitle, {
+            /* @__PURE__ */ _jsx8(ToolCallTitle, {
                 children: "Searching files"
             })
         ]
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/Fallback.tsx
-import { jsx as _jsx10, jsxs as _jsxs4 } from "react/jsx-runtime";
+import { jsx as _jsx9, jsxs as _jsxs4 } from "react/jsx-runtime";
 var Fallback = function(_ref) {
     var runStep = _ref.runStep, toolCall = _ref.toolCall;
     return /* @__PURE__ */ _jsxs4(ToolCallBase, {
         children: [
-            /* @__PURE__ */ _jsx10(ToolCallIcon, {
+            /* @__PURE__ */ _jsx9(ToolCallIcon, {
                 runStep: runStep
             }),
             /* @__PURE__ */ _jsxs4(ToolCallTitle, {
@@ -38074,14 +38058,14 @@ var Fallback = function(_ref) {
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx
-import { jsx as _jsx11 } from "react/jsx-runtime";
+import { jsx as _jsx10 } from "react/jsx-runtime";
 var ToolCall = function(t0) {
     var $ = _c4(12);
     var toolCall = t0.toolCall, runStep = t0.runStep;
     if (toolCall.type === "function") {
         var _t;
         if ($[0] !== runStep || $[1] !== toolCall.function) {
-            _t = /* @__PURE__ */ _jsx11(Fn, {
+            _t = /* @__PURE__ */ _jsx10(Fn, {
                 fn: toolCall.function,
                 runStep: runStep
             });
@@ -38096,7 +38080,7 @@ var ToolCall = function(t0) {
     if (toolCall.type === "code_interpreter") {
         var _t2;
         if ($[3] !== runStep || $[4] !== toolCall.code_interpreter) {
-            _t2 = /* @__PURE__ */ _jsx11(CodeInterpreter, {
+            _t2 = /* @__PURE__ */ _jsx10(CodeInterpreter, {
                 codeInterpreter: toolCall.code_interpreter,
                 runStep: runStep
             });
@@ -38111,7 +38095,7 @@ var ToolCall = function(t0) {
     if (toolCall.type === "file_search") {
         var _t3;
         if ($[6] !== runStep || $[7] !== toolCall) {
-            _t3 = /* @__PURE__ */ _jsx11(FileSearch, {
+            _t3 = /* @__PURE__ */ _jsx10(FileSearch, {
                 toolCall: toolCall,
                 runStep: runStep
             });
@@ -38125,7 +38109,7 @@ var ToolCall = function(t0) {
     }
     var t1;
     if ($[9] !== runStep || $[10] !== toolCall) {
-        t1 = /* @__PURE__ */ _jsx11(Fallback, {
+        t1 = /* @__PURE__ */ _jsx10(Fallback, {
             toolCall: toolCall,
             runStep: runStep
         });
@@ -38138,10 +38122,10 @@ var ToolCall = function(t0) {
     return t1;
 };
 // src/components/runSteps/RunStep/ToolCalls/index.tsx
-import { jsx as _jsx12, jsxs as _jsxs5 } from "react/jsx-runtime";
+import { jsx as _jsx11, jsxs as _jsxs5 } from "react/jsx-runtime";
 var Root = function(_ref) {
     var children = _ref.children, className = _ref.className, style = _ref.style;
-    return /* @__PURE__ */ _jsx12(Flex3, {
+    return /* @__PURE__ */ _jsx11(Flex3, {
         direction: "column",
         className: className,
         style: style,
@@ -38154,7 +38138,7 @@ var StartingToolCalls = function() {
     var StartingToolCalls3 = componentsContext.components.StartingToolCalls;
     var t0;
     if ($[0] !== StartingToolCalls3) {
-        t0 = /* @__PURE__ */ _jsx12(StartingToolCalls3, {});
+        t0 = /* @__PURE__ */ _jsx11(StartingToolCalls3, {});
         $[0] = StartingToolCalls3;
         $[1] = t0;
     } else {
@@ -38168,9 +38152,9 @@ var ToolCalls = function(_ref2) {
         className: className,
         style: style,
         children: [
-            !stepDetails.tool_calls.length && /* @__PURE__ */ _jsx12(StartingToolCalls, {}),
+            !stepDetails.tool_calls.length && /* @__PURE__ */ _jsx11(StartingToolCalls, {}),
             stepDetails.tool_calls.map(function(toolCall) {
-                return /* @__PURE__ */ _jsx12(ToolCall, {
+                return /* @__PURE__ */ _jsx11(ToolCall, {
                     toolCall: toolCall,
                     runStep: runStep
                 }, toolCall.id);
@@ -38182,14 +38166,14 @@ ToolCalls.Root = Root;
 ToolCalls.StartingToolCalls = StartingToolCalls;
 ToolCalls.ToolCall = ToolCall;
 // src/components/runSteps/RunStep/index.tsx
-import { jsx as _jsx13 } from "react/jsx-runtime";
+import { jsx as _jsx12 } from "react/jsx-runtime";
 var RunStep = function(t0) {
     var $ = _c6(4);
     var runStep = t0.runStep, className = t0.className, style = t0.style;
     if (runStep.step_details.type === "tool_calls") {
         var t1;
         if ($[0] !== className || $[1] !== runStep || $[2] !== style) {
-            t1 = /* @__PURE__ */ _jsx13(ToolCalls, {
+            t1 = /* @__PURE__ */ _jsx12(ToolCalls, {
                 className: className,
                 style: style,
                 stepDetails: runStep.step_details,
@@ -38230,7 +38214,7 @@ var formattedJsonOrRaw = function(_ref) {
     }
 };
 // src/components/functions/FunctionBase/Content/index.tsx
-import { jsx as _jsx14, jsxs as _jsxs6 } from "react/jsx-runtime";
+import { jsx as _jsx13, jsxs as _jsxs6 } from "react/jsx-runtime";
 var Content2 = function(t0) {
     var $ = _c7(12);
     var fn = t0.fn;
@@ -38272,7 +38256,7 @@ var Content2 = function(t0) {
     }
     var t6;
     if ($[5] !== args) {
-        t6 = args && /* @__PURE__ */ _jsx14(Box2, {
+        t6 = args && /* @__PURE__ */ _jsx13(Box2, {
             children: args
         });
         $[5] = args;
@@ -38282,7 +38266,7 @@ var Content2 = function(t0) {
     }
     var t7;
     if ($[7] !== output) {
-        t7 = output && /* @__PURE__ */ _jsx14(Box2, {
+        t7 = output && /* @__PURE__ */ _jsx13(Box2, {
             children: output
         });
         $[7] = output;
@@ -38310,30 +38294,30 @@ var Content2 = function(t0) {
     return t8;
 };
 // src/components/functions/FunctionBase/index.tsx
-import { jsx as _jsx15, jsxs as _jsxs7 } from "react/jsx-runtime";
+import { jsx as _jsx14, jsxs as _jsxs7 } from "react/jsx-runtime";
 var FunctionBase = function(_ref) {
     var fn = _ref.fn, runStep = _ref.runStep, title2 = _ref.title;
     return /* @__PURE__ */ _jsxs7(Popover2.Root, {
         children: [
-            /* @__PURE__ */ _jsx15(Popover2.Trigger, {
-                children: /* @__PURE__ */ _jsx15(Flex4, {
+            /* @__PURE__ */ _jsx14(Popover2.Trigger, {
+                children: /* @__PURE__ */ _jsx14(Flex4, {
                     children: /* @__PURE__ */ _jsxs7(ToolCallBase, {
                         children: [
-                            /* @__PURE__ */ _jsx15(ToolCallIcon, {
+                            /* @__PURE__ */ _jsx14(ToolCallIcon, {
                                 runStep: runStep
                             }),
-                            /* @__PURE__ */ _jsx15(ToolCallTitle, {
+                            /* @__PURE__ */ _jsx14(ToolCallTitle, {
                                 children: title2
                             })
                         ]
                     })
                 })
             }),
-            /* @__PURE__ */ _jsx15(Popover2.Content, {
+            /* @__PURE__ */ _jsx14(Popover2.Content, {
                 style: {
                     maxHeight: "200px"
                 },
-                children: /* @__PURE__ */ _jsx15(Content2, {
+                children: /* @__PURE__ */ _jsx14(Content2, {
                     fn: fn
                 })
             })
@@ -38352,10 +38336,10 @@ var title = function(_ref) {
     }
 };
 // src/components/functions/Function/index.tsx
-import { jsx as _jsx16 } from "react/jsx-runtime";
+import { jsx as _jsx15 } from "react/jsx-runtime";
 var Function2 = function(_ref) {
     var fn = _ref.fn, runStep = _ref.runStep;
-    return /* @__PURE__ */ _jsx16(FunctionBase, {
+    return /* @__PURE__ */ _jsx15(FunctionBase, {
         fn: fn,
         runStep: runStep,
         title: title({
@@ -38367,23 +38351,23 @@ var Function2 = function(_ref) {
 // src/components/toolCalls/StartingToolCalls/index.tsx
 import { Popover as Popover3, Text as Text2 } from "@radix-ui/themes";
 import { CircleIcon as CircleIcon2 } from "@radix-ui/react-icons";
-import { jsx as _jsx17, jsxs as _jsxs8 } from "react/jsx-runtime";
+import { jsx as _jsx16, jsxs as _jsxs8 } from "react/jsx-runtime";
 var StartingToolCalls2 = function() {
     return /* @__PURE__ */ _jsxs8(Popover3.Root, {
         children: [
             /* @__PURE__ */ _jsxs8(ToolCallBase, {
                 children: [
-                    /* @__PURE__ */ _jsx17(CircleIcon2, {}),
-                    /* @__PURE__ */ _jsx17(ToolCallTitle, {
+                    /* @__PURE__ */ _jsx16(CircleIcon2, {}),
+                    /* @__PURE__ */ _jsx16(ToolCallTitle, {
                         children: "Starting actions"
                     })
                 ]
             }),
-            /* @__PURE__ */ _jsx17(Popover3.Content, {
+            /* @__PURE__ */ _jsx16(Popover3.Content, {
                 style: {
                     maxHeight: "500px"
                 },
-                children: /* @__PURE__ */ _jsx17(Text2, {
+                children: /* @__PURE__ */ _jsx16(Text2, {
                     children: "Starting some actions"
                 })
             })
@@ -38399,7 +38383,7 @@ var ComponentsContext = /* @__PURE__ */ createContext3({
     }
 });
 // src/components/runSteps/RunSteps/index.tsx
-import { jsx as _jsx18 } from "react/jsx-runtime";
+import { jsx as _jsx17 } from "react/jsx-runtime";
 var RunSteps = function(t0) {
     var $ = _c8(7);
     var runSteps = t0.runSteps;
@@ -38410,7 +38394,7 @@ var RunSteps = function(t0) {
         var _t;
         if ($[3] !== Component2) {
             _t = function(runStep) {
-                return /* @__PURE__ */ _jsx18(Component2, {
+                return /* @__PURE__ */ _jsx17(Component2, {
                     runStep: runStep
                 }, runStep.id);
             };
@@ -38428,7 +38412,7 @@ var RunSteps = function(t0) {
     }
     var t2;
     if ($[5] !== t1) {
-        t2 = /* @__PURE__ */ _jsx18(Flex5, {
+        t2 = /* @__PURE__ */ _jsx17(Flex5, {
             direction: "column-reverse",
             children: t1
         });
@@ -38439,32 +38423,6 @@ var RunSteps = function(t0) {
     }
     return t2;
 };
-// src/hooks/messages/useIsMutatingMessage/index.ts
-import { c as _c9 } from "react-compiler-runtime";
-import { useMemo as useMemo2 } from "react";
-import { useIsMutating } from "@tanstack/react-query";
-var useIsMutatingMessage = function() {
-    var $ = _c9(2);
-    var threadContext = useSuperinterfaceContext();
-    var t0;
-    if ($[0] !== threadContext.variables) {
-        t0 = {
-            mutationKey: [
-                "createMessage",
-                threadContext.variables
-            ]
-        };
-        $[0] = threadContext.variables;
-        $[1] = t0;
-    } else {
-        t0 = $[1];
-    }
-    var mutatingMessagesCount = useIsMutating(t0);
-    var t1;
-    t1 = mutatingMessagesCount > 0;
-    var isMutatingMessage = t1;
-    return isMutatingMessage;
-};
 // src/contexts/messages/MessageContext/index.ts
 import { createContext as createContext4 } from "react";
 var MessageContext = /* @__PURE__ */ createContext4({
@@ -38473,20 +38431,20 @@ var MessageContext = /* @__PURE__ */ createContext4({
 // src/components/threads/Thread/Message/Provider.tsx
 var Provider = MessageContext.Provider;
 // src/components/threads/Thread/Message/Attachments/index.tsx
-import { c as _c10 } from "react-compiler-runtime";
+import { c as _c9 } from "react-compiler-runtime";
 import { Flex as Flex6, Badge } from "@radix-ui/themes";
 import { FileIcon } from "@radix-ui/react-icons";
-import { jsx as _jsx19, jsxs as _jsxs9 } from "react/jsx-runtime";
+import { jsx as _jsx18, jsxs as _jsxs9 } from "react/jsx-runtime";
 var Attachments = function(t0) {
     var _message$attachments;
-    var $ = _c10(4);
+    var $ = _c9(4);
     var message = t0.message;
     if (!((_message$attachments = message.attachments) !== null && _message$attachments !== void 0 && _message$attachments.length)) {
         return null;
     }
     var t1;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-        t1 = /* @__PURE__ */ _jsx19(FileIcon, {});
+        t1 = /* @__PURE__ */ _jsx18(FileIcon, {});
         $[0] = t1;
     } else {
         t1 = $[0];
@@ -38494,7 +38452,7 @@ var Attachments = function(t0) {
     var t2 = message.attachments.length > 1 ? "s" : "";
     var t3;
     if ($[1] !== message.attachments.length || $[2] !== t2) {
-        t3 = /* @__PURE__ */ _jsx19(Flex6, {
+        t3 = /* @__PURE__ */ _jsx18(Flex6, {
             align: "start",
             pb: "1",
             children: /* @__PURE__ */ _jsxs9(Badge, {
@@ -38674,12 +38632,12 @@ import { createContext as createContext6 } from "react";
 import { Heading, Table } from "@radix-ui/themes";
 // src/contexts/markdown/MarkdownContext/lib/components/Paragraph.tsx
 import { Box as Box3, Text as Text3 } from "@radix-ui/themes";
-import { jsx as _jsx20 } from "react/jsx-runtime";
+import { jsx as _jsx19 } from "react/jsx-runtime";
 var Paragraph = function(_ref) {
     var children = _ref.children;
-    return /* @__PURE__ */ _jsx20(Box3, {
+    return /* @__PURE__ */ _jsx19(Box3, {
         pb: "3",
-        children: /* @__PURE__ */ _jsx20(Text3, {
+        children: /* @__PURE__ */ _jsx19(Text3, {
             size: "3",
             style: {
                 whiteSpace: "pre-line",
@@ -38691,10 +38649,10 @@ var Paragraph = function(_ref) {
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Link.tsx
 import { Link as RadixLink } from "@radix-ui/themes";
-import { jsx as _jsx21 } from "react/jsx-runtime";
+import { jsx as _jsx20 } from "react/jsx-runtime";
 var Link = function(_ref) {
     var children = _ref.children, href = _ref.href, download = _ref.download, _ref_target = _ref.target, target = _ref_target === void 0 ? "_blank" : _ref_target;
-    return /* @__PURE__ */ _jsx21(RadixLink, {
+    return /* @__PURE__ */ _jsx20(RadixLink, {
         href: href,
         target: target,
         download: download,
@@ -38703,13 +38661,13 @@ var Link = function(_ref) {
 };
 // src/contexts/markdown/MarkdownContext/lib/components/UnorderedList.tsx
 import { Box as Box4 } from "@radix-ui/themes";
-import { jsx as _jsx22 } from "react/jsx-runtime";
+import { jsx as _jsx21 } from "react/jsx-runtime";
 var UnorderedList = function(_ref) {
     var children = _ref.children;
-    return /* @__PURE__ */ _jsx22(Box4, {
+    return /* @__PURE__ */ _jsx21(Box4, {
         pb: "3",
         asChild: true,
-        children: /* @__PURE__ */ _jsx22("ul", {
+        children: /* @__PURE__ */ _jsx21("ul", {
             style: {
                 listStylePosition: "inside"
             },
@@ -38719,13 +38677,13 @@ var UnorderedList = function(_ref) {
 };
 // src/contexts/markdown/MarkdownContext/lib/components/OrderedList.tsx
 import { Box as Box5 } from "@radix-ui/themes";
-import { jsx as _jsx23 } from "react/jsx-runtime";
+import { jsx as _jsx22 } from "react/jsx-runtime";
 var OrderedList = function(_ref) {
     var children = _ref.children;
-    return /* @__PURE__ */ _jsx23(Box5, {
+    return /* @__PURE__ */ _jsx22(Box5, {
         pb: "3",
         asChild: true,
-        children: /* @__PURE__ */ _jsx23("ol", {
+        children: /* @__PURE__ */ _jsx22("ol", {
             style: {
                 listStylePosition: "inside"
             },
@@ -38735,12 +38693,12 @@ var OrderedList = function(_ref) {
 };
 // src/contexts/markdown/MarkdownContext/lib/components/ListItem.tsx
 import { Box as Box6 } from "@radix-ui/themes";
-import { jsx as _jsx24 } from "react/jsx-runtime";
+import { jsx as _jsx23 } from "react/jsx-runtime";
 var ListItem = function(_ref) {
     var children = _ref.children;
-    return /* @__PURE__ */ _jsx24(Box6, {
+    return /* @__PURE__ */ _jsx23(Box6, {
         pb: "1",
-        children: /* @__PURE__ */ _jsx24("li", {
+        children: /* @__PURE__ */ _jsx23("li", {
             style: {
                 wordBreak: "break-word"
             },
@@ -38750,19 +38708,19 @@ var ListItem = function(_ref) {
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Strong.tsx
 import { Strong as RadixStrong } from "@radix-ui/themes";
-import { jsx as _jsx25 } from "react/jsx-runtime";
+import { jsx as _jsx24 } from "react/jsx-runtime";
 var Strong = function(_ref) {
     var children = _ref.children;
-    return /* @__PURE__ */ _jsx25(RadixStrong, {
+    return /* @__PURE__ */ _jsx24(RadixStrong, {
         children: children
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Pre.tsx
 import { Box as Box7 } from "@radix-ui/themes";
-import { jsx as _jsx26 } from "react/jsx-runtime";
+import { jsx as _jsx25 } from "react/jsx-runtime";
 var Pre = function(_ref) {
     var children = _ref.children;
-    return /* @__PURE__ */ _jsx26(Box7, {
+    return /* @__PURE__ */ _jsx25(Box7, {
         style: {
             whiteSpace: "pre-wrap",
             wordBreak: "break-word"
@@ -38777,11 +38735,11 @@ import { Code as RadixCode } from "@radix-ui/themes";
 import { c as _c14 } from "react-compiler-runtime";
 import { useMemo as useMemo6 } from "react";
 // src/hooks/messages/useLatestMessage/index.ts
-import { c as _c12 } from "react-compiler-runtime";
-import { useMemo as useMemo4 } from "react";
-// src/hooks/messages/useMessages/index.tsx
 import { c as _c11 } from "react-compiler-runtime";
 import { useMemo as useMemo3 } from "react";
+// src/hooks/messages/useMessages/index.tsx
+import { c as _c10 } from "react-compiler-runtime";
+import { useMemo as useMemo2 } from "react";
 import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
 // src/lib/threads/queryOptions/index.ts
 import { infiniteQueryOptions } from "@tanstack/react-query";
@@ -39054,7 +39012,7 @@ var messages = function(_ref) {
     }, []);
 };
 var useMessages = function() {
-    var $ = _c11(9);
+    var $ = _c10(9);
     var queryClient = useQueryClient();
     var threadContext = useSuperinterfaceContext();
     var superinterfaceContext = useSuperinterfaceContext();
@@ -39143,7 +39101,7 @@ function _toPrimitive5(t, r) {
     return ("string" === r ? String : Number)(t);
 }
 var useLatestMessage = function() {
-    var $ = _c12(3);
+    var $ = _c11(3);
     var props = useMessages();
     var t0;
     var t1 = props.messages[0] || null;
@@ -39165,6 +39123,33 @@ var useLatestMessage = function() {
 import { useMemo as useMemo5 } from "react";
 import { isEmpty } from "radash";
 import { onlyText } from "react-children-utilities";
+// src/hooks/messages/useIsMutatingMessage/index.ts
+import { c as _c12 } from "react-compiler-runtime";
+import { useMemo as useMemo4 } from "react";
+import { useIsMutating } from "@tanstack/react-query";
+var useIsMutatingMessage = function() {
+    var $ = _c12(2);
+    var threadContext = useSuperinterfaceContext();
+    var t0;
+    if ($[0] !== threadContext.variables) {
+        t0 = {
+            mutationKey: [
+                "createMessage",
+                threadContext.variables
+            ]
+        };
+        $[0] = threadContext.variables;
+        $[1] = t0;
+    } else {
+        t0 = $[1];
+    }
+    var mutatingMessagesCount = useIsMutating(t0);
+    var t1;
+    t1 = mutatingMessagesCount > 0;
+    var isMutatingMessage = t1;
+    return isMutatingMessage;
+};
+// src/components/suggestions/Suggestions/Content.tsx
 import { Flex as Flex7 } from "@radix-ui/themes";
 // src/components/suggestions/Suggestions/Item.tsx
 import { c as _c13 } from "react-compiler-runtime";
@@ -40618,7 +40603,7 @@ var createMessageDefaultOnError = function(_ref) {
     };
 };
 // src/components/suggestions/Suggestions/Item.tsx
-import { jsx as _jsx27, jsxs as _jsxs10 } from "react/jsx-runtime";
+import { jsx as _jsx26, jsxs as _jsxs10 } from "react/jsx-runtime";
 function ownKeys19(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -40708,7 +40693,7 @@ var Item = function(t0) {
     }
     var t4;
     if ($[9] !== className || $[10] !== isDisabled || $[11] !== isPending || $[12] !== style || $[13] !== suggestion || $[14] !== t3) {
-        t4 = /* @__PURE__ */ _jsx27(Content3, {
+        t4 = /* @__PURE__ */ _jsx26(Content3, {
             onClick: t3,
             isDisabled: isDisabled,
             isPending: isPending,
@@ -40741,14 +40726,14 @@ var Content3 = function(_ref) {
             flexShrink: 1
         }, style !== null && style !== void 0 ? style : {}),
         children: [
-            /* @__PURE__ */ _jsx27(Text4, {
+            /* @__PURE__ */ _jsx26(Text4, {
                 size: "1",
                 weight: "regular",
                 children: children
             }),
-            /* @__PURE__ */ _jsx27(Spinner, {
+            /* @__PURE__ */ _jsx26(Spinner, {
                 loading: isPending,
-                children: /* @__PURE__ */ _jsx27(ArrowUpIcon, {
+                children: /* @__PURE__ */ _jsx26(ArrowUpIcon, {
                     style: {
                         flexShrink: 0
                     }
@@ -40759,7 +40744,7 @@ var Content3 = function(_ref) {
 };
 Item.Content = Content3;
 // src/components/suggestions/Suggestions/Content.tsx
-import { jsx as _jsx28 } from "react/jsx-runtime";
+import { jsx as _jsx27 } from "react/jsx-runtime";
 var Content4 = function(_ref) {
     var children = _ref.children, className = _ref.className, style = _ref.style;
     var isMutatingMessage = useIsMutatingMessage();
@@ -40773,14 +40758,14 @@ var Content4 = function(_ref) {
         children
     ]);
     if (isEmpty(suggestions)) return null;
-    return /* @__PURE__ */ _jsx28(Flex7, {
+    return /* @__PURE__ */ _jsx27(Flex7, {
         gap: "2",
         py: "2",
         wrap: "wrap",
         className: className,
         style: style,
         children: suggestions.map(function(suggestion) {
-            return /* @__PURE__ */ _jsx28(Item, {
+            return /* @__PURE__ */ _jsx27(Item, {
                 suggestion: suggestion,
                 isDisabled: isMutatingMessage
             }, suggestion);
@@ -40788,7 +40773,7 @@ var Content4 = function(_ref) {
     });
 };
 // src/components/suggestions/Suggestions/index.tsx
-import { jsx as _jsx29 } from "react/jsx-runtime";
+import { jsx as _jsx28 } from "react/jsx-runtime";
 var Suggestions = function(t0) {
     var _latestMessageProps$l;
     var $ = _c14(4);
@@ -40805,7 +40790,7 @@ var Suggestions = function(t0) {
     }
     var t2;
     if ($[0] !== children || $[1] !== className || $[2] !== style) {
-        t2 = /* @__PURE__ */ _jsx29(Content4, {
+        t2 = /* @__PURE__ */ _jsx28(Content4, {
             className: className,
             style: style,
             children: children
@@ -40821,14 +40806,14 @@ var Suggestions = function(t0) {
 };
 Suggestions.Item = Item;
 // src/contexts/markdown/MarkdownContext/lib/components/Code.tsx
-import { jsx as _jsx30 } from "react/jsx-runtime";
+import { jsx as _jsx29 } from "react/jsx-runtime";
 var Code3 = function(t0) {
     var $ = _c15(5);
     var children = t0.children, className = t0.className;
     if (className === "language-suggestions") {
         var _t;
         if ($[0] !== children) {
-            _t = /* @__PURE__ */ _jsx30(Suggestions, {
+            _t = /* @__PURE__ */ _jsx29(Suggestions, {
                 children: children
             });
             $[0] = children;
@@ -40849,7 +40834,7 @@ var Code3 = function(t0) {
     }
     var t2;
     if ($[3] !== children) {
-        t2 = /* @__PURE__ */ _jsx30(RadixCode, {
+        t2 = /* @__PURE__ */ _jsx29(RadixCode, {
             style: t1,
             children: children
         });
@@ -40864,7 +40849,7 @@ var Code3 = function(t0) {
 import { c as _c20 } from "react-compiler-runtime";
 // src/components/images/Image.tsx
 import { Box as Box8 } from "@radix-ui/themes";
-import { jsx as _jsx31 } from "react/jsx-runtime";
+import { jsx as _jsx30 } from "react/jsx-runtime";
 function ownKeys20(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -40909,9 +40894,9 @@ function _toPrimitive20(t, r) {
     return ("string" === r ? String : Number)(t);
 }
 var Image = function(props) {
-    return /* @__PURE__ */ _jsx31(Box8, {
+    return /* @__PURE__ */ _jsx30(Box8, {
         pb: "3",
-        children: /* @__PURE__ */ _jsx31("img", _objectSpread20(_objectSpread20({}, props), {}, {
+        children: /* @__PURE__ */ _jsx30("img", _objectSpread20(_objectSpread20({}, props), {}, {
             style: {
                 maxWidth: "100%",
                 height: "auto"
@@ -40974,17 +40959,17 @@ import { c as _c16 } from "react-compiler-runtime";
 import { PlayButton as VidstackPlayButton, useMediaState } from "@vidstack/react";
 import { IconButton } from "@radix-ui/themes";
 import { PlayIcon, PauseIcon } from "@radix-ui/react-icons";
-import { jsx as _jsx32 } from "react/jsx-runtime";
+import { jsx as _jsx31 } from "react/jsx-runtime";
 var PlayButton = function() {
     var $ = _c16(2);
     var isPaused = useMediaState("paused");
     var t0;
     if ($[0] !== isPaused) {
-        t0 = /* @__PURE__ */ _jsx32(IconButton, {
+        t0 = /* @__PURE__ */ _jsx31(IconButton, {
             variant: "ghost",
             asChild: true,
-            children: /* @__PURE__ */ _jsx32(VidstackPlayButton, {
-                children: isPaused ? /* @__PURE__ */ _jsx32(PlayIcon, {}) : /* @__PURE__ */ _jsx32(PauseIcon, {})
+            children: /* @__PURE__ */ _jsx31(VidstackPlayButton, {
+                children: isPaused ? /* @__PURE__ */ _jsx31(PlayIcon, {}) : /* @__PURE__ */ _jsx31(PauseIcon, {})
             })
         });
         $[0] = isPaused;
@@ -40999,7 +40984,7 @@ import { c as _c17 } from "react-compiler-runtime";
 import { MuteButton, useMediaState as useMediaState2, useMediaRemote } from "@vidstack/react";
 import { IconButton as IconButton2, HoverCard, Slider } from "@radix-ui/themes";
 import { SpeakerModerateIcon, SpeakerOffIcon } from "@radix-ui/react-icons";
-import { jsx as _jsx33, jsxs as _jsxs11 } from "react/jsx-runtime";
+import { jsx as _jsx32, jsxs as _jsxs11 } from "react/jsx-runtime";
 var VolumeButton = function() {
     var $ = _c17(13);
     var volume = useMediaState2("volume");
@@ -41007,12 +40992,12 @@ var VolumeButton = function() {
     var remote = useMediaRemote();
     var t0;
     if ($[0] !== isMuted || $[1] !== volume) {
-        t0 = /* @__PURE__ */ _jsx33(HoverCard.Trigger, {
-            children: /* @__PURE__ */ _jsx33(IconButton2, {
+        t0 = /* @__PURE__ */ _jsx32(HoverCard.Trigger, {
+            children: /* @__PURE__ */ _jsx32(IconButton2, {
                 variant: "ghost",
                 asChild: true,
-                children: /* @__PURE__ */ _jsx33(MuteButton, {
-                    children: isMuted || volume === 0 ? /* @__PURE__ */ _jsx33(SpeakerOffIcon, {}) : /* @__PURE__ */ _jsx33(SpeakerModerateIcon, {})
+                children: /* @__PURE__ */ _jsx32(MuteButton, {
+                    children: isMuted || volume === 0 ? /* @__PURE__ */ _jsx32(SpeakerOffIcon, {}) : /* @__PURE__ */ _jsx32(SpeakerModerateIcon, {})
                 })
             })
         });
@@ -41046,11 +41031,11 @@ var VolumeButton = function() {
     }
     var t4;
     if ($[7] !== t2 || $[8] !== t3) {
-        t4 = /* @__PURE__ */ _jsx33(HoverCard.Content, {
+        t4 = /* @__PURE__ */ _jsx32(HoverCard.Content, {
             size: "1",
             side: "top",
             height: "100px",
-            children: /* @__PURE__ */ _jsx33(Slider, {
+            children: /* @__PURE__ */ _jsx32(Slider, {
                 size: "1",
                 variant: "soft",
                 orientation: "vertical",
@@ -41085,7 +41070,7 @@ import { c as _c18 } from "react-compiler-runtime";
 import { useState, useEffect, useMemo as useMemo7 } from "react";
 import { useMediaState as useMediaState3, useMediaRemote as useMediaRemote2 } from "@vidstack/react";
 import { Slider as Slider2 } from "@radix-ui/themes";
-import { jsx as _jsx34 } from "react/jsx-runtime";
+import { jsx as _jsx33 } from "react/jsx-runtime";
 var Time = function() {
     var $ = _c18(17);
     var time = useMediaState3("currentTime");
@@ -41155,7 +41140,7 @@ var Time = function() {
     }
     var t8;
     if ($[11] !== t3 || $[12] !== t4 || $[13] !== t5 || $[14] !== t6 || $[15] !== t7) {
-        t8 = /* @__PURE__ */ _jsx34(Slider2, {
+        t8 = /* @__PURE__ */ _jsx33(Slider2, {
             size: "1",
             variant: "soft",
             value: t3,
@@ -41177,12 +41162,12 @@ var Time = function() {
 };
 // src/components/media/MediaContainer.tsx
 import { Card, Inset } from "@radix-ui/themes";
-import { jsx as _jsx35 } from "react/jsx-runtime";
+import { jsx as _jsx34 } from "react/jsx-runtime";
 var MediaContainer = function(_ref) {
     var children = _ref.children;
-    return /* @__PURE__ */ _jsx35(Card, {
+    return /* @__PURE__ */ _jsx34(Card, {
         mb: "3",
-        children: /* @__PURE__ */ _jsx35(Inset, {
+        children: /* @__PURE__ */ _jsx34(Inset, {
             clip: "padding-box",
             style: {
                 display: "flex",
@@ -41197,17 +41182,17 @@ import { c as _c19 } from "react-compiler-runtime";
 import { FullscreenButton as VidstackFullscreenButton, useMediaState as useMediaState4 } from "@vidstack/react";
 import { IconButton as IconButton3 } from "@radix-ui/themes";
 import { EnterFullScreenIcon, ExitFullScreenIcon } from "@radix-ui/react-icons";
-import { jsx as _jsx36 } from "react/jsx-runtime";
+import { jsx as _jsx35 } from "react/jsx-runtime";
 var FullscreenButton = function() {
     var $ = _c19(2);
     var isFullscreen = useMediaState4("fullscreen");
     var t0;
     if ($[0] !== isFullscreen) {
-        t0 = /* @__PURE__ */ _jsx36(IconButton3, {
+        t0 = /* @__PURE__ */ _jsx35(IconButton3, {
             variant: "ghost",
             asChild: true,
-            children: /* @__PURE__ */ _jsx36(VidstackFullscreenButton, {
-                children: isFullscreen ? /* @__PURE__ */ _jsx36(ExitFullScreenIcon, {}) : /* @__PURE__ */ _jsx36(EnterFullScreenIcon, {})
+            children: /* @__PURE__ */ _jsx35(VidstackFullscreenButton, {
+                children: isFullscreen ? /* @__PURE__ */ _jsx35(ExitFullScreenIcon, {}) : /* @__PURE__ */ _jsx35(EnterFullScreenIcon, {})
             })
         });
         $[0] = isFullscreen;
@@ -41218,10 +41203,10 @@ var FullscreenButton = function() {
     return t0;
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Img/Video/index.tsx
-import { jsx as _jsx37, jsxs as _jsxs12 } from "react/jsx-runtime";
+import { jsx as _jsx36, jsxs as _jsxs12 } from "react/jsx-runtime";
 var Video = function(_ref) {
     var src = _ref.src;
-    return /* @__PURE__ */ _jsx37(MediaContainer, {
+    return /* @__PURE__ */ _jsx36(MediaContainer, {
         children: /* @__PURE__ */ _jsxs12(MediaPlayer, {
             src: {
                 src: src,
@@ -41231,11 +41216,11 @@ var Video = function(_ref) {
             hideControlsOnMouseLeave: true,
             crossOrigin: true,
             children: [
-                /* @__PURE__ */ _jsx37(MediaProvider, {}),
-                /* @__PURE__ */ _jsx37("style", {
+                /* @__PURE__ */ _jsx36(MediaProvider, {}),
+                /* @__PURE__ */ _jsx36("style", {
                     children: "\n          .superinterface-video-controls {\n            opacity: 0;\n            transition: opacity 0.2s ease-out;\n          }\n\n          .superinterface-video-controls[data-visible] {\n            opacity: 1;\n          }\n        "
                 }),
-                /* @__PURE__ */ _jsx37(Flex8, {
+                /* @__PURE__ */ _jsx36(Flex8, {
                     asChild: true,
                     position: "absolute",
                     bottom: "0",
@@ -41247,18 +41232,18 @@ var Video = function(_ref) {
                         zIndex: 10,
                         background: "var(--accent-4)"
                     },
-                    children: /* @__PURE__ */ _jsx37(Controls.Root, {
-                        children: /* @__PURE__ */ _jsx37(Flex8, {
+                    children: /* @__PURE__ */ _jsx36(Controls.Root, {
+                        children: /* @__PURE__ */ _jsx36(Flex8, {
                             asChild: true,
                             align: "center",
                             gap: "3",
                             flexGrow: "1",
                             children: /* @__PURE__ */ _jsxs12(Controls.Group, {
                                 children: [
-                                    /* @__PURE__ */ _jsx37(PlayButton, {}),
-                                    /* @__PURE__ */ _jsx37(Time, {}),
-                                    /* @__PURE__ */ _jsx37(VolumeButton, {}),
-                                    /* @__PURE__ */ _jsx37(FullscreenButton, {})
+                                    /* @__PURE__ */ _jsx36(PlayButton, {}),
+                                    /* @__PURE__ */ _jsx36(Time, {}),
+                                    /* @__PURE__ */ _jsx36(VolumeButton, {}),
+                                    /* @__PURE__ */ _jsx36(FullscreenButton, {})
                                 ]
                             })
                         })
@@ -41272,10 +41257,10 @@ var Video = function(_ref) {
 import { Flex as Flex9 } from "@radix-ui/themes";
 import "@vidstack/react/player/styles/base.css";
 import { MediaPlayer as MediaPlayer2, MediaProvider as MediaProvider2, Controls as Controls2 } from "@vidstack/react";
-import { jsx as _jsx38, jsxs as _jsxs13 } from "react/jsx-runtime";
+import { jsx as _jsx37, jsxs as _jsxs13 } from "react/jsx-runtime";
 var Audio = function(_ref) {
     var src = _ref.src;
-    return /* @__PURE__ */ _jsx38(MediaContainer, {
+    return /* @__PURE__ */ _jsx37(MediaContainer, {
         children: /* @__PURE__ */ _jsxs13(MediaPlayer2, {
             src: {
                 src: src,
@@ -41285,8 +41270,8 @@ var Audio = function(_ref) {
             crossOrigin: true,
             playsInline: true,
             children: [
-                /* @__PURE__ */ _jsx38(MediaProvider2, {}),
-                /* @__PURE__ */ _jsx38(Flex9, {
+                /* @__PURE__ */ _jsx37(MediaProvider2, {}),
+                /* @__PURE__ */ _jsx37(Flex9, {
                     asChild: true,
                     p: "3",
                     flexGrow: "1",
@@ -41294,17 +41279,17 @@ var Audio = function(_ref) {
                         zIndex: 10,
                         background: "var(--accent-4)"
                     },
-                    children: /* @__PURE__ */ _jsx38(Controls2.Root, {
-                        children: /* @__PURE__ */ _jsx38(Flex9, {
+                    children: /* @__PURE__ */ _jsx37(Controls2.Root, {
+                        children: /* @__PURE__ */ _jsx37(Flex9, {
                             asChild: true,
                             align: "center",
                             gap: "3",
                             flexGrow: "1",
                             children: /* @__PURE__ */ _jsxs13(Controls2.Group, {
                                 children: [
-                                    /* @__PURE__ */ _jsx38(PlayButton, {}),
-                                    /* @__PURE__ */ _jsx38(Time, {}),
-                                    /* @__PURE__ */ _jsx38(VolumeButton, {})
+                                    /* @__PURE__ */ _jsx37(PlayButton, {}),
+                                    /* @__PURE__ */ _jsx37(Time, {}),
+                                    /* @__PURE__ */ _jsx37(VolumeButton, {})
                                 ]
                             })
                         })
@@ -41315,7 +41300,7 @@ var Audio = function(_ref) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Img/index.tsx
-import { jsx as _jsx39 } from "react/jsx-runtime";
+import { jsx as _jsx38 } from "react/jsx-runtime";
 function ownKeys21(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -41364,7 +41349,7 @@ var Img = function(props) {
     if (!props.src) {
         var t0;
         if ($[0] !== props) {
-            t0 = /* @__PURE__ */ _jsx39(Image, _objectSpread21({}, props));
+            t0 = /* @__PURE__ */ _jsx38(Image, _objectSpread21({}, props));
             $[0] = props;
             $[1] = t0;
         } else {
@@ -41377,7 +41362,7 @@ var Img = function(props) {
         })) {
             var _t;
             if ($[2] !== props.src) {
-                _t = /* @__PURE__ */ _jsx39(Video, {
+                _t = /* @__PURE__ */ _jsx38(Video, {
                     src: props.src
                 });
                 $[2] = props.src;
@@ -41392,7 +41377,7 @@ var Img = function(props) {
             })) {
                 var _t2;
                 if ($[4] !== props.src) {
-                    _t2 = /* @__PURE__ */ _jsx39(Audio, {
+                    _t2 = /* @__PURE__ */ _jsx38(Audio, {
                         src: props.src
                     });
                     $[4] = props.src;
@@ -41404,7 +41389,7 @@ var Img = function(props) {
             } else {
                 var _t3;
                 if ($[6] !== props) {
-                    _t3 = /* @__PURE__ */ _jsx39(Image, _objectSpread21({}, props));
+                    _t3 = /* @__PURE__ */ _jsx38(Image, _objectSpread21({}, props));
                     $[6] = props;
                     $[7] = _t3;
                 } else {
@@ -41420,7 +41405,7 @@ import { c as _c22 } from "react-compiler-runtime";
 import { QuoteIcon } from "@radix-ui/react-icons";
 // src/components/annotations/FilePathAnnotation.tsx
 import { c as _c21 } from "react-compiler-runtime";
-import { jsx as _jsx40 } from "react/jsx-runtime";
+import { jsx as _jsx39 } from "react/jsx-runtime";
 var FilePathAnnotation = function(t0) {
     var $ = _c21(3);
     var annotation = t0.annotation, children = t0.children;
@@ -41429,7 +41414,7 @@ var FilePathAnnotation = function(t0) {
     var t1 = "".concat(superinterfaceContext.baseUrl, "/files/").concat(annotation.file_path.file_id, "/contents?").concat(nextSearchParams);
     var t2;
     if ($[0] !== children || $[1] !== t1) {
-        t2 = /* @__PURE__ */ _jsx40(Link, {
+        t2 = /* @__PURE__ */ _jsx39(Link, {
             href: t1,
             target: "_self",
             download: true,
@@ -41445,24 +41430,24 @@ var FilePathAnnotation = function(t0) {
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Annotation/AnnotationBase.tsx
 import { IconButton as IconButton4, Popover as Popover4, Flex as Flex10, Text as Text5 } from "@radix-ui/themes";
-import { jsx as _jsx41, jsxs as _jsxs14 } from "react/jsx-runtime";
+import { jsx as _jsx40, jsxs as _jsxs14 } from "react/jsx-runtime";
 var AnnotationBase = function(_ref) {
     var icon = _ref.icon, content2 = _ref.content;
     return /* @__PURE__ */ _jsxs14(Popover4.Root, {
         children: [
-            /* @__PURE__ */ _jsx41(Popover4.Trigger, {
-                children: /* @__PURE__ */ _jsx41(IconButton4, {
+            /* @__PURE__ */ _jsx40(Popover4.Trigger, {
+                children: /* @__PURE__ */ _jsx40(IconButton4, {
                     variant: "soft",
                     color: "gray",
                     size: "1",
                     children: icon
                 })
             }),
-            /* @__PURE__ */ _jsx41(Popover4.Content, {
+            /* @__PURE__ */ _jsx40(Popover4.Content, {
                 size: "1",
-                children: /* @__PURE__ */ _jsx41(Flex10, {
+                children: /* @__PURE__ */ _jsx40(Flex10, {
                     direction: "column",
-                    children: /* @__PURE__ */ _jsx41(Text5, {
+                    children: /* @__PURE__ */ _jsx40(Text5, {
                         size: "1",
                         color: "gray",
                         children: content2
@@ -41473,7 +41458,7 @@ var AnnotationBase = function(_ref) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Annotation/index.tsx
-import { jsx as _jsx42 } from "react/jsx-runtime";
+import { jsx as _jsx41 } from "react/jsx-runtime";
 var _excluded = [
     "children"
 ];
@@ -41524,8 +41509,8 @@ var Annotation = function(t0) {
     if (annotation.type === "file_citation") {
         var t2;
         if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-            t2 = /* @__PURE__ */ _jsx42(AnnotationBase, {
-                icon: /* @__PURE__ */ _jsx42(QuoteIcon, {}),
+            t2 = /* @__PURE__ */ _jsx41(AnnotationBase, {
+                icon: /* @__PURE__ */ _jsx41(QuoteIcon, {}),
                 content: "File cited."
             });
             $[5] = t2;
@@ -41537,7 +41522,7 @@ var Annotation = function(t0) {
         if (annotation.type === "file_path") {
             var _t2;
             if ($[6] !== annotation || $[7] !== children) {
-                _t2 = /* @__PURE__ */ _jsx42(FilePathAnnotation, {
+                _t2 = /* @__PURE__ */ _jsx41(FilePathAnnotation, {
                     annotation: annotation,
                     children: children
                 });
@@ -41553,7 +41538,7 @@ var Annotation = function(t0) {
     return null;
 };
 // src/contexts/markdown/MarkdownContext/lib/components/index.tsx
-import { jsx as _jsx43, Fragment as _Fragment, jsxs as _jsxs15 } from "react/jsx-runtime";
+import { jsx as _jsx42, Fragment as _Fragment, jsxs as _jsxs15 } from "react/jsx-runtime";
 var _excluded2 = [
     "width"
 ];
@@ -41630,41 +41615,41 @@ var components = {
     img: Img,
     annotation: Annotation,
     h1: function(props) {
-        return /* @__PURE__ */ _jsx43(Heading, {
+        return /* @__PURE__ */ _jsx42(Heading, {
             as: "h1",
             children: props.children
         });
     },
     h2: function(props) {
-        return /* @__PURE__ */ _jsx43(Heading, {
+        return /* @__PURE__ */ _jsx42(Heading, {
             as: "h2",
             size: "5",
             children: props.children
         });
     },
     h3: function(props) {
-        return /* @__PURE__ */ _jsx43(Heading, {
+        return /* @__PURE__ */ _jsx42(Heading, {
             as: "h3",
             size: "4",
             children: props.children
         });
     },
     h4: function(props) {
-        return /* @__PURE__ */ _jsx43(Heading, {
+        return /* @__PURE__ */ _jsx42(Heading, {
             as: "h4",
             size: "3",
             children: props.children
         });
     },
     h5: function(props) {
-        return /* @__PURE__ */ _jsx43(Heading, {
+        return /* @__PURE__ */ _jsx42(Heading, {
             as: "h5",
             size: "3",
             children: props.children
         });
     },
     h6: function(props) {
-        return /* @__PURE__ */ _jsx43(Heading, {
+        return /* @__PURE__ */ _jsx42(Heading, {
             as: "h6",
             size: "3",
             children: props.children
@@ -41673,10 +41658,10 @@ var components = {
     table: function(props) {
         return /* @__PURE__ */ _jsxs15(_Fragment, {
             children: [
-                /* @__PURE__ */ _jsx43("style", {
+                /* @__PURE__ */ _jsx42("style", {
                     children: ".rt-TableRootTable { overflow: inherit; }"
                 }),
-                /* @__PURE__ */ _jsx43(Table.Root, _objectSpread22(_objectSpread22({}, props), {}, {
+                /* @__PURE__ */ _jsx42(Table.Root, _objectSpread22(_objectSpread22({}, props), {}, {
                     variant: "surface",
                     mb: "3"
                 }))
@@ -41684,22 +41669,22 @@ var components = {
         });
     },
     thead: function(props) {
-        return /* @__PURE__ */ _jsx43(Table.Header, _objectSpread22({}, props));
+        return /* @__PURE__ */ _jsx42(Table.Header, _objectSpread22({}, props));
     },
     tbody: function(props) {
-        return /* @__PURE__ */ _jsx43(Table.Body, _objectSpread22({}, props));
+        return /* @__PURE__ */ _jsx42(Table.Body, _objectSpread22({}, props));
     },
     tr: function(props) {
-        return /* @__PURE__ */ _jsx43(Table.Row, _objectSpread22({}, props));
+        return /* @__PURE__ */ _jsx42(Table.Row, _objectSpread22({}, props));
     },
     td: function(_ref) {
         var width2 = _ref.width, rest = _objectWithoutProperties2(_ref, _excluded2);
-        return /* @__PURE__ */ _jsx43(Table.Cell, _objectSpread22(_objectSpread22({}, rest), {}, {
+        return /* @__PURE__ */ _jsx42(Table.Cell, _objectSpread22(_objectSpread22({}, rest), {}, {
             width: width2
         }));
     },
     th: function(props) {
-        return /* @__PURE__ */ _jsx43(Table.ColumnHeaderCell, _objectSpread22({}, props));
+        return /* @__PURE__ */ _jsx42(Table.ColumnHeaderCell, _objectSpread22({}, props));
     }
 };
 // src/contexts/markdown/MarkdownContext/lib/getRemarkPlugins.ts
@@ -42126,7 +42111,7 @@ function hasArrayChanged() {
     });
 }
 // src/components/messages/MessageContent/ContentPart/TextContent.tsx
-import { jsx as _jsx44 } from "react/jsx-runtime";
+import { jsx as _jsx43 } from "react/jsx-runtime";
 function ownKeys24(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -42314,7 +42299,7 @@ var TextContent = function(t0) {
     }
     var t5;
     if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-        t5 = /* @__PURE__ */ _jsx44(Badge2, {
+        t5 = /* @__PURE__ */ _jsx43(Badge2, {
             color: "red",
             mb: "2",
             children: "Could not render message."
@@ -42325,7 +42310,7 @@ var TextContent = function(t0) {
     }
     var t6;
     if ($[8] !== MDXComponent) {
-        t6 = /* @__PURE__ */ _jsx44(MDXComponent, {});
+        t6 = /* @__PURE__ */ _jsx43(MDXComponent, {});
         $[8] = MDXComponent;
         $[9] = t6;
     } else {
@@ -42333,9 +42318,9 @@ var TextContent = function(t0) {
     }
     var t7;
     if ($[10] !== components2 || $[11] !== t6) {
-        t7 = /* @__PURE__ */ _jsx44(ErrorBoundary, {
+        t7 = /* @__PURE__ */ _jsx43(ErrorBoundary, {
             fallback: t5,
-            children: /* @__PURE__ */ _jsx44(MDXProvider, {
+            children: /* @__PURE__ */ _jsx43(MDXProvider, {
                 components: components2,
                 children: t6
             })
@@ -42350,7 +42335,7 @@ var TextContent = function(t0) {
 };
 // src/components/messages/MessageContent/ContentPart/ImageFileContent.tsx
 import { c as _c24 } from "react-compiler-runtime";
-import { jsx as _jsx45 } from "react/jsx-runtime";
+import { jsx as _jsx44 } from "react/jsx-runtime";
 var ImageFileContent = function(t0) {
     var $ = _c24(2);
     var content2 = t0.content;
@@ -42359,7 +42344,7 @@ var ImageFileContent = function(t0) {
     var t1 = "".concat(superinterfaceContext.baseUrl, "/files/").concat(content2.image_file.file_id, "/contents?").concat(nextSearchParams);
     var t2;
     if ($[0] !== t1) {
-        t2 = /* @__PURE__ */ _jsx45(Image, {
+        t2 = /* @__PURE__ */ _jsx44(Image, {
             alt: "",
             src: t1
         });
@@ -42371,14 +42356,14 @@ var ImageFileContent = function(t0) {
     return t2;
 };
 // src/components/messages/MessageContent/ContentPart/index.tsx
-import { jsx as _jsx46 } from "react/jsx-runtime";
+import { jsx as _jsx45 } from "react/jsx-runtime";
 var ContentPart = function(t0) {
     var $ = _c25(4);
     var content2 = t0.content;
     if (content2.type === "text") {
         var t1;
         if ($[0] !== content2) {
-            t1 = /* @__PURE__ */ _jsx46(TextContent, {
+            t1 = /* @__PURE__ */ _jsx45(TextContent, {
                 content: content2
             });
             $[0] = content2;
@@ -42391,7 +42376,7 @@ var ContentPart = function(t0) {
     if (content2.type === "image_file") {
         var _t;
         if ($[2] !== content2) {
-            _t = /* @__PURE__ */ _jsx46(ImageFileContent, {
+            _t = /* @__PURE__ */ _jsx45(ImageFileContent, {
                 content: content2
             });
             $[2] = content2;
@@ -42404,21 +42389,21 @@ var ContentPart = function(t0) {
     return null;
 };
 // src/components/messages/MessageContent/index.tsx
-import { jsx as _jsx47, Fragment as _Fragment2 } from "react/jsx-runtime";
+import { jsx as _jsx46, Fragment as _Fragment2 } from "react/jsx-runtime";
 var MessageContent = function(_ref) {
     var message = _ref.message;
-    return /* @__PURE__ */ _jsx47(_Fragment2, {
+    return /* @__PURE__ */ _jsx46(_Fragment2, {
         children: message.content.map(function(content2, index) {
-            return /* @__PURE__ */ _jsx47(ContentPart, {
+            return /* @__PURE__ */ _jsx46(ContentPart, {
                 content: content2
             }, index);
         })
     });
 };
 // src/components/threads/Thread/Message/index.tsx
-import { jsx as _jsx48, jsxs as _jsxs16 } from "react/jsx-runtime";
+import { jsx as _jsx47, jsxs as _jsxs16 } from "react/jsx-runtime";
 var Message = function(t0) {
-    var $ = _c26(51);
+    var $ = _c26(37);
     var message = t0.message, className = t0.className, style = t0.style;
     var t1;
     bb0: {
@@ -42514,155 +42499,96 @@ var Message = function(t0) {
         t1 = _t7;
     }
     var _t1 = _sliced_to_array(t1, 2), olderRunSteps_0 = _t1[0], laterRunSteps_0 = _t1[1];
-    var isMutatingMessage = useIsMutatingMessage();
     var t2;
-    bb1: {
-        if (!isMutatingMessage) {
-            t2 = false;
-            break bb1;
-        }
-        if (message.status === "in_progress") {
-            t2 = true;
-            break bb1;
-        }
-        var _t8;
-        if ($[19] !== message.runSteps) {
-            _t8 = message.runSteps.some(_temp3);
-            $[19] = message.runSteps;
-            $[20] = _t8;
-        } else {
-            _t8 = $[20];
-        }
-        t2 = _t8;
-    }
-    var isInProgress = t2;
-    var t3;
-    if ($[21] !== message) {
-        t3 = {
+    if ($[19] !== message) {
+        t2 = {
             message: message
         };
-        $[21] = message;
-        $[22] = t3;
+        $[19] = message;
+        $[20] = t2;
     } else {
-        t3 = $[22];
+        t2 = $[20];
     }
-    var t4;
-    if ($[23] !== olderRunSteps_0) {
-        t4 = /* @__PURE__ */ _jsx48(RunSteps, {
+    var t3;
+    if ($[21] !== olderRunSteps_0) {
+        t3 = /* @__PURE__ */ _jsx47(RunSteps, {
             runSteps: olderRunSteps_0
         });
-        $[23] = olderRunSteps_0;
-        $[24] = t4;
+        $[21] = olderRunSteps_0;
+        $[22] = t3;
     } else {
-        t4 = $[24];
+        t3 = $[22];
     }
-    var t5;
-    if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
-        t5 = {
+    var t4;
+    if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+        t4 = {
             wordBreak: "break-word"
         };
-        $[25] = t5;
+        $[23] = t4;
     } else {
-        t5 = $[25];
+        t4 = $[23];
     }
-    var t6;
-    var t7;
-    if ($[26] !== message) {
-        t6 = /* @__PURE__ */ _jsx48(Attachments, {
-            message: message
-        });
-        t7 = /* @__PURE__ */ _jsx48(MessageContent, {
-            message: message
-        });
-        $[26] = message;
-        $[27] = t6;
-        $[28] = t7;
-    } else {
-        t6 = $[27];
-        t7 = $[28];
-    }
-    var t8;
-    if ($[29] !== isInProgress || $[30] !== laterRunSteps_0) {
-        t8 = isInProgress && isEmpty2(laterRunSteps_0) && /* @__PURE__ */ _jsx48(StartingContentSkeleton, {});
-        $[29] = isInProgress;
-        $[30] = laterRunSteps_0;
-        $[31] = t8;
-    } else {
-        t8 = $[31];
-    }
-    var t9;
-    if ($[32] !== t6 || $[33] !== t7 || $[34] !== t8) {
-        t9 = /* @__PURE__ */ _jsxs16(Box9, {
-            style: t5,
+    var t5;
+    if ($[24] !== message) {
+        t5 = /* @__PURE__ */ _jsxs16(Box9, {
+            style: t4,
             children: [
-                t6,
-                t7,
-                t8
+                /* @__PURE__ */ _jsx47(Attachments, {
+                    message: message
+                }),
+                /* @__PURE__ */ _jsx47(MessageContent, {
+                    message: message
+                })
             ]
         });
-        $[32] = t6;
-        $[33] = t7;
-        $[34] = t8;
-        $[35] = t9;
+        $[24] = message;
+        $[25] = t5;
     } else {
-        t9 = $[35];
+        t5 = $[25];
     }
-    var t10;
-    if ($[36] !== laterRunSteps_0) {
-        t10 = /* @__PURE__ */ _jsx48(RunSteps, {
+    var t6;
+    if ($[26] !== laterRunSteps_0) {
+        t6 = /* @__PURE__ */ _jsx47(RunSteps, {
             runSteps: laterRunSteps_0
         });
-        $[36] = laterRunSteps_0;
-        $[37] = t10;
-    } else {
-        t10 = $[37];
-    }
-    var t11;
-    if ($[38] !== isInProgress || $[39] !== laterRunSteps_0) {
-        t11 = isInProgress && !isEmpty2(laterRunSteps_0) && /* @__PURE__ */ _jsx48(Box9, {
-            children: /* @__PURE__ */ _jsx48(StartingContentSkeleton, {})
-        });
-        $[38] = isInProgress;
-        $[39] = laterRunSteps_0;
-        $[40] = t11;
+        $[26] = laterRunSteps_0;
+        $[27] = t6;
     } else {
-        t11 = $[40];
+        t6 = $[27];
     }
-    var t12;
-    if ($[41] !== className || $[42] !== style || $[43] !== t10 || $[44] !== t11 || $[45] !== t4 || $[46] !== t9) {
-        t12 = /* @__PURE__ */ _jsxs16(Box9, {
+    var t7;
+    if ($[28] !== className || $[29] !== style || $[30] !== t3 || $[31] !== t5 || $[32] !== t6) {
+        t7 = /* @__PURE__ */ _jsxs16(Box9, {
             className: className,
             style: style,
             children: [
-                t4,
-                t9,
-                t10,
-                t11
+                t3,
+                t5,
+                t6
             ]
         });
-        $[41] = className;
-        $[42] = style;
-        $[43] = t10;
-        $[44] = t11;
-        $[45] = t4;
-        $[46] = t9;
-        $[47] = t12;
+        $[28] = className;
+        $[29] = style;
+        $[30] = t3;
+        $[31] = t5;
+        $[32] = t6;
+        $[33] = t7;
     } else {
-        t12 = $[47];
+        t7 = $[33];
     }
-    var t13;
-    if ($[48] !== t12 || $[49] !== t3) {
-        t13 = /* @__PURE__ */ _jsx48(Provider, {
-            value: t3,
-            children: t12
+    var t8;
+    if ($[34] !== t2 || $[35] !== t7) {
+        t8 = /* @__PURE__ */ _jsx47(Provider, {
+            value: t2,
+            children: t7
         });
-        $[48] = t12;
-        $[49] = t3;
-        $[50] = t13;
+        $[34] = t2;
+        $[35] = t7;
+        $[36] = t8;
     } else {
-        t13 = $[50];
+        t8 = $[36];
     }
-    return t13;
+    return t8;
 };
 function _temp(runStep_0) {
     return runStep_0.step_details.type === "message_creation";
@@ -42670,9 +42596,6 @@ function _temp(runStep_0) {
 function _temp2(runStep_1) {
     return runStep_1.step_details.type === "message_creation";
 }
-function _temp3(rs) {
-    return rs.status === "in_progress";
-}
 // src/components/threads/Thread/Messages/Content/index.tsx
 import { c as _c33 } from "react-compiler-runtime";
 import { useEffect as useEffect3 } from "react";
@@ -42811,18 +42734,18 @@ var useMessageGroups = function(t0) {
 // src/components/skeletons/MessagesSkeleton/index.tsx
 import { c as _c29 } from "react-compiler-runtime";
 import { forwardRef as forwardRef3 } from "react";
-import { Flex as Flex13, Avatar, Box as Box10, Skeleton as Skeleton2 } from "@radix-ui/themes";
+import { Flex as Flex13, Avatar, Box as Box10, Skeleton } from "@radix-ui/themes";
 // src/components/messageGroups/MessageGroupBase/index.tsx
 import { c as _c28 } from "react-compiler-runtime";
 import { forwardRef as forwardRef2 } from "react";
 import { Flex as Flex11, Container } from "@radix-ui/themes";
-import { jsx as _jsx49 } from "react/jsx-runtime";
+import { jsx as _jsx48 } from "react/jsx-runtime";
 var MessageGroupBase = /* @__PURE__ */ forwardRef2(function MessageGroupBase2(t0, ref) {
     var $ = _c28(5);
     var children = t0.children;
     var t1;
     if ($[0] !== children) {
-        t1 = /* @__PURE__ */ _jsx49(Flex11, {
+        t1 = /* @__PURE__ */ _jsx48(Flex11, {
             flexShrink: "0",
             gap: "3",
             children: children
@@ -42834,7 +42757,7 @@ var MessageGroupBase = /* @__PURE__ */ forwardRef2(function MessageGroupBase2(t0
     }
     var t2;
     if ($[2] !== ref || $[3] !== t1) {
-        t2 = /* @__PURE__ */ _jsx49(Container, {
+        t2 = /* @__PURE__ */ _jsx48(Container, {
             ref: ref,
             size: "2",
             flexGrow: "0",
@@ -42850,13 +42773,13 @@ var MessageGroupBase = /* @__PURE__ */ forwardRef2(function MessageGroupBase2(t0
 });
 // src/components/messageGroups/MessageGroupBase/Name.tsx
 import { Flex as Flex12, Text as Text6 } from "@radix-ui/themes";
-import { jsx as _jsx50 } from "react/jsx-runtime";
+import { jsx as _jsx49 } from "react/jsx-runtime";
 var Name = function(_ref) {
     var children = _ref.children;
-    return /* @__PURE__ */ _jsx50(Flex12, {
+    return /* @__PURE__ */ _jsx49(Flex12, {
         align: "center",
         height: "var(--space-5)",
-        children: /* @__PURE__ */ _jsx50(Text6, {
+        children: /* @__PURE__ */ _jsx49(Text6, {
             size: "2",
             weight: "bold",
             children: children
@@ -42864,15 +42787,15 @@ var Name = function(_ref) {
     });
 };
 // src/components/skeletons/MessagesSkeleton/index.tsx
-import { jsx as _jsx51, jsxs as _jsxs17 } from "react/jsx-runtime";
+import { jsx as _jsx50, jsxs as _jsxs17 } from "react/jsx-runtime";
 var MessagesSkeleton = /* @__PURE__ */ forwardRef3(function MessagesSkeleton2(_props, ref) {
     var $ = _c29(7);
     var t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-        t0 = /* @__PURE__ */ _jsx51(Skeleton2, {
+        t0 = /* @__PURE__ */ _jsx50(Skeleton, {
             loading: true,
-            children: /* @__PURE__ */ _jsx51(Avatar, {
-                fallback: /* @__PURE__ */ _jsx51(Flex13, {}),
+            children: /* @__PURE__ */ _jsx50(Avatar, {
+                fallback: /* @__PURE__ */ _jsx50(Flex13, {}),
                 size: "1"
             })
         });
@@ -42882,8 +42805,8 @@ var MessagesSkeleton = /* @__PURE__ */ forwardRef3(function MessagesSkeleton2(_p
     }
     var t1;
     if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-        t1 = /* @__PURE__ */ _jsx51(Name, {
-            children: /* @__PURE__ */ _jsx51(Skeleton2, {
+        t1 = /* @__PURE__ */ _jsx50(Name, {
+            children: /* @__PURE__ */ _jsx50(Skeleton, {
                 loading: true,
                 style: {
                     width: "128px"
@@ -42896,7 +42819,7 @@ var MessagesSkeleton = /* @__PURE__ */ forwardRef3(function MessagesSkeleton2(_p
     }
     var t2;
     if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-        t2 = /* @__PURE__ */ _jsx51(Skeleton2, {
+        t2 = /* @__PURE__ */ _jsx50(Skeleton, {
             loading: true,
             style: {
                 width: "256px"
@@ -42908,7 +42831,7 @@ var MessagesSkeleton = /* @__PURE__ */ forwardRef3(function MessagesSkeleton2(_p
     }
     var t3;
     if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-        t3 = /* @__PURE__ */ _jsx51(Skeleton2, {
+        t3 = /* @__PURE__ */ _jsx50(Skeleton, {
             loading: true,
             style: {
                 width: "256px",
@@ -42927,7 +42850,7 @@ var MessagesSkeleton = /* @__PURE__ */ forwardRef3(function MessagesSkeleton2(_p
                 t1,
                 t2,
                 t3,
-                /* @__PURE__ */ _jsx51(Skeleton2, {
+                /* @__PURE__ */ _jsx50(Skeleton, {
                     loading: true,
                     style: {
                         width: "256px",
@@ -42968,13 +42891,13 @@ import { Flex as Flex14 } from "@radix-ui/themes";
 import { createContext as createContext8 } from "react";
 import { Avatar as Avatar2 } from "@radix-ui/themes";
 import { LightningBoltIcon } from "@radix-ui/react-icons";
-import { jsx as _jsx52 } from "react/jsx-runtime";
-var AssistantAvatarContext = /* @__PURE__ */ createContext8(/* @__PURE__ */ _jsx52(Avatar2, {
-    fallback: /* @__PURE__ */ _jsx52(LightningBoltIcon, {}),
+import { jsx as _jsx51 } from "react/jsx-runtime";
+var AssistantAvatarContext = /* @__PURE__ */ createContext8(/* @__PURE__ */ _jsx51(Avatar2, {
+    fallback: /* @__PURE__ */ _jsx51(LightningBoltIcon, {}),
     size: "1"
 }));
 // src/components/messageGroups/MessageGroupBase/AssistantAvatar.tsx
-import { jsx as _jsx53 } from "react/jsx-runtime";
+import { jsx as _jsx52 } from "react/jsx-runtime";
 var AssistantAvatar = function() {
     var $ = _c30(3);
     var AssistantAvatarContextValue = useContext8(AssistantAvatarContext);
@@ -42990,7 +42913,7 @@ var AssistantAvatar = function() {
     }
     var t1;
     if ($[1] !== AssistantAvatarContextValue) {
-        t1 = /* @__PURE__ */ _jsx53(Flex14, {
+        t1 = /* @__PURE__ */ _jsx52(Flex14, {
             flexShrink: "0",
             height: "24px",
             width: "24px",
@@ -43015,13 +42938,13 @@ import { Flex as Flex15 } from "@radix-ui/themes";
 import { createContext as createContext10 } from "react";
 import { Avatar as Avatar3 } from "@radix-ui/themes";
 import { PersonIcon } from "@radix-ui/react-icons";
-import { jsx as _jsx54 } from "react/jsx-runtime";
-var UserAvatarContext = /* @__PURE__ */ createContext10(/* @__PURE__ */ _jsx54(Avatar3, {
-    fallback: /* @__PURE__ */ _jsx54(PersonIcon, {}),
+import { jsx as _jsx53 } from "react/jsx-runtime";
+var UserAvatarContext = /* @__PURE__ */ createContext10(/* @__PURE__ */ _jsx53(Avatar3, {
+    fallback: /* @__PURE__ */ _jsx53(PersonIcon, {}),
     size: "1"
 }));
 // src/components/messageGroups/MessageGroupBase/UserAvatar.tsx
-import { jsx as _jsx55 } from "react/jsx-runtime";
+import { jsx as _jsx54 } from "react/jsx-runtime";
 var UserAvatar = function() {
     var $ = _c31(3);
     var UserAvatarContextValue = useContext9(UserAvatarContext);
@@ -43037,7 +42960,7 @@ var UserAvatar = function() {
     }
     var t1;
     if ($[1] !== UserAvatarContextValue) {
-        t1 = /* @__PURE__ */ _jsx55(Flex15, {
+        t1 = /* @__PURE__ */ _jsx54(Flex15, {
             flexShrink: "0",
             height: "24px",
             width: "24px",
@@ -43053,27 +42976,27 @@ var UserAvatar = function() {
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
 import { Flex as Flex16 } from "@radix-ui/themes";
-import { jsx as _jsx56 } from "react/jsx-runtime";
+import { jsx as _jsx55 } from "react/jsx-runtime";
 var Content5 = function(_ref) {
     var messageGroup = _ref.messageGroup;
-    return /* @__PURE__ */ _jsx56(Flex16, {
+    return /* @__PURE__ */ _jsx55(Flex16, {
         direction: "column-reverse",
         children: messageGroup.messages.map(function(message) {
-            return /* @__PURE__ */ _jsx56(Message, {
+            return /* @__PURE__ */ _jsx55(Message, {
                 message: message
             }, message.id);
         })
     });
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
-import { jsx as _jsx57, jsxs as _jsxs18 } from "react/jsx-runtime";
+import { jsx as _jsx56, jsxs as _jsxs18 } from "react/jsx-runtime";
 var MessageGroup = function(t0) {
     var $ = _c32(12);
     var messageGroup = t0.messageGroup;
     var assistantNameContext = useContext10(AssistantNameContext);
     var t1;
     if ($[0] !== messageGroup.role) {
-        t1 = messageGroup.role === "user" ? /* @__PURE__ */ _jsx57(UserAvatar, {}) : /* @__PURE__ */ _jsx57(AssistantAvatar, {});
+        t1 = messageGroup.role === "user" ? /* @__PURE__ */ _jsx56(UserAvatar, {}) : /* @__PURE__ */ _jsx56(AssistantAvatar, {});
         $[0] = messageGroup.role;
         $[1] = t1;
     } else {
@@ -43082,7 +43005,7 @@ var MessageGroup = function(t0) {
     var t2 = messageGroup.role === "user" ? "You" : assistantNameContext;
     var t3;
     if ($[2] !== t2) {
-        t3 = /* @__PURE__ */ _jsx57(Name, {
+        t3 = /* @__PURE__ */ _jsx56(Name, {
             children: t2
         });
         $[2] = t2;
@@ -43092,7 +43015,7 @@ var MessageGroup = function(t0) {
     }
     var t4;
     if ($[4] !== messageGroup) {
-        t4 = /* @__PURE__ */ _jsx57(Content5, {
+        t4 = /* @__PURE__ */ _jsx56(Content5, {
             messageGroup: messageGroup
         });
         $[4] = messageGroup;
@@ -43132,7 +43055,7 @@ var MessageGroup = function(t0) {
     return t6;
 };
 // src/components/threads/Thread/Messages/Content/index.tsx
-import { jsx as _jsx58, Fragment as _Fragment3 } from "react/jsx-runtime";
+import { jsx as _jsx57, Fragment as _Fragment3 } from "react/jsx-runtime";
 var Content6 = function() {
     var $ = _c33(11);
     var _useMessages = useMessages(), messages2 = _useMessages.messages, isLoading = _useMessages.isLoading, isLoadingError = _useMessages.isLoadingError;
@@ -43175,7 +43098,7 @@ var Content6 = function() {
     if (isLoading || isLoadingError) {
         var _t;
         if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-            _t = /* @__PURE__ */ _jsx58(MessagesSkeleton, {});
+            _t = /* @__PURE__ */ _jsx57(MessagesSkeleton, {});
             $[6] = _t;
         } else {
             _t = $[6];
@@ -43184,7 +43107,7 @@ var Content6 = function() {
     }
     var t3;
     if ($[7] !== messageGroups2) {
-        t3 = messageGroups2.map(_temp4);
+        t3 = messageGroups2.map(_temp3);
         $[7] = messageGroups2;
         $[8] = t3;
     } else {
@@ -43192,7 +43115,7 @@ var Content6 = function() {
     }
     var t4;
     if ($[9] !== t3) {
-        t4 = /* @__PURE__ */ _jsx58(_Fragment3, {
+        t4 = /* @__PURE__ */ _jsx57(_Fragment3, {
             children: t3
         });
         $[9] = t3;
@@ -43202,18 +43125,35 @@ var Content6 = function() {
     }
     return t4;
 };
-function _temp4(messageGroup) {
-    return /* @__PURE__ */ _jsx58(MessageGroup, {
+function _temp3(messageGroup) {
+    return /* @__PURE__ */ _jsx57(MessageGroup, {
         messageGroup: messageGroup
     }, messageGroup.id);
 }
 // src/components/threads/Thread/Messages/Progress/index.tsx
 import { c as _c35 } from "react-compiler-runtime";
 import { useMemo as useMemo12 } from "react";
+import { Flex as Flex17, Box as Box13 } from "@radix-ui/themes";
 // src/components/skeletons/StartingSkeleton/index.tsx
 import { c as _c34 } from "react-compiler-runtime";
 import { useContext as useContext11 } from "react";
 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 _jsx58 } from "react/jsx-runtime";
+var StartingContentSkeleton = function() {
+    return /* @__PURE__ */ _jsx58(Skeleton2, {
+        loading: true,
+        mt: "1",
+        height: "var(--space-4)",
+        width: "var(--space-4)",
+        style: {
+            borderRadius: "var(--radius-6)",
+            flexShrink: 0
+        }
+    });
+};
+// src/components/skeletons/StartingSkeleton/index.tsx
 import { jsx as _jsx59, jsxs as _jsxs19 } from "react/jsx-runtime";
 var StartingSkeleton = function(t0) {
     var $ = _c34(7);
@@ -43266,9 +43206,9 @@ var StartingSkeleton = function(t0) {
     return t4;
 };
 // src/components/threads/Thread/Messages/Progress/index.tsx
-import { jsx as _jsx60 } from "react/jsx-runtime";
+import { jsx as _jsx60, jsxs as _jsxs20 } from "react/jsx-runtime";
 var Progress = function() {
-    var $ = _c35(1);
+    var $ = _c35(3);
     var latestMessage = useLatestMessage().latestMessage;
     var isMutatingMessage = useIsMutatingMessage();
     var t0;
@@ -43297,22 +43237,50 @@ var Progress = function() {
         }
         t0 = true;
     }
-    var isVisible = t0;
-    if (!isVisible) {
-        return null;
+    var isStartingSkeletonVisible = t0;
+    if (isStartingSkeletonVisible) {
+        var t1;
+        if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+            t1 = /* @__PURE__ */ _jsx60(StartingSkeleton, {});
+            $[0] = t1;
+        } else {
+            t1 = $[0];
+        }
+        return t1;
     }
-    var t1;
-    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-        t1 = /* @__PURE__ */ _jsx60(StartingSkeleton, {});
-        $[0] = t1;
-    } else {
-        t1 = $[0];
+    if (isMutatingMessage) {
+        var _t;
+        if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+            _t = /* @__PURE__ */ _jsx60(Flex17, {
+                flexShrink: "0",
+                height: "24px",
+                width: "24px"
+            });
+            $[1] = _t;
+        } else {
+            _t = $[1];
+        }
+        var t2;
+        if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+            t2 = /* @__PURE__ */ _jsxs20(MessageGroupBase, {
+                children: [
+                    _t,
+                    /* @__PURE__ */ _jsx60(Box13, {
+                        children: /* @__PURE__ */ _jsx60(StartingContentSkeleton, {})
+                    })
+                ]
+            });
+            $[2] = t2;
+        } else {
+            t2 = $[2];
+        }
+        return t2;
     }
-    return t1;
+    return null;
 };
 // src/components/threads/Thread/Messages/Root/index.tsx
 import { c as _c36 } from "react-compiler-runtime";
-import { Flex as Flex17 } from "@radix-ui/themes";
+import { Flex as Flex18 } from "@radix-ui/themes";
 // src/hooks/misc/useInfiniteScroll/index.tsx
 import { useRef as useRef3 } from "react";
 import { useInView } from "react-intersection-observer";
@@ -43364,7 +43332,7 @@ var useInfiniteScroll = function(_ref) {
     };
 };
 // src/components/threads/Thread/Messages/Root/index.tsx
-import { jsx as _jsx61, jsxs as _jsxs20 } from "react/jsx-runtime";
+import { jsx as _jsx61, jsxs as _jsxs21 } from "react/jsx-runtime";
 function ownKeys26(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -43447,7 +43415,7 @@ var Root2 = function(t0) {
     }
     var t4;
     if ($[8] !== hasNextPage || $[9] !== loaderRef) {
-        t4 = hasNextPage && /* @__PURE__ */ _jsx61(Flex17, {
+        t4 = hasNextPage && /* @__PURE__ */ _jsx61(Flex18, {
             ref: loaderRef
         });
         $[8] = hasNextPage;
@@ -43458,7 +43426,7 @@ var Root2 = function(t0) {
     }
     var t5;
     if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-        t5 = /* @__PURE__ */ _jsx61(Flex17, {
+        t5 = /* @__PURE__ */ _jsx61(Flex18, {
             flexShrink: "0",
             flexGrow: "1"
         });
@@ -43468,7 +43436,7 @@ var Root2 = function(t0) {
     }
     var t6;
     if ($[12] !== children || $[13] !== className || $[14] !== containerRef || $[15] !== t3 || $[16] !== t4) {
-        t6 = /* @__PURE__ */ _jsxs20(Flex17, {
+        t6 = /* @__PURE__ */ _jsxs21(Flex18, {
             ref: containerRef,
             direction: "column-reverse",
             flexGrow: "1",
@@ -43510,14 +43478,14 @@ var NextPageSkeleton = function() {
     return t0;
 };
 // src/components/threads/Thread/Messages/index.tsx
-import { jsx as _jsx63, jsxs as _jsxs21 } from "react/jsx-runtime";
+import { jsx as _jsx63, jsxs as _jsxs22 } from "react/jsx-runtime";
 var Messages = function(_ref) {
     var children = _ref.children, className = _ref.className, style = _ref.style;
-    return /* @__PURE__ */ _jsxs21(Root2, {
+    return /* @__PURE__ */ _jsxs22(Root2, {
         style: style,
         className: className,
         children: [
-            /* @__PURE__ */ _jsx63(Flex18, {
+            /* @__PURE__ */ _jsx63(Flex19, {
                 flexShrink: "0",
                 height: "var(--space-3)"
             }),
@@ -43525,7 +43493,7 @@ var Messages = function(_ref) {
             children,
             /* @__PURE__ */ _jsx63(Content6, {}),
             /* @__PURE__ */ _jsx63(NextPageSkeleton, {}),
-            /* @__PURE__ */ _jsx63(Flex18, {
+            /* @__PURE__ */ _jsx63(Flex19, {
                 flexShrink: "0",
                 flexGrow: "1",
                 minHeight: "var(--space-5)"
@@ -43539,7 +43507,7 @@ Messages.NextPageSkeleton = NextPageSkeleton;
 // src/components/threads/Thread/MessageForm/Submit/index.tsx
 import { c as _c38 } from "react-compiler-runtime";
 import { ArrowUpIcon as ArrowUpIcon2, StopIcon } from "@radix-ui/react-icons";
-import { IconButton as IconButton5, Flex as Flex19 } from "@radix-ui/themes";
+import { IconButton as IconButton5, Flex as Flex20 } from "@radix-ui/themes";
 // src/hooks/messages/useMessageFormContext/index.ts
 import { useContext as useContext12 } from "react";
 // src/contexts/messages/MessageFormContext/index.ts
@@ -43603,7 +43571,7 @@ function _toPrimitive27(t, r) {
 }
 var Root3 = function(_ref) {
     var children = _ref.children, style = _ref.style, className = _ref.className;
-    return /* @__PURE__ */ _jsx64(Flex19, {
+    return /* @__PURE__ */ _jsx64(Flex20, {
         flexShrink: "0",
         align: "end",
         style: style,
@@ -43685,7 +43653,7 @@ Submit.Button = Button3;
 import { useQueryClient as useQueryClient4 } from "@tanstack/react-query";
 import { useMemo as useMemo13, useState as useState4 } from "react";
 import { useForm, FormProvider } from "react-hook-form";
-import { Box as Box13 } from "@radix-ui/themes";
+import { Box as Box14 } from "@radix-ui/themes";
 // src/components/threads/Thread/MessageForm/Root/lib/formOptions.ts
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -43867,7 +43835,7 @@ var Root4 = function(_ref) {
             content: content2
         },
         children: /* @__PURE__ */ _jsx65(FormProvider, _objectSpread28(_objectSpread28({}, formProps), {}, {
-            children: /* @__PURE__ */ _jsx65(Box13, {
+            children: /* @__PURE__ */ _jsx65(Box14, {
                 asChild: true,
                 flexShrink: "0",
                 style: style,
@@ -43882,9 +43850,9 @@ var Root4 = function(_ref) {
 };
 // src/components/threads/Thread/MessageForm/Field/index.tsx
 import { useFormContext as useFormContext2 } from "react-hook-form";
-import { Container as RadixContainer, Flex as Flex23 } from "@radix-ui/themes";
+import { Container as RadixContainer, Flex as Flex24 } from "@radix-ui/themes";
 // src/components/threads/Thread/MessageForm/Field/Control.tsx
-import { Flex as Flex20 } from "@radix-ui/themes";
+import { Flex as Flex21 } from "@radix-ui/themes";
 import { useFormContext } from "react-hook-form";
 // src/hooks/misc/usePrevious.ts
 import { useEffect as useEffect5, useRef as useRef4 } from "react";
@@ -43901,7 +43869,7 @@ import { useContext as useContext13, useMemo as useMemo14, useRef as useRef5, us
 import { c as _c39 } from "react-compiler-runtime";
 import { forwardRef as forwardRef4 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
-import { jsx as _jsx66, Fragment as _Fragment4, jsxs as _jsxs22 } from "react/jsx-runtime";
+import { jsx as _jsx66, Fragment as _Fragment4, jsxs as _jsxs23 } from "react/jsx-runtime";
 var _excluded3 = [
     "style",
     "className"
@@ -44023,7 +43991,7 @@ var TextareaBase = /* @__PURE__ */ forwardRef4(function TextareaBase2(t0, ref) {
     }
     var t5;
     if ($[9] !== ref || $[10] !== rest || $[11] !== t2 || $[12] !== t4) {
-        t5 = /* @__PURE__ */ _jsxs22(_Fragment4, {
+        t5 = /* @__PURE__ */ _jsxs23(_Fragment4, {
             children: [
                 t1,
                 /* @__PURE__ */ _jsx66(TextareaAutosize, _objectSpread29({
@@ -44090,7 +44058,7 @@ function _toPrimitive30(t, r) {
 }
 var Root5 = function(_ref) {
     var children = _ref.children, style = _ref.style, className = _ref.className;
-    return /* @__PURE__ */ _jsx67(Flex20, {
+    return /* @__PURE__ */ _jsx67(Flex21, {
         flexGrow: "1",
         pt: "4px",
         style: style,
@@ -44151,9 +44119,9 @@ Control.Root = Root5;
 Control.Input = Input;
 // src/components/threads/Thread/MessageForm/Field/Files/Preview.tsx
 import { c as _c40 } from "react-compiler-runtime";
-import { Flex as Flex21, Card as Card2, Spinner as Spinner2, Text as Text7, IconButton as IconButton6 } from "@radix-ui/themes";
+import { Flex as Flex22, Card as Card2, Spinner as Spinner2, Text as Text7, IconButton as IconButton6 } from "@radix-ui/themes";
 import { FileIcon as FileIcon2, Cross2Icon } from "@radix-ui/react-icons";
-import { jsx as _jsx68, jsxs as _jsxs23 } from "react/jsx-runtime";
+import { jsx as _jsx68, jsxs as _jsxs24 } from "react/jsx-runtime";
 function ownKeys31(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -44210,19 +44178,19 @@ var Preview = function(props) {
             _t = function(file) {
                 return /* @__PURE__ */ _jsx68(Card2, {
                     variant: "ghost",
-                    children: /* @__PURE__ */ _jsxs23(Flex21, {
+                    children: /* @__PURE__ */ _jsxs24(Flex22, {
                         align: "center",
                         justify: "between",
                         gap: "1",
                         children: [
-                            /* @__PURE__ */ _jsxs23(Flex21, {
+                            /* @__PURE__ */ _jsxs24(Flex22, {
                                 align: "center",
                                 gap: "1",
                                 flexShrink: "1",
                                 minWidth: "0",
                                 maxWidth: "250px",
                                 children: [
-                                    /* @__PURE__ */ _jsx68(Flex21, {
+                                    /* @__PURE__ */ _jsx68(Flex22, {
                                         flexShrink: "0",
                                         children: /* @__PURE__ */ _jsx68(Spinner2, {
                                             loading: isOptimistic({
@@ -44239,7 +44207,7 @@ var Preview = function(props) {
                                     })
                                 ]
                             }),
-                            /* @__PURE__ */ _jsx68(Flex21, {
+                            /* @__PURE__ */ _jsx68(Flex22, {
                                 flexShrink: "0",
                                 children: /* @__PURE__ */ _jsx68(IconButton6, {
                                     onClick: function() {
@@ -44273,7 +44241,7 @@ var Preview = function(props) {
     }
     var t1;
     if ($[5] !== props || $[6] !== t0) {
-        t1 = /* @__PURE__ */ _jsx68(Flex21, _objectSpread31(_objectSpread31({
+        t1 = /* @__PURE__ */ _jsx68(Flex22, _objectSpread31(_objectSpread31({
             flexBasis: "100%",
             direction: "column",
             pb: "2",
@@ -44294,7 +44262,7 @@ import { useCallback as useCallback3 } from "react";
 import { omit as omit4 } from "radash";
 import dayjs2 from "dayjs";
 import { FilePlusIcon } from "@radix-ui/react-icons";
-import { IconButton as IconButton7, Flex as Flex22 } from "@radix-ui/themes";
+import { IconButton as IconButton7, Flex as Flex23 } from "@radix-ui/themes";
 // src/hooks/files/useCreateFile/index.ts
 import { c as _c41 } from "react-compiler-runtime";
 import { useMutation as useMutation2, useQueryClient as useQueryClient5 } from "@tanstack/react-query";
@@ -44536,7 +44504,7 @@ var useCreateFile = function(t0) {
     var t1;
     if ($[0] !== t0) {
         t1 = t0 === void 0 ? {
-            onError: _temp5
+            onError: _temp4
         } : t0;
         $[0] = t0;
         $[1] = t1;
@@ -44605,10 +44573,10 @@ var useCreateFile = function(t0) {
     }
     return t6;
 };
-function _temp5() {}
+function _temp4() {}
 function _temp22() {}
 // src/components/threads/Thread/MessageForm/Field/Files/Control.tsx
-import { jsx as _jsx69, jsxs as _jsxs24 } from "react/jsx-runtime";
+import { jsx as _jsx69, jsxs as _jsxs25 } from "react/jsx-runtime";
 function ownKeys35(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -44889,12 +44857,12 @@ var Control2 = function(props) {
         createFile,
         setFiles
     ]);
-    return /* @__PURE__ */ _jsx69(Flex22, _objectSpread35(_objectSpread35({
+    return /* @__PURE__ */ _jsx69(Flex23, _objectSpread35(_objectSpread35({
         pt: "2",
         pr: "2",
         flexGrow: "0"
     }, props), {}, {
-        children: /* @__PURE__ */ _jsxs24(IconButton7, {
+        children: /* @__PURE__ */ _jsxs25(IconButton7, {
             type: "button",
             variant: "ghost",
             color: "gray",
@@ -44983,13 +44951,13 @@ var Root6 = function(_ref) {
         flexGrow: "0",
         className: className,
         style: style,
-        children: /* @__PURE__ */ _jsx70(Flex23, {
+        children: /* @__PURE__ */ _jsx70(Flex24, {
             direction: "column",
             flexShrink: "0",
-            children: /* @__PURE__ */ _jsx70(Flex23, {
+            children: /* @__PURE__ */ _jsx70(Flex24, {
                 direction: "column",
                 flexShrink: "0",
-                children: /* @__PURE__ */ _jsx70(Flex23, {
+                children: /* @__PURE__ */ _jsx70(Flex24, {
                     style: _objectSpread36({
                         borderRadius: "var(--radius-2)",
                         borderWidth: "1px",
@@ -45013,7 +44981,7 @@ var Field = {
     Files: Files
 };
 // src/components/threads/Thread/MessageForm/index.tsx
-import { jsx as _jsx71, jsxs as _jsxs25 } from "react/jsx-runtime";
+import { jsx as _jsx71, jsxs as _jsxs26 } from "react/jsx-runtime";
 function ownKeys37(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -45059,7 +45027,7 @@ function _toPrimitive37(t, r) {
 }
 var MessageForm = function(props) {
     return /* @__PURE__ */ _jsx71(Root4, _objectSpread37(_objectSpread37({}, props), {}, {
-        children: /* @__PURE__ */ _jsxs25(Field.Root, {
+        children: /* @__PURE__ */ _jsxs26(Field.Root, {
             children: [
                 /* @__PURE__ */ _jsx71(Field.Control, {}),
                 /* @__PURE__ */ _jsx71(Submit, {})
@@ -45071,7 +45039,7 @@ MessageForm.Root = Root4;
 MessageForm.Field = Field;
 MessageForm.Submit = Submit;
 // src/components/threads/Thread/Root/index.tsx
-import { Flex as Flex25 } from "@radix-ui/themes";
+import { Flex as Flex26 } from "@radix-ui/themes";
 // src/components/threads/Thread/Provider/index.tsx
 var Provider2 = SuperinterfaceProvider;
 // src/components/toasts/ToastsProvider/index.tsx
@@ -45080,17 +45048,17 @@ import { useState as useState5, useCallback as useCallback4 } 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 as Card3, Text as Text8, Flex as Flex24 } from "@radix-ui/themes";
+import { Card as Card3, Text as Text8, Flex as Flex25 } from "@radix-ui/themes";
 import { CheckCircledIcon as CheckCircledIcon2, CrossCircledIcon } from "@radix-ui/react-icons";
-import { jsx as _jsx72, jsxs as _jsxs26 } from "react/jsx-runtime";
+import { jsx as _jsx72, jsxs as _jsxs27 } from "react/jsx-runtime";
 var CustomToast = function(_ref) {
     var toast = _ref.toast;
     return /* @__PURE__ */ _jsx72(Toast.Root, {
         children: /* @__PURE__ */ _jsx72(Card3, {
             children: /* @__PURE__ */ _jsx72(Toast.Title, {
-                children: /* @__PURE__ */ _jsxs26(Flex24, {
+                children: /* @__PURE__ */ _jsxs27(Flex25, {
                     children: [
-                        /* @__PURE__ */ _jsx72(Flex24, {
+                        /* @__PURE__ */ _jsx72(Flex25, {
                             pr: "2",
                             height: "14px",
                             align: "center",
@@ -45112,7 +45080,7 @@ var CustomToast = function(_ref) {
     });
 };
 // src/components/toasts/ToastsProvider/index.tsx
-import { jsx as _jsx73, jsxs as _jsxs27 } from "react/jsx-runtime";
+import { jsx as _jsx73, jsxs as _jsxs28 } from "react/jsx-runtime";
 var ToastsProvider = function(t0) {
     var $ = _c42(15);
     var children = t0.children, t1 = t0.bottom;
@@ -45152,7 +45120,7 @@ var ToastsProvider = function(t0) {
     }
     var t5;
     if ($[4] !== toasts) {
-        t5 = Array.from(toasts).map(_temp6);
+        t5 = Array.from(toasts).map(_temp5);
         $[4] = toasts;
         $[5] = t5;
     } else {
@@ -45184,7 +45152,7 @@ var ToastsProvider = function(t0) {
     }
     var t7;
     if ($[8] !== children || $[9] !== t5 || $[10] !== t6) {
-        t7 = /* @__PURE__ */ _jsxs27(Toast2.Provider, {
+        t7 = /* @__PURE__ */ _jsxs28(Toast2.Provider, {
             children: [
                 children,
                 t5,
@@ -45212,7 +45180,7 @@ var ToastsProvider = function(t0) {
     }
     return t8;
 };
-function _temp6(toast_0, index) {
+function _temp5(toast_0, index) {
     return /* @__PURE__ */ _jsx73(CustomToast, {
         toast: toast_0
     }, index);
@@ -45290,7 +45258,7 @@ var Root8 = function(_ref) {
     return /* @__PURE__ */ _jsx74(ToastsProvider, {
         bottom: "var(--space-9)",
         children: /* @__PURE__ */ _jsx74(Provider2, _objectSpread38(_objectSpread38({}, rest), {}, {
-            children: /* @__PURE__ */ _jsx74(Flex25, {
+            children: /* @__PURE__ */ _jsx74(Flex26, {
                 direction: "column",
                 flexGrow: "1",
                 className: className,
@@ -45301,7 +45269,7 @@ var Root8 = function(_ref) {
     });
 };
 // src/components/threads/Thread/index.tsx
-import { jsx as _jsx75, jsxs as _jsxs28 } from "react/jsx-runtime";
+import { jsx as _jsx75, jsxs as _jsxs29 } from "react/jsx-runtime";
 function ownKeys39(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -45346,7 +45314,7 @@ function _toPrimitive39(t, r) {
     return ("string" === r ? String : Number)(t);
 }
 var Thread = function(props) {
-    return /* @__PURE__ */ _jsxs28(Root8, _objectSpread39(_objectSpread39({}, props), {}, {
+    return /* @__PURE__ */ _jsxs29(Root8, _objectSpread39(_objectSpread39({}, props), {}, {
         children: [
             /* @__PURE__ */ _jsx75(Messages, {}),
             /* @__PURE__ */ _jsx75(MessageForm, {})
@@ -45600,7 +45568,7 @@ var Root9 = function(_ref) {
 };
 // src/components/threads/ThreadDialog/Trigger/index.tsx
 import { c as _c45 } from "react-compiler-runtime";
-import { Flex as Flex26 } from "@radix-ui/themes";
+import { Flex as Flex27 } from "@radix-ui/themes";
 // src/components/threads/ThreadDialog/Trigger/Button.tsx
 import { IconButton as IconButton8 } from "@radix-ui/themes";
 import { ChatBubbleIcon } from "@radix-ui/react-icons";
@@ -45720,7 +45688,7 @@ var Root10 = function(t0) {
     var t3;
     if ($[2] !== setIsOpen) {
         t3 = function() {
-            return setIsOpen(_temp7);
+            return setIsOpen(_temp6);
         };
         $[2] = setIsOpen;
         $[3] = t3;
@@ -45747,7 +45715,7 @@ var Root10 = function(t0) {
     }
     var t6;
     if ($[8] !== children || $[9] !== className || $[10] !== t2 || $[11] !== t3 || $[12] !== t5) {
-        t6 = /* @__PURE__ */ _jsx79(Flex26, {
+        t6 = /* @__PURE__ */ _jsx79(Flex27, {
             display: t2,
             onClick: t3,
             direction: "column",
@@ -45779,16 +45747,16 @@ var Trigger = function(args) {
 };
 Trigger.Root = Root10;
 Trigger.Button = Button4;
-function _temp7(prev) {
+function _temp6(prev) {
     return !prev;
 }
 // src/components/threads/ThreadDialog/Content/index.tsx
 import { c as _c47 } from "react-compiler-runtime";
-import { Card as Card4, Inset as Inset2, Flex as Flex28 } from "@radix-ui/themes";
+import { Card as Card4, Inset as Inset2, Flex as Flex29 } from "@radix-ui/themes";
 // src/components/threads/ThreadDialog/Close/index.tsx
 import { c as _c46 } from "react-compiler-runtime";
 import { Cross1Icon } from "@radix-ui/react-icons";
-import { IconButton as IconButton9, Flex as Flex27 } from "@radix-ui/themes";
+import { IconButton as IconButton9, Flex as Flex28 } from "@radix-ui/themes";
 import { jsx as _jsx80 } from "react/jsx-runtime";
 var Close = function() {
     var $ = _c46(9);
@@ -45808,7 +45776,7 @@ var Close = function() {
     var t2;
     if ($[2] !== setIsOpen) {
         t2 = function() {
-            return setIsOpen(_temp8);
+            return setIsOpen(_temp7);
         };
         $[2] = setIsOpen;
         $[3] = t2;
@@ -45837,7 +45805,7 @@ var Close = function() {
     }
     var t5;
     if ($[6] !== t1 || $[7] !== t2) {
-        t5 = /* @__PURE__ */ _jsx80(Flex27, {
+        t5 = /* @__PURE__ */ _jsx80(Flex28, {
             display: t1,
             onClick: t2,
             direction: "column",
@@ -45858,11 +45826,11 @@ var Close = function() {
     }
     return t5;
 };
-function _temp8(prev) {
+function _temp7(prev) {
     return !prev;
 }
 // src/components/threads/ThreadDialog/Content/index.tsx
-import { jsx as _jsx81, jsxs as _jsxs29 } from "react/jsx-runtime";
+import { jsx as _jsx81, jsxs as _jsxs30 } from "react/jsx-runtime";
 function ownKeys43(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -46015,7 +45983,7 @@ var Root11 = function(t0) {
     }
     var t12;
     if ($[13] !== t10) {
-        t12 = /* @__PURE__ */ _jsxs29(Card4, {
+        t12 = /* @__PURE__ */ _jsxs30(Card4, {
             mb: t7,
             style: t8,
             children: [
@@ -46030,7 +45998,7 @@ var Root11 = function(t0) {
     }
     var t13;
     if ($[15] !== className || $[16] !== t12 || $[17] !== t6) {
-        t13 = /* @__PURE__ */ _jsx81(Flex28, {
+        t13 = /* @__PURE__ */ _jsx81(Flex29, {
             className: className,
             direction: "column",
             justify: "end",
@@ -46066,7 +46034,7 @@ var Messages2 = function(_ref) {
 };
 var FormContainer = function(_ref2) {
     var children = _ref2.children, className = _ref2.className, style = _ref2.style;
-    return /* @__PURE__ */ _jsx81(Flex28, {
+    return /* @__PURE__ */ _jsx81(Flex29, {
         direction: "column",
         pl: "5",
         pr: "5",
@@ -46079,7 +46047,7 @@ var FormContainer = function(_ref2) {
 };
 var Content7 = function(props) {
     return /* @__PURE__ */ _jsx81(Root11, _objectSpread43(_objectSpread43({}, props), {}, {
-        children: /* @__PURE__ */ _jsxs29(Thread.Root, {
+        children: /* @__PURE__ */ _jsxs30(Thread.Root, {
             children: [
                 /* @__PURE__ */ _jsx81(Messages2, {}),
                 /* @__PURE__ */ _jsx81(FormContainer, {
@@ -46093,9 +46061,9 @@ Content7.Root = Root11;
 Content7.Messages = Messages2;
 Content7.FormContainer = FormContainer;
 // src/components/threads/ThreadDialog/index.tsx
-import { jsx as _jsx82, jsxs as _jsxs30 } from "react/jsx-runtime";
+import { jsx as _jsx82, jsxs as _jsxs31 } from "react/jsx-runtime";
 var ThreadDialog = function() {
-    return /* @__PURE__ */ _jsxs30(Root9, {
+    return /* @__PURE__ */ _jsxs31(Root9, {
         children: [
             /* @__PURE__ */ _jsx82(Content7, {}),
             /* @__PURE__ */ _jsx82(Trigger, {})
@@ -46107,7 +46075,7 @@ ThreadDialog.Trigger = Trigger;
 ThreadDialog.Content = Content7;
 // src/components/threads/AudioThread/Root/index.tsx
 import { c as _c53 } from "react-compiler-runtime";
-import { Flex as Flex29 } from "@radix-ui/themes";
+import { Flex as Flex30 } from "@radix-ui/themes";
 // src/contexts/threads/AudioThreadContext/index.ts
 import { createContext as createContext13 } from "react";
 var AudioThreadContext = /* @__PURE__ */ createContext13({
@@ -46201,7 +46169,7 @@ import { c as _c49 } from "react-compiler-runtime";
 import { useEffect as useEffect8, useRef as useRef6 } from "react";
 var useInterval = function(callback, delay) {
     var $ = _c49(5);
-    var savedCallback = useRef6(_temp9);
+    var savedCallback = useRef6(_temp8);
     var t0;
     if ($[0] !== callback) {
         t0 = function() {
@@ -46238,7 +46206,7 @@ var useInterval = function(callback, delay) {
     }
     useEffect8(t1, t2);
 };
-function _temp9() {}
+function _temp8() {}
 // src/hooks/audioThreads/useRecorder/index.ts
 function ownKeys44(e, r) {
     var t = Object.keys(e);
@@ -46459,7 +46427,7 @@ import nlp from "compromise";
 import { Howler } from "howler";
 import { useAudioPlayer as useAudioPlayer2 } from "react-use-audio-player";
 // src/hooks/audioThreads/useMessageAudio/lib/input.ts
-import { isEmpty as isEmpty3 } from "radash";
+import { isEmpty as isEmpty2 } from "radash";
 var input = function(_ref) {
     var message = _ref.message;
     var textContents = message.content.filter(function(c) {
@@ -46468,7 +46436,7 @@ var input = function(_ref) {
     var result = textContents.map(function(c) {
         return c.text.value;
     }).join(" ");
-    if (isEmpty3(result)) return null;
+    if (isEmpty2(result)) return null;
     return result;
 };
 // src/hooks/audioThreads/useMessageAudio/lib/isHtmlAudioSupported.ts
@@ -46787,7 +46755,7 @@ var useMessageAudio = function(t0) {
     } else {
         t8 = $[37];
     }
-    useEffect10(_temp10, t8);
+    useEffect10(_temp9, t8);
     var _useState94 = _sliced_to_array(useState9(null), 2), audioEngine = _useState94[0], setAudioEngine = _useState94[1];
     var isAudioEngineInited = useRef8(false);
     var t9;
@@ -46871,7 +46839,7 @@ var useMessageAudio = function(t0) {
     }
     return t13;
 };
-function _temp10() {
+function _temp9() {
     if (isHtmlAudioSupported) {
         var _Howler$_howls$;
         if (!(Howler !== null && Howler !== void 0 && (_Howler$_howls$ = Howler._howls[0]) !== null && _Howler$_howls$ !== void 0 && (_Howler$_howls$ = _Howler$_howls$._sounds[0]) !== null && _Howler$_howls$ !== void 0 && _Howler$_howls$._node)) {
@@ -46946,7 +46914,7 @@ var useTtsAudioRuntime = function(t0) {
     if ($[1] !== createMessageProps) {
         t2 = {
             isStopOnSilence: true,
-            onStart: _temp11,
+            onStart: _temp10,
             onStop: function() {
                 var _onStop = _asyncToGenerator11(function(_event, chunks) {
                     var blob, audioContent;
@@ -47083,7 +47051,7 @@ var useTtsAudioRuntime = function(t0) {
     t5 = t8;
     return t5;
 };
-function _temp11() {
+function _temp10() {
     return _temp23.apply(this, arguments);
 }
 function _temp23() {
@@ -47210,7 +47178,7 @@ function _objectWithoutPropertiesLoose5(r, e) {
 }
 var Content8 = function(_ref) {
     var children = _ref.children, className = _ref.className, style = _ref.style;
-    return /* @__PURE__ */ _jsx84(Flex29, {
+    return /* @__PURE__ */ _jsx84(Flex30, {
         direction: "column",
         flexGrow: "1",
         p: "9",
@@ -47298,10 +47266,10 @@ var Root12 = function(_ref2) {
 // src/components/threads/AudioThread/Visualization/index.tsx
 import { useContext as useContext17, useState as useState11, useCallback as useCallback8, useEffect as useEffect12 } from "react";
 import _9 from "lodash";
-import { Flex as Flex31 } from "@radix-ui/themes";
+import { Flex as Flex32 } from "@radix-ui/themes";
 // src/components/threads/AudioThread/BarsVisualizer/index.tsx
 import _8 from "lodash";
-import { Flex as Flex30, Grid } from "@radix-ui/themes";
+import { Flex as Flex31, Grid } from "@radix-ui/themes";
 import { useState as useState10, useEffect as useEffect11, useCallback as useCallback7 } from "react";
 import { cluster } from "radash";
 import { jsx as _jsx85 } from "react/jsx-runtime";
@@ -47344,12 +47312,12 @@ var BarsVisualizer = function(_ref) {
             gridTemplateColumns: "repeat(4, minmax(0, 1fr))"
         },
         children: barHeights.map(function(barHeight, index) {
-            return /* @__PURE__ */ _jsx85(Flex30, {
+            return /* @__PURE__ */ _jsx85(Flex31, {
                 direction: "column",
                 align: "center",
                 justify: "center",
                 height: height,
-                children: /* @__PURE__ */ _jsx85(Flex30, {
+                children: /* @__PURE__ */ _jsx85(Flex31, {
                     minHeight: "50%",
                     maxHeight: "100%",
                     height: "".concat(barHeight + 20, "%"),
@@ -47415,7 +47383,7 @@ var useStatus = function() {
     return t1;
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
-import { jsx as _jsx86, jsxs as _jsxs31 } from "react/jsx-runtime";
+import { jsx as _jsx86, jsxs as _jsxs32 } from "react/jsx-runtime";
 function ownKeys47(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -47487,7 +47455,7 @@ var Visualization = function(props) {
         draw,
         audioThreadContext
     ]);
-    return /* @__PURE__ */ _jsxs31(Flex31, _objectSpread47(_objectSpread47({
+    return /* @__PURE__ */ _jsxs32(Flex32, _objectSpread47(_objectSpread47({
         direction: "column",
         align: "center",
         justify: "center",
@@ -47495,7 +47463,7 @@ var Visualization = function(props) {
         flexGrow: "1"
     }, props), {}, {
         children: [
-            /* @__PURE__ */ _jsx86(Flex31, {
+            /* @__PURE__ */ _jsx86(Flex32, {
                 align: "center",
                 justify: "center",
                 height: "200px",
@@ -47512,7 +47480,7 @@ var Visualization = function(props) {
                     barWidth: "24px"
                 })
             }),
-            /* @__PURE__ */ _jsxs31(Flex31, {
+            /* @__PURE__ */ _jsxs32(Flex32, {
                 ml: "-22.5px",
                 gap: "3",
                 pt: "5",
@@ -47529,8 +47497,8 @@ var Visualization = function(props) {
 // src/components/threads/AudioThread/Status/index.tsx
 import { c as _c55 } from "react-compiler-runtime";
 // src/components/threads/AudioThread/Status/StatusMessages.tsx
-import { Flex as Flex32, Text as Text9 } from "@radix-ui/themes";
-import { jsx as _jsx87, jsxs as _jsxs32 } from "react/jsx-runtime";
+import { Flex as Flex33, Text as Text9 } from "@radix-ui/themes";
+import { jsx as _jsx87, jsxs as _jsxs33 } from "react/jsx-runtime";
 var html = function(_ref) {
     var texts = _ref.texts;
     return "\n  .status-messages-texts:after {\n    content: '".concat(texts[0], "';\n    animation: texts ").concat(texts.length * 5, "s linear infinite;\n  }\n\n  @keyframes texts {\n    ").concat(texts.map(function(_10, i) {
@@ -47539,7 +47507,7 @@ var html = function(_ref) {
 };
 var StatusMessages = function(_ref2) {
     var texts = _ref2.texts, className = _ref2.className, style = _ref2.style;
-    return /* @__PURE__ */ _jsxs32(Flex32, {
+    return /* @__PURE__ */ _jsxs33(Flex33, {
         justify: "center",
         pb: "5",
         className: className,
@@ -47705,7 +47673,7 @@ var Status = function(props) {
 };
 // src/components/threads/AudioThread/Form/index.tsx
 import { c as _c57 } from "react-compiler-runtime";
-import { Flex as Flex34 } from "@radix-ui/themes";
+import { Flex as Flex35 } from "@radix-ui/themes";
 // src/components/threads/AudioThread/Form/MicIcon.tsx
 import { jsx as _jsx89 } from "react/jsx-runtime";
 function ownKeys49(e, r) {
@@ -47769,9 +47737,9 @@ var MicIcon = function(props) {
 };
 // src/components/threads/AudioThread/Form/ActionButton/index.tsx
 import { c as _c56 } from "react-compiler-runtime";
-import { Flex as Flex33, IconButton as IconButton10 } from "@radix-ui/themes";
+import { Flex as Flex34, IconButton as IconButton10 } from "@radix-ui/themes";
 import { StopIcon as StopIcon2, PauseIcon as PauseIcon2, ArrowUpIcon as ArrowUpIcon3, ResumeIcon } from "@radix-ui/react-icons";
-import { jsx as _jsx90, jsxs as _jsxs33 } from "react/jsx-runtime";
+import { jsx as _jsx90, jsxs as _jsxs34 } from "react/jsx-runtime";
 var ActionButton = function() {
     var $ = _c56(27);
     var status = useStatus().status;
@@ -47787,7 +47755,7 @@ var ActionButton = function() {
         }
         var t1;
         if ($[1] !== audioThreadContext.audioRuntime.user.pause) {
-            t1 = /* @__PURE__ */ _jsx90(Flex33, {
+            t1 = /* @__PURE__ */ _jsx90(Flex34, {
                 mr: "3",
                 ml: "-7",
                 children: /* @__PURE__ */ _jsx90(IconButton10, {
@@ -47826,7 +47794,7 @@ var ActionButton = function() {
         }
         var t4;
         if ($[6] !== t1 || $[7] !== t3) {
-            t4 = /* @__PURE__ */ _jsxs33(Flex33, {
+            t4 = /* @__PURE__ */ _jsxs34(Flex34, {
                 align: "center",
                 children: [
                     t1,
@@ -47966,7 +47934,7 @@ var ActionButton = function() {
     return t0;
 };
 // src/components/threads/AudioThread/Form/index.tsx
-import { jsx as _jsx91, jsxs as _jsxs34 } from "react/jsx-runtime";
+import { jsx as _jsx91, jsxs as _jsxs35 } from "react/jsx-runtime";
 function ownKeys50(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -48017,7 +47985,7 @@ var Form = function(props) {
     var t0 = status === "recording" ? "var(--accent-11)" : "var(--gray-11)";
     var t1;
     if ($[0] !== t0) {
-        t1 = /* @__PURE__ */ _jsx91(Flex34, {
+        t1 = /* @__PURE__ */ _jsx91(Flex35, {
             ml: "-22.5px",
             mr: "2",
             align: "center",
@@ -48061,7 +48029,7 @@ var Form = function(props) {
     }
     var t6;
     if ($[7] !== t3 || $[8] !== t5) {
-        t6 = /* @__PURE__ */ _jsx91(Flex34, {
+        t6 = /* @__PURE__ */ _jsx91(Flex35, {
             px: "2",
             py: "1",
             style: t3,
@@ -48075,7 +48043,7 @@ var Form = function(props) {
     }
     var t7;
     if ($[10] !== t1 || $[11] !== t6) {
-        t7 = /* @__PURE__ */ _jsxs34(Flex34, {
+        t7 = /* @__PURE__ */ _jsxs35(Flex35, {
             pb: "3",
             align: "center",
             children: [
@@ -48098,7 +48066,7 @@ var Form = function(props) {
     }
     var t9;
     if ($[14] !== props || $[15] !== t7) {
-        t9 = /* @__PURE__ */ _jsxs34(Flex34, _objectSpread50(_objectSpread50({
+        t9 = /* @__PURE__ */ _jsxs35(Flex35, _objectSpread50(_objectSpread50({
             direction: "column",
             align: "center"
         }, props), {}, {
@@ -48116,7 +48084,7 @@ var Form = function(props) {
     return t9;
 };
 // src/components/threads/AudioThread/index.tsx
-import { jsx as _jsx92, jsxs as _jsxs35 } from "react/jsx-runtime";
+import { jsx as _jsx92, jsxs as _jsxs36 } from "react/jsx-runtime";
 function ownKeys51(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -48161,7 +48129,7 @@ function _toPrimitive51(t, r) {
     return ("string" === r ? String : Number)(t);
 }
 var AudioThread = function(props) {
-    return /* @__PURE__ */ _jsxs35(Root12, _objectSpread51(_objectSpread51({}, props), {}, {
+    return /* @__PURE__ */ _jsxs36(Root12, _objectSpread51(_objectSpread51({}, props), {}, {
         children: [
             /* @__PURE__ */ _jsx92(Visualization, {}),
             /* @__PURE__ */ _jsx92(Status, {}),
@@ -48174,7 +48142,7 @@ AudioThread.Visualization = Visualization;
 AudioThread.Status = Status;
 AudioThread.Form = Form;
 // src/components/threads/AudioThreadDialog/index.tsx
-import { jsx as _jsx93, jsxs as _jsxs36 } from "react/jsx-runtime";
+import { jsx as _jsx93, jsxs as _jsxs37 } from "react/jsx-runtime";
 function ownKeys52(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -48219,7 +48187,7 @@ function _toPrimitive52(t, r) {
     return ("string" === r ? String : Number)(t);
 }
 var AudioThreadDialog = function(props) {
-    return /* @__PURE__ */ _jsxs36(Root9, _objectSpread52(_objectSpread52({}, props), {}, {
+    return /* @__PURE__ */ _jsxs37(Root9, _objectSpread52(_objectSpread52({}, props), {}, {
         children: [
             /* @__PURE__ */ _jsx93(Content7.Root, {
                 children: /* @__PURE__ */ _jsx93(AudioThread, {})
@@ -48828,7 +48796,7 @@ import { QuoteIcon as QuoteIcon2 } from "@radix-ui/react-icons";
 import { Dialog, VisuallyHidden, IconButton as IconButton11 } from "@radix-ui/themes";
 // src/components/annotations/SourceAnnotation/FileCitation/Content.tsx
 import { c as _c60 } from "react-compiler-runtime";
-import { Flex as Flex35, Card as Card5, Inset as Inset3 } from "@radix-ui/themes";
+import { Flex as Flex36, Card as Card5, Inset as Inset3 } from "@radix-ui/themes";
 import { jsx as _jsx96 } from "react/jsx-runtime";
 var Content9 = function(t0) {
     var $ = _c60(5);
@@ -48868,7 +48836,7 @@ var Content9 = function(t0) {
     }
     var t5;
     if ($[3] !== t3) {
-        t5 = /* @__PURE__ */ _jsx96(Flex35, {
+        t5 = /* @__PURE__ */ _jsx96(Flex36, {
             direction: "column",
             flexGrow: "1",
             gap: "3",
@@ -48877,7 +48845,7 @@ var Content9 = function(t0) {
                 children: /* @__PURE__ */ _jsx96(Inset3, {
                     clip: "padding-box",
                     style: t2,
-                    children: /* @__PURE__ */ _jsx96(Flex35, {
+                    children: /* @__PURE__ */ _jsx96(Flex36, {
                         flexGrow: "1",
                         children: /* @__PURE__ */ _jsx96("embed", {
                             src: t3,
@@ -48895,7 +48863,7 @@ var Content9 = function(t0) {
     return t5;
 };
 // src/components/annotations/SourceAnnotation/FileCitation/index.tsx
-import { jsx as _jsx97, jsxs as _jsxs37, Fragment as _Fragment5 } from "react/jsx-runtime";
+import { jsx as _jsx97, jsxs as _jsxs38, Fragment as _Fragment5 } from "react/jsx-runtime";
 var FileCitation = function(t0) {
     var $ = _c61(18);
     var annotation = t0.annotation;
@@ -48977,7 +48945,7 @@ var FileCitation = function(t0) {
     }
     var t9;
     if ($[10] !== t8) {
-        t9 = /* @__PURE__ */ _jsxs37(Dialog.Content, {
+        t9 = /* @__PURE__ */ _jsxs38(Dialog.Content, {
             width: "1000px",
             height: "90vh",
             maxWidth: "calc(100vw - 2 * var(--space-4))",
@@ -49008,7 +48976,7 @@ var FileCitation = function(t0) {
     }
     var t11;
     if ($[15] !== t10 || $[16] !== t3) {
-        t11 = /* @__PURE__ */ _jsxs37(_Fragment5, {
+        t11 = /* @__PURE__ */ _jsxs38(_Fragment5, {
             children: [
                 t3,
                 t10