@superinterface/react 3.22.0 → 3.23.0

package/dist/index.js

@@ -37816,15 +37816,15 @@ import { c as _c72 } from "react-compiler-runtime";
 import { c as _c62 } from "react-compiler-runtime";
 import { Flex as Flex19 } from "@radix-ui/themes";
 // src/components/threads/Thread/Message/index.tsx
-import { c as _c47 } from "react-compiler-runtime";
+import { c as _c53 } from "react-compiler-runtime";
 import { useMemo as useMemo10 } from "react";
-import { Box as Box9 } from "@radix-ui/themes";
+import { Box as Box10 } from "@radix-ui/themes";
 // src/components/runSteps/RunSteps/index.tsx
-import { c as _c43 } from "react-compiler-runtime";
-import { Flex as Flex9 } from "@radix-ui/themes";
-import { useContext as useContext7 } from "react";
+import { c as _c49 } from "react-compiler-runtime";
+import { Flex as Flex14 } from "@radix-ui/themes";
+import { useContext as useContext10 } from "react";
 // src/contexts/components/ComponentsContext/index.tsx
-import { createContext as createContext6 } from "react";
+import { createContext as createContext9 } from "react";
 // src/components/runSteps/RunStep/index.tsx
 import { c as _c11 } from "react-compiler-runtime";
 // src/components/runSteps/RunStep/ToolCalls/index.tsx
@@ -42870,29 +42870,324 @@ var ImageFileContent = function(t0) {
     }
     return t2;
 };
+// src/components/messageGroups/MessageGroup/index.tsx
+import { c as _c48 } from "react-compiler-runtime";
+import { useContext as useContext9 } from "react";
+import { Box as Box9 } from "@radix-ui/themes";
+// src/components/messageGroups/MessageGroup/Name.tsx
+import { c as _c43 } from "react-compiler-runtime";
+import { Flex as Flex9, Text as Text6 } from "@radix-ui/themes";
+import { jsx as _jsx43 } from "react/jsx-runtime";
+var Name = function(t0) {
+    var $ = _c43(2);
+    var children = t0.children;
+    var t1;
+    if ($[0] !== children) {
+        t1 = /* @__PURE__ */ _jsx43(Flex9, {
+            align: "center",
+            height: "var(--space-5)",
+            children: /* @__PURE__ */ _jsx43(Text6, {
+                size: "2",
+                weight: "bold",
+                children: children
+            })
+        });
+        $[0] = children;
+        $[1] = t1;
+    } else {
+        t1 = $[1];
+    }
+    return t1;
+};
+// src/components/messageGroups/MessageGroup/AssistantAvatar.tsx
+import { c as _c44 } from "react-compiler-runtime";
+import { useContext as useContext7 } from "react";
+import { Flex as Flex10 } from "@radix-ui/themes";
+// src/contexts/assistants/AssistantAvatarContext/index.tsx
+import { createContext as createContext6 } from "react";
+import { Avatar } from "@radix-ui/themes";
+import { LightningBoltIcon } from "@radix-ui/react-icons";
+import { jsx as _jsx44 } from "react/jsx-runtime";
+var AssistantAvatarContext = /* @__PURE__ */ createContext6(/* @__PURE__ */ _jsx44(Avatar, {
+    fallback: /* @__PURE__ */ _jsx44(LightningBoltIcon, {}),
+    size: "1"
+}));
+// src/components/messageGroups/MessageGroup/AssistantAvatar.tsx
+import { jsx as _jsx45 } from "react/jsx-runtime";
+var AssistantAvatar = function() {
+    var $ = _c44(3);
+    var AssistantAvatarContextValue = useContext7(AssistantAvatarContext);
+    var t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = {
+            borderRadius: "var(--radius-3)",
+            overflow: "hidden"
+        };
+        $[0] = t0;
+    } else {
+        t0 = $[0];
+    }
+    var t1;
+    if ($[1] !== AssistantAvatarContextValue) {
+        t1 = /* @__PURE__ */ _jsx45(Flex10, {
+            flexShrink: "0",
+            height: "24px",
+            width: "24px",
+            style: t0,
+            children: AssistantAvatarContextValue
+        });
+        $[1] = AssistantAvatarContextValue;
+        $[2] = t1;
+    } else {
+        t1 = $[2];
+    }
+    return t1;
+};
+// src/contexts/assistants/AssistantNameContext/index.tsx
+import { createContext as createContext7 } from "react";
+var AssistantNameContext = /* @__PURE__ */ createContext7("Assistant");
+// src/components/messageGroups/MessageGroup/UserAvatar.tsx
+import { c as _c45 } from "react-compiler-runtime";
+import { useContext as useContext8 } from "react";
+import { Flex as Flex11 } from "@radix-ui/themes";
+// src/contexts/users/UserAvatarContext/index.tsx
+import { createContext as createContext8 } from "react";
+import { Avatar as Avatar2 } from "@radix-ui/themes";
+import { PersonIcon } from "@radix-ui/react-icons";
+import { jsx as _jsx46 } from "react/jsx-runtime";
+var UserAvatarContext = /* @__PURE__ */ createContext8(/* @__PURE__ */ _jsx46(Avatar2, {
+    fallback: /* @__PURE__ */ _jsx46(PersonIcon, {}),
+    size: "1"
+}));
+// src/components/messageGroups/MessageGroup/UserAvatar.tsx
+import { jsx as _jsx47 } from "react/jsx-runtime";
+var UserAvatar = function() {
+    var $ = _c45(3);
+    var UserAvatarContextValue = useContext8(UserAvatarContext);
+    var t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = {
+            borderRadius: "var(--radius-3)",
+            overflow: "hidden"
+        };
+        $[0] = t0;
+    } else {
+        t0 = $[0];
+    }
+    var t1;
+    if ($[1] !== UserAvatarContextValue) {
+        t1 = /* @__PURE__ */ _jsx47(Flex11, {
+            flexShrink: "0",
+            height: "24px",
+            width: "24px",
+            style: t0,
+            children: UserAvatarContextValue
+        });
+        $[1] = UserAvatarContextValue;
+        $[2] = t1;
+    } else {
+        t1 = $[2];
+    }
+    return t1;
+};
+// src/components/messageGroups/MessageGroup/Messages.tsx
+import { c as _c46 } from "react-compiler-runtime";
+import { Flex as Flex12 } from "@radix-ui/themes";
+import { jsx as _jsx48 } from "react/jsx-runtime";
+var Messages = function(t0) {
+    var $ = _c46(4);
+    var messageGroup = t0.messageGroup;
+    var t1;
+    if ($[0] !== messageGroup.messages) {
+        t1 = messageGroup.messages.map(_temp);
+        $[0] = messageGroup.messages;
+        $[1] = t1;
+    } else {
+        t1 = $[1];
+    }
+    var t2;
+    if ($[2] !== t1) {
+        t2 = /* @__PURE__ */ _jsx48(Flex12, {
+            direction: "column-reverse",
+            children: t1
+        });
+        $[2] = t1;
+        $[3] = t2;
+    } else {
+        t2 = $[3];
+    }
+    return t2;
+};
+function _temp(message) {
+    return /* @__PURE__ */ _jsx48(Message, {
+        message: message
+    }, message.id);
+}
+// src/components/messageGroups/MessageGroup/Root.tsx
+import { c as _c47 } from "react-compiler-runtime";
+import { forwardRef as forwardRef2 } from "react";
+import { Flex as Flex13, Container } from "@radix-ui/themes";
+import { jsx as _jsx49 } from "react/jsx-runtime";
+var Root2 = /* @__PURE__ */ forwardRef2(function Root3(t0, ref) {
+    var $ = _c47(7);
+    var children = t0.children, style = t0.style, className = t0.className;
+    var t1;
+    if ($[0] !== children) {
+        t1 = /* @__PURE__ */ _jsx49(Flex13, {
+            flexShrink: "0",
+            gap: "3",
+            children: children
+        });
+        $[0] = children;
+        $[1] = t1;
+    } else {
+        t1 = $[1];
+    }
+    var t2;
+    if ($[2] !== className || $[3] !== ref || $[4] !== style || $[5] !== t1) {
+        t2 = /* @__PURE__ */ _jsx49(Container, {
+            ref: ref,
+            size: "2",
+            flexGrow: "0",
+            className: className,
+            style: style,
+            children: t1
+        });
+        $[2] = className;
+        $[3] = ref;
+        $[4] = style;
+        $[5] = t1;
+        $[6] = t2;
+    } else {
+        t2 = $[6];
+    }
+    return t2;
+});
+// src/components/messageGroups/MessageGroup/index.tsx
+import { jsx as _jsx50, jsxs as _jsxs15, Fragment as _Fragment2 } from "react/jsx-runtime";
+var Content5 = function(t0) {
+    var $ = _c48(12);
+    var messageGroup = t0.messageGroup;
+    var assistantNameContext = useContext9(AssistantNameContext);
+    var t1;
+    if ($[0] !== messageGroup.role) {
+        t1 = messageGroup.role === "user" ? /* @__PURE__ */ _jsx50(UserAvatar, {}) : /* @__PURE__ */ _jsx50(AssistantAvatar, {});
+        $[0] = messageGroup.role;
+        $[1] = t1;
+    } else {
+        t1 = $[1];
+    }
+    var t2 = messageGroup.role === "user" ? "You" : assistantNameContext;
+    var t3;
+    if ($[2] !== t2) {
+        t3 = /* @__PURE__ */ _jsx50(Name, {
+            children: t2
+        });
+        $[2] = t2;
+        $[3] = t3;
+    } else {
+        t3 = $[3];
+    }
+    var t4;
+    if ($[4] !== messageGroup) {
+        t4 = /* @__PURE__ */ _jsx50(Messages, {
+            messageGroup: messageGroup
+        });
+        $[4] = messageGroup;
+        $[5] = t4;
+    } else {
+        t4 = $[5];
+    }
+    var t5;
+    if ($[6] !== t3 || $[7] !== t4) {
+        t5 = /* @__PURE__ */ _jsxs15(Box9, {
+            flexGrow: "1",
+            children: [
+                t3,
+                t4
+            ]
+        });
+        $[6] = t3;
+        $[7] = t4;
+        $[8] = t5;
+    } else {
+        t5 = $[8];
+    }
+    var t6;
+    if ($[9] !== t1 || $[10] !== t5) {
+        t6 = /* @__PURE__ */ _jsxs15(_Fragment2, {
+            children: [
+                t1,
+                t5
+            ]
+        });
+        $[9] = t1;
+        $[10] = t5;
+        $[11] = t6;
+    } else {
+        t6 = $[11];
+    }
+    return t6;
+};
+var MessageGroup = function(t0) {
+    var $ = _c48(6);
+    var messageGroup = t0.messageGroup, style = t0.style, className = t0.className;
+    var t1;
+    if ($[0] !== messageGroup) {
+        t1 = /* @__PURE__ */ _jsx50(Content5, {
+            messageGroup: messageGroup
+        });
+        $[0] = messageGroup;
+        $[1] = t1;
+    } else {
+        t1 = $[1];
+    }
+    var t2;
+    if ($[2] !== className || $[3] !== style || $[4] !== t1) {
+        t2 = /* @__PURE__ */ _jsx50(Root2, {
+            className: className,
+            style: style,
+            children: t1
+        });
+        $[2] = className;
+        $[3] = style;
+        $[4] = t1;
+        $[5] = t2;
+    } else {
+        t2 = $[5];
+    }
+    return t2;
+};
+MessageGroup.Root = Root2;
+MessageGroup.Name = Name;
+MessageGroup.AssistantAvatar = AssistantAvatar;
+MessageGroup.UserAvatar = UserAvatar;
+MessageGroup.Messages = Messages;
+MessageGroup.Content = Content5;
 // src/contexts/components/ComponentsContext/index.tsx
-var ComponentsContext = /* @__PURE__ */ createContext6({
+var ComponentsContext = /* @__PURE__ */ createContext9({
     components: {
         RunStep: RunStep,
         Function: Function2,
         StartingToolCalls: StartingToolCalls2,
         TextContent: TextContent,
-        ImageFileContent: ImageFileContent
+        ImageFileContent: ImageFileContent,
+        MessageGroup: MessageGroup
     }
 });
 // src/components/runSteps/RunSteps/index.tsx
-import { jsx as _jsx43 } from "react/jsx-runtime";
+import { jsx as _jsx51 } from "react/jsx-runtime";
 var RunSteps = function(t0) {
-    var $ = _c43(7);
+    var $ = _c49(7);
     var runSteps = t0.runSteps;
-    var componentsContext = useContext7(ComponentsContext);
+    var componentsContext = useContext10(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, {
+                return /* @__PURE__ */ _jsx51(Component2, {
                     runStep: runStep
                 }, runStep.id);
             };
@@ -42910,7 +43205,7 @@ var RunSteps = function(t0) {
     }
     var t2;
     if ($[5] !== t1) {
-        t2 = /* @__PURE__ */ _jsx43(Flex9, {
+        t2 = /* @__PURE__ */ _jsx51(Flex14, {
             direction: "column-reverse",
             children: t1
         });
@@ -42922,27 +43217,27 @@ var RunSteps = function(t0) {
     return t2;
 };
 // src/contexts/messages/MessageContext/index.ts
-import { createContext as createContext7 } from "react";
-var MessageContext = /* @__PURE__ */ createContext7({
+import { createContext as createContext10 } from "react";
+var MessageContext = /* @__PURE__ */ createContext10({
     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 { c as _c50 } from "react-compiler-runtime";
+import { Flex as Flex15, 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";
+import { jsx as _jsx52, jsxs as _jsxs16 } from "react/jsx-runtime";
 var Attachments = function(t0) {
     var _message$attachments;
-    var $ = _c44(4);
+    var $ = _c50(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, {});
+        t1 = /* @__PURE__ */ _jsx52(FileIcon, {});
         $[0] = t1;
     } else {
         t1 = $[0];
@@ -42950,10 +43245,10 @@ var Attachments = function(t0) {
     var t2 = message.attachments.length > 1 ? "s" : "";
     var t3;
     if ($[1] !== message.attachments.length || $[2] !== t2) {
-        t3 = /* @__PURE__ */ _jsx44(Flex10, {
+        t3 = /* @__PURE__ */ _jsx52(Flex15, {
             align: "start",
             pb: "1",
-            children: /* @__PURE__ */ _jsxs15(Badge2, {
+            children: /* @__PURE__ */ _jsxs16(Badge2, {
                 color: "gray",
                 variant: "surface",
                 children: [
@@ -42973,18 +43268,18 @@ var Attachments = function(t0) {
     return t3;
 };
 // src/components/messages/MessageContent/index.tsx
-import { c as _c46 } from "react-compiler-runtime";
+import { c as _c52 } 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";
+import { c as _c51 } from "react-compiler-runtime";
+import { jsx as _jsx53 } from "react/jsx-runtime";
 var TextContent2 = function(t0) {
-    var $ = _c45(3);
+    var $ = _c51(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, {
+        t2 = /* @__PURE__ */ _jsx53(TextContent3, {
             content: content2
         });
         $[0] = TextContent3;
@@ -42996,13 +43291,13 @@ var TextContent2 = function(t0) {
     return t2;
 };
 var ImageFileContent2 = function(t0) {
-    var $ = _c45(3);
+    var $ = _c51(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, {
+        t2 = /* @__PURE__ */ _jsx53(ImageFileContent3, {
             content: content2
         });
         $[0] = ImageFileContent3;
@@ -43014,12 +43309,12 @@ var ImageFileContent2 = function(t0) {
     return t2;
 };
 var ContentPart = function(t0) {
-    var $ = _c45(4);
+    var $ = _c51(4);
     var content2 = t0.content;
     if (content2.type === "text") {
         var t1;
         if ($[0] !== content2) {
-            t1 = /* @__PURE__ */ _jsx45(TextContent2, {
+            t1 = /* @__PURE__ */ _jsx53(TextContent2, {
                 content: content2
             });
             $[0] = content2;
@@ -43032,7 +43327,7 @@ var ContentPart = function(t0) {
     if (content2.type === "image_file") {
         var _t;
         if ($[2] !== content2) {
-            _t = /* @__PURE__ */ _jsx45(ImageFileContent2, {
+            _t = /* @__PURE__ */ _jsx53(ImageFileContent2, {
                 content: content2
             });
             $[2] = content2;
@@ -43045,13 +43340,13 @@ var ContentPart = function(t0) {
     return null;
 };
 // src/components/messages/MessageContent/index.tsx
-import { Fragment as _Fragment2, jsx as _jsx46 } from "react/jsx-runtime";
+import { Fragment as _Fragment3, jsx as _jsx54 } from "react/jsx-runtime";
 var MessageContent = function(t0) {
-    var $ = _c46(4);
+    var $ = _c52(4);
     var message = t0.message;
     var t1;
     if ($[0] !== message.content) {
-        t1 = message.content.map(_temp);
+        t1 = message.content.map(_temp2);
         $[0] = message.content;
         $[1] = t1;
     } else {
@@ -43059,7 +43354,7 @@ var MessageContent = function(t0) {
     }
     var t2;
     if ($[2] !== t1) {
-        t2 = /* @__PURE__ */ _jsx46(_Fragment2, {
+        t2 = /* @__PURE__ */ _jsx54(_Fragment3, {
             children: t1
         });
         $[2] = t1;
@@ -43069,15 +43364,15 @@ var MessageContent = function(t0) {
     }
     return t2;
 };
-function _temp(content2, index) {
-    return /* @__PURE__ */ _jsx46(ContentPart, {
+function _temp2(content2, index) {
+    return /* @__PURE__ */ _jsx54(ContentPart, {
         content: content2
     }, index);
 }
 // src/components/threads/Thread/Message/index.tsx
-import { jsx as _jsx47, jsxs as _jsxs16 } from "react/jsx-runtime";
+import { jsx as _jsx55, jsxs as _jsxs17 } from "react/jsx-runtime";
 var Message = function(t0) {
-    var $ = _c47(37);
+    var $ = _c53(37);
     var message = t0.message, className = t0.className, style = t0.style;
     var t1;
     bb0: {
@@ -43111,7 +43406,7 @@ var Message = function(t0) {
         var messageCreationRunStepIndex = message.runSteps.findIndex(_t2);
         var _t3;
         if ($[3] !== message.runSteps || $[4] !== messageCreationRunStepIndex) {
-            var nextRunStepIndex = message.runSteps.slice(0, messageCreationRunStepIndex).findLastIndex(_temp2);
+            var nextRunStepIndex = message.runSteps.slice(0, messageCreationRunStepIndex).findLastIndex(_temp3);
             if (nextRunStepIndex === -1) {
                 nextRunStepIndex = 0;
             }
@@ -43185,7 +43480,7 @@ var Message = function(t0) {
     }
     var t3;
     if ($[21] !== olderRunSteps_0) {
-        t3 = /* @__PURE__ */ _jsx47(RunSteps, {
+        t3 = /* @__PURE__ */ _jsx55(RunSteps, {
             runSteps: olderRunSteps_0
         });
         $[21] = olderRunSteps_0;
@@ -43204,13 +43499,13 @@ var Message = function(t0) {
     }
     var t5;
     if ($[24] !== message) {
-        t5 = /* @__PURE__ */ _jsxs16(Box9, {
+        t5 = /* @__PURE__ */ _jsxs17(Box10, {
             style: t4,
             children: [
-                /* @__PURE__ */ _jsx47(Attachments, {
+                /* @__PURE__ */ _jsx55(Attachments, {
                     message: message
                 }),
-                /* @__PURE__ */ _jsx47(MessageContent, {
+                /* @__PURE__ */ _jsx55(MessageContent, {
                     message: message
                 })
             ]
@@ -43222,7 +43517,7 @@ var Message = function(t0) {
     }
     var t6;
     if ($[26] !== laterRunSteps_0) {
-        t6 = /* @__PURE__ */ _jsx47(RunSteps, {
+        t6 = /* @__PURE__ */ _jsx55(RunSteps, {
             runSteps: laterRunSteps_0
         });
         $[26] = laterRunSteps_0;
@@ -43232,7 +43527,7 @@ var Message = function(t0) {
     }
     var t7;
     if ($[28] !== className || $[29] !== style || $[30] !== t3 || $[31] !== t5 || $[32] !== t6) {
-        t7 = /* @__PURE__ */ _jsxs16(Box9, {
+        t7 = /* @__PURE__ */ _jsxs17(Box10, {
             className: className,
             style: style,
             children: [
@@ -43252,7 +43547,7 @@ var Message = function(t0) {
     }
     var t8;
     if ($[34] !== t2 || $[35] !== t7) {
-        t8 = /* @__PURE__ */ _jsx47(Provider, {
+        t8 = /* @__PURE__ */ _jsx55(Provider, {
             value: t2,
             children: t7
         });
@@ -43264,7 +43559,7 @@ var Message = function(t0) {
     }
     return t8;
 };
-function _temp2(runStep_0) {
+function _temp3(runStep_0) {
     return runStep_0.step_details.type === "message_creation";
 }
 function _temp22(runStep_1) {
@@ -43274,7 +43569,7 @@ function _temp22(runStep_1) {
 import { c as _c56 } from "react-compiler-runtime";
 import { useEffect as useEffect3 } from "react";
 // src/hooks/messageGroups/useMessageGroups/index.ts
-import { c as _c48 } from "react-compiler-runtime";
+import { c as _c54 } from "react-compiler-runtime";
 import { useMemo as useMemo11 } from "react";
 // src/hooks/messageGroups/useMessageGroups/lib/messageGroups/index.ts
 import _6 from "lodash";
@@ -43379,7 +43674,7 @@ var messageGroups = function(_ref) {
 };
 // src/hooks/messageGroups/useMessageGroups/index.ts
 var useMessageGroups = function(t0) {
-    var $ = _c48(4);
+    var $ = _c54(4);
     var messages2 = t0.messages;
     var t1;
     var t2;
@@ -43406,80 +43701,18 @@ var useMessageGroups = function(t0) {
     return t1;
 };
 // src/components/skeletons/MessagesSkeleton/index.tsx
-import { c as _c51 } from "react-compiler-runtime";
+import { c as _c55 } from "react-compiler-runtime";
 import { forwardRef as forwardRef3 } from "react";
-import { Flex as Flex13, Avatar, Box as Box10, Skeleton } from "@radix-ui/themes";
-// src/components/messageGroups/MessageGroupBase/index.tsx
-import { c as _c49 } from "react-compiler-runtime";
-import { forwardRef as forwardRef2 } from "react";
-import { Flex as Flex11, Container } from "@radix-ui/themes";
-import { jsx as _jsx48 } from "react/jsx-runtime";
-var MessageGroupBase = /* @__PURE__ */ forwardRef2(function MessageGroupBase2(t0, ref) {
-    var $ = _c49(5);
-    var children = t0.children;
-    var t1;
-    if ($[0] !== children) {
-        t1 = /* @__PURE__ */ _jsx48(Flex11, {
-            flexShrink: "0",
-            gap: "3",
-            children: children
-        });
-        $[0] = children;
-        $[1] = t1;
-    } else {
-        t1 = $[1];
-    }
-    var t2;
-    if ($[2] !== ref || $[3] !== t1) {
-        t2 = /* @__PURE__ */ _jsx48(Container, {
-            ref: ref,
-            size: "2",
-            flexGrow: "0",
-            children: t1
-        });
-        $[2] = ref;
-        $[3] = t1;
-        $[4] = t2;
-    } else {
-        t2 = $[4];
-    }
-    return t2;
-});
-// src/components/messageGroups/MessageGroupBase/Name.tsx
-import { c as _c50 } from "react-compiler-runtime";
-import { Flex as Flex12, Text as Text6 } from "@radix-ui/themes";
-import { jsx as _jsx49 } from "react/jsx-runtime";
-var Name = function(t0) {
-    var $ = _c50(2);
-    var children = t0.children;
-    var t1;
-    if ($[0] !== children) {
-        t1 = /* @__PURE__ */ _jsx49(Flex12, {
-            align: "center",
-            height: "var(--space-5)",
-            children: /* @__PURE__ */ _jsx49(Text6, {
-                size: "2",
-                weight: "bold",
-                children: children
-            })
-        });
-        $[0] = children;
-        $[1] = t1;
-    } else {
-        t1 = $[1];
-    }
-    return t1;
-};
-// src/components/skeletons/MessagesSkeleton/index.tsx
-import { jsx as _jsx50, jsxs as _jsxs17 } from "react/jsx-runtime";
+import { Flex as Flex16, Avatar as Avatar3, Box as Box11, Skeleton } from "@radix-ui/themes";
+import { jsx as _jsx56, jsxs as _jsxs18 } from "react/jsx-runtime";
 var MessagesSkeleton = /* @__PURE__ */ forwardRef3(function MessagesSkeleton2(_props, ref) {
-    var $ = _c51(7);
+    var $ = _c55(7);
     var t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-        t0 = /* @__PURE__ */ _jsx50(Skeleton, {
+        t0 = /* @__PURE__ */ _jsx56(Skeleton, {
             loading: true,
-            children: /* @__PURE__ */ _jsx50(Avatar, {
-                fallback: /* @__PURE__ */ _jsx50(Flex13, {}),
+            children: /* @__PURE__ */ _jsx56(Avatar3, {
+                fallback: /* @__PURE__ */ _jsx56(Flex16, {}),
                 size: "1"
             })
         });
@@ -43489,8 +43722,8 @@ var MessagesSkeleton = /* @__PURE__ */ forwardRef3(function MessagesSkeleton2(_p
     }
     var t1;
     if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-        t1 = /* @__PURE__ */ _jsx50(Name, {
-            children: /* @__PURE__ */ _jsx50(Skeleton, {
+        t1 = /* @__PURE__ */ _jsx56(MessageGroup.Name, {
+            children: /* @__PURE__ */ _jsx56(Skeleton, {
                 loading: true,
                 style: {
                     width: "128px"
@@ -43503,7 +43736,7 @@ var MessagesSkeleton = /* @__PURE__ */ forwardRef3(function MessagesSkeleton2(_p
     }
     var t2;
     if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-        t2 = /* @__PURE__ */ _jsx50(Skeleton, {
+        t2 = /* @__PURE__ */ _jsx56(Skeleton, {
             loading: true,
             style: {
                 width: "256px"
@@ -43515,7 +43748,7 @@ var MessagesSkeleton = /* @__PURE__ */ forwardRef3(function MessagesSkeleton2(_p
     }
     var t3;
     if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-        t3 = /* @__PURE__ */ _jsx50(Skeleton, {
+        t3 = /* @__PURE__ */ _jsx56(Skeleton, {
             loading: true,
             style: {
                 width: "256px",
@@ -43528,13 +43761,13 @@ var MessagesSkeleton = /* @__PURE__ */ forwardRef3(function MessagesSkeleton2(_p
     }
     var t4;
     if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-        t4 = /* @__PURE__ */ _jsxs17(Box10, {
+        t4 = /* @__PURE__ */ _jsxs18(Box11, {
             pb: "3",
             children: [
                 t1,
                 t2,
                 t3,
-                /* @__PURE__ */ _jsx50(Skeleton, {
+                /* @__PURE__ */ _jsx56(Skeleton, {
                     loading: true,
                     style: {
                         width: "256px",
@@ -43549,7 +43782,7 @@ var MessagesSkeleton = /* @__PURE__ */ forwardRef3(function MessagesSkeleton2(_p
     }
     var t5;
     if ($[5] !== ref) {
-        t5 = /* @__PURE__ */ _jsxs17(MessageGroupBase, {
+        t5 = /* @__PURE__ */ _jsxs18(MessageGroup.Root, {
             ref: ref,
             children: [
                 t0,
@@ -43563,204 +43796,10 @@ var MessagesSkeleton = /* @__PURE__ */ forwardRef3(function MessagesSkeleton2(_p
     }
     return t5;
 });
-// src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
-import { c as _c55 } from "react-compiler-runtime";
-import { useContext as useContext10 } from "react";
-import { Box as Box11 } from "@radix-ui/themes";
-// src/components/messageGroups/MessageGroupBase/AssistantAvatar.tsx
-import { c as _c52 } from "react-compiler-runtime";
-import { useContext as useContext8 } from "react";
-import { Flex as Flex14 } from "@radix-ui/themes";
-// src/contexts/assistants/AssistantAvatarContext/index.tsx
-import { createContext as createContext8 } from "react";
-import { Avatar as Avatar2 } from "@radix-ui/themes";
-import { LightningBoltIcon } from "@radix-ui/react-icons";
-import { jsx as _jsx51 } from "react/jsx-runtime";
-var AssistantAvatarContext = /* @__PURE__ */ createContext8(/* @__PURE__ */ _jsx51(Avatar2, {
-    fallback: /* @__PURE__ */ _jsx51(LightningBoltIcon, {}),
-    size: "1"
-}));
-// src/components/messageGroups/MessageGroupBase/AssistantAvatar.tsx
-import { jsx as _jsx52 } from "react/jsx-runtime";
-var AssistantAvatar = function() {
-    var $ = _c52(3);
-    var AssistantAvatarContextValue = useContext8(AssistantAvatarContext);
-    var t0;
-    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-        t0 = {
-            borderRadius: "var(--radius-3)",
-            overflow: "hidden"
-        };
-        $[0] = t0;
-    } else {
-        t0 = $[0];
-    }
-    var t1;
-    if ($[1] !== AssistantAvatarContextValue) {
-        t1 = /* @__PURE__ */ _jsx52(Flex14, {
-            flexShrink: "0",
-            height: "24px",
-            width: "24px",
-            style: t0,
-            children: AssistantAvatarContextValue
-        });
-        $[1] = AssistantAvatarContextValue;
-        $[2] = t1;
-    } else {
-        t1 = $[2];
-    }
-    return t1;
-};
-// src/contexts/assistants/AssistantNameContext/index.tsx
-import { createContext as createContext9 } from "react";
-var AssistantNameContext = /* @__PURE__ */ createContext9("Assistant");
-// src/components/messageGroups/MessageGroupBase/UserAvatar.tsx
-import { c as _c53 } from "react-compiler-runtime";
-import { useContext as useContext9 } from "react";
-import { Flex as Flex15 } from "@radix-ui/themes";
-// src/contexts/users/UserAvatarContext/index.tsx
-import { createContext as createContext10 } from "react";
-import { Avatar as Avatar3 } from "@radix-ui/themes";
-import { PersonIcon } from "@radix-ui/react-icons";
-import { jsx as _jsx53 } from "react/jsx-runtime";
-var UserAvatarContext = /* @__PURE__ */ createContext10(/* @__PURE__ */ _jsx53(Avatar3, {
-    fallback: /* @__PURE__ */ _jsx53(PersonIcon, {}),
-    size: "1"
-}));
-// src/components/messageGroups/MessageGroupBase/UserAvatar.tsx
-import { jsx as _jsx54 } from "react/jsx-runtime";
-var UserAvatar = function() {
-    var $ = _c53(3);
-    var UserAvatarContextValue = useContext9(UserAvatarContext);
-    var t0;
-    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-        t0 = {
-            borderRadius: "var(--radius-3)",
-            overflow: "hidden"
-        };
-        $[0] = t0;
-    } else {
-        t0 = $[0];
-    }
-    var t1;
-    if ($[1] !== UserAvatarContextValue) {
-        t1 = /* @__PURE__ */ _jsx54(Flex15, {
-            flexShrink: "0",
-            height: "24px",
-            width: "24px",
-            style: t0,
-            children: UserAvatarContextValue
-        });
-        $[1] = UserAvatarContextValue;
-        $[2] = t1;
-    } else {
-        t1 = $[2];
-    }
-    return t1;
-};
-// src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
-import { c as _c54 } from "react-compiler-runtime";
-import { Flex as Flex16 } from "@radix-ui/themes";
-import { jsx as _jsx55 } from "react/jsx-runtime";
-var Content5 = function(t0) {
-    var $ = _c54(4);
-    var messageGroup = t0.messageGroup;
-    var t1;
-    if ($[0] !== messageGroup.messages) {
-        t1 = messageGroup.messages.map(_temp3);
-        $[0] = messageGroup.messages;
-        $[1] = t1;
-    } else {
-        t1 = $[1];
-    }
-    var t2;
-    if ($[2] !== t1) {
-        t2 = /* @__PURE__ */ _jsx55(Flex16, {
-            direction: "column-reverse",
-            children: t1
-        });
-        $[2] = t1;
-        $[3] = t2;
-    } else {
-        t2 = $[3];
-    }
-    return t2;
-};
-function _temp3(message) {
-    return /* @__PURE__ */ _jsx55(Message, {
-        message: message
-    }, message.id);
-}
-// src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
-import { jsx as _jsx56, jsxs as _jsxs18 } from "react/jsx-runtime";
-var MessageGroup = function(t0) {
-    var $ = _c55(12);
-    var messageGroup = t0.messageGroup;
-    var assistantNameContext = useContext10(AssistantNameContext);
-    var t1;
-    if ($[0] !== messageGroup.role) {
-        t1 = messageGroup.role === "user" ? /* @__PURE__ */ _jsx56(UserAvatar, {}) : /* @__PURE__ */ _jsx56(AssistantAvatar, {});
-        $[0] = messageGroup.role;
-        $[1] = t1;
-    } else {
-        t1 = $[1];
-    }
-    var t2 = messageGroup.role === "user" ? "You" : assistantNameContext;
-    var t3;
-    if ($[2] !== t2) {
-        t3 = /* @__PURE__ */ _jsx56(Name, {
-            children: t2
-        });
-        $[2] = t2;
-        $[3] = t3;
-    } else {
-        t3 = $[3];
-    }
-    var t4;
-    if ($[4] !== messageGroup) {
-        t4 = /* @__PURE__ */ _jsx56(Content5, {
-            messageGroup: messageGroup
-        });
-        $[4] = messageGroup;
-        $[5] = t4;
-    } else {
-        t4 = $[5];
-    }
-    var t5;
-    if ($[6] !== t3 || $[7] !== t4) {
-        t5 = /* @__PURE__ */ _jsxs18(Box11, {
-            flexGrow: "1",
-            children: [
-                t3,
-                t4
-            ]
-        });
-        $[6] = t3;
-        $[7] = t4;
-        $[8] = t5;
-    } else {
-        t5 = $[8];
-    }
-    var t6;
-    if ($[9] !== t1 || $[10] !== t5) {
-        t6 = /* @__PURE__ */ _jsxs18(MessageGroupBase, {
-            children: [
-                t1,
-                t5
-            ]
-        });
-        $[9] = t1;
-        $[10] = t5;
-        $[11] = t6;
-    } else {
-        t6 = $[11];
-    }
-    return t6;
-};
 // src/components/threads/Thread/Messages/Content/index.tsx
-import { jsx as _jsx57, Fragment as _Fragment3 } from "react/jsx-runtime";
+import { jsx as _jsx57, Fragment as _Fragment4 } from "react/jsx-runtime";
 var Content6 = function() {
-    var $ = _c56(11);
+    var $ = _c56(14);
     var _useMessages = useMessages(), messages2 = _useMessages.messages, isLoading = _useMessages.isLoading, isLoadingError = _useMessages.isLoadingError;
     var addToast = useToasts().addToast;
     var t0;
@@ -43774,10 +43813,12 @@ var Content6 = function() {
         t0 = $[1];
     }
     var _useMessageGroups = useMessageGroups(t0), messageGroups2 = _useMessageGroups.messageGroups;
-    var t1;
+    var _useComponents = useComponents(), t1 = _useComponents.components;
+    var MessageGroup2 = t1.MessageGroup;
     var t2;
+    var t3;
     if ($[2] !== addToast || $[3] !== isLoadingError) {
-        t1 = function() {
+        t2 = function() {
             if (isLoadingError) {
                 addToast({
                     type: "error",
@@ -43785,19 +43826,19 @@ var Content6 = function() {
                 });
             }
         };
-        t2 = [
+        t3 = [
             isLoadingError,
             addToast
         ];
         $[2] = addToast;
         $[3] = isLoadingError;
-        $[4] = t1;
-        $[5] = t2;
+        $[4] = t2;
+        $[5] = t3;
     } else {
-        t1 = $[4];
-        t2 = $[5];
+        t2 = $[4];
+        t3 = $[5];
     }
-    useEffect3(t1, t2);
+    useEffect3(t2, t3);
     if (isLoading || isLoadingError) {
         var _t;
         if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
@@ -43808,31 +43849,39 @@ var Content6 = function() {
         }
         return _t;
     }
-    var t3;
-    if ($[7] !== messageGroups2) {
-        t3 = messageGroups2.map(_temp4);
-        $[7] = messageGroups2;
-        $[8] = t3;
+    var t4;
+    if ($[7] !== MessageGroup2 || $[8] !== messageGroups2) {
+        var _t2;
+        if ($[10] !== MessageGroup2) {
+            _t2 = function(messageGroup) {
+                return /* @__PURE__ */ _jsx57(MessageGroup2, {
+                    messageGroup: messageGroup
+                }, messageGroup.id);
+            };
+            $[10] = MessageGroup2;
+            $[11] = _t2;
+        } else {
+            _t2 = $[11];
+        }
+        t4 = messageGroups2.map(_t2);
+        $[7] = MessageGroup2;
+        $[8] = messageGroups2;
+        $[9] = t4;
     } else {
-        t3 = $[8];
+        t4 = $[9];
     }
-    var t4;
-    if ($[9] !== t3) {
-        t4 = /* @__PURE__ */ _jsx57(_Fragment3, {
-            children: t3
+    var t5;
+    if ($[12] !== t4) {
+        t5 = /* @__PURE__ */ _jsx57(_Fragment4, {
+            children: t4
         });
-        $[9] = t3;
-        $[10] = t4;
+        $[12] = t4;
+        $[13] = t5;
     } else {
-        t4 = $[10];
+        t5 = $[13];
     }
-    return t4;
+    return t5;
 };
-function _temp4(messageGroup) {
-    return /* @__PURE__ */ _jsx57(MessageGroup, {
-        messageGroup: messageGroup
-    }, messageGroup.id);
-}
 // src/components/threads/Thread/Messages/Progress/index.tsx
 import { c as _c59 } from "react-compiler-runtime";
 import { useMemo as useMemo12 } from "react";
@@ -43873,14 +43922,14 @@ var StartingSkeleton = function(t0) {
     var assistantNameContext = useContext11(AssistantNameContext);
     var t1;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-        t1 = /* @__PURE__ */ _jsx59(AssistantAvatar, {});
+        t1 = /* @__PURE__ */ _jsx59(MessageGroup.AssistantAvatar, {});
         $[0] = t1;
     } else {
         t1 = $[0];
     }
     var t2;
     if ($[1] !== assistantNameContext) {
-        t2 = /* @__PURE__ */ _jsx59(Name, {
+        t2 = /* @__PURE__ */ _jsx59(MessageGroup.Name, {
             children: assistantNameContext
         });
         $[1] = assistantNameContext;
@@ -43897,7 +43946,7 @@ var StartingSkeleton = function(t0) {
     }
     var t4;
     if ($[4] !== children || $[5] !== t2) {
-        t4 = /* @__PURE__ */ _jsxs19(MessageGroupBase, {
+        t4 = /* @__PURE__ */ _jsxs19(MessageGroup.Root, {
             children: [
                 t1,
                 /* @__PURE__ */ _jsxs19(Box12, {
@@ -43974,7 +44023,7 @@ var Progress = function() {
         }
         var t2;
         if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-            t2 = /* @__PURE__ */ _jsxs20(MessageGroupBase, {
+            t2 = /* @__PURE__ */ _jsxs20(MessageGroup.Root, {
                 children: [
                     _t,
                     /* @__PURE__ */ _jsx60(Box13, {
@@ -44088,7 +44137,7 @@ function _toPrimitive26(t, r) {
     }
     return ("string" === r ? String : Number)(t);
 }
-var Root2 = function(t0) {
+var Root4 = function(t0) {
     var $ = _c60(18);
     var children = t0.children, style = t0.style, className = t0.className;
     var _useMessages = useMessages(), isFetchingNextPage = _useMessages.isFetchingNextPage, hasNextPage = _useMessages.hasNextPage, fetchNextPage = _useMessages.fetchNextPage;
@@ -44191,7 +44240,7 @@ var NextPageSkeleton = function() {
 };
 // src/components/threads/Thread/Messages/index.tsx
 import { jsx as _jsx63, jsxs as _jsxs22 } from "react/jsx-runtime";
-var Messages = function(t0) {
+var Messages2 = function(t0) {
     var $ = _c62(9);
     var children = t0.children, className = t0.className, style = t0.style;
     var t1;
@@ -44229,7 +44278,7 @@ var Messages = function(t0) {
     }
     var t6;
     if ($[5] !== children || $[6] !== className || $[7] !== style) {
-        t6 = /* @__PURE__ */ _jsxs22(Root2, {
+        t6 = /* @__PURE__ */ _jsxs22(Root4, {
             style: style,
             className: className,
             children: [
@@ -44250,9 +44299,9 @@ var Messages = function(t0) {
     }
     return t6;
 };
-Messages.Root = Root2;
-Messages.Message = Message;
-Messages.NextPageSkeleton = NextPageSkeleton;
+Messages2.Root = Root4;
+Messages2.Message = Message;
+Messages2.NextPageSkeleton = NextPageSkeleton;
 // src/components/threads/Thread/MessageForm/index.tsx
 import { c as _c68 } from "react-compiler-runtime";
 // src/components/threads/Thread/MessageForm/Submit/index.tsx
@@ -44320,7 +44369,7 @@ function _toPrimitive27(t, r) {
     }
     return ("string" === r ? String : Number)(t);
 }
-var Root3 = function(t0) {
+var Root5 = function(t0) {
     var $ = _c63(4);
     var children = t0.children, style = t0.style, className = t0.className;
     var t1;
@@ -44415,7 +44464,7 @@ var Submit = function(props) {
     }
     var t1;
     if ($[1] !== props) {
-        t1 = /* @__PURE__ */ _jsx64(Root3, _objectSpread27(_objectSpread27({}, props), {}, {
+        t1 = /* @__PURE__ */ _jsx64(Root5, _objectSpread27(_objectSpread27({}, props), {}, {
             children: t0
         }));
         $[1] = props;
@@ -44425,7 +44474,7 @@ var Submit = function(props) {
     }
     return t1;
 };
-Submit.Root = Root3;
+Submit.Root = Root5;
 Submit.Button = Button3;
 // src/components/threads/Thread/MessageForm/Root/index.tsx
 import { useQueryClient as useQueryClient4 } from "@tanstack/react-query";
@@ -44510,7 +44559,7 @@ function _asyncToGenerator6(n) {
         });
     };
 }
-var Root4 = function(_ref) {
+var Root6 = function(_ref) {
     "use no memo";
     var children = _ref.children, onSubmitArg = _ref.onSubmit, isDisabledArg = _ref.isDisabled, style = _ref.style, className = _ref.className;
     var _useState4 = _sliced_to_array(useState4([]), 2), files = _useState4[0], setFiles = _useState4[1];
@@ -44648,7 +44697,7 @@ import { useContext as useContext13, useMemo as useMemo14, useRef as useRef5, us
 import { c as _c64 } from "react-compiler-runtime";
 import { forwardRef as forwardRef4 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
-import { jsx as _jsx66, Fragment as _Fragment4, jsxs as _jsxs23 } from "react/jsx-runtime";
+import { jsx as _jsx66, Fragment as _Fragment5, jsxs as _jsxs23 } from "react/jsx-runtime";
 var _excluded3 = [
     "style",
     "className"
@@ -44770,7 +44819,7 @@ var TextareaBase = /* @__PURE__ */ forwardRef4(function TextareaBase2(t0, ref) {
     }
     var t5;
     if ($[9] !== ref || $[10] !== rest || $[11] !== t2 || $[12] !== t4) {
-        t5 = /* @__PURE__ */ _jsxs23(_Fragment4, {
+        t5 = /* @__PURE__ */ _jsxs23(_Fragment5, {
             children: [
                 t1,
                 /* @__PURE__ */ _jsx66(TextareaAutosize, _objectSpread29({
@@ -44835,7 +44884,7 @@ function _toPrimitive30(t, r) {
     }
     return ("string" === r ? String : Number)(t);
 }
-var Root5 = function(t0) {
+var Root7 = function(t0) {
     var $ = _c65(4);
     var children = t0.children, style = t0.style, className = t0.className;
     var t1;
@@ -44911,7 +44960,7 @@ var Control = function(props) {
     }
     var t1;
     if ($[1] !== props) {
-        t1 = /* @__PURE__ */ _jsx67(Root5, _objectSpread30(_objectSpread30({}, props), {}, {
+        t1 = /* @__PURE__ */ _jsx67(Root7, _objectSpread30(_objectSpread30({}, props), {}, {
             children: t0
         }));
         $[1] = props;
@@ -44921,7 +44970,7 @@ var Control = function(props) {
     }
     return t1;
 };
-Control.Root = Root5;
+Control.Root = Root7;
 Control.Input = Input;
 // src/components/threads/Thread/MessageForm/Field/Files/Preview.tsx
 import { c as _c66 } from "react-compiler-runtime";
@@ -45310,7 +45359,7 @@ var useCreateFile = function(t0) {
     var t1;
     if ($[0] !== t0) {
         t1 = t0 === void 0 ? {
-            onError: _temp5
+            onError: _temp4
         } : t0;
         $[0] = t0;
         $[1] = t1;
@@ -45379,7 +45428,7 @@ var useCreateFile = function(t0) {
     }
     return t6;
 };
-function _temp5() {}
+function _temp4() {}
 function _temp23() {}
 // src/components/threads/Thread/MessageForm/Field/Files/Control.tsx
 import { jsx as _jsx69, jsxs as _jsxs25 } from "react/jsx-runtime";
@@ -45748,7 +45797,7 @@ function _toPrimitive36(t, r) {
     }
     return ("string" === r ? String : Number)(t);
 }
-var Root6 = function(_ref) {
+var Root8 = function(_ref) {
     "use no memo";
     var children = _ref.children, className = _ref.className, style = _ref.style;
     var _useFormContext2 = useFormContext2(), errors = _useFormContext2.formState.errors;
@@ -45782,7 +45831,7 @@ var Root6 = function(_ref) {
     });
 };
 var Field = {
-    Root: Root6,
+    Root: Root8,
     Control: Control,
     Files: Files
 };
@@ -45847,7 +45896,7 @@ var MessageForm = function(props) {
     }
     var t1;
     if ($[1] !== props) {
-        t1 = /* @__PURE__ */ _jsx71(Root4, _objectSpread37(_objectSpread37({}, props), {}, {
+        t1 = /* @__PURE__ */ _jsx71(Root6, _objectSpread37(_objectSpread37({}, props), {}, {
             children: t0
         }));
         $[1] = props;
@@ -45857,7 +45906,7 @@ var MessageForm = function(props) {
     }
     return t1;
 };
-MessageForm.Root = Root4;
+MessageForm.Root = Root6;
 MessageForm.Field = Field;
 MessageForm.Submit = Submit;
 // src/components/threads/Thread/Root/index.tsx
@@ -45970,7 +46019,7 @@ var ToastsProvider = function(t0) {
     }
     var t5;
     if ($[4] !== toasts) {
-        t5 = Array.from(toasts).map(_temp6);
+        t5 = Array.from(toasts).map(_temp5);
         $[4] = toasts;
         $[5] = t5;
     } else {
@@ -46030,7 +46079,7 @@ var ToastsProvider = function(t0) {
     }
     return t8;
 };
-function _temp6(toast_0, index) {
+function _temp5(toast_0, index) {
     return /* @__PURE__ */ _jsx73(CustomToast, {
         toast: toast_0
     }, index);
@@ -46103,7 +46152,7 @@ function _objectWithoutPropertiesLoose4(r, e) {
     }
     return t;
 }
-var Root8 = function(t0) {
+var Root10 = function(t0) {
     var $ = _c71(12);
     var children;
     var className;
@@ -46208,7 +46257,7 @@ var Thread = function(props) {
     var t0;
     var t1;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-        t0 = /* @__PURE__ */ _jsx75(Messages, {});
+        t0 = /* @__PURE__ */ _jsx75(Messages2, {});
         t1 = /* @__PURE__ */ _jsx75(MessageForm, {});
         $[0] = t0;
         $[1] = t1;
@@ -46218,7 +46267,7 @@ var Thread = function(props) {
     }
     var t2;
     if ($[2] !== props) {
-        t2 = /* @__PURE__ */ _jsxs29(Root8, _objectSpread39(_objectSpread39({}, props), {}, {
+        t2 = /* @__PURE__ */ _jsxs29(Root10, _objectSpread39(_objectSpread39({}, props), {}, {
             children: [
                 t0,
                 t1
@@ -46231,8 +46280,8 @@ var Thread = function(props) {
     }
     return t2;
 };
-Thread.Root = Root8;
-Thread.Messages = Messages;
+Thread.Root = Root10;
+Thread.Messages = Messages2;
 Thread.MessageForm = MessageForm;
 // src/hooks/messages/useMessageContext/index.ts
 import { useContext as useContext14 } from "react";
@@ -46474,7 +46523,7 @@ var Provider4 = function(t0) {
 };
 // src/components/threads/ThreadDialog/Root/index.tsx
 import { jsx as _jsx77 } from "react/jsx-runtime";
-var Root9 = function(t0) {
+var Root11 = function(t0) {
     var $ = _c75(2);
     var children = t0.children;
     var t1;
@@ -46609,7 +46658,7 @@ function _toPrimitive42(t, r) {
     }
     return ("string" === r ? String : Number)(t);
 }
-var Root10 = function(t0) {
+var Root12 = function(t0) {
     var $ = _c77(14);
     var children = t0.children, style = t0.style, className = t0.className;
     var _useThreadDialogContext = useThreadDialogContext(), setIsOpen = _useThreadDialogContext.setIsOpen, isOpen = _useThreadDialogContext.isOpen;
@@ -46628,7 +46677,7 @@ var Root10 = function(t0) {
     var t3;
     if ($[2] !== setIsOpen) {
         t3 = function() {
-            return setIsOpen(_temp7);
+            return setIsOpen(_temp6);
         };
         $[2] = setIsOpen;
         $[3] = t3;
@@ -46691,7 +46740,7 @@ var Trigger = function(args) {
     }
     var t1;
     if ($[1] !== args) {
-        t1 = /* @__PURE__ */ _jsx79(Root10, _objectSpread42(_objectSpread42({}, args), {}, {
+        t1 = /* @__PURE__ */ _jsx79(Root12, _objectSpread42(_objectSpread42({}, args), {}, {
             children: t0
         }));
         $[1] = args;
@@ -46701,9 +46750,9 @@ var Trigger = function(args) {
     }
     return t1;
 };
-Trigger.Root = Root10;
+Trigger.Root = Root12;
 Trigger.Button = Button4;
-function _temp7(prev) {
+function _temp6(prev) {
     return !prev;
 }
 // src/components/threads/ThreadDialog/Content/index.tsx
@@ -46732,7 +46781,7 @@ var Close = function() {
     var t2;
     if ($[2] !== setIsOpen) {
         t2 = function() {
-            return setIsOpen(_temp8);
+            return setIsOpen(_temp7);
         };
         $[2] = setIsOpen;
         $[3] = t2;
@@ -46782,7 +46831,7 @@ var Close = function() {
     }
     return t5;
 };
-function _temp8(prev) {
+function _temp7(prev) {
     return !prev;
 }
 // src/components/threads/ThreadDialog/Content/index.tsx
@@ -46830,7 +46879,7 @@ function _toPrimitive43(t, r) {
     }
     return ("string" === r ? String : Number)(t);
 }
-var Root11 = function(t0) {
+var Root13 = function(t0) {
     var $ = _c79(19);
     var children = t0.children, className = t0.className, style = t0.style;
     var isOpen = useThreadDialogContext().isOpen;
@@ -46977,7 +47026,7 @@ var Root11 = function(t0) {
     }
     return t13;
 };
-var Messages2 = function(t0) {
+var Messages3 = function(t0) {
     var $ = _c79(5);
     var className = t0.className, style = t0.style;
     var t1;
@@ -47034,7 +47083,7 @@ var Content7 = function(props) {
     var $ = _c79(4);
     var t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-        t0 = /* @__PURE__ */ _jsx81(Messages2, {});
+        t0 = /* @__PURE__ */ _jsx81(Messages3, {});
         $[0] = t0;
     } else {
         t0 = $[0];
@@ -47055,7 +47104,7 @@ var Content7 = function(props) {
     }
     var t2;
     if ($[2] !== props) {
-        t2 = /* @__PURE__ */ _jsx81(Root11, _objectSpread43(_objectSpread43({}, props), {}, {
+        t2 = /* @__PURE__ */ _jsx81(Root13, _objectSpread43(_objectSpread43({}, props), {}, {
             children: t1
         }));
         $[2] = props;
@@ -47065,8 +47114,8 @@ var Content7 = function(props) {
     }
     return t2;
 };
-Content7.Root = Root11;
-Content7.Messages = Messages2;
+Content7.Root = Root13;
+Content7.Messages = Messages3;
 Content7.FormContainer = FormContainer;
 // src/components/threads/ThreadDialog/index.tsx
 import { jsx as _jsx82, jsxs as _jsxs31 } from "react/jsx-runtime";
@@ -47074,7 +47123,7 @@ var ThreadDialog = function() {
     var $ = _c80(1);
     var t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-        t0 = /* @__PURE__ */ _jsxs31(Root9, {
+        t0 = /* @__PURE__ */ _jsxs31(Root11, {
             children: [
                 /* @__PURE__ */ _jsx82(Content7, {}),
                 /* @__PURE__ */ _jsx82(Trigger, {})
@@ -47086,7 +47135,7 @@ var ThreadDialog = function() {
     }
     return t0;
 };
-ThreadDialog.Root = Root9;
+ThreadDialog.Root = Root11;
 ThreadDialog.Trigger = Trigger;
 ThreadDialog.Content = Content7;
 // src/components/threads/AudioThreadDialog/index.tsx
@@ -47189,7 +47238,7 @@ import { c as _c82 } from "react-compiler-runtime";
 import { useEffect as useEffect8, useRef as useRef6 } from "react";
 var useInterval = function(callback, delay) {
     var $ = _c82(5);
-    var savedCallback = useRef6(_temp9);
+    var savedCallback = useRef6(_temp8);
     var t0;
     if ($[0] !== callback) {
         t0 = function() {
@@ -47226,7 +47275,7 @@ var useInterval = function(callback, delay) {
     }
     useEffect8(t1, t2);
 };
-function _temp9() {}
+function _temp8() {}
 // src/hooks/audioThreads/useRecorder/index.ts
 function ownKeys44(e, r) {
     var t = Object.keys(e);
@@ -47774,7 +47823,7 @@ var useMessageAudio = function(t0) {
     } else {
         t8 = $[36];
     }
-    useEffect10(_temp10, t8);
+    useEffect10(_temp9, t8);
     var _useState94 = _sliced_to_array(useState9(null), 2), audioEngine = _useState94[0], setAudioEngine = _useState94[1];
     var isAudioEngineInited = useRef8(false);
     var t9;
@@ -47858,7 +47907,7 @@ var useMessageAudio = function(t0) {
     }
     return t13;
 };
-function _temp10() {
+function _temp9() {
     if (isHtmlAudioSupported) {
         var _Howler$_howls$;
         if (!(Howler !== null && Howler !== void 0 && (_Howler$_howls$ = Howler._howls[0]) !== null && _Howler$_howls$ !== void 0 && (_Howler$_howls$ = _Howler$_howls$._sounds[0]) !== null && _Howler$_howls$ !== void 0 && _Howler$_howls$._node)) {
@@ -47933,7 +47982,7 @@ var useTtsAudioRuntime = function(t0) {
     if ($[1] !== createMessageProps) {
         t2 = {
             isStopOnSilence: true,
-            onStart: _temp11,
+            onStart: _temp10,
             onStop: function() {
                 var _onStop = _asyncToGenerator11(function(_event, chunks) {
                     var blob, audioContent;
@@ -48064,7 +48113,7 @@ var useTtsAudioRuntime = function(t0) {
     t5 = t8;
     return t5;
 };
-function _temp11() {
+function _temp10() {
     return _temp24.apply(this, arguments);
 }
 function _temp24() {
@@ -48272,7 +48321,7 @@ var Provider5 = function(t0) {
     }
     return t2;
 };
-var Root12 = function(t0) {
+var Root14 = function(t0) {
     var $ = _c86(16);
     var children;
     var className;
@@ -48571,7 +48620,7 @@ var Provider6 = function(_ref) {
         children: children
     });
 };
-var Root13 = function(t0) {
+var Root15 = function(t0) {
     var $ = _c88(6);
     var children;
     var rest;
@@ -48753,14 +48802,14 @@ var AssistantInfo = function(props) {
     var assistantNameContext = useContext17(AssistantNameContext);
     var t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-        t0 = /* @__PURE__ */ _jsx86(AssistantAvatar, {});
+        t0 = /* @__PURE__ */ _jsx86(MessageGroup.AssistantAvatar, {});
         $[0] = t0;
     } else {
         t0 = $[0];
     }
     var t1;
     if ($[1] !== assistantNameContext) {
-        t1 = /* @__PURE__ */ _jsx86(Name, {
+        t1 = /* @__PURE__ */ _jsx86(MessageGroup.Name, {
             children: assistantNameContext
         });
         $[1] = assistantNameContext;
@@ -48803,7 +48852,7 @@ var Visualization = function(props) {
     }
     var t2;
     if ($[2] !== props) {
-        t2 = /* @__PURE__ */ _jsxs32(Root13, _objectSpread47(_objectSpread47({}, props), {}, {
+        t2 = /* @__PURE__ */ _jsxs32(Root15, _objectSpread47(_objectSpread47({}, props), {}, {
             children: [
                 t0,
                 t1
@@ -48816,7 +48865,7 @@ var Visualization = function(props) {
     }
     return t2;
 };
-Visualization.Root = Root13;
+Visualization.Root = Root15;
 Visualization.Provider = Provider6;
 Visualization.AssistantVisualization = AssistantVisualization;
 Visualization.AssistantInfo = AssistantInfo;
@@ -49526,7 +49575,7 @@ var AudioThread = function(props) {
     }
     var t3;
     if ($[3] !== props) {
-        t3 = /* @__PURE__ */ _jsxs36(Root12, _objectSpread51(_objectSpread51({}, props), {}, {
+        t3 = /* @__PURE__ */ _jsxs36(Root14, _objectSpread51(_objectSpread51({}, props), {}, {
             children: [
                 t0,
                 t1,
@@ -49540,7 +49589,7 @@ var AudioThread = function(props) {
     }
     return t3;
 };
-AudioThread.Root = Root12;
+AudioThread.Root = Root14;
 AudioThread.Visualization = Visualization;
 AudioThread.Status = Status;
 AudioThread.Form = Form;
@@ -49606,7 +49655,7 @@ var AudioThreadDialog = function(props) {
     }
     var t2;
     if ($[2] !== props) {
-        t2 = /* @__PURE__ */ _jsxs37(Root9, _objectSpread52(_objectSpread52({}, props), {}, {
+        t2 = /* @__PURE__ */ _jsxs37(Root11, _objectSpread52(_objectSpread52({}, props), {}, {
             children: [
                 t0,
                 t1
@@ -49619,7 +49668,7 @@ var AudioThreadDialog = function(props) {
     }
     return t2;
 };
-AudioThreadDialog.Root = Root9;
+AudioThreadDialog.Root = Root11;
 AudioThreadDialog.Trigger = Trigger;
 AudioThreadDialog.Content = Content7;
 // src/hooks/audioRuntimes/useWebrtcAudioRuntime/index.ts
@@ -50286,7 +50335,7 @@ var Content9 = function(t0) {
     return t5;
 };
 // src/components/annotations/SourceAnnotation/FileCitation/index.tsx
-import { jsx as _jsx97, jsxs as _jsxs38, Fragment as _Fragment5 } from "react/jsx-runtime";
+import { jsx as _jsx97, jsxs as _jsxs38, Fragment as _Fragment6 } from "react/jsx-runtime";
 var FileCitation = function(t0) {
     var $ = _c99(18);
     var annotation = t0.annotation;
@@ -50399,7 +50448,7 @@ var FileCitation = function(t0) {
     }
     var t11;
     if ($[15] !== t10 || $[16] !== t3) {
-        t11 = /* @__PURE__ */ _jsxs38(_Fragment5, {
+        t11 = /* @__PURE__ */ _jsxs38(_Fragment6, {
             children: [
                 t3,
                 t10
@@ -50839,5 +50888,5 @@ var AssistantProvider = function(t0) {
     }
     return t6;
 };
-export { AssistantAvatarContext, AssistantNameContext, AssistantProvider, AudioThread, AudioThreadDialog, Avatar6 as Avatar, ComponentsProvider, FunctionBase, FunctionComponentsContext, MarkdownContext, MarkdownProvider, MessageContent, RunStep, SourceAnnotation, Suggestions, SuperinterfaceProvider, Thread, ThreadDialog, ThreadDialogContext, TtsAudioRuntimeProvider, UserAvatarContext, WebrtcAudioRuntimeProvider, useAssistant, useAudioThreadContext, useComponents, useCreateFile, useCreateMessage, useIsMutatingMessage, useLatestMessage, useMarkdownContext, useMessageContext, useMessageFormContext, useMessages, useSuperinterfaceContext, useSuperinterfaceContext as useThreadContext, useThreadDialogContext, useTtsAudioRuntime, useWebrtcAudioRuntime };
+export { AssistantAvatarContext, AssistantNameContext, AssistantProvider, AudioThread, AudioThreadDialog, Avatar6 as Avatar, ComponentsProvider, FunctionBase, FunctionComponentsContext, MarkdownContext, MarkdownProvider, MessageContent, MessageGroup, RunStep, SourceAnnotation, Suggestions, SuperinterfaceProvider, Thread, ThreadDialog, ThreadDialogContext, TtsAudioRuntimeProvider, UserAvatarContext, WebrtcAudioRuntimeProvider, useAssistant, useAudioThreadContext, useComponents, useCreateFile, useCreateMessage, useIsMutatingMessage, useLatestMessage, useMarkdownContext, useMessageContext, useMessageFormContext, useMessages, useSuperinterfaceContext, useSuperinterfaceContext as useThreadContext, useThreadDialogContext, useTtsAudioRuntime, useWebrtcAudioRuntime };
 //# sourceMappingURL=index.js.map