@superinterface/react 3.0.2 → 3.2.0

package/dist/index.js

@@ -415,388 +415,15 @@ var SuperinterfaceProvider = function(param) {
 };
 // src/components/threads/Thread/Messages/index.tsx
 import { Flex as Flex18 } from "@radix-ui/themes";
-// src/components/threads/Thread/Messages/Content/index.tsx
-import { useEffect as useEffect2 } from "react";
-// src/hooks/messages/useMessages/index.tsx
-import { useMemo } from "react";
-import { useInfiniteQuery, useQueryClient as useQueryClient2 } from "@tanstack/react-query";
-// src/lib/threads/queryOptions/index.ts
-import { infiniteQueryOptions } from "@tanstack/react-query";
-// src/lib/threads/queryOptions/variableParams.ts
-var variableParams = function(param) {
-    var variables = param.variables, superinterfaceContext = param.superinterfaceContext;
-    var _superinterfaceContext_threadIdCookieOptions;
-    if (variables.threadId) return variables;
-    if (!variables.assistantId) return variables;
-    if (!((_superinterfaceContext_threadIdCookieOptions = superinterfaceContext.threadIdCookieOptions) === null || _superinterfaceContext_threadIdCookieOptions === void 0 ? void 0 : _superinterfaceContext_threadIdCookieOptions.get)) return variables;
-    var threadId = superinterfaceContext.threadIdCookieOptions.get({
-        assistantId: variables.assistantId
-    });
-    if (!threadId) return variables;
-    return _object_spread_props(_object_spread({}, variables), {
-        threadId: threadId
-    });
-};
-// src/lib/threads/queryOptions/index.ts
-var queryOptions = function(param) {
-    var queryKeyBase = param.queryKeyBase, path2 = param.path, queryClient = param.queryClient, threadContext = param.threadContext, superinterfaceContext = param.superinterfaceContext;
-    var queryKey = _to_consumable_array(queryKeyBase).concat([
-        threadContext.variables
-    ]);
-    return infiniteQueryOptions(_object_spread_props(_object_spread({
-        // @ts-ignore-next-line
-        queryFn: /*#__PURE__*/ function() {
-            var _ref = _async_to_generator(function(param) {
-                var pageParam, queryKey2, _queryKey2, _key, variables, params;
-                return _ts_generator(this, function(_state) {
-                    pageParam = param.pageParam, queryKey2 = param.queryKey;
-                    _queryKey2 = _sliced_to_array(queryKey2, 2), _key = _queryKey2[0], variables = _queryKey2[1];
-                    params = new URLSearchParams(_object_spread({}, pageParam ? {
-                        pageParam: pageParam
-                    } : {}, variableParams({
-                        variables: variables,
-                        superinterfaceContext: superinterfaceContext
-                    })));
-                    return [
-                        2,
-                        fetch("".concat(superinterfaceContext.baseUrl).concat(path2, "?").concat(params)).then(/*#__PURE__*/ function() {
-                            var _ref = _async_to_generator(function(response) {
-                                var errorResponse, error;
-                                return _ts_generator(this, function(_state) {
-                                    switch(_state.label){
-                                        case 0:
-                                            if (!(response.status !== 200)) return [
-                                                3,
-                                                4
-                                            ];
-                                            _state.label = 1;
-                                        case 1:
-                                            _state.trys.push([
-                                                1,
-                                                3,
-                                                ,
-                                                4
-                                            ]);
-                                            return [
-                                                4,
-                                                response.json()
-                                            ];
-                                        case 2:
-                                            errorResponse = _state.sent();
-                                            throw new Error(errorResponse.error);
-                                        case 3:
-                                            error = _state.sent();
-                                            throw new Error("Failed to fetch");
-                                        case 4:
-                                            return [
-                                                2,
-                                                response.json()
-                                            ];
-                                    }
-                                });
-                            });
-                            return function(response) {
-                                return _ref.apply(this, arguments);
-                            };
-                        }())
-                    ];
-                });
-            });
-            return function(_) {
-                return _ref.apply(this, arguments);
-            };
-        }(),
-        initialPageParam: void 0,
-        getNextPageParam: function(lastPage) {
-            if (!lastPage.hasNextPage) return null;
-            return lastPage.lastId;
-        },
-        limit: 10
-    }, threadContext.defaultOptions.queries, queryClient.getQueryDefaults(queryKey)), {
-        queryKey: queryKey
-    }));
-};
-// src/lib/messages/messagesQueryOptions.ts
-var messagesQueryOptions = function(param) {
-    var queryClient = param.queryClient, threadContext = param.threadContext, superinterfaceContext = param.superinterfaceContext;
-    return queryOptions({
-        queryKeyBase: [
-            "messages"
-        ],
-        path: "/messages",
-        queryClient: queryClient,
-        threadContext: threadContext,
-        superinterfaceContext: superinterfaceContext
-    });
-};
-// src/hooks/messages/useMessages/index.tsx
-var messages = function(param) {
-    var props = param.props;
-    if (!props.data) return [];
-    return props.data.pages.reduce(function(acc, page) {
-        return acc.concat(page.data);
-    }, []);
-};
-var useMessages = function() {
-    var queryClient = useQueryClient2();
-    var threadContext = useSuperinterfaceContext();
-    var superinterfaceContext = useSuperinterfaceContext();
-    var props = useInfiniteQuery(messagesQueryOptions({
-        queryClient: queryClient,
-        threadContext: threadContext,
-        superinterfaceContext: superinterfaceContext
-    }));
-    return useMemo(function() {
-        return _object_spread_props(_object_spread({}, props), {
-            // @ts-ignore-next-line
-            messages: messages({
-                props: props
-            })
-        });
-    }, [
-        props
-    ]);
-};
-// src/hooks/messageGroups/useMessageGroups/index.ts
-import { useMemo as useMemo2 } from "react";
-// src/hooks/messageGroups/useMessageGroups/lib/messageGroups/index.ts
-import _3 from "lodash";
-import { last } from "radash";
-// src/lib/messages/order.ts
-import { sort } from "radash";
-var order = function(param) {
-    var messages2 = param.messages;
-    return sort(messages2, function(m) {
-        return m.created_at;
-    }, true);
-};
-// src/hooks/messageGroups/useMessageGroups/lib/messageGroups/newGroup/newGroupItem.ts
-var newGroupItem = function(param) {
-    var message = param.message;
-    return {
-        id: message.id,
-        role: message.role,
-        createdAt: message.created_at,
-        messages: [
-            message
-        ]
-    };
-};
-// src/hooks/messageGroups/useMessageGroups/lib/messageGroups/newGroup/index.ts
-var newGroup = function(param) {
-    var groups = param.groups, message = param.message;
-    return _to_consumable_array(groups).concat([
-        newGroupItem({
-            message: message
-        })
-    ]);
-};
-// src/hooks/messageGroups/useMessageGroups/lib/messageGroups/index.ts
-var messageGroups = function(param) {
-    var messages2 = param.messages;
-    return _3.reduce(order({
-        messages: messages2
-    }), function(groups, message) {
-        var group = last(groups);
-        if (!group) return newGroup({
-            groups: groups,
-            message: message
-        });
-        if (group.role !== message.role) {
-            return newGroup({
-                groups: groups,
-                message: message
-            });
-        }
-        return _to_consumable_array(_3.dropRight(groups)).concat([
-            _object_spread_props(_object_spread({}, group), {
-                messages: _to_consumable_array(group.messages).concat([
-                    message
-                ])
-            })
-        ]);
-    }, []);
-};
-// src/hooks/messageGroups/useMessageGroups/index.ts
-var useMessageGroups = function(param) {
-    var messages2 = param.messages;
-    return useMemo2(function() {
-        return {
-            messageGroups: messageGroups({
-                messages: messages2
-            })
-        };
-    }, [
-        messages2
-    ]);
-};
-// src/components/skeletons/MessagesSkeleton/index.tsx
-import { forwardRef as forwardRef2 } from "react";
-import { Flex as Flex3, Avatar, Box, Skeleton } from "@radix-ui/themes";
-// src/components/messageGroups/MessageGroupBase/index.tsx
-import { forwardRef } from "react";
-import { Flex, Container } from "@radix-ui/themes";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var MessageGroupBase = forwardRef(function MessageGroupBase2(param, ref) {
-    var children = param.children;
-    return /* @__PURE__ */ jsx2(Container, {
-        ref: ref,
-        size: "2",
-        flexGrow: "0",
-        children: /* @__PURE__ */ jsx2(Flex, {
-            flexShrink: "0",
-            gap: "3",
-            children: children
-        })
-    });
-});
-// src/components/messageGroups/MessageGroupBase/Name.tsx
-import { Flex as Flex2, Text } from "@radix-ui/themes";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Name = function(param) {
-    var children = param.children;
-    return /* @__PURE__ */ jsx3(Flex2, {
-        align: "center",
-        height: "var(--space-5)",
-        children: /* @__PURE__ */ jsx3(Text, {
-            size: "2",
-            weight: "bold",
-            children: children
-        })
-    });
-};
-// src/components/skeletons/MessagesSkeleton/index.tsx
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
-var MessagesSkeleton = forwardRef2(function MessagesSkeleton2(_props, ref) {
-    return /* @__PURE__ */ jsxs(MessageGroupBase, {
-        ref: ref,
-        children: [
-            /* @__PURE__ */ jsx4(Skeleton, {
-                loading: true,
-                children: /* @__PURE__ */ jsx4(Avatar, {
-                    fallback: /* @__PURE__ */ jsx4(Flex3, {}),
-                    size: "1"
-                })
-            }),
-            /* @__PURE__ */ jsxs(Box, {
-                pb: "3",
-                children: [
-                    /* @__PURE__ */ jsx4(Name, {
-                        children: /* @__PURE__ */ jsx4(Skeleton, {
-                            loading: true,
-                            style: {
-                                width: "128px"
-                            }
-                        })
-                    }),
-                    /* @__PURE__ */ jsx4(Skeleton, {
-                        loading: true,
-                        style: {
-                            width: "256px"
-                        }
-                    }),
-                    /* @__PURE__ */ jsx4(Skeleton, {
-                        loading: true,
-                        style: {
-                            width: "256px",
-                            marginTop: "var(--space-2)"
-                        }
-                    }),
-                    /* @__PURE__ */ jsx4(Skeleton, {
-                        loading: true,
-                        style: {
-                            width: "256px",
-                            marginTop: "var(--space-2)"
-                        }
-                    })
-                ]
-            })
-        ]
-    });
-});
-// src/hooks/toasts/useToasts/index.ts
-import { useContext as useContext2 } from "react";
-// src/contexts/toasts/ToastsContext/index.ts
-import { createContext as createContext2 } from "react";
-var ToastsContext = createContext2({
-    toasts: [],
-    addToast: function() {}
-});
-// src/hooks/toasts/useToasts/index.ts
-var useToasts = function() {
-    return useContext2(ToastsContext);
-};
-// src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
-import { useContext as useContext8 } from "react";
-import { Box as Box11 } from "@radix-ui/themes";
-// src/components/messageGroups/MessageGroupBase/AssistantAvatar.tsx
-import { useContext as useContext3 } from "react";
-import { Flex as Flex4 } from "@radix-ui/themes";
-// src/contexts/assistants/AssistantAvatarContext/index.tsx
-import { createContext as createContext3 } from "react";
-import { Avatar as Avatar2 } from "@radix-ui/themes";
-import { LightningBoltIcon } from "@radix-ui/react-icons";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var AssistantAvatarContext = createContext3(/* @__PURE__ */ jsx5(Avatar2, {
-    fallback: /* @__PURE__ */ jsx5(LightningBoltIcon, {}),
-    size: "1"
-}));
-// src/components/messageGroups/MessageGroupBase/AssistantAvatar.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var AssistantAvatar = function() {
-    var AssistantAvatarContextValue = useContext3(AssistantAvatarContext);
-    return /* @__PURE__ */ jsx6(Flex4, {
-        flexShrink: "0",
-        height: "24px",
-        width: "24px",
-        style: {
-            borderRadius: "var(--radius-3)",
-            overflow: "hidden"
-        },
-        children: AssistantAvatarContextValue
-    });
-};
-// src/contexts/assistants/AssistantNameContext/index.tsx
-import { createContext as createContext4 } from "react";
-var AssistantNameContext = createContext4("Assistant");
-// src/components/messageGroups/MessageGroupBase/UserAvatar.tsx
-import { useContext as useContext4 } from "react";
-import { Flex as Flex5 } from "@radix-ui/themes";
-// src/contexts/users/UserAvatarContext/index.tsx
-import { createContext as createContext5 } from "react";
-import { Avatar as Avatar3 } from "@radix-ui/themes";
-import { PersonIcon } from "@radix-ui/react-icons";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var UserAvatarContext = createContext5(/* @__PURE__ */ jsx7(Avatar3, {
-    fallback: /* @__PURE__ */ jsx7(PersonIcon, {}),
-    size: "1"
-}));
-// src/components/messageGroups/MessageGroupBase/UserAvatar.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-var UserAvatar = function() {
-    var UserAvatarContextValue = useContext4(UserAvatarContext);
-    return /* @__PURE__ */ jsx8(Flex5, {
-        flexShrink: "0",
-        height: "24px",
-        width: "24px",
-        style: {
-            borderRadius: "var(--radius-3)",
-            overflow: "hidden"
-        },
-        children: UserAvatarContextValue
-    });
-};
-// src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
-import { Flex as Flex16 } from "@radix-ui/themes";
 // src/components/threads/Thread/Message/index.tsx
-import { useMemo as useMemo9 } from "react";
+import { useMemo as useMemo8 } from "react";
 import { isEmpty as isEmpty2 } from "radash";
-import { Box as Box10 } from "@radix-ui/themes";
+import { Box as Box9 } from "@radix-ui/themes";
 // src/components/skeletons/StartingContentSkeleton/index.tsx
-import { Skeleton as Skeleton2 } from "@radix-ui/themes";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { Skeleton } from "@radix-ui/themes";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var StartingContentSkeleton = function() {
-    return /* @__PURE__ */ jsx9(Skeleton2, {
+    return /* @__PURE__ */ jsx2(Skeleton, {
         loading: true,
         mt: "1",
         height: "var(--space-4)",
@@ -808,28 +435,28 @@ var StartingContentSkeleton = function() {
     });
 };
 // src/components/runSteps/RunSteps/index.tsx
-import { Flex as Flex10 } from "@radix-ui/themes";
-import { useContext as useContext6 } from "react";
+import { Flex as Flex5 } from "@radix-ui/themes";
+import { useContext as useContext3 } from "react";
 // src/contexts/components/ComponentsContext/index.tsx
-import { createContext as createContext7 } from "react";
+import { createContext as createContext3 } from "react";
 // src/components/runSteps/RunStep/ToolCalls/index.tsx
-import { Flex as Flex9 } from "@radix-ui/themes";
+import { Flex as Flex4 } from "@radix-ui/themes";
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/index.tsx
-import { useContext as useContext5 } from "react";
+import { useContext as useContext2 } from "react";
 // src/contexts/functions/FunctionComponentsContext/index.tsx
-import { createContext as createContext6 } from "react";
-var FunctionComponentsContext = createContext6({});
+import { createContext as createContext2 } from "react";
+var FunctionComponentsContext = createContext2({});
 // src/components/functions/FunctionBase/index.tsx
-import { Popover, Flex as Flex7 } from "@radix-ui/themes";
+import { Popover, Flex as Flex2 } from "@radix-ui/themes";
 // src/components/toolCalls/ToolCallBase/index.tsx
-import { Flex as Flex6, Button } from "@radix-ui/themes";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { Flex, Button } from "@radix-ui/themes";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var ToolCallBase = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx10(Flex6, {
+    return /* @__PURE__ */ jsx3(Flex, {
         py: "1",
         ml: "-2",
-        children: /* @__PURE__ */ jsx10(Button, {
+        children: /* @__PURE__ */ jsx3(Button, {
             size: "1",
             color: "gold",
             variant: "outline",
@@ -841,31 +468,31 @@ var ToolCallBase = function(param) {
     });
 };
 // src/components/toolCalls/ToolCallBase/ToolCallTitle.tsx
-import { Text as Text2 } from "@radix-ui/themes";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { Text } from "@radix-ui/themes";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var ToolCallTitle = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx11(Text2, {
+    return /* @__PURE__ */ jsx4(Text, {
         weight: "regular",
         children: children
     });
 };
 // src/components/toolCalls/ToolCallBase/ToolCallIcon.tsx
 import { CircleIcon, CircleBackslashIcon, CheckCircledIcon } from "@radix-ui/react-icons";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var ToolCallIcon = function(param) {
     var runStep = param.runStep;
     if (runStep.completed_at) {
-        return /* @__PURE__ */ jsx12(CheckCircledIcon, {});
+        return /* @__PURE__ */ jsx5(CheckCircledIcon, {});
     } else if (runStep.cancelled_at || runStep.failed_at || runStep.status === "expired") {
-        return /* @__PURE__ */ jsx12(CircleBackslashIcon, {});
+        return /* @__PURE__ */ jsx5(CircleBackslashIcon, {});
     } else {
-        return /* @__PURE__ */ jsx12(CircleIcon, {});
+        return /* @__PURE__ */ jsx5(CircleIcon, {});
     }
 };
 // src/components/functions/FunctionBase/Content/index.tsx
-import { useMemo as useMemo3 } from "react";
-import { Code, Box as Box2 } from "@radix-ui/themes";
+import { useMemo } from "react";
+import { Code, Box } from "@radix-ui/themes";
 // src/components/functions/FunctionBase/Content/lib/formattedJsonOrRaw.ts
 var formattedJsonOrRaw = function(param) {
     var value = param.value;
@@ -883,24 +510,24 @@ var formattedJsonOrRaw = function(param) {
     }
 };
 // src/components/functions/FunctionBase/Content/index.tsx
-import { jsx as jsx13, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
 var Content = function(param) {
     var fn = param.fn;
-    var args = useMemo3(function() {
+    var args = useMemo(function() {
         return formattedJsonOrRaw({
             value: fn.arguments
         });
     }, [
         fn
     ]);
-    var output = useMemo3(function() {
+    var output = useMemo(function() {
         return formattedJsonOrRaw({
             value: fn.output
         });
     }, [
         fn
     ]);
-    return /* @__PURE__ */ jsxs2(Code, {
+    return /* @__PURE__ */ jsxs(Code, {
         variant: "ghost",
         color: "gold",
         style: {
@@ -908,40 +535,40 @@ var Content = function(param) {
             wordBreak: "break-word"
         },
         children: [
-            args && /* @__PURE__ */ jsx13(Box2, {
+            args && /* @__PURE__ */ jsx6(Box, {
                 children: args
             }),
-            output && /* @__PURE__ */ jsx13(Box2, {
+            output && /* @__PURE__ */ jsx6(Box, {
                 children: output
             })
         ]
     });
 };
 // src/components/functions/FunctionBase/index.tsx
-import { jsx as jsx14, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 var FunctionBase = function(param) {
     var fn = param.fn, runStep = param.runStep, title2 = param.title;
-    return /* @__PURE__ */ jsxs3(Popover.Root, {
+    return /* @__PURE__ */ jsxs2(Popover.Root, {
         children: [
-            /* @__PURE__ */ jsx14(Popover.Trigger, {
-                children: /* @__PURE__ */ jsx14(Flex7, {
-                    children: /* @__PURE__ */ jsxs3(ToolCallBase, {
+            /* @__PURE__ */ jsx7(Popover.Trigger, {
+                children: /* @__PURE__ */ jsx7(Flex2, {
+                    children: /* @__PURE__ */ jsxs2(ToolCallBase, {
                         children: [
-                            /* @__PURE__ */ jsx14(ToolCallIcon, {
+                            /* @__PURE__ */ jsx7(ToolCallIcon, {
                                 runStep: runStep
                             }),
-                            /* @__PURE__ */ jsx14(ToolCallTitle, {
+                            /* @__PURE__ */ jsx7(ToolCallTitle, {
                                 children: title2
                             })
                         ]
                     })
                 })
             }),
-            /* @__PURE__ */ jsx14(Popover.Content, {
+            /* @__PURE__ */ jsx7(Popover.Content, {
                 style: {
                     maxHeight: "200px"
                 },
-                children: /* @__PURE__ */ jsx14(Content, {
+                children: /* @__PURE__ */ jsx7(Content, {
                     fn: fn
                 })
             })
@@ -960,10 +587,10 @@ var title = function(param) {
     }
 };
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/DefaultFunction/index.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var DefaultFunction = function(param) {
     var fn = param.fn, runStep = param.runStep;
-    return /* @__PURE__ */ jsx15(FunctionBase, {
+    return /* @__PURE__ */ jsx8(FunctionBase, {
         fn: fn,
         runStep: runStep,
         title: title({
@@ -973,28 +600,28 @@ var DefaultFunction = function(param) {
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/index.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var Fn = function(param) {
     var fn = param.fn, runStep = param.runStep;
-    var functionComponentsContext = useContext5(FunctionComponentsContext);
+    var functionComponentsContext = useContext2(FunctionComponentsContext);
     var Component = functionComponentsContext[fn.name] || DefaultFunction;
     return(// @ts-ignore-next-line
-    /* @__PURE__ */ jsx16(Component, {
+    /* @__PURE__ */ jsx9(Component, {
         fn: fn,
         runStep: runStep
     }));
 };
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/CodeInterpreter/index.tsx
-import { Popover as Popover2, Flex as Flex8 } from "@radix-ui/themes";
+import { Popover as Popover2, Flex as Flex3 } from "@radix-ui/themes";
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/CodeInterpreter/Content.tsx
-import { Code as Code2, Box as Box3 } from "@radix-ui/themes";
-import { jsx as jsx17, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Code as Code2, Box as Box2 } from "@radix-ui/themes";
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 var Content2 = function(param) {
     var codeInterpreter = param.codeInterpreter;
     if (!codeInterpreter.input) {
         return null;
     }
-    return /* @__PURE__ */ jsxs4(Code2, {
+    return /* @__PURE__ */ jsxs3(Code2, {
         variant: "ghost",
         color: "gold",
         style: {
@@ -1002,38 +629,38 @@ var Content2 = function(param) {
             wordBreak: "break-word"
         },
         children: [
-            /* @__PURE__ */ jsx17(Box3, {
+            /* @__PURE__ */ jsx10(Box2, {
                 children: codeInterpreter.input
             }),
-            /* @__PURE__ */ jsx17(Box3, {
+            /* @__PURE__ */ jsx10(Box2, {
                 children: JSON.stringify(codeInterpreter.outputs)
             })
         ]
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/CodeInterpreter/index.tsx
-import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 var CodeInterpreter = function(param) {
     var codeInterpreter = param.codeInterpreter, runStep = param.runStep;
-    return /* @__PURE__ */ jsxs5(Popover2.Root, {
+    return /* @__PURE__ */ jsxs4(Popover2.Root, {
         children: [
-            /* @__PURE__ */ jsx18(Popover2.Trigger, {
-                children: /* @__PURE__ */ jsx18(Flex8, {
-                    children: /* @__PURE__ */ jsxs5(ToolCallBase, {
+            /* @__PURE__ */ jsx11(Popover2.Trigger, {
+                children: /* @__PURE__ */ jsx11(Flex3, {
+                    children: /* @__PURE__ */ jsxs4(ToolCallBase, {
                         children: [
-                            /* @__PURE__ */ jsx18(ToolCallIcon, {
+                            /* @__PURE__ */ jsx11(ToolCallIcon, {
                                 runStep: runStep
                             }),
-                            /* @__PURE__ */ jsx18(ToolCallTitle, {
+                            /* @__PURE__ */ jsx11(ToolCallTitle, {
                                 children: "Using code interpreter"
                             })
                         ]
                     })
                 })
             }),
-            /* @__PURE__ */ jsx18(Popover2.Content, {
+            /* @__PURE__ */ jsx11(Popover2.Content, {
                 maxHeight: "200px",
-                children: /* @__PURE__ */ jsx18(Content2, {
+                children: /* @__PURE__ */ jsx11(Content2, {
                     codeInterpreter: codeInterpreter
                 })
             })
@@ -1041,30 +668,30 @@ var CodeInterpreter = function(param) {
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/FileSearch.tsx
-import { jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 var FileSearch = function(param) {
     var runStep = param.runStep, toolCall = param.toolCall;
-    return /* @__PURE__ */ jsxs6(ToolCallBase, {
+    return /* @__PURE__ */ jsxs5(ToolCallBase, {
         children: [
-            /* @__PURE__ */ jsx19(ToolCallIcon, {
+            /* @__PURE__ */ jsx12(ToolCallIcon, {
                 runStep: runStep
             }),
-            /* @__PURE__ */ jsx19(ToolCallTitle, {
+            /* @__PURE__ */ jsx12(ToolCallTitle, {
                 children: "Searching files"
             })
         ]
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/Fallback.tsx
-import { jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 var Fallback = function(param) {
     var runStep = param.runStep, toolCall = param.toolCall;
-    return /* @__PURE__ */ jsxs7(ToolCallBase, {
+    return /* @__PURE__ */ jsxs6(ToolCallBase, {
         children: [
-            /* @__PURE__ */ jsx20(ToolCallIcon, {
+            /* @__PURE__ */ jsx13(ToolCallIcon, {
                 runStep: runStep
             }),
-            /* @__PURE__ */ jsxs7(ToolCallTitle, {
+            /* @__PURE__ */ jsxs6(ToolCallTitle, {
                 children: [
                     "Using tool: ",
                     toolCall.type
@@ -1074,52 +701,52 @@ var Fallback = function(param) {
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var ToolCall = function(param) {
     var toolCall = param.toolCall, runStep = param.runStep;
     if (toolCall.type === "function") {
-        return /* @__PURE__ */ jsx21(Fn, {
+        return /* @__PURE__ */ jsx14(Fn, {
             fn: toolCall.function,
             runStep: runStep
         });
     }
     if (toolCall.type === "code_interpreter") {
-        return /* @__PURE__ */ jsx21(CodeInterpreter, {
+        return /* @__PURE__ */ jsx14(CodeInterpreter, {
             codeInterpreter: toolCall.code_interpreter,
             runStep: runStep
         });
     }
     if (toolCall.type === "file_search") {
-        return /* @__PURE__ */ jsx21(FileSearch, {
+        return /* @__PURE__ */ jsx14(FileSearch, {
             toolCall: toolCall,
             runStep: runStep
         });
     }
-    return /* @__PURE__ */ jsx21(Fallback, {
+    return /* @__PURE__ */ jsx14(Fallback, {
         toolCall: toolCall,
         runStep: runStep
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/Starting/index.tsx
-import { Popover as Popover3, Text as Text3 } from "@radix-ui/themes";
+import { Popover as Popover3, Text as Text2 } from "@radix-ui/themes";
 import { CircleIcon as CircleIcon2 } from "@radix-ui/react-icons";
-import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 var Starting = function() {
-    return /* @__PURE__ */ jsxs8(Popover3.Root, {
+    return /* @__PURE__ */ jsxs7(Popover3.Root, {
         children: [
-            /* @__PURE__ */ jsxs8(ToolCallBase, {
+            /* @__PURE__ */ jsxs7(ToolCallBase, {
                 children: [
-                    /* @__PURE__ */ jsx22(CircleIcon2, {}),
-                    /* @__PURE__ */ jsx22(ToolCallTitle, {
+                    /* @__PURE__ */ jsx15(CircleIcon2, {}),
+                    /* @__PURE__ */ jsx15(ToolCallTitle, {
                         children: "Starting actions"
                     })
                 ]
             }),
-            /* @__PURE__ */ jsx22(Popover3.Content, {
+            /* @__PURE__ */ jsx15(Popover3.Content, {
                 style: {
                     maxHeight: "500px"
                 },
-                children: /* @__PURE__ */ jsx22(Text3, {
+                children: /* @__PURE__ */ jsx15(Text2, {
                     children: "Getting ready to connect to domain API"
                 })
             })
@@ -1127,21 +754,25 @@ var Starting = function() {
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/index.tsx
-import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 var Root = function(param) {
-    var children = param.children;
-    return /* @__PURE__ */ jsx23(Flex9, {
+    var children = param.children, className = param.className, style = param.style;
+    return /* @__PURE__ */ jsx16(Flex4, {
         direction: "column",
+        className: className,
+        style: style,
         children: children
     });
 };
 var ToolCalls = function(param) {
-    var stepDetails = param.stepDetails, runStep = param.runStep;
-    return /* @__PURE__ */ jsxs9(Root, {
+    var stepDetails = param.stepDetails, runStep = param.runStep, className = param.className, style = param.style;
+    return /* @__PURE__ */ jsxs8(Root, {
+        className: className,
+        style: style,
         children: [
-            !stepDetails.tool_calls.length && /* @__PURE__ */ jsx23(Starting, {}),
+            !stepDetails.tool_calls.length && /* @__PURE__ */ jsx16(Starting, {}),
             stepDetails.tool_calls.map(function(toolCall) {
-                return /* @__PURE__ */ jsx23(ToolCall, {
+                return /* @__PURE__ */ jsx16(ToolCall, {
                     toolCall: toolCall,
                     runStep: runStep
                 }, toolCall.id);
@@ -1153,11 +784,13 @@ ToolCalls.Root = Root;
 ToolCalls.Starting = Starting;
 ToolCalls.ToolCall = ToolCall;
 // src/components/runSteps/RunStep/index.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var RunStep = function(param) {
-    var runStep = param.runStep;
+    var runStep = param.runStep, className = param.className, style = param.style;
     if (runStep.step_details.type === "tool_calls") {
-        return /* @__PURE__ */ jsx24(ToolCalls, {
+        return /* @__PURE__ */ jsx17(ToolCalls, {
+            className: className,
+            style: style,
             stepDetails: runStep.step_details,
             runStep: runStep
         });
@@ -1166,28 +799,28 @@ var RunStep = function(param) {
 };
 RunStep.ToolCalls = ToolCalls;
 // src/contexts/components/ComponentsContext/index.tsx
-var ComponentsContext = createContext7({
+var ComponentsContext = createContext3({
     components: {
         RunStep: RunStep
     }
 });
 // src/components/runSteps/RunSteps/index.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var RunSteps = function(param) {
     var runSteps = param.runSteps;
-    var componentsContext = useContext6(ComponentsContext);
+    var componentsContext = useContext3(ComponentsContext);
     var Component = componentsContext.components.RunStep;
-    return /* @__PURE__ */ jsx25(Flex10, {
+    return /* @__PURE__ */ jsx18(Flex5, {
         direction: "column-reverse",
         children: runSteps.map(function(runStep) {
-            return /* @__PURE__ */ jsx25(Component, {
+            return /* @__PURE__ */ jsx18(Component, {
                 runStep: runStep
             }, runStep.id);
         })
     });
 };
 // src/hooks/messages/useIsMutatingMessage/index.ts
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo2 } from "react";
 import { useIsMutating } from "@tanstack/react-query";
 var useIsMutatingMessage = function() {
     var threadContext = useSuperinterfaceContext();
@@ -1197,7 +830,7 @@ var useIsMutatingMessage = function() {
             threadContext.variables
         ]
     });
-    var isMutatingMessage = useMemo4(function() {
+    var isMutatingMessage = useMemo2(function() {
         return mutatingMessagesCount > 0;
     }, [
         mutatingMessagesCount
@@ -1205,28 +838,28 @@ var useIsMutatingMessage = function() {
     return isMutatingMessage;
 };
 // src/contexts/messages/MessageContext/index.ts
-import { createContext as createContext8 } from "react";
-var MessageContext = createContext8({
+import { createContext as createContext4 } from "react";
+var MessageContext = createContext4({
     message: null
 });
 // src/components/threads/Thread/Message/Provider.tsx
 var Provider = MessageContext.Provider;
 // src/components/threads/Thread/Message/Attachments/index.tsx
-import { Flex as Flex11, Badge } from "@radix-ui/themes";
+import { Flex as Flex6, Badge } from "@radix-ui/themes";
 import { FileIcon } from "@radix-ui/react-icons";
-import { jsx as jsx26, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 var Attachments = function(param) {
     var message = param.message;
     var _message_attachments;
     if (!((_message_attachments = message.attachments) === null || _message_attachments === void 0 ? void 0 : _message_attachments.length)) return null;
-    return /* @__PURE__ */ jsx26(Flex11, {
+    return /* @__PURE__ */ jsx19(Flex6, {
         align: "start",
         pb: "1",
-        children: /* @__PURE__ */ jsxs10(Badge, {
+        children: /* @__PURE__ */ jsxs9(Badge, {
             color: "gray",
             variant: "surface",
             children: [
-                /* @__PURE__ */ jsx26(FileIcon, {}),
+                /* @__PURE__ */ jsx19(FileIcon, {}),
                 message.attachments.length,
                 " file",
                 message.attachments.length > 1 ? "s" : ""
@@ -1237,19 +870,19 @@ var Attachments = function(param) {
 // src/components/threads/Thread/Message/ContentPart/TextContent.tsx
 import Markdown from "react-markdown";
 // src/hooks/markdown/useMarkdownContext/index.ts
-import { useContext as useContext7 } from "react";
+import { useContext as useContext5 } from "react";
 // src/contexts/markdown/MarkdownContext/index.ts
-import { createContext as createContext9 } from "react";
+import { createContext as createContext6 } 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 { Box as Box4, Text as Text4 } from "@radix-ui/themes";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { Box as Box3, Text as Text3 } from "@radix-ui/themes";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var Paragraph = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx27(Box4, {
+    return /* @__PURE__ */ jsx20(Box3, {
         pb: "3",
-        children: /* @__PURE__ */ jsx27(Text4, {
+        children: /* @__PURE__ */ jsx20(Text3, {
             size: "3",
             style: {
                 whiteSpace: "pre-line",
@@ -1261,10 +894,10 @@ var Paragraph = function(param) {
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Link.tsx
 import { Link as RadixLink } from "@radix-ui/themes";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var Link = function(param) {
     var children = param.children, href = param.href, download = param.download, _param_target = param.target, target = _param_target === void 0 ? "_blank" : _param_target;
-    return /* @__PURE__ */ jsx28(RadixLink, {
+    return /* @__PURE__ */ jsx21(RadixLink, {
         href: href,
         target: target,
         download: download,
@@ -1272,14 +905,14 @@ var Link = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/UnorderedList.tsx
-import { Box as Box5 } from "@radix-ui/themes";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { Box as Box4 } from "@radix-ui/themes";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var UnorderedList = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx29(Box5, {
+    return /* @__PURE__ */ jsx22(Box4, {
         pb: "3",
         asChild: true,
-        children: /* @__PURE__ */ jsx29("ul", {
+        children: /* @__PURE__ */ jsx22("ul", {
             style: {
                 listStylePosition: "inside"
             },
@@ -1288,14 +921,14 @@ var UnorderedList = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/OrderedList.tsx
-import { Box as Box6 } from "@radix-ui/themes";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { Box as Box5 } from "@radix-ui/themes";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var OrderedList = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx30(Box6, {
+    return /* @__PURE__ */ jsx23(Box5, {
         pb: "3",
         asChild: true,
-        children: /* @__PURE__ */ jsx30("ol", {
+        children: /* @__PURE__ */ jsx23("ol", {
             style: {
                 listStylePosition: "inside"
             },
@@ -1304,32 +937,32 @@ var OrderedList = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/ListItem.tsx
-import { Box as Box7 } from "@radix-ui/themes";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { Box as Box6 } from "@radix-ui/themes";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var ListItem = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx31(Box7, {
+    return /* @__PURE__ */ jsx24(Box6, {
         pb: "1",
-        children: /* @__PURE__ */ jsx31("li", {
+        children: /* @__PURE__ */ jsx24("li", {
             children: children
         })
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Strong.tsx
 import { Strong as RadixStrong } from "@radix-ui/themes";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var Strong = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx32(RadixStrong, {
+    return /* @__PURE__ */ jsx25(RadixStrong, {
         children: children
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Pre.tsx
-import { Box as Box8 } from "@radix-ui/themes";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { Box as Box7 } from "@radix-ui/themes";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var Pre = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx33(Box8, {
+    return /* @__PURE__ */ jsx26(Box7, {
         style: {
             whiteSpace: "pre-wrap",
             wordBreak: "break-word"
@@ -1340,12 +973,153 @@ var Pre = function(param) {
 // src/contexts/markdown/MarkdownContext/lib/components/Code.tsx
 import { Code as RadixCode } from "@radix-ui/themes";
 // src/components/suggestions/Suggestions/index.tsx
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo6 } from "react";
+// src/hooks/messages/useLatestMessage/index.ts
+import { useMemo as useMemo4 } from "react";
+// src/hooks/messages/useMessages/index.tsx
+import { useMemo as useMemo3 } from "react";
+import { useInfiniteQuery, useQueryClient as useQueryClient2 } from "@tanstack/react-query";
+// src/lib/threads/queryOptions/index.ts
+import { infiniteQueryOptions } from "@tanstack/react-query";
+// src/lib/threads/queryOptions/variableParams.ts
+var variableParams = function(param) {
+    var variables = param.variables, superinterfaceContext = param.superinterfaceContext;
+    var _superinterfaceContext_threadIdCookieOptions;
+    if (variables.threadId) return variables;
+    if (!variables.assistantId) return variables;
+    if (!((_superinterfaceContext_threadIdCookieOptions = superinterfaceContext.threadIdCookieOptions) === null || _superinterfaceContext_threadIdCookieOptions === void 0 ? void 0 : _superinterfaceContext_threadIdCookieOptions.get)) return variables;
+    var threadId = superinterfaceContext.threadIdCookieOptions.get({
+        assistantId: variables.assistantId
+    });
+    if (!threadId) return variables;
+    return _object_spread_props(_object_spread({}, variables), {
+        threadId: threadId
+    });
+};
+// src/lib/threads/queryOptions/index.ts
+var queryOptions = function(param) {
+    var queryKeyBase = param.queryKeyBase, path2 = param.path, queryClient = param.queryClient, threadContext = param.threadContext, superinterfaceContext = param.superinterfaceContext;
+    var queryKey = _to_consumable_array(queryKeyBase).concat([
+        threadContext.variables
+    ]);
+    return infiniteQueryOptions(_object_spread_props(_object_spread({
+        // @ts-ignore-next-line
+        queryFn: /*#__PURE__*/ function() {
+            var _ref = _async_to_generator(function(param) {
+                var pageParam, queryKey2, _queryKey2, _key, variables, params;
+                return _ts_generator(this, function(_state) {
+                    pageParam = param.pageParam, queryKey2 = param.queryKey;
+                    _queryKey2 = _sliced_to_array(queryKey2, 2), _key = _queryKey2[0], variables = _queryKey2[1];
+                    params = new URLSearchParams(_object_spread({}, pageParam ? {
+                        pageParam: pageParam
+                    } : {}, variableParams({
+                        variables: variables,
+                        superinterfaceContext: superinterfaceContext
+                    })));
+                    return [
+                        2,
+                        fetch("".concat(superinterfaceContext.baseUrl).concat(path2, "?").concat(params)).then(/*#__PURE__*/ function() {
+                            var _ref = _async_to_generator(function(response) {
+                                var errorResponse, error;
+                                return _ts_generator(this, function(_state) {
+                                    switch(_state.label){
+                                        case 0:
+                                            if (!(response.status !== 200)) return [
+                                                3,
+                                                4
+                                            ];
+                                            _state.label = 1;
+                                        case 1:
+                                            _state.trys.push([
+                                                1,
+                                                3,
+                                                ,
+                                                4
+                                            ]);
+                                            return [
+                                                4,
+                                                response.json()
+                                            ];
+                                        case 2:
+                                            errorResponse = _state.sent();
+                                            throw new Error(errorResponse.error);
+                                        case 3:
+                                            error = _state.sent();
+                                            throw new Error("Failed to fetch");
+                                        case 4:
+                                            return [
+                                                2,
+                                                response.json()
+                                            ];
+                                    }
+                                });
+                            });
+                            return function(response) {
+                                return _ref.apply(this, arguments);
+                            };
+                        }())
+                    ];
+                });
+            });
+            return function(_) {
+                return _ref.apply(this, arguments);
+            };
+        }(),
+        initialPageParam: void 0,
+        getNextPageParam: function(lastPage) {
+            if (!lastPage.hasNextPage) return null;
+            return lastPage.lastId;
+        },
+        limit: 10
+    }, threadContext.defaultOptions.queries, queryClient.getQueryDefaults(queryKey)), {
+        queryKey: queryKey
+    }));
+};
+// src/lib/messages/messagesQueryOptions.ts
+var messagesQueryOptions = function(param) {
+    var queryClient = param.queryClient, threadContext = param.threadContext, superinterfaceContext = param.superinterfaceContext;
+    return queryOptions({
+        queryKeyBase: [
+            "messages"
+        ],
+        path: "/messages",
+        queryClient: queryClient,
+        threadContext: threadContext,
+        superinterfaceContext: superinterfaceContext
+    });
+};
+// src/hooks/messages/useMessages/index.tsx
+var messages = function(param) {
+    var props = param.props;
+    if (!props.data) return [];
+    return props.data.pages.reduce(function(acc, page) {
+        return acc.concat(page.data);
+    }, []);
+};
+var useMessages = function() {
+    var queryClient = useQueryClient2();
+    var threadContext = useSuperinterfaceContext();
+    var superinterfaceContext = useSuperinterfaceContext();
+    var props = useInfiniteQuery(messagesQueryOptions({
+        queryClient: queryClient,
+        threadContext: threadContext,
+        superinterfaceContext: superinterfaceContext
+    }));
+    return useMemo3(function() {
+        return _object_spread_props(_object_spread({}, props), {
+            // @ts-ignore-next-line
+            messages: messages({
+                props: props
+            })
+        });
+    }, [
+        props
+    ]);
+};
 // src/hooks/messages/useLatestMessage/index.ts
-import { useMemo as useMemo5 } from "react";
 var useLatestMessage = function() {
     var props = useMessages();
-    return useMemo5(function() {
+    return useMemo4(function() {
         return _object_spread_props(_object_spread({}, props), {
             latestMessage: props.messages[0] || null
         });
@@ -1354,13 +1128,13 @@ var useLatestMessage = function() {
     ]);
 };
 // src/components/suggestions/Suggestions/Content.tsx
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo5 } from "react";
 import { isEmpty } from "radash";
 import { onlyText } from "react-children-utilities";
-import { Flex as Flex12 } from "@radix-ui/themes";
+import { Flex as Flex7 } from "@radix-ui/themes";
 // src/components/suggestions/Suggestions/Item.tsx
 import { ArrowUpIcon } from "@radix-ui/react-icons";
-import { Text as Text5, Button as Button2, Spinner } from "@radix-ui/themes";
+import { Text as Text4, Button as Button2, Spinner } from "@radix-ui/themes";
 // src/hooks/messages/useCreateMessage/index.ts
 import { partob } from "radash";
 import { useMutation, useQueryClient as useQueryClient3 } from "@tanstack/react-query";
@@ -1485,16 +1259,16 @@ var threadCreated = function(param) {
     });
 };
 // src/lib/optimistic/isOptimistic.ts
-import _4 from "lodash";
+import _3 from "lodash";
 var isOptimistic = function(param) {
     var id = param.id;
-    return _4.startsWith(id, "-");
+    return _3.startsWith(id, "-");
 };
 // src/hooks/messages/useCreateMessage/lib/mutationOptions/mutationFn/handleResponse/handlers/extendMessage.ts
-import { last as last2 } from "radash";
+import { last } from "radash";
 var extendMessage = function(param) {
     var message = param.message, messages2 = param.messages;
-    var _last2, _last21;
+    var _last, _last1;
     var prevRunMessages = messages2.filter(function(m) {
         return m.run_id === message.run_id;
     });
@@ -1503,8 +1277,8 @@ var extendMessage = function(param) {
             id: m.id
         });
     });
-    var _last2_runSteps, _ref;
-    var runSteps = (_ref = (_last2_runSteps = (_last2 = last2(prevOptimitisticRunMessages)) === null || _last2 === void 0 ? void 0 : _last2.runSteps) !== null && _last2_runSteps !== void 0 ? _last2_runSteps : (_last21 = last2(prevRunMessages)) === null || _last21 === void 0 ? void 0 : _last21.runSteps) !== null && _ref !== void 0 ? _ref : [];
+    var _last_runSteps, _ref;
+    var runSteps = (_ref = (_last_runSteps = (_last = last(prevOptimitisticRunMessages)) === null || _last === void 0 ? void 0 : _last.runSteps) !== null && _last_runSteps !== void 0 ? _last_runSteps : (_last1 = last(prevRunMessages)) === null || _last1 === void 0 ? void 0 : _last1.runSteps) !== null && _ref !== void 0 ? _ref : [];
     return _object_spread_props(_object_spread({}, message), {
         runSteps: runSteps
     });
@@ -1556,7 +1330,7 @@ var threadMessageCreated = function(param) {
     });
 };
 // src/hooks/messages/useCreateMessage/lib/mutationOptions/mutationFn/handleResponse/handlers/threadMessageDelta.ts
-import _5 from "lodash";
+import _4 from "lodash";
 import { omit as omit2 } from "radash";
 var updatedContentPart = function(param) {
     var prevContentPart = param.prevContentPart, delta = param.delta;
@@ -1579,7 +1353,7 @@ var updatedContentPart = function(param) {
 var updatedContent = function(param) {
     var content = param.content, value = param.value;
     if (!value.data.delta.content) return content;
-    var result = _5.cloneDeep(content);
+    var result = _4.cloneDeep(content);
     value.data.delta.content.forEach(function(delta) {
         result[delta.index] = updatedContentPart({
             // @ts-ignore-next-line
@@ -1713,7 +1487,7 @@ var threadRunStepCreated = function(param) {
     });
 };
 // src/hooks/messages/useCreateMessage/lib/mutationOptions/mutationFn/handleResponse/handlers/threadRunStepDelta.ts
-import _6 from "lodash";
+import _5 from "lodash";
 import { omit as omit3 } from "radash";
 var updatedToolCall = function(param) {
     var toolCall = param.toolCall, delta = param.delta;
@@ -1723,7 +1497,7 @@ var updatedToolCall = function(param) {
         ]);
     }
     if (delta.type === "function" && delta.function && toolCall.type === "function" && toolCall.function) {
-        var result = _6.cloneDeep(toolCall);
+        var result = _5.cloneDeep(toolCall);
         var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
         try {
             for(var _iterator = Object.entries(delta.function)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
@@ -1755,7 +1529,7 @@ var updatedRunStep = function(param) {
     if (!(runStep === null || runStep === void 0 ? void 0 : (_runStep_step_details = runStep.step_details) === null || _runStep_step_details === void 0 ? void 0 : _runStep_step_details.tool_calls)) return runStep;
     if (((_value_data_delta = value.data.delta) === null || _value_data_delta === void 0 ? void 0 : (_value_data_delta_step_details = _value_data_delta.step_details) === null || _value_data_delta_step_details === void 0 ? void 0 : _value_data_delta_step_details.type) === "tool_calls") {
         if (!value.data.delta.step_details.tool_calls) return runStep;
-        var newToolCalls = _6.cloneDeep(runStep.step_details.tool_calls);
+        var newToolCalls = _5.cloneDeep(runStep.step_details.tool_calls);
         value.data.delta.step_details.tool_calls.forEach(function(delta) {
             return newToolCalls[delta.index] = updatedToolCall({
                 toolCall: newToolCalls[delta.index],
@@ -2119,6 +1893,18 @@ var useCreateMessage = function() {
 };
 // src/components/suggestions/Suggestions/Item.tsx
 import { useQueryClient as useQueryClient4 } from "@tanstack/react-query";
+// src/hooks/toasts/useToasts/index.ts
+import { useContext as useContext4 } from "react";
+// src/contexts/toasts/ToastsContext/index.ts
+import { createContext as createContext5 } from "react";
+var ToastsContext = createContext5({
+    toasts: [],
+    addToast: function() {}
+});
+// src/hooks/toasts/useToasts/index.ts
+var useToasts = function() {
+    return useContext4(ToastsContext);
+};
 // src/lib/errors/createMessageDefaultOnError.ts
 var createMessageDefaultOnError = function(param) {
     var queryClient = param.queryClient, addToast = param.addToast, threadContext = param.threadContext;
@@ -2145,9 +1931,9 @@ var createMessageDefaultOnError = function(param) {
     };
 };
 // src/components/suggestions/Suggestions/Item.tsx
-import { jsx as jsx34, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
 var Item = function(param) {
-    var suggestion = param.suggestion, isDisabled = param.isDisabled;
+    var suggestion = param.suggestion, isDisabled = param.isDisabled, className = param.className, style = param.style;
     var addToast = useToasts().addToast;
     var queryClient = useQueryClient4();
     var threadContext = useSuperinterfaceContext();
@@ -2158,7 +1944,7 @@ var Item = function(param) {
             threadContext: threadContext
         })
     }), createMessage = _useCreateMessage.createMessage, isPending = _useCreateMessage.isPending;
-    return /* @__PURE__ */ jsx34(Content3, {
+    return /* @__PURE__ */ jsx27(Content3, {
         onClick: function() {
             createMessage({
                 // @ts-ignore-next-line
@@ -2167,29 +1953,32 @@ var Item = function(param) {
         },
         isDisabled: isDisabled,
         isPending: isPending,
+        className: className,
+        style: style,
         children: suggestion
     });
 };
 var Content3 = function(param) {
-    var onClick = param.onClick, isDisabled = param.isDisabled, isPending = param.isPending, children = param.children;
-    return /* @__PURE__ */ jsxs11(Button2, {
+    var onClick = param.onClick, isDisabled = param.isDisabled, isPending = param.isPending, children = param.children, className = param.className, style = param.style;
+    return /* @__PURE__ */ jsxs10(Button2, {
+        className: className,
         variant: "soft",
         onClick: onClick,
         disabled: isDisabled,
-        style: {
+        style: _object_spread({
             minHeight: "var(--base-button-height)",
             height: "inherit",
             flexShrink: 1
-        },
+        }, style !== null && style !== void 0 ? style : {}),
         children: [
-            /* @__PURE__ */ jsx34(Text5, {
+            /* @__PURE__ */ jsx27(Text4, {
                 size: "1",
                 weight: "regular",
                 children: children
             }),
-            /* @__PURE__ */ jsx34(Spinner, {
+            /* @__PURE__ */ jsx27(Spinner, {
                 loading: isPending,
-                children: /* @__PURE__ */ jsx34(ArrowUpIcon, {
+                children: /* @__PURE__ */ jsx27(ArrowUpIcon, {
                     style: {
                         flexShrink: 0
                     }
@@ -2200,11 +1989,11 @@ var Content3 = function(param) {
 };
 Item.Content = Content3;
 // src/components/suggestions/Suggestions/Content.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var Content4 = function(param) {
-    var children = param.children;
+    var children = param.children, className = param.className, style = param.style;
     var isMutatingMessage = useIsMutatingMessage();
-    var suggestions = useMemo6(function() {
+    var suggestions = useMemo5(function() {
         return onlyText(children).split(/\r?\n/).filter(function(c) {
             return !isEmpty(c);
         }).map(function(c) {
@@ -2214,12 +2003,14 @@ var Content4 = function(param) {
         children
     ]);
     if (isEmpty(suggestions)) return null;
-    return /* @__PURE__ */ jsx35(Flex12, {
+    return /* @__PURE__ */ jsx28(Flex7, {
         gap: "2",
         py: "2",
         wrap: "wrap",
+        className: className,
+        style: style,
         children: suggestions.map(function(suggestion) {
-            return /* @__PURE__ */ jsx35(Item, {
+            return /* @__PURE__ */ jsx28(Item, {
                 suggestion: suggestion,
                 isDisabled: isMutatingMessage
             }, suggestion);
@@ -2227,11 +2018,11 @@ var Content4 = function(param) {
     });
 };
 // src/components/suggestions/Suggestions/index.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var Suggestions = function(param) {
-    var children = param.children;
+    var children = param.children, className = param.className, style = param.style;
     var latestMessageProps = useLatestMessage();
-    var isDisabled = useMemo7(function() {
+    var isDisabled = useMemo6(function() {
         var // @ts-ignore-next-line
         _latestMessageProps_latestMessage_metadata, _latestMessageProps_latestMessage;
         return (_latestMessageProps_latestMessage = latestMessageProps.latestMessage) === null || _latestMessageProps_latestMessage === void 0 ? void 0 : (_latestMessageProps_latestMessage_metadata = _latestMessageProps_latestMessage.metadata) === null || _latestMessageProps_latestMessage_metadata === void 0 ? void 0 : _latestMessageProps_latestMessage_metadata.isBlocking;
@@ -2240,31 +2031,33 @@ var Suggestions = function(param) {
     ]);
     if (latestMessageProps.isLoading) return null;
     if (isDisabled) return null;
-    return /* @__PURE__ */ jsx36(Content4, {
+    return /* @__PURE__ */ jsx29(Content4, {
+        className: className,
+        style: style,
         children: children
     });
 };
 Suggestions.Item = Item;
 // src/contexts/markdown/MarkdownContext/lib/components/Code.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var Code3 = function(param) {
     var children = param.children, className = param.className;
     if (className === "language-suggestions") {
-        return /* @__PURE__ */ jsx37(Suggestions, {
+        return /* @__PURE__ */ jsx30(Suggestions, {
             children: children
         });
     }
-    return /* @__PURE__ */ jsx37(RadixCode, {
+    return /* @__PURE__ */ jsx30(RadixCode, {
         children: children
     });
 };
 // src/components/images/Image.tsx
-import { Box as Box9 } from "@radix-ui/themes";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { Box as Box8 } from "@radix-ui/themes";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var Image = function(props) {
-    return /* @__PURE__ */ jsx38(Box9, {
+    return /* @__PURE__ */ jsx31(Box8, {
         pb: "3",
-        children: /* @__PURE__ */ jsx38("img", _object_spread_props(_object_spread({}, props), {
+        children: /* @__PURE__ */ jsx31("img", _object_spread_props(_object_spread({}, props), {
             style: {
                 maxWidth: "100%",
                 height: "auto"
@@ -2319,21 +2112,21 @@ var isAudioSrc = function(param) {
     return src.endsWith(".mp3") || src.endsWith(".wav");
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Img/Video/index.tsx
-import { Flex as Flex13 } from "@radix-ui/themes";
+import { Flex as Flex8 } from "@radix-ui/themes";
 import "@vidstack/react/player/styles/base.css";
 import { MediaPlayer, MediaProvider, Controls } from "@vidstack/react";
 // src/components/media/PlayButton.tsx
 import { PlayButton as VidstackPlayButton, useMediaState } from "@vidstack/react";
 import { IconButton } from "@radix-ui/themes";
 import { PlayIcon, PauseIcon } from "@radix-ui/react-icons";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var PlayButton = function() {
     var isPaused = useMediaState("paused");
-    return /* @__PURE__ */ jsx39(IconButton, {
+    return /* @__PURE__ */ jsx32(IconButton, {
         variant: "ghost",
         asChild: true,
-        children: /* @__PURE__ */ jsx39(VidstackPlayButton, {
-            children: isPaused ? /* @__PURE__ */ jsx39(PlayIcon, {}) : /* @__PURE__ */ jsx39(PauseIcon, {})
+        children: /* @__PURE__ */ jsx32(VidstackPlayButton, {
+            children: isPaused ? /* @__PURE__ */ jsx32(PlayIcon, {}) : /* @__PURE__ */ jsx32(PauseIcon, {})
         })
     });
 };
@@ -2341,27 +2134,27 @@ var PlayButton = function() {
 import { MuteButton, useMediaState as useMediaState2, useMediaRemote } from "@vidstack/react";
 import { IconButton as IconButton2, HoverCard, Slider } from "@radix-ui/themes";
 import { SpeakerModerateIcon, SpeakerOffIcon } from "@radix-ui/react-icons";
-import { jsx as jsx40, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs11 } from "react/jsx-runtime";
 var VolumeButton = function() {
     var volume = useMediaState2("volume");
     var isMuted = useMediaState2("muted");
     var remote = useMediaRemote();
-    return /* @__PURE__ */ jsxs12(HoverCard.Root, {
+    return /* @__PURE__ */ jsxs11(HoverCard.Root, {
         children: [
-            /* @__PURE__ */ jsx40(HoverCard.Trigger, {
-                children: /* @__PURE__ */ jsx40(IconButton2, {
+            /* @__PURE__ */ jsx33(HoverCard.Trigger, {
+                children: /* @__PURE__ */ jsx33(IconButton2, {
                     variant: "ghost",
                     asChild: true,
-                    children: /* @__PURE__ */ jsx40(MuteButton, {
-                        children: isMuted || volume === 0 ? /* @__PURE__ */ jsx40(SpeakerOffIcon, {}) : /* @__PURE__ */ jsx40(SpeakerModerateIcon, {})
+                    children: /* @__PURE__ */ jsx33(MuteButton, {
+                        children: isMuted || volume === 0 ? /* @__PURE__ */ jsx33(SpeakerOffIcon, {}) : /* @__PURE__ */ jsx33(SpeakerModerateIcon, {})
                     })
                 })
             }),
-            /* @__PURE__ */ jsx40(HoverCard.Content, {
+            /* @__PURE__ */ jsx33(HoverCard.Content, {
                 size: "1",
                 side: "top",
                 height: "100px",
-                children: /* @__PURE__ */ jsx40(Slider, {
+                children: /* @__PURE__ */ jsx33(Slider, {
                     size: "1",
                     variant: "soft",
                     orientation: "vertical",
@@ -2378,10 +2171,10 @@ var VolumeButton = function() {
     });
 };
 // src/components/media/Time.tsx
-import { useState, useEffect, useMemo as useMemo8 } from "react";
+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 jsx41 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var Time = function() {
     var time = useMediaState3("currentTime");
     var duration = useMediaState3("duration");
@@ -2397,12 +2190,12 @@ var Time = function() {
         duration,
         seeking
     ]);
-    var step = useMemo8(function() {
+    var step = useMemo7(function() {
         return 1 / duration * 100;
     }, [
         duration
     ]);
-    return /* @__PURE__ */ jsx41(Slider2, {
+    return /* @__PURE__ */ jsx34(Slider2, {
         size: "1",
         variant: "soft",
         value: [
@@ -2423,12 +2216,12 @@ var Time = function() {
 };
 // src/components/media/MediaContainer.tsx
 import { Card, Inset } from "@radix-ui/themes";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var MediaContainer = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx42(Card, {
+    return /* @__PURE__ */ jsx35(Card, {
         mb: "3",
-        children: /* @__PURE__ */ jsx42(Inset, {
+        children: /* @__PURE__ */ jsx35(Inset, {
             clip: "padding-box",
             style: {
                 display: "flex",
@@ -2442,23 +2235,23 @@ var MediaContainer = function(param) {
 import { FullscreenButton as VidstackFullscreenButton, useMediaState as useMediaState4 } from "@vidstack/react";
 import { IconButton as IconButton3 } from "@radix-ui/themes";
 import { EnterFullScreenIcon, ExitFullScreenIcon } from "@radix-ui/react-icons";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var FullscreenButton = function() {
     var isFullscreen = useMediaState4("fullscreen");
-    return /* @__PURE__ */ jsx43(IconButton3, {
+    return /* @__PURE__ */ jsx36(IconButton3, {
         variant: "ghost",
         asChild: true,
-        children: /* @__PURE__ */ jsx43(VidstackFullscreenButton, {
-            children: isFullscreen ? /* @__PURE__ */ jsx43(ExitFullScreenIcon, {}) : /* @__PURE__ */ jsx43(EnterFullScreenIcon, {})
+        children: /* @__PURE__ */ jsx36(VidstackFullscreenButton, {
+            children: isFullscreen ? /* @__PURE__ */ jsx36(ExitFullScreenIcon, {}) : /* @__PURE__ */ jsx36(EnterFullScreenIcon, {})
         })
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Img/Video/index.tsx
-import { jsx as jsx44, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs12 } from "react/jsx-runtime";
 var Video = function(param) {
     var src = param.src;
-    return /* @__PURE__ */ jsx44(MediaContainer, {
-        children: /* @__PURE__ */ jsxs13(MediaPlayer, {
+    return /* @__PURE__ */ jsx37(MediaContainer, {
+        children: /* @__PURE__ */ jsxs12(MediaPlayer, {
             src: {
                 src: src,
                 type: "video/".concat(src.split(".").pop())
@@ -2467,11 +2260,11 @@ var Video = function(param) {
             hideControlsOnMouseLeave: true,
             crossOrigin: true,
             children: [
-                /* @__PURE__ */ jsx44(MediaProvider, {}),
-                /* @__PURE__ */ jsx44("style", {
+                /* @__PURE__ */ jsx37(MediaProvider, {}),
+                /* @__PURE__ */ jsx37("style", {
                     children: "\n          .superinterface-video-controls {\n            opacity: 0;\n            transition: opacity 0.2s ease-out;\n          }\n\n          .superinterface-video-controls[data-visible] {\n            opacity: 1;\n          }\n        "
                 }),
-                /* @__PURE__ */ jsx44(Flex13, {
+                /* @__PURE__ */ jsx37(Flex8, {
                     asChild: true,
                     position: "absolute",
                     bottom: "0",
@@ -2483,18 +2276,18 @@ var Video = function(param) {
                         zIndex: 10,
                         background: "var(--accent-4)"
                     },
-                    children: /* @__PURE__ */ jsx44(Controls.Root, {
-                        children: /* @__PURE__ */ jsx44(Flex13, {
+                    children: /* @__PURE__ */ jsx37(Controls.Root, {
+                        children: /* @__PURE__ */ jsx37(Flex8, {
                             asChild: true,
                             align: "center",
                             gap: "3",
                             flexGrow: "1",
-                            children: /* @__PURE__ */ jsxs13(Controls.Group, {
+                            children: /* @__PURE__ */ jsxs12(Controls.Group, {
                                 children: [
-                                    /* @__PURE__ */ jsx44(PlayButton, {}),
-                                    /* @__PURE__ */ jsx44(Time, {}),
-                                    /* @__PURE__ */ jsx44(VolumeButton, {}),
-                                    /* @__PURE__ */ jsx44(FullscreenButton, {})
+                                    /* @__PURE__ */ jsx37(PlayButton, {}),
+                                    /* @__PURE__ */ jsx37(Time, {}),
+                                    /* @__PURE__ */ jsx37(VolumeButton, {}),
+                                    /* @__PURE__ */ jsx37(FullscreenButton, {})
                                 ]
                             })
                         })
@@ -2505,14 +2298,14 @@ var Video = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Img/Audio/index.tsx
-import { Flex as Flex14 } from "@radix-ui/themes";
+import { Flex as Flex9 } 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 jsx45, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs13 } from "react/jsx-runtime";
 var Audio = function(param) {
     var src = param.src;
-    return /* @__PURE__ */ jsx45(MediaContainer, {
-        children: /* @__PURE__ */ jsxs14(MediaPlayer2, {
+    return /* @__PURE__ */ jsx38(MediaContainer, {
+        children: /* @__PURE__ */ jsxs13(MediaPlayer2, {
             src: {
                 src: src,
                 type: "audio/".concat(src.split(".").pop())
@@ -2521,8 +2314,8 @@ var Audio = function(param) {
             crossOrigin: true,
             playsInline: true,
             children: [
-                /* @__PURE__ */ jsx45(MediaProvider2, {}),
-                /* @__PURE__ */ jsx45(Flex14, {
+                /* @__PURE__ */ jsx38(MediaProvider2, {}),
+                /* @__PURE__ */ jsx38(Flex9, {
                     asChild: true,
                     p: "3",
                     flexGrow: "1",
@@ -2530,17 +2323,17 @@ var Audio = function(param) {
                         zIndex: 10,
                         background: "var(--accent-4)"
                     },
-                    children: /* @__PURE__ */ jsx45(Controls2.Root, {
-                        children: /* @__PURE__ */ jsx45(Flex14, {
+                    children: /* @__PURE__ */ jsx38(Controls2.Root, {
+                        children: /* @__PURE__ */ jsx38(Flex9, {
                             asChild: true,
                             align: "center",
                             gap: "3",
                             flexGrow: "1",
-                            children: /* @__PURE__ */ jsxs14(Controls2.Group, {
+                            children: /* @__PURE__ */ jsxs13(Controls2.Group, {
                                 children: [
-                                    /* @__PURE__ */ jsx45(PlayButton, {}),
-                                    /* @__PURE__ */ jsx45(Time, {}),
-                                    /* @__PURE__ */ jsx45(VolumeButton, {})
+                                    /* @__PURE__ */ jsx38(PlayButton, {}),
+                                    /* @__PURE__ */ jsx38(Time, {}),
+                                    /* @__PURE__ */ jsx38(VolumeButton, {})
                                 ]
                             })
                         })
@@ -2551,48 +2344,48 @@ var Audio = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Img/index.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var Img = function(props) {
     if (!props.src) {
-        return /* @__PURE__ */ jsx46(Image, _object_spread({}, props));
+        return /* @__PURE__ */ jsx39(Image, _object_spread({}, props));
     } else if (isVideoSrc({
         src: props.src
     })) {
-        return /* @__PURE__ */ jsx46(Video, {
+        return /* @__PURE__ */ jsx39(Video, {
             src: props.src
         });
     } else if (isAudioSrc({
         src: props.src
     })) {
-        return /* @__PURE__ */ jsx46(Audio, {
+        return /* @__PURE__ */ jsx39(Audio, {
             src: props.src
         });
     } else {
-        return /* @__PURE__ */ jsx46(Image, _object_spread({}, props));
+        return /* @__PURE__ */ jsx39(Image, _object_spread({}, props));
     }
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Annotation/index.tsx
 import { QuoteIcon } from "@radix-ui/react-icons";
 // src/contexts/markdown/MarkdownContext/lib/components/Annotation/AnnotationBase.tsx
-import { IconButton as IconButton4, Popover as Popover4, Flex as Flex15, Text as Text6 } from "@radix-ui/themes";
-import { jsx as jsx47, jsxs as jsxs15 } from "react/jsx-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";
 var AnnotationBase = function(param) {
     var icon = param.icon, content = param.content;
-    return /* @__PURE__ */ jsxs15(Popover4.Root, {
+    return /* @__PURE__ */ jsxs14(Popover4.Root, {
         children: [
-            /* @__PURE__ */ jsx47(Popover4.Trigger, {
-                children: /* @__PURE__ */ jsx47(IconButton4, {
+            /* @__PURE__ */ jsx40(Popover4.Trigger, {
+                children: /* @__PURE__ */ jsx40(IconButton4, {
                     variant: "soft",
                     color: "gray",
                     size: "1",
                     children: icon
                 })
             }),
-            /* @__PURE__ */ jsx47(Popover4.Content, {
+            /* @__PURE__ */ jsx40(Popover4.Content, {
                 size: "1",
-                children: /* @__PURE__ */ jsx47(Flex15, {
+                children: /* @__PURE__ */ jsx40(Flex10, {
                     direction: "column",
-                    children: /* @__PURE__ */ jsx47(Text6, {
+                    children: /* @__PURE__ */ jsx40(Text5, {
                         size: "1",
                         color: "gray",
                         children: content
@@ -2603,12 +2396,12 @@ var AnnotationBase = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Annotation/FilePathAnnotation.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var FilePathAnnotation = function(param) {
     var annotation = param.annotation, children = param.children;
     var superinterfaceContext = useSuperinterfaceContext();
     var nextSearchParams = new URLSearchParams(superinterfaceContext.variables);
-    return /* @__PURE__ */ jsx48(Link, {
+    return /* @__PURE__ */ jsx41(Link, {
         href: "".concat(superinterfaceContext.baseUrl, "/files/").concat(annotation.file_path.file_id, "/contents?").concat(nextSearchParams),
         target: "_self",
         download: true,
@@ -2616,16 +2409,16 @@ var FilePathAnnotation = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Annotation/index.tsx
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var Annotation = function(param) {
     var annotation = param.annotation, children = param.children;
     if (annotation.type === "file_citation") {
-        return /* @__PURE__ */ jsx49(AnnotationBase, {
-            icon: /* @__PURE__ */ jsx49(QuoteIcon, {}),
+        return /* @__PURE__ */ jsx42(AnnotationBase, {
+            icon: /* @__PURE__ */ jsx42(QuoteIcon, {}),
             content: "File cited."
         });
     } else if (annotation.type === "file_path") {
-        return /* @__PURE__ */ jsx49(FilePathAnnotation, {
+        return /* @__PURE__ */ jsx42(FilePathAnnotation, {
             annotation: annotation,
             children: children
         });
@@ -2633,7 +2426,7 @@ var Annotation = function(param) {
     return null;
 };
 // src/contexts/markdown/MarkdownContext/lib/components/index.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var components = {
     p: Paragraph,
     a: Link,
@@ -2646,48 +2439,48 @@ var components = {
     img: Img,
     annotation: Annotation,
     h1: function(props) {
-        return /* @__PURE__ */ jsx50(Heading, {
+        return /* @__PURE__ */ jsx43(Heading, {
             as: "h1",
             children: props.children
         });
     },
     h2: function(props) {
-        return /* @__PURE__ */ jsx50(Heading, {
+        return /* @__PURE__ */ jsx43(Heading, {
             as: "h2",
             size: "5",
             children: props.children
         });
     },
     h3: function(props) {
-        return /* @__PURE__ */ jsx50(Heading, {
+        return /* @__PURE__ */ jsx43(Heading, {
             as: "h3",
             size: "4",
             children: props.children
         });
     },
     h4: function(props) {
-        return /* @__PURE__ */ jsx50(Heading, {
+        return /* @__PURE__ */ jsx43(Heading, {
             as: "h4",
             size: "3",
             children: props.children
         });
     },
     h5: function(props) {
-        return /* @__PURE__ */ jsx50(Heading, {
+        return /* @__PURE__ */ jsx43(Heading, {
             as: "h5",
             size: "3",
             children: props.children
         });
     },
     h6: function(props) {
-        return /* @__PURE__ */ jsx50(Heading, {
+        return /* @__PURE__ */ jsx43(Heading, {
             as: "h6",
             size: "3",
             children: props.children
         });
     },
     table: function(props) {
-        return /* @__PURE__ */ jsx50(Table.Root, _object_spread_props(_object_spread({}, props), {
+        return /* @__PURE__ */ jsx43(Table.Root, _object_spread_props(_object_spread({}, props), {
             variant: "surface",
             mb: "3"
         }));
@@ -2870,135 +2663,358 @@ var getRemarkPlugins = function(param) {
         remarkGfm
     ];
 };
-// src/contexts/markdown/MarkdownContext/index.ts
-var MarkdownContext = createContext9({
-    components: components,
-    getRemarkPlugins: getRemarkPlugins
+// src/contexts/markdown/MarkdownContext/index.ts
+var MarkdownContext = createContext6({
+    components: components,
+    getRemarkPlugins: getRemarkPlugins
+});
+// src/hooks/markdown/useMarkdownContext/index.ts
+var useMarkdownContext = function() {
+    return useContext5(MarkdownContext);
+};
+// src/components/threads/Thread/Message/ContentPart/TextContent.tsx
+import { jsx as jsx44 } from "react/jsx-runtime";
+var TextContent = function(param) {
+    var content = param.content;
+    var _useMarkdownContext = useMarkdownContext(), getRemarkPlugins2 = _useMarkdownContext.getRemarkPlugins, rest = _object_without_properties(_useMarkdownContext, [
+        "getRemarkPlugins"
+    ]);
+    return(// @ts-ignore-next-line
+    /* @__PURE__ */ jsx44(Markdown, _object_spread_props(_object_spread({}, rest), {
+        remarkPlugins: getRemarkPlugins2({
+            content: content
+        }),
+        children: content.text.value
+    })));
+};
+// src/components/threads/Thread/Message/ContentPart/ImageFileContent.tsx
+import { jsx as jsx45 } from "react/jsx-runtime";
+var ImageFileContent = function(param) {
+    var content = param.content;
+    var superinterfaceContext = useSuperinterfaceContext();
+    var nextSearchParams = new URLSearchParams(superinterfaceContext.variables);
+    return /* @__PURE__ */ jsx45(Image, {
+        alt: "",
+        src: "".concat(superinterfaceContext.baseUrl, "/files/").concat(content.image_file.file_id, "/contents?").concat(nextSearchParams)
+    });
+};
+// src/components/threads/Thread/Message/ContentPart/index.tsx
+import { jsx as jsx46 } from "react/jsx-runtime";
+var ContentPart = function(param) {
+    var content = param.content;
+    if (content.type === "text") {
+        return /* @__PURE__ */ jsx46(TextContent, {
+            content: content
+        });
+    }
+    if (content.type === "image_file") {
+        return /* @__PURE__ */ jsx46(ImageFileContent, {
+            content: content
+        });
+    }
+    return null;
+};
+// src/components/threads/Thread/Message/index.tsx
+import { jsx as jsx47, jsxs as jsxs15 } from "react/jsx-runtime";
+var Message = function(param) {
+    var message = param.message, className = param.className, style = param.style;
+    var _useMemo8 = _sliced_to_array(useMemo8(function() {
+        if (!message.runSteps.length) return [
+            [],
+            []
+        ];
+        var messageCreationRunStepIndex = message.runSteps.findIndex(function(runStep) {
+            if (runStep.step_details.type !== "message_creation") return;
+            return runStep.step_details.message_creation.message_id === message.id;
+        });
+        var nextRunStepIndex = message.runSteps.slice(0, messageCreationRunStepIndex).findLastIndex(function(runStep) {
+            return runStep.step_details.type === "message_creation";
+        });
+        if (nextRunStepIndex === -1) {
+            nextRunStepIndex = 0;
+        }
+        var laterRunSteps2 = message.runSteps.slice(nextRunStepIndex, messageCreationRunStepIndex);
+        var prevRunStepIndex = message.runSteps.slice(messageCreationRunStepIndex + 1).findIndex(function(runStep) {
+            return runStep.step_details.type === "message_creation";
+        });
+        var olderRunSteps2;
+        if (prevRunStepIndex === -1) {
+            olderRunSteps2 = message.runSteps.slice(messageCreationRunStepIndex + 1);
+        } else {
+            olderRunSteps2 = message.runSteps.slice(messageCreationRunStepIndex + 1, messageCreationRunStepIndex + prevRunStepIndex);
+        }
+        return [
+            olderRunSteps2,
+            laterRunSteps2
+        ];
+    }, [
+        message
+    ]), 2), olderRunSteps = _useMemo8[0], laterRunSteps = _useMemo8[1];
+    var isMutatingMessage = useIsMutatingMessage();
+    var isInProgress = useMemo8(function() {
+        if (!isMutatingMessage) return false;
+        if (message.status === "in_progress") return true;
+        return message.runSteps.some(function(rs) {
+            return rs.status === "in_progress";
+        });
+    }, [
+        message
+    ]);
+    return /* @__PURE__ */ jsx47(Provider, {
+        value: {
+            message: message
+        },
+        children: /* @__PURE__ */ jsxs15(Box9, {
+            className: className,
+            style: style,
+            children: [
+                /* @__PURE__ */ jsx47(RunSteps, {
+                    runSteps: olderRunSteps
+                }),
+                /* @__PURE__ */ jsxs15(Box9, {
+                    children: [
+                        /* @__PURE__ */ jsx47(Attachments, {
+                            message: message
+                        }),
+                        message.content.map(function(content, index) {
+                            return /* @__PURE__ */ jsx47(ContentPart, {
+                                content: content
+                            }, index);
+                        }),
+                        isInProgress && isEmpty2(laterRunSteps) && /* @__PURE__ */ jsx47(StartingContentSkeleton, {})
+                    ]
+                }),
+                /* @__PURE__ */ jsx47(RunSteps, {
+                    runSteps: laterRunSteps
+                }),
+                isInProgress && !isEmpty2(laterRunSteps) && /* @__PURE__ */ jsx47(Box9, {
+                    children: /* @__PURE__ */ jsx47(StartingContentSkeleton, {})
+                })
+            ]
+        })
+    });
+};
+// src/components/threads/Thread/Messages/Content/index.tsx
+import { useEffect as useEffect2 } from "react";
+// src/hooks/messageGroups/useMessageGroups/index.ts
+import { useMemo as useMemo9 } from "react";
+// src/hooks/messageGroups/useMessageGroups/lib/messageGroups/index.ts
+import _6 from "lodash";
+import { last as last2 } from "radash";
+// src/lib/messages/order.ts
+import { sort } from "radash";
+var order = function(param) {
+    var messages2 = param.messages;
+    return sort(messages2, function(m) {
+        return m.created_at;
+    }, true);
+};
+// src/hooks/messageGroups/useMessageGroups/lib/messageGroups/newGroup/newGroupItem.ts
+var newGroupItem = function(param) {
+    var message = param.message;
+    return {
+        id: message.id,
+        role: message.role,
+        createdAt: message.created_at,
+        messages: [
+            message
+        ]
+    };
+};
+// src/hooks/messageGroups/useMessageGroups/lib/messageGroups/newGroup/index.ts
+var newGroup = function(param) {
+    var groups = param.groups, message = param.message;
+    return _to_consumable_array(groups).concat([
+        newGroupItem({
+            message: message
+        })
+    ]);
+};
+// src/hooks/messageGroups/useMessageGroups/lib/messageGroups/index.ts
+var messageGroups = function(param) {
+    var messages2 = param.messages;
+    return _6.reduce(order({
+        messages: messages2
+    }), function(groups, message) {
+        var group = last2(groups);
+        if (!group) return newGroup({
+            groups: groups,
+            message: message
+        });
+        if (group.role !== message.role) {
+            return newGroup({
+                groups: groups,
+                message: message
+            });
+        }
+        return _to_consumable_array(_6.dropRight(groups)).concat([
+            _object_spread_props(_object_spread({}, group), {
+                messages: _to_consumable_array(group.messages).concat([
+                    message
+                ])
+            })
+        ]);
+    }, []);
+};
+// src/hooks/messageGroups/useMessageGroups/index.ts
+var useMessageGroups = function(param) {
+    var messages2 = param.messages;
+    return useMemo9(function() {
+        return {
+            messageGroups: messageGroups({
+                messages: messages2
+            })
+        };
+    }, [
+        messages2
+    ]);
+};
+// src/components/skeletons/MessagesSkeleton/index.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { Flex as Flex13, Avatar, Box as Box10, Skeleton as Skeleton2 } from "@radix-ui/themes";
+// src/components/messageGroups/MessageGroupBase/index.tsx
+import { forwardRef } from "react";
+import { Flex as Flex11, Container } from "@radix-ui/themes";
+import { jsx as jsx48 } from "react/jsx-runtime";
+var MessageGroupBase = forwardRef(function MessageGroupBase2(param, ref) {
+    var children = param.children;
+    return /* @__PURE__ */ jsx48(Container, {
+        ref: ref,
+        size: "2",
+        flexGrow: "0",
+        children: /* @__PURE__ */ jsx48(Flex11, {
+            flexShrink: "0",
+            gap: "3",
+            children: children
+        })
+    });
+});
+// src/components/messageGroups/MessageGroupBase/Name.tsx
+import { Flex as Flex12, Text as Text6 } from "@radix-ui/themes";
+import { jsx as jsx49 } from "react/jsx-runtime";
+var Name = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ jsx49(Flex12, {
+        align: "center",
+        height: "var(--space-5)",
+        children: /* @__PURE__ */ jsx49(Text6, {
+            size: "2",
+            weight: "bold",
+            children: children
+        })
+    });
+};
+// src/components/skeletons/MessagesSkeleton/index.tsx
+import { jsx as jsx50, jsxs as jsxs16 } from "react/jsx-runtime";
+var MessagesSkeleton = forwardRef2(function MessagesSkeleton2(_props, ref) {
+    return /* @__PURE__ */ jsxs16(MessageGroupBase, {
+        ref: ref,
+        children: [
+            /* @__PURE__ */ jsx50(Skeleton2, {
+                loading: true,
+                children: /* @__PURE__ */ jsx50(Avatar, {
+                    fallback: /* @__PURE__ */ jsx50(Flex13, {}),
+                    size: "1"
+                })
+            }),
+            /* @__PURE__ */ jsxs16(Box10, {
+                pb: "3",
+                children: [
+                    /* @__PURE__ */ jsx50(Name, {
+                        children: /* @__PURE__ */ jsx50(Skeleton2, {
+                            loading: true,
+                            style: {
+                                width: "128px"
+                            }
+                        })
+                    }),
+                    /* @__PURE__ */ jsx50(Skeleton2, {
+                        loading: true,
+                        style: {
+                            width: "256px"
+                        }
+                    }),
+                    /* @__PURE__ */ jsx50(Skeleton2, {
+                        loading: true,
+                        style: {
+                            width: "256px",
+                            marginTop: "var(--space-2)"
+                        }
+                    }),
+                    /* @__PURE__ */ jsx50(Skeleton2, {
+                        loading: true,
+                        style: {
+                            width: "256px",
+                            marginTop: "var(--space-2)"
+                        }
+                    })
+                ]
+            })
+        ]
+    });
 });
-// src/hooks/markdown/useMarkdownContext/index.ts
-var useMarkdownContext = function() {
-    return useContext7(MarkdownContext);
-};
-// src/components/threads/Thread/Message/ContentPart/TextContent.tsx
+// src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
+import { useContext as useContext8 } from "react";
+import { Box as Box11 } from "@radix-ui/themes";
+// src/components/messageGroups/MessageGroupBase/AssistantAvatar.tsx
+import { useContext as useContext6 } from "react";
+import { Flex as Flex14 } from "@radix-ui/themes";
+// src/contexts/assistants/AssistantAvatarContext/index.tsx
+import { createContext as createContext7 } 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 TextContent = function(param) {
-    var content = param.content;
-    var _useMarkdownContext = useMarkdownContext(), getRemarkPlugins2 = _useMarkdownContext.getRemarkPlugins, rest = _object_without_properties(_useMarkdownContext, [
-        "getRemarkPlugins"
-    ]);
-    return /* @__PURE__ */ jsx51(Markdown, _object_spread_props(_object_spread({}, rest), {
-        remarkPlugins: getRemarkPlugins2({
-            content: content
-        }),
-        children: content.text.value
-    }));
-};
-// src/components/threads/Thread/Message/ContentPart/ImageFileContent.tsx
+var AssistantAvatarContext = createContext7(/* @__PURE__ */ jsx51(Avatar2, {
+    fallback: /* @__PURE__ */ jsx51(LightningBoltIcon, {}),
+    size: "1"
+}));
+// src/components/messageGroups/MessageGroupBase/AssistantAvatar.tsx
 import { jsx as jsx52 } from "react/jsx-runtime";
-var ImageFileContent = function(param) {
-    var content = param.content;
-    var superinterfaceContext = useSuperinterfaceContext();
-    var nextSearchParams = new URLSearchParams(superinterfaceContext.variables);
-    return /* @__PURE__ */ jsx52(Image, {
-        alt: "",
-        src: "".concat(superinterfaceContext.baseUrl, "/files/").concat(content.image_file.file_id, "/contents?").concat(nextSearchParams)
+var AssistantAvatar = function() {
+    var AssistantAvatarContextValue = useContext6(AssistantAvatarContext);
+    return /* @__PURE__ */ jsx52(Flex14, {
+        flexShrink: "0",
+        height: "24px",
+        width: "24px",
+        style: {
+            borderRadius: "var(--radius-3)",
+            overflow: "hidden"
+        },
+        children: AssistantAvatarContextValue
     });
 };
-// src/components/threads/Thread/Message/ContentPart/index.tsx
+// src/contexts/assistants/AssistantNameContext/index.tsx
+import { createContext as createContext8 } from "react";
+var AssistantNameContext = createContext8("Assistant");
+// src/components/messageGroups/MessageGroupBase/UserAvatar.tsx
+import { useContext as useContext7 } from "react";
+import { Flex as Flex15 } from "@radix-ui/themes";
+// src/contexts/users/UserAvatarContext/index.tsx
+import { createContext as createContext9 } 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 ContentPart = function(param) {
-    var content = param.content;
-    if (content.type === "text") {
-        return /* @__PURE__ */ jsx53(TextContent, {
-            content: content
-        });
-    }
-    if (content.type === "image_file") {
-        return /* @__PURE__ */ jsx53(ImageFileContent, {
-            content: content
-        });
-    }
-    return null;
-};
-// src/components/threads/Thread/Message/index.tsx
-import { jsx as jsx54, jsxs as jsxs16 } from "react/jsx-runtime";
-var Message = function(param) {
-    var message = param.message;
-    var _useMemo9 = _sliced_to_array(useMemo9(function() {
-        if (!message.runSteps.length) return [
-            [],
-            []
-        ];
-        var messageCreationRunStepIndex = message.runSteps.findIndex(function(runStep) {
-            if (runStep.step_details.type !== "message_creation") return;
-            return runStep.step_details.message_creation.message_id === message.id;
-        });
-        var nextRunStepIndex = message.runSteps.slice(0, messageCreationRunStepIndex).findLastIndex(function(runStep) {
-            return runStep.step_details.type === "message_creation";
-        });
-        if (nextRunStepIndex === -1) {
-            nextRunStepIndex = 0;
-        }
-        var laterRunSteps2 = message.runSteps.slice(nextRunStepIndex, messageCreationRunStepIndex);
-        var prevRunStepIndex = message.runSteps.slice(messageCreationRunStepIndex + 1).findIndex(function(runStep) {
-            return runStep.step_details.type === "message_creation";
-        });
-        var olderRunSteps2;
-        if (prevRunStepIndex === -1) {
-            olderRunSteps2 = message.runSteps.slice(messageCreationRunStepIndex + 1);
-        } else {
-            olderRunSteps2 = message.runSteps.slice(messageCreationRunStepIndex + 1, messageCreationRunStepIndex + prevRunStepIndex);
-        }
-        return [
-            olderRunSteps2,
-            laterRunSteps2
-        ];
-    }, [
-        message
-    ]), 2), olderRunSteps = _useMemo9[0], laterRunSteps = _useMemo9[1];
-    var isMutatingMessage = useIsMutatingMessage();
-    var isInProgress = useMemo9(function() {
-        if (!isMutatingMessage) return false;
-        if (message.status === "in_progress") return true;
-        return message.runSteps.some(function(rs) {
-            return rs.status === "in_progress";
-        });
-    }, [
-        message
-    ]);
-    return /* @__PURE__ */ jsx54(Provider, {
-        value: {
-            message: message
+var UserAvatarContext = createContext9(/* @__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 UserAvatarContextValue = useContext7(UserAvatarContext);
+    return /* @__PURE__ */ jsx54(Flex15, {
+        flexShrink: "0",
+        height: "24px",
+        width: "24px",
+        style: {
+            borderRadius: "var(--radius-3)",
+            overflow: "hidden"
         },
-        children: /* @__PURE__ */ jsxs16(Box10, {
-            children: [
-                /* @__PURE__ */ jsx54(RunSteps, {
-                    runSteps: olderRunSteps
-                }),
-                /* @__PURE__ */ jsxs16(Box10, {
-                    children: [
-                        /* @__PURE__ */ jsx54(Attachments, {
-                            message: message
-                        }),
-                        message.content.map(function(content, index) {
-                            return /* @__PURE__ */ jsx54(ContentPart, {
-                                content: content
-                            }, index);
-                        }),
-                        isInProgress && isEmpty2(laterRunSteps) && /* @__PURE__ */ jsx54(StartingContentSkeleton, {})
-                    ]
-                }),
-                /* @__PURE__ */ jsx54(RunSteps, {
-                    runSteps: laterRunSteps
-                }),
-                isInProgress && !isEmpty2(laterRunSteps) && /* @__PURE__ */ jsx54(Box10, {
-                    children: /* @__PURE__ */ jsx54(StartingContentSkeleton, {})
-                })
-            ]
-        })
+        children: UserAvatarContextValue
     });
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
+import { Flex as Flex16 } from "@radix-ui/themes";
 import { jsx as jsx55 } from "react/jsx-runtime";
 var Content5 = function(param) {
     var messageGroup = param.messageGroup;
@@ -3166,7 +3182,7 @@ var useInfiniteScroll = function(param) {
 // src/components/threads/Thread/Messages/Root/index.tsx
 import { jsx as jsx60, jsxs as jsxs19 } from "react/jsx-runtime";
 var Root2 = function(param) {
-    var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
+    var children = param.children, style = param.style, className = param.className;
     var _useMessages = useMessages(), isFetchingNextPage = _useMessages.isFetchingNextPage, hasNextPage = _useMessages.hasNextPage, fetchNextPage = _useMessages.fetchNextPage;
     var _useInfiniteScroll = useInfiniteScroll({
         isFetchingNextPage: isFetchingNextPage,
@@ -3177,9 +3193,10 @@ var Root2 = function(param) {
         ref: containerRef,
         direction: "column-reverse",
         flexGrow: "1",
-        style: _object_spread_props(_object_spread({}, style), {
+        style: _object_spread({
             overflow: "auto"
-        }),
+        }, style !== null && style !== void 0 ? style : {}),
+        className: className,
         children: [
             children,
             hasNextPage && /* @__PURE__ */ jsx60(Flex17, {
@@ -3204,9 +3221,10 @@ var NextPageSkeleton = function() {
 // src/components/threads/Thread/Messages/index.tsx
 import { jsx as jsx62, jsxs as jsxs20 } from "react/jsx-runtime";
 var Messages = function(param) {
-    var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
+    var children = param.children, className = param.className, style = param.style;
     return /* @__PURE__ */ jsxs20(Root2, {
         style: style,
+        className: className,
         children: [
             /* @__PURE__ */ jsx62(Flex18, {
                 flexShrink: "0",
@@ -3249,36 +3267,40 @@ var useMessageFormContext = function() {
 // src/components/threads/Thread/MessageForm/Submit/index.tsx
 import { jsx as jsx63 } from "react/jsx-runtime";
 var Root3 = function(param) {
-    var children = param.children;
+    var children = param.children, style = param.style, className = param.className;
     return /* @__PURE__ */ jsx63(Flex19, {
         flexShrink: "0",
         align: "end",
+        style: style,
+        className: className,
         children: children
     });
 };
-var Button3 = function() {
+var Button3 = function(props) {
     var superinterfaceContext = useSuperinterfaceContext();
     var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading, isFileLoading = _useMessageFormContext.isFileLoading;
     if (isLoading) {
-        return /* @__PURE__ */ jsx63(IconButton5, {
+        return /* @__PURE__ */ jsx63(IconButton5, _object_spread_props(_object_spread({
             type: "button",
             onClick: function() {
                 var _superinterfaceContext_createMessageAbortControllerRef_current;
                 return (_superinterfaceContext_createMessageAbortControllerRef_current = superinterfaceContext.createMessageAbortControllerRef.current) === null || _superinterfaceContext_createMessageAbortControllerRef_current === void 0 ? void 0 : _superinterfaceContext_createMessageAbortControllerRef_current.abort();
-            },
+            }
+        }, props), {
             children: /* @__PURE__ */ jsx63(StopIcon, {})
-        });
+        }));
     }
-    return /* @__PURE__ */ jsx63(IconButton5, {
+    return /* @__PURE__ */ jsx63(IconButton5, _object_spread_props(_object_spread({
         type: "submit",
-        disabled: isDisabled || isFileLoading,
+        disabled: isDisabled || isFileLoading
+    }, props), {
         children: /* @__PURE__ */ jsx63(ArrowUpIcon2, {})
-    });
+    }));
 };
-var Submit = function() {
-    return /* @__PURE__ */ jsx63(Root3, {
+var Submit = function(props) {
+    return /* @__PURE__ */ jsx63(Root3, _object_spread_props(_object_spread({}, props), {
         children: /* @__PURE__ */ jsx63(Button3, {})
-    });
+    }));
 };
 Submit.Root = Root3;
 Submit.Button = Button3;
@@ -3300,7 +3322,7 @@ var formOptions = {
 import { partob as partob2 } from "radash";
 import { jsx as jsx64 } from "react/jsx-runtime";
 var Root4 = function(param) {
-    var children = param.children, onSubmitArg = param.onSubmit, isDisabledArg = param.isDisabled;
+    var children = param.children, onSubmitArg = param.onSubmit, isDisabledArg = param.isDisabled, style = param.style, className = param.className;
     var _useState2 = _sliced_to_array(useState2([]), 2), files = _useState2[0], setFiles = _useState2[1];
     var formProps = useForm(formOptions);
     var handleSubmit = formProps.handleSubmit, isSubmitting = formProps.formState.isSubmitting, reset = formProps.reset, watch = formProps.watch;
@@ -3404,6 +3426,8 @@ var Root4 = function(param) {
             children: /* @__PURE__ */ jsx64(Box13, {
                 asChild: true,
                 flexShrink: "0",
+                style: style,
+                className: className,
                 children: /* @__PURE__ */ jsx64("form", {
                     onSubmit: handleSubmit(onSubmit),
                     children: children
@@ -3433,7 +3457,11 @@ import { useContext as useContext11, useMemo as useMemo12, useRef as useRef5, us
 import { forwardRef as forwardRef3 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
 import { Fragment as Fragment2, jsx as jsx65, jsxs as jsxs21 } from "react/jsx-runtime";
-var TextareaBase = forwardRef3(function TextareaBase2(props, ref) {
+var TextareaBase = forwardRef3(function TextareaBase2(_param, ref) {
+    var style = _param.style, className = _param.className, rest = _object_without_properties(_param, [
+        "style",
+        "className"
+    ]);
     return /* @__PURE__ */ jsxs21(Fragment2, {
         children: [
             /* @__PURE__ */ jsx65("style", {
@@ -3441,8 +3469,8 @@ var TextareaBase = forwardRef3(function TextareaBase2(props, ref) {
             }),
             /* @__PURE__ */ jsx65(TextareaAutosize, _object_spread({
                 ref: ref,
-                className: "rt-reset superinterface-textarea",
-                style: {
+                className: "rt-reset superinterface-textarea ".concat(className !== null && className !== void 0 ? className : ""),
+                style: _object_spread({
                     border: 0,
                     outline: 0,
                     boxSizing: "border-box",
@@ -3450,22 +3478,24 @@ var TextareaBase = forwardRef3(function TextareaBase2(props, ref) {
                     color: "var(--gray-12)",
                     flexGrow: 1,
                     display: "flex"
-                }
-            }, props))
+                }, style !== null && style !== void 0 ? style : {})
+            }, rest))
         ]
     });
 });
 // src/components/threads/Thread/MessageForm/Field/Control.tsx
 import { jsx as jsx66 } from "react/jsx-runtime";
 var Root5 = function(param) {
-    var children = param.children;
+    var children = param.children, style = param.style, className = param.className;
     return /* @__PURE__ */ jsx66(Flex20, {
         flexGrow: "1",
         pt: "4px",
+        style: style,
+        className: className,
         children: children
     });
 };
-var Input = function() {
+var Input = function(props) {
     var assistantNameContext = useContext11(AssistantNameContext);
     var register = useFormContext().register;
     var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading;
@@ -3500,17 +3530,17 @@ var Input = function() {
                 (_e_currentTarget_form = e.currentTarget.form) === null || _e_currentTarget_form === void 0 ? void 0 : _e_currentTarget_form.requestSubmit();
             }
         }
-    }, textareaProps), {
+    }, textareaProps, props), {
         ref: function(e) {
             textareaProps.ref(e);
             textareaRef.current = e;
         }
     }));
 };
-var Control = function() {
-    return /* @__PURE__ */ jsx66(Root5, {
+var Control = function(props) {
+    return /* @__PURE__ */ jsx66(Root5, _object_spread_props(_object_spread({}, props), {
         children: /* @__PURE__ */ jsx66(Input, {})
-    });
+    }));
 };
 Control.Root = Root5;
 Control.Input = Input;
@@ -3518,16 +3548,17 @@ Control.Input = Input;
 import { Flex as Flex21, Card as Card2, Spinner as Spinner2, Text as Text7, IconButton as IconButton6 } from "@radix-ui/themes";
 import { FileIcon as FileIcon2, Cross2Icon } from "@radix-ui/react-icons";
 import { jsx as jsx67, jsxs as jsxs22 } from "react/jsx-runtime";
-var Preview = function() {
+var Preview = function(props) {
     var _useMessageFormContext = useMessageFormContext(), files = _useMessageFormContext.files, setFiles = _useMessageFormContext.setFiles;
     if (!files.length) {
         return null;
     }
-    return /* @__PURE__ */ jsx67(Flex21, {
+    return /* @__PURE__ */ jsx67(Flex21, _object_spread_props(_object_spread({
         flexBasis: "100%",
         direction: "column",
         pb: "2",
-        gap: "1",
+        gap: "1"
+    }, props), {
         children: files.map(function(file) {
             return /* @__PURE__ */ jsx67(Card2, {
                 variant: "ghost",
@@ -3580,7 +3611,7 @@ var Preview = function() {
                 })
             }, file.id);
         })
-    });
+    }));
 };
 // src/components/threads/Thread/MessageForm/Field/Files/Control.tsx
 import { useCallback as useCallback2 } from "react";
@@ -3700,7 +3731,7 @@ var useCreateFile = function() {
 // src/components/threads/Thread/MessageForm/Field/Files/Control.tsx
 import { jsx as jsx68, jsxs as jsxs23 } from "react/jsx-runtime";
 var accept = ".c,text/x-c,\n.cs,text/x-csharp,\n.cpp,text/x-c++,\n.doc,application/msword,\n.docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document,\n.html,text/html,\n.java,text/x-java,\n.json,application/json,\n.md,text/markdown,\n.pdf,application/pdf,\n.php,text/x-php,\n.pptx,application/vnd.openxmlformats-officedocument.presentationml.presentation,\n.py,text/x-python,\n.py,text/x-script.python,\n.rb,text/x-ruby,\n.tex,text/x-tex,\n.txt,text/plain,\n.css,text/css,\n.js,text/javascript,\n.sh,application/x-sh,\n.ts,application/typescript";
-var Control2 = function() {
+var Control2 = function(props) {
     var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading, setFiles = _useMessageFormContext.setFiles;
     var createFile = useCreateFile().createFile;
     var addToast = useToasts().addToast;
@@ -3872,10 +3903,11 @@ var Control2 = function() {
         createFile,
         setFiles
     ]);
-    return /* @__PURE__ */ jsx68(Flex22, {
+    return /* @__PURE__ */ jsx68(Flex22, _object_spread_props(_object_spread({
         pt: "2",
         pr: "2",
-        flexGrow: "0",
+        flexGrow: "0"
+    }, props), {
         children: /* @__PURE__ */ jsxs23(IconButton7, {
             type: "button",
             variant: "ghost",
@@ -3904,7 +3936,7 @@ var Control2 = function() {
                 })
             ]
         })
-    });
+    }));
 };
 // src/components/threads/Thread/MessageForm/Field/Files/index.tsx
 var Files = {
@@ -3914,11 +3946,13 @@ var Files = {
 // src/components/threads/Thread/MessageForm/Field/index.tsx
 import { jsx as jsx69 } from "react/jsx-runtime";
 var Root6 = function(param) {
-    var children = param.children;
+    var children = param.children, className = param.className, style = param.style;
     var _useFormContext2 = useFormContext2(), errors = _useFormContext2.formState.errors;
     return /* @__PURE__ */ jsx69(RadixContainer, {
         size: "2",
         flexGrow: "0",
+        className: className,
+        style: style,
         children: /* @__PURE__ */ jsx69(Flex23, {
             direction: "column",
             flexShrink: "0",
@@ -3950,15 +3984,15 @@ var Field = {
 };
 // src/components/threads/Thread/MessageForm/index.tsx
 import { jsx as jsx70, jsxs as jsxs24 } from "react/jsx-runtime";
-var MessageForm = function() {
-    return /* @__PURE__ */ jsx70(Root4, {
+var MessageForm = function(props) {
+    return /* @__PURE__ */ jsx70(Root4, _object_spread_props(_object_spread({}, props), {
         children: /* @__PURE__ */ jsxs24(Field.Root, {
             children: [
                 /* @__PURE__ */ jsx70(Field.Control, {}),
                 /* @__PURE__ */ jsx70(Submit, {})
             ]
         })
-    });
+    }));
 };
 MessageForm.Root = Root4;
 MessageForm.Field = Field;
@@ -4052,8 +4086,10 @@ var ToastsProvider = function(param) {
 // src/components/threads/Thread/Root/index.tsx
 import { jsx as jsx73 } from "react/jsx-runtime";
 var Root8 = function(_param) {
-    var children = _param.children, rest = _object_without_properties(_param, [
-        "children"
+    var children = _param.children, style = _param.style, className = _param.className, rest = _object_without_properties(_param, [
+        "children",
+        "style",
+        "className"
     ]);
     return /* @__PURE__ */ jsx73(ToastsProvider, {
         bottom: "var(--space-9)",
@@ -4061,6 +4097,8 @@ var Root8 = function(_param) {
             children: /* @__PURE__ */ jsx73(Flex25, {
                 direction: "column",
                 flexGrow: "1",
+                className: className,
+                style: style,
                 children: children
             })
         }))
@@ -4223,17 +4261,18 @@ import { Flex as Flex26 } from "@radix-ui/themes";
 import { IconButton as IconButton8 } from "@radix-ui/themes";
 import { ChatBubbleIcon } from "@radix-ui/react-icons";
 import { jsx as jsx77 } from "react/jsx-runtime";
-var Button4 = function() {
-    return /* @__PURE__ */ jsx77(IconButton8, {
+var Button4 = function(props) {
+    return /* @__PURE__ */ jsx77(IconButton8, _object_spread_props(_object_spread({
         size: "4",
-        radius: "full",
+        radius: "full"
+    }, props), {
         children: /* @__PURE__ */ jsx77(ChatBubbleIcon, {})
-    });
+    }));
 };
 // src/components/threads/ThreadDialog/Trigger/index.tsx
 import { jsx as jsx78 } from "react/jsx-runtime";
 var Root10 = function(param) {
-    var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
+    var children = param.children, style = param.style, className = param.className;
     var _useThreadDialogContext = useThreadDialogContext(), setIsOpen = _useThreadDialogContext.setIsOpen, isOpen = _useThreadDialogContext.isOpen;
     return /* @__PURE__ */ jsx78(Flex26, {
         display: {
@@ -4252,9 +4291,10 @@ var Root10 = function(param) {
         position: "fixed",
         bottom: "24px",
         right: "24px",
+        className: className,
         style: _object_spread({
             zIndex: 9999999999
-        }, style),
+        }, style !== null && style !== void 0 ? style : {}),
         children: children
     });
 };
@@ -4303,10 +4343,11 @@ var Close = function() {
 // src/components/threads/ThreadDialog/Content/index.tsx
 import { jsx as jsx80, jsxs as jsxs28 } from "react/jsx-runtime";
 var Root11 = function(param) {
-    var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
+    var children = param.children, className = param.className, style = param.style;
     var isOpen = useThreadDialogContext().isOpen;
     if (!isOpen) return null;
     return /* @__PURE__ */ jsx80(Flex28, {
+        className: className,
         direction: "column",
         justify: "end",
         position: "fixed",
@@ -4360,30 +4401,32 @@ var Root11 = function(param) {
         })
     });
 };
-var Messages2 = function() {
+var Messages2 = function(param) {
+    var className = param.className, style = param.style;
     return /* @__PURE__ */ jsx80(Thread.Messages, {
-        style: {
+        className: className,
+        style: _object_spread({
             paddingTop: "var(--space-5)",
             paddingRight: "var(--space-5)",
             paddingLeft: "var(--space-5)"
-        }
+        }, style)
     });
 };
 var FormContainer = function(param) {
-    var children = param.children;
+    var children = param.children, className = param.className, style = param.style;
     return /* @__PURE__ */ jsx80(Flex28, {
         direction: "column",
         pl: "5",
         pr: "5",
         pb: "3",
         flexShrink: "0",
+        className: className,
+        style: style,
         children: children
     });
 };
-var Content7 = function(param) {
-    var _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
-    return /* @__PURE__ */ jsx80(Root11, {
-        style: style,
+var Content7 = function(props) {
+    return /* @__PURE__ */ jsx80(Root11, _object_spread_props(_object_spread({}, props), {
         children: /* @__PURE__ */ jsxs28(Thread.Root, {
             children: [
                 /* @__PURE__ */ jsx80(Messages2, {}),
@@ -4392,7 +4435,7 @@ var Content7 = function(param) {
                 })
             ]
         })
-    });
+    }));
 };
 Content7.Root = Root11;
 Content7.Messages = Messages2;
@@ -4448,6 +4491,7 @@ var AudioThreadContext = createContext12({
         }),
         visualizationAnalyser: null
     },
+    // @ts-ignore-next-line
     messageAudioProps: {
         visualizationAnalyser: null,
         playing: false,
@@ -4922,7 +4966,7 @@ var useMessageAudio = function(param) {
 import { useQueryClient as useQueryClient7 } from "@tanstack/react-query";
 import { jsx as jsx82 } from "react/jsx-runtime";
 var Content8 = function(param) {
-    var children = param.children;
+    var children = param.children, className = param.className, style = param.style;
     var addToast = useToasts().addToast;
     var queryClient = useQueryClient7();
     var threadContext = useSuperinterfaceContext();
@@ -5000,16 +5044,20 @@ var Content8 = function(param) {
             direction: "column",
             flexGrow: "1",
             p: "9",
+            className: className,
+            style: style,
             children: children
         })
     });
 };
-var Root12 = function(param) {
-    var children = param.children;
+var Root12 = function(_param) {
+    var children = _param.children, rest = _object_without_properties(_param, [
+        "children"
+    ]);
     return /* @__PURE__ */ jsx82(ToastsProvider, {
-        children: /* @__PURE__ */ jsx82(Content8, {
+        children: /* @__PURE__ */ jsx82(Content8, _object_spread_props(_object_spread({}, rest), {
             children: children
-        })
+        }))
     });
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
@@ -5087,7 +5135,7 @@ var BarsVisualizer = function(param) {
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
 import { jsx as jsx84, jsxs as jsxs30 } from "react/jsx-runtime";
-var Visualization = function() {
+var Visualization = function(props) {
     var audioThreadContext = useAudioThreadContext();
     var assistantNameContext = useContext15(AssistantNameContext);
     var _useState9 = _sliced_to_array(useState9(0), 2), scale = _useState9[0], setScale = _useState9[1];
@@ -5114,12 +5162,13 @@ var Visualization = function() {
         draw,
         audioThreadContext
     ]);
-    return /* @__PURE__ */ jsxs30(Flex31, {
+    return /* @__PURE__ */ jsxs30(Flex31, _object_spread_props(_object_spread({
         direction: "column",
         align: "center",
         justify: "center",
         mb: "3",
-        flexGrow: "1",
+        flexGrow: "1"
+    }, props), {
         children: [
             /* @__PURE__ */ jsx84(Flex31, {
                 align: "center",
@@ -5150,7 +5199,7 @@ var Visualization = function() {
                 ]
             })
         ]
-    });
+    }));
 };
 // src/components/threads/AudioThread/Status/StatusMessages.tsx
 import { Flex as Flex32, Text as Text9 } from "@radix-ui/themes";
@@ -5162,10 +5211,12 @@ var html = function(param) {
     }).join(""), "\n  }");
 };
 var StatusMessages = function(param) {
-    var texts = param.texts;
+    var texts = param.texts, className = param.className, style = param.style;
     return /* @__PURE__ */ jsxs31(Flex32, {
         justify: "center",
         pb: "5",
+        className: className,
+        style: style,
         children: [
             /* @__PURE__ */ jsx85(Text9, {
                 size: "2",
@@ -5185,41 +5236,41 @@ var StatusMessages = function(param) {
 };
 // src/components/threads/AudioThread/Status/index.tsx
 import { jsx as jsx86 } from "react/jsx-runtime";
-var Status = function() {
+var Status = function(props) {
     var audioThreadContext = useAudioThreadContext();
     if (audioThreadContext.status === "recording") {
-        return /* @__PURE__ */ jsx86(StatusMessages, {
+        return /* @__PURE__ */ jsx86(StatusMessages, _object_spread({
             texts: [
                 "Start speaking",
                 "Listening",
                 "Finish speaking to send",
                 "Click the button below to send manually"
             ]
-        });
+        }, props));
     }
     if ([
         "recorderPaused",
         "idle",
         "playerPaused"
     ].includes(audioThreadContext.status)) {
-        return /* @__PURE__ */ jsx86(StatusMessages, {
+        return /* @__PURE__ */ jsx86(StatusMessages, _object_spread({
             texts: [
                 "Click the button below to activate"
             ]
-        });
+        }, props));
     }
     if (audioThreadContext.status === "playing") {
-        return /* @__PURE__ */ jsx86(StatusMessages, {
+        return /* @__PURE__ */ jsx86(StatusMessages, _object_spread({
             texts: [
                 "Click the button below to interrupt"
             ]
-        });
+        }, props));
     }
-    return /* @__PURE__ */ jsx86(StatusMessages, {
+    return /* @__PURE__ */ jsx86(StatusMessages, _object_spread({
         texts: [
             "Thinking"
         ]
-    });
+    }, props));
 };
 // src/components/threads/AudioThread/Form/index.tsx
 import { Flex as Flex34 } from "@radix-ui/themes";
@@ -5321,11 +5372,12 @@ var ActionButton = function() {
 };
 // src/components/threads/AudioThread/Form/index.tsx
 import { jsx as jsx89, jsxs as jsxs33 } from "react/jsx-runtime";
-var Form = function() {
+var Form = function(props) {
     var audioThreadContext = useAudioThreadContext();
-    return /* @__PURE__ */ jsxs33(Flex34, {
+    return /* @__PURE__ */ jsxs33(Flex34, _object_spread_props(_object_spread({
         direction: "column",
-        align: "center",
+        align: "center"
+    }, props), {
         children: [
             /* @__PURE__ */ jsxs33(Flex34, {
                 pb: "3",
@@ -5359,7 +5411,7 @@ var Form = function() {
             }),
             /* @__PURE__ */ jsx89(ActionButton, {})
         ]
-    });
+    }));
 };
 // src/components/threads/AudioThread/index.tsx
 import { jsx as jsx90, jsxs as jsxs34 } from "react/jsx-runtime";
@@ -5378,15 +5430,15 @@ AudioThread.Status = Status;
 AudioThread.Form = Form;
 // src/components/threads/AudioThreadDialog/index.tsx
 import { jsx as jsx91, jsxs as jsxs35 } from "react/jsx-runtime";
-var AudioThreadDialog = function() {
-    return /* @__PURE__ */ jsxs35(Root9, {
+var AudioThreadDialog = function(props) {
+    return /* @__PURE__ */ jsxs35(Root9, _object_spread_props(_object_spread({}, props), {
         children: [
             /* @__PURE__ */ jsx91(Content7.Root, {
                 children: /* @__PURE__ */ jsx91(AudioThread, {})
             }),
             /* @__PURE__ */ jsx91(Trigger, {})
         ]
-    });
+    }));
 };
 AudioThreadDialog.Root = Root9;
 AudioThreadDialog.Trigger = Trigger;
@@ -5466,9 +5518,11 @@ var optimizedSrc = function(param) {
 // src/components/imageAvatars/ImageAvatar/index.tsx
 import { jsx as jsx93 } from "react/jsx-runtime";
 var ImageAvatar = function(param) {
-    var imageAvatar = param.imageAvatar, size = param.size;
+    var imageAvatar = param.imageAvatar, size = param.size, className = param.className, style = param.style;
     var superinterfaceContext = useSuperinterfaceContext();
     return /* @__PURE__ */ jsx93(Avatar4, {
+        className: className,
+        style: style,
         fallback: "",
         src: optimizedSrc({
             imageAvatar: imageAvatar,
@@ -5488,13 +5542,15 @@ var iconAvatarComponents = (_obj = {}, _define_property(_obj, "BACKPACK" /* BACK
 // src/components/iconAvatars/IconAvatar.tsx
 import { jsx as jsx94 } from "react/jsx-runtime";
 var IconAvatar = function(param) {
-    var iconAvatar = param.iconAvatar, size = param.size;
+    var iconAvatar = param.iconAvatar, size = param.size, className = param.className, style = param.style;
     var Component = useMemo18(function() {
         return iconAvatarComponents[iconAvatar.name];
     }, [
         iconAvatar
     ]);
     return /* @__PURE__ */ jsx94(Avatar5, {
+        className: className,
+        style: style,
         size: size,
         fallback: Component ? /* @__PURE__ */ jsx94(Component, {}) : ""
     });
@@ -5502,24 +5558,30 @@ var IconAvatar = function(param) {
 // src/components/avatars/Avatar.tsx
 import { jsx as jsx95 } from "react/jsx-runtime";
 var Avatar6 = function(param) {
-    var avatar = param.avatar, _param_size = param.size, size = _param_size === void 0 ? "1" : _param_size;
+    var avatar = param.avatar, _param_size = param.size, size = _param_size === void 0 ? "1" : _param_size, className = param.className, style = param.style;
     if (avatar) {
         if (avatar.type === "IMAGE" /* IMAGE */  && avatar.imageAvatar) {
             return /* @__PURE__ */ jsx95(ImageAvatar, {
                 imageAvatar: avatar.imageAvatar,
-                size: size
+                size: size,
+                className: className,
+                style: style
             });
         }
         if (avatar.type === "ICON" /* ICON */  && avatar.iconAvatar) {
             return /* @__PURE__ */ jsx95(IconAvatar, {
                 iconAvatar: avatar.iconAvatar,
-                size: size
+                size: size,
+                className: className,
+                style: style
             });
         }
     }
     return /* @__PURE__ */ jsx95(RadixAvatar, {
         fallback: "",
-        size: size
+        size: size,
+        className: className,
+        style: style
     });
 };
 // src/components/components/ComponentsProvider.tsx