@superinterface/react 2.15.9 → 2.16.0

package/dist/index.cjs

@@ -505,7 +505,7 @@ var SuperinterfaceProvider = function(param) {
     });
 };
 // src/components/threads/Thread/Messages/index.tsx
-var import_themes32 = require("@radix-ui/themes");
+var import_themes31 = require("@radix-ui/themes");
 // src/components/threads/Thread/Messages/Content/index.tsx
 var import_react26 = require("react");
 // src/hooks/messages/useMessages/index.tsx
@@ -819,7 +819,7 @@ var useToasts = function() {
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
 var import_react25 = require("react");
-var import_themes29 = require("@radix-ui/themes");
+var import_themes28 = require("@radix-ui/themes");
 // src/components/messageGroups/MessageGroupBase/AssistantAvatar.tsx
 var import_react11 = require("react");
 var import_themes5 = require("@radix-ui/themes");
@@ -878,11 +878,11 @@ var UserAvatar = function() {
     });
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
-var import_themes28 = require("@radix-ui/themes");
+var import_themes27 = require("@radix-ui/themes");
 // src/components/threads/Thread/Message/index.tsx
 var import_react24 = require("react");
 var import_radash3 = require("radash");
-var import_themes27 = require("@radix-ui/themes");
+var import_themes26 = require("@radix-ui/themes");
 // src/components/skeletons/StartingContentSkeleton/index.tsx
 var import_themes8 = require("@radix-ui/themes");
 var import_jsx_runtime9 = require("react/jsx-runtime");
@@ -899,13 +899,11 @@ var StartingContentSkeleton = function() {
     });
 };
 // src/components/runSteps/RunSteps/index.tsx
-var import_themes17 = require("@radix-ui/themes");
+var import_themes15 = require("@radix-ui/themes");
 var import_react19 = require("react");
 // src/contexts/components/ComponentsContext/index.tsx
 var import_react18 = require("react");
 // src/components/runSteps/RunStep/ToolCalls/index.tsx
-var import_themes16 = require("@radix-ui/themes");
-// src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx
 var import_themes14 = require("@radix-ui/themes");
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/index.tsx
 var import_react17 = require("react");
@@ -922,16 +920,14 @@ var ToolCallBase = function(param) {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes9.Flex, {
         py: "1",
         ml: "-2",
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes9.Popover.Trigger, {
-            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes9.Button, {
-                size: "1",
-                color: "gold",
-                variant: "outline",
-                style: {
-                    boxShadow: "none"
-                },
-                children: children
-            })
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes9.Button, {
+            size: "1",
+            color: "gold",
+            variant: "outline",
+            style: {
+                boxShadow: "none"
+            },
+            children: children
         })
     });
 };
@@ -945,10 +941,10 @@ var ToolCallTitle = function(param) {
         children: children
     });
 };
-// src/components/functions/FunctionBase/Icon.tsx
+// src/components/toolCalls/ToolCallBase/ToolCallIcon.tsx
 var import_react_icons3 = require("@radix-ui/react-icons");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var Icon = function(param) {
+var ToolCallIcon = function(param) {
     var runStep = param.runStep;
     if (runStep.completed_at) {
         return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_icons3.CheckCircledIcon, {});
@@ -1015,15 +1011,17 @@ var FunctionBase = function(param) {
     var fn = param.fn, runStep = param.runStep, title2 = param.title;
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_themes12.Popover.Root, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ToolCallBase, {
-                children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, {
-                        runStep: runStep
-                    }),
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToolCallTitle, {
-                        children: title2
-                    })
-                ]
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes12.Popover.Trigger, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ToolCallBase, {
+                    children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToolCallIcon, {
+                            runStep: runStep
+                        }),
+                        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToolCallTitle, {
+                            children: title2
+                        })
+                    ]
+                })
             }),
             /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes12.Popover.Content, {
                 style: {
@@ -1072,55 +1070,101 @@ var Fn = function(param) {
         runStep: runStep
     });
 };
-// src/components/runSteps/RunStep/ToolCalls/ToolCall/CodeInterpreter/index.tsx
-var import_themes13 = require("@radix-ui/themes");
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/CodeInterpreter.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var CodeInterpreter = function(param) {
-    var codeInterpreter = param.codeInterpreter;
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes13.Flex, {
-        children: codeInterpreter.input
+    var runStep = param.runStep, toolCall = param.toolCall;
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(ToolCallBase, {
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolCallIcon, {
+                runStep: runStep
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolCallTitle, {
+                children: "Using code interpreter"
+            })
+        ]
     });
 };
-// src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/FileSearch.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
+var FileSearch = function(param) {
+    var runStep = param.runStep, toolCall = param.toolCall;
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ToolCallBase, {
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolCallIcon, {
+                runStep: runStep
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolCallTitle, {
+                children: "Searching files"
+            })
+        ]
+    });
+};
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/Fallback.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Fallback = function(param) {
+    var runStep = param.runStep, toolCall = param.toolCall;
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(ToolCallBase, {
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ToolCallIcon, {
+                runStep: runStep
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(ToolCallTitle, {
+                children: [
+                    "Using tool: ",
+                    toolCall.type
+                ]
+            })
+        ]
+    });
+};
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var ToolCall = function(param) {
     var toolCall = param.toolCall, runStep = param.runStep;
     if (toolCall.type === "function") {
-        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Fn, {
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Fn, {
             fn: toolCall.function,
             runStep: runStep
         });
     }
     if (toolCall.type === "code_interpreter") {
-        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CodeInterpreter, {
-            codeInterpreter: toolCall.code_interpreter,
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CodeInterpreter, {
+            toolCall: toolCall,
+            runStep: runStep
+        });
+    }
+    if (toolCall.type === "file_search") {
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FileSearch, {
+            toolCall: toolCall,
             runStep: runStep
         });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.Flex, {
-        children: toolCall.type
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Fallback, {
+        toolCall: toolCall,
+        runStep: runStep
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/Starting/index.tsx
-var import_themes15 = require("@radix-ui/themes");
+var import_themes13 = require("@radix-ui/themes");
 var import_react_icons4 = require("@radix-ui/react-icons");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var Starting = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_themes15.Popover.Root, {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_themes13.Popover.Root, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(ToolCallBase, {
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(ToolCallBase, {
                 children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_icons4.CircleIcon, {}),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ToolCallTitle, {
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_icons4.CircleIcon, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolCallTitle, {
                         children: "Starting actions"
                     })
                 ]
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_themes15.Popover.Content, {
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_themes13.Popover.Content, {
                 style: {
                     maxHeight: "500px"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_themes15.Text, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_themes13.Text, {
                     children: "Getting ready to connect to domain API"
                 })
             })
@@ -1128,21 +1172,21 @@ var Starting = function() {
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/index.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var Root = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes16.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_themes14.Flex, {
         direction: "column",
         children: children
     });
 };
 var ToolCalls = function(param) {
     var stepDetails = param.stepDetails, runStep = param.runStep;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Root, {
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Root, {
         children: [
-            !stepDetails.tool_calls.length && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Starting, {}),
+            !stepDetails.tool_calls.length && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Starting, {}),
             stepDetails.tool_calls.map(function(toolCall) {
-                return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ToolCall, {
+                return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolCall, {
                     toolCall: toolCall,
                     runStep: runStep
                 }, toolCall.id);
@@ -1154,11 +1198,11 @@ ToolCalls.Root = Root;
 ToolCalls.Starting = Starting;
 ToolCalls.ToolCall = ToolCall;
 // src/components/runSteps/RunStep/index.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var RunStep = function(param) {
     var runStep = param.runStep;
     if (runStep.step_details.type === "tool_calls") {
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolCalls, {
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ToolCalls, {
             stepDetails: runStep.step_details,
             runStep: runStep
         });
@@ -1173,15 +1217,15 @@ var ComponentsContext = (0, import_react18.createContext)({
     }
 });
 // src/components/runSteps/RunSteps/index.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var RunSteps = function(param) {
     var runSteps = param.runSteps;
     var componentsContext = (0, import_react19.useContext)(ComponentsContext);
     var Component = componentsContext.components.RunStep;
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_themes17.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_themes15.Flex, {
         direction: "column-reverse",
         children: runSteps.map(function(runStep) {
-            return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Component, {
+            return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Component, {
                 runStep: runStep
             }, runStep.id);
         })
@@ -1219,13 +1263,13 @@ var import_react23 = require("react");
 // src/contexts/markdown/MarkdownContext/index.ts
 var import_react22 = require("react");
 // src/contexts/markdown/MarkdownContext/lib/components/Paragraph.tsx
-var import_themes18 = require("@radix-ui/themes");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_themes16 = require("@radix-ui/themes");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var Paragraph = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_themes18.Box, {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_themes16.Box, {
         pb: "3",
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_themes18.Text, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_themes16.Text, {
             size: "3",
             style: {
                 whiteSpace: "pre-line",
@@ -1236,24 +1280,24 @@ var Paragraph = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Link.tsx
-var import_themes19 = require("@radix-ui/themes");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_themes17 = require("@radix-ui/themes");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var Link = function(param) {
     var children = param.children, href = param.href;
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_themes19.Link, {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_themes17.Link, {
         href: href,
         children: children
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/UnorderedList.tsx
-var import_themes20 = require("@radix-ui/themes");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_themes18 = require("@radix-ui/themes");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var UnorderedList = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_themes20.Box, {
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_themes18.Box, {
         pb: "3",
         asChild: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", {
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("ul", {
             style: {
                 listStylePosition: "inside"
             },
@@ -1262,14 +1306,14 @@ var UnorderedList = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/OrderedList.tsx
-var import_themes21 = require("@radix-ui/themes");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_themes19 = require("@radix-ui/themes");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var OrderedList = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_themes21.Box, {
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_themes19.Box, {
         pb: "3",
         asChild: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ol", {
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ol", {
             style: {
                 listStylePosition: "inside"
             },
@@ -1278,32 +1322,32 @@ var OrderedList = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/ListItem.tsx
-var import_themes22 = require("@radix-ui/themes");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_themes20 = require("@radix-ui/themes");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var ListItem = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_themes22.Box, {
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_themes20.Box, {
         pb: "1",
-        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("li", {
+        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("li", {
             children: children
         })
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Strong.tsx
-var import_themes23 = require("@radix-ui/themes");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_themes21 = require("@radix-ui/themes");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var Strong = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_themes23.Strong, {
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_themes21.Strong, {
         children: children
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Pre.tsx
-var import_themes24 = require("@radix-ui/themes");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_themes22 = require("@radix-ui/themes");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var Pre = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_themes24.Box, {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_themes22.Box, {
         style: {
             whiteSpace: "pre-wrap",
             wordBreak: "break-word"
@@ -1312,21 +1356,21 @@ var Pre = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Code.tsx
-var import_themes25 = require("@radix-ui/themes");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_themes23 = require("@radix-ui/themes");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var Code2 = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_themes25.Code, {
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_themes23.Code, {
         children: children
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Img.tsx
-var import_themes26 = require("@radix-ui/themes");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_themes24 = require("@radix-ui/themes");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var Img = function(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_themes26.Box, {
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_themes24.Box, {
         pb: "3",
-        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", _object_spread_props(_object_spread({}, props), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("img", _object_spread_props(_object_spread({}, props), {
             style: {
                 maxWidth: "100%",
                 height: "auto"
@@ -1358,16 +1402,39 @@ var useMarkdownContext = function() {
     return (0, import_react23.useContext)(MarkdownContext);
 };
 // src/components/threads/Thread/Message/TextContent.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var TextContent = function(param) {
     var content = param.content;
     var markdownContext = useMarkdownContext();
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_markdown.default, _object_spread_props(_object_spread({}, markdownContext), {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_markdown.default, _object_spread_props(_object_spread({}, markdownContext), {
         children: content.text.value
     }));
 };
+// src/components/threads/Thread/Message/Attachments/index.tsx
+var import_themes25 = require("@radix-ui/themes");
+var import_react_icons5 = require("@radix-ui/react-icons");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var Attachments = function(param) {
+    var message = param.message;
+    var _message_attachments;
+    if (!((_message_attachments = message.attachments) === null || _message_attachments === void 0 ? void 0 : _message_attachments.length)) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_themes25.Flex, {
+        align: "start",
+        pb: "1",
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_themes25.Badge, {
+            color: "gray",
+            variant: "surface",
+            children: [
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_icons5.FileIcon, {}),
+                message.attachments.length,
+                " file",
+                message.attachments.length > 1 ? "s" : ""
+            ]
+        })
+    });
+};
 // src/components/threads/Thread/Message/index.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var Message = function(param) {
     var message = param.message;
     var _ref = _sliced_to_array((0, import_react24.useMemo)(function() {
@@ -1412,65 +1479,68 @@ var Message = function(param) {
     }, [
         message
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Provider, {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Provider, {
         value: {
             message: message
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_themes27.Box, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_themes26.Box, {
             children: [
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(RunSteps, {
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RunSteps, {
                     runSteps: olderRunSteps
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_themes27.Box, {
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_themes26.Box, {
                     children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Attachments, {
+                            message: message
+                        }),
                         message.content.map(function(content, index) {
-                            return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react24.Fragment, {
-                                children: content.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TextContent, {
+                            return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react24.Fragment, {
+                                children: content.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TextContent, {
                                     content: content
                                 })
                             }, index);
                         }),
-                        isInProgress && (0, import_radash3.isEmpty)(laterRunSteps) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StartingContentSkeleton, {})
+                        isInProgress && (0, import_radash3.isEmpty)(laterRunSteps) && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(StartingContentSkeleton, {})
                     ]
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(RunSteps, {
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RunSteps, {
                     runSteps: laterRunSteps
                 }),
-                isInProgress && !(0, import_radash3.isEmpty)(laterRunSteps) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_themes27.Box, {
-                    children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StartingContentSkeleton, {})
+                isInProgress && !(0, import_radash3.isEmpty)(laterRunSteps) && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_themes26.Box, {
+                    children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(StartingContentSkeleton, {})
                 })
             ]
         })
     });
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var Content2 = function(param) {
     var messageGroup = param.messageGroup;
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_themes28.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_themes27.Flex, {
         direction: "column-reverse",
         children: messageGroup.messages.map(function(message) {
-            return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Message, {
+            return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Message, {
                 message: message
             }, message.id);
         })
     });
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var MessageGroup = function(param) {
     var messageGroup = param.messageGroup;
     var assistantNameContext = (0, import_react25.useContext)(AssistantNameContext);
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(MessageGroupBase, {
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(MessageGroupBase, {
         children: [
-            messageGroup.role === "user" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(UserAvatar, {}) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AssistantAvatar, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_themes29.Box, {
+            messageGroup.role === "user" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(UserAvatar, {}) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(AssistantAvatar, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_themes28.Box, {
                 flexGrow: "1",
                 children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Name, {
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Name, {
                         children: messageGroup.role === "user" ? "You" : assistantNameContext
                     }),
-                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Content2, {
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Content2, {
                         messageGroup: messageGroup
                     })
                 ]
@@ -1479,7 +1549,7 @@ var MessageGroup = function(param) {
     });
 };
 // src/components/threads/Thread/Messages/Content/index.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var Content3 = function() {
     var _useMessages = useMessages(), messages2 = _useMessages.messages, isLoading = _useMessages.isLoading, isLoadingError = _useMessages.isLoadingError;
     var addToast = useToasts().addToast;
@@ -1498,11 +1568,11 @@ var Content3 = function() {
         addToast
     ]);
     if (isLoading || isLoadingError) {
-        return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MessagesSkeleton, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(MessagesSkeleton, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, {
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, {
         children: messageGroups2.map(function(messageGroup) {
-            return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MessageGroup, {
+            return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(MessageGroup, {
                 messageGroup: messageGroup
             }, messageGroup.id);
         })
@@ -1512,21 +1582,21 @@ var Content3 = function() {
 var import_react29 = require("react");
 // src/components/skeletons/StartingSkeleton/index.tsx
 var import_react27 = require("react");
-var import_themes30 = require("@radix-ui/themes");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_themes29 = require("@radix-ui/themes");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var StartingSkeleton = function(param) {
     var children = param.children;
     var assistantNameContext = (0, import_react27.useContext)(AssistantNameContext);
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(MessageGroupBase, {
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(MessageGroupBase, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AssistantAvatar, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_themes30.Box, {
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(AssistantAvatar, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_themes29.Box, {
                 children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Name, {
+                    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Name, {
                         children: assistantNameContext
                     }),
                     children,
-                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StartingContentSkeleton, {})
+                    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(StartingContentSkeleton, {})
                 ]
             })
         ]
@@ -1551,7 +1621,7 @@ var isOptimistic = function(param) {
     return import_lodash4.default.startsWith(id, "-");
 };
 // src/components/threads/Thread/Messages/Progress/index.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var Progress = function() {
     var latestMessage = useLatestMessage().latestMessage;
     var isMutatingMessage = useIsMutatingMessage();
@@ -1569,10 +1639,10 @@ var Progress = function() {
         isMutatingMessage
     ]);
     if (!isVisible) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StartingSkeleton, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(StartingSkeleton, {});
 };
 // src/components/threads/Thread/Messages/Root/index.tsx
-var import_themes31 = require("@radix-ui/themes");
+var import_themes30 = require("@radix-ui/themes");
 // src/hooks/misc/useInfiniteScroll/index.tsx
 var import_react31 = require("react");
 var import_react_intersection_observer = require("react-intersection-observer");
@@ -1628,7 +1698,7 @@ var useInfiniteScroll = function(param) {
     };
 };
 // src/components/threads/Thread/Messages/Root/index.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var Root2 = function(param) {
     var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
     var _useMessages = useMessages(), isFetchingNextPage = _useMessages.isFetchingNextPage, hasNextPage = _useMessages.hasNextPage, fetchNextPage = _useMessages.fetchNextPage;
@@ -1637,7 +1707,7 @@ var Root2 = function(param) {
         hasNextPage: hasNextPage,
         fetchNextPage: fetchNextPage
     }), containerRef = _useInfiniteScroll.containerRef, loaderRef = _useInfiniteScroll.loaderRef;
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_themes31.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_themes30.Flex, {
         ref: containerRef,
         direction: "column-reverse",
         flexGrow: "1",
@@ -1646,10 +1716,10 @@ var Root2 = function(param) {
         }),
         children: [
             children,
-            hasNextPage && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_themes31.Flex, {
+            hasNextPage && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_themes30.Flex, {
                 ref: loaderRef
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_themes31.Flex, {
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_themes30.Flex, {
                 flexShrink: "0",
                 flexGrow: "1"
             })
@@ -1657,30 +1727,30 @@ var Root2 = function(param) {
     });
 };
 // src/components/threads/Thread/Messages/NextPageSkeleton.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var NextPageSkeleton = function() {
     var hasNextPage = useMessages().hasNextPage;
     if (!hasNextPage) {
         return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(MessagesSkeleton, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(MessagesSkeleton, {});
 };
 // src/components/threads/Thread/Messages/index.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var Messages = function(param) {
     var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Root2, {
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Root2, {
         style: style,
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_themes32.Flex, {
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_themes31.Flex, {
                 flexShrink: "0",
                 height: "var(--space-3)"
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Progress, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Progress, {}),
             children,
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Content3, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(NextPageSkeleton, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_themes32.Flex, {
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Content3, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(NextPageSkeleton, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_themes31.Flex, {
                 flexShrink: "0",
                 flexGrow: "1"
             })
@@ -1690,49 +1760,65 @@ var Messages = function(param) {
 Messages.Root = Root2;
 Messages.Message = Message;
 Messages.NextPageSkeleton = NextPageSkeleton;
-// src/components/threads/Thread/MessageForm/index.tsx
-var import_themes36 = require("@radix-ui/themes");
 // src/components/threads/Thread/MessageForm/Submit/index.tsx
-var import_react_icons5 = require("@radix-ui/react-icons");
-var import_themes33 = require("@radix-ui/themes");
+var import_react_icons6 = require("@radix-ui/react-icons");
+var import_themes32 = require("@radix-ui/themes");
 // src/hooks/messages/useMessageFormContext/index.ts
 var import_react33 = require("react");
 // src/contexts/messages/MessageFormContext/index.ts
 var import_react32 = require("react");
 var MessageFormContext = (0, import_react32.createContext)({
     isDisabled: false,
-    isLoading: false
+    isLoading: false,
+    files: [],
+    setFiles: function() {},
+    isFileLoading: false
 });
 // src/hooks/messages/useMessageFormContext/index.ts
 var useMessageFormContext = function() {
     return (0, import_react33.useContext)(MessageFormContext);
 };
 // src/components/threads/Thread/MessageForm/Submit/index.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var Submit = function() {
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var Root3 = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_themes32.Flex, {
+        flexShrink: "0",
+        align: "end",
+        children: children
+    });
+};
+var Button2 = function() {
     var superinterfaceContext = useSuperinterfaceContext();
-    var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading;
+    var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading, isFileLoading = _useMessageFormContext.isFileLoading;
     if (isLoading) {
-        return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_themes33.IconButton, {
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_themes32.IconButton, {
             type: "button",
             onClick: function() {
                 var _superinterfaceContext_createMessageAbortControllerRef_current;
                 return (_superinterfaceContext_createMessageAbortControllerRef_current = superinterfaceContext.createMessageAbortControllerRef.current) === null || _superinterfaceContext_createMessageAbortControllerRef_current === void 0 ? void 0 : _superinterfaceContext_createMessageAbortControllerRef_current.abort();
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_icons5.StopIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_icons6.StopIcon, {})
         });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_themes33.IconButton, {
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_themes32.IconButton, {
         type: "submit",
-        disabled: isDisabled,
-        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_icons5.ArrowUpIcon, {})
+        disabled: isDisabled || isFileLoading,
+        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_icons6.ArrowUpIcon, {})
     });
 };
+var Submit = function() {
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Root3, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button2, {})
+    });
+};
+Submit.Root = Root3;
+Submit.Button = Button2;
 // src/components/threads/Thread/MessageForm/Root/index.tsx
 var import_react_query5 = require("@tanstack/react-query");
 var import_react34 = require("react");
 var import_react_hook_form = require("react-hook-form");
-var import_themes34 = require("@radix-ui/themes");
+var import_themes33 = require("@radix-ui/themes");
 // src/hooks/messages/useCreateMessage/index.ts
 var import_radash11 = require("radash");
 var import_react_query4 = require("@tanstack/react-query");
@@ -1749,6 +1835,7 @@ var optimisticId = function() {
 var data = function(param) {
     var newMessage = param.newMessage;
     return function(prevData) {
+        var _newMessage_attachments;
         var message = {
             id: optimisticId(),
             role: "user",
@@ -1766,7 +1853,7 @@ var data = function(param) {
             run_id: null,
             assistant_id: null,
             thread_id: null,
-            attachments: [],
+            attachments: (_newMessage_attachments = newMessage.attachments) !== null && _newMessage_attachments !== void 0 ? _newMessage_attachments : [],
             metadata: {},
             runSteps: []
         };
@@ -1808,7 +1895,8 @@ var onMutate = function(param) {
                         queryKey = [
                             "messages",
                             (0, import_radash5.omit)(newMessage, [
-                                "content"
+                                "content",
+                                "attachments"
                             ])
                         ];
                         return [
@@ -2353,9 +2441,10 @@ var formOptions = {
 };
 // src/components/threads/Thread/MessageForm/Root/index.tsx
 var import_radash12 = require("radash");
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var Root3 = function(param) {
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var Root4 = function(param) {
     var children = param.children, onSubmitArg = param.onSubmit;
+    var _ref = _sliced_to_array((0, import_react34.useState)([]), 2), files = _ref[0], setFiles = _ref[1];
     var formProps = (0, import_react_hook_form.useForm)(formOptions);
     var handleSubmit = formProps.handleSubmit, isSubmitting = formProps.formState.isSubmitting, reset = formProps.reset;
     var addToast = useToasts().addToast;
@@ -2385,27 +2474,69 @@ var Root3 = function(param) {
         }
     }).createMessage;
     var isMutatingMessage = useIsMutatingMessage();
+    var isFileLoading = (0, import_react34.useMemo)(function() {
+        return files.some(function(file) {
+            return isOptimistic({
+                id: file.id
+            });
+        });
+    }, [
+        files
+    ]);
     var isLoading = (0, import_react34.useMemo)(function() {
         return isMutatingMessage || isSubmitting;
     }, [
         isMutatingMessage,
         isSubmitting
     ]);
+    var latestMessage = useLatestMessage().latestMessage;
+    var isDisabled = (0, import_react34.useMemo)(function() {
+        var // @ts-ignore-next-line
+        _latestMessage_metadata;
+        return latestMessage === null || latestMessage === void 0 ? void 0 : (_latestMessage_metadata = latestMessage.metadata) === null || _latestMessage_metadata === void 0 ? void 0 : _latestMessage_metadata.isBlocking;
+    }, [
+        latestMessage,
+        isLoading,
+        files
+    ]);
     var onSubmit = onSubmitArg ? (0, import_radash12.partob)(onSubmitArg, {
         reset: reset,
         createMessage: createMessage
     }) : function() {
         var _ref = _async_to_generator(function(data2) {
+            var attachments;
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
+                        if (isFileLoading) return [
+                            2
+                        ];
+                        if (isLoading) return [
+                            2
+                        ];
+                        if (isDisabled) return [
+                            2
+                        ];
                         reset();
+                        setFiles([]);
+                        attachments = files.map(function(file) {
+                            return {
+                                file_id: file.id,
+                                tools: [
+                                    {
+                                        type: "file_search"
+                                    }
+                                ]
+                            };
+                        });
                         return [
                             4,
-                            createMessage({
+                            createMessage(_object_spread({
                                 // @ts-ignore-next-line
                                 content: data2.content
-                            })
+                            }, attachments.length ? {
+                                attachments: attachments
+                            } : {}))
                         ];
                     case 1:
                         _state.sent();
@@ -2419,25 +2550,19 @@ var Root3 = function(param) {
             return _ref.apply(this, arguments);
         };
     }();
-    var latestMessage = useLatestMessage().latestMessage;
-    var isDisabled = (0, import_react34.useMemo)(function() {
-        var // @ts-ignore-next-line
-        _latestMessage_metadata;
-        return latestMessage === null || latestMessage === void 0 ? void 0 : (_latestMessage_metadata = latestMessage.metadata) === null || _latestMessage_metadata === void 0 ? void 0 : _latestMessage_metadata.isBlocking;
-    }, [
-        latestMessage,
-        isLoading
-    ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(MessageFormContext.Provider, {
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(MessageFormContext.Provider, {
         value: {
             isDisabled: isDisabled,
-            isLoading: isLoading
+            isLoading: isLoading,
+            files: files,
+            setFiles: setFiles,
+            isFileLoading: isFileLoading
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_hook_form.FormProvider, _object_spread_props(_object_spread({}, formProps), {
-            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_themes34.Box, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_hook_form.FormProvider, _object_spread_props(_object_spread({}, formProps), {
+            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_themes33.Box, {
                 asChild: true,
                 flexShrink: "0",
-                children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("form", {
+                children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("form", {
                     onSubmit: handleSubmit(onSubmit),
                     children: children
                 })
@@ -2446,20 +2571,24 @@ var Root3 = function(param) {
     });
 };
 // src/components/threads/Thread/MessageForm/Field/index.tsx
+var import_react_hook_form3 = require("react-hook-form");
+var import_themes37 = require("@radix-ui/themes");
+// src/components/threads/Thread/MessageForm/Field/Control.tsx
+var import_themes34 = require("@radix-ui/themes");
+var import_react_hook_form2 = require("react-hook-form");
 var import_react_use = require("react-use");
 var import_react36 = require("react");
 // src/components/textareas/TextareaBase/index.tsx
 var import_react35 = require("react");
 var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"), 1);
-var import_jsx_runtime44 = require("react/jsx-runtime");
-var UPSCALE_RATIO = 16 / 14;
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var TextareaBase = (0, import_react35.forwardRef)(function TextareaBase2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, {
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("style", {
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("style", {
                 children: ".superinterface-textarea { min-height: inherit; height: 30px; }\n.superinterface-textarea::placeholder { color: var(--gray-a10); }"
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_textarea_autosize.default, _object_spread({
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_textarea_autosize.default, _object_spread({
                 ref: ref,
                 className: "rt-reset superinterface-textarea",
                 style: {
@@ -2468,12 +2597,6 @@ var TextareaBase = (0, import_react35.forwardRef)(function TextareaBase2(props,
                     boxSizing: "border-box",
                     resize: "none",
                     color: "var(--gray-12)",
-                    fontSize: "".concat(14 * UPSCALE_RATIO, "px"),
-                    lineHeight: "".concat(24 * UPSCALE_RATIO, "px"),
-                    transform: "scale(".concat(1 / UPSCALE_RATIO, ")"),
-                    margin: "0 ".concat((-100 * UPSCALE_RATIO + 100) / 2, "%"),
-                    width: "".concat(100 * UPSCALE_RATIO, "%"),
-                    maxWidth: "".concat(100 * UPSCALE_RATIO, "%"),
                     flexGrow: 1,
                     display: "flex"
                 }
@@ -2481,40 +2604,17 @@ var TextareaBase = (0, import_react35.forwardRef)(function TextareaBase2(props,
         ]
     });
 });
-// src/components/threads/Thread/MessageForm/Field/index.tsx
-var import_react_hook_form2 = require("react-hook-form");
-var import_themes35 = require("@radix-ui/themes");
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var Root4 = function(param) {
+// src/components/threads/Thread/MessageForm/Field/Control.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var Root5 = function(param) {
     var children = param.children;
-    var _ref = (0, import_react_hook_form2.useFormContext)(), errors = _ref.formState.errors;
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_themes35.Container, {
-        size: "2",
-        flexGrow: "0",
-        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_themes35.Flex, {
-            direction: "column",
-            flexShrink: "0",
-            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_themes35.Flex, {
-                direction: "column",
-                flexShrink: "0",
-                children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_themes35.Flex, {
-                    style: _object_spread({
-                        borderRadius: "var(--radius-2)",
-                        borderWidth: "1px",
-                        borderStyle: "solid",
-                        borderColor: errors.content ? "var(--red-9)" : "var(--gray-5)"
-                    }, errors.content ? {
-                        backgroundColor: "var(--red-2)"
-                    } : {}),
-                    p: "2",
-                    pl: "4",
-                    children: children
-                })
-            })
-        })
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_themes34.Flex, {
+        flexGrow: "1",
+        pt: "4px",
+        children: children
     });
 };
-var Control = function() {
+var Input = function() {
     var assistantNameContext = (0, import_react36.useContext)(AssistantNameContext);
     var register = (0, import_react_hook_form2.useFormContext)().register;
     var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading;
@@ -2537,7 +2637,7 @@ var Control = function() {
         isDisabledPrevious,
         textareaProps
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TextareaBase, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TextareaBase, _object_spread_props(_object_spread({
         minRows: 1,
         placeholder: "Message ".concat(assistantNameContext, "..."),
         disabled: isDisabled,
@@ -2556,51 +2656,348 @@ var Control = function() {
         }
     }));
 };
-var Field = {
-    Root: Root4,
-    Control: Control
-};
-// src/components/threads/Thread/MessageForm/index.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var MessageForm = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Root3, {
-        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Field.Root, {
-            children: [
-                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_themes36.Text, {
-                    size: "2",
-                    style: {
-                        flexGrow: 1
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_themes36.Flex, {
-                        flexGrow: "1",
-                        direction: "column",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Field.Control, {})
-                    })
-                }),
-                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_themes36.Flex, {
-                    flexShrink: "0",
-                    align: "end",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Submit, {})
-                })
-            ]
-        })
+var Control = function() {
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Root5, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Input, {})
     });
 };
-MessageForm.Root = Root3;
-MessageForm.Field = Field;
-MessageForm.Submit = Submit;
-// src/components/threads/Thread/Root/index.tsx
-var import_themes37 = require("@radix-ui/themes");
-// src/components/threads/Thread/Provider/index.tsx
-var Provider2 = SuperinterfaceProvider;
-// src/components/threads/Thread/Root/index.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var Root5 = function(_param) {
+Control.Root = Root5;
+Control.Input = Input;
+// src/components/threads/Thread/MessageForm/Field/Files/Preview.tsx
+var import_themes35 = require("@radix-ui/themes");
+var import_react_icons7 = require("@radix-ui/react-icons");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var Preview = function() {
+    var _useMessageFormContext = useMessageFormContext(), files = _useMessageFormContext.files, setFiles = _useMessageFormContext.setFiles;
+    if (!files.length) {
+        return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes35.Flex, {
+        flexBasis: "100%",
+        direction: "column",
+        pb: "2",
+        gap: "1",
+        children: files.map(function(file) {
+            return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes35.Card, {
+                variant: "ghost",
+                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_themes35.Flex, {
+                    align: "center",
+                    justify: "between",
+                    gap: "1",
+                    children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_themes35.Flex, {
+                            align: "center",
+                            gap: "1",
+                            flexShrink: "1",
+                            minWidth: "0",
+                            maxWidth: "250px",
+                            children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes35.Flex, {
+                                    flexShrink: "0",
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes35.Spinner, {
+                                        loading: isOptimistic({
+                                            id: file.id
+                                        }),
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_icons7.FileIcon, {})
+                                    })
+                                }),
+                                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes35.Text, {
+                                    size: "2",
+                                    truncate: true,
+                                    wrap: "nowrap",
+                                    children: file.filename
+                                })
+                            ]
+                        }),
+                        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes35.Flex, {
+                            flexShrink: "0",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes35.IconButton, {
+                                onClick: function() {
+                                    return setFiles(function(prev) {
+                                        return prev.filter(function(prevFile) {
+                                            return prevFile.id !== file.id;
+                                        });
+                                    });
+                                },
+                                color: "gray",
+                                variant: "ghost",
+                                size: "1",
+                                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_icons7.Cross2Icon, {})
+                            })
+                        })
+                    ]
+                })
+            }, file.id);
+        })
+    });
+};
+// src/components/threads/Thread/MessageForm/Field/Files/Control.tsx
+var import_react37 = require("react");
+var import_dayjs2 = __toESM(require("dayjs"), 1);
+var import_react_icons8 = require("@radix-ui/react-icons");
+var import_themes36 = require("@radix-ui/themes");
+// src/hooks/files/useCreateFile/index.ts
+var import_react_query6 = require("@tanstack/react-query");
+// src/hooks/files/useCreateFile/lib/mutationOptions/mutationFn/body/formData.ts
+var formData = function(variables) {
+    var data2 = new FormData();
+    for(var key2 in variables){
+        data2.append(key2, variables[key2]);
+    }
+    return data2;
+};
+// src/hooks/files/useCreateFile/lib/mutationOptions/mutationFn/body/index.ts
+var body2 = function(param) {
+    var variables = param.variables, superinterfaceContext = param.superinterfaceContext;
+    var _superinterfaceContext_threadIdCookieOptions;
+    if (variables.threadId) return formData(variables);
+    if (!variables.assistantId) return formData(variables);
+    if (!((_superinterfaceContext_threadIdCookieOptions = superinterfaceContext.threadIdCookieOptions) === null || _superinterfaceContext_threadIdCookieOptions === void 0 ? void 0 : _superinterfaceContext_threadIdCookieOptions.get)) return formData(variables);
+    var threadId = superinterfaceContext.threadIdCookieOptions.get({
+        assistantId: variables.assistantId
+    });
+    if (!threadId) return formData(variables);
+    return formData(_object_spread_props(_object_spread({}, variables), {
+        threadId: threadId
+    }));
+};
+// src/hooks/files/useCreateFile/lib/mutationOptions/mutationFn/index.ts
+var mutationFn2 = function(param) {
+    var superinterfaceContext = param.superinterfaceContext, queryClient = param.queryClient, threadContext = param.threadContext;
+    return function() {
+        var _ref = _async_to_generator(function(variables) {
+            var response, result;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        return [
+                            4,
+                            fetch("".concat(superinterfaceContext.baseUrl, "/files"), {
+                                method: "POST",
+                                body: body2({
+                                    variables: variables,
+                                    superinterfaceContext: superinterfaceContext
+                                })
+                            })
+                        ];
+                    case 1:
+                        response = _state.sent();
+                        return [
+                            4,
+                            response.json()
+                        ];
+                    case 2:
+                        result = _state.sent();
+                        return [
+                            2,
+                            result
+                        ];
+                }
+            });
+        });
+        return function(variables) {
+            return _ref.apply(this, arguments);
+        };
+    }();
+};
+// src/hooks/files/useCreateFile/lib/mutationOptions/index.ts
+var mutationOptions2 = function(param) {
+    var queryClient = param.queryClient, threadContext = param.threadContext, superinterfaceContext = param.superinterfaceContext, onError = param.onError;
+    var mutationKey = [
+        "createFile",
+        threadContext.variables
+    ];
+    return _object_spread_props(_object_spread({
+        mutationFn: mutationFn2({
+            queryClient: queryClient,
+            superinterfaceContext: superinterfaceContext,
+            threadContext: threadContext
+        }),
+        onError: onError
+    }, threadContext.defaultOptions.mutations, queryClient.getMutationDefaults(mutationKey)), {
+        mutationKey: mutationKey
+    });
+};
+// src/hooks/files/useCreateFile/index.ts
+var useCreateFile = function() {
+    var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {
+        onError: function() {}
+    }, _ref_onError = _ref.onError, onError = _ref_onError === void 0 ? function() {} : _ref_onError;
+    var queryClient = (0, import_react_query6.useQueryClient)();
+    var superinterfaceContext = useSuperinterfaceContext();
+    var threadContext = useSuperinterfaceContext();
+    var props = (0, import_react_query6.useMutation)(mutationOptions2({
+        queryClient: queryClient,
+        threadContext: threadContext,
+        superinterfaceContext: superinterfaceContext,
+        onError: onError
+    }));
+    return _object_spread_props(_object_spread({}, props), {
+        createFile: function() {
+            for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                args[_key] = arguments[_key];
+            }
+            var _props;
+            var _args = _to_array(args), firstArg = _args[0], restArgs = _args.slice(1);
+            return (_props = props).mutateAsync.apply(_props, [
+                _object_spread({}, threadContext.variables, firstArg)
+            ].concat(_to_consumable_array(restArgs)));
+        }
+    });
+};
+// src/components/threads/Thread/MessageForm/Field/Files/Control.tsx
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var accept = ".c,text/x-c,\n.cs,text/x-csharp,\n.cpp,text/x-c++,\n.doc,application/msword,\n.docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document,\n.html,text/html,\n.java,text/x-java,\n.json,application/json,\n.md,text/markdown,\n.pdf,application/pdf,\n.php,text/x-php,\n.pptx,application/vnd.openxmlformats-officedocument.presentationml.presentation,\n.py,text/x-python,\n.py,text/x-script.python,\n.rb,text/x-ruby,\n.tex,text/x-tex,\n.txt,text/plain,\n.css,text/css,\n.js,text/javascript,\n.sh,application/x-sh,\n.ts,application/typescript";
+var Control2 = function() {
+    var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading, setFiles = _useMessageFormContext.setFiles;
+    var createFile = useCreateFile().createFile;
+    var addToast = useToasts().addToast;
+    var onChange = (0, import_react37.useCallback)(function(event) {
+        var files = event.target.files;
+        if (!files) return;
+        var newFiles = Array.from(files).map(function(file) {
+            var id = optimisticId();
+            createFile({
+                file: file
+            }, {
+                onSuccess: function(param) {
+                    var file2 = param.file;
+                    setFiles(function(prev) {
+                        return _to_consumable_array(prev.filter(function(prevFile) {
+                            return prevFile.id !== id;
+                        })).concat([
+                            file2
+                        ]);
+                    });
+                },
+                onError: function() {
+                    addToast({
+                        type: "error",
+                        message: "Could not upload file. Please try again."
+                    });
+                    setFiles(function(prev) {
+                        return prev.filter(function(prevFile) {
+                            return prevFile.id !== id;
+                        });
+                    });
+                }
+            });
+            return {
+                id: id,
+                filename: file.name,
+                object: "file",
+                purpose: "assistants",
+                created_at: (0, import_dayjs2.default)().unix(),
+                bytes: file.size,
+                status: "processed"
+            };
+        });
+        setFiles(function(prev) {
+            return _to_consumable_array(prev).concat(_to_consumable_array(newFiles));
+        });
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_themes36.Flex, {
+        pt: "2",
+        pr: "2",
+        flexGrow: "0",
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_themes36.IconButton, {
+            type: "button",
+            variant: "ghost",
+            color: "gray",
+            disabled: isDisabled || isLoading,
+            style: {
+                position: "relative",
+                overflow: "hidden"
+            },
+            children: [
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_icons8.FilePlusIcon, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("input", {
+                    type: "file",
+                    accept: accept,
+                    onChange: onChange,
+                    style: {
+                        cursor: "pointer",
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        opacity: 0
+                    }
+                })
+            ]
+        })
+    });
+};
+// src/components/threads/Thread/MessageForm/Field/Files/index.tsx
+var Files = {
+    Preview: Preview,
+    Control: Control2
+};
+// src/components/threads/Thread/MessageForm/Field/index.tsx
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var Root6 = function(param) {
+    var children = param.children;
+    var _ref = (0, import_react_hook_form3.useFormContext)(), errors = _ref.formState.errors;
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_themes37.Container, {
+        size: "2",
+        flexGrow: "0",
+        children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_themes37.Flex, {
+            direction: "column",
+            flexShrink: "0",
+            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_themes37.Flex, {
+                direction: "column",
+                flexShrink: "0",
+                children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_themes37.Flex, {
+                    style: _object_spread({
+                        borderRadius: "var(--radius-2)",
+                        borderWidth: "1px",
+                        borderStyle: "solid",
+                        borderColor: errors.content ? "var(--red-9)" : "var(--gray-5)"
+                    }, errors.content ? {
+                        backgroundColor: "var(--red-2)"
+                    } : {}),
+                    p: "2",
+                    pl: "3",
+                    wrap: "wrap",
+                    children: children
+                })
+            })
+        })
+    });
+};
+var Field = {
+    Root: Root6,
+    Control: Control,
+    Files: Files
+};
+// src/components/threads/Thread/MessageForm/index.tsx
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var MessageForm = function() {
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Root4, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Field.Root, {
+            children: [
+                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Field.Control, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Submit, {})
+            ]
+        })
+    });
+};
+MessageForm.Root = Root4;
+MessageForm.Field = Field;
+MessageForm.Submit = Submit;
+// src/components/threads/Thread/Root/index.tsx
+var import_themes38 = require("@radix-ui/themes");
+// src/components/threads/Thread/Provider/index.tsx
+var Provider2 = SuperinterfaceProvider;
+// src/components/threads/Thread/Root/index.tsx
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var Root7 = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Provider2, _object_spread_props(_object_spread({}, rest), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_themes37.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Provider2, _object_spread_props(_object_spread({}, rest), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_themes38.Flex, {
             direction: "column",
             flexGrow: "1",
             children: children
@@ -2608,43 +3005,43 @@ var Root5 = function(_param) {
     }));
 };
 // src/components/threads/Thread/index.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var Thread = function(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Root5, _object_spread_props(_object_spread({}, props), {
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Root7, _object_spread_props(_object_spread({}, props), {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Messages, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(MessageForm, {})
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Messages, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(MessageForm, {})
         ]
     }));
 };
-Thread.Root = Root5;
+Thread.Root = Root7;
 Thread.Messages = Messages;
 Thread.MessageForm = MessageForm;
 // src/hooks/messages/useMessageContext/index.ts
-var import_react37 = require("react");
+var import_react38 = require("react");
 var useMessageContext = function() {
-    return (0, import_react37.useContext)(MessageContext);
+    return (0, import_react38.useContext)(MessageContext);
 };
 // src/components/threads/ThreadDialog/Provider/index.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 // src/contexts/threads/ThreadDialogContext/index.ts
-var import_react38 = require("react");
-var ThreadDialogContext = (0, import_react38.createContext)({
+var import_react39 = require("react");
+var ThreadDialogContext = (0, import_react39.createContext)({
     isOpen: false,
     setIsOpen: function() {}
 });
 // src/hooks/threads/useThreadDialogContext/index.ts
-var import_react39 = require("react");
+var import_react40 = require("react");
 var useThreadDialogContext = function() {
-    return (0, import_react39.useContext)(ThreadDialogContext);
+    return (0, import_react40.useContext)(ThreadDialogContext);
 };
 // src/components/threads/ThreadDialog/Provider/index.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var Provider3 = function(param) {
     var children = param.children;
     var threadDialogContext = useThreadDialogContext();
-    var _ref = _sliced_to_array((0, import_react40.useState)(threadDialogContext.isOpen), 2), isOpen = _ref[0], setIsOpen = _ref[1];
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ThreadDialogContext.Provider, {
+    var _ref = _sliced_to_array((0, import_react41.useState)(threadDialogContext.isOpen), 2), isOpen = _ref[0], setIsOpen = _ref[1];
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ThreadDialogContext.Provider, {
         value: {
             isOpen: isOpen,
             setIsOpen: setIsOpen
@@ -2653,31 +3050,31 @@ var Provider3 = function(param) {
     });
 };
 // src/components/toasts/ToastsProvider/index.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 var Toast2 = __toESM(require("@radix-ui/react-toast"), 1);
 // src/components/toasts/ToastsProvider/CustomToast.tsx
 var Toast = __toESM(require("@radix-ui/react-toast"), 1);
-var import_themes38 = require("@radix-ui/themes");
-var import_react_icons6 = require("@radix-ui/react-icons");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_themes39 = require("@radix-ui/themes");
+var import_react_icons9 = require("@radix-ui/react-icons");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var CustomToast = function(param) {
     var toast = param.toast;
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Toast.Root, {
-        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_themes38.Card, {
-            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Toast.Title, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_themes38.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Toast.Root, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_themes39.Card, {
+            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Toast.Title, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_themes39.Flex, {
                     children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_themes38.Flex, {
+                        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_themes39.Flex, {
                             pr: "2",
                             height: "14px",
                             align: "center",
-                            children: toast.type === "success" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_icons6.CheckCircledIcon, {
+                            children: toast.type === "success" ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_icons9.CheckCircledIcon, {
                                 color: "var(--accent-9)"
-                            }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_icons6.CrossCircledIcon, {
+                            }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_icons9.CrossCircledIcon, {
                                 color: "var(--red-9)"
                             })
                         }),
-                        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_themes38.Text, {
+                        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_themes39.Text, {
                             weight: "medium",
                             size: "1",
                             children: toast.message
@@ -2689,31 +3086,31 @@ var CustomToast = function(param) {
     });
 };
 // src/components/toasts/ToastsProvider/index.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var ToastsProvider = function(param) {
     var children = param.children;
-    var _ref = _sliced_to_array((0, import_react41.useState)([]), 2), toasts = _ref[0], setToasts = _ref[1];
-    var addToast = (0, import_react41.useCallback)(function(toast) {
+    var _ref = _sliced_to_array((0, import_react42.useState)([]), 2), toasts = _ref[0], setToasts = _ref[1];
+    var addToast = (0, import_react42.useCallback)(function(toast) {
         return setToasts(function(prevToasts) {
             return _to_consumable_array(prevToasts).concat([
                 toast
             ]);
         });
     }, []);
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ToastsContext.Provider, {
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ToastsContext.Provider, {
         value: {
             toasts: toasts,
             addToast: addToast
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Toast2.Provider, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Toast2.Provider, {
             children: [
                 children,
                 Array.from(toasts).map(function(toast, index) {
-                    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(CustomToast, {
+                    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(CustomToast, {
                         toast: toast
                     }, index);
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Toast2.Viewport, {
+                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Toast2.Viewport, {
                     style: {
                         position: "absolute",
                         bottom: 0,
@@ -2735,22 +3132,34 @@ var ToastsProvider = function(param) {
     });
 };
 // src/components/threads/ThreadDialog/Root/index.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
-var Root7 = function(param) {
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var Root9 = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ToastsProvider, {
-        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Provider3, {
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ToastsProvider, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Provider3, {
             children: children
         })
     });
 };
 // src/components/threads/ThreadDialog/Trigger/index.tsx
-var import_themes39 = require("@radix-ui/themes");
-var import_jsx_runtime53 = require("react/jsx-runtime");
-var Trigger = function(param) {
+var import_themes41 = require("@radix-ui/themes");
+// src/components/threads/ThreadDialog/Trigger/Button.tsx
+var import_themes40 = require("@radix-ui/themes");
+var import_react_icons10 = require("@radix-ui/react-icons");
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var Button3 = function() {
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_themes40.IconButton, {
+        size: "4",
+        radius: "full",
+        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_icons10.ChatBubbleIcon, {})
+    });
+};
+// src/components/threads/ThreadDialog/Trigger/index.tsx
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var Root10 = function(param) {
     var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
     var _useThreadDialogContext = useThreadDialogContext(), setIsOpen = _useThreadDialogContext.setIsOpen, isOpen = _useThreadDialogContext.isOpen;
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_themes39.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_themes41.Flex, {
         display: {
             initial: isOpen ? "none" : "flex",
             sm: "flex"
@@ -2773,26 +3182,22 @@ var Trigger = function(param) {
         children: children
     });
 };
-// src/components/threads/ThreadDialog/Button/index.tsx
-var import_themes40 = require("@radix-ui/themes");
-var import_react_icons7 = require("@radix-ui/react-icons");
-var import_jsx_runtime54 = require("react/jsx-runtime");
-var Button2 = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_themes40.IconButton, {
-        size: "4",
-        radius: "full",
-        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_icons7.ChatBubbleIcon, {})
-    });
+var Trigger = function(args) {
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Root10, _object_spread_props(_object_spread({}, args), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Button3, {})
+    }));
 };
+Trigger.Root = Root10;
+Trigger.Button = Button3;
 // src/components/threads/ThreadDialog/Content/index.tsx
-var import_themes42 = require("@radix-ui/themes");
+var import_themes43 = require("@radix-ui/themes");
 // src/components/threads/ThreadDialog/Close/index.tsx
-var import_react_icons8 = require("@radix-ui/react-icons");
-var import_themes41 = require("@radix-ui/themes");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_react_icons11 = require("@radix-ui/react-icons");
+var import_themes42 = require("@radix-ui/themes");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var Close = function() {
     var _useThreadDialogContext = useThreadDialogContext(), setIsOpen = _useThreadDialogContext.setIsOpen, isOpen = _useThreadDialogContext.isOpen;
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_themes41.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_themes42.Flex, {
         display: {
             initial: isOpen ? "flex" : "none",
             sm: "none"
@@ -2812,20 +3217,20 @@ var Close = function() {
         style: {
             zIndex: 9999999999
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_themes41.IconButton, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_themes42.IconButton, {
             size: "2",
             variant: "soft",
-            children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_icons8.Cross1Icon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_icons11.Cross1Icon, {})
         })
     });
 };
 // src/components/threads/ThreadDialog/Content/index.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
-var Root8 = function(param) {
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var Root11 = function(param) {
     var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
     var isOpen = useThreadDialogContext().isOpen;
     if (!isOpen) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_themes42.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_themes43.Flex, {
         direction: "column",
         justify: "end",
         position: "fixed",
@@ -2853,7 +3258,7 @@ var Root8 = function(param) {
         style: _object_spread({
             zIndex: 9999999999
         }, style),
-        children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_themes42.Card, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_themes43.Card, {
             mb: {
                 initial: void 0,
                 sm: "3"
@@ -2864,7 +3269,7 @@ var Root8 = function(param) {
                 flexGrow: 1
             },
             children: [
-                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_themes42.Inset, {
+                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_themes43.Inset, {
                     clip: "padding-box",
                     side: "all",
                     pb: "current",
@@ -2874,59 +3279,67 @@ var Root8 = function(param) {
                     },
                     children: children
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Close, {})
+                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Close, {})
             ]
         })
     });
 };
+var Messages2 = function() {
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Thread.Messages, {
+        style: {
+            paddingTop: "var(--space-5)",
+            paddingRight: "var(--space-5)",
+            paddingLeft: "var(--space-5)"
+        }
+    });
+};
+var FormContainer = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_themes43.Flex, {
+        direction: "column",
+        pl: "5",
+        pr: "5",
+        pb: "3",
+        flexShrink: "0",
+        children: children
+    });
+};
 var Content4 = function(param) {
     var _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Root8, {
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Root11, {
         style: style,
-        children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Thread.Root, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Thread.Root, {
             children: [
-                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Thread.Messages, {
-                    style: {
-                        paddingTop: "var(--space-5)",
-                        paddingRight: "var(--space-5)",
-                        paddingLeft: "var(--space-5)"
-                    }
-                }),
-                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_themes42.Flex, {
-                    direction: "column",
-                    pl: "5",
-                    pr: "5",
-                    pb: "3",
-                    flexShrink: "0",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Thread.MessageForm, {})
+                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Messages2, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(FormContainer, {
+                    children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Thread.MessageForm, {})
                 })
             ]
         })
     });
 };
-Content4.Root = Root8;
+Content4.Root = Root11;
+Content4.Messages = Messages2;
+Content4.FormContainer = FormContainer;
 // src/components/threads/ThreadDialog/index.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var ThreadDialog = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Root7, {
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Root9, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Content4, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Trigger, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Button2, {})
-            })
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Content4, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Trigger, {})
         ]
     });
 };
-ThreadDialog.Root = Root7;
+ThreadDialog.Root = Root9;
 ThreadDialog.Trigger = Trigger;
-ThreadDialog.Button = Button2;
 ThreadDialog.Content = Content4;
 // src/components/threads/AudioThread/Root/index.tsx
 var import_runtime = require("regenerator-runtime/runtime");
-var import_themes43 = require("@radix-ui/themes");
+var import_themes44 = require("@radix-ui/themes");
 // src/contexts/threads/AudioThreadContext/index.ts
-var import_react42 = require("react");
-var AudioThreadContext = (0, import_react42.createContext)({
+var import_react43 = require("react");
+var AudioThreadContext = (0, import_react43.createContext)({
     status: "idle",
     recorderProps: {
         status: "idle",
@@ -2994,11 +3407,11 @@ var blobToData = function(blob) {
     });
 };
 // src/hooks/audioThreads/useStatus/index.ts
-var import_react43 = require("react");
+var import_react44 = require("react");
 var useStatus = function(param) {
     var messageAudioProps = param.messageAudioProps, recorderProps = param.recorderProps, createMessageProps = param.createMessageProps;
     var latestMessageProps = useLatestMessage();
-    var status = (0, import_react43.useMemo)(function() {
+    var status = (0, import_react44.useMemo)(function() {
         var _latestMessageProps_latestMessage;
         if (recorderProps.status === "recording") return "recording";
         if (createMessageProps.isPending) return "creatingMessage";
@@ -3020,21 +3433,21 @@ var useStatus = function(param) {
     };
 };
 // src/hooks/audioThreads/useRecorder/index.ts
-var import_dayjs2 = __toESM(require("dayjs"), 1);
+var import_dayjs3 = __toESM(require("dayjs"), 1);
 var import_use_audio_capture = require("use-audio-capture");
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_react_use_audio_player = require("react-use-audio-player");
 var import_react_use2 = require("react-use");
 var useRecorder = function(param) {
     var isStopOnSilence = param.isStopOnSilence, onStart = param.onStart, onStop = param.onStop;
-    var _ref = _sliced_to_array((0, import_react44.useState)(null), 2), silenceStart = _ref[0], setSilenceStart = _ref[1];
-    var _ref1 = _sliced_to_array((0, import_react44.useState)(null), 2), noiseStart = _ref1[0], setNoiseStart = _ref1[1];
-    var _ref2 = _sliced_to_array((0, import_react44.useState)(null), 2), mediaStream = _ref2[0], setMediaStream = _ref2[1];
-    var _ref3 = _sliced_to_array((0, import_react44.useState)("idle"), 2), status = _ref3[0], setStatus = _ref3[1];
+    var _ref = _sliced_to_array((0, import_react45.useState)(null), 2), silenceStart = _ref[0], setSilenceStart = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react45.useState)(null), 2), noiseStart = _ref1[0], setNoiseStart = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react45.useState)(null), 2), mediaStream = _ref2[0], setMediaStream = _ref2[1];
+    var _ref3 = _sliced_to_array((0, import_react45.useState)("idle"), 2), status = _ref3[0], setStatus = _ref3[1];
     var startAudioPlayer = (0, import_react_use_audio_player.useAudioPlayer)();
     var endAudioPlayer = (0, import_react_use_audio_player.useAudioPlayer)();
-    var _ref4 = _sliced_to_array((0, import_react44.useState)(false), 2), isLoaded = _ref4[0], setIsLoaded = _ref4[1];
-    (0, import_react44.useEffect)(function() {
+    var _ref4 = _sliced_to_array((0, import_react45.useState)(false), 2), isLoaded = _ref4[0], setIsLoaded = _ref4[1];
+    (0, import_react45.useEffect)(function() {
         if (isLoaded) return;
         setIsLoaded(true);
     }, [
@@ -3092,9 +3505,9 @@ var useRecorder = function(param) {
             setNoiseStart(null);
         }
     });
-    var _ref5 = _sliced_to_array((0, import_react44.useState)(null), 2), audioEngine = _ref5[0], setAudioEngine = _ref5[1];
-    var isInited = (0, import_react44.useRef)(false);
-    (0, import_react44.useEffect)(function() {
+    var _ref5 = _sliced_to_array((0, import_react45.useState)(null), 2), audioEngine = _ref5[0], setAudioEngine = _ref5[1];
+    var isInited = (0, import_react45.useRef)(false);
+    (0, import_react45.useEffect)(function() {
         if (!mediaStream) return;
         if (isInited.current) return;
         isInited.current = true;
@@ -3107,7 +3520,7 @@ var useRecorder = function(param) {
         isInited,
         mediaStream
     ]);
-    var visualizationAnalyser = (0, import_react44.useMemo)(function() {
+    var visualizationAnalyser = (0, import_react45.useMemo)(function() {
         if (!audioEngine) return null;
         var result = audioEngine.audioContext.createAnalyser();
         audioEngine.source.connect(result);
@@ -3115,7 +3528,7 @@ var useRecorder = function(param) {
     }, [
         audioEngine
     ]);
-    var silenceAnalyser = (0, import_react44.useMemo)(function() {
+    var silenceAnalyser = (0, import_react45.useMemo)(function() {
         if (!audioEngine) return null;
         var result = audioEngine.audioContext.createAnalyser();
         result.minDecibels = -60;
@@ -3124,7 +3537,7 @@ var useRecorder = function(param) {
     }, [
         audioEngine
     ]);
-    var handleSilence = (0, import_react44.useCallback)(function() {
+    var handleSilence = (0, import_react45.useCallback)(function() {
         if (!silenceAnalyser) return;
         var frequencyData = new Uint8Array(silenceAnalyser.frequencyBinCount);
         silenceAnalyser.getByteFrequencyData(frequencyData);
@@ -3132,12 +3545,12 @@ var useRecorder = function(param) {
             return f === 0;
         });
         setSilenceStart(function(silenceStart2) {
-            if (isSilent) return silenceStart2 || (0, import_dayjs2.default)();
+            if (isSilent) return silenceStart2 || (0, import_dayjs3.default)();
             return null;
         });
         setNoiseStart(function(noiseStart2) {
             if (isSilent) return noiseStart2;
-            return noiseStart2 || (0, import_dayjs2.default)();
+            return noiseStart2 || (0, import_dayjs3.default)();
         });
         requestAnimationFrame(function() {
             return handleSilence();
@@ -3147,7 +3560,7 @@ var useRecorder = function(param) {
         setNoiseStart,
         setSilenceStart
     ]);
-    (0, import_react44.useEffect)(function() {
+    (0, import_react45.useEffect)(function() {
         if (!isStopOnSilence) return;
         requestAnimationFrame(function() {
             return handleSilence();
@@ -3161,7 +3574,7 @@ var useRecorder = function(param) {
         if (status !== "recording") return;
         if (!silenceStart) return;
         if (!noiseStart) return;
-        if (!silenceStart.isBefore((0, import_dayjs2.default)().subtract(1.5, "second"))) return;
+        if (!silenceStart.isBefore((0, import_dayjs3.default)().subtract(1.5, "second"))) return;
         audioCaptureProps.stop();
     }, 300);
     return _object_spread_props(_object_spread({}, audioCaptureProps), {
@@ -3170,7 +3583,7 @@ var useRecorder = function(param) {
     });
 };
 // src/hooks/audioThreads/useMessageAudio/index.ts
-var import_react45 = require("react");
+var import_react46 = require("react");
 var import_compromise = __toESM(require("compromise"), 1);
 var import_howler = require("howler");
 var import_react_use_audio_player2 = require("react-use-audio-player");
@@ -3208,15 +3621,15 @@ var getMessageSentences = function(param) {
 };
 var useMessageAudio = function(param) {
     var onEnd = param.onEnd;
-    var _ref = _sliced_to_array((0, import_react45.useState)(false), 2), isAudioPlayed = _ref[0], setIsAudioPlayed = _ref[1];
-    var _ref1 = _sliced_to_array((0, import_react45.useState)([]), 2), stoppedMessageIds = _ref1[0], setStoppedMessageIds = _ref1[1];
-    var _ref2 = _sliced_to_array((0, import_react45.useState)([]), 2), playedMessageSentences = _ref2[0], setPlayedMessageSentences = _ref2[1];
+    var _ref = _sliced_to_array((0, import_react46.useState)(false), 2), isAudioPlayed = _ref[0], setIsAudioPlayed = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react46.useState)([]), 2), stoppedMessageIds = _ref1[0], setStoppedMessageIds = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react46.useState)([]), 2), playedMessageSentences = _ref2[0], setPlayedMessageSentences = _ref2[1];
     var audioPlayer = (0, import_react_use_audio_player2.useAudioPlayer)();
     var nextAudioPlayer = (0, import_react_use_audio_player2.useAudioPlayer)();
     var superinterfaceContext = useSuperinterfaceContext();
-    var _ref3 = _sliced_to_array((0, import_react45.useState)(false), 2), isPlaying = _ref3[0], setIsPlaying = _ref3[1];
+    var _ref3 = _sliced_to_array((0, import_react46.useState)(false), 2), isPlaying = _ref3[0], setIsPlaying = _ref3[1];
     var latestMessageProps = useLatestMessage();
-    var unplayedMessageSentences = (0, import_react45.useMemo)(function() {
+    var unplayedMessageSentences = (0, import_react46.useMemo)(function() {
         if (!latestMessageProps.latestMessage) return [];
         if (latestMessageProps.latestMessage.role !== "assistant") return [];
         if (stoppedMessageIds.includes(latestMessageProps.latestMessage.id)) return [];
@@ -3237,7 +3650,7 @@ var useMessageAudio = function(param) {
         latestMessageProps,
         playedMessageSentences
     ]);
-    (0, import_react45.useEffect)(function() {
+    (0, import_react46.useEffect)(function() {
         if (isPlaying) return;
         if (audioPlayer.playing) return;
         if (!latestMessageProps.latestMessage) return;
@@ -3305,7 +3718,7 @@ var useMessageAudio = function(param) {
         playedMessageSentences,
         onEnd
     ]);
-    (0, import_react45.useEffect)(function() {
+    (0, import_react46.useEffect)(function() {
         if (isHtmlAudioSupported) {
             var _import_howler_Howler__howls___sounds_, _import_howler_Howler__howls_, _import_howler_Howler;
             if (!((_import_howler_Howler = import_howler.Howler) === null || _import_howler_Howler === void 0 ? void 0 : (_import_howler_Howler__howls_ = _import_howler_Howler._howls[0]) === null || _import_howler_Howler__howls_ === void 0 ? void 0 : (_import_howler_Howler__howls___sounds_ = _import_howler_Howler__howls_._sounds[0]) === null || _import_howler_Howler__howls___sounds_ === void 0 ? void 0 : _import_howler_Howler__howls___sounds_._node)) return;
@@ -3314,9 +3727,9 @@ var useMessageAudio = function(param) {
     }, [
         audioPlayer
     ]);
-    var _ref4 = _sliced_to_array((0, import_react45.useState)(null), 2), audioEngine = _ref4[0], setAudioEngine = _ref4[1];
-    var isAudioEngineInited = (0, import_react45.useRef)(false);
-    (0, import_react45.useEffect)(function() {
+    var _ref4 = _sliced_to_array((0, import_react46.useState)(null), 2), audioEngine = _ref4[0], setAudioEngine = _ref4[1];
+    var isAudioEngineInited = (0, import_react46.useRef)(false);
+    (0, import_react46.useEffect)(function() {
         if (!audioPlayer.playing) return;
         if (isAudioEngineInited.current) return;
         isAudioEngineInited.current = true;
@@ -3337,7 +3750,7 @@ var useMessageAudio = function(param) {
         audioPlayer,
         isAudioEngineInited
     ]);
-    var visualizationAnalyser = (0, import_react45.useMemo)(function() {
+    var visualizationAnalyser = (0, import_react46.useMemo)(function() {
         if (!audioEngine) return null;
         var result = audioEngine.audioContext.createAnalyser();
         audioEngine.source.connect(audioEngine.audioContext.destination);
@@ -3346,7 +3759,7 @@ var useMessageAudio = function(param) {
     }, [
         audioEngine
     ]);
-    var isPending = (0, import_react45.useMemo)(function() {
+    var isPending = (0, import_react46.useMemo)(function() {
         return isPlaying || unplayedMessageSentences.length > 0;
     }, [
         isPlaying,
@@ -3360,8 +3773,8 @@ var useMessageAudio = function(param) {
     });
 };
 // src/components/threads/AudioThread/Root/index.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
-var Root9 = function(param) {
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var Root12 = function(param) {
     var children = param.children;
     var createMessageProps = useCreateMessage();
     var recorderProps = useRecorder({
@@ -3418,13 +3831,13 @@ var Root9 = function(param) {
         createMessageProps: createMessageProps,
         messageAudioProps: messageAudioProps
     }).status;
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(AudioThreadContext.Provider, {
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(AudioThreadContext.Provider, {
         value: {
             status: status,
             recorderProps: recorderProps,
             messageAudioProps: messageAudioProps
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes43.Flex, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_themes44.Flex, {
             direction: "column",
             flexGrow: "1",
             p: "9",
@@ -3433,25 +3846,25 @@ var Root9 = function(param) {
     });
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_lodash9 = __toESM(require("lodash"), 1);
-var import_themes45 = require("@radix-ui/themes");
+var import_themes46 = require("@radix-ui/themes");
 // src/hooks/threads/useAudioThreadContext/index.ts
-var import_react46 = require("react");
+var import_react47 = require("react");
 var useAudioThreadContext = function() {
-    return (0, import_react46.useContext)(AudioThreadContext);
+    return (0, import_react47.useContext)(AudioThreadContext);
 };
 // src/components/threads/AudioThread/BarsVisualizer/index.tsx
 var import_lodash8 = __toESM(require("lodash"), 1);
-var import_themes44 = require("@radix-ui/themes");
-var import_react47 = require("react");
+var import_themes45 = require("@radix-ui/themes");
+var import_react48 = require("react");
 var import_radash14 = require("radash");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var barCount = 4;
 var BarsVisualizer = function(param) {
     var visualizationAnalyser = param.visualizationAnalyser, backgroundColor = param.backgroundColor, height = param.height, barWidth = param.barWidth;
-    var _ref = _sliced_to_array((0, import_react47.useState)([]), 2), barHeights = _ref[0], setBarHeights = _ref[1];
-    var draw = (0, import_react47.useCallback)(function(param) {
+    var _ref = _sliced_to_array((0, import_react48.useState)([]), 2), barHeights = _ref[0], setBarHeights = _ref[1];
+    var draw = (0, import_react48.useCallback)(function(param) {
         var visualizationAnalyser2 = param.visualizationAnalyser;
         if (!visualizationAnalyser2) {
             setBarHeights(Array(barCount).fill(0));
@@ -3469,7 +3882,7 @@ var BarsVisualizer = function(param) {
             });
         });
     }, []);
-    (0, import_react47.useEffect)(function() {
+    (0, import_react48.useEffect)(function() {
         draw({
             visualizationAnalyser: visualizationAnalyser
         });
@@ -3477,7 +3890,7 @@ var BarsVisualizer = function(param) {
         draw,
         visualizationAnalyser
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_themes44.Grid, {
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_themes45.Grid, {
         columns: "".concat(barCount),
         gap: "1",
         width: "auto",
@@ -3486,12 +3899,12 @@ var BarsVisualizer = function(param) {
             gridTemplateColumns: "repeat(4, minmax(0, 1fr))"
         },
         children: barHeights.map(function(barHeight, index) {
-            return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_themes44.Flex, {
+            return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_themes45.Flex, {
                 direction: "column",
                 align: "center",
                 justify: "center",
                 height: height,
-                children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_themes44.Flex, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_themes45.Flex, {
                     minHeight: "50%",
                     maxHeight: "100%",
                     height: "".concat(barHeight + 20, "%"),
@@ -3506,12 +3919,12 @@ var BarsVisualizer = function(param) {
     });
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var Visualization = function() {
     var audioThreadContext = useAudioThreadContext();
-    var assistantNameContext = (0, import_react48.useContext)(AssistantNameContext);
-    var _ref = _sliced_to_array((0, import_react48.useState)(0), 2), scale = _ref[0], setScale = _ref[1];
-    var draw = (0, import_react48.useCallback)(function(param) {
+    var assistantNameContext = (0, import_react49.useContext)(AssistantNameContext);
+    var _ref = _sliced_to_array((0, import_react49.useState)(0), 2), scale = _ref[0], setScale = _ref[1];
+    var draw = (0, import_react49.useCallback)(function(param) {
         var visualizationAnalyser = param.visualizationAnalyser;
         if (!visualizationAnalyser) {
             setScale(1);
@@ -3526,7 +3939,7 @@ var Visualization = function() {
             });
         });
     }, []);
-    (0, import_react48.useEffect)(function() {
+    (0, import_react49.useEffect)(function() {
         draw({
             visualizationAnalyser: audioThreadContext.recorderProps.visualizationAnalyser
         });
@@ -3534,14 +3947,14 @@ var Visualization = function() {
         draw,
         audioThreadContext
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_themes45.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_themes46.Flex, {
         direction: "column",
         align: "center",
         justify: "center",
         mb: "3",
         flexGrow: "1",
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_themes45.Flex, {
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_themes46.Flex, {
                 align: "center",
                 justify: "center",
                 height: "200px",
@@ -3551,20 +3964,20 @@ var Visualization = function() {
                     borderRadius: "9999px",
                     scale: scale
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(BarsVisualizer, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(BarsVisualizer, {
                     visualizationAnalyser: audioThreadContext.messageAudioProps.visualizationAnalyser,
                     backgroundColor: audioThreadContext.status === "playing" ? "var(--accent-11)" : "var(--gray-11)",
                     height: "40px",
                     barWidth: "24px"
                 })
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_themes45.Flex, {
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_themes46.Flex, {
                 ml: "-22.5px",
                 gap: "3",
                 pt: "5",
                 children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(AssistantAvatar, {}),
-                    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Name, {
+                    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(AssistantAvatar, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Name, {
                         children: assistantNameContext
                     })
                 ]
@@ -3573,8 +3986,8 @@ var Visualization = function() {
     });
 };
 // src/components/threads/AudioThread/Status/StatusMessages.tsx
-var import_themes46 = require("@radix-ui/themes");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_themes47 = require("@radix-ui/themes");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var html = function(param) {
     var texts = param.texts;
     return "\n  .status-messages-texts:after {\n    content: '".concat(texts[0], "';\n    animation: texts ").concat(texts.length * 5, "s linear infinite;\n  }\n\n  @keyframes texts {\n    ").concat(texts.map(function(_10, i) {
@@ -3583,17 +3996,17 @@ var html = function(param) {
 };
 var StatusMessages = function(param) {
     var texts = param.texts;
-    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_themes46.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_themes47.Flex, {
         justify: "center",
         pb: "5",
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_themes46.Text, {
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_themes47.Text, {
                 size: "2",
                 weight: "regular",
                 color: "gray",
                 className: "status-messages-texts"
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("style", {
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("style", {
                 dangerouslySetInnerHTML: {
                     __html: html({
                         texts: texts
@@ -3604,11 +4017,11 @@ var StatusMessages = function(param) {
     });
 };
 // src/components/threads/AudioThread/Status/index.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var Status = function() {
     var audioThreadContext = useAudioThreadContext();
     if (audioThreadContext.status === "recording") {
-        return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(StatusMessages, {
+        return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(StatusMessages, {
             texts: [
                 "Start speaking",
                 "Listening",
@@ -3622,31 +4035,31 @@ var Status = function() {
         "idle",
         "playerPaused"
     ].includes(audioThreadContext.status)) {
-        return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(StatusMessages, {
+        return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(StatusMessages, {
             texts: [
                 "Click the button below to activate"
             ]
         });
     }
     if (audioThreadContext.status === "playing") {
-        return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(StatusMessages, {
+        return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(StatusMessages, {
             texts: [
                 "Click the button below to interrupt"
             ]
         });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(StatusMessages, {
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(StatusMessages, {
         texts: [
             "Thinking"
         ]
     });
 };
 // src/components/threads/AudioThread/Form/index.tsx
-var import_themes48 = require("@radix-ui/themes");
+var import_themes49 = require("@radix-ui/themes");
 // src/components/threads/AudioThread/Form/MicIcon.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var MicIcon = function(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("svg", _object_spread_props(_object_spread({
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("svg", _object_spread_props(_object_spread({
         xmlns: "http://www.w3.org/2000/svg",
         fill: "currentColor",
         stroke: "currentColor",
@@ -3655,54 +4068,54 @@ var MicIcon = function(props) {
         height: "15",
         width: "15"
     }, props), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("path", {
+        children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", {
             stroke: "none",
             d: "M192 0c-53 0-96 43-96 96v160c0 53 43 96 96 96s96-43 96-96V96c0-53-43-96-96-96zM64 216c0-13.3-10.7-24-24-24s-24 10.7-24 24v40c0 89.1 66.2 162.7 152 174.4V464h-48c-13.3 0-24 10.7-24 24s10.7 24 24 24h144c13.3 0 24-10.7 24-24s-10.7-24-24-24h-48v-33.6c85.8-11.7 152-85.3 152-174.4v-40c0-13.3-10.7-24-24-24s-24 10.7-24 24v40c0 70.7-57.3 128-128 128S64 326.7 64 256v-40z"
         })
     }));
 };
 // src/components/threads/AudioThread/Form/ActionButton/index.tsx
-var import_themes47 = require("@radix-ui/themes");
-var import_react_icons9 = require("@radix-ui/react-icons");
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_themes48 = require("@radix-ui/themes");
+var import_react_icons12 = require("@radix-ui/react-icons");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var ActionButton = function() {
     var audioThreadContext = useAudioThreadContext();
     var superinterfaceContext = useSuperinterfaceContext();
     if (audioThreadContext.status === "recording") {
-        return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_themes47.Flex, {
+        return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_themes48.Flex, {
             align: "center",
             children: [
-                /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_themes47.Flex, {
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_themes48.Flex, {
                     mr: "3",
                     ml: "-7",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_themes47.IconButton, {
+                    children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_themes48.IconButton, {
                         onClick: audioThreadContext.recorderProps.pause,
                         color: "gray",
                         variant: "soft",
                         size: "1",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react_icons9.PauseIcon, {})
+                        children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_react_icons12.PauseIcon, {})
                     })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_themes47.IconButton, {
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_themes48.IconButton, {
                     onClick: audioThreadContext.recorderProps.stop,
                     highContrast: true,
                     variant: "soft",
                     size: "4",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react_icons9.ArrowUpIcon, {})
+                    children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_react_icons12.ArrowUpIcon, {})
                 })
             ]
         });
     }
     if (audioThreadContext.status === "recorderPaused") {
-        return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_themes47.IconButton, {
+        return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_themes48.IconButton, {
             onClick: audioThreadContext.recorderProps.resume,
             color: "red",
             size: "4",
-            children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react_icons9.ResumeIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_react_icons12.ResumeIcon, {})
         });
     }
     if (audioThreadContext.status === "idle") {
-        return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_themes47.IconButton, {
+        return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_themes48.IconButton, {
             onClick: function() {
                 return audioThreadContext.recorderProps.start();
             },
@@ -3711,7 +4124,7 @@ var ActionButton = function() {
         });
     }
     if (audioThreadContext.status === "playing") {
-        return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_themes47.IconButton, {
+        return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_themes48.IconButton, {
             onClick: function() {
                 var _superinterfaceContext_createMessageAbortControllerRef_current;
                 audioThreadContext.messageAudioProps.stop();
@@ -3721,54 +4134,54 @@ var ActionButton = function() {
             size: "4",
             color: "gray",
             variant: "soft",
-            children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react_icons9.StopIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_react_icons12.StopIcon, {})
         });
     }
     if (audioThreadContext.status === "playerPaused") {
-        return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_themes47.IconButton, {
+        return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_themes48.IconButton, {
             onClick: function() {
                 return audioThreadContext.messageAudioProps.play();
             },
             size: "4",
-            children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react_icons9.ResumeIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_react_icons12.ResumeIcon, {})
         });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_themes47.IconButton, {
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_themes48.IconButton, {
         size: "4",
         variant: "soft",
         disabled: true
     });
 };
 // src/components/threads/AudioThread/Form/index.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var Form = function() {
     var audioThreadContext = useAudioThreadContext();
-    return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_themes48.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_themes49.Flex, {
         direction: "column",
         align: "center",
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_themes48.Flex, {
+            /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_themes49.Flex, {
                 pb: "3",
                 align: "center",
                 children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_themes48.Flex, {
+                    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_themes49.Flex, {
                         ml: "-22.5px",
                         mr: "2",
                         align: "center",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(MicIcon, {
+                        children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(MicIcon, {
                             style: {
                                 color: audioThreadContext.status === "recording" ? "var(--accent-11)" : "var(--gray-11)"
                             }
                         })
                     }),
-                    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_themes48.Flex, {
+                    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_themes49.Flex, {
                         px: "2",
                         py: "1",
                         style: {
                             backgroundColor: audioThreadContext.status === "recording" ? "var(--accent-4)" : "var(--gray-4)",
                             borderRadius: "var(--radius-6)"
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(BarsVisualizer, {
+                        children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(BarsVisualizer, {
                             visualizationAnalyser: audioThreadContext.recorderProps.visualizationAnalyser,
                             backgroundColor: audioThreadContext.status === "recording" ? "var(--accent-11)" : "var(--gray-11)",
                             height: "20px",
@@ -3777,57 +4190,54 @@ var Form = function() {
                     })
                 ]
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ActionButton, {})
+            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ActionButton, {})
         ]
     });
 };
 // src/components/threads/AudioThread/index.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var AudioThread = function(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Root9, _object_spread_props(_object_spread({}, props), {
+    return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(Root12, _object_spread_props(_object_spread({}, props), {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Visualization, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Status, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Form, {})
+            /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Visualization, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Status, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Form, {})
         ]
     }));
 };
-AudioThread.Root = Root9;
+AudioThread.Root = Root12;
 AudioThread.Visualization = Visualization;
 AudioThread.Form = Form;
 // src/components/threads/AudioThreadDialog/index.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var AudioThreadDialog = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Root7, {
+    return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(Root9, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Content4.Root, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(AudioThread, {})
+            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Content4.Root, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(AudioThread, {})
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Trigger, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Button2, {})
-            })
+            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Trigger, {})
         ]
     });
 };
-AudioThreadDialog.Root = Root7;
+AudioThreadDialog.Root = Root9;
 AudioThreadDialog.Trigger = Trigger;
-AudioThreadDialog.Button = Button2;
 AudioThreadDialog.Content = Content4;
 // src/components/suggestions/Suggestions/index.tsx
-var import_react50 = require("react");
+var import_react51 = require("react");
 // src/components/suggestions/Suggestions/Content.tsx
-var import_react49 = require("react");
+var import_react50 = require("react");
 var import_radash15 = require("radash");
 var import_react_children_utilities = require("react-children-utilities");
-var import_themes50 = require("@radix-ui/themes");
+var import_themes51 = require("@radix-ui/themes");
 // src/components/suggestions/Suggestions/Item.tsx
-var import_react_icons10 = require("@radix-ui/react-icons");
-var import_themes49 = require("@radix-ui/themes");
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_react_icons13 = require("@radix-ui/react-icons");
+var import_themes50 = require("@radix-ui/themes");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var Item = function(param) {
     var suggestion = param.suggestion, isDisabled = param.isDisabled;
     var _useCreateMessage = useCreateMessage(), createMessage = _useCreateMessage.createMessage, isPending = _useCreateMessage.isPending;
-    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Content5, {
+    return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Content5, {
         onClick: function() {
             createMessage({
                 // @ts-ignore-next-line
@@ -3841,7 +4251,7 @@ var Item = function(param) {
 };
 var Content5 = function(param) {
     var onClick = param.onClick, isDisabled = param.isDisabled, isPending = param.isPending, children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_themes49.Button, {
+    return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_themes50.Button, {
         variant: "soft",
         onClick: onClick,
         disabled: isDisabled,
@@ -3851,14 +4261,14 @@ var Content5 = function(param) {
             flexShrink: 1
         },
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_themes49.Text, {
+            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_themes50.Text, {
                 size: "1",
                 weight: "regular",
                 children: children
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_themes49.Spinner, {
+            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_themes50.Spinner, {
                 loading: isPending,
-                children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react_icons10.ArrowUpIcon, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_react_icons13.ArrowUpIcon, {
                     style: {
                         flexShrink: 0
                     }
@@ -3869,11 +4279,11 @@ var Content5 = function(param) {
 };
 Item.Content = Content5;
 // src/components/suggestions/Suggestions/Content.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var Content6 = function(param) {
     var children = param.children;
     var isMutatingMessage = useIsMutatingMessage();
-    var suggestions = (0, import_react49.useMemo)(function() {
+    var suggestions = (0, import_react50.useMemo)(function() {
         return (0, import_react_children_utilities.onlyText)(children).split(/\r?\n/).filter(function(c) {
             return !(0, import_radash15.isEmpty)(c);
         }).map(function(c) {
@@ -3883,12 +4293,12 @@ var Content6 = function(param) {
         children
     ]);
     if ((0, import_radash15.isEmpty)(suggestions)) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_themes50.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_themes51.Flex, {
         gap: "2",
         py: "2",
         wrap: "wrap",
         children: suggestions.map(function(suggestion) {
-            return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Item, {
+            return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Item, {
                 suggestion: suggestion,
                 isDisabled: isMutatingMessage
             }, suggestion);
@@ -3896,11 +4306,11 @@ var Content6 = function(param) {
     });
 };
 // src/components/suggestions/Suggestions/index.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 var Suggestions = function(param) {
     var children = param.children;
     var latestMessageProps = useLatestMessage();
-    var isDisabled = (0, import_react50.useMemo)(function() {
+    var isDisabled = (0, import_react51.useMemo)(function() {
         var // @ts-ignore-next-line
         _latestMessageProps_latestMessage_metadata, _latestMessageProps_latestMessage;
         return (_latestMessageProps_latestMessage = latestMessageProps.latestMessage) === null || _latestMessageProps_latestMessage === void 0 ? void 0 : (_latestMessageProps_latestMessage_metadata = _latestMessageProps_latestMessage.metadata) === null || _latestMessageProps_latestMessage_metadata === void 0 ? void 0 : _latestMessageProps_latestMessage_metadata.isBlocking;
@@ -3909,51 +4319,51 @@ var Suggestions = function(param) {
     ]);
     if (latestMessageProps.isLoading) return null;
     if (isDisabled) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Content6, {
+    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Content6, {
         children: children
     });
 };
 Suggestions.Item = Item;
 // src/components/markdown/MarkdownProvider/index.tsx
-var import_react51 = require("react");
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_react52 = require("react");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var MarkdownProvider = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
     ]);
     var prevMarkdownContext = useMarkdownContext();
-    var value = (0, import_react51.useMemo)(function() {
+    var value = (0, import_react52.useMemo)(function() {
         return merge(prevMarkdownContext, rest);
     }, [
         rest,
         prevMarkdownContext
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(MarkdownContext.Provider, {
+    return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(MarkdownContext.Provider, {
         value: value,
         children: children
     });
 };
 // src/components/components/ComponentsProvider.tsx
-var import_react53 = require("react");
+var import_react54 = require("react");
 // src/hooks/components/useComponents.ts
-var import_react52 = require("react");
+var import_react53 = require("react");
 var useComponents = function() {
-    return (0, import_react52.useContext)(ComponentsContext);
+    return (0, import_react53.useContext)(ComponentsContext);
 };
 // src/components/components/ComponentsProvider.tsx
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var ComponentsProvider = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
     ]);
     var prevComponents = useComponents();
-    var value = (0, import_react53.useMemo)(function() {
+    var value = (0, import_react54.useMemo)(function() {
         return merge(prevComponents, rest);
     }, [
         rest,
         prevComponents
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ComponentsContext.Provider, {
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ComponentsContext.Provider, {
         value: value,
         children: children
     });