@superinterface/react 2.23.0 → 2.24.1

package/dist/index.js

@@ -414,9 +414,9 @@ var SuperinterfaceProvider = function(param) {
     });
 };
 // src/components/threads/Thread/Messages/index.tsx
-import { Flex as Flex15 } from "@radix-ui/themes";
+import { Flex as Flex17 } from "@radix-ui/themes";
 // src/components/threads/Thread/Messages/Content/index.tsx
-import { useEffect } from "react";
+import { useEffect as useEffect2 } from "react";
 // src/hooks/messages/useMessages/index.tsx
 import { useMemo } from "react";
 import { useInfiniteQuery, useQueryClient as useQueryClient2 } from "@tanstack/react-query";
@@ -787,9 +787,9 @@ var UserAvatar = function() {
     });
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
-import { Flex as Flex13 } from "@radix-ui/themes";
+import { Flex as Flex15 } from "@radix-ui/themes";
 // src/components/threads/Thread/Message/index.tsx
-import { useMemo as useMemo5, Fragment } from "react";
+import { useMemo as useMemo6, Fragment } from "react";
 import { isEmpty } from "radash";
 import { Box as Box10 } from "@radix-ui/themes";
 // src/components/skeletons/StartingContentSkeleton/index.tsx
@@ -1217,7 +1217,7 @@ import { useContext as useContext7 } from "react";
 // src/contexts/markdown/MarkdownContext/index.ts
 import { createContext as createContext9 } from "react";
 // src/contexts/markdown/MarkdownContext/lib/components/index.tsx
-import { Heading } from "@radix-ui/themes";
+import { Heading, Table } from "@radix-ui/themes";
 // src/contexts/markdown/MarkdownContext/lib/components/Paragraph.tsx
 import { Box as Box4, Text as Text4 } from "@radix-ui/themes";
 import { jsx as jsx26 } from "react/jsx-runtime";
@@ -1322,13 +1322,250 @@ var Code3 = function(param) {
         children: children
     });
 };
-// src/contexts/markdown/MarkdownContext/lib/components/Img.tsx
-import { Box as Box9 } from "@radix-ui/themes";
+// src/contexts/markdown/MarkdownContext/lib/components/Img/lib/isVideoSrc.ts
+import videoExtensions from "video-extensions";
+var isVideoSrc = function(param) {
+    var src = param.src;
+    return videoExtensions.includes(src.split(".").pop() || "");
+};
+// src/contexts/markdown/MarkdownContext/lib/components/Img/lib/isAudioSrc.ts
+var isAudioSrc = function(param) {
+    var src = param.src;
+    return src.endsWith(".mp3") || src.endsWith(".wav");
+};
+// src/contexts/markdown/MarkdownContext/lib/components/Img/Video/index.tsx
+import { Flex as Flex11 } from "@radix-ui/themes";
+import "@vidstack/react/player/styles/base.css";
+import { MediaPlayer, MediaProvider, Controls } from "@vidstack/react";
+// src/components/media/PlayButton.tsx
+import { PlayButton as VidstackPlayButton, useMediaState } from "@vidstack/react";
+import { IconButton } from "@radix-ui/themes";
+import { PlayIcon, PauseIcon } from "@radix-ui/react-icons";
 import { jsx as jsx34 } from "react/jsx-runtime";
-var Img = function(props) {
-    return /* @__PURE__ */ jsx34(Box9, {
+var PlayButton = function() {
+    var isPaused = useMediaState("paused");
+    return /* @__PURE__ */ jsx34(IconButton, {
+        variant: "ghost",
+        asChild: true,
+        children: /* @__PURE__ */ jsx34(VidstackPlayButton, {
+            children: isPaused ? /* @__PURE__ */ jsx34(PlayIcon, {}) : /* @__PURE__ */ jsx34(PauseIcon, {})
+        })
+    });
+};
+// src/components/media/VolumeButton.tsx
+import { MuteButton, useMediaState as useMediaState2, useMediaRemote } from "@vidstack/react";
+import { IconButton as IconButton2, HoverCard, Slider } from "@radix-ui/themes";
+import { SpeakerModerateIcon, SpeakerOffIcon } from "@radix-ui/react-icons";
+import { jsx as jsx35, jsxs as jsxs10 } from "react/jsx-runtime";
+var VolumeButton = function() {
+    var volume = useMediaState2("volume");
+    var isMuted = useMediaState2("muted");
+    var remote = useMediaRemote();
+    return /* @__PURE__ */ jsxs10(HoverCard.Root, {
+        children: [
+            /* @__PURE__ */ jsx35(HoverCard.Trigger, {
+                children: /* @__PURE__ */ jsx35(IconButton2, {
+                    variant: "ghost",
+                    asChild: true,
+                    children: /* @__PURE__ */ jsx35(MuteButton, {
+                        children: isMuted || volume === 0 ? /* @__PURE__ */ jsx35(SpeakerOffIcon, {}) : /* @__PURE__ */ jsx35(SpeakerModerateIcon, {})
+                    })
+                })
+            }),
+            /* @__PURE__ */ jsx35(HoverCard.Content, {
+                size: "1",
+                side: "top",
+                height: "100px",
+                children: /* @__PURE__ */ jsx35(Slider, {
+                    size: "1",
+                    variant: "soft",
+                    orientation: "vertical",
+                    value: [
+                        volume * 100
+                    ],
+                    onValueChange: function(param) {
+                        var _param = _sliced_to_array(param, 1), value = _param[0];
+                        return remote.changeVolume(value / 100);
+                    }
+                })
+            })
+        ]
+    });
+};
+// src/components/media/Time.tsx
+import { useState, useEffect, useMemo as useMemo5 } from "react";
+import { useMediaState as useMediaState3, useMediaRemote as useMediaRemote2 } from "@vidstack/react";
+import { Slider as Slider2 } from "@radix-ui/themes";
+import { jsx as jsx36 } from "react/jsx-runtime";
+var Time = function() {
+    var time = useMediaState3("currentTime");
+    var duration = useMediaState3("duration");
+    var seeking = useMediaState3("seeking");
+    var canSeek = useMediaState3("canSeek");
+    var remote = useMediaRemote2();
+    var _useState = _sliced_to_array(useState(0), 2), value = _useState[0], setValue = _useState[1];
+    useEffect(function() {
+        if (seeking) return;
+        setValue(time / duration * 100);
+    }, [
+        time,
+        duration,
+        seeking
+    ]);
+    var step = useMemo5(function() {
+        return 1 / duration * 100;
+    }, [
+        duration
+    ]);
+    return /* @__PURE__ */ jsx36(Slider2, {
+        size: "1",
+        variant: "soft",
+        value: [
+            value
+        ],
+        disabled: !canSeek,
+        step: Number.isFinite(step) ? step : 1,
+        onValueChange: function(param) {
+            var _param = _sliced_to_array(param, 1), value2 = _param[0];
+            setValue(value2);
+            remote.seeking(value2 / 100 * duration);
+        },
+        onValueCommit: function(param) {
+            var _param = _sliced_to_array(param, 1), value2 = _param[0];
+            remote.seek(value2 / 100 * duration);
+        }
+    });
+};
+// src/components/media/MediaContainer.tsx
+import { Card, Inset } from "@radix-ui/themes";
+import { jsx as jsx37 } from "react/jsx-runtime";
+var MediaContainer = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ jsx37(Card, {
+        mb: "3",
+        children: /* @__PURE__ */ jsx37(Inset, {
+            clip: "padding-box",
+            style: {
+                display: "flex",
+                flexDirection: "column"
+            },
+            children: children
+        })
+    });
+};
+// src/contexts/markdown/MarkdownContext/lib/components/Img/Video/FullscreenButton.tsx
+import { FullscreenButton as VidstackFullscreenButton, useMediaState as useMediaState4 } from "@vidstack/react";
+import { IconButton as IconButton3 } from "@radix-ui/themes";
+import { EnterFullScreenIcon, ExitFullScreenIcon } from "@radix-ui/react-icons";
+import { jsx as jsx38 } from "react/jsx-runtime";
+var FullscreenButton = function() {
+    var isFullscreen = useMediaState4("fullscreen");
+    return /* @__PURE__ */ jsx38(IconButton3, {
+        variant: "ghost",
+        asChild: true,
+        children: /* @__PURE__ */ jsx38(VidstackFullscreenButton, {
+            children: isFullscreen ? /* @__PURE__ */ jsx38(ExitFullScreenIcon, {}) : /* @__PURE__ */ jsx38(EnterFullScreenIcon, {})
+        })
+    });
+};
+// src/contexts/markdown/MarkdownContext/lib/components/Img/Video/index.tsx
+import { jsx as jsx39, jsxs as jsxs11 } from "react/jsx-runtime";
+var Video = function(param) {
+    var src = param.src;
+    return /* @__PURE__ */ jsx39(MediaContainer, {
+        children: /* @__PURE__ */ jsxs11(MediaPlayer, {
+            src: src,
+            playsInline: true,
+            hideControlsOnMouseLeave: true,
+            crossOrigin: true,
+            children: [
+                /* @__PURE__ */ jsx39(MediaProvider, {}),
+                /* @__PURE__ */ jsx39("style", {
+                    children: "\n          .superinterface-video-controls {\n            opacity: 0;\n            transition: opacity 0.2s ease-out;\n          }\n\n          .superinterface-video-controls[data-visible] {\n            opacity: 1;\n          }\n        "
+                }),
+                /* @__PURE__ */ jsx39(Flex11, {
+                    asChild: true,
+                    position: "absolute",
+                    bottom: "0",
+                    left: "0",
+                    right: "0",
+                    className: "superinterface-video-controls",
+                    p: "3",
+                    style: {
+                        zIndex: 10,
+                        background: "var(--accent-4)"
+                    },
+                    children: /* @__PURE__ */ jsx39(Controls.Root, {
+                        children: /* @__PURE__ */ jsx39(Flex11, {
+                            asChild: true,
+                            align: "center",
+                            gap: "3",
+                            flexGrow: "1",
+                            children: /* @__PURE__ */ jsxs11(Controls.Group, {
+                                children: [
+                                    /* @__PURE__ */ jsx39(PlayButton, {}),
+                                    /* @__PURE__ */ jsx39(Time, {}),
+                                    /* @__PURE__ */ jsx39(VolumeButton, {}),
+                                    /* @__PURE__ */ jsx39(FullscreenButton, {})
+                                ]
+                            })
+                        })
+                    })
+                })
+            ]
+        })
+    });
+};
+// src/contexts/markdown/MarkdownContext/lib/components/Img/Audio/index.tsx
+import { Flex as Flex12 } from "@radix-ui/themes";
+import "@vidstack/react/player/styles/base.css";
+import { MediaPlayer as MediaPlayer2, MediaProvider as MediaProvider2, Controls as Controls2 } from "@vidstack/react";
+import { jsx as jsx40, jsxs as jsxs12 } from "react/jsx-runtime";
+var Audio = function(param) {
+    var src = param.src;
+    return /* @__PURE__ */ jsx40(MediaContainer, {
+        children: /* @__PURE__ */ jsxs12(MediaPlayer2, {
+            src: src,
+            viewType: "audio",
+            crossOrigin: true,
+            playsInline: true,
+            children: [
+                /* @__PURE__ */ jsx40(MediaProvider2, {}),
+                /* @__PURE__ */ jsx40(Flex12, {
+                    asChild: true,
+                    p: "3",
+                    flexGrow: "1",
+                    style: {
+                        zIndex: 10,
+                        background: "var(--accent-4)"
+                    },
+                    children: /* @__PURE__ */ jsx40(Controls2.Root, {
+                        children: /* @__PURE__ */ jsx40(Flex12, {
+                            asChild: true,
+                            align: "center",
+                            gap: "3",
+                            flexGrow: "1",
+                            children: /* @__PURE__ */ jsxs12(Controls2.Group, {
+                                children: [
+                                    /* @__PURE__ */ jsx40(PlayButton, {}),
+                                    /* @__PURE__ */ jsx40(Time, {}),
+                                    /* @__PURE__ */ jsx40(VolumeButton, {})
+                                ]
+                            })
+                        })
+                    })
+                })
+            ]
+        })
+    });
+};
+// src/contexts/markdown/MarkdownContext/lib/components/Img/ImageComponent.tsx
+import { Box as Box9 } from "@radix-ui/themes";
+import { jsx as jsx41 } from "react/jsx-runtime";
+var ImageComponent = function(props) {
+    return /* @__PURE__ */ jsx41(Box9, {
         pb: "3",
-        children: /* @__PURE__ */ jsx34("img", _object_spread_props(_object_spread({}, props), {
+        children: /* @__PURE__ */ jsx41("img", _object_spread_props(_object_spread({}, props), {
             style: {
                 maxWidth: "100%",
                 height: "auto"
@@ -1336,28 +1573,49 @@ var Img = function(props) {
         }))
     });
 };
+// src/contexts/markdown/MarkdownContext/lib/components/Img/index.tsx
+import { jsx as jsx42 } from "react/jsx-runtime";
+var Img = function(props) {
+    if (!props.src) {
+        return /* @__PURE__ */ jsx42(ImageComponent, _object_spread({}, props));
+    } else if (isVideoSrc({
+        src: props.src
+    })) {
+        return /* @__PURE__ */ jsx42(Video, {
+            src: props.src
+        });
+    } else if (isAudioSrc({
+        src: props.src
+    })) {
+        return /* @__PURE__ */ jsx42(Audio, {
+            src: props.src
+        });
+    } else {
+        return /* @__PURE__ */ jsx42(ImageComponent, _object_spread({}, props));
+    }
+};
 // src/contexts/markdown/MarkdownContext/lib/components/Annotation/index.tsx
 import { QuoteIcon } from "@radix-ui/react-icons";
 // src/contexts/markdown/MarkdownContext/lib/components/Annotation/AnnotationBase.tsx
-import { IconButton, Popover as Popover4, Flex as Flex11, Text as Text5 } from "@radix-ui/themes";
-import { jsx as jsx35, jsxs as jsxs10 } from "react/jsx-runtime";
+import { IconButton as IconButton4, Popover as Popover4, Flex as Flex13, Text as Text5 } from "@radix-ui/themes";
+import { jsx as jsx43, jsxs as jsxs13 } from "react/jsx-runtime";
 var AnnotationBase = function(param) {
     var icon = param.icon, content = param.content;
-    return /* @__PURE__ */ jsxs10(Popover4.Root, {
+    return /* @__PURE__ */ jsxs13(Popover4.Root, {
         children: [
-            /* @__PURE__ */ jsx35(Popover4.Trigger, {
-                children: /* @__PURE__ */ jsx35(IconButton, {
+            /* @__PURE__ */ jsx43(Popover4.Trigger, {
+                children: /* @__PURE__ */ jsx43(IconButton4, {
                     variant: "soft",
                     color: "gray",
                     size: "1",
                     children: icon
                 })
             }),
-            /* @__PURE__ */ jsx35(Popover4.Content, {
+            /* @__PURE__ */ jsx43(Popover4.Content, {
                 size: "1",
-                children: /* @__PURE__ */ jsx35(Flex11, {
+                children: /* @__PURE__ */ jsx43(Flex13, {
                     direction: "column",
-                    children: /* @__PURE__ */ jsx35(Text5, {
+                    children: /* @__PURE__ */ jsx43(Text5, {
                         size: "1",
                         color: "gray",
                         children: content
@@ -1368,12 +1626,12 @@ var AnnotationBase = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Annotation/FilePathAnnotation.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var FilePathAnnotation = function(param) {
     var annotation = param.annotation, children = param.children;
     var superinterfaceContext = useSuperinterfaceContext();
     var nextSearchParams = new URLSearchParams(superinterfaceContext.variables);
-    return /* @__PURE__ */ jsx36(Link, {
+    return /* @__PURE__ */ jsx44(Link, {
         href: "".concat(superinterfaceContext.baseUrl, "/files/").concat(annotation.file_path.file_id, "/contents?").concat(nextSearchParams),
         target: "_self",
         download: true,
@@ -1381,16 +1639,16 @@ var FilePathAnnotation = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Annotation/index.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var Annotation = function(param) {
     var annotation = param.annotation, children = param.children;
     if (annotation.type === "file_citation") {
-        return /* @__PURE__ */ jsx37(AnnotationBase, {
-            icon: /* @__PURE__ */ jsx37(QuoteIcon, {}),
+        return /* @__PURE__ */ jsx45(AnnotationBase, {
+            icon: /* @__PURE__ */ jsx45(QuoteIcon, {}),
             content: "File cited."
         });
     } else if (annotation.type === "file_path") {
-        return /* @__PURE__ */ jsx37(FilePathAnnotation, {
+        return /* @__PURE__ */ jsx45(FilePathAnnotation, {
             annotation: annotation,
             children: children
         });
@@ -1398,7 +1656,7 @@ var Annotation = function(param) {
     return null;
 };
 // src/contexts/markdown/MarkdownContext/lib/components/index.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var components = {
     p: Paragraph,
     a: Link,
@@ -1411,47 +1669,60 @@ var components = {
     img: Img,
     annotation: Annotation,
     h1: function(props) {
-        return /* @__PURE__ */ jsx38(Heading, {
+        return /* @__PURE__ */ jsx46(Heading, {
             as: "h1",
             children: props.children
         });
     },
     h2: function(props) {
-        return /* @__PURE__ */ jsx38(Heading, {
+        return /* @__PURE__ */ jsx46(Heading, {
             as: "h2",
             size: "5",
             children: props.children
         });
     },
     h3: function(props) {
-        return /* @__PURE__ */ jsx38(Heading, {
+        return /* @__PURE__ */ jsx46(Heading, {
             as: "h3",
             size: "4",
             children: props.children
         });
     },
     h4: function(props) {
-        return /* @__PURE__ */ jsx38(Heading, {
+        return /* @__PURE__ */ jsx46(Heading, {
             as: "h4",
             size: "3",
             children: props.children
         });
     },
     h5: function(props) {
-        return /* @__PURE__ */ jsx38(Heading, {
+        return /* @__PURE__ */ jsx46(Heading, {
             as: "h5",
             size: "3",
             children: props.children
         });
     },
     h6: function(props) {
-        return /* @__PURE__ */ jsx38(Heading, {
+        return /* @__PURE__ */ jsx46(Heading, {
             as: "h6",
             size: "3",
             children: props.children
         });
-    }
+    },
+    table: function(props) {
+        return /* @__PURE__ */ jsx46(Table.Root, _object_spread_props(_object_spread({}, props), {
+            variant: "surface",
+            mb: "3"
+        }));
+    },
+    thead: Table.Header,
+    tbody: Table.Body,
+    tr: Table.Row,
+    td: Table.Cell,
+    th: Table.ColumnHeaderCell
 };
+// src/contexts/markdown/MarkdownContext/lib/getRemarkPlugins.ts
+import remarkGfm from "remark-gfm";
 // src/lib/remark/remarkAnnotation.ts
 import { isNumber } from "radash";
 import flatMap from "unist-util-flatmap";
@@ -1618,7 +1889,8 @@ var getRemarkPlugins = function(param) {
     return [
         remarkAnnotation({
             content: content
-        })
+        }),
+        remarkGfm
     ];
 };
 // src/contexts/markdown/MarkdownContext/index.ts
@@ -1631,13 +1903,13 @@ var useMarkdownContext = function() {
     return useContext7(MarkdownContext);
 };
 // src/components/threads/Thread/Message/TextContent.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var TextContent = function(param) {
     var content = param.content;
     var _useMarkdownContext = useMarkdownContext(), getRemarkPlugins2 = _useMarkdownContext.getRemarkPlugins, rest = _object_without_properties(_useMarkdownContext, [
         "getRemarkPlugins"
     ]);
-    return /* @__PURE__ */ jsx39(Markdown, _object_spread_props(_object_spread({}, rest), {
+    return /* @__PURE__ */ jsx47(Markdown, _object_spread_props(_object_spread({}, rest), {
         remarkPlugins: getRemarkPlugins2({
             content: content
         }),
@@ -1645,21 +1917,21 @@ var TextContent = function(param) {
     }));
 };
 // src/components/threads/Thread/Message/Attachments/index.tsx
-import { Flex as Flex12, Badge } from "@radix-ui/themes";
+import { Flex as Flex14, Badge } from "@radix-ui/themes";
 import { FileIcon } from "@radix-ui/react-icons";
-import { jsx as jsx40, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs14 } 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__ */ jsx40(Flex12, {
+    return /* @__PURE__ */ jsx48(Flex14, {
         align: "start",
         pb: "1",
-        children: /* @__PURE__ */ jsxs11(Badge, {
+        children: /* @__PURE__ */ jsxs14(Badge, {
             color: "gray",
             variant: "surface",
             children: [
-                /* @__PURE__ */ jsx40(FileIcon, {}),
+                /* @__PURE__ */ jsx48(FileIcon, {}),
                 message.attachments.length,
                 " file",
                 message.attachments.length > 1 ? "s" : ""
@@ -1668,10 +1940,10 @@ var Attachments = function(param) {
     });
 };
 // src/components/threads/Thread/Message/index.tsx
-import { jsx as jsx41, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs15 } from "react/jsx-runtime";
 var Message = function(param) {
     var message = param.message;
-    var _useMemo5 = _sliced_to_array(useMemo5(function() {
+    var _useMemo6 = _sliced_to_array(useMemo6(function() {
         if (!message.runSteps.length) return [
             [],
             []
@@ -1702,9 +1974,9 @@ var Message = function(param) {
         ];
     }, [
         message
-    ]), 2), olderRunSteps = _useMemo5[0], laterRunSteps = _useMemo5[1];
+    ]), 2), olderRunSteps = _useMemo6[0], laterRunSteps = _useMemo6[1];
     var isMutatingMessage = useIsMutatingMessage();
-    var isInProgress = useMemo5(function() {
+    var isInProgress = useMemo6(function() {
         if (!isMutatingMessage) return false;
         if (message.status === "in_progress") return true;
         return message.runSteps.some(function(rs) {
@@ -1713,68 +1985,68 @@ var Message = function(param) {
     }, [
         message
     ]);
-    return /* @__PURE__ */ jsx41(Provider, {
+    return /* @__PURE__ */ jsx49(Provider, {
         value: {
             message: message
         },
-        children: /* @__PURE__ */ jsxs12(Box10, {
+        children: /* @__PURE__ */ jsxs15(Box10, {
             children: [
-                /* @__PURE__ */ jsx41(RunSteps, {
+                /* @__PURE__ */ jsx49(RunSteps, {
                     runSteps: olderRunSteps
                 }),
-                /* @__PURE__ */ jsxs12(Box10, {
+                /* @__PURE__ */ jsxs15(Box10, {
                     children: [
-                        /* @__PURE__ */ jsx41(Attachments, {
+                        /* @__PURE__ */ jsx49(Attachments, {
                             message: message
                         }),
                         message.content.map(function(content, index) {
-                            return /* @__PURE__ */ jsx41(Fragment, {
-                                children: content.type === "text" && /* @__PURE__ */ jsx41(TextContent, {
+                            return /* @__PURE__ */ jsx49(Fragment, {
+                                children: content.type === "text" && /* @__PURE__ */ jsx49(TextContent, {
                                     content: content
                                 })
                             }, index);
                         }),
-                        isInProgress && isEmpty(laterRunSteps) && /* @__PURE__ */ jsx41(StartingContentSkeleton, {})
+                        isInProgress && isEmpty(laterRunSteps) && /* @__PURE__ */ jsx49(StartingContentSkeleton, {})
                     ]
                 }),
-                /* @__PURE__ */ jsx41(RunSteps, {
+                /* @__PURE__ */ jsx49(RunSteps, {
                     runSteps: laterRunSteps
                 }),
-                isInProgress && !isEmpty(laterRunSteps) && /* @__PURE__ */ jsx41(Box10, {
-                    children: /* @__PURE__ */ jsx41(StartingContentSkeleton, {})
+                isInProgress && !isEmpty(laterRunSteps) && /* @__PURE__ */ jsx49(Box10, {
+                    children: /* @__PURE__ */ jsx49(StartingContentSkeleton, {})
                 })
             ]
         })
     });
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var Content3 = function(param) {
     var messageGroup = param.messageGroup;
-    return /* @__PURE__ */ jsx42(Flex13, {
+    return /* @__PURE__ */ jsx50(Flex15, {
         direction: "column-reverse",
         children: messageGroup.messages.map(function(message) {
-            return /* @__PURE__ */ jsx42(Message, {
+            return /* @__PURE__ */ jsx50(Message, {
                 message: message
             }, message.id);
         })
     });
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
-import { jsx as jsx43, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs16 } from "react/jsx-runtime";
 var MessageGroup = function(param) {
     var messageGroup = param.messageGroup;
     var assistantNameContext = useContext8(AssistantNameContext);
-    return /* @__PURE__ */ jsxs13(MessageGroupBase, {
+    return /* @__PURE__ */ jsxs16(MessageGroupBase, {
         children: [
-            messageGroup.role === "user" ? /* @__PURE__ */ jsx43(UserAvatar, {}) : /* @__PURE__ */ jsx43(AssistantAvatar, {}),
-            /* @__PURE__ */ jsxs13(Box11, {
+            messageGroup.role === "user" ? /* @__PURE__ */ jsx51(UserAvatar, {}) : /* @__PURE__ */ jsx51(AssistantAvatar, {}),
+            /* @__PURE__ */ jsxs16(Box11, {
                 flexGrow: "1",
                 children: [
-                    /* @__PURE__ */ jsx43(Name, {
+                    /* @__PURE__ */ jsx51(Name, {
                         children: messageGroup.role === "user" ? "You" : assistantNameContext
                     }),
-                    /* @__PURE__ */ jsx43(Content3, {
+                    /* @__PURE__ */ jsx51(Content3, {
                         messageGroup: messageGroup
                     })
                 ]
@@ -1783,14 +2055,14 @@ var MessageGroup = function(param) {
     });
 };
 // src/components/threads/Thread/Messages/Content/index.tsx
-import { Fragment as Fragment2, jsx as jsx44 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx52 } from "react/jsx-runtime";
 var Content4 = function() {
     var _useMessages = useMessages(), messages2 = _useMessages.messages, isLoading = _useMessages.isLoading, isLoadingError = _useMessages.isLoadingError;
     var addToast = useToasts().addToast;
     var _useMessageGroups = useMessageGroups({
         messages: messages2
     }), messageGroups2 = _useMessageGroups.messageGroups;
-    useEffect(function() {
+    useEffect2(function() {
         if (isLoadingError) {
             addToast({
                 type: "error",
@@ -1802,45 +2074,45 @@ var Content4 = function() {
         addToast
     ]);
     if (isLoading || isLoadingError) {
-        return /* @__PURE__ */ jsx44(MessagesSkeleton, {});
+        return /* @__PURE__ */ jsx52(MessagesSkeleton, {});
     }
-    return /* @__PURE__ */ jsx44(Fragment2, {
+    return /* @__PURE__ */ jsx52(Fragment2, {
         children: messageGroups2.map(function(messageGroup) {
-            return /* @__PURE__ */ jsx44(MessageGroup, {
+            return /* @__PURE__ */ jsx52(MessageGroup, {
                 messageGroup: messageGroup
             }, messageGroup.id);
         })
     });
 };
 // src/components/threads/Thread/Messages/Progress/index.tsx
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo8 } from "react";
 // src/components/skeletons/StartingSkeleton/index.tsx
 import { useContext as useContext9 } from "react";
 import { Box as Box12 } from "@radix-ui/themes";
-import { jsx as jsx45, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs17 } from "react/jsx-runtime";
 var StartingSkeleton = function(param) {
     var children = param.children;
     var assistantNameContext = useContext9(AssistantNameContext);
-    return /* @__PURE__ */ jsxs14(MessageGroupBase, {
+    return /* @__PURE__ */ jsxs17(MessageGroupBase, {
         children: [
-            /* @__PURE__ */ jsx45(AssistantAvatar, {}),
-            /* @__PURE__ */ jsxs14(Box12, {
+            /* @__PURE__ */ jsx53(AssistantAvatar, {}),
+            /* @__PURE__ */ jsxs17(Box12, {
                 children: [
-                    /* @__PURE__ */ jsx45(Name, {
+                    /* @__PURE__ */ jsx53(Name, {
                         children: assistantNameContext
                     }),
                     children,
-                    /* @__PURE__ */ jsx45(StartingContentSkeleton, {})
+                    /* @__PURE__ */ jsx53(StartingContentSkeleton, {})
                 ]
             })
         ]
     });
 };
 // src/hooks/messages/useLatestMessage/index.ts
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo7 } from "react";
 var useLatestMessage = function() {
     var props = useMessages();
-    return useMemo6(function() {
+    return useMemo7(function() {
         return _object_spread_props(_object_spread({}, props), {
             latestMessage: props.messages[0] || null
         });
@@ -1855,11 +2127,11 @@ var isOptimistic = function(param) {
     return _4.startsWith(id, "-");
 };
 // src/components/threads/Thread/Messages/Progress/index.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var Progress = function() {
     var latestMessage = useLatestMessage().latestMessage;
     var isMutatingMessage = useIsMutatingMessage();
-    var isVisible = useMemo7(function() {
+    var isVisible = useMemo8(function() {
         if (!latestMessage) return false;
         if (latestMessage.role !== "user") return false;
         if (latestMessage.status === "in_progress") return false;
@@ -1873,16 +2145,16 @@ var Progress = function() {
         isMutatingMessage
     ]);
     if (!isVisible) return null;
-    return /* @__PURE__ */ jsx46(StartingSkeleton, {});
+    return /* @__PURE__ */ jsx54(StartingSkeleton, {});
 };
 // src/components/threads/Thread/Messages/Root/index.tsx
-import { Flex as Flex14 } from "@radix-ui/themes";
+import { Flex as Flex16 } from "@radix-ui/themes";
 // src/hooks/misc/useInfiniteScroll/index.tsx
 import { useRef as useRef3 } from "react";
 import { useInView } from "react-intersection-observer";
 // src/hooks/misc/useThrottledEffect/index.tsx
 import _5 from "lodash";
-import { useRef as useRef2, useEffect as useEffect2, useCallback } from "react";
+import { useRef as useRef2, useEffect as useEffect3, useCallback } from "react";
 var useThrottledEffect = function(cb, delay, additionalDeps) {
     var _cbRef;
     var cbRef = useRef2(cb);
@@ -1897,10 +2169,10 @@ var useThrottledEffect = function(cb, delay, additionalDeps) {
     }), [
         delay
     ]);
-    useEffect2(function() {
+    useEffect3(function() {
         cbRef.current = cb;
     });
-    useEffect2(throttledCb, [
+    useEffect3(throttledCb, [
         throttledCb
     ].concat(_to_consumable_array(additionalDeps)));
 };
@@ -1931,7 +2203,7 @@ var useInfiniteScroll = function(param) {
     };
 };
 // src/components/threads/Thread/Messages/Root/index.tsx
-import { jsx as jsx47, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs18 } 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;
@@ -1940,7 +2212,7 @@ var Root2 = function(param) {
         hasNextPage: hasNextPage,
         fetchNextPage: fetchNextPage
     }), containerRef = _useInfiniteScroll.containerRef, loaderRef = _useInfiniteScroll.loaderRef;
-    return /* @__PURE__ */ jsxs15(Flex14, {
+    return /* @__PURE__ */ jsxs18(Flex16, {
         ref: containerRef,
         direction: "column-reverse",
         flexGrow: "1",
@@ -1949,10 +2221,10 @@ var Root2 = function(param) {
         }),
         children: [
             children,
-            hasNextPage && /* @__PURE__ */ jsx47(Flex14, {
+            hasNextPage && /* @__PURE__ */ jsx55(Flex16, {
                 ref: loaderRef
             }),
-            /* @__PURE__ */ jsx47(Flex14, {
+            /* @__PURE__ */ jsx55(Flex16, {
                 flexShrink: "0",
                 flexGrow: "1"
             })
@@ -1960,30 +2232,30 @@ var Root2 = function(param) {
     });
 };
 // src/components/threads/Thread/Messages/NextPageSkeleton.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var NextPageSkeleton = function() {
     var hasNextPage = useMessages().hasNextPage;
     if (!hasNextPage) {
         return null;
     }
-    return /* @__PURE__ */ jsx48(MessagesSkeleton, {});
+    return /* @__PURE__ */ jsx56(MessagesSkeleton, {});
 };
 // src/components/threads/Thread/Messages/index.tsx
-import { jsx as jsx49, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs19 } 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__ */ jsxs16(Root2, {
+    return /* @__PURE__ */ jsxs19(Root2, {
         style: style,
         children: [
-            /* @__PURE__ */ jsx49(Flex15, {
+            /* @__PURE__ */ jsx57(Flex17, {
                 flexShrink: "0",
                 height: "var(--space-3)"
             }),
-            /* @__PURE__ */ jsx49(Progress, {}),
+            /* @__PURE__ */ jsx57(Progress, {}),
             children,
-            /* @__PURE__ */ jsx49(Content4, {}),
-            /* @__PURE__ */ jsx49(NextPageSkeleton, {}),
-            /* @__PURE__ */ jsx49(Flex15, {
+            /* @__PURE__ */ jsx57(Content4, {}),
+            /* @__PURE__ */ jsx57(NextPageSkeleton, {}),
+            /* @__PURE__ */ jsx57(Flex17, {
                 flexShrink: "0",
                 flexGrow: "1",
                 minHeight: "var(--space-5)"
@@ -1996,7 +2268,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 as IconButton2, Flex as Flex16 } from "@radix-ui/themes";
+import { IconButton as IconButton5, Flex as Flex18 } from "@radix-ui/themes";
 // src/hooks/messages/useMessageFormContext/index.ts
 import { useContext as useContext10 } from "react";
 // src/contexts/messages/MessageFormContext/index.ts
@@ -2014,10 +2286,10 @@ var useMessageFormContext = function() {
     return useContext10(MessageFormContext);
 };
 // src/components/threads/Thread/MessageForm/Submit/index.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var Root3 = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx50(Flex16, {
+    return /* @__PURE__ */ jsx58(Flex18, {
         flexShrink: "0",
         align: "end",
         children: children
@@ -2027,31 +2299,31 @@ var Button2 = function() {
     var superinterfaceContext = useSuperinterfaceContext();
     var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading, isFileLoading = _useMessageFormContext.isFileLoading;
     if (isLoading) {
-        return /* @__PURE__ */ jsx50(IconButton2, {
+        return /* @__PURE__ */ jsx58(IconButton5, {
             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__ */ jsx50(StopIcon, {})
+            children: /* @__PURE__ */ jsx58(StopIcon, {})
         });
     }
-    return /* @__PURE__ */ jsx50(IconButton2, {
+    return /* @__PURE__ */ jsx58(IconButton5, {
         type: "submit",
         disabled: isDisabled || isFileLoading,
-        children: /* @__PURE__ */ jsx50(ArrowUpIcon, {})
+        children: /* @__PURE__ */ jsx58(ArrowUpIcon, {})
     });
 };
 var Submit = function() {
-    return /* @__PURE__ */ jsx50(Root3, {
-        children: /* @__PURE__ */ jsx50(Button2, {})
+    return /* @__PURE__ */ jsx58(Root3, {
+        children: /* @__PURE__ */ jsx58(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, useState } from "react";
+import { useMemo as useMemo9, useState as useState2 } from "react";
 import { useForm, FormProvider } from "react-hook-form";
 import { Box as Box13 } from "@radix-ui/themes";
 // src/hooks/messages/useCreateMessage/index.ts
@@ -2821,10 +3093,10 @@ var createMessageDefaultOnError = function(param) {
     };
 };
 // src/components/threads/Thread/MessageForm/Root/index.tsx
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var Root4 = function(param) {
     var children = param.children, onSubmitArg = param.onSubmit, isDisabledArg = param.isDisabled;
-    var _useState = _sliced_to_array(useState([]), 2), files = _useState[0], setFiles = _useState[1];
+    var _useState2 = _sliced_to_array(useState2([]), 2), files = _useState2[0], setFiles = _useState2[1];
     var formProps = useForm(formOptions);
     var handleSubmit = formProps.handleSubmit, isSubmitting = formProps.formState.isSubmitting, reset = formProps.reset, watch = formProps.watch;
     var addToast = useToasts().addToast;
@@ -2838,7 +3110,7 @@ var Root4 = function(param) {
         })
     }).createMessage;
     var isMutatingMessage = useIsMutatingMessage();
-    var isFileLoading = useMemo8(function() {
+    var isFileLoading = useMemo9(function() {
         return files.some(function(file) {
             return isOptimistic({
                 id: file.id
@@ -2847,14 +3119,14 @@ var Root4 = function(param) {
     }, [
         files
     ]);
-    var isLoading = useMemo8(function() {
+    var isLoading = useMemo9(function() {
         return isMutatingMessage || isSubmitting;
     }, [
         isMutatingMessage,
         isSubmitting
     ]);
     var latestMessage = useLatestMessage().latestMessage;
-    var isDisabled = useMemo8(function() {
+    var isDisabled = useMemo9(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) || isDisabledArg;
@@ -2914,7 +3186,7 @@ var Root4 = function(param) {
         };
     }();
     var content = watch("content");
-    return /* @__PURE__ */ jsx51(MessageFormContext.Provider, {
+    return /* @__PURE__ */ jsx59(MessageFormContext.Provider, {
         value: {
             isDisabled: isDisabled,
             isLoading: isLoading,
@@ -2923,11 +3195,11 @@ var Root4 = function(param) {
             isFileLoading: isFileLoading,
             content: content
         },
-        children: /* @__PURE__ */ jsx51(FormProvider, _object_spread_props(_object_spread({}, formProps), {
-            children: /* @__PURE__ */ jsx51(Box13, {
+        children: /* @__PURE__ */ jsx59(FormProvider, _object_spread_props(_object_spread({}, formProps), {
+            children: /* @__PURE__ */ jsx59(Box13, {
                 asChild: true,
                 flexShrink: "0",
-                children: /* @__PURE__ */ jsx51("form", {
+                children: /* @__PURE__ */ jsx59("form", {
                     onSubmit: handleSubmit(onSubmit),
                     children: children
                 })
@@ -2937,32 +3209,32 @@ 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 Flex20 } from "@radix-ui/themes";
+import { Container as RadixContainer, Flex as Flex22 } from "@radix-ui/themes";
 // src/components/threads/Thread/MessageForm/Field/Control.tsx
-import { Flex as Flex17 } from "@radix-ui/themes";
+import { Flex as Flex19 } from "@radix-ui/themes";
 import { useFormContext } from "react-hook-form";
 // src/hooks/misc/usePrevious.ts
-import { useEffect as useEffect3, useRef as useRef4 } from "react";
+import { useEffect as useEffect4, useRef as useRef4 } from "react";
 var usePrevious = function(state) {
     var ref = useRef4();
-    useEffect3(function() {
+    useEffect4(function() {
         ref.current = state;
     });
     return ref.current;
 };
 // src/components/threads/Thread/MessageForm/Field/Control.tsx
-import { useContext as useContext11, useMemo as useMemo9, useRef as useRef5, useEffect as useEffect4 } from "react";
+import { useContext as useContext11, useMemo as useMemo10, useRef as useRef5, useEffect as useEffect5 } 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 jsx52, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx60, jsxs as jsxs20 } from "react/jsx-runtime";
 var TextareaBase = forwardRef3(function TextareaBase2(props, ref) {
-    return /* @__PURE__ */ jsxs17(Fragment3, {
+    return /* @__PURE__ */ jsxs20(Fragment3, {
         children: [
-            /* @__PURE__ */ jsx52("style", {
+            /* @__PURE__ */ jsx60("style", {
                 children: ".superinterface-textarea { min-height: inherit; height: 30px; }\n.superinterface-textarea::placeholder { color: var(--gray-a10); }"
             }),
-            /* @__PURE__ */ jsx52(TextareaAutosize, _object_spread({
+            /* @__PURE__ */ jsx60(TextareaAutosize, _object_spread({
                 ref: ref,
                 className: "rt-reset superinterface-textarea",
                 style: {
@@ -2979,10 +3251,10 @@ var TextareaBase = forwardRef3(function TextareaBase2(props, ref) {
     });
 });
 // src/components/threads/Thread/MessageForm/Field/Control.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var Root5 = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx53(Flex17, {
+    return /* @__PURE__ */ jsx61(Flex19, {
         flexGrow: "1",
         pt: "4px",
         children: children
@@ -2992,7 +3264,7 @@ var Input = function() {
     var assistantNameContext = useContext11(AssistantNameContext);
     var register = useFormContext().register;
     var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading;
-    var isSubmitDisabled = useMemo9(function() {
+    var isSubmitDisabled = useMemo10(function() {
         return isDisabled || isLoading;
     }, [
         isDisabled,
@@ -3001,7 +3273,7 @@ var Input = function() {
     var isDisabledPrevious = usePrevious(isDisabled);
     var textareaRef = useRef5(null);
     var textareaProps = register("content");
-    useEffect4(function() {
+    useEffect5(function() {
         if (isDisabled) return;
         if (!isDisabledPrevious) return;
         if (!textareaRef.current) return;
@@ -3011,7 +3283,7 @@ var Input = function() {
         isDisabledPrevious,
         textareaProps
     ]);
-    return /* @__PURE__ */ jsx53(TextareaBase, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ jsx61(TextareaBase, _object_spread_props(_object_spread({
         minRows: 1,
         placeholder: "Message ".concat(assistantNameContext, "..."),
         disabled: isDisabled,
@@ -3031,51 +3303,51 @@ var Input = function() {
     }));
 };
 var Control = function() {
-    return /* @__PURE__ */ jsx53(Root5, {
-        children: /* @__PURE__ */ jsx53(Input, {})
+    return /* @__PURE__ */ jsx61(Root5, {
+        children: /* @__PURE__ */ jsx61(Input, {})
     });
 };
 Control.Root = Root5;
 Control.Input = Input;
 // src/components/threads/Thread/MessageForm/Field/Files/Preview.tsx
-import { Flex as Flex18, Card, Spinner, Text as Text6, IconButton as IconButton3 } from "@radix-ui/themes";
+import { Flex as Flex20, Card as Card2, Spinner, Text as Text6, IconButton as IconButton6 } from "@radix-ui/themes";
 import { FileIcon as FileIcon2, Cross2Icon } from "@radix-ui/react-icons";
-import { jsx as jsx54, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs21 } from "react/jsx-runtime";
 var Preview = function() {
     var _useMessageFormContext = useMessageFormContext(), files = _useMessageFormContext.files, setFiles = _useMessageFormContext.setFiles;
     if (!files.length) {
         return null;
     }
-    return /* @__PURE__ */ jsx54(Flex18, {
+    return /* @__PURE__ */ jsx62(Flex20, {
         flexBasis: "100%",
         direction: "column",
         pb: "2",
         gap: "1",
         children: files.map(function(file) {
-            return /* @__PURE__ */ jsx54(Card, {
+            return /* @__PURE__ */ jsx62(Card2, {
                 variant: "ghost",
-                children: /* @__PURE__ */ jsxs18(Flex18, {
+                children: /* @__PURE__ */ jsxs21(Flex20, {
                     align: "center",
                     justify: "between",
                     gap: "1",
                     children: [
-                        /* @__PURE__ */ jsxs18(Flex18, {
+                        /* @__PURE__ */ jsxs21(Flex20, {
                             align: "center",
                             gap: "1",
                             flexShrink: "1",
                             minWidth: "0",
                             maxWidth: "250px",
                             children: [
-                                /* @__PURE__ */ jsx54(Flex18, {
+                                /* @__PURE__ */ jsx62(Flex20, {
                                     flexShrink: "0",
-                                    children: /* @__PURE__ */ jsx54(Spinner, {
+                                    children: /* @__PURE__ */ jsx62(Spinner, {
                                         loading: isOptimistic({
                                             id: file.id
                                         }),
-                                        children: /* @__PURE__ */ jsx54(FileIcon2, {})
+                                        children: /* @__PURE__ */ jsx62(FileIcon2, {})
                                     })
                                 }),
-                                /* @__PURE__ */ jsx54(Text6, {
+                                /* @__PURE__ */ jsx62(Text6, {
                                     size: "2",
                                     truncate: true,
                                     wrap: "nowrap",
@@ -3083,9 +3355,9 @@ var Preview = function() {
                                 })
                             ]
                         }),
-                        /* @__PURE__ */ jsx54(Flex18, {
+                        /* @__PURE__ */ jsx62(Flex20, {
                             flexShrink: "0",
-                            children: /* @__PURE__ */ jsx54(IconButton3, {
+                            children: /* @__PURE__ */ jsx62(IconButton6, {
                                 onClick: function() {
                                     return setFiles(function(prev) {
                                         return prev.filter(function(prevFile) {
@@ -3096,7 +3368,7 @@ var Preview = function() {
                                 color: "gray",
                                 variant: "ghost",
                                 size: "1",
-                                children: /* @__PURE__ */ jsx54(Cross2Icon, {})
+                                children: /* @__PURE__ */ jsx62(Cross2Icon, {})
                             })
                         })
                     ]
@@ -3110,7 +3382,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 IconButton4, Flex as Flex19 } from "@radix-ui/themes";
+import { IconButton as IconButton7, Flex as Flex21 } 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
@@ -3221,7 +3493,7 @@ var useCreateFile = function() {
     });
 };
 // src/components/threads/Thread/MessageForm/Field/Files/Control.tsx
-import { jsx as jsx55, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs22 } 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;
@@ -3395,11 +3667,11 @@ var Control2 = function() {
         createFile,
         setFiles
     ]);
-    return /* @__PURE__ */ jsx55(Flex19, {
+    return /* @__PURE__ */ jsx63(Flex21, {
         pt: "2",
         pr: "2",
         flexGrow: "0",
-        children: /* @__PURE__ */ jsxs19(IconButton4, {
+        children: /* @__PURE__ */ jsxs22(IconButton7, {
             type: "button",
             variant: "ghost",
             color: "gray",
@@ -3409,8 +3681,8 @@ var Control2 = function() {
                 overflow: "hidden"
             },
             children: [
-                /* @__PURE__ */ jsx55(FilePlusIcon, {}),
-                /* @__PURE__ */ jsx55("input", {
+                /* @__PURE__ */ jsx63(FilePlusIcon, {}),
+                /* @__PURE__ */ jsx63("input", {
                     type: "file",
                     multiple: true,
                     accept: accept,
@@ -3435,20 +3707,20 @@ var Files = {
     Control: Control2
 };
 // src/components/threads/Thread/MessageForm/Field/index.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 var Root6 = function(param) {
     var children = param.children;
     var _useFormContext2 = useFormContext2(), errors = _useFormContext2.formState.errors;
-    return /* @__PURE__ */ jsx56(RadixContainer, {
+    return /* @__PURE__ */ jsx64(RadixContainer, {
         size: "2",
         flexGrow: "0",
-        children: /* @__PURE__ */ jsx56(Flex20, {
+        children: /* @__PURE__ */ jsx64(Flex22, {
             direction: "column",
             flexShrink: "0",
-            children: /* @__PURE__ */ jsx56(Flex20, {
+            children: /* @__PURE__ */ jsx64(Flex22, {
                 direction: "column",
                 flexShrink: "0",
-                children: /* @__PURE__ */ jsx56(Flex20, {
+                children: /* @__PURE__ */ jsx64(Flex22, {
                     style: _object_spread({
                         borderRadius: "var(--radius-2)",
                         borderWidth: "1px",
@@ -3472,13 +3744,13 @@ var Field = {
     Files: Files
 };
 // src/components/threads/Thread/MessageForm/index.tsx
-import { jsx as jsx57, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs23 } from "react/jsx-runtime";
 var MessageForm = function() {
-    return /* @__PURE__ */ jsx57(Root4, {
-        children: /* @__PURE__ */ jsxs20(Field.Root, {
+    return /* @__PURE__ */ jsx65(Root4, {
+        children: /* @__PURE__ */ jsxs23(Field.Root, {
             children: [
-                /* @__PURE__ */ jsx57(Field.Control, {}),
-                /* @__PURE__ */ jsx57(Submit, {})
+                /* @__PURE__ */ jsx65(Field.Control, {}),
+                /* @__PURE__ */ jsx65(Submit, {})
             ]
         })
     });
@@ -3487,35 +3759,35 @@ MessageForm.Root = Root4;
 MessageForm.Field = Field;
 MessageForm.Submit = Submit;
 // src/components/threads/Thread/Root/index.tsx
-import { Flex as Flex22 } from "@radix-ui/themes";
+import { Flex as Flex24 } from "@radix-ui/themes";
 // src/components/threads/Thread/Provider/index.tsx
 var Provider2 = SuperinterfaceProvider;
 // src/components/toasts/ToastsProvider/index.tsx
-import { useState as useState2, useCallback as useCallback3 } 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 as Card2, Text as Text7, Flex as Flex21 } from "@radix-ui/themes";
+import { Card as Card3, Text as Text7, Flex as Flex23 } from "@radix-ui/themes";
 import { CheckCircledIcon as CheckCircledIcon2, CrossCircledIcon } from "@radix-ui/react-icons";
-import { jsx as jsx58, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs24 } from "react/jsx-runtime";
 var CustomToast = function(param) {
     var toast = param.toast;
-    return /* @__PURE__ */ jsx58(Toast.Root, {
-        children: /* @__PURE__ */ jsx58(Card2, {
-            children: /* @__PURE__ */ jsx58(Toast.Title, {
-                children: /* @__PURE__ */ jsxs21(Flex21, {
+    return /* @__PURE__ */ jsx66(Toast.Root, {
+        children: /* @__PURE__ */ jsx66(Card3, {
+            children: /* @__PURE__ */ jsx66(Toast.Title, {
+                children: /* @__PURE__ */ jsxs24(Flex23, {
                     children: [
-                        /* @__PURE__ */ jsx58(Flex21, {
+                        /* @__PURE__ */ jsx66(Flex23, {
                             pr: "2",
                             height: "14px",
                             align: "center",
-                            children: toast.type === "success" ? /* @__PURE__ */ jsx58(CheckCircledIcon2, {
+                            children: toast.type === "success" ? /* @__PURE__ */ jsx66(CheckCircledIcon2, {
                                 color: "var(--accent-9)"
-                            }) : /* @__PURE__ */ jsx58(CrossCircledIcon, {
+                            }) : /* @__PURE__ */ jsx66(CrossCircledIcon, {
                                 color: "var(--red-9)"
                             })
                         }),
-                        /* @__PURE__ */ jsx58(Text7, {
+                        /* @__PURE__ */ jsx66(Text7, {
                             weight: "medium",
                             size: "1",
                             children: toast.message
@@ -3527,10 +3799,10 @@ var CustomToast = function(param) {
     });
 };
 // src/components/toasts/ToastsProvider/index.tsx
-import { jsx as jsx59, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs25 } from "react/jsx-runtime";
 var ToastsProvider = function(param) {
     var children = param.children, _param_bottom = param.bottom, bottom = _param_bottom === void 0 ? 0 : _param_bottom;
-    var _useState2 = _sliced_to_array(useState2([]), 2), toasts = _useState2[0], setToasts = _useState2[1];
+    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([
@@ -3538,20 +3810,20 @@ var ToastsProvider = function(param) {
             ]);
         });
     }, []);
-    return /* @__PURE__ */ jsx59(ToastsContext.Provider, {
+    return /* @__PURE__ */ jsx67(ToastsContext.Provider, {
         value: {
             toasts: toasts,
             addToast: addToast
         },
-        children: /* @__PURE__ */ jsxs22(Toast2.Provider, {
+        children: /* @__PURE__ */ jsxs25(Toast2.Provider, {
             children: [
                 children,
                 Array.from(toasts).map(function(toast, index) {
-                    return /* @__PURE__ */ jsx59(CustomToast, {
+                    return /* @__PURE__ */ jsx67(CustomToast, {
                         toast: toast
                     }, index);
                 }),
-                /* @__PURE__ */ jsx59(Toast2.Viewport, {
+                /* @__PURE__ */ jsx67(Toast2.Viewport, {
                     style: {
                         position: "absolute",
                         bottom: bottom,
@@ -3573,15 +3845,15 @@ var ToastsProvider = function(param) {
     });
 };
 // src/components/threads/Thread/Root/index.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 var Root8 = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
     ]);
-    return /* @__PURE__ */ jsx60(ToastsProvider, {
+    return /* @__PURE__ */ jsx68(ToastsProvider, {
         bottom: "var(--space-9)",
-        children: /* @__PURE__ */ jsx60(Provider2, _object_spread_props(_object_spread({}, rest), {
-            children: /* @__PURE__ */ jsx60(Flex22, {
+        children: /* @__PURE__ */ jsx68(Provider2, _object_spread_props(_object_spread({}, rest), {
+            children: /* @__PURE__ */ jsx68(Flex24, {
                 direction: "column",
                 flexGrow: "1",
                 children: children
@@ -3590,12 +3862,12 @@ var Root8 = function(_param) {
     });
 };
 // src/components/threads/Thread/index.tsx
-import { jsx as jsx61, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs26 } from "react/jsx-runtime";
 var Thread = function(props) {
-    return /* @__PURE__ */ jsxs23(Root8, _object_spread_props(_object_spread({}, props), {
+    return /* @__PURE__ */ jsxs26(Root8, _object_spread_props(_object_spread({}, props), {
         children: [
-            /* @__PURE__ */ jsx61(Messages, {}),
-            /* @__PURE__ */ jsx61(MessageForm, {})
+            /* @__PURE__ */ jsx69(Messages, {}),
+            /* @__PURE__ */ jsx69(MessageForm, {})
         ]
     }));
 };
@@ -3608,7 +3880,7 @@ var useMessageContext = function() {
     return useContext12(MessageContext);
 };
 // src/hooks/assistants/useAssistant/index.ts
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo11 } from "react";
 import { useQuery } from "@tanstack/react-query";
 // src/hooks/assistants/useAssistant/lib/queryOptions/index.ts
 import { queryOptions as tanstackQueryOptions } from "@tanstack/react-query";
@@ -3697,7 +3969,7 @@ var useAssistant = function(param) {
         assistantId: assistantId,
         superinterfaceContext: superinterfaceContext
     }));
-    return useMemo10(function() {
+    return useMemo11(function() {
         return _object_spread_props(_object_spread({}, props), {
             assistant: props.data ? props.data.assistant : null
         });
@@ -3706,7 +3978,7 @@ var useAssistant = function(param) {
     ]);
 };
 // src/components/threads/ThreadDialog/Provider/index.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 // src/contexts/threads/ThreadDialogContext/index.ts
 import { createContext as createContext11 } from "react";
 var ThreadDialogContext = createContext11({
@@ -3719,12 +3991,12 @@ var useThreadDialogContext = function() {
     return useContext13(ThreadDialogContext);
 };
 // src/components/threads/ThreadDialog/Provider/index.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var Provider4 = function(param) {
     var children = param.children;
     var threadDialogContext = useThreadDialogContext();
-    var _useState3 = _sliced_to_array(useState3(threadDialogContext.isOpen), 2), isOpen = _useState3[0], setIsOpen = _useState3[1];
-    return /* @__PURE__ */ jsx62(ThreadDialogContext.Provider, {
+    var _useState4 = _sliced_to_array(useState4(threadDialogContext.isOpen), 2), isOpen = _useState4[0], setIsOpen = _useState4[1];
+    return /* @__PURE__ */ jsx70(ThreadDialogContext.Provider, {
         value: {
             isOpen: isOpen,
             setIsOpen: setIsOpen
@@ -3733,32 +4005,32 @@ var Provider4 = function(param) {
     });
 };
 // src/components/threads/ThreadDialog/Root/index.tsx
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx71 } from "react/jsx-runtime";
 var Root9 = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx63(Provider4, {
+    return /* @__PURE__ */ jsx71(Provider4, {
         children: children
     });
 };
 // src/components/threads/ThreadDialog/Trigger/index.tsx
-import { Flex as Flex23 } from "@radix-ui/themes";
+import { Flex as Flex25 } from "@radix-ui/themes";
 // src/components/threads/ThreadDialog/Trigger/Button.tsx
-import { IconButton as IconButton5 } from "@radix-ui/themes";
+import { IconButton as IconButton8 } from "@radix-ui/themes";
 import { ChatBubbleIcon } from "@radix-ui/react-icons";
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
 var Button3 = function() {
-    return /* @__PURE__ */ jsx64(IconButton5, {
+    return /* @__PURE__ */ jsx72(IconButton8, {
         size: "4",
         radius: "full",
-        children: /* @__PURE__ */ jsx64(ChatBubbleIcon, {})
+        children: /* @__PURE__ */ jsx72(ChatBubbleIcon, {})
     });
 };
 // src/components/threads/ThreadDialog/Trigger/index.tsx
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx73 } 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__ */ jsx65(Flex23, {
+    return /* @__PURE__ */ jsx73(Flex25, {
         display: {
             initial: isOpen ? "none" : "flex",
             sm: "flex"
@@ -3782,21 +4054,21 @@ var Root10 = function(param) {
     });
 };
 var Trigger = function(args) {
-    return /* @__PURE__ */ jsx65(Root10, _object_spread_props(_object_spread({}, args), {
-        children: /* @__PURE__ */ jsx65(Button3, {})
+    return /* @__PURE__ */ jsx73(Root10, _object_spread_props(_object_spread({}, args), {
+        children: /* @__PURE__ */ jsx73(Button3, {})
     }));
 };
 Trigger.Root = Root10;
 Trigger.Button = Button3;
 // src/components/threads/ThreadDialog/Content/index.tsx
-import { Card as Card3, Inset, Flex as Flex25 } from "@radix-ui/themes";
+import { Card as Card4, Inset as Inset2, Flex as Flex27 } from "@radix-ui/themes";
 // src/components/threads/ThreadDialog/Close/index.tsx
 import { Cross1Icon } from "@radix-ui/react-icons";
-import { IconButton as IconButton6, Flex as Flex24 } from "@radix-ui/themes";
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { IconButton as IconButton9, Flex as Flex26 } from "@radix-ui/themes";
+import { jsx as jsx74 } from "react/jsx-runtime";
 var Close = function() {
     var _useThreadDialogContext = useThreadDialogContext(), setIsOpen = _useThreadDialogContext.setIsOpen, isOpen = _useThreadDialogContext.isOpen;
-    return /* @__PURE__ */ jsx66(Flex24, {
+    return /* @__PURE__ */ jsx74(Flex26, {
         display: {
             initial: isOpen ? "flex" : "none",
             sm: "none"
@@ -3816,20 +4088,20 @@ var Close = function() {
         style: {
             zIndex: 9999999999
         },
-        children: /* @__PURE__ */ jsx66(IconButton6, {
+        children: /* @__PURE__ */ jsx74(IconButton9, {
             size: "2",
             variant: "soft",
-            children: /* @__PURE__ */ jsx66(Cross1Icon, {})
+            children: /* @__PURE__ */ jsx74(Cross1Icon, {})
         })
     });
 };
 // src/components/threads/ThreadDialog/Content/index.tsx
-import { jsx as jsx67, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs27 } 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__ */ jsx67(Flex25, {
+    return /* @__PURE__ */ jsx75(Flex27, {
         direction: "column",
         justify: "end",
         position: "fixed",
@@ -3857,7 +4129,7 @@ var Root11 = function(param) {
         style: _object_spread({
             zIndex: 9999999999
         }, style),
-        children: /* @__PURE__ */ jsxs24(Card3, {
+        children: /* @__PURE__ */ jsxs27(Card4, {
             mb: {
                 initial: void 0,
                 sm: "3"
@@ -3868,7 +4140,7 @@ var Root11 = function(param) {
                 flexGrow: 1
             },
             children: [
-                /* @__PURE__ */ jsx67(Inset, {
+                /* @__PURE__ */ jsx75(Inset2, {
                     clip: "padding-box",
                     side: "all",
                     pb: "current",
@@ -3878,13 +4150,13 @@ var Root11 = function(param) {
                     },
                     children: children
                 }),
-                /* @__PURE__ */ jsx67(Close, {})
+                /* @__PURE__ */ jsx75(Close, {})
             ]
         })
     });
 };
 var Messages2 = function() {
-    return /* @__PURE__ */ jsx67(Thread.Messages, {
+    return /* @__PURE__ */ jsx75(Thread.Messages, {
         style: {
             paddingTop: "var(--space-5)",
             paddingRight: "var(--space-5)",
@@ -3894,7 +4166,7 @@ var Messages2 = function() {
 };
 var FormContainer = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx67(Flex25, {
+    return /* @__PURE__ */ jsx75(Flex27, {
         direction: "column",
         pl: "5",
         pr: "5",
@@ -3905,13 +4177,13 @@ var FormContainer = function(param) {
 };
 var Content5 = function(param) {
     var _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
-    return /* @__PURE__ */ jsx67(Root11, {
+    return /* @__PURE__ */ jsx75(Root11, {
         style: style,
-        children: /* @__PURE__ */ jsxs24(Thread.Root, {
+        children: /* @__PURE__ */ jsxs27(Thread.Root, {
             children: [
-                /* @__PURE__ */ jsx67(Messages2, {}),
-                /* @__PURE__ */ jsx67(FormContainer, {
-                    children: /* @__PURE__ */ jsx67(Thread.MessageForm, {})
+                /* @__PURE__ */ jsx75(Messages2, {}),
+                /* @__PURE__ */ jsx75(FormContainer, {
+                    children: /* @__PURE__ */ jsx75(Thread.MessageForm, {})
                 })
             ]
         })
@@ -3921,12 +4193,12 @@ Content5.Root = Root11;
 Content5.Messages = Messages2;
 Content5.FormContainer = FormContainer;
 // src/components/threads/ThreadDialog/index.tsx
-import { jsx as jsx68, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs28 } from "react/jsx-runtime";
 var ThreadDialog = function() {
-    return /* @__PURE__ */ jsxs25(Root9, {
+    return /* @__PURE__ */ jsxs28(Root9, {
         children: [
-            /* @__PURE__ */ jsx68(Content5, {}),
-            /* @__PURE__ */ jsx68(Trigger, {})
+            /* @__PURE__ */ jsx76(Content5, {}),
+            /* @__PURE__ */ jsx76(Trigger, {})
         ]
     });
 };
@@ -3934,7 +4206,7 @@ ThreadDialog.Root = Root9;
 ThreadDialog.Trigger = Trigger;
 ThreadDialog.Content = Content5;
 // src/components/threads/AudioThread/Root/index.tsx
-import { Flex as Flex26 } from "@radix-ui/themes";
+import { Flex as Flex28 } from "@radix-ui/themes";
 // src/contexts/threads/AudioThreadContext/index.ts
 import { createContext as createContext12 } from "react";
 var AudioThreadContext = createContext12({
@@ -3993,7 +4265,7 @@ var AudioThreadContext = createContext12({
     }
 });
 // src/hooks/misc/usePermission/index.ts
-import { useEffect as useEffect5, useState as useState4 } from "react";
+import { useEffect as useEffect6, useState as useState5 } from "react";
 // src/hooks/misc/usePermission/util.ts
 var noop = function() {};
 function on(obj) {
@@ -4016,8 +4288,8 @@ function off(obj) {
 }
 // src/hooks/misc/usePermission/index.ts
 var usePermission = function(permissionDesc) {
-    var _useState4 = _sliced_to_array(useState4(""), 2), state = _useState4[0], setState = _useState4[1];
-    useEffect5(function() {
+    var _useState5 = _sliced_to_array(useState5(""), 2), state = _useState5[0], setState = _useState5[1];
+    useEffect6(function() {
         var mounted = true;
         var permissionStatus = null;
         var onChange = function() {
@@ -4055,11 +4327,11 @@ var blobToData = function(blob) {
     });
 };
 // src/hooks/audioThreads/useStatus/index.ts
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo12 } from "react";
 var useStatus = function(param) {
     var messageAudioProps = param.messageAudioProps, recorderProps = param.recorderProps, createMessageProps = param.createMessageProps;
     var latestMessageProps = useLatestMessage();
-    var status = useMemo11(function() {
+    var status = useMemo12(function() {
         var _latestMessageProps_latestMessage;
         if (recorderProps.status === "recording") return "recording";
         if (createMessageProps.isPending) return "creatingMessage";
@@ -4083,16 +4355,16 @@ var useStatus = function(param) {
 // src/hooks/audioThreads/useRecorder/index.ts
 import dayjs3 from "dayjs";
 import { useAudioCapture } from "use-audio-capture";
-import { useMemo as useMemo12, useRef as useRef7, useState as useState5, useCallback as useCallback4, useEffect as useEffect7 } from "react";
+import { useMemo as useMemo13, useRef as useRef7, useState as useState6, useCallback as useCallback4, useEffect as useEffect8 } from "react";
 import { useAudioPlayer } from "react-use-audio-player";
 // src/hooks/misc/useInterval.ts
-import { useEffect as useEffect6, useRef as useRef6 } from "react";
+import { useEffect as useEffect7, useRef as useRef6 } from "react";
 var useInterval = function(callback, delay) {
     var savedCallback = useRef6(function() {});
-    useEffect6(function() {
+    useEffect7(function() {
         savedCallback.current = callback;
     });
-    useEffect6(function() {
+    useEffect7(function() {
         if (delay !== null) {
             var interval = setInterval(function() {
                 return savedCallback.current();
@@ -4109,14 +4381,14 @@ var useInterval = function(callback, delay) {
 // src/hooks/audioThreads/useRecorder/index.ts
 var useRecorder = function(param) {
     var isStopOnSilence = param.isStopOnSilence, onStart = param.onStart, onStop = param.onStop;
-    var _useState5 = _sliced_to_array(useState5(null), 2), silenceStart = _useState5[0], setSilenceStart = _useState5[1];
-    var _useState51 = _sliced_to_array(useState5(null), 2), noiseStart = _useState51[0], setNoiseStart = _useState51[1];
-    var _useState52 = _sliced_to_array(useState5(null), 2), mediaStream = _useState52[0], setMediaStream = _useState52[1];
-    var _useState53 = _sliced_to_array(useState5("idle"), 2), status = _useState53[0], setStatus = _useState53[1];
+    var _useState6 = _sliced_to_array(useState6(null), 2), silenceStart = _useState6[0], setSilenceStart = _useState6[1];
+    var _useState61 = _sliced_to_array(useState6(null), 2), noiseStart = _useState61[0], setNoiseStart = _useState61[1];
+    var _useState62 = _sliced_to_array(useState6(null), 2), mediaStream = _useState62[0], setMediaStream = _useState62[1];
+    var _useState63 = _sliced_to_array(useState6("idle"), 2), status = _useState63[0], setStatus = _useState63[1];
     var startAudioPlayer = useAudioPlayer();
     var endAudioPlayer = useAudioPlayer();
-    var _useState54 = _sliced_to_array(useState5(false), 2), isLoaded = _useState54[0], setIsLoaded = _useState54[1];
-    useEffect7(function() {
+    var _useState64 = _sliced_to_array(useState6(false), 2), isLoaded = _useState64[0], setIsLoaded = _useState64[1];
+    useEffect8(function() {
         if (isLoaded) return;
         setIsLoaded(true);
     }, [
@@ -4174,9 +4446,9 @@ var useRecorder = function(param) {
             setNoiseStart(null);
         }
     });
-    var _useState55 = _sliced_to_array(useState5(null), 2), audioEngine = _useState55[0], setAudioEngine = _useState55[1];
+    var _useState65 = _sliced_to_array(useState6(null), 2), audioEngine = _useState65[0], setAudioEngine = _useState65[1];
     var isInited = useRef7(false);
-    useEffect7(function() {
+    useEffect8(function() {
         if (!mediaStream) return;
         if (isInited.current) return;
         isInited.current = true;
@@ -4189,7 +4461,7 @@ var useRecorder = function(param) {
         isInited,
         mediaStream
     ]);
-    var visualizationAnalyser = useMemo12(function() {
+    var visualizationAnalyser = useMemo13(function() {
         if (!audioEngine) return null;
         var result = audioEngine.audioContext.createAnalyser();
         audioEngine.source.connect(result);
@@ -4197,7 +4469,7 @@ var useRecorder = function(param) {
     }, [
         audioEngine
     ]);
-    var silenceAnalyser = useMemo12(function() {
+    var silenceAnalyser = useMemo13(function() {
         if (!audioEngine) return null;
         var result = audioEngine.audioContext.createAnalyser();
         result.minDecibels = -60;
@@ -4229,7 +4501,7 @@ var useRecorder = function(param) {
         setNoiseStart,
         setSilenceStart
     ]);
-    useEffect7(function() {
+    useEffect8(function() {
         if (!isStopOnSilence) return;
         requestAnimationFrame(function() {
             return handleSilence();
@@ -4252,7 +4524,7 @@ var useRecorder = function(param) {
     });
 };
 // src/hooks/audioThreads/useMessageAudio/index.ts
-import { useMemo as useMemo13, useRef as useRef8, useState as useState6, useEffect as useEffect8 } from "react";
+import { useMemo as useMemo14, useRef as useRef8, useState as useState7, useEffect as useEffect9 } from "react";
 import nlp from "compromise";
 import { Howler } from "howler";
 import { useAudioPlayer as useAudioPlayer2 } from "react-use-audio-player";
@@ -4290,15 +4562,15 @@ var getMessageSentences = function(param) {
 };
 var useMessageAudio = function(param) {
     var onEnd = param.onEnd;
-    var _useState6 = _sliced_to_array(useState6(false), 2), isAudioPlayed = _useState6[0], setIsAudioPlayed = _useState6[1];
-    var _useState61 = _sliced_to_array(useState6([]), 2), stoppedMessageIds = _useState61[0], setStoppedMessageIds = _useState61[1];
-    var _useState62 = _sliced_to_array(useState6([]), 2), playedMessageSentences = _useState62[0], setPlayedMessageSentences = _useState62[1];
+    var _useState7 = _sliced_to_array(useState7(false), 2), isAudioPlayed = _useState7[0], setIsAudioPlayed = _useState7[1];
+    var _useState71 = _sliced_to_array(useState7([]), 2), stoppedMessageIds = _useState71[0], setStoppedMessageIds = _useState71[1];
+    var _useState72 = _sliced_to_array(useState7([]), 2), playedMessageSentences = _useState72[0], setPlayedMessageSentences = _useState72[1];
     var audioPlayer = useAudioPlayer2();
     var nextAudioPlayer = useAudioPlayer2();
     var superinterfaceContext = useSuperinterfaceContext();
-    var _useState63 = _sliced_to_array(useState6(false), 2), isPlaying = _useState63[0], setIsPlaying = _useState63[1];
+    var _useState73 = _sliced_to_array(useState7(false), 2), isPlaying = _useState73[0], setIsPlaying = _useState73[1];
     var latestMessageProps = useLatestMessage();
-    var unplayedMessageSentences = useMemo13(function() {
+    var unplayedMessageSentences = useMemo14(function() {
         if (!latestMessageProps.latestMessage) return [];
         if (latestMessageProps.latestMessage.role !== "assistant") return [];
         if (stoppedMessageIds.includes(latestMessageProps.latestMessage.id)) return [];
@@ -4319,7 +4591,7 @@ var useMessageAudio = function(param) {
         latestMessageProps,
         playedMessageSentences
     ]);
-    useEffect8(function() {
+    useEffect9(function() {
         if (isPlaying) return;
         if (audioPlayer.playing) return;
         if (!latestMessageProps.latestMessage) return;
@@ -4387,7 +4659,7 @@ var useMessageAudio = function(param) {
         playedMessageSentences,
         onEnd
     ]);
-    useEffect8(function() {
+    useEffect9(function() {
         if (isHtmlAudioSupported) {
             var _Howler__howls___sounds_, _Howler__howls_;
             if (!(Howler === null || Howler === void 0 ? void 0 : (_Howler__howls_ = Howler._howls[0]) === null || _Howler__howls_ === void 0 ? void 0 : (_Howler__howls___sounds_ = _Howler__howls_._sounds[0]) === null || _Howler__howls___sounds_ === void 0 ? void 0 : _Howler__howls___sounds_._node)) return;
@@ -4396,9 +4668,9 @@ var useMessageAudio = function(param) {
     }, [
         audioPlayer
     ]);
-    var _useState64 = _sliced_to_array(useState6(null), 2), audioEngine = _useState64[0], setAudioEngine = _useState64[1];
+    var _useState74 = _sliced_to_array(useState7(null), 2), audioEngine = _useState74[0], setAudioEngine = _useState74[1];
     var isAudioEngineInited = useRef8(false);
-    useEffect8(function() {
+    useEffect9(function() {
         if (!audioPlayer.playing) return;
         if (isAudioEngineInited.current) return;
         isAudioEngineInited.current = true;
@@ -4419,7 +4691,7 @@ var useMessageAudio = function(param) {
         audioPlayer,
         isAudioEngineInited
     ]);
-    var visualizationAnalyser = useMemo13(function() {
+    var visualizationAnalyser = useMemo14(function() {
         if (!audioEngine) return null;
         var result = audioEngine.audioContext.createAnalyser();
         audioEngine.source.connect(audioEngine.audioContext.destination);
@@ -4428,7 +4700,7 @@ var useMessageAudio = function(param) {
     }, [
         audioEngine
     ]);
-    var isPending = useMemo13(function() {
+    var isPending = useMemo14(function() {
         return isPlaying || unplayedMessageSentences.length > 0;
     }, [
         isPlaying,
@@ -4443,7 +4715,7 @@ var useMessageAudio = function(param) {
 };
 // src/components/threads/AudioThread/Root/index.tsx
 import { useQueryClient as useQueryClient6 } from "@tanstack/react-query";
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx77 } from "react/jsx-runtime";
 var Content6 = function(param) {
     var children = param.children;
     var addToast = useToasts().addToast;
@@ -4513,13 +4785,13 @@ var Content6 = function(param) {
         createMessageProps: createMessageProps,
         messageAudioProps: messageAudioProps
     }).status;
-    return /* @__PURE__ */ jsx69(AudioThreadContext.Provider, {
+    return /* @__PURE__ */ jsx77(AudioThreadContext.Provider, {
         value: {
             status: status,
             recorderProps: recorderProps,
             messageAudioProps: messageAudioProps
         },
-        children: /* @__PURE__ */ jsx69(Flex26, {
+        children: /* @__PURE__ */ jsx77(Flex28, {
             direction: "column",
             flexGrow: "1",
             p: "9",
@@ -4529,16 +4801,16 @@ var Content6 = function(param) {
 };
 var Root12 = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx69(ToastsProvider, {
-        children: /* @__PURE__ */ jsx69(Content6, {
+    return /* @__PURE__ */ jsx77(ToastsProvider, {
+        children: /* @__PURE__ */ jsx77(Content6, {
             children: children
         })
     });
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
-import { useContext as useContext15, useState as useState8, useCallback as useCallback6, useEffect as useEffect10 } from "react";
+import { useContext as useContext15, useState as useState9, useCallback as useCallback6, useEffect as useEffect11 } from "react";
 import _9 from "lodash";
-import { Flex as Flex28 } from "@radix-ui/themes";
+import { Flex as Flex30 } from "@radix-ui/themes";
 // src/hooks/threads/useAudioThreadContext/index.ts
 import { useContext as useContext14 } from "react";
 var useAudioThreadContext = function() {
@@ -4546,14 +4818,14 @@ var useAudioThreadContext = function() {
 };
 // src/components/threads/AudioThread/BarsVisualizer/index.tsx
 import _8 from "lodash";
-import { Flex as Flex27, Grid } from "@radix-ui/themes";
-import { useState as useState7, useEffect as useEffect9, useCallback as useCallback5 } from "react";
+import { Flex as Flex29, Grid } from "@radix-ui/themes";
+import { useState as useState8, useEffect as useEffect10, useCallback as useCallback5 } from "react";
 import { cluster } from "radash";
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx78 } 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 _useState7 = _sliced_to_array(useState7([]), 2), barHeights = _useState7[0], setBarHeights = _useState7[1];
+    var _useState8 = _sliced_to_array(useState8([]), 2), barHeights = _useState8[0], setBarHeights = _useState8[1];
     var draw = useCallback5(function(param) {
         var visualizationAnalyser2 = param.visualizationAnalyser;
         if (!visualizationAnalyser2) {
@@ -4572,7 +4844,7 @@ var BarsVisualizer = function(param) {
             });
         });
     }, []);
-    useEffect9(function() {
+    useEffect10(function() {
         draw({
             visualizationAnalyser: visualizationAnalyser
         });
@@ -4580,7 +4852,7 @@ var BarsVisualizer = function(param) {
         draw,
         visualizationAnalyser
     ]);
-    return /* @__PURE__ */ jsx70(Grid, {
+    return /* @__PURE__ */ jsx78(Grid, {
         columns: "".concat(barCount),
         gap: "1",
         width: "auto",
@@ -4589,12 +4861,12 @@ var BarsVisualizer = function(param) {
             gridTemplateColumns: "repeat(4, minmax(0, 1fr))"
         },
         children: barHeights.map(function(barHeight, index) {
-            return /* @__PURE__ */ jsx70(Flex27, {
+            return /* @__PURE__ */ jsx78(Flex29, {
                 direction: "column",
                 align: "center",
                 justify: "center",
                 height: height,
-                children: /* @__PURE__ */ jsx70(Flex27, {
+                children: /* @__PURE__ */ jsx78(Flex29, {
                     minHeight: "50%",
                     maxHeight: "100%",
                     height: "".concat(barHeight + 20, "%"),
@@ -4609,11 +4881,11 @@ var BarsVisualizer = function(param) {
     });
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
-import { jsx as jsx71, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs29 } from "react/jsx-runtime";
 var Visualization = function() {
     var audioThreadContext = useAudioThreadContext();
     var assistantNameContext = useContext15(AssistantNameContext);
-    var _useState8 = _sliced_to_array(useState8(0), 2), scale = _useState8[0], setScale = _useState8[1];
+    var _useState9 = _sliced_to_array(useState9(0), 2), scale = _useState9[0], setScale = _useState9[1];
     var draw = useCallback6(function(param) {
         var visualizationAnalyser = param.visualizationAnalyser;
         if (!visualizationAnalyser) {
@@ -4629,7 +4901,7 @@ var Visualization = function() {
             });
         });
     }, []);
-    useEffect10(function() {
+    useEffect11(function() {
         draw({
             visualizationAnalyser: audioThreadContext.recorderProps.visualizationAnalyser
         });
@@ -4637,14 +4909,14 @@ var Visualization = function() {
         draw,
         audioThreadContext
     ]);
-    return /* @__PURE__ */ jsxs26(Flex28, {
+    return /* @__PURE__ */ jsxs29(Flex30, {
         direction: "column",
         align: "center",
         justify: "center",
         mb: "3",
         flexGrow: "1",
         children: [
-            /* @__PURE__ */ jsx71(Flex28, {
+            /* @__PURE__ */ jsx79(Flex30, {
                 align: "center",
                 justify: "center",
                 height: "200px",
@@ -4654,20 +4926,20 @@ var Visualization = function() {
                     borderRadius: "9999px",
                     scale: scale
                 },
-                children: /* @__PURE__ */ jsx71(BarsVisualizer, {
+                children: /* @__PURE__ */ jsx79(BarsVisualizer, {
                     visualizationAnalyser: audioThreadContext.messageAudioProps.visualizationAnalyser,
                     backgroundColor: audioThreadContext.status === "playing" ? "var(--accent-11)" : "var(--gray-11)",
                     height: "40px",
                     barWidth: "24px"
                 })
             }),
-            /* @__PURE__ */ jsxs26(Flex28, {
+            /* @__PURE__ */ jsxs29(Flex30, {
                 ml: "-22.5px",
                 gap: "3",
                 pt: "5",
                 children: [
-                    /* @__PURE__ */ jsx71(AssistantAvatar, {}),
-                    /* @__PURE__ */ jsx71(Name, {
+                    /* @__PURE__ */ jsx79(AssistantAvatar, {}),
+                    /* @__PURE__ */ jsx79(Name, {
                         children: assistantNameContext
                     })
                 ]
@@ -4676,8 +4948,8 @@ var Visualization = function() {
     });
 };
 // src/components/threads/AudioThread/Status/StatusMessages.tsx
-import { Flex as Flex29, Text as Text8 } from "@radix-ui/themes";
-import { jsx as jsx72, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Flex as Flex31, Text as Text8 } from "@radix-ui/themes";
+import { jsx as jsx80, jsxs as jsxs30 } 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) {
@@ -4686,17 +4958,17 @@ var html = function(param) {
 };
 var StatusMessages = function(param) {
     var texts = param.texts;
-    return /* @__PURE__ */ jsxs27(Flex29, {
+    return /* @__PURE__ */ jsxs30(Flex31, {
         justify: "center",
         pb: "5",
         children: [
-            /* @__PURE__ */ jsx72(Text8, {
+            /* @__PURE__ */ jsx80(Text8, {
                 size: "2",
                 weight: "regular",
                 color: "gray",
                 className: "status-messages-texts"
             }),
-            /* @__PURE__ */ jsx72("style", {
+            /* @__PURE__ */ jsx80("style", {
                 dangerouslySetInnerHTML: {
                     __html: html({
                         texts: texts
@@ -4707,11 +4979,11 @@ var StatusMessages = function(param) {
     });
 };
 // src/components/threads/AudioThread/Status/index.tsx
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var Status = function() {
     var audioThreadContext = useAudioThreadContext();
     if (audioThreadContext.status === "recording") {
-        return /* @__PURE__ */ jsx73(StatusMessages, {
+        return /* @__PURE__ */ jsx81(StatusMessages, {
             texts: [
                 "Start speaking",
                 "Listening",
@@ -4725,31 +4997,31 @@ var Status = function() {
         "idle",
         "playerPaused"
     ].includes(audioThreadContext.status)) {
-        return /* @__PURE__ */ jsx73(StatusMessages, {
+        return /* @__PURE__ */ jsx81(StatusMessages, {
             texts: [
                 "Click the button below to activate"
             ]
         });
     }
     if (audioThreadContext.status === "playing") {
-        return /* @__PURE__ */ jsx73(StatusMessages, {
+        return /* @__PURE__ */ jsx81(StatusMessages, {
             texts: [
                 "Click the button below to interrupt"
             ]
         });
     }
-    return /* @__PURE__ */ jsx73(StatusMessages, {
+    return /* @__PURE__ */ jsx81(StatusMessages, {
         texts: [
             "Thinking"
         ]
     });
 };
 // src/components/threads/AudioThread/Form/index.tsx
-import { Flex as Flex31 } from "@radix-ui/themes";
+import { Flex as Flex33 } from "@radix-ui/themes";
 // src/components/threads/AudioThread/Form/MicIcon.tsx
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { jsx as jsx82 } from "react/jsx-runtime";
 var MicIcon = function(props) {
-    return /* @__PURE__ */ jsx74("svg", _object_spread_props(_object_spread({
+    return /* @__PURE__ */ jsx82("svg", _object_spread_props(_object_spread({
         xmlns: "http://www.w3.org/2000/svg",
         fill: "currentColor",
         stroke: "currentColor",
@@ -4758,54 +5030,54 @@ var MicIcon = function(props) {
         height: "15",
         width: "15"
     }, props), {
-        children: /* @__PURE__ */ jsx74("path", {
+        children: /* @__PURE__ */ jsx82("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 Flex30, IconButton as IconButton7 } from "@radix-ui/themes";
-import { StopIcon as StopIcon2, PauseIcon, ArrowUpIcon as ArrowUpIcon2, ResumeIcon } from "@radix-ui/react-icons";
-import { jsx as jsx75, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Flex as Flex32, IconButton as IconButton10 } from "@radix-ui/themes";
+import { StopIcon as StopIcon2, PauseIcon as PauseIcon2, ArrowUpIcon as ArrowUpIcon2, ResumeIcon } from "@radix-ui/react-icons";
+import { jsx as jsx83, jsxs as jsxs31 } from "react/jsx-runtime";
 var ActionButton = function() {
     var audioThreadContext = useAudioThreadContext();
     var superinterfaceContext = useSuperinterfaceContext();
     if (audioThreadContext.status === "recording") {
-        return /* @__PURE__ */ jsxs28(Flex30, {
+        return /* @__PURE__ */ jsxs31(Flex32, {
             align: "center",
             children: [
-                /* @__PURE__ */ jsx75(Flex30, {
+                /* @__PURE__ */ jsx83(Flex32, {
                     mr: "3",
                     ml: "-7",
-                    children: /* @__PURE__ */ jsx75(IconButton7, {
+                    children: /* @__PURE__ */ jsx83(IconButton10, {
                         onClick: audioThreadContext.recorderProps.pause,
                         color: "gray",
                         variant: "soft",
                         size: "1",
-                        children: /* @__PURE__ */ jsx75(PauseIcon, {})
+                        children: /* @__PURE__ */ jsx83(PauseIcon2, {})
                     })
                 }),
-                /* @__PURE__ */ jsx75(IconButton7, {
+                /* @__PURE__ */ jsx83(IconButton10, {
                     onClick: audioThreadContext.recorderProps.stop,
                     highContrast: true,
                     variant: "soft",
                     size: "4",
-                    children: /* @__PURE__ */ jsx75(ArrowUpIcon2, {})
+                    children: /* @__PURE__ */ jsx83(ArrowUpIcon2, {})
                 })
             ]
         });
     }
     if (audioThreadContext.status === "recorderPaused") {
-        return /* @__PURE__ */ jsx75(IconButton7, {
+        return /* @__PURE__ */ jsx83(IconButton10, {
             onClick: audioThreadContext.recorderProps.resume,
             color: "red",
             size: "4",
-            children: /* @__PURE__ */ jsx75(ResumeIcon, {})
+            children: /* @__PURE__ */ jsx83(ResumeIcon, {})
         });
     }
     if (audioThreadContext.status === "idle") {
-        return /* @__PURE__ */ jsx75(IconButton7, {
+        return /* @__PURE__ */ jsx83(IconButton10, {
             onClick: function() {
                 return audioThreadContext.recorderProps.start();
             },
@@ -4814,7 +5086,7 @@ var ActionButton = function() {
         });
     }
     if (audioThreadContext.status === "playing") {
-        return /* @__PURE__ */ jsx75(IconButton7, {
+        return /* @__PURE__ */ jsx83(IconButton10, {
             onClick: function() {
                 var _superinterfaceContext_createMessageAbortControllerRef_current;
                 audioThreadContext.messageAudioProps.stop();
@@ -4824,54 +5096,54 @@ var ActionButton = function() {
             size: "4",
             color: "gray",
             variant: "soft",
-            children: /* @__PURE__ */ jsx75(StopIcon2, {})
+            children: /* @__PURE__ */ jsx83(StopIcon2, {})
         });
     }
     if (audioThreadContext.status === "playerPaused") {
-        return /* @__PURE__ */ jsx75(IconButton7, {
+        return /* @__PURE__ */ jsx83(IconButton10, {
             onClick: function() {
                 return audioThreadContext.messageAudioProps.play();
             },
             size: "4",
-            children: /* @__PURE__ */ jsx75(ResumeIcon, {})
+            children: /* @__PURE__ */ jsx83(ResumeIcon, {})
         });
     }
-    return /* @__PURE__ */ jsx75(IconButton7, {
+    return /* @__PURE__ */ jsx83(IconButton10, {
         size: "4",
         variant: "soft",
         disabled: true
     });
 };
 // src/components/threads/AudioThread/Form/index.tsx
-import { jsx as jsx76, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs32 } from "react/jsx-runtime";
 var Form = function() {
     var audioThreadContext = useAudioThreadContext();
-    return /* @__PURE__ */ jsxs29(Flex31, {
+    return /* @__PURE__ */ jsxs32(Flex33, {
         direction: "column",
         align: "center",
         children: [
-            /* @__PURE__ */ jsxs29(Flex31, {
+            /* @__PURE__ */ jsxs32(Flex33, {
                 pb: "3",
                 align: "center",
                 children: [
-                    /* @__PURE__ */ jsx76(Flex31, {
+                    /* @__PURE__ */ jsx84(Flex33, {
                         ml: "-22.5px",
                         mr: "2",
                         align: "center",
-                        children: /* @__PURE__ */ jsx76(MicIcon, {
+                        children: /* @__PURE__ */ jsx84(MicIcon, {
                             style: {
                                 color: audioThreadContext.status === "recording" ? "var(--accent-11)" : "var(--gray-11)"
                             }
                         })
                     }),
-                    /* @__PURE__ */ jsx76(Flex31, {
+                    /* @__PURE__ */ jsx84(Flex33, {
                         px: "2",
                         py: "1",
                         style: {
                             backgroundColor: audioThreadContext.status === "recording" ? "var(--accent-4)" : "var(--gray-4)",
                             borderRadius: "var(--radius-6)"
                         },
-                        children: /* @__PURE__ */ jsx76(BarsVisualizer, {
+                        children: /* @__PURE__ */ jsx84(BarsVisualizer, {
                             visualizationAnalyser: audioThreadContext.recorderProps.visualizationAnalyser,
                             backgroundColor: audioThreadContext.status === "recording" ? "var(--accent-11)" : "var(--gray-11)",
                             height: "20px",
@@ -4880,33 +5152,34 @@ var Form = function() {
                     })
                 ]
             }),
-            /* @__PURE__ */ jsx76(ActionButton, {})
+            /* @__PURE__ */ jsx84(ActionButton, {})
         ]
     });
 };
 // src/components/threads/AudioThread/index.tsx
-import { jsx as jsx77, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs33 } from "react/jsx-runtime";
 var AudioThread = function(props) {
-    return /* @__PURE__ */ jsxs30(Root12, _object_spread_props(_object_spread({}, props), {
+    return /* @__PURE__ */ jsxs33(Root12, _object_spread_props(_object_spread({}, props), {
         children: [
-            /* @__PURE__ */ jsx77(Visualization, {}),
-            /* @__PURE__ */ jsx77(Status, {}),
-            /* @__PURE__ */ jsx77(Form, {})
+            /* @__PURE__ */ jsx85(Visualization, {}),
+            /* @__PURE__ */ jsx85(Status, {}),
+            /* @__PURE__ */ jsx85(Form, {})
         ]
     }));
 };
 AudioThread.Root = Root12;
 AudioThread.Visualization = Visualization;
+AudioThread.Status = Status;
 AudioThread.Form = Form;
 // src/components/threads/AudioThreadDialog/index.tsx
-import { jsx as jsx78, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs34 } from "react/jsx-runtime";
 var AudioThreadDialog = function() {
-    return /* @__PURE__ */ jsxs31(Root9, {
+    return /* @__PURE__ */ jsxs34(Root9, {
         children: [
-            /* @__PURE__ */ jsx78(Content5.Root, {
-                children: /* @__PURE__ */ jsx78(AudioThread, {})
+            /* @__PURE__ */ jsx86(Content5.Root, {
+                children: /* @__PURE__ */ jsx86(AudioThread, {})
             }),
-            /* @__PURE__ */ jsx78(Trigger, {})
+            /* @__PURE__ */ jsx86(Trigger, {})
         ]
     });
 };
@@ -4914,17 +5187,17 @@ AudioThreadDialog.Root = Root9;
 AudioThreadDialog.Trigger = Trigger;
 AudioThreadDialog.Content = Content5;
 // src/components/suggestions/Suggestions/index.tsx
-import { useMemo as useMemo15 } from "react";
+import { useMemo as useMemo16 } from "react";
 // src/components/suggestions/Suggestions/Content.tsx
-import { useMemo as useMemo14 } from "react";
+import { useMemo as useMemo15 } from "react";
 import { isEmpty as isEmpty3 } from "radash";
 import { onlyText } from "react-children-utilities";
-import { Flex as Flex32 } from "@radix-ui/themes";
+import { Flex as Flex34 } 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";
 import { useQueryClient as useQueryClient7 } from "@tanstack/react-query";
-import { jsx as jsx79, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx87, jsxs as jsxs35 } from "react/jsx-runtime";
 var Item = function(param) {
     var suggestion = param.suggestion, isDisabled = param.isDisabled;
     var addToast = useToasts().addToast;
@@ -4937,7 +5210,7 @@ var Item = function(param) {
             threadContext: threadContext
         })
     }), createMessage = _useCreateMessage.createMessage, isPending = _useCreateMessage.isPending;
-    return /* @__PURE__ */ jsx79(Content7, {
+    return /* @__PURE__ */ jsx87(Content7, {
         onClick: function() {
             createMessage({
                 // @ts-ignore-next-line
@@ -4951,7 +5224,7 @@ var Item = function(param) {
 };
 var Content7 = function(param) {
     var onClick = param.onClick, isDisabled = param.isDisabled, isPending = param.isPending, children = param.children;
-    return /* @__PURE__ */ jsxs32(Button4, {
+    return /* @__PURE__ */ jsxs35(Button4, {
         variant: "soft",
         onClick: onClick,
         disabled: isDisabled,
@@ -4961,14 +5234,14 @@ var Content7 = function(param) {
             flexShrink: 1
         },
         children: [
-            /* @__PURE__ */ jsx79(Text9, {
+            /* @__PURE__ */ jsx87(Text9, {
                 size: "1",
                 weight: "regular",
                 children: children
             }),
-            /* @__PURE__ */ jsx79(Spinner2, {
+            /* @__PURE__ */ jsx87(Spinner2, {
                 loading: isPending,
-                children: /* @__PURE__ */ jsx79(ArrowUpIcon3, {
+                children: /* @__PURE__ */ jsx87(ArrowUpIcon3, {
                     style: {
                         flexShrink: 0
                     }
@@ -4979,11 +5252,11 @@ var Content7 = function(param) {
 };
 Item.Content = Content7;
 // src/components/suggestions/Suggestions/Content.tsx
-import { jsx as jsx80 } from "react/jsx-runtime";
+import { jsx as jsx88 } from "react/jsx-runtime";
 var Content8 = function(param) {
     var children = param.children;
     var isMutatingMessage = useIsMutatingMessage();
-    var suggestions = useMemo14(function() {
+    var suggestions = useMemo15(function() {
         return onlyText(children).split(/\r?\n/).filter(function(c) {
             return !isEmpty3(c);
         }).map(function(c) {
@@ -4993,12 +5266,12 @@ var Content8 = function(param) {
         children
     ]);
     if (isEmpty3(suggestions)) return null;
-    return /* @__PURE__ */ jsx80(Flex32, {
+    return /* @__PURE__ */ jsx88(Flex34, {
         gap: "2",
         py: "2",
         wrap: "wrap",
         children: suggestions.map(function(suggestion) {
-            return /* @__PURE__ */ jsx80(Item, {
+            return /* @__PURE__ */ jsx88(Item, {
                 suggestion: suggestion,
                 isDisabled: isMutatingMessage
             }, suggestion);
@@ -5006,11 +5279,11 @@ var Content8 = function(param) {
     });
 };
 // src/components/suggestions/Suggestions/index.tsx
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx89 } from "react/jsx-runtime";
 var Suggestions = function(param) {
     var children = param.children;
     var latestMessageProps = useLatestMessage();
-    var isDisabled = useMemo15(function() {
+    var isDisabled = useMemo16(function() {
         var // @ts-ignore-next-line
         _latestMessageProps_latestMessage_metadata, _latestMessageProps_latestMessage;
         return (_latestMessageProps_latestMessage = latestMessageProps.latestMessage) === null || _latestMessageProps_latestMessage === void 0 ? void 0 : (_latestMessageProps_latestMessage_metadata = _latestMessageProps_latestMessage.metadata) === null || _latestMessageProps_latestMessage_metadata === void 0 ? void 0 : _latestMessageProps_latestMessage_metadata.isBlocking;
@@ -5019,26 +5292,26 @@ var Suggestions = function(param) {
     ]);
     if (latestMessageProps.isLoading) return null;
     if (isDisabled) return null;
-    return /* @__PURE__ */ jsx81(Content8, {
+    return /* @__PURE__ */ jsx89(Content8, {
         children: children
     });
 };
 Suggestions.Item = Item;
 // src/components/markdown/MarkdownProvider/index.tsx
-import { useMemo as useMemo16 } from "react";
-import { jsx as jsx82 } from "react/jsx-runtime";
+import { useMemo as useMemo17 } from "react";
+import { jsx as jsx90 } from "react/jsx-runtime";
 var MarkdownProvider = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
     ]);
     var prevMarkdownContext = useMarkdownContext();
-    var value = useMemo16(function() {
+    var value = useMemo17(function() {
         return merge(prevMarkdownContext, rest);
     }, [
         rest,
         prevMarkdownContext
     ]);
-    return /* @__PURE__ */ jsx82(MarkdownContext.Provider, {
+    return /* @__PURE__ */ jsx90(MarkdownContext.Provider, {
         value: value,
         children: children
     });
@@ -5097,11 +5370,11 @@ var optimizedSrc = function(param) {
     }));
 };
 // src/components/imageAvatars/ImageAvatar/index.tsx
-import { jsx as jsx83 } from "react/jsx-runtime";
+import { jsx as jsx91 } from "react/jsx-runtime";
 var ImageAvatar = function(param) {
     var imageAvatar = param.imageAvatar, size = param.size;
     var superinterfaceContext = useSuperinterfaceContext();
-    return /* @__PURE__ */ jsx83(Avatar4, {
+    return /* @__PURE__ */ jsx91(Avatar4, {
         fallback: "",
         src: optimizedSrc({
             imageAvatar: imageAvatar,
@@ -5112,84 +5385,84 @@ var ImageAvatar = function(param) {
     });
 };
 // src/components/iconAvatars/IconAvatar.tsx
-import { useMemo as useMemo17 } from "react";
+import { useMemo as useMemo18 } from "react";
 import { Avatar as Avatar5 } from "@radix-ui/themes";
 // src/lib/iconAvatars/iconAvatarComponents.ts
 import { BackpackIcon, RocketIcon, MagicWandIcon, CubeIcon, TargetIcon, DiscIcon, GlobeIcon, StarIcon, LightningBoltIcon as LightningBoltIcon2, FaceIcon, PersonIcon as PersonIcon2, HeartIcon } from "@radix-ui/react-icons";
 var _obj;
 var iconAvatarComponents = (_obj = {}, _define_property(_obj, "BACKPACK" /* BACKPACK */ , BackpackIcon), _define_property(_obj, "ROCKET" /* ROCKET */ , RocketIcon), _define_property(_obj, "MAGIC_WAND" /* MAGIC_WAND */ , MagicWandIcon), _define_property(_obj, "CUBE" /* CUBE */ , CubeIcon), _define_property(_obj, "TARGET" /* TARGET */ , TargetIcon), _define_property(_obj, "DISC" /* DISC */ , DiscIcon), _define_property(_obj, "GLOBE" /* GLOBE */ , GlobeIcon), _define_property(_obj, "STAR" /* STAR */ , StarIcon), _define_property(_obj, "LIGHTNING_BOLT" /* LIGHTNING_BOLT */ , LightningBoltIcon2), _define_property(_obj, "FACE" /* FACE */ , FaceIcon), _define_property(_obj, "PERSON" /* PERSON */ , PersonIcon2), _define_property(_obj, "HEART" /* HEART */ , HeartIcon), _obj);
 // src/components/iconAvatars/IconAvatar.tsx
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var IconAvatar = function(param) {
     var iconAvatar = param.iconAvatar, size = param.size;
-    var Component = useMemo17(function() {
+    var Component = useMemo18(function() {
         return iconAvatarComponents[iconAvatar.name];
     }, [
         iconAvatar
     ]);
-    return /* @__PURE__ */ jsx84(Avatar5, {
+    return /* @__PURE__ */ jsx92(Avatar5, {
         size: size,
-        fallback: Component ? /* @__PURE__ */ jsx84(Component, {}) : ""
+        fallback: Component ? /* @__PURE__ */ jsx92(Component, {}) : ""
     });
 };
 // src/components/avatars/Avatar.tsx
-import { jsx as jsx85 } from "react/jsx-runtime";
+import { jsx as jsx93 } from "react/jsx-runtime";
 var Avatar6 = function(param) {
     var avatar = param.avatar, _param_size = param.size, size = _param_size === void 0 ? "1" : _param_size;
     if (avatar) {
         if (avatar.type === "IMAGE" /* IMAGE */  && avatar.imageAvatar) {
-            return /* @__PURE__ */ jsx85(ImageAvatar, {
+            return /* @__PURE__ */ jsx93(ImageAvatar, {
                 imageAvatar: avatar.imageAvatar,
                 size: size
             });
         }
         if (avatar.type === "ICON" /* ICON */  && avatar.iconAvatar) {
-            return /* @__PURE__ */ jsx85(IconAvatar, {
+            return /* @__PURE__ */ jsx93(IconAvatar, {
                 iconAvatar: avatar.iconAvatar,
                 size: size
             });
         }
     }
-    return /* @__PURE__ */ jsx85(RadixAvatar, {
+    return /* @__PURE__ */ jsx93(RadixAvatar, {
         fallback: "",
         size: size
     });
 };
 // src/components/components/ComponentsProvider.tsx
-import { useMemo as useMemo18 } from "react";
+import { useMemo as useMemo19 } from "react";
 // src/hooks/components/useComponents.ts
 import { useContext as useContext16 } from "react";
 var useComponents = function() {
     return useContext16(ComponentsContext);
 };
 // src/components/components/ComponentsProvider.tsx
-import { jsx as jsx86 } from "react/jsx-runtime";
+import { jsx as jsx94 } from "react/jsx-runtime";
 var ComponentsProvider = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
     ]);
     var prevComponents = useComponents();
-    var value = useMemo18(function() {
+    var value = useMemo19(function() {
         return merge(prevComponents, rest);
     }, [
         rest,
         prevComponents
     ]);
-    return /* @__PURE__ */ jsx86(ComponentsContext.Provider, {
+    return /* @__PURE__ */ jsx94(ComponentsContext.Provider, {
         value: value,
         children: children
     });
 };
 // src/components/assistants/AssistantProvider/index.tsx
-import { useMemo as useMemo20 } from "react";
+import { useMemo as useMemo21 } from "react";
 import { Theme } from "@radix-ui/themes";
 // src/components/assistants/AssistantProvider/Code.tsx
-import { useMemo as useMemo19 } from "react";
-import { jsx as jsx87 } from "react/jsx-runtime";
+import { useMemo as useMemo20 } from "react";
+import { jsx as jsx95 } from "react/jsx-runtime";
 var Code4 = function(param) {
     var children = param.children, className = param.className, markdownContext = param.markdownContext;
     var messageContext = useMessageContext();
-    var isAssistantMessage = useMemo19(function() {
+    var isAssistantMessage = useMemo20(function() {
         var _messageContext_message;
         return ((_messageContext_message = messageContext.message) === null || _messageContext_message === void 0 ? void 0 : _messageContext_message.role) === "assistant";
     }, [
@@ -5201,12 +5474,12 @@ var Code4 = function(param) {
             className: className
         });
     }
-    return /* @__PURE__ */ jsx87(Suggestions, {
+    return /* @__PURE__ */ jsx95(Suggestions, {
         children: children
     });
 };
 // src/components/assistants/AssistantProvider/index.tsx
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
 var AssistantProvider = function(param) {
     var children = param.children;
     var superinterfaceContext = useSuperinterfaceContext();
@@ -5214,11 +5487,11 @@ var AssistantProvider = function(param) {
         assistantId: superinterfaceContext.variables.assistantId
     }).assistant;
     var markdownContext = useMarkdownContext();
-    var components2 = useMemo20(function() {
+    var components2 = useMemo21(function() {
         return {
             code: function(props) {
                 return(// @ts-ignore-next-line
-                /* @__PURE__ */ jsx88(Code4, _object_spread_props(_object_spread({}, props), {
+                /* @__PURE__ */ jsx96(Code4, _object_spread_props(_object_spread({}, props), {
                     markdownContext: markdownContext
                 })));
             }
@@ -5229,7 +5502,7 @@ var AssistantProvider = function(param) {
     if (!assistant) {
         return null;
     }
-    return /* @__PURE__ */ jsx88(Theme, {
+    return /* @__PURE__ */ jsx96(Theme, {
         accentColor: assistant.theme.accentColor,
         grayColor: assistant.theme.grayColor,
         radius: assistant.theme.radius,
@@ -5237,13 +5510,13 @@ var AssistantProvider = function(param) {
         scaling: assistant.theme.scaling,
         panelBackground: "solid",
         hasBackground: false,
-        children: /* @__PURE__ */ jsx88(AssistantNameContext.Provider, {
+        children: /* @__PURE__ */ jsx96(AssistantNameContext.Provider, {
             value: assistant.name,
-            children: /* @__PURE__ */ jsx88(AssistantAvatarContext.Provider, {
-                value: /* @__PURE__ */ jsx88(Avatar6, {
+            children: /* @__PURE__ */ jsx96(AssistantAvatarContext.Provider, {
+                value: /* @__PURE__ */ jsx96(Avatar6, {
                     avatar: assistant.avatar
                 }),
-                children: /* @__PURE__ */ jsx88(MarkdownProvider, {
+                children: /* @__PURE__ */ jsx96(MarkdownProvider, {
                     components: components2,
                     children: children
                 })