@superinterface/react 2.15.9 → 2.16.1

package/dist/index.js

@@ -359,7 +359,7 @@ var SuperinterfaceProvider = function(param) {
     });
 };
 // src/components/threads/Thread/Messages/index.tsx
-import { Flex as Flex13 } from "@radix-ui/themes";
+import { Flex as Flex12 } from "@radix-ui/themes";
 // src/components/threads/Thread/Messages/Content/index.tsx
 import { useEffect } from "react";
 // src/hooks/messages/useMessages/index.tsx
@@ -732,7 +732,7 @@ var UserAvatar = function() {
     });
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
-import { Flex as Flex11 } from "@radix-ui/themes";
+import { Flex as Flex10 } from "@radix-ui/themes";
 // src/components/threads/Thread/Message/index.tsx
 import { useMemo as useMemo5, Fragment } from "react";
 import { isEmpty } from "radash";
@@ -753,39 +753,35 @@ var StartingContentSkeleton = function() {
     });
 };
 // src/components/runSteps/RunSteps/index.tsx
-import { Flex as Flex10 } from "@radix-ui/themes";
+import { Flex as Flex8 } from "@radix-ui/themes";
 import { useContext as useContext6 } from "react";
 // src/contexts/components/ComponentsContext/index.tsx
 import { createContext as createContext7 } from "react";
 // src/components/runSteps/RunStep/ToolCalls/index.tsx
-import { Flex as Flex9 } from "@radix-ui/themes";
-// src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx
-import { Flex as Flex8 } from "@radix-ui/themes";
+import { Flex as Flex7 } from "@radix-ui/themes";
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/index.tsx
 import { useContext as useContext5 } from "react";
 // src/contexts/functions/FunctionComponentsContext/index.tsx
 import { createContext as createContext6 } from "react";
 var FunctionComponentsContext = createContext6({});
 // src/components/functions/FunctionBase/index.tsx
-import { Popover as Popover2 } from "@radix-ui/themes";
+import { Popover } from "@radix-ui/themes";
 // src/components/toolCalls/ToolCallBase/index.tsx
-import { Flex as Flex6, Button, Popover } from "@radix-ui/themes";
+import { Flex as Flex6, Button } from "@radix-ui/themes";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var ToolCallBase = function(param) {
     var children = param.children;
     return /* @__PURE__ */ jsx10(Flex6, {
         py: "1",
         ml: "-2",
-        children: /* @__PURE__ */ jsx10(Popover.Trigger, {
-            children: /* @__PURE__ */ jsx10(Button, {
-                size: "1",
-                color: "gold",
-                variant: "outline",
-                style: {
-                    boxShadow: "none"
-                },
-                children: children
-            })
+        children: /* @__PURE__ */ jsx10(Button, {
+            size: "1",
+            color: "gold",
+            variant: "outline",
+            style: {
+                boxShadow: "none"
+            },
+            children: children
         })
     });
 };
@@ -799,10 +795,10 @@ var ToolCallTitle = function(param) {
         children: children
     });
 };
-// src/components/functions/FunctionBase/Icon.tsx
+// src/components/toolCalls/ToolCallBase/ToolCallIcon.tsx
 import { CircleIcon, CircleBackslashIcon, CheckCircledIcon } from "@radix-ui/react-icons";
 import { jsx as jsx12 } from "react/jsx-runtime";
-var Icon = function(param) {
+var ToolCallIcon = function(param) {
     var runStep = param.runStep;
     if (runStep.completed_at) {
         return /* @__PURE__ */ jsx12(CheckCircledIcon, {});
@@ -867,19 +863,21 @@ var Content = function(param) {
 import { jsx as jsx14, jsxs as jsxs3 } from "react/jsx-runtime";
 var FunctionBase = function(param) {
     var fn = param.fn, runStep = param.runStep, title2 = param.title;
-    return /* @__PURE__ */ jsxs3(Popover2.Root, {
+    return /* @__PURE__ */ jsxs3(Popover.Root, {
         children: [
-            /* @__PURE__ */ jsxs3(ToolCallBase, {
-                children: [
-                    /* @__PURE__ */ jsx14(Icon, {
-                        runStep: runStep
-                    }),
-                    /* @__PURE__ */ jsx14(ToolCallTitle, {
-                        children: title2
-                    })
-                ]
+            /* @__PURE__ */ jsx14(Popover.Trigger, {
+                children: /* @__PURE__ */ jsxs3(ToolCallBase, {
+                    children: [
+                        /* @__PURE__ */ jsx14(ToolCallIcon, {
+                            runStep: runStep
+                        }),
+                        /* @__PURE__ */ jsx14(ToolCallTitle, {
+                            children: title2
+                        })
+                    ]
+                })
             }),
-            /* @__PURE__ */ jsx14(Popover2.Content, {
+            /* @__PURE__ */ jsx14(Popover.Content, {
                 style: {
                     maxHeight: "200px"
                 },
@@ -926,55 +924,101 @@ var Fn = function(param) {
         runStep: runStep
     }));
 };
-// src/components/runSteps/RunStep/ToolCalls/ToolCall/CodeInterpreter/index.tsx
-import { Flex as Flex7 } from "@radix-ui/themes";
-import { jsx as jsx17 } from "react/jsx-runtime";
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/CodeInterpreter.tsx
+import { jsx as jsx17, jsxs as jsxs4 } from "react/jsx-runtime";
 var CodeInterpreter = function(param) {
-    var codeInterpreter = param.codeInterpreter;
-    return /* @__PURE__ */ jsx17(Flex7, {
-        children: codeInterpreter.input
+    var runStep = param.runStep, toolCall = param.toolCall;
+    return /* @__PURE__ */ jsxs4(ToolCallBase, {
+        children: [
+            /* @__PURE__ */ jsx17(ToolCallIcon, {
+                runStep: runStep
+            }),
+            /* @__PURE__ */ jsx17(ToolCallTitle, {
+                children: "Using code interpreter"
+            })
+        ]
+    });
+};
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/FileSearch.tsx
+import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
+var FileSearch = function(param) {
+    var runStep = param.runStep, toolCall = param.toolCall;
+    return /* @__PURE__ */ jsxs5(ToolCallBase, {
+        children: [
+            /* @__PURE__ */ jsx18(ToolCallIcon, {
+                runStep: runStep
+            }),
+            /* @__PURE__ */ jsx18(ToolCallTitle, {
+                children: "Searching files"
+            })
+        ]
+    });
+};
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/Fallback.tsx
+import { jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
+var Fallback = function(param) {
+    var runStep = param.runStep, toolCall = param.toolCall;
+    return /* @__PURE__ */ jsxs6(ToolCallBase, {
+        children: [
+            /* @__PURE__ */ jsx19(ToolCallIcon, {
+                runStep: runStep
+            }),
+            /* @__PURE__ */ jsxs6(ToolCallTitle, {
+                children: [
+                    "Using tool: ",
+                    toolCall.type
+                ]
+            })
+        ]
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var ToolCall = function(param) {
     var toolCall = param.toolCall, runStep = param.runStep;
     if (toolCall.type === "function") {
-        return /* @__PURE__ */ jsx18(Fn, {
+        return /* @__PURE__ */ jsx20(Fn, {
             fn: toolCall.function,
             runStep: runStep
         });
     }
     if (toolCall.type === "code_interpreter") {
-        return /* @__PURE__ */ jsx18(CodeInterpreter, {
-            codeInterpreter: toolCall.code_interpreter,
+        return /* @__PURE__ */ jsx20(CodeInterpreter, {
+            toolCall: toolCall,
+            runStep: runStep
+        });
+    }
+    if (toolCall.type === "file_search") {
+        return /* @__PURE__ */ jsx20(FileSearch, {
+            toolCall: toolCall,
             runStep: runStep
         });
     }
-    return /* @__PURE__ */ jsx18(Flex8, {
-        children: toolCall.type
+    return /* @__PURE__ */ jsx20(Fallback, {
+        toolCall: toolCall,
+        runStep: runStep
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/Starting/index.tsx
-import { Popover as Popover3, Text as Text3 } from "@radix-ui/themes";
+import { Popover as Popover2, Text as Text3 } from "@radix-ui/themes";
 import { CircleIcon as CircleIcon2 } from "@radix-ui/react-icons";
-import { jsx as jsx19, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
 var Starting = function() {
-    return /* @__PURE__ */ jsxs4(Popover3.Root, {
+    return /* @__PURE__ */ jsxs7(Popover2.Root, {
         children: [
-            /* @__PURE__ */ jsxs4(ToolCallBase, {
+            /* @__PURE__ */ jsxs7(ToolCallBase, {
                 children: [
-                    /* @__PURE__ */ jsx19(CircleIcon2, {}),
-                    /* @__PURE__ */ jsx19(ToolCallTitle, {
+                    /* @__PURE__ */ jsx21(CircleIcon2, {}),
+                    /* @__PURE__ */ jsx21(ToolCallTitle, {
                         children: "Starting actions"
                     })
                 ]
             }),
-            /* @__PURE__ */ jsx19(Popover3.Content, {
+            /* @__PURE__ */ jsx21(Popover2.Content, {
                 style: {
                     maxHeight: "500px"
                 },
-                children: /* @__PURE__ */ jsx19(Text3, {
+                children: /* @__PURE__ */ jsx21(Text3, {
                     children: "Getting ready to connect to domain API"
                 })
             })
@@ -982,21 +1026,21 @@ var Starting = function() {
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/index.tsx
-import { jsx as jsx20, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
 var Root = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx20(Flex9, {
+    return /* @__PURE__ */ jsx22(Flex7, {
         direction: "column",
         children: children
     });
 };
 var ToolCalls = function(param) {
     var stepDetails = param.stepDetails, runStep = param.runStep;
-    return /* @__PURE__ */ jsxs5(Root, {
+    return /* @__PURE__ */ jsxs8(Root, {
         children: [
-            !stepDetails.tool_calls.length && /* @__PURE__ */ jsx20(Starting, {}),
+            !stepDetails.tool_calls.length && /* @__PURE__ */ jsx22(Starting, {}),
             stepDetails.tool_calls.map(function(toolCall) {
-                return /* @__PURE__ */ jsx20(ToolCall, {
+                return /* @__PURE__ */ jsx22(ToolCall, {
                     toolCall: toolCall,
                     runStep: runStep
                 }, toolCall.id);
@@ -1008,11 +1052,11 @@ ToolCalls.Root = Root;
 ToolCalls.Starting = Starting;
 ToolCalls.ToolCall = ToolCall;
 // src/components/runSteps/RunStep/index.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var RunStep = function(param) {
     var runStep = param.runStep;
     if (runStep.step_details.type === "tool_calls") {
-        return /* @__PURE__ */ jsx21(ToolCalls, {
+        return /* @__PURE__ */ jsx23(ToolCalls, {
             stepDetails: runStep.step_details,
             runStep: runStep
         });
@@ -1027,15 +1071,15 @@ var ComponentsContext = createContext7({
     }
 });
 // src/components/runSteps/RunSteps/index.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var RunSteps = function(param) {
     var runSteps = param.runSteps;
     var componentsContext = useContext6(ComponentsContext);
     var Component = componentsContext.components.RunStep;
-    return /* @__PURE__ */ jsx22(Flex10, {
+    return /* @__PURE__ */ jsx24(Flex8, {
         direction: "column-reverse",
         children: runSteps.map(function(runStep) {
-            return /* @__PURE__ */ jsx22(Component, {
+            return /* @__PURE__ */ jsx24(Component, {
                 runStep: runStep
             }, runStep.id);
         })
@@ -1074,12 +1118,12 @@ import { useContext as useContext7 } from "react";
 import { createContext as createContext9 } from "react";
 // src/contexts/markdown/MarkdownContext/lib/components/Paragraph.tsx
 import { Box as Box3, Text as Text4 } from "@radix-ui/themes";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var Paragraph = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx23(Box3, {
+    return /* @__PURE__ */ jsx25(Box3, {
         pb: "3",
-        children: /* @__PURE__ */ jsx23(Text4, {
+        children: /* @__PURE__ */ jsx25(Text4, {
             size: "3",
             style: {
                 whiteSpace: "pre-line",
@@ -1091,23 +1135,23 @@ var Paragraph = function(param) {
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Link.tsx
 import { Link as RadixLink } from "@radix-ui/themes";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var Link = function(param) {
     var children = param.children, href = param.href;
-    return /* @__PURE__ */ jsx24(RadixLink, {
+    return /* @__PURE__ */ jsx26(RadixLink, {
         href: href,
         children: children
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/UnorderedList.tsx
 import { Box as Box4 } from "@radix-ui/themes";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var UnorderedList = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx25(Box4, {
+    return /* @__PURE__ */ jsx27(Box4, {
         pb: "3",
         asChild: true,
-        children: /* @__PURE__ */ jsx25("ul", {
+        children: /* @__PURE__ */ jsx27("ul", {
             style: {
                 listStylePosition: "inside"
             },
@@ -1117,13 +1161,13 @@ var UnorderedList = function(param) {
 };
 // src/contexts/markdown/MarkdownContext/lib/components/OrderedList.tsx
 import { Box as Box5 } from "@radix-ui/themes";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var OrderedList = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx26(Box5, {
+    return /* @__PURE__ */ jsx28(Box5, {
         pb: "3",
         asChild: true,
-        children: /* @__PURE__ */ jsx26("ol", {
+        children: /* @__PURE__ */ jsx28("ol", {
             style: {
                 listStylePosition: "inside"
             },
@@ -1133,31 +1177,31 @@ var OrderedList = function(param) {
 };
 // src/contexts/markdown/MarkdownContext/lib/components/ListItem.tsx
 import { Box as Box6 } from "@radix-ui/themes";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var ListItem = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx27(Box6, {
+    return /* @__PURE__ */ jsx29(Box6, {
         pb: "1",
-        children: /* @__PURE__ */ jsx27("li", {
+        children: /* @__PURE__ */ jsx29("li", {
             children: children
         })
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Strong.tsx
 import { Strong as RadixStrong } from "@radix-ui/themes";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var Strong = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx28(RadixStrong, {
+    return /* @__PURE__ */ jsx30(RadixStrong, {
         children: children
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Pre.tsx
 import { Box as Box7 } from "@radix-ui/themes";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var Pre = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx29(Box7, {
+    return /* @__PURE__ */ jsx31(Box7, {
         style: {
             whiteSpace: "pre-wrap",
             wordBreak: "break-word"
@@ -1167,20 +1211,20 @@ var Pre = function(param) {
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Code.tsx
 import { Code as RadixCode } from "@radix-ui/themes";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var Code2 = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx30(RadixCode, {
+    return /* @__PURE__ */ jsx32(RadixCode, {
         children: children
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Img.tsx
 import { Box as Box8 } from "@radix-ui/themes";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var Img = function(props) {
-    return /* @__PURE__ */ jsx31(Box8, {
+    return /* @__PURE__ */ jsx33(Box8, {
         pb: "3",
-        children: /* @__PURE__ */ jsx31("img", _object_spread_props(_object_spread({}, props), {
+        children: /* @__PURE__ */ jsx33("img", _object_spread_props(_object_spread({}, props), {
             style: {
                 maxWidth: "100%",
                 height: "auto"
@@ -1202,26 +1246,46 @@ var components = {
 };
 // src/contexts/markdown/MarkdownContext/index.ts
 var MarkdownContext = createContext9({
-    remarkPlugins: [],
-    rehypeReactOptions: {
-        components: components
-    }
+    components: components
 });
 // src/hooks/markdown/useMarkdownContext/index.ts
 var useMarkdownContext = function() {
     return useContext7(MarkdownContext);
 };
 // src/components/threads/Thread/Message/TextContent.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var TextContent = function(param) {
     var content = param.content;
     var markdownContext = useMarkdownContext();
-    return /* @__PURE__ */ jsx32(Markdown, _object_spread_props(_object_spread({}, markdownContext), {
+    return /* @__PURE__ */ jsx34(Markdown, _object_spread_props(_object_spread({}, markdownContext), {
         children: content.text.value
     }));
 };
+// src/components/threads/Thread/Message/Attachments/index.tsx
+import { Flex as Flex9, Badge } from "@radix-ui/themes";
+import { FileIcon } from "@radix-ui/react-icons";
+import { jsx as jsx35, jsxs as jsxs9 } from "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__ */ jsx35(Flex9, {
+        align: "start",
+        pb: "1",
+        children: /* @__PURE__ */ jsxs9(Badge, {
+            color: "gray",
+            variant: "surface",
+            children: [
+                /* @__PURE__ */ jsx35(FileIcon, {}),
+                message.attachments.length,
+                " file",
+                message.attachments.length > 1 ? "s" : ""
+            ]
+        })
+    });
+};
 // src/components/threads/Thread/Message/index.tsx
-import { jsx as jsx33, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs10 } from "react/jsx-runtime";
 var Message = function(param) {
     var message = param.message;
     var _useMemo5 = _sliced_to_array(useMemo5(function() {
@@ -1266,65 +1330,68 @@ var Message = function(param) {
     }, [
         message
     ]);
-    return /* @__PURE__ */ jsx33(Provider, {
+    return /* @__PURE__ */ jsx36(Provider, {
         value: {
             message: message
         },
-        children: /* @__PURE__ */ jsxs6(Box9, {
+        children: /* @__PURE__ */ jsxs10(Box9, {
             children: [
-                /* @__PURE__ */ jsx33(RunSteps, {
+                /* @__PURE__ */ jsx36(RunSteps, {
                     runSteps: olderRunSteps
                 }),
-                /* @__PURE__ */ jsxs6(Box9, {
+                /* @__PURE__ */ jsxs10(Box9, {
                     children: [
+                        /* @__PURE__ */ jsx36(Attachments, {
+                            message: message
+                        }),
                         message.content.map(function(content, index) {
-                            return /* @__PURE__ */ jsx33(Fragment, {
-                                children: content.type === "text" && /* @__PURE__ */ jsx33(TextContent, {
+                            return /* @__PURE__ */ jsx36(Fragment, {
+                                children: content.type === "text" && /* @__PURE__ */ jsx36(TextContent, {
                                     content: content
                                 })
                             }, index);
                         }),
-                        isInProgress && isEmpty(laterRunSteps) && /* @__PURE__ */ jsx33(StartingContentSkeleton, {})
+                        isInProgress && isEmpty(laterRunSteps) && /* @__PURE__ */ jsx36(StartingContentSkeleton, {})
                     ]
                 }),
-                /* @__PURE__ */ jsx33(RunSteps, {
+                /* @__PURE__ */ jsx36(RunSteps, {
                     runSteps: laterRunSteps
                 }),
-                isInProgress && !isEmpty(laterRunSteps) && /* @__PURE__ */ jsx33(Box9, {
-                    children: /* @__PURE__ */ jsx33(StartingContentSkeleton, {})
+                isInProgress && !isEmpty(laterRunSteps) && /* @__PURE__ */ jsx36(Box9, {
+                    children: /* @__PURE__ */ jsx36(StartingContentSkeleton, {})
                 })
             ]
         })
     });
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var Content2 = function(param) {
     var messageGroup = param.messageGroup;
-    return /* @__PURE__ */ jsx34(Flex11, {
+    return /* @__PURE__ */ jsx37(Flex10, {
         direction: "column-reverse",
         children: messageGroup.messages.map(function(message) {
-            return /* @__PURE__ */ jsx34(Message, {
+            return /* @__PURE__ */ jsx37(Message, {
                 message: message
             }, message.id);
         })
     });
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
-import { jsx as jsx35, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs11 } from "react/jsx-runtime";
 var MessageGroup = function(param) {
     var messageGroup = param.messageGroup;
     var assistantNameContext = useContext8(AssistantNameContext);
-    return /* @__PURE__ */ jsxs7(MessageGroupBase, {
+    return /* @__PURE__ */ jsxs11(MessageGroupBase, {
         children: [
-            messageGroup.role === "user" ? /* @__PURE__ */ jsx35(UserAvatar, {}) : /* @__PURE__ */ jsx35(AssistantAvatar, {}),
-            /* @__PURE__ */ jsxs7(Box10, {
+            messageGroup.role === "user" ? /* @__PURE__ */ jsx38(UserAvatar, {}) : /* @__PURE__ */ jsx38(AssistantAvatar, {}),
+            /* @__PURE__ */ jsxs11(Box10, {
                 flexGrow: "1",
                 children: [
-                    /* @__PURE__ */ jsx35(Name, {
+                    /* @__PURE__ */ jsx38(Name, {
                         children: messageGroup.role === "user" ? "You" : assistantNameContext
                     }),
-                    /* @__PURE__ */ jsx35(Content2, {
+                    /* @__PURE__ */ jsx38(Content2, {
                         messageGroup: messageGroup
                     })
                 ]
@@ -1333,7 +1400,7 @@ var MessageGroup = function(param) {
     });
 };
 // src/components/threads/Thread/Messages/Content/index.tsx
-import { Fragment as Fragment2, jsx as jsx36 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx39 } from "react/jsx-runtime";
 var Content3 = function() {
     var _useMessages = useMessages(), messages2 = _useMessages.messages, isLoading = _useMessages.isLoading, isLoadingError = _useMessages.isLoadingError;
     var addToast = useToasts().addToast;
@@ -1352,11 +1419,11 @@ var Content3 = function() {
         addToast
     ]);
     if (isLoading || isLoadingError) {
-        return /* @__PURE__ */ jsx36(MessagesSkeleton, {});
+        return /* @__PURE__ */ jsx39(MessagesSkeleton, {});
     }
-    return /* @__PURE__ */ jsx36(Fragment2, {
+    return /* @__PURE__ */ jsx39(Fragment2, {
         children: messageGroups2.map(function(messageGroup) {
-            return /* @__PURE__ */ jsx36(MessageGroup, {
+            return /* @__PURE__ */ jsx39(MessageGroup, {
                 messageGroup: messageGroup
             }, messageGroup.id);
         })
@@ -1367,20 +1434,20 @@ import { useMemo as useMemo7 } from "react";
 // src/components/skeletons/StartingSkeleton/index.tsx
 import { useContext as useContext9 } from "react";
 import { Box as Box11 } from "@radix-ui/themes";
-import { jsx as jsx37, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs12 } from "react/jsx-runtime";
 var StartingSkeleton = function(param) {
     var children = param.children;
     var assistantNameContext = useContext9(AssistantNameContext);
-    return /* @__PURE__ */ jsxs8(MessageGroupBase, {
+    return /* @__PURE__ */ jsxs12(MessageGroupBase, {
         children: [
-            /* @__PURE__ */ jsx37(AssistantAvatar, {}),
-            /* @__PURE__ */ jsxs8(Box11, {
+            /* @__PURE__ */ jsx40(AssistantAvatar, {}),
+            /* @__PURE__ */ jsxs12(Box11, {
                 children: [
-                    /* @__PURE__ */ jsx37(Name, {
+                    /* @__PURE__ */ jsx40(Name, {
                         children: assistantNameContext
                     }),
                     children,
-                    /* @__PURE__ */ jsx37(StartingContentSkeleton, {})
+                    /* @__PURE__ */ jsx40(StartingContentSkeleton, {})
                 ]
             })
         ]
@@ -1405,7 +1472,7 @@ var isOptimistic = function(param) {
     return _4.startsWith(id, "-");
 };
 // src/components/threads/Thread/Messages/Progress/index.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var Progress = function() {
     var latestMessage = useLatestMessage().latestMessage;
     var isMutatingMessage = useIsMutatingMessage();
@@ -1423,10 +1490,10 @@ var Progress = function() {
         isMutatingMessage
     ]);
     if (!isVisible) return null;
-    return /* @__PURE__ */ jsx38(StartingSkeleton, {});
+    return /* @__PURE__ */ jsx41(StartingSkeleton, {});
 };
 // src/components/threads/Thread/Messages/Root/index.tsx
-import { Flex as Flex12 } from "@radix-ui/themes";
+import { Flex as Flex11 } from "@radix-ui/themes";
 // src/hooks/misc/useInfiniteScroll/index.tsx
 import { useRef as useRef3 } from "react";
 import { useInView } from "react-intersection-observer";
@@ -1482,7 +1549,7 @@ var useInfiniteScroll = function(param) {
     };
 };
 // src/components/threads/Thread/Messages/Root/index.tsx
-import { jsx as jsx39, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs13 } from "react/jsx-runtime";
 var Root2 = function(param) {
     var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
     var _useMessages = useMessages(), isFetchingNextPage = _useMessages.isFetchingNextPage, hasNextPage = _useMessages.hasNextPage, fetchNextPage = _useMessages.fetchNextPage;
@@ -1491,7 +1558,7 @@ var Root2 = function(param) {
         hasNextPage: hasNextPage,
         fetchNextPage: fetchNextPage
     }), containerRef = _useInfiniteScroll.containerRef, loaderRef = _useInfiniteScroll.loaderRef;
-    return /* @__PURE__ */ jsxs9(Flex12, {
+    return /* @__PURE__ */ jsxs13(Flex11, {
         ref: containerRef,
         direction: "column-reverse",
         flexGrow: "1",
@@ -1500,10 +1567,10 @@ var Root2 = function(param) {
         }),
         children: [
             children,
-            hasNextPage && /* @__PURE__ */ jsx39(Flex12, {
+            hasNextPage && /* @__PURE__ */ jsx42(Flex11, {
                 ref: loaderRef
             }),
-            /* @__PURE__ */ jsx39(Flex12, {
+            /* @__PURE__ */ jsx42(Flex11, {
                 flexShrink: "0",
                 flexGrow: "1"
             })
@@ -1511,30 +1578,30 @@ var Root2 = function(param) {
     });
 };
 // src/components/threads/Thread/Messages/NextPageSkeleton.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var NextPageSkeleton = function() {
     var hasNextPage = useMessages().hasNextPage;
     if (!hasNextPage) {
         return null;
     }
-    return /* @__PURE__ */ jsx40(MessagesSkeleton, {});
+    return /* @__PURE__ */ jsx43(MessagesSkeleton, {});
 };
 // src/components/threads/Thread/Messages/index.tsx
-import { jsx as jsx41, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs14 } from "react/jsx-runtime";
 var Messages = function(param) {
     var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
-    return /* @__PURE__ */ jsxs10(Root2, {
+    return /* @__PURE__ */ jsxs14(Root2, {
         style: style,
         children: [
-            /* @__PURE__ */ jsx41(Flex13, {
+            /* @__PURE__ */ jsx44(Flex12, {
                 flexShrink: "0",
                 height: "var(--space-3)"
             }),
-            /* @__PURE__ */ jsx41(Progress, {}),
+            /* @__PURE__ */ jsx44(Progress, {}),
             children,
-            /* @__PURE__ */ jsx41(Content3, {}),
-            /* @__PURE__ */ jsx41(NextPageSkeleton, {}),
-            /* @__PURE__ */ jsx41(Flex13, {
+            /* @__PURE__ */ jsx44(Content3, {}),
+            /* @__PURE__ */ jsx44(NextPageSkeleton, {}),
+            /* @__PURE__ */ jsx44(Flex12, {
                 flexShrink: "0",
                 flexGrow: "1"
             })
@@ -1544,47 +1611,63 @@ var Messages = function(param) {
 Messages.Root = Root2;
 Messages.Message = Message;
 Messages.NextPageSkeleton = NextPageSkeleton;
-// src/components/threads/Thread/MessageForm/index.tsx
-import { Flex as Flex15, Text as Text5 } from "@radix-ui/themes";
 // src/components/threads/Thread/MessageForm/Submit/index.tsx
 import { ArrowUpIcon, StopIcon } from "@radix-ui/react-icons";
-import { IconButton } from "@radix-ui/themes";
+import { IconButton, Flex as Flex13 } from "@radix-ui/themes";
 // src/hooks/messages/useMessageFormContext/index.ts
 import { useContext as useContext10 } from "react";
 // src/contexts/messages/MessageFormContext/index.ts
 import { createContext as createContext10 } from "react";
 var MessageFormContext = createContext10({
     isDisabled: false,
-    isLoading: false
+    isLoading: false,
+    files: [],
+    setFiles: function() {},
+    isFileLoading: false
 });
 // src/hooks/messages/useMessageFormContext/index.ts
 var useMessageFormContext = function() {
     return useContext10(MessageFormContext);
 };
 // src/components/threads/Thread/MessageForm/Submit/index.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
-var Submit = function() {
+import { jsx as jsx45 } from "react/jsx-runtime";
+var Root3 = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ jsx45(Flex13, {
+        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__ */ jsx42(IconButton, {
+        return /* @__PURE__ */ jsx45(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__ */ jsx42(StopIcon, {})
+            children: /* @__PURE__ */ jsx45(StopIcon, {})
         });
     }
-    return /* @__PURE__ */ jsx42(IconButton, {
+    return /* @__PURE__ */ jsx45(IconButton, {
         type: "submit",
-        disabled: isDisabled,
-        children: /* @__PURE__ */ jsx42(ArrowUpIcon, {})
+        disabled: isDisabled || isFileLoading,
+        children: /* @__PURE__ */ jsx45(ArrowUpIcon, {})
+    });
+};
+var Submit = function() {
+    return /* @__PURE__ */ jsx45(Root3, {
+        children: /* @__PURE__ */ jsx45(Button2, {})
     });
 };
+Submit.Root = Root3;
+Submit.Button = Button2;
 // src/components/threads/Thread/MessageForm/Root/index.tsx
 import { useQueryClient as useQueryClient4 } from "@tanstack/react-query";
-import { useMemo as useMemo8 } from "react";
+import { useMemo as useMemo8, useState } from "react";
 import { useForm, FormProvider } from "react-hook-form";
 import { Box as Box12 } from "@radix-ui/themes";
 // src/hooks/messages/useCreateMessage/index.ts
@@ -1603,6 +1686,7 @@ var optimisticId = function() {
 var data = function(param) {
     var newMessage = param.newMessage;
     return function(prevData) {
+        var _newMessage_attachments;
         var message = {
             id: optimisticId(),
             role: "user",
@@ -1620,7 +1704,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: []
         };
@@ -1662,7 +1746,8 @@ var onMutate = function(param) {
                         queryKey = [
                             "messages",
                             omit(newMessage, [
-                                "content"
+                                "content",
+                                "attachments"
                             ])
                         ];
                         return [
@@ -2207,9 +2292,10 @@ var formOptions = {
 };
 // src/components/threads/Thread/MessageForm/Root/index.tsx
 import { partob as partob2 } from "radash";
-import { jsx as jsx43 } from "react/jsx-runtime";
-var Root3 = function(param) {
+import { jsx as jsx46 } from "react/jsx-runtime";
+var Root4 = function(param) {
     var children = param.children, onSubmitArg = param.onSubmit;
+    var _useState = _sliced_to_array(useState([]), 2), files = _useState[0], setFiles = _useState[1];
     var formProps = useForm(formOptions);
     var handleSubmit = formProps.handleSubmit, isSubmitting = formProps.formState.isSubmitting, reset = formProps.reset;
     var addToast = useToasts().addToast;
@@ -2239,27 +2325,69 @@ var Root3 = function(param) {
         }
     }).createMessage;
     var isMutatingMessage = useIsMutatingMessage();
+    var isFileLoading = useMemo8(function() {
+        return files.some(function(file) {
+            return isOptimistic({
+                id: file.id
+            });
+        });
+    }, [
+        files
+    ]);
     var isLoading = useMemo8(function() {
         return isMutatingMessage || isSubmitting;
     }, [
         isMutatingMessage,
         isSubmitting
     ]);
+    var latestMessage = useLatestMessage().latestMessage;
+    var isDisabled = useMemo8(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 ? partob2(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();
@@ -2273,25 +2401,19 @@ var Root3 = function(param) {
             return _ref.apply(this, arguments);
         };
     }();
-    var latestMessage = useLatestMessage().latestMessage;
-    var isDisabled = useMemo8(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__ */ jsx43(MessageFormContext.Provider, {
+    return /* @__PURE__ */ jsx46(MessageFormContext.Provider, {
         value: {
             isDisabled: isDisabled,
-            isLoading: isLoading
+            isLoading: isLoading,
+            files: files,
+            setFiles: setFiles,
+            isFileLoading: isFileLoading
         },
-        children: /* @__PURE__ */ jsx43(FormProvider, _object_spread_props(_object_spread({}, formProps), {
-            children: /* @__PURE__ */ jsx43(Box12, {
+        children: /* @__PURE__ */ jsx46(FormProvider, _object_spread_props(_object_spread({}, formProps), {
+            children: /* @__PURE__ */ jsx46(Box12, {
                 asChild: true,
                 flexShrink: "0",
-                children: /* @__PURE__ */ jsx43("form", {
+                children: /* @__PURE__ */ jsx46("form", {
                     onSubmit: handleSubmit(onSubmit),
                     children: children
                 })
@@ -2300,20 +2422,24 @@ var Root3 = function(param) {
     });
 };
 // src/components/threads/Thread/MessageForm/Field/index.tsx
+import { useFormContext as useFormContext2 } from "react-hook-form";
+import { Container as RadixContainer, Flex as Flex17 } from "@radix-ui/themes";
+// src/components/threads/Thread/MessageForm/Field/Control.tsx
+import { Flex as Flex14 } from "@radix-ui/themes";
+import { useFormContext } from "react-hook-form";
 import { usePrevious } from "react-use";
 import { useContext as useContext11, useMemo as useMemo9, useRef as useRef4, useEffect as useEffect3 } from "react";
 // src/components/textareas/TextareaBase/index.tsx
 import { forwardRef as forwardRef3 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
-import { Fragment as Fragment3, jsx as jsx44, jsxs as jsxs11 } from "react/jsx-runtime";
-var UPSCALE_RATIO = 16 / 14;
+import { Fragment as Fragment3, jsx as jsx47, jsxs as jsxs15 } from "react/jsx-runtime";
 var TextareaBase = forwardRef3(function TextareaBase2(props, ref) {
-    return /* @__PURE__ */ jsxs11(Fragment3, {
+    return /* @__PURE__ */ jsxs15(Fragment3, {
         children: [
-            /* @__PURE__ */ jsx44("style", {
+            /* @__PURE__ */ jsx47("style", {
                 children: ".superinterface-textarea { min-height: inherit; height: 30px; }\n.superinterface-textarea::placeholder { color: var(--gray-a10); }"
             }),
-            /* @__PURE__ */ jsx44(TextareaAutosize, _object_spread({
+            /* @__PURE__ */ jsx47(TextareaAutosize, _object_spread({
                 ref: ref,
                 className: "rt-reset superinterface-textarea",
                 style: {
@@ -2322,12 +2448,6 @@ var TextareaBase = forwardRef3(function TextareaBase2(props, ref) {
                     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"
                 }
@@ -2335,40 +2455,17 @@ var TextareaBase = forwardRef3(function TextareaBase2(props, ref) {
         ]
     });
 });
-// src/components/threads/Thread/MessageForm/Field/index.tsx
-import { useFormContext } from "react-hook-form";
-import { Container as Container2, Flex as Flex14 } from "@radix-ui/themes";
-import { jsx as jsx45 } from "react/jsx-runtime";
-var Root4 = function(param) {
+// src/components/threads/Thread/MessageForm/Field/Control.tsx
+import { jsx as jsx48 } from "react/jsx-runtime";
+var Root5 = function(param) {
     var children = param.children;
-    var _useFormContext = useFormContext(), errors = _useFormContext.formState.errors;
-    return /* @__PURE__ */ jsx45(Container2, {
-        size: "2",
-        flexGrow: "0",
-        children: /* @__PURE__ */ jsx45(Flex14, {
-            direction: "column",
-            flexShrink: "0",
-            children: /* @__PURE__ */ jsx45(Flex14, {
-                direction: "column",
-                flexShrink: "0",
-                children: /* @__PURE__ */ jsx45(Flex14, {
-                    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__ */ jsx48(Flex14, {
+        flexGrow: "1",
+        pt: "4px",
+        children: children
     });
 };
-var Control = function() {
+var Input = function() {
     var assistantNameContext = useContext11(AssistantNameContext);
     var register = useFormContext().register;
     var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading;
@@ -2391,7 +2488,7 @@ var Control = function() {
         isDisabledPrevious,
         textareaProps
     ]);
-    return /* @__PURE__ */ jsx45(TextareaBase, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ jsx48(TextareaBase, _object_spread_props(_object_spread({
         minRows: 1,
         placeholder: "Message ".concat(assistantNameContext, "..."),
         disabled: isDisabled,
@@ -2410,51 +2507,348 @@ var Control = function() {
         }
     }));
 };
+var Control = function() {
+    return /* @__PURE__ */ jsx48(Root5, {
+        children: /* @__PURE__ */ jsx48(Input, {})
+    });
+};
+Control.Root = Root5;
+Control.Input = Input;
+// src/components/threads/Thread/MessageForm/Field/Files/Preview.tsx
+import { Flex as Flex15, Card as Card2, Spinner, Text as Text6, IconButton as IconButton2 } from "@radix-ui/themes";
+import { FileIcon as FileIcon2, Cross2Icon } from "@radix-ui/react-icons";
+import { jsx as jsx49, jsxs as jsxs16 } from "react/jsx-runtime";
+var Preview = function() {
+    var _useMessageFormContext = useMessageFormContext(), files = _useMessageFormContext.files, setFiles = _useMessageFormContext.setFiles;
+    if (!files.length) {
+        return null;
+    }
+    return /* @__PURE__ */ jsx49(Flex15, {
+        flexBasis: "100%",
+        direction: "column",
+        pb: "2",
+        gap: "1",
+        children: files.map(function(file) {
+            return /* @__PURE__ */ jsx49(Card2, {
+                variant: "ghost",
+                children: /* @__PURE__ */ jsxs16(Flex15, {
+                    align: "center",
+                    justify: "between",
+                    gap: "1",
+                    children: [
+                        /* @__PURE__ */ jsxs16(Flex15, {
+                            align: "center",
+                            gap: "1",
+                            flexShrink: "1",
+                            minWidth: "0",
+                            maxWidth: "250px",
+                            children: [
+                                /* @__PURE__ */ jsx49(Flex15, {
+                                    flexShrink: "0",
+                                    children: /* @__PURE__ */ jsx49(Spinner, {
+                                        loading: isOptimistic({
+                                            id: file.id
+                                        }),
+                                        children: /* @__PURE__ */ jsx49(FileIcon2, {})
+                                    })
+                                }),
+                                /* @__PURE__ */ jsx49(Text6, {
+                                    size: "2",
+                                    truncate: true,
+                                    wrap: "nowrap",
+                                    children: file.filename
+                                })
+                            ]
+                        }),
+                        /* @__PURE__ */ jsx49(Flex15, {
+                            flexShrink: "0",
+                            children: /* @__PURE__ */ jsx49(IconButton2, {
+                                onClick: function() {
+                                    return setFiles(function(prev) {
+                                        return prev.filter(function(prevFile) {
+                                            return prevFile.id !== file.id;
+                                        });
+                                    });
+                                },
+                                color: "gray",
+                                variant: "ghost",
+                                size: "1",
+                                children: /* @__PURE__ */ jsx49(Cross2Icon, {})
+                            })
+                        })
+                    ]
+                })
+            }, file.id);
+        })
+    });
+};
+// src/components/threads/Thread/MessageForm/Field/Files/Control.tsx
+import { useCallback as useCallback2 } from "react";
+import dayjs2 from "dayjs";
+import { FilePlusIcon } from "@radix-ui/react-icons";
+import { IconButton as IconButton3, Flex as Flex16 } from "@radix-ui/themes";
+// src/hooks/files/useCreateFile/index.ts
+import { useMutation as useMutation2, useQueryClient as useQueryClient5 } from "@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 = useQueryClient5();
+    var superinterfaceContext = useSuperinterfaceContext();
+    var threadContext = useSuperinterfaceContext();
+    var props = useMutation2(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
+import { jsx as jsx50, jsxs as jsxs17 } from "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 = useCallback2(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: dayjs2().unix(),
+                bytes: file.size,
+                status: "processed"
+            };
+        });
+        setFiles(function(prev) {
+            return _to_consumable_array(prev).concat(_to_consumable_array(newFiles));
+        });
+    }, []);
+    return /* @__PURE__ */ jsx50(Flex16, {
+        pt: "2",
+        pr: "2",
+        flexGrow: "0",
+        children: /* @__PURE__ */ jsxs17(IconButton3, {
+            type: "button",
+            variant: "ghost",
+            color: "gray",
+            disabled: isDisabled || isLoading,
+            style: {
+                position: "relative",
+                overflow: "hidden"
+            },
+            children: [
+                /* @__PURE__ */ jsx50(FilePlusIcon, {}),
+                /* @__PURE__ */ jsx50("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
+import { jsx as jsx51 } from "react/jsx-runtime";
+var Root6 = function(param) {
+    var children = param.children;
+    var _useFormContext2 = useFormContext2(), errors = _useFormContext2.formState.errors;
+    return /* @__PURE__ */ jsx51(RadixContainer, {
+        size: "2",
+        flexGrow: "0",
+        children: /* @__PURE__ */ jsx51(Flex17, {
+            direction: "column",
+            flexShrink: "0",
+            children: /* @__PURE__ */ jsx51(Flex17, {
+                direction: "column",
+                flexShrink: "0",
+                children: /* @__PURE__ */ jsx51(Flex17, {
+                    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: Root4,
-    Control: Control
+    Root: Root6,
+    Control: Control,
+    Files: Files
 };
 // src/components/threads/Thread/MessageForm/index.tsx
-import { jsx as jsx46, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs18 } from "react/jsx-runtime";
 var MessageForm = function() {
-    return /* @__PURE__ */ jsx46(Root3, {
-        children: /* @__PURE__ */ jsxs12(Field.Root, {
+    return /* @__PURE__ */ jsx52(Root4, {
+        children: /* @__PURE__ */ jsxs18(Field.Root, {
             children: [
-                /* @__PURE__ */ jsx46(Text5, {
-                    size: "2",
-                    style: {
-                        flexGrow: 1
-                    },
-                    children: /* @__PURE__ */ jsx46(Flex15, {
-                        flexGrow: "1",
-                        direction: "column",
-                        children: /* @__PURE__ */ jsx46(Field.Control, {})
-                    })
-                }),
-                /* @__PURE__ */ jsx46(Flex15, {
-                    flexShrink: "0",
-                    align: "end",
-                    children: /* @__PURE__ */ jsx46(Submit, {})
-                })
+                /* @__PURE__ */ jsx52(Field.Control, {}),
+                /* @__PURE__ */ jsx52(Submit, {})
             ]
         })
     });
 };
-MessageForm.Root = Root3;
+MessageForm.Root = Root4;
 MessageForm.Field = Field;
 MessageForm.Submit = Submit;
 // src/components/threads/Thread/Root/index.tsx
-import { Flex as Flex16 } from "@radix-ui/themes";
+import { Flex as Flex18 } from "@radix-ui/themes";
 // src/components/threads/Thread/Provider/index.tsx
 var Provider2 = SuperinterfaceProvider;
 // src/components/threads/Thread/Root/index.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
-var Root5 = function(_param) {
+import { jsx as jsx53 } from "react/jsx-runtime";
+var Root7 = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
     ]);
-    return /* @__PURE__ */ jsx47(Provider2, _object_spread_props(_object_spread({}, rest), {
-        children: /* @__PURE__ */ jsx47(Flex16, {
+    return /* @__PURE__ */ jsx53(Provider2, _object_spread_props(_object_spread({}, rest), {
+        children: /* @__PURE__ */ jsx53(Flex18, {
             direction: "column",
             flexGrow: "1",
             children: children
@@ -2462,16 +2856,16 @@ var Root5 = function(_param) {
     }));
 };
 // src/components/threads/Thread/index.tsx
-import { jsx as jsx48, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs19 } from "react/jsx-runtime";
 var Thread = function(props) {
-    return /* @__PURE__ */ jsxs13(Root5, _object_spread_props(_object_spread({}, props), {
+    return /* @__PURE__ */ jsxs19(Root7, _object_spread_props(_object_spread({}, props), {
         children: [
-            /* @__PURE__ */ jsx48(Messages, {}),
-            /* @__PURE__ */ jsx48(MessageForm, {})
+            /* @__PURE__ */ jsx54(Messages, {}),
+            /* @__PURE__ */ jsx54(MessageForm, {})
         ]
     }));
 };
-Thread.Root = Root5;
+Thread.Root = Root7;
 Thread.Messages = Messages;
 Thread.MessageForm = MessageForm;
 // src/hooks/messages/useMessageContext/index.ts
@@ -2480,7 +2874,7 @@ var useMessageContext = function() {
     return useContext12(MessageContext);
 };
 // src/components/threads/ThreadDialog/Provider/index.tsx
-import { useState } from "react";
+import { useState as useState2 } from "react";
 // src/contexts/threads/ThreadDialogContext/index.ts
 import { createContext as createContext11 } from "react";
 var ThreadDialogContext = createContext11({
@@ -2493,12 +2887,12 @@ var useThreadDialogContext = function() {
     return useContext13(ThreadDialogContext);
 };
 // src/components/threads/ThreadDialog/Provider/index.tsx
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var Provider3 = function(param) {
     var children = param.children;
     var threadDialogContext = useThreadDialogContext();
-    var _useState = _sliced_to_array(useState(threadDialogContext.isOpen), 2), isOpen = _useState[0], setIsOpen = _useState[1];
-    return /* @__PURE__ */ jsx49(ThreadDialogContext.Provider, {
+    var _useState2 = _sliced_to_array(useState2(threadDialogContext.isOpen), 2), isOpen = _useState2[0], setIsOpen = _useState2[1];
+    return /* @__PURE__ */ jsx55(ThreadDialogContext.Provider, {
         value: {
             isOpen: isOpen,
             setIsOpen: setIsOpen
@@ -2507,31 +2901,31 @@ var Provider3 = function(param) {
     });
 };
 // src/components/toasts/ToastsProvider/index.tsx
-import { useState as useState2, useCallback as useCallback2 } from "react";
+import { useState as useState3, useCallback as useCallback3 } from "react";
 import * as Toast2 from "@radix-ui/react-toast";
 // src/components/toasts/ToastsProvider/CustomToast.tsx
 import * as Toast from "@radix-ui/react-toast";
-import { Card, Text as Text6, Flex as Flex17 } from "@radix-ui/themes";
+import { Card as Card3, Text as Text7, Flex as Flex19 } from "@radix-ui/themes";
 import { CheckCircledIcon as CheckCircledIcon2, CrossCircledIcon } from "@radix-ui/react-icons";
-import { jsx as jsx50, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs20 } from "react/jsx-runtime";
 var CustomToast = function(param) {
     var toast = param.toast;
-    return /* @__PURE__ */ jsx50(Toast.Root, {
-        children: /* @__PURE__ */ jsx50(Card, {
-            children: /* @__PURE__ */ jsx50(Toast.Title, {
-                children: /* @__PURE__ */ jsxs14(Flex17, {
+    return /* @__PURE__ */ jsx56(Toast.Root, {
+        children: /* @__PURE__ */ jsx56(Card3, {
+            children: /* @__PURE__ */ jsx56(Toast.Title, {
+                children: /* @__PURE__ */ jsxs20(Flex19, {
                     children: [
-                        /* @__PURE__ */ jsx50(Flex17, {
+                        /* @__PURE__ */ jsx56(Flex19, {
                             pr: "2",
                             height: "14px",
                             align: "center",
-                            children: toast.type === "success" ? /* @__PURE__ */ jsx50(CheckCircledIcon2, {
+                            children: toast.type === "success" ? /* @__PURE__ */ jsx56(CheckCircledIcon2, {
                                 color: "var(--accent-9)"
-                            }) : /* @__PURE__ */ jsx50(CrossCircledIcon, {
+                            }) : /* @__PURE__ */ jsx56(CrossCircledIcon, {
                                 color: "var(--red-9)"
                             })
                         }),
-                        /* @__PURE__ */ jsx50(Text6, {
+                        /* @__PURE__ */ jsx56(Text7, {
                             weight: "medium",
                             size: "1",
                             children: toast.message
@@ -2543,31 +2937,31 @@ var CustomToast = function(param) {
     });
 };
 // src/components/toasts/ToastsProvider/index.tsx
-import { jsx as jsx51, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs21 } from "react/jsx-runtime";
 var ToastsProvider = function(param) {
     var children = param.children;
-    var _useState2 = _sliced_to_array(useState2([]), 2), toasts = _useState2[0], setToasts = _useState2[1];
-    var addToast = useCallback2(function(toast) {
+    var _useState3 = _sliced_to_array(useState3([]), 2), toasts = _useState3[0], setToasts = _useState3[1];
+    var addToast = useCallback3(function(toast) {
         return setToasts(function(prevToasts) {
             return _to_consumable_array(prevToasts).concat([
                 toast
             ]);
         });
     }, []);
-    return /* @__PURE__ */ jsx51(ToastsContext.Provider, {
+    return /* @__PURE__ */ jsx57(ToastsContext.Provider, {
         value: {
             toasts: toasts,
             addToast: addToast
         },
-        children: /* @__PURE__ */ jsxs15(Toast2.Provider, {
+        children: /* @__PURE__ */ jsxs21(Toast2.Provider, {
             children: [
                 children,
                 Array.from(toasts).map(function(toast, index) {
-                    return /* @__PURE__ */ jsx51(CustomToast, {
+                    return /* @__PURE__ */ jsx57(CustomToast, {
                         toast: toast
                     }, index);
                 }),
-                /* @__PURE__ */ jsx51(Toast2.Viewport, {
+                /* @__PURE__ */ jsx57(Toast2.Viewport, {
                     style: {
                         position: "absolute",
                         bottom: 0,
@@ -2589,22 +2983,34 @@ var ToastsProvider = function(param) {
     });
 };
 // src/components/threads/ThreadDialog/Root/index.tsx
-import { jsx as jsx52 } from "react/jsx-runtime";
-var Root7 = function(param) {
+import { jsx as jsx58 } from "react/jsx-runtime";
+var Root9 = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx52(ToastsProvider, {
-        children: /* @__PURE__ */ jsx52(Provider3, {
+    return /* @__PURE__ */ jsx58(ToastsProvider, {
+        children: /* @__PURE__ */ jsx58(Provider3, {
             children: children
         })
     });
 };
 // src/components/threads/ThreadDialog/Trigger/index.tsx
-import { Flex as Flex18 } from "@radix-ui/themes";
-import { jsx as jsx53 } from "react/jsx-runtime";
-var Trigger = function(param) {
+import { Flex as Flex20 } from "@radix-ui/themes";
+// src/components/threads/ThreadDialog/Trigger/Button.tsx
+import { IconButton as IconButton4 } from "@radix-ui/themes";
+import { ChatBubbleIcon } from "@radix-ui/react-icons";
+import { jsx as jsx59 } from "react/jsx-runtime";
+var Button3 = function() {
+    return /* @__PURE__ */ jsx59(IconButton4, {
+        size: "4",
+        radius: "full",
+        children: /* @__PURE__ */ jsx59(ChatBubbleIcon, {})
+    });
+};
+// src/components/threads/ThreadDialog/Trigger/index.tsx
+import { jsx as jsx60 } from "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__ */ jsx53(Flex18, {
+    return /* @__PURE__ */ jsx60(Flex20, {
         display: {
             initial: isOpen ? "none" : "flex",
             sm: "flex"
@@ -2627,26 +3033,22 @@ var Trigger = function(param) {
         children: children
     });
 };
-// src/components/threads/ThreadDialog/Button/index.tsx
-import { IconButton as IconButton2 } from "@radix-ui/themes";
-import { ChatBubbleIcon } from "@radix-ui/react-icons";
-import { jsx as jsx54 } from "react/jsx-runtime";
-var Button2 = function() {
-    return /* @__PURE__ */ jsx54(IconButton2, {
-        size: "4",
-        radius: "full",
-        children: /* @__PURE__ */ jsx54(ChatBubbleIcon, {})
-    });
+var Trigger = function(args) {
+    return /* @__PURE__ */ jsx60(Root10, _object_spread_props(_object_spread({}, args), {
+        children: /* @__PURE__ */ jsx60(Button3, {})
+    }));
 };
+Trigger.Root = Root10;
+Trigger.Button = Button3;
 // src/components/threads/ThreadDialog/Content/index.tsx
-import { Card as Card2, Inset, Flex as Flex20 } from "@radix-ui/themes";
+import { Card as Card4, Inset, Flex as Flex22 } from "@radix-ui/themes";
 // src/components/threads/ThreadDialog/Close/index.tsx
 import { Cross1Icon } from "@radix-ui/react-icons";
-import { IconButton as IconButton3, Flex as Flex19 } from "@radix-ui/themes";
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { IconButton as IconButton5, Flex as Flex21 } from "@radix-ui/themes";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var Close = function() {
     var _useThreadDialogContext = useThreadDialogContext(), setIsOpen = _useThreadDialogContext.setIsOpen, isOpen = _useThreadDialogContext.isOpen;
-    return /* @__PURE__ */ jsx55(Flex19, {
+    return /* @__PURE__ */ jsx61(Flex21, {
         display: {
             initial: isOpen ? "flex" : "none",
             sm: "none"
@@ -2666,20 +3068,20 @@ var Close = function() {
         style: {
             zIndex: 9999999999
         },
-        children: /* @__PURE__ */ jsx55(IconButton3, {
+        children: /* @__PURE__ */ jsx61(IconButton5, {
             size: "2",
             variant: "soft",
-            children: /* @__PURE__ */ jsx55(Cross1Icon, {})
+            children: /* @__PURE__ */ jsx61(Cross1Icon, {})
         })
     });
 };
 // src/components/threads/ThreadDialog/Content/index.tsx
-import { jsx as jsx56, jsxs as jsxs16 } from "react/jsx-runtime";
-var Root8 = function(param) {
+import { jsx as jsx62, jsxs as jsxs22 } from "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__ */ jsx56(Flex20, {
+    return /* @__PURE__ */ jsx62(Flex22, {
         direction: "column",
         justify: "end",
         position: "fixed",
@@ -2707,7 +3109,7 @@ var Root8 = function(param) {
         style: _object_spread({
             zIndex: 9999999999
         }, style),
-        children: /* @__PURE__ */ jsxs16(Card2, {
+        children: /* @__PURE__ */ jsxs22(Card4, {
             mb: {
                 initial: void 0,
                 sm: "3"
@@ -2718,7 +3120,7 @@ var Root8 = function(param) {
                 flexGrow: 1
             },
             children: [
-                /* @__PURE__ */ jsx56(Inset, {
+                /* @__PURE__ */ jsx62(Inset, {
                     clip: "padding-box",
                     side: "all",
                     pb: "current",
@@ -2728,56 +3130,64 @@ var Root8 = function(param) {
                     },
                     children: children
                 }),
-                /* @__PURE__ */ jsx56(Close, {})
+                /* @__PURE__ */ jsx62(Close, {})
             ]
         })
     });
 };
+var Messages2 = function() {
+    return /* @__PURE__ */ jsx62(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__ */ jsx62(Flex22, {
+        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__ */ jsx56(Root8, {
+    return /* @__PURE__ */ jsx62(Root11, {
         style: style,
-        children: /* @__PURE__ */ jsxs16(Thread.Root, {
+        children: /* @__PURE__ */ jsxs22(Thread.Root, {
             children: [
-                /* @__PURE__ */ jsx56(Thread.Messages, {
-                    style: {
-                        paddingTop: "var(--space-5)",
-                        paddingRight: "var(--space-5)",
-                        paddingLeft: "var(--space-5)"
-                    }
-                }),
-                /* @__PURE__ */ jsx56(Flex20, {
-                    direction: "column",
-                    pl: "5",
-                    pr: "5",
-                    pb: "3",
-                    flexShrink: "0",
-                    children: /* @__PURE__ */ jsx56(Thread.MessageForm, {})
+                /* @__PURE__ */ jsx62(Messages2, {}),
+                /* @__PURE__ */ jsx62(FormContainer, {
+                    children: /* @__PURE__ */ jsx62(Thread.MessageForm, {})
                 })
             ]
         })
     });
 };
-Content4.Root = Root8;
+Content4.Root = Root11;
+Content4.Messages = Messages2;
+Content4.FormContainer = FormContainer;
 // src/components/threads/ThreadDialog/index.tsx
-import { jsx as jsx57, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs23 } from "react/jsx-runtime";
 var ThreadDialog = function() {
-    return /* @__PURE__ */ jsxs17(Root7, {
+    return /* @__PURE__ */ jsxs23(Root9, {
         children: [
-            /* @__PURE__ */ jsx57(Content4, {}),
-            /* @__PURE__ */ jsx57(Trigger, {
-                children: /* @__PURE__ */ jsx57(Button2, {})
-            })
+            /* @__PURE__ */ jsx63(Content4, {}),
+            /* @__PURE__ */ jsx63(Trigger, {})
         ]
     });
 };
-ThreadDialog.Root = Root7;
+ThreadDialog.Root = Root9;
 ThreadDialog.Trigger = Trigger;
-ThreadDialog.Button = Button2;
 ThreadDialog.Content = Content4;
 // src/components/threads/AudioThread/Root/index.tsx
 import "regenerator-runtime/runtime";
-import { Flex as Flex21 } from "@radix-ui/themes";
+import { Flex as Flex23 } from "@radix-ui/themes";
 // src/contexts/threads/AudioThreadContext/index.ts
 import { createContext as createContext12 } from "react";
 var AudioThreadContext = createContext12({
@@ -2874,20 +3284,20 @@ var useStatus = function(param) {
     };
 };
 // src/hooks/audioThreads/useRecorder/index.ts
-import dayjs2 from "dayjs";
+import dayjs3 from "dayjs";
 import { useAudioCapture } from "use-audio-capture";
-import { useMemo as useMemo11, useRef as useRef5, useState as useState3, useCallback as useCallback3, useEffect as useEffect4 } from "react";
+import { useMemo as useMemo11, useRef as useRef5, useState as useState4, useCallback as useCallback4, useEffect as useEffect4 } from "react";
 import { useAudioPlayer } from "react-use-audio-player";
 import { useInterval } from "react-use";
 var useRecorder = function(param) {
     var isStopOnSilence = param.isStopOnSilence, onStart = param.onStart, onStop = param.onStop;
-    var _useState3 = _sliced_to_array(useState3(null), 2), silenceStart = _useState3[0], setSilenceStart = _useState3[1];
-    var _useState31 = _sliced_to_array(useState3(null), 2), noiseStart = _useState31[0], setNoiseStart = _useState31[1];
-    var _useState32 = _sliced_to_array(useState3(null), 2), mediaStream = _useState32[0], setMediaStream = _useState32[1];
-    var _useState33 = _sliced_to_array(useState3("idle"), 2), status = _useState33[0], setStatus = _useState33[1];
+    var _useState4 = _sliced_to_array(useState4(null), 2), silenceStart = _useState4[0], setSilenceStart = _useState4[1];
+    var _useState41 = _sliced_to_array(useState4(null), 2), noiseStart = _useState41[0], setNoiseStart = _useState41[1];
+    var _useState42 = _sliced_to_array(useState4(null), 2), mediaStream = _useState42[0], setMediaStream = _useState42[1];
+    var _useState43 = _sliced_to_array(useState4("idle"), 2), status = _useState43[0], setStatus = _useState43[1];
     var startAudioPlayer = useAudioPlayer();
     var endAudioPlayer = useAudioPlayer();
-    var _useState34 = _sliced_to_array(useState3(false), 2), isLoaded = _useState34[0], setIsLoaded = _useState34[1];
+    var _useState44 = _sliced_to_array(useState4(false), 2), isLoaded = _useState44[0], setIsLoaded = _useState44[1];
     useEffect4(function() {
         if (isLoaded) return;
         setIsLoaded(true);
@@ -2946,7 +3356,7 @@ var useRecorder = function(param) {
             setNoiseStart(null);
         }
     });
-    var _useState35 = _sliced_to_array(useState3(null), 2), audioEngine = _useState35[0], setAudioEngine = _useState35[1];
+    var _useState45 = _sliced_to_array(useState4(null), 2), audioEngine = _useState45[0], setAudioEngine = _useState45[1];
     var isInited = useRef5(false);
     useEffect4(function() {
         if (!mediaStream) return;
@@ -2978,7 +3388,7 @@ var useRecorder = function(param) {
     }, [
         audioEngine
     ]);
-    var handleSilence = useCallback3(function() {
+    var handleSilence = useCallback4(function() {
         if (!silenceAnalyser) return;
         var frequencyData = new Uint8Array(silenceAnalyser.frequencyBinCount);
         silenceAnalyser.getByteFrequencyData(frequencyData);
@@ -2986,12 +3396,12 @@ var useRecorder = function(param) {
             return f === 0;
         });
         setSilenceStart(function(silenceStart2) {
-            if (isSilent) return silenceStart2 || dayjs2();
+            if (isSilent) return silenceStart2 || dayjs3();
             return null;
         });
         setNoiseStart(function(noiseStart2) {
             if (isSilent) return noiseStart2;
-            return noiseStart2 || dayjs2();
+            return noiseStart2 || dayjs3();
         });
         requestAnimationFrame(function() {
             return handleSilence();
@@ -3015,7 +3425,7 @@ var useRecorder = function(param) {
         if (status !== "recording") return;
         if (!silenceStart) return;
         if (!noiseStart) return;
-        if (!silenceStart.isBefore(dayjs2().subtract(1.5, "second"))) return;
+        if (!silenceStart.isBefore(dayjs3().subtract(1.5, "second"))) return;
         audioCaptureProps.stop();
     }, 300);
     return _object_spread_props(_object_spread({}, audioCaptureProps), {
@@ -3024,7 +3434,7 @@ var useRecorder = function(param) {
     });
 };
 // src/hooks/audioThreads/useMessageAudio/index.ts
-import { useMemo as useMemo12, useRef as useRef6, useState as useState4, useEffect as useEffect5 } from "react";
+import { useMemo as useMemo12, useRef as useRef6, useState as useState5, useEffect as useEffect5 } from "react";
 import nlp from "compromise";
 import { Howler } from "howler";
 import { useAudioPlayer as useAudioPlayer2 } from "react-use-audio-player";
@@ -3062,13 +3472,13 @@ var getMessageSentences = function(param) {
 };
 var useMessageAudio = function(param) {
     var onEnd = param.onEnd;
-    var _useState4 = _sliced_to_array(useState4(false), 2), isAudioPlayed = _useState4[0], setIsAudioPlayed = _useState4[1];
-    var _useState41 = _sliced_to_array(useState4([]), 2), stoppedMessageIds = _useState41[0], setStoppedMessageIds = _useState41[1];
-    var _useState42 = _sliced_to_array(useState4([]), 2), playedMessageSentences = _useState42[0], setPlayedMessageSentences = _useState42[1];
+    var _useState5 = _sliced_to_array(useState5(false), 2), isAudioPlayed = _useState5[0], setIsAudioPlayed = _useState5[1];
+    var _useState51 = _sliced_to_array(useState5([]), 2), stoppedMessageIds = _useState51[0], setStoppedMessageIds = _useState51[1];
+    var _useState52 = _sliced_to_array(useState5([]), 2), playedMessageSentences = _useState52[0], setPlayedMessageSentences = _useState52[1];
     var audioPlayer = useAudioPlayer2();
     var nextAudioPlayer = useAudioPlayer2();
     var superinterfaceContext = useSuperinterfaceContext();
-    var _useState43 = _sliced_to_array(useState4(false), 2), isPlaying = _useState43[0], setIsPlaying = _useState43[1];
+    var _useState53 = _sliced_to_array(useState5(false), 2), isPlaying = _useState53[0], setIsPlaying = _useState53[1];
     var latestMessageProps = useLatestMessage();
     var unplayedMessageSentences = useMemo12(function() {
         if (!latestMessageProps.latestMessage) return [];
@@ -3168,7 +3578,7 @@ var useMessageAudio = function(param) {
     }, [
         audioPlayer
     ]);
-    var _useState44 = _sliced_to_array(useState4(null), 2), audioEngine = _useState44[0], setAudioEngine = _useState44[1];
+    var _useState54 = _sliced_to_array(useState5(null), 2), audioEngine = _useState54[0], setAudioEngine = _useState54[1];
     var isAudioEngineInited = useRef6(false);
     useEffect5(function() {
         if (!audioPlayer.playing) return;
@@ -3214,8 +3624,8 @@ var useMessageAudio = function(param) {
     });
 };
 // src/components/threads/AudioThread/Root/index.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
-var Root9 = function(param) {
+import { jsx as jsx64 } from "react/jsx-runtime";
+var Root12 = function(param) {
     var children = param.children;
     var createMessageProps = useCreateMessage();
     var recorderProps = useRecorder({
@@ -3272,13 +3682,13 @@ var Root9 = function(param) {
         createMessageProps: createMessageProps,
         messageAudioProps: messageAudioProps
     }).status;
-    return /* @__PURE__ */ jsx58(AudioThreadContext.Provider, {
+    return /* @__PURE__ */ jsx64(AudioThreadContext.Provider, {
         value: {
             status: status,
             recorderProps: recorderProps,
             messageAudioProps: messageAudioProps
         },
-        children: /* @__PURE__ */ jsx58(Flex21, {
+        children: /* @__PURE__ */ jsx64(Flex23, {
             direction: "column",
             flexGrow: "1",
             p: "9",
@@ -3287,9 +3697,9 @@ var Root9 = function(param) {
     });
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
-import { useContext as useContext15, useState as useState6, useCallback as useCallback5, useEffect as useEffect7 } from "react";
+import { useContext as useContext15, useState as useState7, useCallback as useCallback6, useEffect as useEffect7 } from "react";
 import _9 from "lodash";
-import { Flex as Flex23 } from "@radix-ui/themes";
+import { Flex as Flex25 } from "@radix-ui/themes";
 // src/hooks/threads/useAudioThreadContext/index.ts
 import { useContext as useContext14 } from "react";
 var useAudioThreadContext = function() {
@@ -3297,15 +3707,15 @@ var useAudioThreadContext = function() {
 };
 // src/components/threads/AudioThread/BarsVisualizer/index.tsx
 import _8 from "lodash";
-import { Flex as Flex22, Grid } from "@radix-ui/themes";
-import { useState as useState5, useEffect as useEffect6, useCallback as useCallback4 } from "react";
+import { Flex as Flex24, Grid } from "@radix-ui/themes";
+import { useState as useState6, useEffect as useEffect6, useCallback as useCallback5 } from "react";
 import { cluster } from "radash";
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var barCount = 4;
 var BarsVisualizer = function(param) {
     var visualizationAnalyser = param.visualizationAnalyser, backgroundColor = param.backgroundColor, height = param.height, barWidth = param.barWidth;
-    var _useState5 = _sliced_to_array(useState5([]), 2), barHeights = _useState5[0], setBarHeights = _useState5[1];
-    var draw = useCallback4(function(param) {
+    var _useState6 = _sliced_to_array(useState6([]), 2), barHeights = _useState6[0], setBarHeights = _useState6[1];
+    var draw = useCallback5(function(param) {
         var visualizationAnalyser2 = param.visualizationAnalyser;
         if (!visualizationAnalyser2) {
             setBarHeights(Array(barCount).fill(0));
@@ -3331,7 +3741,7 @@ var BarsVisualizer = function(param) {
         draw,
         visualizationAnalyser
     ]);
-    return /* @__PURE__ */ jsx59(Grid, {
+    return /* @__PURE__ */ jsx65(Grid, {
         columns: "".concat(barCount),
         gap: "1",
         width: "auto",
@@ -3340,12 +3750,12 @@ var BarsVisualizer = function(param) {
             gridTemplateColumns: "repeat(4, minmax(0, 1fr))"
         },
         children: barHeights.map(function(barHeight, index) {
-            return /* @__PURE__ */ jsx59(Flex22, {
+            return /* @__PURE__ */ jsx65(Flex24, {
                 direction: "column",
                 align: "center",
                 justify: "center",
                 height: height,
-                children: /* @__PURE__ */ jsx59(Flex22, {
+                children: /* @__PURE__ */ jsx65(Flex24, {
                     minHeight: "50%",
                     maxHeight: "100%",
                     height: "".concat(barHeight + 20, "%"),
@@ -3360,12 +3770,12 @@ var BarsVisualizer = function(param) {
     });
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
-import { jsx as jsx60, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs24 } from "react/jsx-runtime";
 var Visualization = function() {
     var audioThreadContext = useAudioThreadContext();
     var assistantNameContext = useContext15(AssistantNameContext);
-    var _useState6 = _sliced_to_array(useState6(0), 2), scale = _useState6[0], setScale = _useState6[1];
-    var draw = useCallback5(function(param) {
+    var _useState7 = _sliced_to_array(useState7(0), 2), scale = _useState7[0], setScale = _useState7[1];
+    var draw = useCallback6(function(param) {
         var visualizationAnalyser = param.visualizationAnalyser;
         if (!visualizationAnalyser) {
             setScale(1);
@@ -3388,14 +3798,14 @@ var Visualization = function() {
         draw,
         audioThreadContext
     ]);
-    return /* @__PURE__ */ jsxs18(Flex23, {
+    return /* @__PURE__ */ jsxs24(Flex25, {
         direction: "column",
         align: "center",
         justify: "center",
         mb: "3",
         flexGrow: "1",
         children: [
-            /* @__PURE__ */ jsx60(Flex23, {
+            /* @__PURE__ */ jsx66(Flex25, {
                 align: "center",
                 justify: "center",
                 height: "200px",
@@ -3405,20 +3815,20 @@ var Visualization = function() {
                     borderRadius: "9999px",
                     scale: scale
                 },
-                children: /* @__PURE__ */ jsx60(BarsVisualizer, {
+                children: /* @__PURE__ */ jsx66(BarsVisualizer, {
                     visualizationAnalyser: audioThreadContext.messageAudioProps.visualizationAnalyser,
                     backgroundColor: audioThreadContext.status === "playing" ? "var(--accent-11)" : "var(--gray-11)",
                     height: "40px",
                     barWidth: "24px"
                 })
             }),
-            /* @__PURE__ */ jsxs18(Flex23, {
+            /* @__PURE__ */ jsxs24(Flex25, {
                 ml: "-22.5px",
                 gap: "3",
                 pt: "5",
                 children: [
-                    /* @__PURE__ */ jsx60(AssistantAvatar, {}),
-                    /* @__PURE__ */ jsx60(Name, {
+                    /* @__PURE__ */ jsx66(AssistantAvatar, {}),
+                    /* @__PURE__ */ jsx66(Name, {
                         children: assistantNameContext
                     })
                 ]
@@ -3427,8 +3837,8 @@ var Visualization = function() {
     });
 };
 // src/components/threads/AudioThread/Status/StatusMessages.tsx
-import { Flex as Flex24, Text as Text7 } from "@radix-ui/themes";
-import { jsx as jsx61, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Flex as Flex26, Text as Text8 } from "@radix-ui/themes";
+import { jsx as jsx67, jsxs as jsxs25 } from "react/jsx-runtime";
 var html = function(param) {
     var texts = param.texts;
     return "\n  .status-messages-texts:after {\n    content: '".concat(texts[0], "';\n    animation: texts ").concat(texts.length * 5, "s linear infinite;\n  }\n\n  @keyframes texts {\n    ").concat(texts.map(function(_10, i) {
@@ -3437,17 +3847,17 @@ var html = function(param) {
 };
 var StatusMessages = function(param) {
     var texts = param.texts;
-    return /* @__PURE__ */ jsxs19(Flex24, {
+    return /* @__PURE__ */ jsxs25(Flex26, {
         justify: "center",
         pb: "5",
         children: [
-            /* @__PURE__ */ jsx61(Text7, {
+            /* @__PURE__ */ jsx67(Text8, {
                 size: "2",
                 weight: "regular",
                 color: "gray",
                 className: "status-messages-texts"
             }),
-            /* @__PURE__ */ jsx61("style", {
+            /* @__PURE__ */ jsx67("style", {
                 dangerouslySetInnerHTML: {
                     __html: html({
                         texts: texts
@@ -3458,11 +3868,11 @@ var StatusMessages = function(param) {
     });
 };
 // src/components/threads/AudioThread/Status/index.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 var Status = function() {
     var audioThreadContext = useAudioThreadContext();
     if (audioThreadContext.status === "recording") {
-        return /* @__PURE__ */ jsx62(StatusMessages, {
+        return /* @__PURE__ */ jsx68(StatusMessages, {
             texts: [
                 "Start speaking",
                 "Listening",
@@ -3476,31 +3886,31 @@ var Status = function() {
         "idle",
         "playerPaused"
     ].includes(audioThreadContext.status)) {
-        return /* @__PURE__ */ jsx62(StatusMessages, {
+        return /* @__PURE__ */ jsx68(StatusMessages, {
             texts: [
                 "Click the button below to activate"
             ]
         });
     }
     if (audioThreadContext.status === "playing") {
-        return /* @__PURE__ */ jsx62(StatusMessages, {
+        return /* @__PURE__ */ jsx68(StatusMessages, {
             texts: [
                 "Click the button below to interrupt"
             ]
         });
     }
-    return /* @__PURE__ */ jsx62(StatusMessages, {
+    return /* @__PURE__ */ jsx68(StatusMessages, {
         texts: [
             "Thinking"
         ]
     });
 };
 // src/components/threads/AudioThread/Form/index.tsx
-import { Flex as Flex26 } from "@radix-ui/themes";
+import { Flex as Flex28 } from "@radix-ui/themes";
 // src/components/threads/AudioThread/Form/MicIcon.tsx
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 var MicIcon = function(props) {
-    return /* @__PURE__ */ jsx63("svg", _object_spread_props(_object_spread({
+    return /* @__PURE__ */ jsx69("svg", _object_spread_props(_object_spread({
         xmlns: "http://www.w3.org/2000/svg",
         fill: "currentColor",
         stroke: "currentColor",
@@ -3509,54 +3919,54 @@ var MicIcon = function(props) {
         height: "15",
         width: "15"
     }, props), {
-        children: /* @__PURE__ */ jsx63("path", {
+        children: /* @__PURE__ */ jsx69("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
-import { Flex as Flex25, IconButton as IconButton4 } from "@radix-ui/themes";
+import { Flex as Flex27, IconButton as IconButton6 } from "@radix-ui/themes";
 import { StopIcon as StopIcon2, PauseIcon, ArrowUpIcon as ArrowUpIcon2, ResumeIcon } from "@radix-ui/react-icons";
-import { jsx as jsx64, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs26 } from "react/jsx-runtime";
 var ActionButton = function() {
     var audioThreadContext = useAudioThreadContext();
     var superinterfaceContext = useSuperinterfaceContext();
     if (audioThreadContext.status === "recording") {
-        return /* @__PURE__ */ jsxs20(Flex25, {
+        return /* @__PURE__ */ jsxs26(Flex27, {
             align: "center",
             children: [
-                /* @__PURE__ */ jsx64(Flex25, {
+                /* @__PURE__ */ jsx70(Flex27, {
                     mr: "3",
                     ml: "-7",
-                    children: /* @__PURE__ */ jsx64(IconButton4, {
+                    children: /* @__PURE__ */ jsx70(IconButton6, {
                         onClick: audioThreadContext.recorderProps.pause,
                         color: "gray",
                         variant: "soft",
                         size: "1",
-                        children: /* @__PURE__ */ jsx64(PauseIcon, {})
+                        children: /* @__PURE__ */ jsx70(PauseIcon, {})
                     })
                 }),
-                /* @__PURE__ */ jsx64(IconButton4, {
+                /* @__PURE__ */ jsx70(IconButton6, {
                     onClick: audioThreadContext.recorderProps.stop,
                     highContrast: true,
                     variant: "soft",
                     size: "4",
-                    children: /* @__PURE__ */ jsx64(ArrowUpIcon2, {})
+                    children: /* @__PURE__ */ jsx70(ArrowUpIcon2, {})
                 })
             ]
         });
     }
     if (audioThreadContext.status === "recorderPaused") {
-        return /* @__PURE__ */ jsx64(IconButton4, {
+        return /* @__PURE__ */ jsx70(IconButton6, {
             onClick: audioThreadContext.recorderProps.resume,
             color: "red",
             size: "4",
-            children: /* @__PURE__ */ jsx64(ResumeIcon, {})
+            children: /* @__PURE__ */ jsx70(ResumeIcon, {})
         });
     }
     if (audioThreadContext.status === "idle") {
-        return /* @__PURE__ */ jsx64(IconButton4, {
+        return /* @__PURE__ */ jsx70(IconButton6, {
             onClick: function() {
                 return audioThreadContext.recorderProps.start();
             },
@@ -3565,7 +3975,7 @@ var ActionButton = function() {
         });
     }
     if (audioThreadContext.status === "playing") {
-        return /* @__PURE__ */ jsx64(IconButton4, {
+        return /* @__PURE__ */ jsx70(IconButton6, {
             onClick: function() {
                 var _superinterfaceContext_createMessageAbortControllerRef_current;
                 audioThreadContext.messageAudioProps.stop();
@@ -3575,54 +3985,54 @@ var ActionButton = function() {
             size: "4",
             color: "gray",
             variant: "soft",
-            children: /* @__PURE__ */ jsx64(StopIcon2, {})
+            children: /* @__PURE__ */ jsx70(StopIcon2, {})
         });
     }
     if (audioThreadContext.status === "playerPaused") {
-        return /* @__PURE__ */ jsx64(IconButton4, {
+        return /* @__PURE__ */ jsx70(IconButton6, {
             onClick: function() {
                 return audioThreadContext.messageAudioProps.play();
             },
             size: "4",
-            children: /* @__PURE__ */ jsx64(ResumeIcon, {})
+            children: /* @__PURE__ */ jsx70(ResumeIcon, {})
         });
     }
-    return /* @__PURE__ */ jsx64(IconButton4, {
+    return /* @__PURE__ */ jsx70(IconButton6, {
         size: "4",
         variant: "soft",
         disabled: true
     });
 };
 // src/components/threads/AudioThread/Form/index.tsx
-import { jsx as jsx65, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs27 } from "react/jsx-runtime";
 var Form = function() {
     var audioThreadContext = useAudioThreadContext();
-    return /* @__PURE__ */ jsxs21(Flex26, {
+    return /* @__PURE__ */ jsxs27(Flex28, {
         direction: "column",
         align: "center",
         children: [
-            /* @__PURE__ */ jsxs21(Flex26, {
+            /* @__PURE__ */ jsxs27(Flex28, {
                 pb: "3",
                 align: "center",
                 children: [
-                    /* @__PURE__ */ jsx65(Flex26, {
+                    /* @__PURE__ */ jsx71(Flex28, {
                         ml: "-22.5px",
                         mr: "2",
                         align: "center",
-                        children: /* @__PURE__ */ jsx65(MicIcon, {
+                        children: /* @__PURE__ */ jsx71(MicIcon, {
                             style: {
                                 color: audioThreadContext.status === "recording" ? "var(--accent-11)" : "var(--gray-11)"
                             }
                         })
                     }),
-                    /* @__PURE__ */ jsx65(Flex26, {
+                    /* @__PURE__ */ jsx71(Flex28, {
                         px: "2",
                         py: "1",
                         style: {
                             backgroundColor: audioThreadContext.status === "recording" ? "var(--accent-4)" : "var(--gray-4)",
                             borderRadius: "var(--radius-6)"
                         },
-                        children: /* @__PURE__ */ jsx65(BarsVisualizer, {
+                        children: /* @__PURE__ */ jsx71(BarsVisualizer, {
                             visualizationAnalyser: audioThreadContext.recorderProps.visualizationAnalyser,
                             backgroundColor: audioThreadContext.status === "recording" ? "var(--accent-11)" : "var(--gray-11)",
                             height: "20px",
@@ -3631,41 +4041,38 @@ var Form = function() {
                     })
                 ]
             }),
-            /* @__PURE__ */ jsx65(ActionButton, {})
+            /* @__PURE__ */ jsx71(ActionButton, {})
         ]
     });
 };
 // src/components/threads/AudioThread/index.tsx
-import { jsx as jsx66, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs28 } from "react/jsx-runtime";
 var AudioThread = function(props) {
-    return /* @__PURE__ */ jsxs22(Root9, _object_spread_props(_object_spread({}, props), {
+    return /* @__PURE__ */ jsxs28(Root12, _object_spread_props(_object_spread({}, props), {
         children: [
-            /* @__PURE__ */ jsx66(Visualization, {}),
-            /* @__PURE__ */ jsx66(Status, {}),
-            /* @__PURE__ */ jsx66(Form, {})
+            /* @__PURE__ */ jsx72(Visualization, {}),
+            /* @__PURE__ */ jsx72(Status, {}),
+            /* @__PURE__ */ jsx72(Form, {})
         ]
     }));
 };
-AudioThread.Root = Root9;
+AudioThread.Root = Root12;
 AudioThread.Visualization = Visualization;
 AudioThread.Form = Form;
 // src/components/threads/AudioThreadDialog/index.tsx
-import { jsx as jsx67, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs29 } from "react/jsx-runtime";
 var AudioThreadDialog = function() {
-    return /* @__PURE__ */ jsxs23(Root7, {
+    return /* @__PURE__ */ jsxs29(Root9, {
         children: [
-            /* @__PURE__ */ jsx67(Content4.Root, {
-                children: /* @__PURE__ */ jsx67(AudioThread, {})
+            /* @__PURE__ */ jsx73(Content4.Root, {
+                children: /* @__PURE__ */ jsx73(AudioThread, {})
             }),
-            /* @__PURE__ */ jsx67(Trigger, {
-                children: /* @__PURE__ */ jsx67(Button2, {})
-            })
+            /* @__PURE__ */ jsx73(Trigger, {})
         ]
     });
 };
-AudioThreadDialog.Root = Root7;
+AudioThreadDialog.Root = Root9;
 AudioThreadDialog.Trigger = Trigger;
-AudioThreadDialog.Button = Button2;
 AudioThreadDialog.Content = Content4;
 // src/components/suggestions/Suggestions/index.tsx
 import { useMemo as useMemo14 } from "react";
@@ -3673,15 +4080,15 @@ import { useMemo as useMemo14 } from "react";
 import { useMemo as useMemo13 } from "react";
 import { isEmpty as isEmpty3 } from "radash";
 import { onlyText } from "react-children-utilities";
-import { Flex as Flex27 } from "@radix-ui/themes";
+import { Flex as Flex29 } from "@radix-ui/themes";
 // src/components/suggestions/Suggestions/Item.tsx
 import { ArrowUpIcon as ArrowUpIcon3 } from "@radix-ui/react-icons";
-import { Text as Text8, Button as Button3, Spinner } from "@radix-ui/themes";
-import { jsx as jsx68, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Text as Text9, Button as Button4, Spinner as Spinner2 } from "@radix-ui/themes";
+import { jsx as jsx74, jsxs as jsxs30 } from "react/jsx-runtime";
 var Item = function(param) {
     var suggestion = param.suggestion, isDisabled = param.isDisabled;
     var _useCreateMessage = useCreateMessage(), createMessage = _useCreateMessage.createMessage, isPending = _useCreateMessage.isPending;
-    return /* @__PURE__ */ jsx68(Content5, {
+    return /* @__PURE__ */ jsx74(Content5, {
         onClick: function() {
             createMessage({
                 // @ts-ignore-next-line
@@ -3695,7 +4102,7 @@ var Item = function(param) {
 };
 var Content5 = function(param) {
     var onClick = param.onClick, isDisabled = param.isDisabled, isPending = param.isPending, children = param.children;
-    return /* @__PURE__ */ jsxs24(Button3, {
+    return /* @__PURE__ */ jsxs30(Button4, {
         variant: "soft",
         onClick: onClick,
         disabled: isDisabled,
@@ -3705,14 +4112,14 @@ var Content5 = function(param) {
             flexShrink: 1
         },
         children: [
-            /* @__PURE__ */ jsx68(Text8, {
+            /* @__PURE__ */ jsx74(Text9, {
                 size: "1",
                 weight: "regular",
                 children: children
             }),
-            /* @__PURE__ */ jsx68(Spinner, {
+            /* @__PURE__ */ jsx74(Spinner2, {
                 loading: isPending,
-                children: /* @__PURE__ */ jsx68(ArrowUpIcon3, {
+                children: /* @__PURE__ */ jsx74(ArrowUpIcon3, {
                     style: {
                         flexShrink: 0
                     }
@@ -3723,7 +4130,7 @@ var Content5 = function(param) {
 };
 Item.Content = Content5;
 // src/components/suggestions/Suggestions/Content.tsx
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 var Content6 = function(param) {
     var children = param.children;
     var isMutatingMessage = useIsMutatingMessage();
@@ -3737,12 +4144,12 @@ var Content6 = function(param) {
         children
     ]);
     if (isEmpty3(suggestions)) return null;
-    return /* @__PURE__ */ jsx69(Flex27, {
+    return /* @__PURE__ */ jsx75(Flex29, {
         gap: "2",
         py: "2",
         wrap: "wrap",
         children: suggestions.map(function(suggestion) {
-            return /* @__PURE__ */ jsx69(Item, {
+            return /* @__PURE__ */ jsx75(Item, {
                 suggestion: suggestion,
                 isDisabled: isMutatingMessage
             }, suggestion);
@@ -3750,7 +4157,7 @@ var Content6 = function(param) {
     });
 };
 // src/components/suggestions/Suggestions/index.tsx
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var Suggestions = function(param) {
     var children = param.children;
     var latestMessageProps = useLatestMessage();
@@ -3763,14 +4170,14 @@ var Suggestions = function(param) {
     ]);
     if (latestMessageProps.isLoading) return null;
     if (isDisabled) return null;
-    return /* @__PURE__ */ jsx70(Content6, {
+    return /* @__PURE__ */ jsx76(Content6, {
         children: children
     });
 };
 Suggestions.Item = Item;
 // src/components/markdown/MarkdownProvider/index.tsx
 import { useMemo as useMemo15 } from "react";
-import { jsx as jsx71 } from "react/jsx-runtime";
+import { jsx as jsx77 } from "react/jsx-runtime";
 var MarkdownProvider = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
@@ -3782,7 +4189,7 @@ var MarkdownProvider = function(_param) {
         rest,
         prevMarkdownContext
     ]);
-    return /* @__PURE__ */ jsx71(MarkdownContext.Provider, {
+    return /* @__PURE__ */ jsx77(MarkdownContext.Provider, {
         value: value,
         children: children
     });
@@ -3795,7 +4202,7 @@ var useComponents = function() {
     return useContext16(ComponentsContext);
 };
 // src/components/components/ComponentsProvider.tsx
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx78 } from "react/jsx-runtime";
 var ComponentsProvider = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
@@ -3807,7 +4214,7 @@ var ComponentsProvider = function(_param) {
         rest,
         prevComponents
     ]);
-    return /* @__PURE__ */ jsx72(ComponentsContext.Provider, {
+    return /* @__PURE__ */ jsx78(ComponentsContext.Provider, {
         value: value,
         children: children
     });