@superinterface/react 3.21.1 → 3.22.0

package/dist/index.js

@@ -37820,16 +37820,15 @@ import { c as _c47 } from "react-compiler-runtime";
 import { useMemo as useMemo10 } from "react";
 import { Box as Box9 } from "@radix-ui/themes";
 // src/components/runSteps/RunSteps/index.tsx
-import { c as _c16 } from "react-compiler-runtime";
-import { Flex as Flex5 } from "@radix-ui/themes";
-import { useContext as useContext4 } from "react";
+import { c as _c43 } from "react-compiler-runtime";
+import { Flex as Flex9 } from "@radix-ui/themes";
+import { useContext as useContext7 } from "react";
 // src/contexts/components/ComponentsContext/index.tsx
-import { createContext as createContext3 } from "react";
+import { createContext as createContext6 } from "react";
 // src/components/runSteps/RunStep/index.tsx
 import { c as _c11 } from "react-compiler-runtime";
 // src/components/runSteps/RunStep/ToolCalls/index.tsx
 import { c as _c10 } from "react-compiler-runtime";
-import { useContext as useContext3 } from "react";
 import { Flex as Flex3 } from "@radix-ui/themes";
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx
 import { c as _c9 } from "react-compiler-runtime";
@@ -38245,6 +38244,11 @@ var ToolCall = function(t0) {
     }
     return t1;
 };
+// src/hooks/components/useComponents.ts
+import { useContext as useContext3 } from "react";
+var useComponents = function() {
+    return useContext3(ComponentsContext);
+};
 // src/components/runSteps/RunStep/ToolCalls/index.tsx
 import { jsx as _jsx11, jsxs as _jsxs5 } from "react/jsx-runtime";
 var Root = function(t0) {
@@ -38269,17 +38273,17 @@ var Root = function(t0) {
 };
 var StartingToolCalls = function() {
     var $ = _c10(2);
-    var componentsContext = useContext3(ComponentsContext);
-    var StartingToolCalls3 = componentsContext.components.StartingToolCalls;
-    var t0;
+    var _useComponents = useComponents(), t0 = _useComponents.components;
+    var StartingToolCalls3 = t0.StartingToolCalls;
+    var t1;
     if ($[0] !== StartingToolCalls3) {
-        t0 = /* @__PURE__ */ _jsx11(StartingToolCalls3, {});
+        t1 = /* @__PURE__ */ _jsx11(StartingToolCalls3, {});
         $[0] = StartingToolCalls3;
-        $[1] = t0;
+        $[1] = t1;
     } else {
-        t0 = $[1];
+        t1 = $[1];
     }
-    return t0;
+    return t1;
 };
 var ToolCalls = function(t0) {
     var $ = _c10(12);
@@ -38635,114 +38639,10 @@ var StartingToolCalls2 = function() {
     }
     return t1;
 };
-// src/contexts/components/ComponentsContext/index.tsx
-var ComponentsContext = /* @__PURE__ */ createContext3({
-    components: {
-        RunStep: RunStep,
-        Function: Function2,
-        StartingToolCalls: StartingToolCalls2
-    }
-});
-// src/components/runSteps/RunSteps/index.tsx
-import { jsx as _jsx17 } from "react/jsx-runtime";
-var RunSteps = function(t0) {
-    var $ = _c16(7);
-    var runSteps = t0.runSteps;
-    var componentsContext = useContext4(ComponentsContext);
-    var Component2 = componentsContext.components.RunStep;
-    var t1;
-    if ($[0] !== Component2 || $[1] !== runSteps) {
-        var _t;
-        if ($[3] !== Component2) {
-            _t = function(runStep) {
-                return /* @__PURE__ */ _jsx17(Component2, {
-                    runStep: runStep
-                }, runStep.id);
-            };
-            $[3] = Component2;
-            $[4] = _t;
-        } else {
-            _t = $[4];
-        }
-        t1 = runSteps.map(_t);
-        $[0] = Component2;
-        $[1] = runSteps;
-        $[2] = t1;
-    } else {
-        t1 = $[2];
-    }
-    var t2;
-    if ($[5] !== t1) {
-        t2 = /* @__PURE__ */ _jsx17(Flex5, {
-            direction: "column-reverse",
-            children: t1
-        });
-        $[5] = t1;
-        $[6] = t2;
-    } else {
-        t2 = $[6];
-    }
-    return t2;
-};
-// src/contexts/messages/MessageContext/index.ts
-import { createContext as createContext4 } from "react";
-var MessageContext = /* @__PURE__ */ createContext4({
-    message: null
-});
-// src/components/threads/Thread/Message/Provider.tsx
-var Provider = MessageContext.Provider;
-// src/components/threads/Thread/Message/Attachments/index.tsx
-import { c as _c17 } from "react-compiler-runtime";
-import { Flex as Flex6, Badge } from "@radix-ui/themes";
-import { FileIcon } from "@radix-ui/react-icons";
-import { jsx as _jsx18, jsxs as _jsxs9 } from "react/jsx-runtime";
-var Attachments = function(t0) {
-    var _message$attachments;
-    var $ = _c17(4);
-    var message = t0.message;
-    if (!((_message$attachments = message.attachments) !== null && _message$attachments !== void 0 && _message$attachments.length)) {
-        return null;
-    }
-    var t1;
-    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-        t1 = /* @__PURE__ */ _jsx18(FileIcon, {});
-        $[0] = t1;
-    } else {
-        t1 = $[0];
-    }
-    var t2 = message.attachments.length > 1 ? "s" : "";
-    var t3;
-    if ($[1] !== message.attachments.length || $[2] !== t2) {
-        t3 = /* @__PURE__ */ _jsx18(Flex6, {
-            align: "start",
-            pb: "1",
-            children: /* @__PURE__ */ _jsxs9(Badge, {
-                color: "gray",
-                variant: "surface",
-                children: [
-                    t1,
-                    message.attachments.length,
-                    " file",
-                    t2
-                ]
-            })
-        });
-        $[1] = message.attachments.length;
-        $[2] = t2;
-        $[3] = t3;
-    } else {
-        t3 = $[3];
-    }
-    return t3;
-};
-// src/components/messages/MessageContent/index.tsx
-import { c as _c46 } from "react-compiler-runtime";
-// src/components/messages/MessageContent/ContentPart/index.tsx
-import { c as _c45 } from "react-compiler-runtime";
-// src/components/messages/MessageContent/ContentPart/TextContent.tsx
-import { c as _c43 } from "react-compiler-runtime";
+// src/components/contents/TextContent.tsx
+import { c as _c41 } from "react-compiler-runtime";
 import React, { useState as useState3, useEffect as useEffect2, useMemo as useMemo9 } from "react";
-import { Badge as Badge2 } from "@radix-ui/themes";
+import { Badge } from "@radix-ui/themes";
 import { compile } from "@mdx-js/mdx";
 import { MDXProvider, useMDXComponents } from "@mdx-js/react";
 import * as runtime from "react/jsx-runtime";
@@ -38888,17 +38788,17 @@ var recmaFallbackComponentPlugin = function() {
     };
 };
 // src/hooks/markdown/useMarkdownContext/index.ts
-import { useContext as useContext6 } from "react";
+import { useContext as useContext5 } from "react";
 // src/contexts/markdown/MarkdownContext/index.ts
-import { createContext as createContext6 } from "react";
+import { createContext as createContext4 } from "react";
 // src/contexts/markdown/MarkdownContext/lib/components/index.tsx
 import { Heading, Table } from "@radix-ui/themes";
 // src/contexts/markdown/MarkdownContext/lib/components/Paragraph.tsx
-import { c as _c18 } from "react-compiler-runtime";
+import { c as _c16 } from "react-compiler-runtime";
 import { Box as Box3, Text as Text3 } from "@radix-ui/themes";
-import { jsx as _jsx19 } from "react/jsx-runtime";
+import { jsx as _jsx17 } from "react/jsx-runtime";
 var Paragraph = function(t0) {
-    var $ = _c18(3);
+    var $ = _c16(3);
     var children = t0.children;
     var t1;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -38912,9 +38812,9 @@ var Paragraph = function(t0) {
     }
     var t2;
     if ($[1] !== children) {
-        t2 = /* @__PURE__ */ _jsx19(Box3, {
+        t2 = /* @__PURE__ */ _jsx17(Box3, {
             pb: "3",
-            children: /* @__PURE__ */ _jsx19(Text3, {
+            children: /* @__PURE__ */ _jsx17(Text3, {
                 size: "3",
                 style: t1,
                 children: children
@@ -38928,16 +38828,16 @@ var Paragraph = function(t0) {
     return t2;
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Link.tsx
-import { c as _c19 } from "react-compiler-runtime";
+import { c as _c17 } from "react-compiler-runtime";
 import { Link as RadixLink } from "@radix-ui/themes";
-import { jsx as _jsx20 } from "react/jsx-runtime";
+import { jsx as _jsx18 } from "react/jsx-runtime";
 var Link = function(t0) {
-    var $ = _c19(5);
+    var $ = _c17(5);
     var children = t0.children, href = t0.href, download = t0.download, t1 = t0.target;
     var target = t1 === void 0 ? "_blank" : t1;
     var t2;
     if ($[0] !== children || $[1] !== download || $[2] !== href || $[3] !== target) {
-        t2 = /* @__PURE__ */ _jsx20(RadixLink, {
+        t2 = /* @__PURE__ */ _jsx18(RadixLink, {
             href: href,
             target: target,
             download: download,
@@ -38954,11 +38854,11 @@ var Link = function(t0) {
     return t2;
 };
 // src/contexts/markdown/MarkdownContext/lib/components/UnorderedList.tsx
-import { c as _c20 } from "react-compiler-runtime";
+import { c as _c18 } from "react-compiler-runtime";
 import { Box as Box4 } from "@radix-ui/themes";
-import { jsx as _jsx21 } from "react/jsx-runtime";
+import { jsx as _jsx19 } from "react/jsx-runtime";
 var UnorderedList = function(t0) {
-    var $ = _c20(3);
+    var $ = _c18(3);
     var children = t0.children;
     var t1;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -38971,10 +38871,10 @@ var UnorderedList = function(t0) {
     }
     var t2;
     if ($[1] !== children) {
-        t2 = /* @__PURE__ */ _jsx21(Box4, {
+        t2 = /* @__PURE__ */ _jsx19(Box4, {
             pb: "3",
             asChild: true,
-            children: /* @__PURE__ */ _jsx21("ul", {
+            children: /* @__PURE__ */ _jsx19("ul", {
                 style: t1,
                 children: children
             })
@@ -38987,11 +38887,11 @@ var UnorderedList = function(t0) {
     return t2;
 };
 // src/contexts/markdown/MarkdownContext/lib/components/OrderedList.tsx
-import { c as _c21 } from "react-compiler-runtime";
+import { c as _c19 } from "react-compiler-runtime";
 import { Box as Box5 } from "@radix-ui/themes";
-import { jsx as _jsx22 } from "react/jsx-runtime";
+import { jsx as _jsx20 } from "react/jsx-runtime";
 var OrderedList = function(t0) {
-    var $ = _c21(3);
+    var $ = _c19(3);
     var children = t0.children;
     var t1;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -39004,10 +38904,10 @@ var OrderedList = function(t0) {
     }
     var t2;
     if ($[1] !== children) {
-        t2 = /* @__PURE__ */ _jsx22(Box5, {
+        t2 = /* @__PURE__ */ _jsx20(Box5, {
             pb: "3",
             asChild: true,
-            children: /* @__PURE__ */ _jsx22("ol", {
+            children: /* @__PURE__ */ _jsx20("ol", {
                 style: t1,
                 children: children
             })
@@ -39020,11 +38920,11 @@ var OrderedList = function(t0) {
     return t2;
 };
 // src/contexts/markdown/MarkdownContext/lib/components/ListItem.tsx
-import { c as _c22 } from "react-compiler-runtime";
+import { c as _c20 } from "react-compiler-runtime";
 import { Box as Box6 } from "@radix-ui/themes";
-import { jsx as _jsx23 } from "react/jsx-runtime";
+import { jsx as _jsx21 } from "react/jsx-runtime";
 var ListItem = function(t0) {
-    var $ = _c22(3);
+    var $ = _c20(3);
     var children = t0.children;
     var t1;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -39037,9 +38937,9 @@ var ListItem = function(t0) {
     }
     var t2;
     if ($[1] !== children) {
-        t2 = /* @__PURE__ */ _jsx23(Box6, {
+        t2 = /* @__PURE__ */ _jsx21(Box6, {
             pb: "1",
-            children: /* @__PURE__ */ _jsx23("li", {
+            children: /* @__PURE__ */ _jsx21("li", {
                 style: t1,
                 children: children
             })
@@ -39052,15 +38952,15 @@ var ListItem = function(t0) {
     return t2;
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Strong.tsx
-import { c as _c23 } from "react-compiler-runtime";
+import { c as _c21 } from "react-compiler-runtime";
 import { Strong as RadixStrong } from "@radix-ui/themes";
-import { jsx as _jsx24 } from "react/jsx-runtime";
+import { jsx as _jsx22 } from "react/jsx-runtime";
 var Strong = function(t0) {
-    var $ = _c23(2);
+    var $ = _c21(2);
     var children = t0.children;
     var t1;
     if ($[0] !== children) {
-        t1 = /* @__PURE__ */ _jsx24(RadixStrong, {
+        t1 = /* @__PURE__ */ _jsx22(RadixStrong, {
             children: children
         });
         $[0] = children;
@@ -39071,11 +38971,11 @@ var Strong = function(t0) {
     return t1;
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Pre.tsx
-import { c as _c24 } from "react-compiler-runtime";
+import { c as _c22 } from "react-compiler-runtime";
 import { Box as Box7 } from "@radix-ui/themes";
-import { jsx as _jsx25 } from "react/jsx-runtime";
+import { jsx as _jsx23 } from "react/jsx-runtime";
 var Pre = function(t0) {
-    var $ = _c24(3);
+    var $ = _c22(3);
     var children = t0.children;
     var t1;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -39089,7 +38989,7 @@ var Pre = function(t0) {
     }
     var t2;
     if ($[1] !== children) {
-        t2 = /* @__PURE__ */ _jsx25(Box7, {
+        t2 = /* @__PURE__ */ _jsx23(Box7, {
             style: t1,
             children: children
         });
@@ -39101,16 +39001,16 @@ var Pre = function(t0) {
     return t2;
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Code.tsx
-import { c as _c30 } from "react-compiler-runtime";
+import { c as _c28 } from "react-compiler-runtime";
 import { Code as RadixCode } from "@radix-ui/themes";
 // src/components/suggestions/Suggestions/index.tsx
-import { c as _c29 } from "react-compiler-runtime";
+import { c as _c27 } from "react-compiler-runtime";
 import { useMemo as useMemo6 } from "react";
 // src/hooks/messages/useLatestMessage/index.ts
-import { c as _c26 } from "react-compiler-runtime";
+import { c as _c24 } from "react-compiler-runtime";
 import { useMemo as useMemo3 } from "react";
 // src/hooks/messages/useMessages/index.tsx
-import { c as _c25 } from "react-compiler-runtime";
+import { c as _c23 } from "react-compiler-runtime";
 import { useMemo as useMemo2 } from "react";
 import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
 // src/lib/threads/queryOptions/index.ts
@@ -39384,7 +39284,7 @@ var messages = function(_ref) {
     }, []);
 };
 var useMessages = function() {
-    var $ = _c25(9);
+    var $ = _c23(9);
     var queryClient = useQueryClient();
     var threadContext = useSuperinterfaceContext();
     var superinterfaceContext = useSuperinterfaceContext();
@@ -39473,7 +39373,7 @@ function _toPrimitive5(t, r) {
     return ("string" === r ? String : Number)(t);
 }
 var useLatestMessage = function() {
-    var $ = _c26(3);
+    var $ = _c24(3);
     var props = useMessages();
     var t0;
     var t1 = props.messages[0] || null;
@@ -39496,11 +39396,11 @@ import { useMemo as useMemo5 } from "react";
 import { isEmpty } from "radash";
 import { onlyText } from "react-children-utilities";
 // src/hooks/messages/useIsMutatingMessage/index.ts
-import { c as _c27 } from "react-compiler-runtime";
+import { c as _c25 } from "react-compiler-runtime";
 import { useMemo as useMemo4 } from "react";
 import { useIsMutating } from "@tanstack/react-query";
 var useIsMutatingMessage = function() {
-    var $ = _c27(2);
+    var $ = _c25(2);
     var threadContext = useSuperinterfaceContext();
     var t0;
     if ($[0] !== threadContext.variables) {
@@ -39522,9 +39422,9 @@ var useIsMutatingMessage = function() {
     return isMutatingMessage;
 };
 // src/components/suggestions/Suggestions/Content.tsx
-import { Flex as Flex7 } from "@radix-ui/themes";
+import { Flex as Flex5 } from "@radix-ui/themes";
 // src/components/suggestions/Suggestions/Item.tsx
-import { c as _c28 } from "react-compiler-runtime";
+import { c as _c26 } from "react-compiler-runtime";
 import { ArrowUpIcon } from "@radix-ui/react-icons";
 import { Text as Text4, Button as Button2, Spinner } from "@radix-ui/themes";
 // src/hooks/messages/useCreateMessage/index.ts
@@ -40938,16 +40838,16 @@ var useCreateMessage = function useCreateMessage2() {
 // src/components/suggestions/Suggestions/Item.tsx
 import { useQueryClient as useQueryClient3 } from "@tanstack/react-query";
 // src/hooks/toasts/useToasts/index.ts
-import { useContext as useContext5 } from "react";
+import { useContext as useContext4 } from "react";
 // src/contexts/toasts/ToastsContext/index.ts
-import { createContext as createContext5 } from "react";
-var ToastsContext = /* @__PURE__ */ createContext5({
+import { createContext as createContext3 } from "react";
+var ToastsContext = /* @__PURE__ */ createContext3({
     toasts: [],
     addToast: function() {}
 });
 // src/hooks/toasts/useToasts/index.ts
 var useToasts = function() {
-    return useContext5(ToastsContext);
+    return useContext4(ToastsContext);
 };
 // src/lib/errors/createMessageDefaultOnError.ts
 var createMessageDefaultOnError = function(_ref) {
@@ -40975,7 +40875,7 @@ var createMessageDefaultOnError = function(_ref) {
     };
 };
 // src/components/suggestions/Suggestions/Item.tsx
-import { jsx as _jsx26, jsxs as _jsxs10 } from "react/jsx-runtime";
+import { jsx as _jsx24, jsxs as _jsxs9 } from "react/jsx-runtime";
 function ownKeys19(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -41020,7 +40920,7 @@ function _toPrimitive19(t, r) {
     return ("string" === r ? String : Number)(t);
 }
 var Item = function(t0) {
-    var $ = _c28(16);
+    var $ = _c26(16);
     var suggestion = t0.suggestion, isDisabled = t0.isDisabled, className = t0.className, style = t0.style;
     var addToast = useToasts().addToast;
     var queryClient = useQueryClient3();
@@ -41065,7 +40965,7 @@ var Item = function(t0) {
     }
     var t4;
     if ($[9] !== className || $[10] !== isDisabled || $[11] !== isPending || $[12] !== style || $[13] !== suggestion || $[14] !== t3) {
-        t4 = /* @__PURE__ */ _jsx26(Content3, {
+        t4 = /* @__PURE__ */ _jsx24(Content3, {
             onClick: t3,
             isDisabled: isDisabled,
             isPending: isPending,
@@ -41086,7 +40986,7 @@ var Item = function(t0) {
     return t4;
 };
 var Content3 = function(t0) {
-    var $ = _c28(16);
+    var $ = _c26(16);
     var onClick = t0.onClick, isDisabled = t0.isDisabled, isPending = t0.isPending, children = t0.children, className = t0.className, style = t0.style;
     var t1;
     if ($[0] !== style) {
@@ -41110,7 +41010,7 @@ var Content3 = function(t0) {
     }
     var t3;
     if ($[4] !== children) {
-        t3 = /* @__PURE__ */ _jsx26(Text4, {
+        t3 = /* @__PURE__ */ _jsx24(Text4, {
             size: "1",
             weight: "regular",
             children: children
@@ -41122,7 +41022,7 @@ var Content3 = function(t0) {
     }
     var t4;
     if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-        t4 = /* @__PURE__ */ _jsx26(ArrowUpIcon, {
+        t4 = /* @__PURE__ */ _jsx24(ArrowUpIcon, {
             style: {
                 flexShrink: 0
             }
@@ -41133,7 +41033,7 @@ var Content3 = function(t0) {
     }
     var t5;
     if ($[7] !== isPending) {
-        t5 = /* @__PURE__ */ _jsx26(Spinner, {
+        t5 = /* @__PURE__ */ _jsx24(Spinner, {
             loading: isPending,
             children: t4
         });
@@ -41144,7 +41044,7 @@ var Content3 = function(t0) {
     }
     var t6;
     if ($[9] !== className || $[10] !== isDisabled || $[11] !== onClick || $[12] !== t2 || $[13] !== t3 || $[14] !== t5) {
-        t6 = /* @__PURE__ */ _jsxs10(Button2, {
+        t6 = /* @__PURE__ */ _jsxs9(Button2, {
             className: className,
             variant: "soft",
             onClick: onClick,
@@ -41169,7 +41069,7 @@ var Content3 = function(t0) {
 };
 Item.Content = Content3;
 // src/components/suggestions/Suggestions/Content.tsx
-import { jsx as _jsx27 } from "react/jsx-runtime";
+import { jsx as _jsx25 } from "react/jsx-runtime";
 var Content4 = function(_ref) {
     var children = _ref.children, className = _ref.className, style = _ref.style;
     var isMutatingMessage = useIsMutatingMessage();
@@ -41183,14 +41083,14 @@ var Content4 = function(_ref) {
         children
     ]);
     if (isEmpty(suggestions)) return null;
-    return /* @__PURE__ */ _jsx27(Flex7, {
+    return /* @__PURE__ */ _jsx25(Flex5, {
         gap: "2",
         py: "2",
         wrap: "wrap",
         className: className,
         style: style,
         children: suggestions.map(function(suggestion) {
-            return /* @__PURE__ */ _jsx27(Item, {
+            return /* @__PURE__ */ _jsx25(Item, {
                 suggestion: suggestion,
                 isDisabled: isMutatingMessage
             }, suggestion);
@@ -41198,10 +41098,10 @@ var Content4 = function(_ref) {
     });
 };
 // src/components/suggestions/Suggestions/index.tsx
-import { jsx as _jsx28 } from "react/jsx-runtime";
+import { jsx as _jsx26 } from "react/jsx-runtime";
 var Suggestions = function(t0) {
     var _latestMessageProps$l;
-    var $ = _c29(4);
+    var $ = _c27(4);
     var children = t0.children, className = t0.className, style = t0.style;
     var latestMessageProps = useLatestMessage();
     var t1;
@@ -41215,7 +41115,7 @@ var Suggestions = function(t0) {
     }
     var t2;
     if ($[0] !== children || $[1] !== className || $[2] !== style) {
-        t2 = /* @__PURE__ */ _jsx28(Content4, {
+        t2 = /* @__PURE__ */ _jsx26(Content4, {
             className: className,
             style: style,
             children: children
@@ -41231,14 +41131,14 @@ var Suggestions = function(t0) {
 };
 Suggestions.Item = Item;
 // src/contexts/markdown/MarkdownContext/lib/components/Code.tsx
-import { jsx as _jsx29 } from "react/jsx-runtime";
+import { jsx as _jsx27 } from "react/jsx-runtime";
 var Code3 = function(t0) {
-    var $ = _c30(5);
+    var $ = _c28(5);
     var children = t0.children, className = t0.className;
     if (className === "language-suggestions") {
         var _t;
         if ($[0] !== children) {
-            _t = /* @__PURE__ */ _jsx29(Suggestions, {
+            _t = /* @__PURE__ */ _jsx27(Suggestions, {
                 children: children
             });
             $[0] = children;
@@ -41259,7 +41159,7 @@ var Code3 = function(t0) {
     }
     var t2;
     if ($[3] !== children) {
-        t2 = /* @__PURE__ */ _jsx29(RadixCode, {
+        t2 = /* @__PURE__ */ _jsx27(RadixCode, {
             style: t1,
             children: children
         });
@@ -41271,11 +41171,11 @@ var Code3 = function(t0) {
     return t2;
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Img/index.tsx
-import { c as _c39 } from "react-compiler-runtime";
+import { c as _c37 } from "react-compiler-runtime";
 // src/components/images/Image.tsx
-import { c as _c31 } from "react-compiler-runtime";
+import { c as _c29 } from "react-compiler-runtime";
 import { Box as Box8 } from "@radix-ui/themes";
-import { jsx as _jsx30 } from "react/jsx-runtime";
+import { jsx as _jsx28 } from "react/jsx-runtime";
 function ownKeys20(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -41320,7 +41220,7 @@ function _toPrimitive20(t, r) {
     return ("string" === r ? String : Number)(t);
 }
 var Image = function(props) {
-    var $ = _c31(3);
+    var $ = _c29(3);
     var t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
         t0 = {
@@ -41333,9 +41233,9 @@ var Image = function(props) {
     }
     var t1;
     if ($[1] !== props) {
-        t1 = /* @__PURE__ */ _jsx30(Box8, {
+        t1 = /* @__PURE__ */ _jsx28(Box8, {
             pb: "3",
-            children: /* @__PURE__ */ _jsx30("img", _objectSpread20(_objectSpread20({}, props), {}, {
+            children: /* @__PURE__ */ _jsx28("img", _objectSpread20(_objectSpread20({}, props), {}, {
                 style: t0
             }))
         });
@@ -41393,26 +41293,26 @@ var isAudioSrc = function(_ref) {
     return src.endsWith(".mp3") || src.endsWith(".wav");
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Img/Video/index.tsx
-import { c as _c37 } from "react-compiler-runtime";
-import { Flex as Flex8 } from "@radix-ui/themes";
+import { c as _c35 } from "react-compiler-runtime";
+import { Flex as Flex6 } from "@radix-ui/themes";
 import "@vidstack/react/player/styles/base.css";
 import { MediaPlayer, MediaProvider, Controls } from "@vidstack/react";
 // src/components/media/PlayButton.tsx
-import { c as _c32 } from "react-compiler-runtime";
+import { c as _c30 } from "react-compiler-runtime";
 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 _jsx31 } from "react/jsx-runtime";
+import { jsx as _jsx29 } from "react/jsx-runtime";
 var PlayButton = function() {
-    var $ = _c32(2);
+    var $ = _c30(2);
     var isPaused = useMediaState("paused");
     var t0;
     if ($[0] !== isPaused) {
-        t0 = /* @__PURE__ */ _jsx31(IconButton, {
+        t0 = /* @__PURE__ */ _jsx29(IconButton, {
             variant: "ghost",
             asChild: true,
-            children: /* @__PURE__ */ _jsx31(VidstackPlayButton, {
-                children: isPaused ? /* @__PURE__ */ _jsx31(PlayIcon, {}) : /* @__PURE__ */ _jsx31(PauseIcon, {})
+            children: /* @__PURE__ */ _jsx29(VidstackPlayButton, {
+                children: isPaused ? /* @__PURE__ */ _jsx29(PlayIcon, {}) : /* @__PURE__ */ _jsx29(PauseIcon, {})
             })
         });
         $[0] = isPaused;
@@ -41423,24 +41323,24 @@ var PlayButton = function() {
     return t0;
 };
 // src/components/media/VolumeButton.tsx
-import { c as _c33 } from "react-compiler-runtime";
+import { c as _c31 } from "react-compiler-runtime";
 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 _jsx32, jsxs as _jsxs11 } from "react/jsx-runtime";
+import { jsx as _jsx30, jsxs as _jsxs10 } from "react/jsx-runtime";
 var VolumeButton = function() {
-    var $ = _c33(13);
+    var $ = _c31(13);
     var volume = useMediaState2("volume");
     var isMuted = useMediaState2("muted");
     var remote = useMediaRemote();
     var t0;
     if ($[0] !== isMuted || $[1] !== volume) {
-        t0 = /* @__PURE__ */ _jsx32(HoverCard.Trigger, {
-            children: /* @__PURE__ */ _jsx32(IconButton2, {
+        t0 = /* @__PURE__ */ _jsx30(HoverCard.Trigger, {
+            children: /* @__PURE__ */ _jsx30(IconButton2, {
                 variant: "ghost",
                 asChild: true,
-                children: /* @__PURE__ */ _jsx32(MuteButton, {
-                    children: isMuted || volume === 0 ? /* @__PURE__ */ _jsx32(SpeakerOffIcon, {}) : /* @__PURE__ */ _jsx32(SpeakerModerateIcon, {})
+                children: /* @__PURE__ */ _jsx30(MuteButton, {
+                    children: isMuted || volume === 0 ? /* @__PURE__ */ _jsx30(SpeakerOffIcon, {}) : /* @__PURE__ */ _jsx30(SpeakerModerateIcon, {})
                 })
             })
         });
@@ -41474,11 +41374,11 @@ var VolumeButton = function() {
     }
     var t4;
     if ($[7] !== t2 || $[8] !== t3) {
-        t4 = /* @__PURE__ */ _jsx32(HoverCard.Content, {
+        t4 = /* @__PURE__ */ _jsx30(HoverCard.Content, {
             size: "1",
             side: "top",
             height: "100px",
-            children: /* @__PURE__ */ _jsx32(Slider, {
+            children: /* @__PURE__ */ _jsx30(Slider, {
                 size: "1",
                 variant: "soft",
                 orientation: "vertical",
@@ -41494,7 +41394,7 @@ var VolumeButton = function() {
     }
     var t5;
     if ($[10] !== t0 || $[11] !== t4) {
-        t5 = /* @__PURE__ */ _jsxs11(HoverCard.Root, {
+        t5 = /* @__PURE__ */ _jsxs10(HoverCard.Root, {
             children: [
                 t0,
                 t4
@@ -41509,13 +41409,13 @@ var VolumeButton = function() {
     return t5;
 };
 // src/components/media/Time.tsx
-import { c as _c34 } from "react-compiler-runtime";
+import { c as _c32 } from "react-compiler-runtime";
 import { useState, useEffect, useMemo as useMemo7 } from "react";
 import { useMediaState as useMediaState3, useMediaRemote as useMediaRemote2 } from "@vidstack/react";
 import { Slider as Slider2 } from "@radix-ui/themes";
-import { jsx as _jsx33 } from "react/jsx-runtime";
+import { jsx as _jsx31 } from "react/jsx-runtime";
 var Time = function() {
-    var $ = _c34(17);
+    var $ = _c32(17);
     var time = useMediaState3("currentTime");
     var duration = useMediaState3("duration");
     var seeking = useMediaState3("seeking");
@@ -41583,7 +41483,7 @@ var Time = function() {
     }
     var t8;
     if ($[11] !== t3 || $[12] !== t4 || $[13] !== t5 || $[14] !== t6 || $[15] !== t7) {
-        t8 = /* @__PURE__ */ _jsx33(Slider2, {
+        t8 = /* @__PURE__ */ _jsx31(Slider2, {
             size: "1",
             variant: "soft",
             value: t3,
@@ -41604,11 +41504,11 @@ var Time = function() {
     return t8;
 };
 // src/components/media/MediaContainer.tsx
-import { c as _c35 } from "react-compiler-runtime";
+import { c as _c33 } from "react-compiler-runtime";
 import { Card, Inset } from "@radix-ui/themes";
-import { jsx as _jsx34 } from "react/jsx-runtime";
+import { jsx as _jsx32 } from "react/jsx-runtime";
 var MediaContainer = function(t0) {
-    var $ = _c35(3);
+    var $ = _c33(3);
     var children = t0.children;
     var t1;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -41622,9 +41522,9 @@ var MediaContainer = function(t0) {
     }
     var t2;
     if ($[1] !== children) {
-        t2 = /* @__PURE__ */ _jsx34(Card, {
+        t2 = /* @__PURE__ */ _jsx32(Card, {
             mb: "3",
-            children: /* @__PURE__ */ _jsx34(Inset, {
+            children: /* @__PURE__ */ _jsx32(Inset, {
                 clip: "padding-box",
                 style: t1,
                 children: children
@@ -41638,21 +41538,21 @@ var MediaContainer = function(t0) {
     return t2;
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Img/Video/FullscreenButton.tsx
-import { c as _c36 } from "react-compiler-runtime";
+import { c as _c34 } from "react-compiler-runtime";
 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 _jsx35 } from "react/jsx-runtime";
+import { jsx as _jsx33 } from "react/jsx-runtime";
 var FullscreenButton = function() {
-    var $ = _c36(2);
+    var $ = _c34(2);
     var isFullscreen = useMediaState4("fullscreen");
     var t0;
     if ($[0] !== isFullscreen) {
-        t0 = /* @__PURE__ */ _jsx35(IconButton3, {
+        t0 = /* @__PURE__ */ _jsx33(IconButton3, {
             variant: "ghost",
             asChild: true,
-            children: /* @__PURE__ */ _jsx35(VidstackFullscreenButton, {
-                children: isFullscreen ? /* @__PURE__ */ _jsx35(ExitFullScreenIcon, {}) : /* @__PURE__ */ _jsx35(EnterFullScreenIcon, {})
+            children: /* @__PURE__ */ _jsx33(VidstackFullscreenButton, {
+                children: isFullscreen ? /* @__PURE__ */ _jsx33(ExitFullScreenIcon, {}) : /* @__PURE__ */ _jsx33(EnterFullScreenIcon, {})
             })
         });
         $[0] = isFullscreen;
@@ -41663,9 +41563,9 @@ var FullscreenButton = function() {
     return t0;
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Img/Video/index.tsx
-import { jsx as _jsx36, jsxs as _jsxs12 } from "react/jsx-runtime";
+import { jsx as _jsx34, jsxs as _jsxs11 } from "react/jsx-runtime";
 var Video = function(t0) {
-    var $ = _c37(9);
+    var $ = _c35(9);
     var src = t0.src;
     var t1 = "video/".concat(src.split(".").pop());
     var t2;
@@ -41683,8 +41583,8 @@ var Video = function(t0) {
     var t3;
     var t4;
     if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-        t3 = /* @__PURE__ */ _jsx36(MediaProvider, {});
-        t4 = /* @__PURE__ */ _jsx36("style", {
+        t3 = /* @__PURE__ */ _jsx34(MediaProvider, {});
+        t4 = /* @__PURE__ */ _jsx34("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        "
         });
         $[3] = t3;
@@ -41705,7 +41605,7 @@ var Video = function(t0) {
     }
     var t6;
     if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-        t6 = /* @__PURE__ */ _jsx36(Flex8, {
+        t6 = /* @__PURE__ */ _jsx34(Flex6, {
             asChild: true,
             position: "absolute",
             bottom: "0",
@@ -41714,18 +41614,18 @@ var Video = function(t0) {
             className: "superinterface-video-controls",
             p: "3",
             style: t5,
-            children: /* @__PURE__ */ _jsx36(Controls.Root, {
-                children: /* @__PURE__ */ _jsx36(Flex8, {
+            children: /* @__PURE__ */ _jsx34(Controls.Root, {
+                children: /* @__PURE__ */ _jsx34(Flex6, {
                     asChild: true,
                     align: "center",
                     gap: "3",
                     flexGrow: "1",
-                    children: /* @__PURE__ */ _jsxs12(Controls.Group, {
+                    children: /* @__PURE__ */ _jsxs11(Controls.Group, {
                         children: [
-                            /* @__PURE__ */ _jsx36(PlayButton, {}),
-                            /* @__PURE__ */ _jsx36(Time, {}),
-                            /* @__PURE__ */ _jsx36(VolumeButton, {}),
-                            /* @__PURE__ */ _jsx36(FullscreenButton, {})
+                            /* @__PURE__ */ _jsx34(PlayButton, {}),
+                            /* @__PURE__ */ _jsx34(Time, {}),
+                            /* @__PURE__ */ _jsx34(VolumeButton, {}),
+                            /* @__PURE__ */ _jsx34(FullscreenButton, {})
                         ]
                     })
                 })
@@ -41737,8 +41637,8 @@ var Video = function(t0) {
     }
     var t7;
     if ($[7] !== t2) {
-        t7 = /* @__PURE__ */ _jsx36(MediaContainer, {
-            children: /* @__PURE__ */ _jsxs12(MediaPlayer, {
+        t7 = /* @__PURE__ */ _jsx34(MediaContainer, {
+            children: /* @__PURE__ */ _jsxs11(MediaPlayer, {
                 src: t2,
                 playsInline: true,
                 hideControlsOnMouseLeave: true,
@@ -41758,13 +41658,13 @@ var Video = function(t0) {
     return t7;
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Img/Audio/index.tsx
-import { c as _c38 } from "react-compiler-runtime";
-import { Flex as Flex9 } from "@radix-ui/themes";
+import { c as _c36 } from "react-compiler-runtime";
+import { Flex as Flex7 } 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 _jsx37, jsxs as _jsxs13 } from "react/jsx-runtime";
+import { jsx as _jsx35, jsxs as _jsxs12 } from "react/jsx-runtime";
 var Audio = function(t0) {
-    var $ = _c38(8);
+    var $ = _c36(8);
     var src = t0.src;
     var t1 = "audio/".concat(src.split(".").pop());
     var t2;
@@ -41781,7 +41681,7 @@ var Audio = function(t0) {
     }
     var t3;
     if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-        t3 = /* @__PURE__ */ _jsx37(MediaProvider2, {});
+        t3 = /* @__PURE__ */ _jsx35(MediaProvider2, {});
         $[3] = t3;
     } else {
         t3 = $[3];
@@ -41798,22 +41698,22 @@ var Audio = function(t0) {
     }
     var t5;
     if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-        t5 = /* @__PURE__ */ _jsx37(Flex9, {
+        t5 = /* @__PURE__ */ _jsx35(Flex7, {
             asChild: true,
             p: "3",
             flexGrow: "1",
             style: t4,
-            children: /* @__PURE__ */ _jsx37(Controls2.Root, {
-                children: /* @__PURE__ */ _jsx37(Flex9, {
+            children: /* @__PURE__ */ _jsx35(Controls2.Root, {
+                children: /* @__PURE__ */ _jsx35(Flex7, {
                     asChild: true,
                     align: "center",
                     gap: "3",
                     flexGrow: "1",
-                    children: /* @__PURE__ */ _jsxs13(Controls2.Group, {
+                    children: /* @__PURE__ */ _jsxs12(Controls2.Group, {
                         children: [
-                            /* @__PURE__ */ _jsx37(PlayButton, {}),
-                            /* @__PURE__ */ _jsx37(Time, {}),
-                            /* @__PURE__ */ _jsx37(VolumeButton, {})
+                            /* @__PURE__ */ _jsx35(PlayButton, {}),
+                            /* @__PURE__ */ _jsx35(Time, {}),
+                            /* @__PURE__ */ _jsx35(VolumeButton, {})
                         ]
                     })
                 })
@@ -41825,8 +41725,8 @@ var Audio = function(t0) {
     }
     var t6;
     if ($[6] !== t2) {
-        t6 = /* @__PURE__ */ _jsx37(MediaContainer, {
-            children: /* @__PURE__ */ _jsxs13(MediaPlayer2, {
+        t6 = /* @__PURE__ */ _jsx35(MediaContainer, {
+            children: /* @__PURE__ */ _jsxs12(MediaPlayer2, {
                 src: t2,
                 viewType: "audio",
                 crossOrigin: true,
@@ -41845,7 +41745,7 @@ var Audio = function(t0) {
     return t6;
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Img/index.tsx
-import { jsx as _jsx38 } from "react/jsx-runtime";
+import { jsx as _jsx36 } from "react/jsx-runtime";
 function ownKeys21(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -41890,11 +41790,11 @@ function _toPrimitive21(t, r) {
     return ("string" === r ? String : Number)(t);
 }
 var Img = function(props) {
-    var $ = _c39(8);
+    var $ = _c37(8);
     if (!props.src) {
         var t0;
         if ($[0] !== props) {
-            t0 = /* @__PURE__ */ _jsx38(Image, _objectSpread21({}, props));
+            t0 = /* @__PURE__ */ _jsx36(Image, _objectSpread21({}, props));
             $[0] = props;
             $[1] = t0;
         } else {
@@ -41907,7 +41807,7 @@ var Img = function(props) {
         })) {
             var _t;
             if ($[2] !== props.src) {
-                _t = /* @__PURE__ */ _jsx38(Video, {
+                _t = /* @__PURE__ */ _jsx36(Video, {
                     src: props.src
                 });
                 $[2] = props.src;
@@ -41922,7 +41822,7 @@ var Img = function(props) {
             })) {
                 var _t2;
                 if ($[4] !== props.src) {
-                    _t2 = /* @__PURE__ */ _jsx38(Audio, {
+                    _t2 = /* @__PURE__ */ _jsx36(Audio, {
                         src: props.src
                     });
                     $[4] = props.src;
@@ -41934,7 +41834,7 @@ var Img = function(props) {
             } else {
                 var _t3;
                 if ($[6] !== props) {
-                    _t3 = /* @__PURE__ */ _jsx38(Image, _objectSpread21({}, props));
+                    _t3 = /* @__PURE__ */ _jsx36(Image, _objectSpread21({}, props));
                     $[6] = props;
                     $[7] = _t3;
                 } else {
@@ -41946,20 +41846,20 @@ var Img = function(props) {
     }
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Annotation/index.tsx
-import { c as _c42 } from "react-compiler-runtime";
+import { c as _c40 } from "react-compiler-runtime";
 import { QuoteIcon } from "@radix-ui/react-icons";
 // src/components/annotations/FilePathAnnotation.tsx
-import { c as _c40 } from "react-compiler-runtime";
-import { jsx as _jsx39 } from "react/jsx-runtime";
+import { c as _c38 } from "react-compiler-runtime";
+import { jsx as _jsx37 } from "react/jsx-runtime";
 var FilePathAnnotation = function(t0) {
-    var $ = _c40(3);
+    var $ = _c38(3);
     var annotation = t0.annotation, children = t0.children;
     var superinterfaceContext = useSuperinterfaceContext();
     var nextSearchParams = new URLSearchParams(superinterfaceContext.variables);
     var t1 = "".concat(superinterfaceContext.baseUrl, "/files/").concat(annotation.file_path.file_id, "/contents?").concat(nextSearchParams);
     var t2;
     if ($[0] !== children || $[1] !== t1) {
-        t2 = /* @__PURE__ */ _jsx39(Link, {
+        t2 = /* @__PURE__ */ _jsx37(Link, {
             href: t1,
             target: "_self",
             download: true,
@@ -41974,16 +41874,16 @@ var FilePathAnnotation = function(t0) {
     return t2;
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Annotation/AnnotationBase.tsx
-import { c as _c41 } from "react-compiler-runtime";
-import { IconButton as IconButton4, Popover as Popover4, Flex as Flex10, Text as Text5 } from "@radix-ui/themes";
-import { jsx as _jsx40, jsxs as _jsxs14 } from "react/jsx-runtime";
+import { c as _c39 } from "react-compiler-runtime";
+import { IconButton as IconButton4, Popover as Popover4, Flex as Flex8, Text as Text5 } from "@radix-ui/themes";
+import { jsx as _jsx38, jsxs as _jsxs13 } from "react/jsx-runtime";
 var AnnotationBase = function(t0) {
-    var $ = _c41(7);
+    var $ = _c39(7);
     var icon = t0.icon, content2 = t0.content;
     var t1;
     if ($[0] !== icon) {
-        t1 = /* @__PURE__ */ _jsx40(Popover4.Trigger, {
-            children: /* @__PURE__ */ _jsx40(IconButton4, {
+        t1 = /* @__PURE__ */ _jsx38(Popover4.Trigger, {
+            children: /* @__PURE__ */ _jsx38(IconButton4, {
                 variant: "soft",
                 color: "gray",
                 size: "1",
@@ -41997,11 +41897,11 @@ var AnnotationBase = function(t0) {
     }
     var t2;
     if ($[2] !== content2) {
-        t2 = /* @__PURE__ */ _jsx40(Popover4.Content, {
+        t2 = /* @__PURE__ */ _jsx38(Popover4.Content, {
             size: "1",
-            children: /* @__PURE__ */ _jsx40(Flex10, {
+            children: /* @__PURE__ */ _jsx38(Flex8, {
                 direction: "column",
-                children: /* @__PURE__ */ _jsx40(Text5, {
+                children: /* @__PURE__ */ _jsx38(Text5, {
                     size: "1",
                     color: "gray",
                     children: content2
@@ -42015,7 +41915,7 @@ var AnnotationBase = function(t0) {
     }
     var t3;
     if ($[4] !== t1 || $[5] !== t2) {
-        t3 = /* @__PURE__ */ _jsxs14(Popover4.Root, {
+        t3 = /* @__PURE__ */ _jsxs13(Popover4.Root, {
             children: [
                 t1,
                 t2
@@ -42030,7 +41930,7 @@ var AnnotationBase = function(t0) {
     return t3;
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Annotation/index.tsx
-import { jsx as _jsx41 } from "react/jsx-runtime";
+import { jsx as _jsx39 } from "react/jsx-runtime";
 var _excluded = [
     "children"
 ];
@@ -42053,7 +41953,7 @@ function _objectWithoutPropertiesLoose(r, e) {
     return t;
 }
 var Annotation = function(t0) {
-    var $ = _c42(9);
+    var $ = _c40(9);
     var children;
     var rest;
     if ($[0] !== t0) {
@@ -42081,8 +41981,8 @@ var Annotation = function(t0) {
     if (annotation.type === "file_citation") {
         var t2;
         if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-            t2 = /* @__PURE__ */ _jsx41(AnnotationBase, {
-                icon: /* @__PURE__ */ _jsx41(QuoteIcon, {}),
+            t2 = /* @__PURE__ */ _jsx39(AnnotationBase, {
+                icon: /* @__PURE__ */ _jsx39(QuoteIcon, {}),
                 content: "File cited."
             });
             $[5] = t2;
@@ -42094,7 +41994,7 @@ var Annotation = function(t0) {
         if (annotation.type === "file_path") {
             var _t2;
             if ($[6] !== annotation || $[7] !== children) {
-                _t2 = /* @__PURE__ */ _jsx41(FilePathAnnotation, {
+                _t2 = /* @__PURE__ */ _jsx39(FilePathAnnotation, {
                     annotation: annotation,
                     children: children
                 });
@@ -42110,7 +42010,7 @@ var Annotation = function(t0) {
     return null;
 };
 // src/contexts/markdown/MarkdownContext/lib/components/index.tsx
-import { jsx as _jsx42, Fragment as _Fragment, jsxs as _jsxs15 } from "react/jsx-runtime";
+import { jsx as _jsx40, Fragment as _Fragment, jsxs as _jsxs14 } from "react/jsx-runtime";
 var _excluded2 = [
     "width"
 ];
@@ -42187,53 +42087,53 @@ var components = {
     img: Img,
     annotation: Annotation,
     h1: function(props) {
-        return /* @__PURE__ */ _jsx42(Heading, {
+        return /* @__PURE__ */ _jsx40(Heading, {
             as: "h1",
             children: props.children
         });
     },
     h2: function(props) {
-        return /* @__PURE__ */ _jsx42(Heading, {
+        return /* @__PURE__ */ _jsx40(Heading, {
             as: "h2",
             size: "5",
             children: props.children
         });
     },
     h3: function(props) {
-        return /* @__PURE__ */ _jsx42(Heading, {
+        return /* @__PURE__ */ _jsx40(Heading, {
             as: "h3",
             size: "4",
             children: props.children
         });
     },
     h4: function(props) {
-        return /* @__PURE__ */ _jsx42(Heading, {
+        return /* @__PURE__ */ _jsx40(Heading, {
             as: "h4",
             size: "3",
             children: props.children
         });
     },
     h5: function(props) {
-        return /* @__PURE__ */ _jsx42(Heading, {
+        return /* @__PURE__ */ _jsx40(Heading, {
             as: "h5",
             size: "3",
             children: props.children
         });
     },
     h6: function(props) {
-        return /* @__PURE__ */ _jsx42(Heading, {
+        return /* @__PURE__ */ _jsx40(Heading, {
             as: "h6",
             size: "3",
             children: props.children
         });
     },
     table: function(props) {
-        return /* @__PURE__ */ _jsxs15(_Fragment, {
+        return /* @__PURE__ */ _jsxs14(_Fragment, {
             children: [
-                /* @__PURE__ */ _jsx42("style", {
+                /* @__PURE__ */ _jsx40("style", {
                     children: ".rt-TableRootTable { overflow: inherit; }"
                 }),
-                /* @__PURE__ */ _jsx42(Table.Root, _objectSpread22(_objectSpread22({}, props), {}, {
+                /* @__PURE__ */ _jsx40(Table.Root, _objectSpread22(_objectSpread22({}, props), {}, {
                     variant: "surface",
                     mb: "3"
                 }))
@@ -42241,22 +42141,22 @@ var components = {
         });
     },
     thead: function(props) {
-        return /* @__PURE__ */ _jsx42(Table.Header, _objectSpread22({}, props));
+        return /* @__PURE__ */ _jsx40(Table.Header, _objectSpread22({}, props));
     },
     tbody: function(props) {
-        return /* @__PURE__ */ _jsx42(Table.Body, _objectSpread22({}, props));
+        return /* @__PURE__ */ _jsx40(Table.Body, _objectSpread22({}, props));
     },
     tr: function(props) {
-        return /* @__PURE__ */ _jsx42(Table.Row, _objectSpread22({}, props));
+        return /* @__PURE__ */ _jsx40(Table.Row, _objectSpread22({}, props));
     },
     td: function(_ref) {
         var width2 = _ref.width, rest = _objectWithoutProperties2(_ref, _excluded2);
-        return /* @__PURE__ */ _jsx42(Table.Cell, _objectSpread22(_objectSpread22({}, rest), {}, {
+        return /* @__PURE__ */ _jsx40(Table.Cell, _objectSpread22(_objectSpread22({}, rest), {}, {
             width: width2
         }));
     },
     th: function(props) {
-        return /* @__PURE__ */ _jsx42(Table.ColumnHeaderCell, _objectSpread22({}, props));
+        return /* @__PURE__ */ _jsx40(Table.ColumnHeaderCell, _objectSpread22({}, props));
     }
 };
 // src/contexts/markdown/MarkdownContext/lib/getRemarkPlugins.ts
@@ -42597,13 +42497,13 @@ var getRemarkPlugins = function(_ref) {
     ];
 };
 // src/contexts/markdown/MarkdownContext/index.ts
-var MarkdownContext = /* @__PURE__ */ createContext6({
+var MarkdownContext = /* @__PURE__ */ createContext4({
     components: components,
     getRemarkPlugins: getRemarkPlugins
 });
 // src/hooks/markdown/useMarkdownContext/index.ts
 var useMarkdownContext = function() {
-    return useContext6(MarkdownContext);
+    return useContext5(MarkdownContext);
 };
 // src/lib/markdown/escapeInvalidTagNames.ts
 var isValidTagName = function(tagName) {
@@ -42615,8 +42515,8 @@ var escapeInvalidTagNames = function(markdown) {
     });
 };
 // ../../node_modules/react-error-boundary/dist/react-error-boundary.esm.js
-import { createContext as createContext7, Component, createElement, useContext as useContext7, useState as useState2, useMemo as useMemo8, forwardRef } from "react";
-var ErrorBoundaryContext = /* @__PURE__ */ createContext7(null);
+import { createContext as createContext5, Component, createElement, useContext as useContext6, useState as useState2, useMemo as useMemo8, forwardRef } from "react";
+var ErrorBoundaryContext = /* @__PURE__ */ createContext5(null);
 var initialState = {
     didCatch: false,
     error: null
@@ -42725,8 +42625,8 @@ function hasArrayChanged() {
         return !Object.is(item, b[index]);
     });
 }
-// src/components/messages/MessageContent/ContentPart/TextContent.tsx
-import { jsx as _jsx43 } from "react/jsx-runtime";
+// src/components/contents/TextContent.tsx
+import { jsx as _jsx41 } from "react/jsx-runtime";
 function ownKeys24(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -42812,7 +42712,7 @@ var evaluate = /* @__PURE__ */ function() {
     };
 }();
 var TextContent = function(t0) {
-    var $ = _c43(13);
+    var $ = _c41(13);
     var content2 = t0.content;
     var _useMarkdownContext = useMarkdownContext(), getRemarkPlugins2 = _useMarkdownContext.getRemarkPlugins, components2 = _useMarkdownContext.components;
     var t1;
@@ -42914,7 +42814,7 @@ var TextContent = function(t0) {
     }
     var t5;
     if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-        t5 = /* @__PURE__ */ _jsx43(Badge2, {
+        t5 = /* @__PURE__ */ _jsx41(Badge, {
             color: "red",
             mb: "2",
             children: "Could not render message."
@@ -42925,7 +42825,7 @@ var TextContent = function(t0) {
     }
     var t6;
     if ($[8] !== MDXComponent) {
-        t6 = /* @__PURE__ */ _jsx43(MDXComponent, {});
+        t6 = /* @__PURE__ */ _jsx41(MDXComponent, {});
         $[8] = MDXComponent;
         $[9] = t6;
     } else {
@@ -42933,9 +42833,9 @@ var TextContent = function(t0) {
     }
     var t7;
     if ($[10] !== components2 || $[11] !== t6) {
-        t7 = /* @__PURE__ */ _jsx43(ErrorBoundary, {
+        t7 = /* @__PURE__ */ _jsx41(ErrorBoundary, {
             fallback: t5,
-            children: /* @__PURE__ */ _jsx43(MDXProvider, {
+            children: /* @__PURE__ */ _jsx41(MDXProvider, {
                 components: components2,
                 children: t6
             })
@@ -42948,18 +42848,18 @@ var TextContent = function(t0) {
     }
     return t7;
 };
-// src/components/messages/MessageContent/ContentPart/ImageFileContent.tsx
-import { c as _c44 } from "react-compiler-runtime";
-import { jsx as _jsx44 } from "react/jsx-runtime";
+// src/components/contents/ImageFileContent.tsx
+import { c as _c42 } from "react-compiler-runtime";
+import { jsx as _jsx42 } from "react/jsx-runtime";
 var ImageFileContent = function(t0) {
-    var $ = _c44(2);
+    var $ = _c42(2);
     var content2 = t0.content;
     var superinterfaceContext = useSuperinterfaceContext();
     var nextSearchParams = new URLSearchParams(superinterfaceContext.variables);
     var t1 = "".concat(superinterfaceContext.baseUrl, "/files/").concat(content2.image_file.file_id, "/contents?").concat(nextSearchParams);
     var t2;
     if ($[0] !== t1) {
-        t2 = /* @__PURE__ */ _jsx44(Image, {
+        t2 = /* @__PURE__ */ _jsx42(Image, {
             alt: "",
             src: t1
         });
@@ -42970,15 +42870,156 @@ var ImageFileContent = function(t0) {
     }
     return t2;
 };
+// src/contexts/components/ComponentsContext/index.tsx
+var ComponentsContext = /* @__PURE__ */ createContext6({
+    components: {
+        RunStep: RunStep,
+        Function: Function2,
+        StartingToolCalls: StartingToolCalls2,
+        TextContent: TextContent,
+        ImageFileContent: ImageFileContent
+    }
+});
+// src/components/runSteps/RunSteps/index.tsx
+import { jsx as _jsx43 } from "react/jsx-runtime";
+var RunSteps = function(t0) {
+    var $ = _c43(7);
+    var runSteps = t0.runSteps;
+    var componentsContext = useContext7(ComponentsContext);
+    var Component2 = componentsContext.components.RunStep;
+    var t1;
+    if ($[0] !== Component2 || $[1] !== runSteps) {
+        var _t;
+        if ($[3] !== Component2) {
+            _t = function(runStep) {
+                return /* @__PURE__ */ _jsx43(Component2, {
+                    runStep: runStep
+                }, runStep.id);
+            };
+            $[3] = Component2;
+            $[4] = _t;
+        } else {
+            _t = $[4];
+        }
+        t1 = runSteps.map(_t);
+        $[0] = Component2;
+        $[1] = runSteps;
+        $[2] = t1;
+    } else {
+        t1 = $[2];
+    }
+    var t2;
+    if ($[5] !== t1) {
+        t2 = /* @__PURE__ */ _jsx43(Flex9, {
+            direction: "column-reverse",
+            children: t1
+        });
+        $[5] = t1;
+        $[6] = t2;
+    } else {
+        t2 = $[6];
+    }
+    return t2;
+};
+// src/contexts/messages/MessageContext/index.ts
+import { createContext as createContext7 } from "react";
+var MessageContext = /* @__PURE__ */ createContext7({
+    message: null
+});
+// src/components/threads/Thread/Message/Provider.tsx
+var Provider = MessageContext.Provider;
+// src/components/threads/Thread/Message/Attachments/index.tsx
+import { c as _c44 } from "react-compiler-runtime";
+import { Flex as Flex10, Badge as Badge2 } from "@radix-ui/themes";
+import { FileIcon } from "@radix-ui/react-icons";
+import { jsx as _jsx44, jsxs as _jsxs15 } from "react/jsx-runtime";
+var Attachments = function(t0) {
+    var _message$attachments;
+    var $ = _c44(4);
+    var message = t0.message;
+    if (!((_message$attachments = message.attachments) !== null && _message$attachments !== void 0 && _message$attachments.length)) {
+        return null;
+    }
+    var t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t1 = /* @__PURE__ */ _jsx44(FileIcon, {});
+        $[0] = t1;
+    } else {
+        t1 = $[0];
+    }
+    var t2 = message.attachments.length > 1 ? "s" : "";
+    var t3;
+    if ($[1] !== message.attachments.length || $[2] !== t2) {
+        t3 = /* @__PURE__ */ _jsx44(Flex10, {
+            align: "start",
+            pb: "1",
+            children: /* @__PURE__ */ _jsxs15(Badge2, {
+                color: "gray",
+                variant: "surface",
+                children: [
+                    t1,
+                    message.attachments.length,
+                    " file",
+                    t2
+                ]
+            })
+        });
+        $[1] = message.attachments.length;
+        $[2] = t2;
+        $[3] = t3;
+    } else {
+        t3 = $[3];
+    }
+    return t3;
+};
+// src/components/messages/MessageContent/index.tsx
+import { c as _c46 } from "react-compiler-runtime";
 // src/components/messages/MessageContent/ContentPart/index.tsx
+import { c as _c45 } from "react-compiler-runtime";
 import { jsx as _jsx45 } from "react/jsx-runtime";
+var TextContent2 = function(t0) {
+    var $ = _c45(3);
+    var content2 = t0.content;
+    var _useComponents = useComponents(), t1 = _useComponents.components;
+    var TextContent3 = t1.TextContent;
+    var t2;
+    if ($[0] !== TextContent3 || $[1] !== content2) {
+        t2 = /* @__PURE__ */ _jsx45(TextContent3, {
+            content: content2
+        });
+        $[0] = TextContent3;
+        $[1] = content2;
+        $[2] = t2;
+    } else {
+        t2 = $[2];
+    }
+    return t2;
+};
+var ImageFileContent2 = function(t0) {
+    var $ = _c45(3);
+    var content2 = t0.content;
+    var _useComponents = useComponents(), t1 = _useComponents.components;
+    var ImageFileContent3 = t1.ImageFileContent;
+    var t2;
+    if ($[0] !== ImageFileContent3 || $[1] !== content2) {
+        t2 = /* @__PURE__ */ _jsx45(ImageFileContent3, {
+            content: content2
+        });
+        $[0] = ImageFileContent3;
+        $[1] = content2;
+        $[2] = t2;
+    } else {
+        t2 = $[2];
+    }
+    return t2;
+};
 var ContentPart = function(t0) {
     var $ = _c45(4);
     var content2 = t0.content;
     if (content2.type === "text") {
         var t1;
         if ($[0] !== content2) {
-            t1 = /* @__PURE__ */ _jsx45(TextContent, {
+            t1 = /* @__PURE__ */ _jsx45(TextContent2, {
                 content: content2
             });
             $[0] = content2;
@@ -42991,7 +43032,7 @@ var ContentPart = function(t0) {
     if (content2.type === "image_file") {
         var _t;
         if ($[2] !== content2) {
-            _t = /* @__PURE__ */ _jsx45(ImageFileContent, {
+            _t = /* @__PURE__ */ _jsx45(ImageFileContent2, {
                 content: content2
             });
             $[2] = content2;
@@ -50676,12 +50717,6 @@ var Avatar6 = function(t0) {
 // src/components/components/ComponentsProvider.tsx
 import { c as _c104 } from "react-compiler-runtime";
 import { useMemo as useMemo23 } from "react";
-// src/hooks/components/useComponents.ts
-import { useContext as useContext18 } from "react";
-var useComponents = function() {
-    return useContext18(ComponentsContext);
-};
-// src/components/components/ComponentsProvider.tsx
 import { jsx as _jsx102 } from "react/jsx-runtime";
 var _excluded9 = [
     "children"