npm - @superinterface/react - Versions diffs - 2.24.6 → 2.25.1 - Mend

@superinterface/react 2.24.6 → 2.25.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.js CHANGED Viewed

@@ -789,7 +789,7 @@ var UserAvatar = function() {
 // src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
 import { Flex as Flex15 } from "@radix-ui/themes";
 // src/components/threads/Thread/Message/index.tsx
-import { useMemo as useMemo6, Fragment } from "react";
+import { useMemo as useMemo6 } from "react";
 import { isEmpty } from "radash";
 import { Box as Box10 } from "@radix-ui/themes";
 // src/components/skeletons/StartingContentSkeleton/index.tsx
@@ -1211,7 +1211,30 @@ var MessageContext = createContext8({
 });
 // src/components/threads/Thread/Message/Provider.tsx
 var Provider = MessageContext.Provider;
-// src/components/threads/Thread/Message/TextContent.tsx
+// src/components/threads/Thread/Message/Attachments/index.tsx
+import { Flex as Flex11, Badge } from "@radix-ui/themes";
+import { FileIcon } from "@radix-ui/react-icons";
+import { jsx as jsx26, jsxs as jsxs10 } 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__ */ jsx26(Flex11, {
+        align: "start",
+        pb: "1",
+        children: /* @__PURE__ */ jsxs10(Badge, {
+            color: "gray",
+            variant: "surface",
+            children: [
+                /* @__PURE__ */ jsx26(FileIcon, {}),
+                message.attachments.length,
+                " file",
+                message.attachments.length > 1 ? "s" : ""
+            ]
+        })
+    });
+};
+// src/components/threads/Thread/Message/ContentPart/TextContent.tsx
 import Markdown from "react-markdown";
 // src/hooks/markdown/useMarkdownContext/index.ts
 import { useContext as useContext7 } from "react";
@@ -1221,12 +1244,12 @@ import { createContext as createContext9 } from "react";
 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";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var Paragraph = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx26(Box4, {
+    return /* @__PURE__ */ jsx27(Box4, {
         pb: "3",
-        children: /* @__PURE__ */ jsx26(Text4, {
+        children: /* @__PURE__ */ jsx27(Text4, {
             size: "3",
             style: {
                 whiteSpace: "pre-line",
@@ -1238,10 +1261,10 @@ var Paragraph = function(param) {
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Link.tsx
 import { Link as RadixLink } from "@radix-ui/themes";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var Link = function(param) {
     var children = param.children, href = param.href, download = param.download, _param_target = param.target, target = _param_target === void 0 ? "_blank" : _param_target;
-    return /* @__PURE__ */ jsx27(RadixLink, {
+    return /* @__PURE__ */ jsx28(RadixLink, {
         href: href,
         target: target,
         download: download,
@@ -1250,13 +1273,13 @@ var Link = function(param) {
 };
 // src/contexts/markdown/MarkdownContext/lib/components/UnorderedList.tsx
 import { Box as Box5 } from "@radix-ui/themes";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var UnorderedList = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx28(Box5, {
+    return /* @__PURE__ */ jsx29(Box5, {
         pb: "3",
         asChild: true,
-        children: /* @__PURE__ */ jsx28("ul", {
+        children: /* @__PURE__ */ jsx29("ul", {
             style: {
                 listStylePosition: "inside"
             },
@@ -1266,13 +1289,13 @@ var UnorderedList = function(param) {
 };
 // src/contexts/markdown/MarkdownContext/lib/components/OrderedList.tsx
 import { Box as Box6 } from "@radix-ui/themes";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var OrderedList = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx29(Box6, {
+    return /* @__PURE__ */ jsx30(Box6, {
         pb: "3",
         asChild: true,
-        children: /* @__PURE__ */ jsx29("ol", {
+        children: /* @__PURE__ */ jsx30("ol", {
             style: {
                 listStylePosition: "inside"
             },
@@ -1282,31 +1305,31 @@ var OrderedList = function(param) {
 };
 // src/contexts/markdown/MarkdownContext/lib/components/ListItem.tsx
 import { Box as Box7 } from "@radix-ui/themes";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var ListItem = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx30(Box7, {
+    return /* @__PURE__ */ jsx31(Box7, {
         pb: "1",
-        children: /* @__PURE__ */ jsx30("li", {
+        children: /* @__PURE__ */ jsx31("li", {
             children: children
         })
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Strong.tsx
 import { Strong as RadixStrong } from "@radix-ui/themes";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var Strong = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx31(RadixStrong, {
+    return /* @__PURE__ */ jsx32(RadixStrong, {
         children: children
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Pre.tsx
 import { Box as Box8 } from "@radix-ui/themes";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var Pre = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx32(Box8, {
+    return /* @__PURE__ */ jsx33(Box8, {
         style: {
             whiteSpace: "pre-wrap",
             wordBreak: "break-word"
@@ -1316,15 +1339,64 @@ var Pre = function(param) {
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Code.tsx
 import { Code as RadixCode } from "@radix-ui/themes";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var Code3 = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx33(RadixCode, {
+    return /* @__PURE__ */ jsx34(RadixCode, {
         children: children
     });
 };
+// src/components/images/Image.tsx
+import { Box as Box9 } from "@radix-ui/themes";
+import { jsx as jsx35 } from "react/jsx-runtime";
+var Image = function(props) {
+    return /* @__PURE__ */ jsx35(Box9, {
+        pb: "3",
+        children: /* @__PURE__ */ jsx35("img", _object_spread_props(_object_spread({}, props), {
+            style: {
+                maxWidth: "100%",
+                height: "auto"
+            }
+        }))
+    });
+};
 // src/contexts/markdown/MarkdownContext/lib/components/Img/lib/isVideoSrc.ts
-import videoExtensions from "video-extensions";
+var videoExtensions = [
+    "3g2",
+    "3gp",
+    "aaf",
+    "asf",
+    "avchd",
+    "avi",
+    "drc",
+    "flv",
+    "m2v",
+    "m3u8",
+    "m4p",
+    "m4v",
+    "mkv",
+    "mng",
+    "mov",
+    "mp2",
+    "mp4",
+    "mpe",
+    "mpeg",
+    "mpg",
+    "mpv",
+    "mxf",
+    "nsv",
+    "ogg",
+    "ogv",
+    "qt",
+    "rm",
+    "rmvb",
+    "roq",
+    "svi",
+    "vob",
+    "webm",
+    "wmv",
+    "yuv"
+];
 var isVideoSrc = function(param) {
     var src = param.src;
     return videoExtensions.includes(src.split(".").pop() || "");
@@ -1335,21 +1407,21 @@ var isAudioSrc = function(param) {
     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 { Flex as Flex12 } 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";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var PlayButton = function() {
     var isPaused = useMediaState("paused");
-    return /* @__PURE__ */ jsx34(IconButton, {
+    return /* @__PURE__ */ jsx36(IconButton, {
         variant: "ghost",
         asChild: true,
-        children: /* @__PURE__ */ jsx34(VidstackPlayButton, {
-            children: isPaused ? /* @__PURE__ */ jsx34(PlayIcon, {}) : /* @__PURE__ */ jsx34(PauseIcon, {})
+        children: /* @__PURE__ */ jsx36(VidstackPlayButton, {
+            children: isPaused ? /* @__PURE__ */ jsx36(PlayIcon, {}) : /* @__PURE__ */ jsx36(PauseIcon, {})
         })
     });
 };
@@ -1357,27 +1429,27 @@ var PlayButton = function() {
 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";
+import { jsx as jsx37, jsxs as jsxs11 } from "react/jsx-runtime";
 var VolumeButton = function() {
     var volume = useMediaState2("volume");
     var isMuted = useMediaState2("muted");
     var remote = useMediaRemote();
-    return /* @__PURE__ */ jsxs10(HoverCard.Root, {
+    return /* @__PURE__ */ jsxs11(HoverCard.Root, {
         children: [
-            /* @__PURE__ */ jsx35(HoverCard.Trigger, {
-                children: /* @__PURE__ */ jsx35(IconButton2, {
+            /* @__PURE__ */ jsx37(HoverCard.Trigger, {
+                children: /* @__PURE__ */ jsx37(IconButton2, {
                     variant: "ghost",
                     asChild: true,
-                    children: /* @__PURE__ */ jsx35(MuteButton, {
-                        children: isMuted || volume === 0 ? /* @__PURE__ */ jsx35(SpeakerOffIcon, {}) : /* @__PURE__ */ jsx35(SpeakerModerateIcon, {})
+                    children: /* @__PURE__ */ jsx37(MuteButton, {
+                        children: isMuted || volume === 0 ? /* @__PURE__ */ jsx37(SpeakerOffIcon, {}) : /* @__PURE__ */ jsx37(SpeakerModerateIcon, {})
                     })
                 })
             }),
-            /* @__PURE__ */ jsx35(HoverCard.Content, {
+            /* @__PURE__ */ jsx37(HoverCard.Content, {
                 size: "1",
                 side: "top",
                 height: "100px",
-                children: /* @__PURE__ */ jsx35(Slider, {
+                children: /* @__PURE__ */ jsx37(Slider, {
                     size: "1",
                     variant: "soft",
                     orientation: "vertical",
@@ -1397,7 +1469,7 @@ var VolumeButton = function() {
 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";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var Time = function() {
     var time = useMediaState3("currentTime");
     var duration = useMediaState3("duration");
@@ -1418,7 +1490,7 @@ var Time = function() {
     }, [
         duration
     ]);
-    return /* @__PURE__ */ jsx36(Slider2, {
+    return /* @__PURE__ */ jsx38(Slider2, {
         size: "1",
         variant: "soft",
         value: [
@@ -1439,12 +1511,12 @@ var Time = function() {
 };
 // src/components/media/MediaContainer.tsx
 import { Card, Inset } from "@radix-ui/themes";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var MediaContainer = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx37(Card, {
+    return /* @__PURE__ */ jsx39(Card, {
         mb: "3",
-        children: /* @__PURE__ */ jsx37(Inset, {
+        children: /* @__PURE__ */ jsx39(Inset, {
             clip: "padding-box",
             style: {
                 display: "flex",
@@ -1458,23 +1530,23 @@ var MediaContainer = function(param) {
 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";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var FullscreenButton = function() {
     var isFullscreen = useMediaState4("fullscreen");
-    return /* @__PURE__ */ jsx38(IconButton3, {
+    return /* @__PURE__ */ jsx40(IconButton3, {
         variant: "ghost",
         asChild: true,
-        children: /* @__PURE__ */ jsx38(VidstackFullscreenButton, {
-            children: isFullscreen ? /* @__PURE__ */ jsx38(ExitFullScreenIcon, {}) : /* @__PURE__ */ jsx38(EnterFullScreenIcon, {})
+        children: /* @__PURE__ */ jsx40(VidstackFullscreenButton, {
+            children: isFullscreen ? /* @__PURE__ */ jsx40(ExitFullScreenIcon, {}) : /* @__PURE__ */ jsx40(EnterFullScreenIcon, {})
         })
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Img/Video/index.tsx
-import { jsx as jsx39, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs12 } from "react/jsx-runtime";
 var Video = function(param) {
     var src = param.src;
-    return /* @__PURE__ */ jsx39(MediaContainer, {
-        children: /* @__PURE__ */ jsxs11(MediaPlayer, {
+    return /* @__PURE__ */ jsx41(MediaContainer, {
+        children: /* @__PURE__ */ jsxs12(MediaPlayer, {
             src: {
                 src: src,
                 type: "video/".concat(src.split(".").pop())
@@ -1483,11 +1555,11 @@ var Video = function(param) {
             hideControlsOnMouseLeave: true,
             crossOrigin: true,
             children: [
-                /* @__PURE__ */ jsx39(MediaProvider, {}),
-                /* @__PURE__ */ jsx39("style", {
+                /* @__PURE__ */ jsx41(MediaProvider, {}),
+                /* @__PURE__ */ jsx41("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, {
+                /* @__PURE__ */ jsx41(Flex12, {
                     asChild: true,
                     position: "absolute",
                     bottom: "0",
@@ -1499,18 +1571,18 @@ var Video = function(param) {
                         zIndex: 10,
                         background: "var(--accent-4)"
                     },
-                    children: /* @__PURE__ */ jsx39(Controls.Root, {
-                        children: /* @__PURE__ */ jsx39(Flex11, {
+                    children: /* @__PURE__ */ jsx41(Controls.Root, {
+                        children: /* @__PURE__ */ jsx41(Flex12, {
                             asChild: true,
                             align: "center",
                             gap: "3",
                             flexGrow: "1",
-                            children: /* @__PURE__ */ jsxs11(Controls.Group, {
+                            children: /* @__PURE__ */ jsxs12(Controls.Group, {
                                 children: [
-                                    /* @__PURE__ */ jsx39(PlayButton, {}),
-                                    /* @__PURE__ */ jsx39(Time, {}),
-                                    /* @__PURE__ */ jsx39(VolumeButton, {}),
-                                    /* @__PURE__ */ jsx39(FullscreenButton, {})
+                                    /* @__PURE__ */ jsx41(PlayButton, {}),
+                                    /* @__PURE__ */ jsx41(Time, {}),
+                                    /* @__PURE__ */ jsx41(VolumeButton, {}),
+                                    /* @__PURE__ */ jsx41(FullscreenButton, {})
                                 ]
                             })
                         })
@@ -1521,14 +1593,14 @@ var Video = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Img/Audio/index.tsx
-import { Flex as Flex12 } from "@radix-ui/themes";
+import { Flex as Flex13 } 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";
+import { jsx as jsx42, jsxs as jsxs13 } from "react/jsx-runtime";
 var Audio = function(param) {
     var src = param.src;
-    return /* @__PURE__ */ jsx40(MediaContainer, {
-        children: /* @__PURE__ */ jsxs12(MediaPlayer2, {
+    return /* @__PURE__ */ jsx42(MediaContainer, {
+        children: /* @__PURE__ */ jsxs13(MediaPlayer2, {
             src: {
                 src: src,
                 type: "audio/".concat(src.split(".").pop())
@@ -1537,8 +1609,8 @@ var Audio = function(param) {
             crossOrigin: true,
             playsInline: true,
             children: [
-                /* @__PURE__ */ jsx40(MediaProvider2, {}),
-                /* @__PURE__ */ jsx40(Flex12, {
+                /* @__PURE__ */ jsx42(MediaProvider2, {}),
+                /* @__PURE__ */ jsx42(Flex13, {
                     asChild: true,
                     p: "3",
                     flexGrow: "1",
@@ -1546,17 +1618,17 @@ var Audio = function(param) {
                         zIndex: 10,
                         background: "var(--accent-4)"
                     },
-                    children: /* @__PURE__ */ jsx40(Controls2.Root, {
-                        children: /* @__PURE__ */ jsx40(Flex12, {
+                    children: /* @__PURE__ */ jsx42(Controls2.Root, {
+                        children: /* @__PURE__ */ jsx42(Flex13, {
                             asChild: true,
                             align: "center",
                             gap: "3",
                             flexGrow: "1",
-                            children: /* @__PURE__ */ jsxs12(Controls2.Group, {
+                            children: /* @__PURE__ */ jsxs13(Controls2.Group, {
                                 children: [
-                                    /* @__PURE__ */ jsx40(PlayButton, {}),
-                                    /* @__PURE__ */ jsx40(Time, {}),
-                                    /* @__PURE__ */ jsx40(VolumeButton, {})
+                                    /* @__PURE__ */ jsx42(PlayButton, {}),
+                                    /* @__PURE__ */ jsx42(Time, {}),
+                                    /* @__PURE__ */ jsx42(VolumeButton, {})
                                 ]
                             })
                         })
@@ -1566,63 +1638,49 @@ var Audio = function(param) {
         })
     });
 };
-// 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__ */ jsx41("img", _object_spread_props(_object_spread({}, props), {
-            style: {
-                maxWidth: "100%",
-                height: "auto"
-            }
-        }))
-    });
-};
 // src/contexts/markdown/MarkdownContext/lib/components/Img/index.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var Img = function(props) {
     if (!props.src) {
-        return /* @__PURE__ */ jsx42(ImageComponent, _object_spread({}, props));
+        return /* @__PURE__ */ jsx43(Image, _object_spread({}, props));
     } else if (isVideoSrc({
         src: props.src
     })) {
-        return /* @__PURE__ */ jsx42(Video, {
+        return /* @__PURE__ */ jsx43(Video, {
             src: props.src
         });
     } else if (isAudioSrc({
         src: props.src
     })) {
-        return /* @__PURE__ */ jsx42(Audio, {
+        return /* @__PURE__ */ jsx43(Audio, {
             src: props.src
         });
     } else {
-        return /* @__PURE__ */ jsx42(ImageComponent, _object_spread({}, props));
+        return /* @__PURE__ */ jsx43(Image, _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 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";
+import { IconButton as IconButton4, Popover as Popover4, Flex as Flex14, Text as Text5 } from "@radix-ui/themes";
+import { jsx as jsx44, jsxs as jsxs14 } from "react/jsx-runtime";
 var AnnotationBase = function(param) {
     var icon = param.icon, content = param.content;
-    return /* @__PURE__ */ jsxs13(Popover4.Root, {
+    return /* @__PURE__ */ jsxs14(Popover4.Root, {
         children: [
-            /* @__PURE__ */ jsx43(Popover4.Trigger, {
-                children: /* @__PURE__ */ jsx43(IconButton4, {
+            /* @__PURE__ */ jsx44(Popover4.Trigger, {
+                children: /* @__PURE__ */ jsx44(IconButton4, {
                     variant: "soft",
                     color: "gray",
                     size: "1",
                     children: icon
                 })
             }),
-            /* @__PURE__ */ jsx43(Popover4.Content, {
+            /* @__PURE__ */ jsx44(Popover4.Content, {
                 size: "1",
-                children: /* @__PURE__ */ jsx43(Flex13, {
+                children: /* @__PURE__ */ jsx44(Flex14, {
                     direction: "column",
-                    children: /* @__PURE__ */ jsx43(Text5, {
+                    children: /* @__PURE__ */ jsx44(Text5, {
                         size: "1",
                         color: "gray",
                         children: content
@@ -1633,12 +1691,12 @@ var AnnotationBase = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Annotation/FilePathAnnotation.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } 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__ */ jsx44(Link, {
+    return /* @__PURE__ */ jsx45(Link, {
         href: "".concat(superinterfaceContext.baseUrl, "/files/").concat(annotation.file_path.file_id, "/contents?").concat(nextSearchParams),
         target: "_self",
         download: true,
@@ -1646,16 +1704,16 @@ var FilePathAnnotation = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Annotation/index.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var Annotation = function(param) {
     var annotation = param.annotation, children = param.children;
     if (annotation.type === "file_citation") {
-        return /* @__PURE__ */ jsx45(AnnotationBase, {
-            icon: /* @__PURE__ */ jsx45(QuoteIcon, {}),
+        return /* @__PURE__ */ jsx46(AnnotationBase, {
+            icon: /* @__PURE__ */ jsx46(QuoteIcon, {}),
             content: "File cited."
         });
     } else if (annotation.type === "file_path") {
-        return /* @__PURE__ */ jsx45(FilePathAnnotation, {
+        return /* @__PURE__ */ jsx46(FilePathAnnotation, {
             annotation: annotation,
             children: children
         });
@@ -1663,7 +1721,7 @@ var Annotation = function(param) {
     return null;
 };
 // src/contexts/markdown/MarkdownContext/lib/components/index.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var components = {
     p: Paragraph,
     a: Link,
@@ -1676,48 +1734,48 @@ var components = {
     img: Img,
     annotation: Annotation,
     h1: function(props) {
-        return /* @__PURE__ */ jsx46(Heading, {
+        return /* @__PURE__ */ jsx47(Heading, {
             as: "h1",
             children: props.children
         });
     },
     h2: function(props) {
-        return /* @__PURE__ */ jsx46(Heading, {
+        return /* @__PURE__ */ jsx47(Heading, {
             as: "h2",
             size: "5",
             children: props.children
         });
     },
     h3: function(props) {
-        return /* @__PURE__ */ jsx46(Heading, {
+        return /* @__PURE__ */ jsx47(Heading, {
             as: "h3",
             size: "4",
             children: props.children
         });
     },
     h4: function(props) {
-        return /* @__PURE__ */ jsx46(Heading, {
+        return /* @__PURE__ */ jsx47(Heading, {
             as: "h4",
             size: "3",
             children: props.children
         });
     },
     h5: function(props) {
-        return /* @__PURE__ */ jsx46(Heading, {
+        return /* @__PURE__ */ jsx47(Heading, {
             as: "h5",
             size: "3",
             children: props.children
         });
     },
     h6: function(props) {
-        return /* @__PURE__ */ jsx46(Heading, {
+        return /* @__PURE__ */ jsx47(Heading, {
             as: "h6",
             size: "3",
             children: props.children
         });
     },
     table: function(props) {
-        return /* @__PURE__ */ jsx46(Table.Root, _object_spread_props(_object_spread({}, props), {
+        return /* @__PURE__ */ jsx47(Table.Root, _object_spread_props(_object_spread({}, props), {
             variant: "surface",
             mb: "3"
         }));
@@ -1909,45 +1967,49 @@ var MarkdownContext = createContext9({
 var useMarkdownContext = function() {
     return useContext7(MarkdownContext);
 };
-// src/components/threads/Thread/Message/TextContent.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
+// src/components/threads/Thread/Message/ContentPart/TextContent.tsx
+import { jsx as jsx48 } 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__ */ jsx47(Markdown, _object_spread_props(_object_spread({}, rest), {
+    return /* @__PURE__ */ jsx48(Markdown, _object_spread_props(_object_spread({}, rest), {
         remarkPlugins: getRemarkPlugins2({
             content: content
         }),
         children: content.text.value
     }));
 };
-// src/components/threads/Thread/Message/Attachments/index.tsx
-import { Flex as Flex14, Badge } from "@radix-ui/themes";
-import { FileIcon } from "@radix-ui/react-icons";
-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__ */ jsx48(Flex14, {
-        align: "start",
-        pb: "1",
-        children: /* @__PURE__ */ jsxs14(Badge, {
-            color: "gray",
-            variant: "surface",
-            children: [
-                /* @__PURE__ */ jsx48(FileIcon, {}),
-                message.attachments.length,
-                " file",
-                message.attachments.length > 1 ? "s" : ""
-            ]
-        })
+// src/components/threads/Thread/Message/ContentPart/ImageFileContent.tsx
+import { jsx as jsx49 } from "react/jsx-runtime";
+var ImageFileContent = function(param) {
+    var content = param.content;
+    var superinterfaceContext = useSuperinterfaceContext();
+    var nextSearchParams = new URLSearchParams(superinterfaceContext.variables);
+    return /* @__PURE__ */ jsx49(Image, {
+        alt: "",
+        src: "".concat(superinterfaceContext.baseUrl, "/files/").concat(content.image_file.file_id, "/contents?").concat(nextSearchParams)
     });
 };
+// src/components/threads/Thread/Message/ContentPart/index.tsx
+import { jsx as jsx50 } from "react/jsx-runtime";
+var ContentPart = function(param) {
+    var content = param.content;
+    if (content.type === "text") {
+        return /* @__PURE__ */ jsx50(TextContent, {
+            content: content
+        });
+    }
+    if (content.type === "image_file") {
+        return /* @__PURE__ */ jsx50(ImageFileContent, {
+            content: content
+        });
+    }
+    return null;
+};
 // src/components/threads/Thread/Message/index.tsx
-import { jsx as jsx49, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs15 } from "react/jsx-runtime";
 var Message = function(param) {
     var message = param.message;
     var _useMemo6 = _sliced_to_array(useMemo6(function() {
@@ -1992,68 +2054,66 @@ var Message = function(param) {
     }, [
         message
     ]);
-    return /* @__PURE__ */ jsx49(Provider, {
+    return /* @__PURE__ */ jsx51(Provider, {
         value: {
             message: message
         },
         children: /* @__PURE__ */ jsxs15(Box10, {
             children: [
-                /* @__PURE__ */ jsx49(RunSteps, {
+                /* @__PURE__ */ jsx51(RunSteps, {
                     runSteps: olderRunSteps
                 }),
                 /* @__PURE__ */ jsxs15(Box10, {
                     children: [
-                        /* @__PURE__ */ jsx49(Attachments, {
+                        /* @__PURE__ */ jsx51(Attachments, {
                             message: message
                         }),
                         message.content.map(function(content, index) {
-                            return /* @__PURE__ */ jsx49(Fragment, {
-                                children: content.type === "text" && /* @__PURE__ */ jsx49(TextContent, {
-                                    content: content
-                                })
+                            return /* @__PURE__ */ jsx51(ContentPart, {
+                                content: content
                             }, index);
                         }),
-                        isInProgress && isEmpty(laterRunSteps) && /* @__PURE__ */ jsx49(StartingContentSkeleton, {})
+                        isInProgress && isEmpty(laterRunSteps) && /* @__PURE__ */ jsx51(StartingContentSkeleton, {})
                     ]
                 }),
-                /* @__PURE__ */ jsx49(RunSteps, {
+                /* @__PURE__ */ jsx51(RunSteps, {
                     runSteps: laterRunSteps
                 }),
-                isInProgress && !isEmpty(laterRunSteps) && /* @__PURE__ */ jsx49(Box10, {
-                    children: /* @__PURE__ */ jsx49(StartingContentSkeleton, {})
+                isInProgress && !isEmpty(laterRunSteps) && /* @__PURE__ */ jsx51(Box10, {
+                    children: /* @__PURE__ */ jsx51(StartingContentSkeleton, {})
                 })
             ]
         })
     });
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var Content3 = function(param) {
     var messageGroup = param.messageGroup;
-    return /* @__PURE__ */ jsx50(Flex15, {
+    return /* @__PURE__ */ jsx52(Flex15, {
         direction: "column-reverse",
         children: messageGroup.messages.map(function(message) {
-            return /* @__PURE__ */ jsx50(Message, {
+            return /* @__PURE__ */ jsx52(Message, {
                 message: message
             }, message.id);
         })
     });
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
-import { jsx as jsx51, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs16 } from "react/jsx-runtime";
 var MessageGroup = function(param) {
     var messageGroup = param.messageGroup;
     var assistantNameContext = useContext8(AssistantNameContext);
     return /* @__PURE__ */ jsxs16(MessageGroupBase, {
         children: [
-            messageGroup.role === "user" ? /* @__PURE__ */ jsx51(UserAvatar, {}) : /* @__PURE__ */ jsx51(AssistantAvatar, {}),
+            messageGroup.role === "user" ? /* @__PURE__ */ jsx53(UserAvatar, {}) : /* @__PURE__ */ jsx53(AssistantAvatar, {}),
             /* @__PURE__ */ jsxs16(Box11, {
                 flexGrow: "1",
                 children: [
-                    /* @__PURE__ */ jsx51(Name, {
+                    /* @__PURE__ */ jsx53(Name, {
                         children: messageGroup.role === "user" ? "You" : assistantNameContext
                     }),
-                    /* @__PURE__ */ jsx51(Content3, {
+                    /* @__PURE__ */ jsx53(Content3, {
                         messageGroup: messageGroup
                     })
                 ]
@@ -2062,7 +2122,7 @@ var MessageGroup = function(param) {
     });
 };
 // src/components/threads/Thread/Messages/Content/index.tsx
-import { Fragment as Fragment2, jsx as jsx52 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx54 } from "react/jsx-runtime";
 var Content4 = function() {
     var _useMessages = useMessages(), messages2 = _useMessages.messages, isLoading = _useMessages.isLoading, isLoadingError = _useMessages.isLoadingError;
     var addToast = useToasts().addToast;
@@ -2081,11 +2141,11 @@ var Content4 = function() {
         addToast
     ]);
     if (isLoading || isLoadingError) {
-        return /* @__PURE__ */ jsx52(MessagesSkeleton, {});
+        return /* @__PURE__ */ jsx54(MessagesSkeleton, {});
     }
-    return /* @__PURE__ */ jsx52(Fragment2, {
+    return /* @__PURE__ */ jsx54(Fragment, {
         children: messageGroups2.map(function(messageGroup) {
-            return /* @__PURE__ */ jsx52(MessageGroup, {
+            return /* @__PURE__ */ jsx54(MessageGroup, {
                 messageGroup: messageGroup
             }, messageGroup.id);
         })
@@ -2096,20 +2156,20 @@ 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 jsx53, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs17 } from "react/jsx-runtime";
 var StartingSkeleton = function(param) {
     var children = param.children;
     var assistantNameContext = useContext9(AssistantNameContext);
     return /* @__PURE__ */ jsxs17(MessageGroupBase, {
         children: [
-            /* @__PURE__ */ jsx53(AssistantAvatar, {}),
+            /* @__PURE__ */ jsx55(AssistantAvatar, {}),
             /* @__PURE__ */ jsxs17(Box12, {
                 children: [
-                    /* @__PURE__ */ jsx53(Name, {
+                    /* @__PURE__ */ jsx55(Name, {
                         children: assistantNameContext
                     }),
                     children,
-                    /* @__PURE__ */ jsx53(StartingContentSkeleton, {})
+                    /* @__PURE__ */ jsx55(StartingContentSkeleton, {})
                 ]
             })
         ]
@@ -2134,7 +2194,7 @@ var isOptimistic = function(param) {
     return _4.startsWith(id, "-");
 };
 // src/components/threads/Thread/Messages/Progress/index.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var Progress = function() {
     var latestMessage = useLatestMessage().latestMessage;
     var isMutatingMessage = useIsMutatingMessage();
@@ -2152,7 +2212,7 @@ var Progress = function() {
         isMutatingMessage
     ]);
     if (!isVisible) return null;
-    return /* @__PURE__ */ jsx54(StartingSkeleton, {});
+    return /* @__PURE__ */ jsx56(StartingSkeleton, {});
 };
 // src/components/threads/Thread/Messages/Root/index.tsx
 import { Flex as Flex16 } from "@radix-ui/themes";
@@ -2210,7 +2270,7 @@ var useInfiniteScroll = function(param) {
     };
 };
 // src/components/threads/Thread/Messages/Root/index.tsx
-import { jsx as jsx55, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx57, 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;
@@ -2228,10 +2288,10 @@ var Root2 = function(param) {
         }),
         children: [
             children,
-            hasNextPage && /* @__PURE__ */ jsx55(Flex16, {
+            hasNextPage && /* @__PURE__ */ jsx57(Flex16, {
                 ref: loaderRef
             }),
-            /* @__PURE__ */ jsx55(Flex16, {
+            /* @__PURE__ */ jsx57(Flex16, {
                 flexShrink: "0",
                 flexGrow: "1"
             })
@@ -2239,30 +2299,30 @@ var Root2 = function(param) {
     });
 };
 // src/components/threads/Thread/Messages/NextPageSkeleton.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var NextPageSkeleton = function() {
     var hasNextPage = useMessages().hasNextPage;
     if (!hasNextPage) {
         return null;
     }
-    return /* @__PURE__ */ jsx56(MessagesSkeleton, {});
+    return /* @__PURE__ */ jsx58(MessagesSkeleton, {});
 };
 // src/components/threads/Thread/Messages/index.tsx
-import { jsx as jsx57, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx59, 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__ */ jsxs19(Root2, {
         style: style,
         children: [
-            /* @__PURE__ */ jsx57(Flex17, {
+            /* @__PURE__ */ jsx59(Flex17, {
                 flexShrink: "0",
                 height: "var(--space-3)"
             }),
-            /* @__PURE__ */ jsx57(Progress, {}),
+            /* @__PURE__ */ jsx59(Progress, {}),
             children,
-            /* @__PURE__ */ jsx57(Content4, {}),
-            /* @__PURE__ */ jsx57(NextPageSkeleton, {}),
-            /* @__PURE__ */ jsx57(Flex17, {
+            /* @__PURE__ */ jsx59(Content4, {}),
+            /* @__PURE__ */ jsx59(NextPageSkeleton, {}),
+            /* @__PURE__ */ jsx59(Flex17, {
                 flexShrink: "0",
                 flexGrow: "1",
                 minHeight: "var(--space-5)"
@@ -2293,10 +2353,10 @@ var useMessageFormContext = function() {
     return useContext10(MessageFormContext);
 };
 // src/components/threads/Thread/MessageForm/Submit/index.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var Root3 = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx58(Flex18, {
+    return /* @__PURE__ */ jsx60(Flex18, {
         flexShrink: "0",
         align: "end",
         children: children
@@ -2306,24 +2366,24 @@ var Button2 = function() {
     var superinterfaceContext = useSuperinterfaceContext();
     var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading, isFileLoading = _useMessageFormContext.isFileLoading;
     if (isLoading) {
-        return /* @__PURE__ */ jsx58(IconButton5, {
+        return /* @__PURE__ */ jsx60(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__ */ jsx58(StopIcon, {})
+            children: /* @__PURE__ */ jsx60(StopIcon, {})
         });
     }
-    return /* @__PURE__ */ jsx58(IconButton5, {
+    return /* @__PURE__ */ jsx60(IconButton5, {
         type: "submit",
         disabled: isDisabled || isFileLoading,
-        children: /* @__PURE__ */ jsx58(ArrowUpIcon, {})
+        children: /* @__PURE__ */ jsx60(ArrowUpIcon, {})
     });
 };
 var Submit = function() {
-    return /* @__PURE__ */ jsx58(Root3, {
-        children: /* @__PURE__ */ jsx58(Button2, {})
+    return /* @__PURE__ */ jsx60(Root3, {
+        children: /* @__PURE__ */ jsx60(Button2, {})
     });
 };
 Submit.Root = Root3;
@@ -3120,7 +3180,7 @@ var createMessageDefaultOnError = function(param) {
     };
 };
 // src/components/threads/Thread/MessageForm/Root/index.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var Root4 = function(param) {
     var children = param.children, onSubmitArg = param.onSubmit, isDisabledArg = param.isDisabled;
     var _useState2 = _sliced_to_array(useState2([]), 2), files = _useState2[0], setFiles = _useState2[1];
@@ -3213,7 +3273,7 @@ var Root4 = function(param) {
         };
     }();
     var content = watch("content");
-    return /* @__PURE__ */ jsx59(MessageFormContext.Provider, {
+    return /* @__PURE__ */ jsx61(MessageFormContext.Provider, {
         value: {
             isDisabled: isDisabled,
             isLoading: isLoading,
@@ -3222,11 +3282,11 @@ var Root4 = function(param) {
             isFileLoading: isFileLoading,
             content: content
         },
-        children: /* @__PURE__ */ jsx59(FormProvider, _object_spread_props(_object_spread({}, formProps), {
-            children: /* @__PURE__ */ jsx59(Box13, {
+        children: /* @__PURE__ */ jsx61(FormProvider, _object_spread_props(_object_spread({}, formProps), {
+            children: /* @__PURE__ */ jsx61(Box13, {
                 asChild: true,
                 flexShrink: "0",
-                children: /* @__PURE__ */ jsx59("form", {
+                children: /* @__PURE__ */ jsx61("form", {
                     onSubmit: handleSubmit(onSubmit),
                     children: children
                 })
@@ -3254,14 +3314,14 @@ import { useContext as useContext11, useMemo as useMemo10, useRef as useRef5, us
 // src/components/textareas/TextareaBase/index.tsx
 import { forwardRef as forwardRef3 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
-import { Fragment as Fragment3, jsx as jsx60, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx62, jsxs as jsxs20 } from "react/jsx-runtime";
 var TextareaBase = forwardRef3(function TextareaBase2(props, ref) {
-    return /* @__PURE__ */ jsxs20(Fragment3, {
+    return /* @__PURE__ */ jsxs20(Fragment2, {
         children: [
-            /* @__PURE__ */ jsx60("style", {
+            /* @__PURE__ */ jsx62("style", {
                 children: ".superinterface-textarea { min-height: inherit; height: 30px; }\n.superinterface-textarea::placeholder { color: var(--gray-a10); }"
             }),
-            /* @__PURE__ */ jsx60(TextareaAutosize, _object_spread({
+            /* @__PURE__ */ jsx62(TextareaAutosize, _object_spread({
                 ref: ref,
                 className: "rt-reset superinterface-textarea",
                 style: {
@@ -3278,10 +3338,10 @@ var TextareaBase = forwardRef3(function TextareaBase2(props, ref) {
     });
 });
 // src/components/threads/Thread/MessageForm/Field/Control.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var Root5 = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx61(Flex19, {
+    return /* @__PURE__ */ jsx63(Flex19, {
         flexGrow: "1",
         pt: "4px",
         children: children
@@ -3310,7 +3370,7 @@ var Input = function() {
         isDisabledPrevious,
         textareaProps
     ]);
-    return /* @__PURE__ */ jsx61(TextareaBase, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ jsx63(TextareaBase, _object_spread_props(_object_spread({
         minRows: 1,
         placeholder: "Message ".concat(assistantNameContext, "..."),
         disabled: isDisabled,
@@ -3330,8 +3390,8 @@ var Input = function() {
     }));
 };
 var Control = function() {
-    return /* @__PURE__ */ jsx61(Root5, {
-        children: /* @__PURE__ */ jsx61(Input, {})
+    return /* @__PURE__ */ jsx63(Root5, {
+        children: /* @__PURE__ */ jsx63(Input, {})
     });
 };
 Control.Root = Root5;
@@ -3339,19 +3399,19 @@ Control.Input = Input;
 // src/components/threads/Thread/MessageForm/Field/Files/Preview.tsx
 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 jsx62, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx64, 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__ */ jsx62(Flex20, {
+    return /* @__PURE__ */ jsx64(Flex20, {
         flexBasis: "100%",
         direction: "column",
         pb: "2",
         gap: "1",
         children: files.map(function(file) {
-            return /* @__PURE__ */ jsx62(Card2, {
+            return /* @__PURE__ */ jsx64(Card2, {
                 variant: "ghost",
                 children: /* @__PURE__ */ jsxs21(Flex20, {
                     align: "center",
@@ -3365,16 +3425,16 @@ var Preview = function() {
                             minWidth: "0",
                             maxWidth: "250px",
                             children: [
-                                /* @__PURE__ */ jsx62(Flex20, {
+                                /* @__PURE__ */ jsx64(Flex20, {
                                     flexShrink: "0",
-                                    children: /* @__PURE__ */ jsx62(Spinner, {
+                                    children: /* @__PURE__ */ jsx64(Spinner, {
                                         loading: isOptimistic({
                                             id: file.id
                                         }),
-                                        children: /* @__PURE__ */ jsx62(FileIcon2, {})
+                                        children: /* @__PURE__ */ jsx64(FileIcon2, {})
                                     })
                                 }),
-                                /* @__PURE__ */ jsx62(Text6, {
+                                /* @__PURE__ */ jsx64(Text6, {
                                     size: "2",
                                     truncate: true,
                                     wrap: "nowrap",
@@ -3382,9 +3442,9 @@ var Preview = function() {
                                 })
                             ]
                         }),
-                        /* @__PURE__ */ jsx62(Flex20, {
+                        /* @__PURE__ */ jsx64(Flex20, {
                             flexShrink: "0",
-                            children: /* @__PURE__ */ jsx62(IconButton6, {
+                            children: /* @__PURE__ */ jsx64(IconButton6, {
                                 onClick: function() {
                                     return setFiles(function(prev) {
                                         return prev.filter(function(prevFile) {
@@ -3395,7 +3455,7 @@ var Preview = function() {
                                 color: "gray",
                                 variant: "ghost",
                                 size: "1",
-                                children: /* @__PURE__ */ jsx62(Cross2Icon, {})
+                                children: /* @__PURE__ */ jsx64(Cross2Icon, {})
                             })
                         })
                     ]
@@ -3520,7 +3580,7 @@ var useCreateFile = function() {
     });
 };
 // src/components/threads/Thread/MessageForm/Field/Files/Control.tsx
-import { jsx as jsx63, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx65, 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;
@@ -3694,7 +3754,7 @@ var Control2 = function() {
         createFile,
         setFiles
     ]);
-    return /* @__PURE__ */ jsx63(Flex21, {
+    return /* @__PURE__ */ jsx65(Flex21, {
         pt: "2",
         pr: "2",
         flexGrow: "0",
@@ -3708,8 +3768,8 @@ var Control2 = function() {
                 overflow: "hidden"
             },
             children: [
-                /* @__PURE__ */ jsx63(FilePlusIcon, {}),
-                /* @__PURE__ */ jsx63("input", {
+                /* @__PURE__ */ jsx65(FilePlusIcon, {}),
+                /* @__PURE__ */ jsx65("input", {
                     type: "file",
                     multiple: true,
                     accept: accept,
@@ -3734,20 +3794,20 @@ var Files = {
     Control: Control2
 };
 // src/components/threads/Thread/MessageForm/Field/index.tsx
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 var Root6 = function(param) {
     var children = param.children;
     var _useFormContext2 = useFormContext2(), errors = _useFormContext2.formState.errors;
-    return /* @__PURE__ */ jsx64(RadixContainer, {
+    return /* @__PURE__ */ jsx66(RadixContainer, {
         size: "2",
         flexGrow: "0",
-        children: /* @__PURE__ */ jsx64(Flex22, {
+        children: /* @__PURE__ */ jsx66(Flex22, {
             direction: "column",
             flexShrink: "0",
-            children: /* @__PURE__ */ jsx64(Flex22, {
+            children: /* @__PURE__ */ jsx66(Flex22, {
                 direction: "column",
                 flexShrink: "0",
-                children: /* @__PURE__ */ jsx64(Flex22, {
+                children: /* @__PURE__ */ jsx66(Flex22, {
                     style: _object_spread({
                         borderRadius: "var(--radius-2)",
                         borderWidth: "1px",
@@ -3771,13 +3831,13 @@ var Field = {
     Files: Files
 };
 // src/components/threads/Thread/MessageForm/index.tsx
-import { jsx as jsx65, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs23 } from "react/jsx-runtime";
 var MessageForm = function() {
-    return /* @__PURE__ */ jsx65(Root4, {
+    return /* @__PURE__ */ jsx67(Root4, {
         children: /* @__PURE__ */ jsxs23(Field.Root, {
             children: [
-                /* @__PURE__ */ jsx65(Field.Control, {}),
-                /* @__PURE__ */ jsx65(Submit, {})
+                /* @__PURE__ */ jsx67(Field.Control, {}),
+                /* @__PURE__ */ jsx67(Submit, {})
             ]
         })
     });
@@ -3796,25 +3856,25 @@ import * as Toast2 from "@radix-ui/react-toast";
 import * as Toast from "@radix-ui/react-toast";
 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 jsx66, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs24 } from "react/jsx-runtime";
 var CustomToast = function(param) {
     var toast = param.toast;
-    return /* @__PURE__ */ jsx66(Toast.Root, {
-        children: /* @__PURE__ */ jsx66(Card3, {
-            children: /* @__PURE__ */ jsx66(Toast.Title, {
+    return /* @__PURE__ */ jsx68(Toast.Root, {
+        children: /* @__PURE__ */ jsx68(Card3, {
+            children: /* @__PURE__ */ jsx68(Toast.Title, {
                 children: /* @__PURE__ */ jsxs24(Flex23, {
                     children: [
-                        /* @__PURE__ */ jsx66(Flex23, {
+                        /* @__PURE__ */ jsx68(Flex23, {
                             pr: "2",
                             height: "14px",
                             align: "center",
-                            children: toast.type === "success" ? /* @__PURE__ */ jsx66(CheckCircledIcon2, {
+                            children: toast.type === "success" ? /* @__PURE__ */ jsx68(CheckCircledIcon2, {
                                 color: "var(--accent-9)"
-                            }) : /* @__PURE__ */ jsx66(CrossCircledIcon, {
+                            }) : /* @__PURE__ */ jsx68(CrossCircledIcon, {
                                 color: "var(--red-9)"
                             })
                         }),
-                        /* @__PURE__ */ jsx66(Text7, {
+                        /* @__PURE__ */ jsx68(Text7, {
                             weight: "medium",
                             size: "1",
                             children: toast.message
@@ -3826,7 +3886,7 @@ var CustomToast = function(param) {
     });
 };
 // src/components/toasts/ToastsProvider/index.tsx
-import { jsx as jsx67, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx69, 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 _useState3 = _sliced_to_array(useState3([]), 2), toasts = _useState3[0], setToasts = _useState3[1];
@@ -3837,7 +3897,7 @@ var ToastsProvider = function(param) {
             ]);
         });
     }, []);
-    return /* @__PURE__ */ jsx67(ToastsContext.Provider, {
+    return /* @__PURE__ */ jsx69(ToastsContext.Provider, {
         value: {
             toasts: toasts,
             addToast: addToast
@@ -3846,11 +3906,11 @@ var ToastsProvider = function(param) {
             children: [
                 children,
                 Array.from(toasts).map(function(toast, index) {
-                    return /* @__PURE__ */ jsx67(CustomToast, {
+                    return /* @__PURE__ */ jsx69(CustomToast, {
                         toast: toast
                     }, index);
                 }),
-                /* @__PURE__ */ jsx67(Toast2.Viewport, {
+                /* @__PURE__ */ jsx69(Toast2.Viewport, {
                     style: {
                         position: "absolute",
                         bottom: bottom,
@@ -3872,15 +3932,15 @@ var ToastsProvider = function(param) {
     });
 };
 // src/components/threads/Thread/Root/index.tsx
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var Root8 = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
     ]);
-    return /* @__PURE__ */ jsx68(ToastsProvider, {
+    return /* @__PURE__ */ jsx70(ToastsProvider, {
         bottom: "var(--space-9)",
-        children: /* @__PURE__ */ jsx68(Provider2, _object_spread_props(_object_spread({}, rest), {
-            children: /* @__PURE__ */ jsx68(Flex24, {
+        children: /* @__PURE__ */ jsx70(Provider2, _object_spread_props(_object_spread({}, rest), {
+            children: /* @__PURE__ */ jsx70(Flex24, {
                 direction: "column",
                 flexGrow: "1",
                 children: children
@@ -3889,12 +3949,12 @@ var Root8 = function(_param) {
     });
 };
 // src/components/threads/Thread/index.tsx
-import { jsx as jsx69, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs26 } from "react/jsx-runtime";
 var Thread = function(props) {
     return /* @__PURE__ */ jsxs26(Root8, _object_spread_props(_object_spread({}, props), {
         children: [
-            /* @__PURE__ */ jsx69(Messages, {}),
-            /* @__PURE__ */ jsx69(MessageForm, {})
+            /* @__PURE__ */ jsx71(Messages, {}),
+            /* @__PURE__ */ jsx71(MessageForm, {})
         ]
     }));
 };
@@ -4018,12 +4078,12 @@ var useThreadDialogContext = function() {
     return useContext13(ThreadDialogContext);
 };
 // src/components/threads/ThreadDialog/Provider/index.tsx
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
 var Provider4 = function(param) {
     var children = param.children;
     var threadDialogContext = useThreadDialogContext();
     var _useState4 = _sliced_to_array(useState4(threadDialogContext.isOpen), 2), isOpen = _useState4[0], setIsOpen = _useState4[1];
-    return /* @__PURE__ */ jsx70(ThreadDialogContext.Provider, {
+    return /* @__PURE__ */ jsx72(ThreadDialogContext.Provider, {
         value: {
             isOpen: isOpen,
             setIsOpen: setIsOpen
@@ -4032,10 +4092,10 @@ var Provider4 = function(param) {
     });
 };
 // src/components/threads/ThreadDialog/Root/index.tsx
-import { jsx as jsx71 } from "react/jsx-runtime";
+import { jsx as jsx73 } from "react/jsx-runtime";
 var Root9 = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx71(Provider4, {
+    return /* @__PURE__ */ jsx73(Provider4, {
         children: children
     });
 };
@@ -4044,20 +4104,20 @@ import { Flex as Flex25 } from "@radix-ui/themes";
 // src/components/threads/ThreadDialog/Trigger/Button.tsx
 import { IconButton as IconButton8 } from "@radix-ui/themes";
 import { ChatBubbleIcon } from "@radix-ui/react-icons";
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx74 } from "react/jsx-runtime";
 var Button3 = function() {
-    return /* @__PURE__ */ jsx72(IconButton8, {
+    return /* @__PURE__ */ jsx74(IconButton8, {
         size: "4",
         radius: "full",
-        children: /* @__PURE__ */ jsx72(ChatBubbleIcon, {})
+        children: /* @__PURE__ */ jsx74(ChatBubbleIcon, {})
     });
 };
 // src/components/threads/ThreadDialog/Trigger/index.tsx
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx75 } 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__ */ jsx73(Flex25, {
+    return /* @__PURE__ */ jsx75(Flex25, {
         display: {
             initial: isOpen ? "none" : "flex",
             sm: "flex"
@@ -4081,8 +4141,8 @@ var Root10 = function(param) {
     });
 };
 var Trigger = function(args) {
-    return /* @__PURE__ */ jsx73(Root10, _object_spread_props(_object_spread({}, args), {
-        children: /* @__PURE__ */ jsx73(Button3, {})
+    return /* @__PURE__ */ jsx75(Root10, _object_spread_props(_object_spread({}, args), {
+        children: /* @__PURE__ */ jsx75(Button3, {})
     }));
 };
 Trigger.Root = Root10;
@@ -4092,10 +4152,10 @@ 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 IconButton9, Flex as Flex26 } from "@radix-ui/themes";
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var Close = function() {
     var _useThreadDialogContext = useThreadDialogContext(), setIsOpen = _useThreadDialogContext.setIsOpen, isOpen = _useThreadDialogContext.isOpen;
-    return /* @__PURE__ */ jsx74(Flex26, {
+    return /* @__PURE__ */ jsx76(Flex26, {
         display: {
             initial: isOpen ? "flex" : "none",
             sm: "none"
@@ -4115,20 +4175,20 @@ var Close = function() {
         style: {
             zIndex: 9999999999
         },
-        children: /* @__PURE__ */ jsx74(IconButton9, {
+        children: /* @__PURE__ */ jsx76(IconButton9, {
             size: "2",
             variant: "soft",
-            children: /* @__PURE__ */ jsx74(Cross1Icon, {})
+            children: /* @__PURE__ */ jsx76(Cross1Icon, {})
         })
     });
 };
 // src/components/threads/ThreadDialog/Content/index.tsx
-import { jsx as jsx75, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx77, 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__ */ jsx75(Flex27, {
+    return /* @__PURE__ */ jsx77(Flex27, {
         direction: "column",
         justify: "end",
         position: "fixed",
@@ -4167,7 +4227,7 @@ var Root11 = function(param) {
                 flexGrow: 1
             },
             children: [
-                /* @__PURE__ */ jsx75(Inset2, {
+                /* @__PURE__ */ jsx77(Inset2, {
                     clip: "padding-box",
                     side: "all",
                     pb: "current",
@@ -4177,13 +4237,13 @@ var Root11 = function(param) {
                     },
                     children: children
                 }),
-                /* @__PURE__ */ jsx75(Close, {})
+                /* @__PURE__ */ jsx77(Close, {})
             ]
         })
     });
 };
 var Messages2 = function() {
-    return /* @__PURE__ */ jsx75(Thread.Messages, {
+    return /* @__PURE__ */ jsx77(Thread.Messages, {
         style: {
             paddingTop: "var(--space-5)",
             paddingRight: "var(--space-5)",
@@ -4193,7 +4253,7 @@ var Messages2 = function() {
 };
 var FormContainer = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx75(Flex27, {
+    return /* @__PURE__ */ jsx77(Flex27, {
         direction: "column",
         pl: "5",
         pr: "5",
@@ -4204,13 +4264,13 @@ var FormContainer = function(param) {
 };
 var Content5 = function(param) {
     var _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
-    return /* @__PURE__ */ jsx75(Root11, {
+    return /* @__PURE__ */ jsx77(Root11, {
         style: style,
         children: /* @__PURE__ */ jsxs27(Thread.Root, {
             children: [
-                /* @__PURE__ */ jsx75(Messages2, {}),
-                /* @__PURE__ */ jsx75(FormContainer, {
-                    children: /* @__PURE__ */ jsx75(Thread.MessageForm, {})
+                /* @__PURE__ */ jsx77(Messages2, {}),
+                /* @__PURE__ */ jsx77(FormContainer, {
+                    children: /* @__PURE__ */ jsx77(Thread.MessageForm, {})
                 })
             ]
         })
@@ -4220,12 +4280,12 @@ Content5.Root = Root11;
 Content5.Messages = Messages2;
 Content5.FormContainer = FormContainer;
 // src/components/threads/ThreadDialog/index.tsx
-import { jsx as jsx76, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs28 } from "react/jsx-runtime";
 var ThreadDialog = function() {
     return /* @__PURE__ */ jsxs28(Root9, {
         children: [
-            /* @__PURE__ */ jsx76(Content5, {}),
-            /* @__PURE__ */ jsx76(Trigger, {})
+            /* @__PURE__ */ jsx78(Content5, {}),
+            /* @__PURE__ */ jsx78(Trigger, {})
         ]
     });
 };
@@ -4742,7 +4802,7 @@ var useMessageAudio = function(param) {
 };
 // src/components/threads/AudioThread/Root/index.tsx
 import { useQueryClient as useQueryClient6 } from "@tanstack/react-query";
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx79 } from "react/jsx-runtime";
 var Content6 = function(param) {
     var children = param.children;
     var addToast = useToasts().addToast;
@@ -4812,13 +4872,13 @@ var Content6 = function(param) {
         createMessageProps: createMessageProps,
         messageAudioProps: messageAudioProps
     }).status;
-    return /* @__PURE__ */ jsx77(AudioThreadContext.Provider, {
+    return /* @__PURE__ */ jsx79(AudioThreadContext.Provider, {
         value: {
             status: status,
             recorderProps: recorderProps,
             messageAudioProps: messageAudioProps
         },
-        children: /* @__PURE__ */ jsx77(Flex28, {
+        children: /* @__PURE__ */ jsx79(Flex28, {
             direction: "column",
             flexGrow: "1",
             p: "9",
@@ -4828,8 +4888,8 @@ var Content6 = function(param) {
 };
 var Root12 = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx77(ToastsProvider, {
-        children: /* @__PURE__ */ jsx77(Content6, {
+    return /* @__PURE__ */ jsx79(ToastsProvider, {
+        children: /* @__PURE__ */ jsx79(Content6, {
             children: children
         })
     });
@@ -4848,7 +4908,7 @@ import _8 from "lodash";
 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 jsx78 } from "react/jsx-runtime";
+import { jsx as jsx80 } from "react/jsx-runtime";
 var barCount = 4;
 var BarsVisualizer = function(param) {
     var visualizationAnalyser = param.visualizationAnalyser, backgroundColor = param.backgroundColor, height = param.height, barWidth = param.barWidth;
@@ -4879,7 +4939,7 @@ var BarsVisualizer = function(param) {
         draw,
         visualizationAnalyser
     ]);
-    return /* @__PURE__ */ jsx78(Grid, {
+    return /* @__PURE__ */ jsx80(Grid, {
         columns: "".concat(barCount),
         gap: "1",
         width: "auto",
@@ -4888,12 +4948,12 @@ var BarsVisualizer = function(param) {
             gridTemplateColumns: "repeat(4, minmax(0, 1fr))"
         },
         children: barHeights.map(function(barHeight, index) {
-            return /* @__PURE__ */ jsx78(Flex29, {
+            return /* @__PURE__ */ jsx80(Flex29, {
                 direction: "column",
                 align: "center",
                 justify: "center",
                 height: height,
-                children: /* @__PURE__ */ jsx78(Flex29, {
+                children: /* @__PURE__ */ jsx80(Flex29, {
                     minHeight: "50%",
                     maxHeight: "100%",
                     height: "".concat(barHeight + 20, "%"),
@@ -4908,7 +4968,7 @@ var BarsVisualizer = function(param) {
     });
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
-import { jsx as jsx79, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs29 } from "react/jsx-runtime";
 var Visualization = function() {
     var audioThreadContext = useAudioThreadContext();
     var assistantNameContext = useContext15(AssistantNameContext);
@@ -4943,7 +5003,7 @@ var Visualization = function() {
         mb: "3",
         flexGrow: "1",
         children: [
-            /* @__PURE__ */ jsx79(Flex30, {
+            /* @__PURE__ */ jsx81(Flex30, {
                 align: "center",
                 justify: "center",
                 height: "200px",
@@ -4953,7 +5013,7 @@ var Visualization = function() {
                     borderRadius: "9999px",
                     scale: scale
                 },
-                children: /* @__PURE__ */ jsx79(BarsVisualizer, {
+                children: /* @__PURE__ */ jsx81(BarsVisualizer, {
                     visualizationAnalyser: audioThreadContext.messageAudioProps.visualizationAnalyser,
                     backgroundColor: audioThreadContext.status === "playing" ? "var(--accent-11)" : "var(--gray-11)",
                     height: "40px",
@@ -4965,8 +5025,8 @@ var Visualization = function() {
                 gap: "3",
                 pt: "5",
                 children: [
-                    /* @__PURE__ */ jsx79(AssistantAvatar, {}),
-                    /* @__PURE__ */ jsx79(Name, {
+                    /* @__PURE__ */ jsx81(AssistantAvatar, {}),
+                    /* @__PURE__ */ jsx81(Name, {
                         children: assistantNameContext
                     })
                 ]
@@ -4976,7 +5036,7 @@ var Visualization = function() {
 };
 // src/components/threads/AudioThread/Status/StatusMessages.tsx
 import { Flex as Flex31, Text as Text8 } from "@radix-ui/themes";
-import { jsx as jsx80, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx82, 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) {
@@ -4989,13 +5049,13 @@ var StatusMessages = function(param) {
         justify: "center",
         pb: "5",
         children: [
-            /* @__PURE__ */ jsx80(Text8, {
+            /* @__PURE__ */ jsx82(Text8, {
                 size: "2",
                 weight: "regular",
                 color: "gray",
                 className: "status-messages-texts"
             }),
-            /* @__PURE__ */ jsx80("style", {
+            /* @__PURE__ */ jsx82("style", {
                 dangerouslySetInnerHTML: {
                     __html: html({
                         texts: texts
@@ -5006,11 +5066,11 @@ var StatusMessages = function(param) {
     });
 };
 // src/components/threads/AudioThread/Status/index.tsx
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx83 } from "react/jsx-runtime";
 var Status = function() {
     var audioThreadContext = useAudioThreadContext();
     if (audioThreadContext.status === "recording") {
-        return /* @__PURE__ */ jsx81(StatusMessages, {
+        return /* @__PURE__ */ jsx83(StatusMessages, {
             texts: [
                 "Start speaking",
                 "Listening",
@@ -5024,20 +5084,20 @@ var Status = function() {
         "idle",
         "playerPaused"
     ].includes(audioThreadContext.status)) {
-        return /* @__PURE__ */ jsx81(StatusMessages, {
+        return /* @__PURE__ */ jsx83(StatusMessages, {
             texts: [
                 "Click the button below to activate"
             ]
         });
     }
     if (audioThreadContext.status === "playing") {
-        return /* @__PURE__ */ jsx81(StatusMessages, {
+        return /* @__PURE__ */ jsx83(StatusMessages, {
             texts: [
                 "Click the button below to interrupt"
             ]
         });
     }
-    return /* @__PURE__ */ jsx81(StatusMessages, {
+    return /* @__PURE__ */ jsx83(StatusMessages, {
         texts: [
             "Thinking"
         ]
@@ -5046,9 +5106,9 @@ var Status = function() {
 // src/components/threads/AudioThread/Form/index.tsx
 import { Flex as Flex33 } from "@radix-ui/themes";
 // src/components/threads/AudioThread/Form/MicIcon.tsx
-import { jsx as jsx82 } from "react/jsx-runtime";
+import { jsx as jsx84 } from "react/jsx-runtime";
 var MicIcon = function(props) {
-    return /* @__PURE__ */ jsx82("svg", _object_spread_props(_object_spread({
+    return /* @__PURE__ */ jsx84("svg", _object_spread_props(_object_spread({
         xmlns: "http://www.w3.org/2000/svg",
         fill: "currentColor",
         stroke: "currentColor",
@@ -5057,7 +5117,7 @@ var MicIcon = function(props) {
         height: "15",
         width: "15"
     }, props), {
-        children: /* @__PURE__ */ jsx82("path", {
+        children: /* @__PURE__ */ jsx84("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"
         })
@@ -5066,7 +5126,7 @@ var MicIcon = function(props) {
 // src/components/threads/AudioThread/Form/ActionButton/index.tsx
 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";
+import { jsx as jsx85, jsxs as jsxs31 } from "react/jsx-runtime";
 var ActionButton = function() {
     var audioThreadContext = useAudioThreadContext();
     var superinterfaceContext = useSuperinterfaceContext();
@@ -5074,37 +5134,37 @@ var ActionButton = function() {
         return /* @__PURE__ */ jsxs31(Flex32, {
             align: "center",
             children: [
-                /* @__PURE__ */ jsx83(Flex32, {
+                /* @__PURE__ */ jsx85(Flex32, {
                     mr: "3",
                     ml: "-7",
-                    children: /* @__PURE__ */ jsx83(IconButton10, {
+                    children: /* @__PURE__ */ jsx85(IconButton10, {
                         onClick: audioThreadContext.recorderProps.pause,
                         color: "gray",
                         variant: "soft",
                         size: "1",
-                        children: /* @__PURE__ */ jsx83(PauseIcon2, {})
+                        children: /* @__PURE__ */ jsx85(PauseIcon2, {})
                     })
                 }),
-                /* @__PURE__ */ jsx83(IconButton10, {
+                /* @__PURE__ */ jsx85(IconButton10, {
                     onClick: audioThreadContext.recorderProps.stop,
                     highContrast: true,
                     variant: "soft",
                     size: "4",
-                    children: /* @__PURE__ */ jsx83(ArrowUpIcon2, {})
+                    children: /* @__PURE__ */ jsx85(ArrowUpIcon2, {})
                 })
             ]
         });
     }
     if (audioThreadContext.status === "recorderPaused") {
-        return /* @__PURE__ */ jsx83(IconButton10, {
+        return /* @__PURE__ */ jsx85(IconButton10, {
             onClick: audioThreadContext.recorderProps.resume,
             color: "red",
             size: "4",
-            children: /* @__PURE__ */ jsx83(ResumeIcon, {})
+            children: /* @__PURE__ */ jsx85(ResumeIcon, {})
         });
     }
     if (audioThreadContext.status === "idle") {
-        return /* @__PURE__ */ jsx83(IconButton10, {
+        return /* @__PURE__ */ jsx85(IconButton10, {
             onClick: function() {
                 return audioThreadContext.recorderProps.start();
             },
@@ -5113,7 +5173,7 @@ var ActionButton = function() {
         });
     }
     if (audioThreadContext.status === "playing") {
-        return /* @__PURE__ */ jsx83(IconButton10, {
+        return /* @__PURE__ */ jsx85(IconButton10, {
             onClick: function() {
                 var _superinterfaceContext_createMessageAbortControllerRef_current;
                 audioThreadContext.messageAudioProps.stop();
@@ -5123,26 +5183,26 @@ var ActionButton = function() {
             size: "4",
             color: "gray",
             variant: "soft",
-            children: /* @__PURE__ */ jsx83(StopIcon2, {})
+            children: /* @__PURE__ */ jsx85(StopIcon2, {})
         });
     }
     if (audioThreadContext.status === "playerPaused") {
-        return /* @__PURE__ */ jsx83(IconButton10, {
+        return /* @__PURE__ */ jsx85(IconButton10, {
             onClick: function() {
                 return audioThreadContext.messageAudioProps.play();
             },
             size: "4",
-            children: /* @__PURE__ */ jsx83(ResumeIcon, {})
+            children: /* @__PURE__ */ jsx85(ResumeIcon, {})
         });
     }
-    return /* @__PURE__ */ jsx83(IconButton10, {
+    return /* @__PURE__ */ jsx85(IconButton10, {
         size: "4",
         variant: "soft",
         disabled: true
     });
 };
 // src/components/threads/AudioThread/Form/index.tsx
-import { jsx as jsx84, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs32 } from "react/jsx-runtime";
 var Form = function() {
     var audioThreadContext = useAudioThreadContext();
     return /* @__PURE__ */ jsxs32(Flex33, {
@@ -5153,24 +5213,24 @@ var Form = function() {
                 pb: "3",
                 align: "center",
                 children: [
-                    /* @__PURE__ */ jsx84(Flex33, {
+                    /* @__PURE__ */ jsx86(Flex33, {
                         ml: "-22.5px",
                         mr: "2",
                         align: "center",
-                        children: /* @__PURE__ */ jsx84(MicIcon, {
+                        children: /* @__PURE__ */ jsx86(MicIcon, {
                             style: {
                                 color: audioThreadContext.status === "recording" ? "var(--accent-11)" : "var(--gray-11)"
                             }
                         })
                     }),
-                    /* @__PURE__ */ jsx84(Flex33, {
+                    /* @__PURE__ */ jsx86(Flex33, {
                         px: "2",
                         py: "1",
                         style: {
                             backgroundColor: audioThreadContext.status === "recording" ? "var(--accent-4)" : "var(--gray-4)",
                             borderRadius: "var(--radius-6)"
                         },
-                        children: /* @__PURE__ */ jsx84(BarsVisualizer, {
+                        children: /* @__PURE__ */ jsx86(BarsVisualizer, {
                             visualizationAnalyser: audioThreadContext.recorderProps.visualizationAnalyser,
                             backgroundColor: audioThreadContext.status === "recording" ? "var(--accent-11)" : "var(--gray-11)",
                             height: "20px",
@@ -5179,18 +5239,18 @@ var Form = function() {
                     })
                 ]
             }),
-            /* @__PURE__ */ jsx84(ActionButton, {})
+            /* @__PURE__ */ jsx86(ActionButton, {})
         ]
     });
 };
 // src/components/threads/AudioThread/index.tsx
-import { jsx as jsx85, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx87, jsxs as jsxs33 } from "react/jsx-runtime";
 var AudioThread = function(props) {
     return /* @__PURE__ */ jsxs33(Root12, _object_spread_props(_object_spread({}, props), {
         children: [
-            /* @__PURE__ */ jsx85(Visualization, {}),
-            /* @__PURE__ */ jsx85(Status, {}),
-            /* @__PURE__ */ jsx85(Form, {})
+            /* @__PURE__ */ jsx87(Visualization, {}),
+            /* @__PURE__ */ jsx87(Status, {}),
+            /* @__PURE__ */ jsx87(Form, {})
         ]
     }));
 };
@@ -5199,14 +5259,14 @@ AudioThread.Visualization = Visualization;
 AudioThread.Status = Status;
 AudioThread.Form = Form;
 // src/components/threads/AudioThreadDialog/index.tsx
-import { jsx as jsx86, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx88, jsxs as jsxs34 } from "react/jsx-runtime";
 var AudioThreadDialog = function() {
     return /* @__PURE__ */ jsxs34(Root9, {
         children: [
-            /* @__PURE__ */ jsx86(Content5.Root, {
-                children: /* @__PURE__ */ jsx86(AudioThread, {})
+            /* @__PURE__ */ jsx88(Content5.Root, {
+                children: /* @__PURE__ */ jsx88(AudioThread, {})
             }),
-            /* @__PURE__ */ jsx86(Trigger, {})
+            /* @__PURE__ */ jsx88(Trigger, {})
         ]
     });
 };
@@ -5224,7 +5284,7 @@ import { Flex as Flex34 } from "@radix-ui/themes";
 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 jsx87, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx89, jsxs as jsxs35 } from "react/jsx-runtime";
 var Item = function(param) {
     var suggestion = param.suggestion, isDisabled = param.isDisabled;
     var addToast = useToasts().addToast;
@@ -5237,7 +5297,7 @@ var Item = function(param) {
             threadContext: threadContext
         })
     }), createMessage = _useCreateMessage.createMessage, isPending = _useCreateMessage.isPending;
-    return /* @__PURE__ */ jsx87(Content7, {
+    return /* @__PURE__ */ jsx89(Content7, {
         onClick: function() {
             createMessage({
                 // @ts-ignore-next-line
@@ -5261,14 +5321,14 @@ var Content7 = function(param) {
             flexShrink: 1
         },
         children: [
-            /* @__PURE__ */ jsx87(Text9, {
+            /* @__PURE__ */ jsx89(Text9, {
                 size: "1",
                 weight: "regular",
                 children: children
             }),
-            /* @__PURE__ */ jsx87(Spinner2, {
+            /* @__PURE__ */ jsx89(Spinner2, {
                 loading: isPending,
-                children: /* @__PURE__ */ jsx87(ArrowUpIcon3, {
+                children: /* @__PURE__ */ jsx89(ArrowUpIcon3, {
                     style: {
                         flexShrink: 0
                     }
@@ -5279,7 +5339,7 @@ var Content7 = function(param) {
 };
 Item.Content = Content7;
 // src/components/suggestions/Suggestions/Content.tsx
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
 var Content8 = function(param) {
     var children = param.children;
     var isMutatingMessage = useIsMutatingMessage();
@@ -5293,12 +5353,12 @@ var Content8 = function(param) {
         children
     ]);
     if (isEmpty3(suggestions)) return null;
-    return /* @__PURE__ */ jsx88(Flex34, {
+    return /* @__PURE__ */ jsx90(Flex34, {
         gap: "2",
         py: "2",
         wrap: "wrap",
         children: suggestions.map(function(suggestion) {
-            return /* @__PURE__ */ jsx88(Item, {
+            return /* @__PURE__ */ jsx90(Item, {
                 suggestion: suggestion,
                 isDisabled: isMutatingMessage
             }, suggestion);
@@ -5306,7 +5366,7 @@ var Content8 = function(param) {
     });
 };
 // src/components/suggestions/Suggestions/index.tsx
-import { jsx as jsx89 } from "react/jsx-runtime";
+import { jsx as jsx91 } from "react/jsx-runtime";
 var Suggestions = function(param) {
     var children = param.children;
     var latestMessageProps = useLatestMessage();
@@ -5319,14 +5379,14 @@ var Suggestions = function(param) {
     ]);
     if (latestMessageProps.isLoading) return null;
     if (isDisabled) return null;
-    return /* @__PURE__ */ jsx89(Content8, {
+    return /* @__PURE__ */ jsx91(Content8, {
         children: children
     });
 };
 Suggestions.Item = Item;
 // src/components/markdown/MarkdownProvider/index.tsx
 import { useMemo as useMemo17 } from "react";
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var MarkdownProvider = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
@@ -5338,7 +5398,7 @@ var MarkdownProvider = function(_param) {
         rest,
         prevMarkdownContext
     ]);
-    return /* @__PURE__ */ jsx90(MarkdownContext.Provider, {
+    return /* @__PURE__ */ jsx92(MarkdownContext.Provider, {
         value: value,
         children: children
     });
@@ -5397,11 +5457,11 @@ var optimizedSrc = function(param) {
     }));
 };
 // src/components/imageAvatars/ImageAvatar/index.tsx
-import { jsx as jsx91 } from "react/jsx-runtime";
+import { jsx as jsx93 } from "react/jsx-runtime";
 var ImageAvatar = function(param) {
     var imageAvatar = param.imageAvatar, size = param.size;
     var superinterfaceContext = useSuperinterfaceContext();
-    return /* @__PURE__ */ jsx91(Avatar4, {
+    return /* @__PURE__ */ jsx93(Avatar4, {
         fallback: "",
         src: optimizedSrc({
             imageAvatar: imageAvatar,
@@ -5419,7 +5479,7 @@ import { BackpackIcon, RocketIcon, MagicWandIcon, CubeIcon, TargetIcon, DiscIcon
 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 jsx92 } from "react/jsx-runtime";
+import { jsx as jsx94 } from "react/jsx-runtime";
 var IconAvatar = function(param) {
     var iconAvatar = param.iconAvatar, size = param.size;
     var Component = useMemo18(function() {
@@ -5427,30 +5487,30 @@ var IconAvatar = function(param) {
     }, [
         iconAvatar
     ]);
-    return /* @__PURE__ */ jsx92(Avatar5, {
+    return /* @__PURE__ */ jsx94(Avatar5, {
         size: size,
-        fallback: Component ? /* @__PURE__ */ jsx92(Component, {}) : ""
+        fallback: Component ? /* @__PURE__ */ jsx94(Component, {}) : ""
     });
 };
 // src/components/avatars/Avatar.tsx
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { jsx as jsx95 } 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__ */ jsx93(ImageAvatar, {
+            return /* @__PURE__ */ jsx95(ImageAvatar, {
                 imageAvatar: avatar.imageAvatar,
                 size: size
             });
         }
         if (avatar.type === "ICON" /* ICON */  && avatar.iconAvatar) {
-            return /* @__PURE__ */ jsx93(IconAvatar, {
+            return /* @__PURE__ */ jsx95(IconAvatar, {
                 iconAvatar: avatar.iconAvatar,
                 size: size
             });
         }
     }
-    return /* @__PURE__ */ jsx93(RadixAvatar, {
+    return /* @__PURE__ */ jsx95(RadixAvatar, {
         fallback: "",
         size: size
     });
@@ -5463,7 +5523,7 @@ var useComponents = function() {
     return useContext16(ComponentsContext);
 };
 // src/components/components/ComponentsProvider.tsx
-import { jsx as jsx94 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
 var ComponentsProvider = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
@@ -5475,7 +5535,7 @@ var ComponentsProvider = function(_param) {
         rest,
         prevComponents
     ]);
-    return /* @__PURE__ */ jsx94(ComponentsContext.Provider, {
+    return /* @__PURE__ */ jsx96(ComponentsContext.Provider, {
         value: value,
         children: children
     });
@@ -5485,7 +5545,7 @@ import { useMemo as useMemo21 } from "react";
 import { Theme } from "@radix-ui/themes";
 // src/components/assistants/AssistantProvider/Code.tsx
 import { useMemo as useMemo20 } from "react";
-import { jsx as jsx95 } from "react/jsx-runtime";
+import { jsx as jsx97 } from "react/jsx-runtime";
 var Code4 = function(param) {
     var children = param.children, className = param.className, markdownContext = param.markdownContext;
     var messageContext = useMessageContext();
@@ -5501,12 +5561,12 @@ var Code4 = function(param) {
             className: className
         });
     }
-    return /* @__PURE__ */ jsx95(Suggestions, {
+    return /* @__PURE__ */ jsx97(Suggestions, {
         children: children
     });
 };
 // src/components/assistants/AssistantProvider/index.tsx
-import { jsx as jsx96 } from "react/jsx-runtime";
+import { jsx as jsx98 } from "react/jsx-runtime";
 var AssistantProvider = function(param) {
     var children = param.children;
     var superinterfaceContext = useSuperinterfaceContext();
@@ -5518,7 +5578,7 @@ var AssistantProvider = function(param) {
         return {
             code: function(props) {
                 return(// @ts-ignore-next-line
-                /* @__PURE__ */ jsx96(Code4, _object_spread_props(_object_spread({}, props), {
+                /* @__PURE__ */ jsx98(Code4, _object_spread_props(_object_spread({}, props), {
                     markdownContext: markdownContext
                 })));
             }
@@ -5529,7 +5589,7 @@ var AssistantProvider = function(param) {
     if (!assistant) {
         return null;
     }
-    return /* @__PURE__ */ jsx96(Theme, {
+    return /* @__PURE__ */ jsx98(Theme, {
         accentColor: assistant.theme.accentColor,
         grayColor: assistant.theme.grayColor,
         radius: assistant.theme.radius,
@@ -5537,13 +5597,13 @@ var AssistantProvider = function(param) {
         scaling: assistant.theme.scaling,
         panelBackground: "solid",
         hasBackground: false,
-        children: /* @__PURE__ */ jsx96(AssistantNameContext.Provider, {
+        children: /* @__PURE__ */ jsx98(AssistantNameContext.Provider, {
             value: assistant.name,
-            children: /* @__PURE__ */ jsx96(AssistantAvatarContext.Provider, {
-                value: /* @__PURE__ */ jsx96(Avatar6, {
+            children: /* @__PURE__ */ jsx98(AssistantAvatarContext.Provider, {
+                value: /* @__PURE__ */ jsx98(Avatar6, {
                     avatar: assistant.avatar
                 }),
-                children: /* @__PURE__ */ jsx96(MarkdownProvider, {
+                children: /* @__PURE__ */ jsx98(MarkdownProvider, {
                     components: components2,
                     children: children
                 })