@superinterface/react 2.16.3 → 2.16.5

package/dist/index.js

@@ -414,7 +414,7 @@ var SuperinterfaceProvider = function(param) {
     });
 };
 // src/components/threads/Thread/Messages/index.tsx
-import { Flex as Flex12 } from "@radix-ui/themes";
+import { Flex as Flex13 } from "@radix-ui/themes";
 // src/components/threads/Thread/Messages/Content/index.tsx
 import { useEffect } from "react";
 // src/hooks/messages/useMessages/index.tsx
@@ -787,7 +787,7 @@ var UserAvatar = function() {
     });
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
-import { Flex as Flex10 } from "@radix-ui/themes";
+import { Flex as Flex11 } from "@radix-ui/themes";
 // src/components/threads/Thread/Message/index.tsx
 import { useMemo as useMemo5, Fragment } from "react";
 import { isEmpty } from "radash";
@@ -808,27 +808,25 @@ var StartingContentSkeleton = function() {
     });
 };
 // src/components/runSteps/RunSteps/index.tsx
-import { Flex as Flex8 } from "@radix-ui/themes";
+import { Flex as Flex9 } 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 Flex7 } from "@radix-ui/themes";
+import { Flex as Flex8 } 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 } from "@radix-ui/themes";
+import { Popover, Flex as Flex7 } from "@radix-ui/themes";
 // src/components/toolCalls/ToolCallBase/index.tsx
-import { forwardRef as forwardRef3 } from "react";
 import { Flex as Flex6, Button } from "@radix-ui/themes";
 import { jsx as jsx10 } from "react/jsx-runtime";
-var ToolCallBase = forwardRef3(function ToolCallBase2(param, ref) {
+var ToolCallBase = function(param) {
     var children = param.children;
     return /* @__PURE__ */ jsx10(Flex6, {
-        ref: ref,
         py: "1",
         ml: "-2",
         children: /* @__PURE__ */ jsx10(Button, {
@@ -841,7 +839,7 @@ var ToolCallBase = forwardRef3(function ToolCallBase2(param, ref) {
             children: children
         })
     });
-});
+};
 // src/components/toolCalls/ToolCallBase/ToolCallTitle.tsx
 import { Text as Text2 } from "@radix-ui/themes";
 import { jsx as jsx11 } from "react/jsx-runtime";
@@ -865,34 +863,36 @@ var ToolCallIcon = function(param) {
         return /* @__PURE__ */ jsx12(CircleIcon, {});
     }
 };
-// src/components/functions/FunctionBase/Content.tsx
+// src/components/functions/FunctionBase/Content/index.tsx
 import { useMemo as useMemo3 } from "react";
 import { Code, Box as Box2 } from "@radix-ui/themes";
+// src/components/functions/FunctionBase/Content/lib/formattedJsonOrRaw.ts
+var formattedJsonOrRaw = function(param) {
+    var value = param.value;
+    if (!value) {
+        return null;
+    }
+    try {
+        return JSON.stringify(JSON.parse(value), null, 2);
+    } catch (error) {
+        return value;
+    }
+};
+// src/components/functions/FunctionBase/Content/index.tsx
 import { jsx as jsx13, jsxs as jsxs2 } from "react/jsx-runtime";
 var Content = function(param) {
     var fn = param.fn;
     var args = useMemo3(function() {
-        var result = null;
-        try {
-            result = JSON.parse(fn.arguments);
-        } catch (error) {
-            console.error(error);
-        }
-        return result;
+        return formattedJsonOrRaw({
+            value: fn.arguments
+        });
     }, [
         fn
     ]);
     var output = useMemo3(function() {
-        if (!fn.output) {
-            return null;
-        }
-        var result = null;
-        try {
-            result = JSON.parse(fn.output);
-        } catch (error) {
-            console.error(error);
-        }
-        return result;
+        return formattedJsonOrRaw({
+            value: fn.output
+        });
     }, [
         fn
     ]);
@@ -908,10 +908,10 @@ var Content = function(param) {
         },
         children: [
             /* @__PURE__ */ jsx13(Box2, {
-                children: args && JSON.stringify(args, null, 2)
+                children: args
             }),
             /* @__PURE__ */ jsx13(Box2, {
-                children: output && JSON.stringify(output, null, 2)
+                children: output
             })
         ]
     });
@@ -923,15 +923,17 @@ var FunctionBase = function(param) {
     return /* @__PURE__ */ jsxs3(Popover.Root, {
         children: [
             /* @__PURE__ */ jsx14(Popover.Trigger, {
-                children: /* @__PURE__ */ jsxs3(ToolCallBase, {
-                    children: [
-                        /* @__PURE__ */ jsx14(ToolCallIcon, {
-                            runStep: runStep
-                        }),
-                        /* @__PURE__ */ jsx14(ToolCallTitle, {
-                            children: title2
-                        })
-                    ]
+                children: /* @__PURE__ */ jsx14(Flex7, {
+                    children: /* @__PURE__ */ jsxs3(ToolCallBase, {
+                        children: [
+                            /* @__PURE__ */ jsx14(ToolCallIcon, {
+                                runStep: runStep
+                            }),
+                            /* @__PURE__ */ jsx14(ToolCallTitle, {
+                                children: title2
+                            })
+                        ]
+                    })
                 })
             }),
             /* @__PURE__ */ jsx14(Popover.Content, {
@@ -1086,7 +1088,7 @@ var Starting = function() {
 import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
 var Root = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx22(Flex7, {
+    return /* @__PURE__ */ jsx22(Flex8, {
         direction: "column",
         children: children
     });
@@ -1133,7 +1135,7 @@ var RunSteps = function(param) {
     var runSteps = param.runSteps;
     var componentsContext = useContext6(ComponentsContext);
     var Component = componentsContext.components.RunStep;
-    return /* @__PURE__ */ jsx24(Flex8, {
+    return /* @__PURE__ */ jsx24(Flex9, {
         direction: "column-reverse",
         children: runSteps.map(function(runStep) {
             return /* @__PURE__ */ jsx24(Component, {
@@ -1319,14 +1321,14 @@ var TextContent = function(param) {
     }));
 };
 // src/components/threads/Thread/Message/Attachments/index.tsx
-import { Flex as Flex9, Badge } from "@radix-ui/themes";
+import { Flex as Flex10, 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, {
+    return /* @__PURE__ */ jsx35(Flex10, {
         align: "start",
         pb: "1",
         children: /* @__PURE__ */ jsxs9(Badge, {
@@ -1425,7 +1427,7 @@ var Message = function(param) {
 import { jsx as jsx37 } from "react/jsx-runtime";
 var Content2 = function(param) {
     var messageGroup = param.messageGroup;
-    return /* @__PURE__ */ jsx37(Flex10, {
+    return /* @__PURE__ */ jsx37(Flex11, {
         direction: "column-reverse",
         children: messageGroup.messages.map(function(message) {
             return /* @__PURE__ */ jsx37(Message, {
@@ -1550,7 +1552,7 @@ var Progress = function() {
     return /* @__PURE__ */ jsx41(StartingSkeleton, {});
 };
 // src/components/threads/Thread/Messages/Root/index.tsx
-import { Flex as Flex11 } from "@radix-ui/themes";
+import { Flex as Flex12 } from "@radix-ui/themes";
 // src/hooks/misc/useInfiniteScroll/index.tsx
 import { useRef as useRef3 } from "react";
 import { useInView } from "react-intersection-observer";
@@ -1615,7 +1617,7 @@ var Root2 = function(param) {
         hasNextPage: hasNextPage,
         fetchNextPage: fetchNextPage
     }), containerRef = _useInfiniteScroll.containerRef, loaderRef = _useInfiniteScroll.loaderRef;
-    return /* @__PURE__ */ jsxs13(Flex11, {
+    return /* @__PURE__ */ jsxs13(Flex12, {
         ref: containerRef,
         direction: "column-reverse",
         flexGrow: "1",
@@ -1624,10 +1626,10 @@ var Root2 = function(param) {
         }),
         children: [
             children,
-            hasNextPage && /* @__PURE__ */ jsx42(Flex11, {
+            hasNextPage && /* @__PURE__ */ jsx42(Flex12, {
                 ref: loaderRef
             }),
-            /* @__PURE__ */ jsx42(Flex11, {
+            /* @__PURE__ */ jsx42(Flex12, {
                 flexShrink: "0",
                 flexGrow: "1"
             })
@@ -1650,7 +1652,7 @@ var Messages = function(param) {
     return /* @__PURE__ */ jsxs14(Root2, {
         style: style,
         children: [
-            /* @__PURE__ */ jsx44(Flex12, {
+            /* @__PURE__ */ jsx44(Flex13, {
                 flexShrink: "0",
                 height: "var(--space-3)"
             }),
@@ -1658,7 +1660,7 @@ var Messages = function(param) {
             children,
             /* @__PURE__ */ jsx44(Content3, {}),
             /* @__PURE__ */ jsx44(NextPageSkeleton, {}),
-            /* @__PURE__ */ jsx44(Flex12, {
+            /* @__PURE__ */ jsx44(Flex13, {
                 flexShrink: "0",
                 flexGrow: "1"
             })
@@ -1670,7 +1672,7 @@ Messages.Message = Message;
 Messages.NextPageSkeleton = NextPageSkeleton;
 // src/components/threads/Thread/MessageForm/Submit/index.tsx
 import { ArrowUpIcon, StopIcon } from "@radix-ui/react-icons";
-import { IconButton, Flex as Flex13 } from "@radix-ui/themes";
+import { IconButton, Flex as Flex14 } from "@radix-ui/themes";
 // src/hooks/messages/useMessageFormContext/index.ts
 import { useContext as useContext10 } from "react";
 // src/contexts/messages/MessageFormContext/index.ts
@@ -1690,7 +1692,7 @@ var useMessageFormContext = function() {
 import { jsx as jsx45 } from "react/jsx-runtime";
 var Root3 = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx45(Flex13, {
+    return /* @__PURE__ */ jsx45(Flex14, {
         flexShrink: "0",
         align: "end",
         children: children
@@ -2480,17 +2482,17 @@ var Root4 = 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";
+import { Container as RadixContainer, Flex as Flex18 } from "@radix-ui/themes";
 // src/components/threads/Thread/MessageForm/Field/Control.tsx
-import { Flex as Flex14 } from "@radix-ui/themes";
+import { Flex as Flex15 } 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 forwardRef4 } from "react";
+import { forwardRef as forwardRef3 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
 import { Fragment as Fragment3, jsx as jsx47, jsxs as jsxs15 } from "react/jsx-runtime";
-var TextareaBase = forwardRef4(function TextareaBase2(props, ref) {
+var TextareaBase = forwardRef3(function TextareaBase2(props, ref) {
     return /* @__PURE__ */ jsxs15(Fragment3, {
         children: [
             /* @__PURE__ */ jsx47("style", {
@@ -2516,7 +2518,7 @@ var TextareaBase = forwardRef4(function TextareaBase2(props, ref) {
 import { jsx as jsx48 } from "react/jsx-runtime";
 var Root5 = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx48(Flex14, {
+    return /* @__PURE__ */ jsx48(Flex15, {
         flexGrow: "1",
         pt: "4px",
         children: children
@@ -2572,7 +2574,7 @@ var Control = function() {
 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 { Flex as Flex16, 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() {
@@ -2580,7 +2582,7 @@ var Preview = function() {
     if (!files.length) {
         return null;
     }
-    return /* @__PURE__ */ jsx49(Flex15, {
+    return /* @__PURE__ */ jsx49(Flex16, {
         flexBasis: "100%",
         direction: "column",
         pb: "2",
@@ -2588,19 +2590,19 @@ var Preview = function() {
         children: files.map(function(file) {
             return /* @__PURE__ */ jsx49(Card2, {
                 variant: "ghost",
-                children: /* @__PURE__ */ jsxs16(Flex15, {
+                children: /* @__PURE__ */ jsxs16(Flex16, {
                     align: "center",
                     justify: "between",
                     gap: "1",
                     children: [
-                        /* @__PURE__ */ jsxs16(Flex15, {
+                        /* @__PURE__ */ jsxs16(Flex16, {
                             align: "center",
                             gap: "1",
                             flexShrink: "1",
                             minWidth: "0",
                             maxWidth: "250px",
                             children: [
-                                /* @__PURE__ */ jsx49(Flex15, {
+                                /* @__PURE__ */ jsx49(Flex16, {
                                     flexShrink: "0",
                                     children: /* @__PURE__ */ jsx49(Spinner, {
                                         loading: isOptimistic({
@@ -2617,7 +2619,7 @@ var Preview = function() {
                                 })
                             ]
                         }),
-                        /* @__PURE__ */ jsx49(Flex15, {
+                        /* @__PURE__ */ jsx49(Flex16, {
                             flexShrink: "0",
                             children: /* @__PURE__ */ jsx49(IconButton2, {
                                 onClick: function() {
@@ -2644,7 +2646,7 @@ import { useCallback as useCallback2 } from "react";
 import { omit as omit4 } from "radash";
 import dayjs2 from "dayjs";
 import { FilePlusIcon } from "@radix-ui/react-icons";
-import { IconButton as IconButton3, Flex as Flex16 } from "@radix-ui/themes";
+import { IconButton as IconButton3, Flex as Flex17 } 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
@@ -2929,7 +2931,7 @@ var Control2 = function() {
         createFile,
         setFiles
     ]);
-    return /* @__PURE__ */ jsx50(Flex16, {
+    return /* @__PURE__ */ jsx50(Flex17, {
         pt: "2",
         pr: "2",
         flexGrow: "0",
@@ -2976,13 +2978,13 @@ var Root6 = function(param) {
     return /* @__PURE__ */ jsx51(RadixContainer, {
         size: "2",
         flexGrow: "0",
-        children: /* @__PURE__ */ jsx51(Flex17, {
+        children: /* @__PURE__ */ jsx51(Flex18, {
             direction: "column",
             flexShrink: "0",
-            children: /* @__PURE__ */ jsx51(Flex17, {
+            children: /* @__PURE__ */ jsx51(Flex18, {
                 direction: "column",
                 flexShrink: "0",
-                children: /* @__PURE__ */ jsx51(Flex17, {
+                children: /* @__PURE__ */ jsx51(Flex18, {
                     style: _object_spread({
                         borderRadius: "var(--radius-2)",
                         borderWidth: "1px",
@@ -3021,7 +3023,7 @@ MessageForm.Root = Root4;
 MessageForm.Field = Field;
 MessageForm.Submit = Submit;
 // src/components/threads/Thread/Root/index.tsx
-import { Flex as Flex18 } from "@radix-ui/themes";
+import { Flex as Flex19 } from "@radix-ui/themes";
 // src/components/threads/Thread/Provider/index.tsx
 var Provider2 = SuperinterfaceProvider;
 // src/components/threads/Thread/Root/index.tsx
@@ -3031,7 +3033,7 @@ var Root7 = function(_param) {
         "children"
     ]);
     return /* @__PURE__ */ jsx53(Provider2, _object_spread_props(_object_spread({}, rest), {
-        children: /* @__PURE__ */ jsx53(Flex18, {
+        children: /* @__PURE__ */ jsx53(Flex19, {
             direction: "column",
             flexGrow: "1",
             children: children
@@ -3088,7 +3090,7 @@ 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 as Card3, Text as Text7, Flex as Flex19 } from "@radix-ui/themes";
+import { Card as Card3, Text as Text7, Flex as Flex20 } from "@radix-ui/themes";
 import { CheckCircledIcon as CheckCircledIcon2, CrossCircledIcon } from "@radix-ui/react-icons";
 import { jsx as jsx56, jsxs as jsxs20 } from "react/jsx-runtime";
 var CustomToast = function(param) {
@@ -3096,9 +3098,9 @@ var CustomToast = function(param) {
     return /* @__PURE__ */ jsx56(Toast.Root, {
         children: /* @__PURE__ */ jsx56(Card3, {
             children: /* @__PURE__ */ jsx56(Toast.Title, {
-                children: /* @__PURE__ */ jsxs20(Flex19, {
+                children: /* @__PURE__ */ jsxs20(Flex20, {
                     children: [
-                        /* @__PURE__ */ jsx56(Flex19, {
+                        /* @__PURE__ */ jsx56(Flex20, {
                             pr: "2",
                             height: "14px",
                             align: "center",
@@ -3176,7 +3178,7 @@ var Root9 = function(param) {
     });
 };
 // src/components/threads/ThreadDialog/Trigger/index.tsx
-import { Flex as Flex20 } from "@radix-ui/themes";
+import { Flex as Flex21 } 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";
@@ -3193,7 +3195,7 @@ 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__ */ jsx60(Flex20, {
+    return /* @__PURE__ */ jsx60(Flex21, {
         display: {
             initial: isOpen ? "none" : "flex",
             sm: "flex"
@@ -3224,14 +3226,14 @@ var Trigger = function(args) {
 Trigger.Root = Root10;
 Trigger.Button = Button3;
 // src/components/threads/ThreadDialog/Content/index.tsx
-import { Card as Card4, Inset, Flex as Flex22 } from "@radix-ui/themes";
+import { Card as Card4, Inset, Flex as Flex23 } from "@radix-ui/themes";
 // src/components/threads/ThreadDialog/Close/index.tsx
 import { Cross1Icon } from "@radix-ui/react-icons";
-import { IconButton as IconButton5, Flex as Flex21 } from "@radix-ui/themes";
+import { IconButton as IconButton5, Flex as Flex22 } 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__ */ jsx61(Flex21, {
+    return /* @__PURE__ */ jsx61(Flex22, {
         display: {
             initial: isOpen ? "flex" : "none",
             sm: "none"
@@ -3264,7 +3266,7 @@ 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__ */ jsx62(Flex22, {
+    return /* @__PURE__ */ jsx62(Flex23, {
         direction: "column",
         justify: "end",
         position: "fixed",
@@ -3329,7 +3331,7 @@ var Messages2 = function() {
 };
 var FormContainer = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx62(Flex22, {
+    return /* @__PURE__ */ jsx62(Flex23, {
         direction: "column",
         pl: "5",
         pr: "5",
@@ -3370,7 +3372,7 @@ ThreadDialog.Trigger = Trigger;
 ThreadDialog.Content = Content4;
 // src/components/threads/AudioThread/Root/index.tsx
 import "regenerator-runtime/runtime";
-import { Flex as Flex23 } from "@radix-ui/themes";
+import { Flex as Flex24 } from "@radix-ui/themes";
 // src/contexts/threads/AudioThreadContext/index.ts
 import { createContext as createContext12 } from "react";
 var AudioThreadContext = createContext12({
@@ -3871,7 +3873,7 @@ var Root12 = function(param) {
             recorderProps: recorderProps,
             messageAudioProps: messageAudioProps
         },
-        children: /* @__PURE__ */ jsx64(Flex23, {
+        children: /* @__PURE__ */ jsx64(Flex24, {
             direction: "column",
             flexGrow: "1",
             p: "9",
@@ -3882,7 +3884,7 @@ var Root12 = function(param) {
 // src/components/threads/AudioThread/Visualization/index.tsx
 import { useContext as useContext15, useState as useState7, useCallback as useCallback6, useEffect as useEffect7 } from "react";
 import _9 from "lodash";
-import { Flex as Flex25 } from "@radix-ui/themes";
+import { Flex as Flex26 } from "@radix-ui/themes";
 // src/hooks/threads/useAudioThreadContext/index.ts
 import { useContext as useContext14 } from "react";
 var useAudioThreadContext = function() {
@@ -3890,7 +3892,7 @@ var useAudioThreadContext = function() {
 };
 // src/components/threads/AudioThread/BarsVisualizer/index.tsx
 import _8 from "lodash";
-import { Flex as Flex24, Grid } from "@radix-ui/themes";
+import { Flex as Flex25, Grid } from "@radix-ui/themes";
 import { useState as useState6, useEffect as useEffect6, useCallback as useCallback5 } from "react";
 import { cluster } from "radash";
 import { jsx as jsx65 } from "react/jsx-runtime";
@@ -3933,12 +3935,12 @@ var BarsVisualizer = function(param) {
             gridTemplateColumns: "repeat(4, minmax(0, 1fr))"
         },
         children: barHeights.map(function(barHeight, index) {
-            return /* @__PURE__ */ jsx65(Flex24, {
+            return /* @__PURE__ */ jsx65(Flex25, {
                 direction: "column",
                 align: "center",
                 justify: "center",
                 height: height,
-                children: /* @__PURE__ */ jsx65(Flex24, {
+                children: /* @__PURE__ */ jsx65(Flex25, {
                     minHeight: "50%",
                     maxHeight: "100%",
                     height: "".concat(barHeight + 20, "%"),
@@ -3981,14 +3983,14 @@ var Visualization = function() {
         draw,
         audioThreadContext
     ]);
-    return /* @__PURE__ */ jsxs24(Flex25, {
+    return /* @__PURE__ */ jsxs24(Flex26, {
         direction: "column",
         align: "center",
         justify: "center",
         mb: "3",
         flexGrow: "1",
         children: [
-            /* @__PURE__ */ jsx66(Flex25, {
+            /* @__PURE__ */ jsx66(Flex26, {
                 align: "center",
                 justify: "center",
                 height: "200px",
@@ -4005,7 +4007,7 @@ var Visualization = function() {
                     barWidth: "24px"
                 })
             }),
-            /* @__PURE__ */ jsxs24(Flex25, {
+            /* @__PURE__ */ jsxs24(Flex26, {
                 ml: "-22.5px",
                 gap: "3",
                 pt: "5",
@@ -4020,7 +4022,7 @@ var Visualization = function() {
     });
 };
 // src/components/threads/AudioThread/Status/StatusMessages.tsx
-import { Flex as Flex26, Text as Text8 } from "@radix-ui/themes";
+import { Flex as Flex27, 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;
@@ -4030,7 +4032,7 @@ var html = function(param) {
 };
 var StatusMessages = function(param) {
     var texts = param.texts;
-    return /* @__PURE__ */ jsxs25(Flex26, {
+    return /* @__PURE__ */ jsxs25(Flex27, {
         justify: "center",
         pb: "5",
         children: [
@@ -4089,7 +4091,7 @@ var Status = function() {
     });
 };
 // src/components/threads/AudioThread/Form/index.tsx
-import { Flex as Flex28 } from "@radix-ui/themes";
+import { Flex as Flex29 } from "@radix-ui/themes";
 // src/components/threads/AudioThread/Form/MicIcon.tsx
 import { jsx as jsx69 } from "react/jsx-runtime";
 var MicIcon = function(props) {
@@ -4109,17 +4111,17 @@ var MicIcon = function(props) {
     }));
 };
 // src/components/threads/AudioThread/Form/ActionButton/index.tsx
-import { Flex as Flex27, IconButton as IconButton6 } from "@radix-ui/themes";
+import { Flex as Flex28, IconButton as IconButton6 } from "@radix-ui/themes";
 import { StopIcon as StopIcon2, PauseIcon, ArrowUpIcon as ArrowUpIcon2, ResumeIcon } from "@radix-ui/react-icons";
 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__ */ jsxs26(Flex27, {
+        return /* @__PURE__ */ jsxs26(Flex28, {
             align: "center",
             children: [
-                /* @__PURE__ */ jsx70(Flex27, {
+                /* @__PURE__ */ jsx70(Flex28, {
                     mr: "3",
                     ml: "-7",
                     children: /* @__PURE__ */ jsx70(IconButton6, {
@@ -4190,15 +4192,15 @@ var ActionButton = function() {
 import { jsx as jsx71, jsxs as jsxs27 } from "react/jsx-runtime";
 var Form = function() {
     var audioThreadContext = useAudioThreadContext();
-    return /* @__PURE__ */ jsxs27(Flex28, {
+    return /* @__PURE__ */ jsxs27(Flex29, {
         direction: "column",
         align: "center",
         children: [
-            /* @__PURE__ */ jsxs27(Flex28, {
+            /* @__PURE__ */ jsxs27(Flex29, {
                 pb: "3",
                 align: "center",
                 children: [
-                    /* @__PURE__ */ jsx71(Flex28, {
+                    /* @__PURE__ */ jsx71(Flex29, {
                         ml: "-22.5px",
                         mr: "2",
                         align: "center",
@@ -4208,7 +4210,7 @@ var Form = function() {
                             }
                         })
                     }),
-                    /* @__PURE__ */ jsx71(Flex28, {
+                    /* @__PURE__ */ jsx71(Flex29, {
                         px: "2",
                         py: "1",
                         style: {
@@ -4263,7 +4265,7 @@ 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 Flex29 } from "@radix-ui/themes";
+import { Flex as Flex30 } from "@radix-ui/themes";
 // src/components/suggestions/Suggestions/Item.tsx
 import { ArrowUpIcon as ArrowUpIcon3 } from "@radix-ui/react-icons";
 import { Text as Text9, Button as Button4, Spinner as Spinner2 } from "@radix-ui/themes";
@@ -4327,7 +4329,7 @@ var Content6 = function(param) {
         children
     ]);
     if (isEmpty3(suggestions)) return null;
-    return /* @__PURE__ */ jsx75(Flex29, {
+    return /* @__PURE__ */ jsx75(Flex30, {
         gap: "2",
         py: "2",
         wrap: "wrap",