@superinterface/react 3.0.2 → 3.1.0

package/dist/index.cjs

@@ -573,388 +573,15 @@ var SuperinterfaceProvider = function(param) {
 };
 // src/components/threads/Thread/Messages/index.tsx
 var import_themes44 = require("@radix-ui/themes");
-// src/components/threads/Thread/Messages/Content/index.tsx
-var import_react36 = require("react");
-// src/hooks/messages/useMessages/index.tsx
-var import_react4 = require("react");
-var import_react_query2 = require("@tanstack/react-query");
-// src/lib/threads/queryOptions/index.ts
-var import_react_query = require("@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 (0, import_react_query.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 = (0, import_react_query2.useQueryClient)();
-    var threadContext = useSuperinterfaceContext();
-    var superinterfaceContext = useSuperinterfaceContext();
-    var props = (0, import_react_query2.useInfiniteQuery)(messagesQueryOptions({
-        queryClient: queryClient,
-        threadContext: threadContext,
-        superinterfaceContext: superinterfaceContext
-    }));
-    return (0, import_react4.useMemo)(function() {
-        return _object_spread_props(_object_spread({}, props), {
-            // @ts-ignore-next-line
-            messages: messages({
-                props: props
-            })
-        });
-    }, [
-        props
-    ]);
-};
-// src/hooks/messageGroups/useMessageGroups/index.ts
-var import_react5 = require("react");
-// src/hooks/messageGroups/useMessageGroups/lib/messageGroups/index.ts
-var import_lodash3 = __toESM(require("lodash"), 1);
-var import_radash2 = require("radash");
-// src/lib/messages/order.ts
-var import_radash = require("radash");
-var order = function(param) {
-    var messages2 = param.messages;
-    return (0, import_radash.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 import_lodash3.default.reduce(order({
-        messages: messages2
-    }), function(groups, message) {
-        var group = (0, import_radash2.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(import_lodash3.default.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 (0, import_react5.useMemo)(function() {
-        return {
-            messageGroups: messageGroups({
-                messages: messages2
-            })
-        };
-    }, [
-        messages2
-    ]);
-};
-// src/components/skeletons/MessagesSkeleton/index.tsx
-var import_react7 = require("react");
-var import_themes3 = require("@radix-ui/themes");
-// src/components/messageGroups/MessageGroupBase/index.tsx
-var import_react6 = require("react");
-var import_themes = require("@radix-ui/themes");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var MessageGroupBase = (0, import_react6.forwardRef)(function MessageGroupBase2(param, ref) {
-    var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes.Container, {
-        ref: ref,
-        size: "2",
-        flexGrow: "0",
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes.Flex, {
-            flexShrink: "0",
-            gap: "3",
-            children: children
-        })
-    });
-});
-// src/components/messageGroups/MessageGroupBase/Name.tsx
-var import_themes2 = require("@radix-ui/themes");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Name = function(param) {
-    var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes2.Flex, {
-        align: "center",
-        height: "var(--space-5)",
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes2.Text, {
-            size: "2",
-            weight: "bold",
-            children: children
-        })
-    });
-};
-// src/components/skeletons/MessagesSkeleton/index.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var MessagesSkeleton = (0, import_react7.forwardRef)(function MessagesSkeleton2(_props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(MessageGroupBase, {
-        ref: ref,
-        children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes3.Skeleton, {
-                loading: true,
-                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes3.Avatar, {
-                    fallback: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes3.Flex, {}),
-                    size: "1"
-                })
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_themes3.Box, {
-                pb: "3",
-                children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Name, {
-                        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes3.Skeleton, {
-                            loading: true,
-                            style: {
-                                width: "128px"
-                            }
-                        })
-                    }),
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes3.Skeleton, {
-                        loading: true,
-                        style: {
-                            width: "256px"
-                        }
-                    }),
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes3.Skeleton, {
-                        loading: true,
-                        style: {
-                            width: "256px",
-                            marginTop: "var(--space-2)"
-                        }
-                    }),
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes3.Skeleton, {
-                        loading: true,
-                        style: {
-                            width: "256px",
-                            marginTop: "var(--space-2)"
-                        }
-                    })
-                ]
-            })
-        ]
-    });
-});
-// src/hooks/toasts/useToasts/index.ts
-var import_react9 = require("react");
-// src/contexts/toasts/ToastsContext/index.ts
-var import_react8 = require("react");
-var ToastsContext = (0, import_react8.createContext)({
-    toasts: [],
-    addToast: function() {}
-});
-// src/hooks/toasts/useToasts/index.ts
-var useToasts = function() {
-    return (0, import_react9.useContext)(ToastsContext);
-};
-// src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
-var import_react35 = require("react");
-var import_themes41 = require("@radix-ui/themes");
-// src/components/messageGroups/MessageGroupBase/AssistantAvatar.tsx
-var import_react11 = require("react");
-var import_themes5 = require("@radix-ui/themes");
-// src/contexts/assistants/AssistantAvatarContext/index.tsx
-var import_react10 = require("react");
-var import_themes4 = require("@radix-ui/themes");
-var import_react_icons = require("@radix-ui/react-icons");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var AssistantAvatarContext = (0, import_react10.createContext)(/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_themes4.Avatar, {
-    fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_icons.LightningBoltIcon, {}),
-    size: "1"
-}));
-// src/components/messageGroups/MessageGroupBase/AssistantAvatar.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var AssistantAvatar = function() {
-    var AssistantAvatarContextValue = (0, import_react11.useContext)(AssistantAvatarContext);
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_themes5.Flex, {
-        flexShrink: "0",
-        height: "24px",
-        width: "24px",
-        style: {
-            borderRadius: "var(--radius-3)",
-            overflow: "hidden"
-        },
-        children: AssistantAvatarContextValue
-    });
-};
-// src/contexts/assistants/AssistantNameContext/index.tsx
-var import_react12 = require("react");
-var AssistantNameContext = (0, import_react12.createContext)("Assistant");
-// src/components/messageGroups/MessageGroupBase/UserAvatar.tsx
-var import_react14 = require("react");
-var import_themes7 = require("@radix-ui/themes");
-// src/contexts/users/UserAvatarContext/index.tsx
-var import_react13 = require("react");
-var import_themes6 = require("@radix-ui/themes");
-var import_react_icons2 = require("@radix-ui/react-icons");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var UserAvatarContext = (0, import_react13.createContext)(/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_themes6.Avatar, {
-    fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_icons2.PersonIcon, {}),
-    size: "1"
-}));
-// src/components/messageGroups/MessageGroupBase/UserAvatar.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var UserAvatar = function() {
-    var UserAvatarContextValue = (0, import_react14.useContext)(UserAvatarContext);
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes7.Flex, {
-        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
-var import_themes40 = require("@radix-ui/themes");
 // src/components/threads/Thread/Message/index.tsx
-var import_react34 = require("react");
-var import_radash14 = require("radash");
-var import_themes39 = require("@radix-ui/themes");
+var import_react26 = require("react");
+var import_radash12 = require("radash");
+var import_themes32 = require("@radix-ui/themes");
 // src/components/skeletons/StartingContentSkeleton/index.tsx
-var import_themes8 = require("@radix-ui/themes");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_themes = require("@radix-ui/themes");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var StartingContentSkeleton = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes8.Skeleton, {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes.Skeleton, {
         loading: true,
         mt: "1",
         height: "var(--space-4)",
@@ -966,28 +593,28 @@ var StartingContentSkeleton = function() {
     });
 };
 // src/components/runSteps/RunSteps/index.tsx
-var import_themes17 = require("@radix-ui/themes");
-var import_react19 = require("react");
+var import_themes10 = require("@radix-ui/themes");
+var import_react8 = require("react");
 // src/contexts/components/ComponentsContext/index.tsx
-var import_react18 = require("react");
+var import_react7 = require("react");
 // src/components/runSteps/RunStep/ToolCalls/index.tsx
-var import_themes16 = require("@radix-ui/themes");
+var import_themes9 = require("@radix-ui/themes");
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/index.tsx
-var import_react17 = require("react");
+var import_react6 = require("react");
 // src/contexts/functions/FunctionComponentsContext/index.tsx
-var import_react15 = require("react");
-var FunctionComponentsContext = (0, import_react15.createContext)({});
+var import_react4 = require("react");
+var FunctionComponentsContext = (0, import_react4.createContext)({});
 // src/components/functions/FunctionBase/index.tsx
-var import_themes12 = require("@radix-ui/themes");
+var import_themes5 = require("@radix-ui/themes");
 // src/components/toolCalls/ToolCallBase/index.tsx
-var import_themes9 = require("@radix-ui/themes");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_themes2 = require("@radix-ui/themes");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var ToolCallBase = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes9.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes2.Flex, {
         py: "1",
         ml: "-2",
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes9.Button, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes2.Button, {
             size: "1",
             color: "gold",
             variant: "outline",
@@ -999,31 +626,31 @@ var ToolCallBase = function(param) {
     });
 };
 // src/components/toolCalls/ToolCallBase/ToolCallTitle.tsx
-var import_themes10 = require("@radix-ui/themes");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_themes3 = require("@radix-ui/themes");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var ToolCallTitle = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes10.Text, {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes3.Text, {
         weight: "regular",
         children: children
     });
 };
 // src/components/toolCalls/ToolCallBase/ToolCallIcon.tsx
-var import_react_icons3 = require("@radix-ui/react-icons");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react_icons = require("@radix-ui/react-icons");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var ToolCallIcon = function(param) {
     var runStep = param.runStep;
     if (runStep.completed_at) {
-        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_icons3.CheckCircledIcon, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_icons.CheckCircledIcon, {});
     } else if (runStep.cancelled_at || runStep.failed_at || runStep.status === "expired") {
-        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_icons3.CircleBackslashIcon, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_icons.CircleBackslashIcon, {});
     } else {
-        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_icons3.CircleIcon, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_icons.CircleIcon, {});
     }
 };
 // src/components/functions/FunctionBase/Content/index.tsx
-var import_react16 = require("react");
-var import_themes11 = require("@radix-ui/themes");
+var import_react5 = require("react");
+var import_themes4 = require("@radix-ui/themes");
 // src/components/functions/FunctionBase/Content/lib/formattedJsonOrRaw.ts
 var formattedJsonOrRaw = function(param) {
     var value = param.value;
@@ -1041,24 +668,24 @@ var formattedJsonOrRaw = function(param) {
     }
 };
 // src/components/functions/FunctionBase/Content/index.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var Content = function(param) {
     var fn = param.fn;
-    var args = (0, import_react16.useMemo)(function() {
+    var args = (0, import_react5.useMemo)(function() {
         return formattedJsonOrRaw({
             value: fn.arguments
         });
     }, [
         fn
     ]);
-    var output = (0, import_react16.useMemo)(function() {
+    var output = (0, import_react5.useMemo)(function() {
         return formattedJsonOrRaw({
             value: fn.output
         });
     }, [
         fn
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_themes11.Code, {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_themes4.Code, {
         variant: "ghost",
         color: "gold",
         style: {
@@ -1066,40 +693,40 @@ var Content = function(param) {
             wordBreak: "break-word"
         },
         children: [
-            args && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_themes11.Box, {
+            args && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_themes4.Box, {
                 children: args
             }),
-            output && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_themes11.Box, {
+            output && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_themes4.Box, {
                 children: output
             })
         ]
     });
 };
 // src/components/functions/FunctionBase/index.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var FunctionBase = function(param) {
     var fn = param.fn, runStep = param.runStep, title2 = param.title;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_themes12.Popover.Root, {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_themes5.Popover.Root, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes12.Popover.Trigger, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes12.Flex, {
-                    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ToolCallBase, {
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_themes5.Popover.Trigger, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_themes5.Flex, {
+                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ToolCallBase, {
                         children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToolCallIcon, {
+                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToolCallIcon, {
                                 runStep: runStep
                             }),
-                            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToolCallTitle, {
+                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToolCallTitle, {
                                 children: title2
                             })
                         ]
                     })
                 })
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes12.Popover.Content, {
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_themes5.Popover.Content, {
                 style: {
                     maxHeight: "200px"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Content, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Content, {
                     fn: fn
                 })
             })
@@ -1118,10 +745,10 @@ var title = function(param) {
     }
 };
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/DefaultFunction/index.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var DefaultFunction = function(param) {
     var fn = param.fn, runStep = param.runStep;
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FunctionBase, {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FunctionBase, {
         fn: fn,
         runStep: runStep,
         title: title({
@@ -1131,28 +758,28 @@ var DefaultFunction = function(param) {
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/index.tsx
-var import_jsx_runtime16 = // @ts-ignore-next-line
+var import_jsx_runtime9 = // @ts-ignore-next-line
 require("react/jsx-runtime");
 var Fn = function(param) {
     var fn = param.fn, runStep = param.runStep;
-    var functionComponentsContext = (0, import_react17.useContext)(FunctionComponentsContext);
+    var functionComponentsContext = (0, import_react6.useContext)(FunctionComponentsContext);
     var Component = functionComponentsContext[fn.name] || DefaultFunction;
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Component, {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Component, {
         fn: fn,
         runStep: runStep
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/CodeInterpreter/index.tsx
-var import_themes14 = require("@radix-ui/themes");
+var import_themes7 = require("@radix-ui/themes");
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/CodeInterpreter/Content.tsx
-var import_themes13 = require("@radix-ui/themes");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_themes6 = require("@radix-ui/themes");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var Content2 = function(param) {
     var codeInterpreter = param.codeInterpreter;
     if (!codeInterpreter.input) {
         return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_themes13.Code, {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_themes6.Code, {
         variant: "ghost",
         color: "gold",
         style: {
@@ -1160,38 +787,38 @@ var Content2 = function(param) {
             wordBreak: "break-word"
         },
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes13.Box, {
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes6.Box, {
                 children: codeInterpreter.input
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes13.Box, {
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes6.Box, {
                 children: JSON.stringify(codeInterpreter.outputs)
             })
         ]
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/CodeInterpreter/index.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var CodeInterpreter = function(param) {
     var codeInterpreter = param.codeInterpreter, runStep = param.runStep;
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_themes14.Popover.Root, {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_themes7.Popover.Root, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.Popover.Trigger, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.Flex, {
-                    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ToolCallBase, {
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes7.Popover.Trigger, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes7.Flex, {
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ToolCallBase, {
                         children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolCallIcon, {
+                            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ToolCallIcon, {
                                 runStep: runStep
                             }),
-                            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolCallTitle, {
+                            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ToolCallTitle, {
                                 children: "Using code interpreter"
                             })
                         ]
                     })
                 })
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.Popover.Content, {
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes7.Popover.Content, {
                 maxHeight: "200px",
-                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Content2, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Content2, {
                     codeInterpreter: codeInterpreter
                 })
             })
@@ -1199,30 +826,30 @@ var CodeInterpreter = function(param) {
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/FileSearch.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var FileSearch = function(param) {
     var runStep = param.runStep, toolCall = param.toolCall;
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(ToolCallBase, {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ToolCallBase, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ToolCallIcon, {
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ToolCallIcon, {
                 runStep: runStep
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ToolCallTitle, {
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ToolCallTitle, {
                 children: "Searching files"
             })
         ]
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/Fallback.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var Fallback = function(param) {
     var runStep = param.runStep, toolCall = param.toolCall;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(ToolCallBase, {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ToolCallBase, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ToolCallIcon, {
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToolCallIcon, {
                 runStep: runStep
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(ToolCallTitle, {
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ToolCallTitle, {
                 children: [
                     "Using tool: ",
                     toolCall.type
@@ -1232,52 +859,52 @@ var Fallback = function(param) {
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var ToolCall = function(param) {
     var toolCall = param.toolCall, runStep = param.runStep;
     if (toolCall.type === "function") {
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Fn, {
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Fn, {
             fn: toolCall.function,
             runStep: runStep
         });
     }
     if (toolCall.type === "code_interpreter") {
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CodeInterpreter, {
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CodeInterpreter, {
             codeInterpreter: toolCall.code_interpreter,
             runStep: runStep
         });
     }
     if (toolCall.type === "file_search") {
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FileSearch, {
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FileSearch, {
             toolCall: toolCall,
             runStep: runStep
         });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Fallback, {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Fallback, {
         toolCall: toolCall,
         runStep: runStep
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/Starting/index.tsx
-var import_themes15 = require("@radix-ui/themes");
-var import_react_icons4 = require("@radix-ui/react-icons");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_themes8 = require("@radix-ui/themes");
+var import_react_icons2 = require("@radix-ui/react-icons");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var Starting = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_themes15.Popover.Root, {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_themes8.Popover.Root, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(ToolCallBase, {
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ToolCallBase, {
                 children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_icons4.CircleIcon, {}),
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolCallTitle, {
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_icons2.CircleIcon, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ToolCallTitle, {
                         children: "Starting actions"
                     })
                 ]
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_themes15.Popover.Content, {
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_themes8.Popover.Content, {
                 style: {
                     maxHeight: "500px"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_themes15.Text, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_themes8.Text, {
                     children: "Getting ready to connect to domain API"
                 })
             })
@@ -1285,21 +912,25 @@ var Starting = function() {
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/index.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var Root = function(param) {
-    var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_themes16.Flex, {
+    var children = param.children, className = param.className, style = param.style;
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes9.Flex, {
         direction: "column",
+        className: className,
+        style: style,
         children: children
     });
 };
 var ToolCalls = function(param) {
-    var stepDetails = param.stepDetails, runStep = param.runStep;
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Root, {
+    var stepDetails = param.stepDetails, runStep = param.runStep, className = param.className, style = param.style;
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Root, {
+        className: className,
+        style: style,
         children: [
-            !stepDetails.tool_calls.length && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Starting, {}),
+            !stepDetails.tool_calls.length && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Starting, {}),
             stepDetails.tool_calls.map(function(toolCall) {
-                return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ToolCall, {
+                return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ToolCall, {
                     toolCall: toolCall,
                     runStep: runStep
                 }, toolCall.id);
@@ -1311,11 +942,13 @@ ToolCalls.Root = Root;
 ToolCalls.Starting = Starting;
 ToolCalls.ToolCall = ToolCall;
 // src/components/runSteps/RunStep/index.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("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__ */ (0, import_jsx_runtime24.jsx)(ToolCalls, {
+        return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolCalls, {
+            className: className,
+            style: style,
             stepDetails: runStep.step_details,
             runStep: runStep
         });
@@ -1324,38 +957,38 @@ var RunStep = function(param) {
 };
 RunStep.ToolCalls = ToolCalls;
 // src/contexts/components/ComponentsContext/index.tsx
-var ComponentsContext = (0, import_react18.createContext)({
+var ComponentsContext = (0, import_react7.createContext)({
     components: {
         RunStep: RunStep
     }
 });
 // src/components/runSteps/RunSteps/index.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var RunSteps = function(param) {
     var runSteps = param.runSteps;
-    var componentsContext = (0, import_react19.useContext)(ComponentsContext);
+    var componentsContext = (0, import_react8.useContext)(ComponentsContext);
     var Component = componentsContext.components.RunStep;
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_themes17.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes10.Flex, {
         direction: "column-reverse",
         children: runSteps.map(function(runStep) {
-            return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Component, {
+            return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Component, {
                 runStep: runStep
             }, runStep.id);
         })
     });
 };
 // src/hooks/messages/useIsMutatingMessage/index.ts
-var import_react20 = require("react");
-var import_react_query3 = require("@tanstack/react-query");
+var import_react9 = require("react");
+var import_react_query = require("@tanstack/react-query");
 var useIsMutatingMessage = function() {
     var threadContext = useSuperinterfaceContext();
-    var mutatingMessagesCount = (0, import_react_query3.useIsMutating)({
+    var mutatingMessagesCount = (0, import_react_query.useIsMutating)({
         mutationKey: [
             "createMessage",
             threadContext.variables
         ]
     });
-    var isMutatingMessage = (0, import_react20.useMemo)(function() {
+    var isMutatingMessage = (0, import_react9.useMemo)(function() {
         return mutatingMessagesCount > 0;
     }, [
         mutatingMessagesCount
@@ -1363,28 +996,28 @@ var useIsMutatingMessage = function() {
     return isMutatingMessage;
 };
 // src/contexts/messages/MessageContext/index.ts
-var import_react21 = require("react");
-var MessageContext = (0, import_react21.createContext)({
+var import_react10 = require("react");
+var MessageContext = (0, import_react10.createContext)({
     message: null
 });
 // src/components/threads/Thread/Message/Provider.tsx
 var Provider = MessageContext.Provider;
 // src/components/threads/Thread/Message/Attachments/index.tsx
-var import_themes18 = require("@radix-ui/themes");
-var import_react_icons5 = require("@radix-ui/react-icons");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_themes11 = require("@radix-ui/themes");
+var import_react_icons3 = require("@radix-ui/react-icons");
+var import_jsx_runtime19 = require("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__ */ (0, import_jsx_runtime26.jsx)(import_themes18.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_themes11.Flex, {
         align: "start",
         pb: "1",
-        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes18.Badge, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_themes11.Badge, {
             color: "gray",
             variant: "surface",
             children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_icons5.FileIcon, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_icons3.FileIcon, {}),
                 message.attachments.length,
                 " file",
                 message.attachments.length > 1 ? "s" : ""
@@ -1395,19 +1028,19 @@ var Attachments = function(param) {
 // src/components/threads/Thread/Message/ContentPart/TextContent.tsx
 var import_react_markdown = __toESM(require("react-markdown"), 1);
 // src/hooks/markdown/useMarkdownContext/index.ts
-var import_react33 = require("react");
+var import_react25 = require("react");
 // src/contexts/markdown/MarkdownContext/index.ts
-var import_react32 = require("react");
+var import_react24 = require("react");
 // src/contexts/markdown/MarkdownContext/lib/components/index.tsx
-var import_themes38 = require("@radix-ui/themes");
+var import_themes31 = require("@radix-ui/themes");
 // src/contexts/markdown/MarkdownContext/lib/components/Paragraph.tsx
-var import_themes19 = require("@radix-ui/themes");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_themes12 = require("@radix-ui/themes");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var Paragraph = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_themes19.Box, {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes12.Box, {
         pb: "3",
-        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_themes19.Text, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes12.Text, {
             size: "3",
             style: {
                 whiteSpace: "pre-line",
@@ -1418,11 +1051,11 @@ var Paragraph = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Link.tsx
-var import_themes20 = require("@radix-ui/themes");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_themes13 = require("@radix-ui/themes");
+var import_jsx_runtime21 = require("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__ */ (0, import_jsx_runtime28.jsx)(import_themes20.Link, {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_themes13.Link, {
         href: href,
         target: target,
         download: download,
@@ -1430,14 +1063,14 @@ var Link = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/UnorderedList.tsx
-var import_themes21 = require("@radix-ui/themes");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_themes14 = require("@radix-ui/themes");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var UnorderedList = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_themes21.Box, {
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_themes14.Box, {
         pb: "3",
         asChild: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ul", {
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("ul", {
             style: {
                 listStylePosition: "inside"
             },
@@ -1446,14 +1079,14 @@ var UnorderedList = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/OrderedList.tsx
-var import_themes22 = require("@radix-ui/themes");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_themes15 = require("@radix-ui/themes");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var OrderedList = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_themes22.Box, {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_themes15.Box, {
         pb: "3",
         asChild: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("ol", {
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ol", {
             style: {
                 listStylePosition: "inside"
             },
@@ -1462,32 +1095,32 @@ var OrderedList = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/ListItem.tsx
-var import_themes23 = require("@radix-ui/themes");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_themes16 = require("@radix-ui/themes");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var ListItem = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_themes23.Box, {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_themes16.Box, {
         pb: "1",
-        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", {
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", {
             children: children
         })
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Strong.tsx
-var import_themes24 = require("@radix-ui/themes");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_themes17 = require("@radix-ui/themes");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var Strong = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_themes24.Strong, {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_themes17.Strong, {
         children: children
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Pre.tsx
-var import_themes25 = require("@radix-ui/themes");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_themes18 = require("@radix-ui/themes");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var Pre = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_themes25.Box, {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_themes18.Box, {
         style: {
             whiteSpace: "pre-wrap",
             wordBreak: "break-word"
@@ -1496,14 +1129,155 @@ var Pre = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Code.tsx
-var import_themes28 = require("@radix-ui/themes");
+var import_themes21 = require("@radix-ui/themes");
 // src/components/suggestions/Suggestions/index.tsx
-var import_react24 = require("react");
+var import_react16 = require("react");
+// src/hooks/messages/useLatestMessage/index.ts
+var import_react12 = require("react");
+// src/hooks/messages/useMessages/index.tsx
+var import_react11 = require("react");
+var import_react_query3 = require("@tanstack/react-query");
+// src/lib/threads/queryOptions/index.ts
+var import_react_query2 = require("@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 (0, import_react_query2.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 = (0, import_react_query3.useQueryClient)();
+    var threadContext = useSuperinterfaceContext();
+    var superinterfaceContext = useSuperinterfaceContext();
+    var props = (0, import_react_query3.useInfiniteQuery)(messagesQueryOptions({
+        queryClient: queryClient,
+        threadContext: threadContext,
+        superinterfaceContext: superinterfaceContext
+    }));
+    return (0, import_react11.useMemo)(function() {
+        return _object_spread_props(_object_spread({}, props), {
+            // @ts-ignore-next-line
+            messages: messages({
+                props: props
+            })
+        });
+    }, [
+        props
+    ]);
+};
 // src/hooks/messages/useLatestMessage/index.ts
-var import_react22 = require("react");
 var useLatestMessage = function() {
     var props = useMessages();
-    return (0, import_react22.useMemo)(function() {
+    return (0, import_react12.useMemo)(function() {
         return _object_spread_props(_object_spread({}, props), {
             latestMessage: props.messages[0] || null
         });
@@ -1512,24 +1286,24 @@ var useLatestMessage = function() {
     ]);
 };
 // src/components/suggestions/Suggestions/Content.tsx
-var import_react23 = require("react");
-var import_radash12 = require("radash");
+var import_react15 = require("react");
+var import_radash10 = require("radash");
 var import_react_children_utilities = require("react-children-utilities");
-var import_themes27 = require("@radix-ui/themes");
+var import_themes20 = require("@radix-ui/themes");
 // src/components/suggestions/Suggestions/Item.tsx
-var import_react_icons6 = require("@radix-ui/react-icons");
-var import_themes26 = require("@radix-ui/themes");
+var import_react_icons4 = require("@radix-ui/react-icons");
+var import_themes19 = require("@radix-ui/themes");
 // src/hooks/messages/useCreateMessage/index.ts
-var import_radash11 = require("radash");
+var import_radash9 = require("radash");
 var import_react_query4 = require("@tanstack/react-query");
 // src/hooks/messages/useCreateMessage/lib/mutationOptions/onMutate/index.ts
-var import_radash4 = require("radash");
+var import_radash2 = require("radash");
 // src/hooks/messages/useCreateMessage/lib/mutationOptions/onMutate/data.ts
 var import_dayjs = __toESM(require("dayjs"), 1);
 // src/lib/optimistic/optimisticId.ts
-var import_radash3 = require("radash");
+var import_radash = require("radash");
 var optimisticId = function() {
-    return "-".concat((0, import_radash3.uid)(24));
+    return "-".concat((0, import_radash.uid)(24));
 };
 // src/hooks/messages/useCreateMessage/lib/mutationOptions/onMutate/data.ts
 var data = function(param) {
@@ -1594,7 +1368,7 @@ var onMutate = function(param) {
                     case 0:
                         queryKey = [
                             "messages",
-                            (0, import_radash4.omit)(newMessage, [
+                            (0, import_radash2.omit)(newMessage, [
                                 "content",
                                 "attachments"
                             ])
@@ -1643,13 +1417,13 @@ var threadCreated = function(param) {
     });
 };
 // src/lib/optimistic/isOptimistic.ts
-var import_lodash4 = __toESM(require("lodash"), 1);
+var import_lodash3 = __toESM(require("lodash"), 1);
 var isOptimistic = function(param) {
     var id = param.id;
-    return import_lodash4.default.startsWith(id, "-");
+    return import_lodash3.default.startsWith(id, "-");
 };
 // src/hooks/messages/useCreateMessage/lib/mutationOptions/mutationFn/handleResponse/handlers/extendMessage.ts
-var import_radash5 = require("radash");
+var import_radash3 = require("radash");
 var extendMessage = function(param) {
     var message = param.message, messages2 = param.messages;
     var _this, _this1;
@@ -1662,7 +1436,7 @@ var extendMessage = function(param) {
         });
     });
     var _runSteps, _ref;
-    var runSteps = (_ref = (_runSteps = (_this = (0, import_radash5.last)(prevOptimitisticRunMessages)) === null || _this === void 0 ? void 0 : _this.runSteps) !== null && _runSteps !== void 0 ? _runSteps : (_this1 = (0, import_radash5.last)(prevRunMessages)) === null || _this1 === void 0 ? void 0 : _this1.runSteps) !== null && _ref !== void 0 ? _ref : [];
+    var runSteps = (_ref = (_runSteps = (_this = (0, import_radash3.last)(prevOptimitisticRunMessages)) === null || _this === void 0 ? void 0 : _this.runSteps) !== null && _runSteps !== void 0 ? _runSteps : (_this1 = (0, import_radash3.last)(prevRunMessages)) === null || _this1 === void 0 ? void 0 : _this1.runSteps) !== null && _ref !== void 0 ? _ref : [];
     return _object_spread_props(_object_spread({}, message), {
         runSteps: runSteps
     });
@@ -1714,12 +1488,12 @@ var threadMessageCreated = function(param) {
     });
 };
 // src/hooks/messages/useCreateMessage/lib/mutationOptions/mutationFn/handleResponse/handlers/threadMessageDelta.ts
-var import_lodash5 = __toESM(require("lodash"), 1);
-var import_radash6 = require("radash");
+var import_lodash4 = __toESM(require("lodash"), 1);
+var import_radash4 = require("radash");
 var updatedContentPart = function(param) {
     var prevContentPart = param.prevContentPart, delta = param.delta;
     if (!prevContentPart) {
-        return (0, import_radash6.omit)(delta, [
+        return (0, import_radash4.omit)(delta, [
             "index"
         ]);
     }
@@ -1737,7 +1511,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 = import_lodash5.default.cloneDeep(content);
+    var result = import_lodash4.default.cloneDeep(content);
     value.data.delta.content.forEach(function(delta) {
         result[delta.index] = updatedContentPart({
             // @ts-ignore-next-line
@@ -1781,7 +1555,7 @@ var threadMessageDelta = function(param) {
     });
 };
 // src/hooks/messages/useCreateMessage/lib/mutationOptions/mutationFn/handleResponse/handlers/threadMessageCompleted.ts
-var import_radash7 = require("radash");
+var import_radash5 = require("radash");
 var threadMessageCompleted = function(param) {
     var value = param.value, queryClient = param.queryClient, messagesQueryKey = param.messagesQueryKey;
     return queryClient.setQueryData(messagesQueryKey, function(prevData) {
@@ -1801,7 +1575,7 @@ var threadMessageCompleted = function(param) {
         return _object_spread_props(_object_spread({}, prevData), {
             pages: [
                 _object_spread_props(_object_spread({}, latestPage), {
-                    data: (0, import_radash7.replace)(latestPage.data, extendMessage({
+                    data: (0, import_radash5.replace)(latestPage.data, extendMessage({
                         message: value.data,
                         messages: latestPage.data
                     }), function(m) {
@@ -1871,17 +1645,17 @@ var threadRunStepCreated = function(param) {
     });
 };
 // src/hooks/messages/useCreateMessage/lib/mutationOptions/mutationFn/handleResponse/handlers/threadRunStepDelta.ts
-var import_lodash6 = __toESM(require("lodash"), 1);
-var import_radash8 = require("radash");
+var import_lodash5 = __toESM(require("lodash"), 1);
+var import_radash6 = require("radash");
 var updatedToolCall = function(param) {
     var toolCall = param.toolCall, delta = param.delta;
     if (!toolCall) {
-        return (0, import_radash8.omit)(delta, [
+        return (0, import_radash6.omit)(delta, [
             "index"
         ]);
     }
     if (delta.type === "function" && delta.function && toolCall.type === "function" && toolCall.function) {
-        var result = import_lodash6.default.cloneDeep(toolCall);
+        var result = import_lodash5.default.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){
@@ -1913,7 +1687,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 = import_lodash6.default.cloneDeep(runStep.step_details.tool_calls);
+        var newToolCalls = import_lodash5.default.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],
@@ -1959,7 +1733,7 @@ var threadRunStepDelta = function(param) {
     });
 };
 // src/hooks/messages/useCreateMessage/lib/mutationOptions/mutationFn/handleResponse/handlers/threadRunStepCompleted.ts
-var import_radash9 = require("radash");
+var import_radash7 = require("radash");
 var threadRunStepCompleted = function(param) {
     var value = param.value, queryClient = param.queryClient, messagesQueryKey = param.messagesQueryKey;
     return queryClient.setQueryData(messagesQueryKey, function(prevData) {
@@ -1971,7 +1745,7 @@ var threadRunStepCompleted = function(param) {
                     data: latestPage.data.map(function(m) {
                         if (m.run_id === value.data.run_id) {
                             return _object_spread_props(_object_spread({}, m), {
-                                runSteps: (0, import_radash9.replace)(m.runSteps, value.data, function(rs) {
+                                runSteps: (0, import_radash7.replace)(m.runSteps, value.data, function(rs) {
                                     return rs.id === value.data.id;
                                 })
                             });
@@ -1984,7 +1758,7 @@ var threadRunStepCompleted = function(param) {
     });
 };
 // src/hooks/messages/useCreateMessage/lib/mutationOptions/mutationFn/handleResponse/handlers/threadRunRequiresAction.ts
-var import_radash10 = require("radash");
+var import_radash8 = require("radash");
 var threadRunRequiresAction = /*#__PURE__*/ function() {
     var _ref = _async_to_generator(function(param) {
         var value, queryClient, messagesQueryKey, superinterfaceContext, toolCalls, toolOutputs;
@@ -1999,7 +1773,7 @@ var threadRunRequiresAction = /*#__PURE__*/ function() {
                     toolCalls = value.data.required_action.submit_client_tool_outputs.tool_calls;
                     return [
                         4,
-                        (0, import_radash10.map)(toolCalls, /*#__PURE__*/ function() {
+                        (0, import_radash8.map)(toolCalls, /*#__PURE__*/ function() {
                             var _ref = _async_to_generator(function(toolCall) {
                                 var fn, args, parsedArgs, output, error;
                                 return _ts_generator(this, function(_state) {
@@ -2272,11 +2046,23 @@ var useCreateMessage = function() {
         onError: onError
     }));
     return _object_spread_props(_object_spread({}, props), {
-        createMessage: (0, import_radash11.partob)(props.mutateAsync, threadContext.variables)
+        createMessage: (0, import_radash9.partob)(props.mutateAsync, threadContext.variables)
     });
 };
 // src/components/suggestions/Suggestions/Item.tsx
 var import_react_query5 = require("@tanstack/react-query");
+// src/hooks/toasts/useToasts/index.ts
+var import_react14 = require("react");
+// src/contexts/toasts/ToastsContext/index.ts
+var import_react13 = require("react");
+var ToastsContext = (0, import_react13.createContext)({
+    toasts: [],
+    addToast: function() {}
+});
+// src/hooks/toasts/useToasts/index.ts
+var useToasts = function() {
+    return (0, import_react14.useContext)(ToastsContext);
+};
 // src/lib/errors/createMessageDefaultOnError.ts
 var createMessageDefaultOnError = function(param) {
     var queryClient = param.queryClient, addToast = param.addToast, threadContext = param.threadContext;
@@ -2303,9 +2089,9 @@ var createMessageDefaultOnError = function(param) {
     };
 };
 // src/components/suggestions/Suggestions/Item.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("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 = (0, import_react_query5.useQueryClient)();
     var threadContext = useSuperinterfaceContext();
@@ -2316,7 +2102,7 @@ var Item = function(param) {
             threadContext: threadContext
         })
     }), createMessage = _useCreateMessage.createMessage, isPending = _useCreateMessage.isPending;
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Content3, {
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Content3, {
         onClick: function() {
             createMessage({
                 // @ts-ignore-next-line
@@ -2325,29 +2111,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__ */ (0, import_jsx_runtime34.jsxs)(import_themes26.Button, {
+    var onClick = param.onClick, isDisabled = param.isDisabled, isPending = param.isPending, children = param.children, className = param.className, style = param.style;
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_themes19.Button, {
+        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__ */ (0, import_jsx_runtime34.jsx)(import_themes26.Text, {
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_themes19.Text, {
                 size: "1",
                 weight: "regular",
                 children: children
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_themes26.Spinner, {
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_themes19.Spinner, {
                 loading: isPending,
-                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_icons6.ArrowUpIcon, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_icons4.ArrowUpIcon, {
                     style: {
                         flexShrink: 0
                     }
@@ -2358,26 +2147,28 @@ var Content3 = function(param) {
 };
 Item.Content = Content3;
 // src/components/suggestions/Suggestions/Content.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("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 = (0, import_react23.useMemo)(function() {
+    var suggestions = (0, import_react15.useMemo)(function() {
         return (0, import_react_children_utilities.onlyText)(children).split(/\r?\n/).filter(function(c) {
-            return !(0, import_radash12.isEmpty)(c);
+            return !(0, import_radash10.isEmpty)(c);
         }).map(function(c) {
             return c.trim();
         });
     }, [
         children
     ]);
-    if ((0, import_radash12.isEmpty)(suggestions)) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_themes27.Flex, {
+    if ((0, import_radash10.isEmpty)(suggestions)) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_themes20.Flex, {
         gap: "2",
         py: "2",
         wrap: "wrap",
+        className: className,
+        style: style,
         children: suggestions.map(function(suggestion) {
-            return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Item, {
+            return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Item, {
                 suggestion: suggestion,
                 isDisabled: isMutatingMessage
             }, suggestion);
@@ -2385,11 +2176,11 @@ var Content4 = function(param) {
     });
 };
 // src/components/suggestions/Suggestions/index.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("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 = (0, import_react24.useMemo)(function() {
+    var isDisabled = (0, import_react16.useMemo)(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;
@@ -2398,31 +2189,33 @@ var Suggestions = function(param) {
     ]);
     if (latestMessageProps.isLoading) return null;
     if (isDisabled) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Content4, {
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Content4, {
+        className: className,
+        style: style,
         children: children
     });
 };
 Suggestions.Item = Item;
 // src/contexts/markdown/MarkdownContext/lib/components/Code.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var Code3 = function(param) {
     var children = param.children, className = param.className;
     if (className === "language-suggestions") {
-        return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Suggestions, {
+        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Suggestions, {
             children: children
         });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_themes28.Code, {
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_themes21.Code, {
         children: children
     });
 };
 // src/components/images/Image.tsx
-var import_themes29 = require("@radix-ui/themes");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_themes22 = require("@radix-ui/themes");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var Image = function(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_themes29.Box, {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_themes22.Box, {
         pb: "3",
-        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("img", _object_spread_props(_object_spread({}, props), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", _object_spread_props(_object_spread({}, props), {
             style: {
                 maxWidth: "100%",
                 height: "auto"
@@ -2477,49 +2270,49 @@ var isAudioSrc = function(param) {
     return src.endsWith(".mp3") || src.endsWith(".wav");
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Img/Video/index.tsx
-var import_themes35 = require("@radix-ui/themes");
+var import_themes28 = require("@radix-ui/themes");
 var import_base = require("@vidstack/react/player/styles/base.css");
-var import_react30 = require("@vidstack/react");
+var import_react22 = require("@vidstack/react");
 // src/components/media/PlayButton.tsx
-var import_react25 = require("@vidstack/react");
-var import_themes30 = require("@radix-ui/themes");
-var import_react_icons7 = require("@radix-ui/react-icons");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_react17 = require("@vidstack/react");
+var import_themes23 = require("@radix-ui/themes");
+var import_react_icons5 = require("@radix-ui/react-icons");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var PlayButton = function() {
-    var isPaused = (0, import_react25.useMediaState)("paused");
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_themes30.IconButton, {
+    var isPaused = (0, import_react17.useMediaState)("paused");
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_themes23.IconButton, {
         variant: "ghost",
         asChild: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react25.PlayButton, {
-            children: isPaused ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_icons7.PlayIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_icons7.PauseIcon, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react17.PlayButton, {
+            children: isPaused ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_icons5.PlayIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_icons5.PauseIcon, {})
         })
     });
 };
 // src/components/media/VolumeButton.tsx
-var import_react26 = require("@vidstack/react");
-var import_themes31 = require("@radix-ui/themes");
-var import_react_icons8 = require("@radix-ui/react-icons");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_react18 = require("@vidstack/react");
+var import_themes24 = require("@radix-ui/themes");
+var import_react_icons6 = require("@radix-ui/react-icons");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var VolumeButton = function() {
-    var volume = (0, import_react26.useMediaState)("volume");
-    var isMuted = (0, import_react26.useMediaState)("muted");
-    var remote = (0, import_react26.useMediaRemote)();
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_themes31.HoverCard.Root, {
+    var volume = (0, import_react18.useMediaState)("volume");
+    var isMuted = (0, import_react18.useMediaState)("muted");
+    var remote = (0, import_react18.useMediaRemote)();
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_themes24.HoverCard.Root, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_themes31.HoverCard.Trigger, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_themes31.IconButton, {
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_themes24.HoverCard.Trigger, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_themes24.IconButton, {
                     variant: "ghost",
                     asChild: true,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react26.MuteButton, {
-                        children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_icons8.SpeakerOffIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_icons8.SpeakerModerateIcon, {})
+                    children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react18.MuteButton, {
+                        children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_icons6.SpeakerOffIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_icons6.SpeakerModerateIcon, {})
                     })
                 })
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_themes31.HoverCard.Content, {
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_themes24.HoverCard.Content, {
                 size: "1",
                 side: "top",
                 height: "100px",
-                children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_themes31.Slider, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_themes24.Slider, {
                     size: "1",
                     variant: "soft",
                     orientation: "vertical",
@@ -2536,18 +2329,18 @@ var VolumeButton = function() {
     });
 };
 // src/components/media/Time.tsx
-var import_react27 = require("react");
-var import_react28 = require("@vidstack/react");
-var import_themes32 = require("@radix-ui/themes");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_react20 = require("@vidstack/react");
+var import_themes25 = require("@radix-ui/themes");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var Time = function() {
-    var time = (0, import_react28.useMediaState)("currentTime");
-    var duration = (0, import_react28.useMediaState)("duration");
-    var seeking = (0, import_react28.useMediaState)("seeking");
-    var canSeek = (0, import_react28.useMediaState)("canSeek");
-    var remote = (0, import_react28.useMediaRemote)();
-    var _ref = _sliced_to_array((0, import_react27.useState)(0), 2), value = _ref[0], setValue = _ref[1];
-    (0, import_react27.useEffect)(function() {
+    var time = (0, import_react20.useMediaState)("currentTime");
+    var duration = (0, import_react20.useMediaState)("duration");
+    var seeking = (0, import_react20.useMediaState)("seeking");
+    var canSeek = (0, import_react20.useMediaState)("canSeek");
+    var remote = (0, import_react20.useMediaRemote)();
+    var _ref = _sliced_to_array((0, import_react19.useState)(0), 2), value = _ref[0], setValue = _ref[1];
+    (0, import_react19.useEffect)(function() {
         if (seeking) return;
         setValue(time / duration * 100);
     }, [
@@ -2555,12 +2348,12 @@ var Time = function() {
         duration,
         seeking
     ]);
-    var step = (0, import_react27.useMemo)(function() {
+    var step = (0, import_react19.useMemo)(function() {
         return 1 / duration * 100;
     }, [
         duration
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_themes32.Slider, {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_themes25.Slider, {
         size: "1",
         variant: "soft",
         value: [
@@ -2580,13 +2373,13 @@ var Time = function() {
     });
 };
 // src/components/media/MediaContainer.tsx
-var import_themes33 = require("@radix-ui/themes");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_themes26 = require("@radix-ui/themes");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var MediaContainer = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_themes33.Card, {
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_themes26.Card, {
         mb: "3",
-        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_themes33.Inset, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_themes26.Inset, {
             clip: "padding-box",
             style: {
                 display: "flex",
@@ -2597,26 +2390,26 @@ var MediaContainer = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Img/Video/FullscreenButton.tsx
-var import_react29 = require("@vidstack/react");
-var import_themes34 = require("@radix-ui/themes");
-var import_react_icons9 = require("@radix-ui/react-icons");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_react21 = require("@vidstack/react");
+var import_themes27 = require("@radix-ui/themes");
+var import_react_icons7 = require("@radix-ui/react-icons");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var FullscreenButton = function() {
-    var isFullscreen = (0, import_react29.useMediaState)("fullscreen");
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_themes34.IconButton, {
+    var isFullscreen = (0, import_react21.useMediaState)("fullscreen");
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_themes27.IconButton, {
         variant: "ghost",
         asChild: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react29.FullscreenButton, {
-            children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_icons9.ExitFullScreenIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_icons9.EnterFullScreenIcon, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react21.FullscreenButton, {
+            children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_icons7.ExitFullScreenIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_icons7.EnterFullScreenIcon, {})
         })
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Img/Video/index.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var Video = function(param) {
     var src = param.src;
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MediaContainer, {
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react30.MediaPlayer, {
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MediaContainer, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react22.MediaPlayer, {
             src: {
                 src: src,
                 type: "video/".concat(src.split(".").pop())
@@ -2625,11 +2418,11 @@ var Video = function(param) {
             hideControlsOnMouseLeave: true,
             crossOrigin: true,
             children: [
-                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react30.MediaProvider, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("style", {
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react22.MediaProvider, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("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__ */ (0, import_jsx_runtime44.jsx)(import_themes35.Flex, {
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_themes28.Flex, {
                     asChild: true,
                     position: "absolute",
                     bottom: "0",
@@ -2641,18 +2434,18 @@ var Video = function(param) {
                         zIndex: 10,
                         background: "var(--accent-4)"
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react30.Controls.Root, {
-                        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_themes35.Flex, {
+                    children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react22.Controls.Root, {
+                        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_themes28.Flex, {
                             asChild: true,
                             align: "center",
                             gap: "3",
                             flexGrow: "1",
-                            children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react30.Controls.Group, {
+                            children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react22.Controls.Group, {
                                 children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PlayButton, {}),
-                                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Time, {}),
-                                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(VolumeButton, {}),
-                                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(FullscreenButton, {})
+                                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PlayButton, {}),
+                                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Time, {}),
+                                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(VolumeButton, {}),
+                                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FullscreenButton, {})
                                 ]
                             })
                         })
@@ -2663,14 +2456,14 @@ var Video = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Img/Audio/index.tsx
-var import_themes36 = require("@radix-ui/themes");
+var import_themes29 = require("@radix-ui/themes");
 var import_base2 = require("@vidstack/react/player/styles/base.css");
-var import_react31 = require("@vidstack/react");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_react23 = require("@vidstack/react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var Audio = function(param) {
     var src = param.src;
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(MediaContainer, {
-        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react31.MediaPlayer, {
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(MediaContainer, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react23.MediaPlayer, {
             src: {
                 src: src,
                 type: "audio/".concat(src.split(".").pop())
@@ -2679,8 +2472,8 @@ var Audio = function(param) {
             crossOrigin: true,
             playsInline: true,
             children: [
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react31.MediaProvider, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_themes36.Flex, {
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react23.MediaProvider, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_themes29.Flex, {
                     asChild: true,
                     p: "3",
                     flexGrow: "1",
@@ -2688,17 +2481,17 @@ var Audio = function(param) {
                         zIndex: 10,
                         background: "var(--accent-4)"
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react31.Controls.Root, {
-                        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_themes36.Flex, {
+                    children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react23.Controls.Root, {
+                        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_themes29.Flex, {
                             asChild: true,
                             align: "center",
                             gap: "3",
                             flexGrow: "1",
-                            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react31.Controls.Group, {
+                            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react23.Controls.Group, {
                                 children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PlayButton, {}),
-                                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Time, {}),
-                                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(VolumeButton, {})
+                                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PlayButton, {}),
+                                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Time, {}),
+                                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(VolumeButton, {})
                                 ]
                             })
                         })
@@ -2709,48 +2502,48 @@ var Audio = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Img/index.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var Img = function(props) {
     if (!props.src) {
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Image, _object_spread({}, props));
+        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Image, _object_spread({}, props));
     } else if (isVideoSrc({
         src: props.src
     })) {
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Video, {
+        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Video, {
             src: props.src
         });
     } else if (isAudioSrc({
         src: props.src
     })) {
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Audio, {
+        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Audio, {
             src: props.src
         });
     } else {
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Image, _object_spread({}, props));
+        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Image, _object_spread({}, props));
     }
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Annotation/index.tsx
-var import_react_icons10 = require("@radix-ui/react-icons");
+var import_react_icons8 = require("@radix-ui/react-icons");
 // src/contexts/markdown/MarkdownContext/lib/components/Annotation/AnnotationBase.tsx
-var import_themes37 = require("@radix-ui/themes");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_themes30 = require("@radix-ui/themes");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var AnnotationBase = function(param) {
     var icon = param.icon, content = param.content;
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_themes37.Popover.Root, {
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_themes30.Popover.Root, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_themes37.Popover.Trigger, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_themes37.IconButton, {
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_themes30.Popover.Trigger, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_themes30.IconButton, {
                     variant: "soft",
                     color: "gray",
                     size: "1",
                     children: icon
                 })
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_themes37.Popover.Content, {
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_themes30.Popover.Content, {
                 size: "1",
-                children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_themes37.Flex, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_themes30.Flex, {
                     direction: "column",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_themes37.Text, {
+                    children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_themes30.Text, {
                         size: "1",
                         color: "gray",
                         children: content
@@ -2761,12 +2554,12 @@ var AnnotationBase = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Annotation/FilePathAnnotation.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("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__ */ (0, import_jsx_runtime48.jsx)(Link, {
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Link, {
         href: "".concat(superinterfaceContext.baseUrl, "/files/").concat(annotation.file_path.file_id, "/contents?").concat(nextSearchParams),
         target: "_self",
         download: true,
@@ -2774,16 +2567,16 @@ var FilePathAnnotation = function(param) {
     });
 };
 // src/contexts/markdown/MarkdownContext/lib/components/Annotation/index.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var Annotation = function(param) {
     var annotation = param.annotation, children = param.children;
     if (annotation.type === "file_citation") {
-        return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(AnnotationBase, {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_icons10.QuoteIcon, {}),
+        return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AnnotationBase, {
+            icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_icons8.QuoteIcon, {}),
             content: "File cited."
         });
     } else if (annotation.type === "file_path") {
-        return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FilePathAnnotation, {
+        return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FilePathAnnotation, {
             annotation: annotation,
             children: children
         });
@@ -2791,7 +2584,7 @@ var Annotation = function(param) {
     return null;
 };
 // src/contexts/markdown/MarkdownContext/lib/components/index.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var components = {
     p: Paragraph,
     a: Link,
@@ -2804,62 +2597,62 @@ var components = {
     img: Img,
     annotation: Annotation,
     h1: function(props) {
-        return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_themes38.Heading, {
+        return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_themes31.Heading, {
             as: "h1",
             children: props.children
         });
     },
     h2: function(props) {
-        return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_themes38.Heading, {
+        return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_themes31.Heading, {
             as: "h2",
             size: "5",
             children: props.children
         });
     },
     h3: function(props) {
-        return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_themes38.Heading, {
+        return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_themes31.Heading, {
             as: "h3",
             size: "4",
             children: props.children
         });
     },
     h4: function(props) {
-        return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_themes38.Heading, {
+        return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_themes31.Heading, {
             as: "h4",
             size: "3",
             children: props.children
         });
     },
     h5: function(props) {
-        return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_themes38.Heading, {
+        return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_themes31.Heading, {
             as: "h5",
             size: "3",
             children: props.children
         });
     },
     h6: function(props) {
-        return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_themes38.Heading, {
+        return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_themes31.Heading, {
             as: "h6",
             size: "3",
             children: props.children
         });
     },
     table: function(props) {
-        return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_themes38.Table.Root, _object_spread_props(_object_spread({}, props), {
+        return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_themes31.Table.Root, _object_spread_props(_object_spread({}, props), {
             variant: "surface",
             mb: "3"
         }));
     },
-    thead: import_themes38.Table.Header,
-    tbody: import_themes38.Table.Body,
-    tr: import_themes38.Table.Row,
-    td: import_themes38.Table.Cell,
-    th: import_themes38.Table.ColumnHeaderCell
+    thead: import_themes31.Table.Header,
+    tbody: import_themes31.Table.Body,
+    tr: import_themes31.Table.Row,
+    td: import_themes31.Table.Cell,
+    th: import_themes31.Table.ColumnHeaderCell
 };
 // src/contexts/markdown/MarkdownContext/lib/getRemarkPlugins.ts
 var import_remark_gfm = __toESM(require("remark-gfm"), 1);
 // src/lib/remark/remarkAnnotation.ts
-var import_radash13 = require("radash");
+var import_radash11 = require("radash");
 var import_unist_util_flatmap = __toESM(require("unist-util-flatmap"), 1);
 var sortedAnnotations = function(param) {
     var content = param.content;
@@ -2939,7 +2732,7 @@ var processTextNode = function(param) {
     }
     var nodeStart = node.position.start.offset;
     var nodeEnd = node.position.end.offset;
-    if (!(0, import_radash13.isNumber)(nodeStart) || !(0, import_radash13.isNumber)(nodeEnd)) {
+    if (!(0, import_radash11.isNumber)(nodeStart) || !(0, import_radash11.isNumber)(nodeEnd)) {
         return [
             node
         ];
@@ -3028,135 +2821,358 @@ var getRemarkPlugins = function(param) {
         import_remark_gfm.default
     ];
 };
-// src/contexts/markdown/MarkdownContext/index.ts
-var MarkdownContext = (0, import_react32.createContext)({
-    components: components,
-    getRemarkPlugins: getRemarkPlugins
+// src/contexts/markdown/MarkdownContext/index.ts
+var MarkdownContext = (0, import_react24.createContext)({
+    components: components,
+    getRemarkPlugins: getRemarkPlugins
+});
+// src/hooks/markdown/useMarkdownContext/index.ts
+var useMarkdownContext = function() {
+    return (0, import_react25.useContext)(MarkdownContext);
+};
+// src/components/threads/Thread/Message/ContentPart/TextContent.tsx
+var import_jsx_runtime44 = // @ts-ignore-next-line
+require("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__ */ (0, import_jsx_runtime44.jsx)(import_react_markdown.default, _object_spread_props(_object_spread({}, rest), {
+        remarkPlugins: getRemarkPlugins2({
+            content: content
+        }),
+        children: content.text.value
+    }));
+};
+// src/components/threads/Thread/Message/ContentPart/ImageFileContent.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var ImageFileContent = function(param) {
+    var content = param.content;
+    var superinterfaceContext = useSuperinterfaceContext();
+    var nextSearchParams = new URLSearchParams(superinterfaceContext.variables);
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Image, {
+        alt: "",
+        src: "".concat(superinterfaceContext.baseUrl, "/files/").concat(content.image_file.file_id, "/contents?").concat(nextSearchParams)
+    });
+};
+// src/components/threads/Thread/Message/ContentPart/index.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var ContentPart = function(param) {
+    var content = param.content;
+    if (content.type === "text") {
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TextContent, {
+            content: content
+        });
+    }
+    if (content.type === "image_file") {
+        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ImageFileContent, {
+            content: content
+        });
+    }
+    return null;
+};
+// src/components/threads/Thread/Message/index.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var Message = function(param) {
+    var message = param.message, className = param.className, style = param.style;
+    var _ref = _sliced_to_array((0, import_react26.useMemo)(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 = _ref[0], laterRunSteps = _ref[1];
+    var isMutatingMessage = useIsMutatingMessage();
+    var isInProgress = (0, import_react26.useMemo)(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__ */ (0, import_jsx_runtime47.jsx)(Provider, {
+        value: {
+            message: message
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_themes32.Box, {
+            className: className,
+            style: style,
+            children: [
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(RunSteps, {
+                    runSteps: olderRunSteps
+                }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_themes32.Box, {
+                    children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Attachments, {
+                            message: message
+                        }),
+                        message.content.map(function(content, index) {
+                            return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ContentPart, {
+                                content: content
+                            }, index);
+                        }),
+                        isInProgress && (0, import_radash12.isEmpty)(laterRunSteps) && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(StartingContentSkeleton, {})
+                    ]
+                }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(RunSteps, {
+                    runSteps: laterRunSteps
+                }),
+                isInProgress && !(0, import_radash12.isEmpty)(laterRunSteps) && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_themes32.Box, {
+                    children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(StartingContentSkeleton, {})
+                })
+            ]
+        })
+    });
+};
+// src/components/threads/Thread/Messages/Content/index.tsx
+var import_react36 = require("react");
+// src/hooks/messageGroups/useMessageGroups/index.ts
+var import_react27 = require("react");
+// src/hooks/messageGroups/useMessageGroups/lib/messageGroups/index.ts
+var import_lodash6 = __toESM(require("lodash"), 1);
+var import_radash14 = require("radash");
+// src/lib/messages/order.ts
+var import_radash13 = require("radash");
+var order = function(param) {
+    var messages2 = param.messages;
+    return (0, import_radash13.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 import_lodash6.default.reduce(order({
+        messages: messages2
+    }), function(groups, message) {
+        var group = (0, import_radash14.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(import_lodash6.default.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 (0, import_react27.useMemo)(function() {
+        return {
+            messageGroups: messageGroups({
+                messages: messages2
+            })
+        };
+    }, [
+        messages2
+    ]);
+};
+// src/components/skeletons/MessagesSkeleton/index.tsx
+var import_react29 = require("react");
+var import_themes35 = require("@radix-ui/themes");
+// src/components/messageGroups/MessageGroupBase/index.tsx
+var import_react28 = require("react");
+var import_themes33 = require("@radix-ui/themes");
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var MessageGroupBase = (0, import_react28.forwardRef)(function MessageGroupBase2(param, ref) {
+    var children = param.children;
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_themes33.Container, {
+        ref: ref,
+        size: "2",
+        flexGrow: "0",
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_themes33.Flex, {
+            flexShrink: "0",
+            gap: "3",
+            children: children
+        })
+    });
+});
+// src/components/messageGroups/MessageGroupBase/Name.tsx
+var import_themes34 = require("@radix-ui/themes");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var Name = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes34.Flex, {
+        align: "center",
+        height: "var(--space-5)",
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes34.Text, {
+            size: "2",
+            weight: "bold",
+            children: children
+        })
+    });
+};
+// src/components/skeletons/MessagesSkeleton/index.tsx
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var MessagesSkeleton = (0, import_react29.forwardRef)(function MessagesSkeleton2(_props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(MessageGroupBase, {
+        ref: ref,
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_themes35.Skeleton, {
+                loading: true,
+                children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_themes35.Avatar, {
+                    fallback: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_themes35.Flex, {}),
+                    size: "1"
+                })
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_themes35.Box, {
+                pb: "3",
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Name, {
+                        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_themes35.Skeleton, {
+                            loading: true,
+                            style: {
+                                width: "128px"
+                            }
+                        })
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_themes35.Skeleton, {
+                        loading: true,
+                        style: {
+                            width: "256px"
+                        }
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_themes35.Skeleton, {
+                        loading: true,
+                        style: {
+                            width: "256px",
+                            marginTop: "var(--space-2)"
+                        }
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_themes35.Skeleton, {
+                        loading: true,
+                        style: {
+                            width: "256px",
+                            marginTop: "var(--space-2)"
+                        }
+                    })
+                ]
+            })
+        ]
+    });
 });
-// src/hooks/markdown/useMarkdownContext/index.ts
-var useMarkdownContext = function() {
-    return (0, import_react33.useContext)(MarkdownContext);
-};
-// src/components/threads/Thread/Message/ContentPart/TextContent.tsx
+// src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
+var import_react35 = require("react");
+var import_themes41 = require("@radix-ui/themes");
+// src/components/messageGroups/MessageGroupBase/AssistantAvatar.tsx
+var import_react31 = require("react");
+var import_themes37 = require("@radix-ui/themes");
+// src/contexts/assistants/AssistantAvatarContext/index.tsx
+var import_react30 = require("react");
+var import_themes36 = require("@radix-ui/themes");
+var import_react_icons9 = require("@radix-ui/react-icons");
 var import_jsx_runtime51 = require("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__ */ (0, import_jsx_runtime51.jsx)(import_react_markdown.default, _object_spread_props(_object_spread({}, rest), {
-        remarkPlugins: getRemarkPlugins2({
-            content: content
-        }),
-        children: content.text.value
-    }));
-};
-// src/components/threads/Thread/Message/ContentPart/ImageFileContent.tsx
+var AssistantAvatarContext = (0, import_react30.createContext)(/* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_themes36.Avatar, {
+    fallback: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_icons9.LightningBoltIcon, {}),
+    size: "1"
+}));
+// src/components/messageGroups/MessageGroupBase/AssistantAvatar.tsx
 var import_jsx_runtime52 = require("react/jsx-runtime");
-var ImageFileContent = function(param) {
-    var content = param.content;
-    var superinterfaceContext = useSuperinterfaceContext();
-    var nextSearchParams = new URLSearchParams(superinterfaceContext.variables);
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Image, {
-        alt: "",
-        src: "".concat(superinterfaceContext.baseUrl, "/files/").concat(content.image_file.file_id, "/contents?").concat(nextSearchParams)
+var AssistantAvatar = function() {
+    var AssistantAvatarContextValue = (0, import_react31.useContext)(AssistantAvatarContext);
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_themes37.Flex, {
+        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
+var import_react32 = require("react");
+var AssistantNameContext = (0, import_react32.createContext)("Assistant");
+// src/components/messageGroups/MessageGroupBase/UserAvatar.tsx
+var import_react34 = require("react");
+var import_themes39 = require("@radix-ui/themes");
+// src/contexts/users/UserAvatarContext/index.tsx
+var import_react33 = require("react");
+var import_themes38 = require("@radix-ui/themes");
+var import_react_icons10 = require("@radix-ui/react-icons");
 var import_jsx_runtime53 = require("react/jsx-runtime");
-var ContentPart = function(param) {
-    var content = param.content;
-    if (content.type === "text") {
-        return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TextContent, {
-            content: content
-        });
-    }
-    if (content.type === "image_file") {
-        return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ImageFileContent, {
-            content: content
-        });
-    }
-    return null;
-};
-// src/components/threads/Thread/Message/index.tsx
+var UserAvatarContext = (0, import_react33.createContext)(/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_themes38.Avatar, {
+    fallback: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_icons10.PersonIcon, {}),
+    size: "1"
+}));
+// src/components/messageGroups/MessageGroupBase/UserAvatar.tsx
 var import_jsx_runtime54 = require("react/jsx-runtime");
-var Message = function(param) {
-    var message = param.message;
-    var _ref = _sliced_to_array((0, import_react34.useMemo)(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 = _ref[0], laterRunSteps = _ref[1];
-    var isMutatingMessage = useIsMutatingMessage();
-    var isInProgress = (0, import_react34.useMemo)(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__ */ (0, import_jsx_runtime54.jsx)(Provider, {
-        value: {
-            message: message
+var UserAvatar = function() {
+    var UserAvatarContextValue = (0, import_react34.useContext)(UserAvatarContext);
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_themes39.Flex, {
+        flexShrink: "0",
+        height: "24px",
+        width: "24px",
+        style: {
+            borderRadius: "var(--radius-3)",
+            overflow: "hidden"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_themes39.Box, {
-            children: [
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RunSteps, {
-                    runSteps: olderRunSteps
-                }),
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_themes39.Box, {
-                    children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Attachments, {
-                            message: message
-                        }),
-                        message.content.map(function(content, index) {
-                            return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ContentPart, {
-                                content: content
-                            }, index);
-                        }),
-                        isInProgress && (0, import_radash14.isEmpty)(laterRunSteps) && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(StartingContentSkeleton, {})
-                    ]
-                }),
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RunSteps, {
-                    runSteps: laterRunSteps
-                }),
-                isInProgress && !(0, import_radash14.isEmpty)(laterRunSteps) && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_themes39.Box, {
-                    children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(StartingContentSkeleton, {})
-                })
-            ]
-        })
+        children: UserAvatarContextValue
     });
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
+var import_themes40 = require("@radix-ui/themes");
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var Content5 = function(param) {
     var messageGroup = param.messageGroup;
@@ -3324,7 +3340,7 @@ var useInfiniteScroll = function(param) {
 // src/components/threads/Thread/Messages/Root/index.tsx
 var import_jsx_runtime60 = require("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,
@@ -3335,9 +3351,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__ */ (0, import_jsx_runtime60.jsx)(import_themes43.Flex, {
@@ -3362,9 +3379,10 @@ var NextPageSkeleton = function() {
 // src/components/threads/Thread/Messages/index.tsx
 var import_jsx_runtime62 = require("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__ */ (0, import_jsx_runtime62.jsxs)(Root2, {
         style: style,
+        className: className,
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_themes44.Flex, {
                 flexShrink: "0",
@@ -3407,36 +3425,40 @@ var useMessageFormContext = function() {
 // src/components/threads/Thread/MessageForm/Submit/index.tsx
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var Root3 = function(param) {
-    var children = param.children;
+    var children = param.children, style = param.style, className = param.className;
     return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_themes45.Flex, {
         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__ */ (0, import_jsx_runtime63.jsx)(import_themes45.IconButton, {
+        return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_themes45.IconButton, _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__ */ (0, import_jsx_runtime63.jsx)(import_react_icons11.StopIcon, {})
-        });
+        }));
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_themes45.IconButton, {
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_themes45.IconButton, _object_spread_props(_object_spread({
         type: "submit",
-        disabled: isDisabled || isFileLoading,
+        disabled: isDisabled || isFileLoading
+    }, props), {
         children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react_icons11.ArrowUpIcon, {})
-    });
+    }));
 };
-var Submit = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Root3, {
+var Submit = function(props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Root3, _object_spread_props(_object_spread({}, props), {
         children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Button3, {})
-    });
+    }));
 };
 Submit.Root = Root3;
 Submit.Button = Button3;
@@ -3458,7 +3480,7 @@ var formOptions = {
 var import_radash15 = require("radash");
 var import_jsx_runtime64 = require("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 _ref = _sliced_to_array((0, import_react43.useState)([]), 2), files = _ref[0], setFiles = _ref[1];
     var formProps = (0, import_react_hook_form.useForm)(formOptions);
     var handleSubmit = formProps.handleSubmit, isSubmitting = formProps.formState.isSubmitting, reset = formProps.reset, watch = formProps.watch;
@@ -3562,6 +3584,8 @@ var Root4 = function(param) {
             children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_themes46.Box, {
                 asChild: true,
                 flexShrink: "0",
+                style: style,
+                className: className,
                 children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("form", {
                     onSubmit: handleSubmit(onSubmit),
                     children: children
@@ -3591,7 +3615,11 @@ var import_react46 = require("react");
 var import_react45 = require("react");
 var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"), 1);
 var import_jsx_runtime65 = require("react/jsx-runtime");
-var TextareaBase = (0, import_react45.forwardRef)(function TextareaBase2(props, ref) {
+var TextareaBase = (0, import_react45.forwardRef)(function TextareaBase2(_param, ref) {
+    var style = _param.style, className = _param.className, rest = _object_without_properties(_param, [
+        "style",
+        "className"
+    ]);
     return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, {
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("style", {
@@ -3599,8 +3627,8 @@ var TextareaBase = (0, import_react45.forwardRef)(function TextareaBase2(props,
             }),
             /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_textarea_autosize.default, _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",
@@ -3608,22 +3636,24 @@ var TextareaBase = (0, import_react45.forwardRef)(function TextareaBase2(props,
                     color: "var(--gray-12)",
                     flexGrow: 1,
                     display: "flex"
-                }
-            }, props))
+                }, style !== null && style !== void 0 ? style : {})
+            }, rest))
         ]
     });
 });
 // src/components/threads/Thread/MessageForm/Field/Control.tsx
 var import_jsx_runtime66 = require("react/jsx-runtime");
 var Root5 = function(param) {
-    var children = param.children;
+    var children = param.children, style = param.style, className = param.className;
     return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_themes47.Flex, {
         flexGrow: "1",
         pt: "4px",
+        style: style,
+        className: className,
         children: children
     });
 };
-var Input = function() {
+var Input = function(props) {
     var assistantNameContext = (0, import_react46.useContext)(AssistantNameContext);
     var register = (0, import_react_hook_form2.useFormContext)().register;
     var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading;
@@ -3658,17 +3688,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__ */ (0, import_jsx_runtime66.jsx)(Root5, {
+var Control = function(props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Root5, _object_spread_props(_object_spread({}, props), {
         children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Input, {})
-    });
+    }));
 };
 Control.Root = Root5;
 Control.Input = Input;
@@ -3676,16 +3706,17 @@ Control.Input = Input;
 var import_themes48 = require("@radix-ui/themes");
 var import_react_icons12 = require("@radix-ui/react-icons");
 var import_jsx_runtime67 = require("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__ */ (0, import_jsx_runtime67.jsx)(import_themes48.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_themes48.Flex, _object_spread_props(_object_spread({
         flexBasis: "100%",
         direction: "column",
         pb: "2",
-        gap: "1",
+        gap: "1"
+    }, props), {
         children: files.map(function(file) {
             return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_themes48.Card, {
                 variant: "ghost",
@@ -3738,7 +3769,7 @@ var Preview = function() {
                 })
             }, file.id);
         })
-    });
+    }));
 };
 // src/components/threads/Thread/MessageForm/Field/Files/Control.tsx
 var import_react47 = require("react");
@@ -3858,7 +3889,7 @@ var useCreateFile = function() {
 // src/components/threads/Thread/MessageForm/Field/Files/Control.tsx
 var import_jsx_runtime68 = require("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;
@@ -4030,10 +4061,11 @@ var Control2 = function() {
         createFile,
         setFiles
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_themes49.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_themes49.Flex, _object_spread_props(_object_spread({
         pt: "2",
         pr: "2",
-        flexGrow: "0",
+        flexGrow: "0"
+    }, props), {
         children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_themes49.IconButton, {
             type: "button",
             variant: "ghost",
@@ -4062,7 +4094,7 @@ var Control2 = function() {
                 })
             ]
         })
-    });
+    }));
 };
 // src/components/threads/Thread/MessageForm/Field/Files/index.tsx
 var Files = {
@@ -4072,11 +4104,13 @@ var Files = {
 // src/components/threads/Thread/MessageForm/Field/index.tsx
 var import_jsx_runtime69 = require("react/jsx-runtime");
 var Root6 = function(param) {
-    var children = param.children;
+    var children = param.children, className = param.className, style = param.style;
     var _ref = (0, import_react_hook_form3.useFormContext)(), errors = _ref.formState.errors;
     return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_themes50.Container, {
         size: "2",
         flexGrow: "0",
+        className: className,
+        style: style,
         children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_themes50.Flex, {
             direction: "column",
             flexShrink: "0",
@@ -4108,15 +4142,15 @@ var Field = {
 };
 // src/components/threads/Thread/MessageForm/index.tsx
 var import_jsx_runtime70 = require("react/jsx-runtime");
-var MessageForm = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Root4, {
+var MessageForm = function(props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Root4, _object_spread_props(_object_spread({}, props), {
         children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Field.Root, {
             children: [
                 /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Field.Control, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Submit, {})
             ]
         })
-    });
+    }));
 };
 MessageForm.Root = Root4;
 MessageForm.Field = Field;
@@ -4210,8 +4244,10 @@ var ToastsProvider = function(param) {
 // src/components/threads/Thread/Root/index.tsx
 var import_jsx_runtime73 = require("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__ */ (0, import_jsx_runtime73.jsx)(ToastsProvider, {
         bottom: "var(--space-9)",
@@ -4219,6 +4255,8 @@ var Root8 = function(_param) {
             children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_themes52.Flex, {
                 direction: "column",
                 flexGrow: "1",
+                className: className,
+                style: style,
                 children: children
             })
         }))
@@ -4381,17 +4419,18 @@ var import_themes54 = require("@radix-ui/themes");
 var import_themes53 = require("@radix-ui/themes");
 var import_react_icons15 = require("@radix-ui/react-icons");
 var import_jsx_runtime77 = require("react/jsx-runtime");
-var Button4 = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_themes53.IconButton, {
+var Button4 = function(props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_themes53.IconButton, _object_spread_props(_object_spread({
         size: "4",
-        radius: "full",
+        radius: "full"
+    }, props), {
         children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_react_icons15.ChatBubbleIcon, {})
-    });
+    }));
 };
 // src/components/threads/ThreadDialog/Trigger/index.tsx
 var import_jsx_runtime78 = require("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__ */ (0, import_jsx_runtime78.jsx)(import_themes54.Flex, {
         display: {
@@ -4410,9 +4449,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
     });
 };
@@ -4461,10 +4501,11 @@ var Close = function() {
 // src/components/threads/ThreadDialog/Content/index.tsx
 var import_jsx_runtime80 = require("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__ */ (0, import_jsx_runtime80.jsx)(import_themes56.Flex, {
+        className: className,
         direction: "column",
         justify: "end",
         position: "fixed",
@@ -4518,30 +4559,32 @@ var Root11 = function(param) {
         })
     });
 };
-var Messages2 = function() {
+var Messages2 = function(param) {
+    var className = param.className, style = param.style;
     return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(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__ */ (0, import_jsx_runtime80.jsx)(import_themes56.Flex, {
         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__ */ (0, import_jsx_runtime80.jsx)(Root11, {
-        style: style,
+var Content7 = function(props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Root11, _object_spread_props(_object_spread({}, props), {
         children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(Thread.Root, {
             children: [
                 /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Messages2, {}),
@@ -4550,7 +4593,7 @@ var Content7 = function(param) {
                 })
             ]
         })
-    });
+    }));
 };
 Content7.Root = Root11;
 Content7.Messages = Messages2;
@@ -4606,6 +4649,7 @@ var AudioThreadContext = (0, import_react54.createContext)({
         }),
         visualizationAnalyser: null
     },
+    // @ts-ignore-next-line
     messageAudioProps: {
         visualizationAnalyser: null,
         playing: false,
@@ -5080,7 +5124,7 @@ var useMessageAudio = function(param) {
 var import_react_query10 = require("@tanstack/react-query");
 var import_jsx_runtime82 = require("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 = (0, import_react_query10.useQueryClient)();
     var threadContext = useSuperinterfaceContext();
@@ -5158,16 +5202,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__ */ (0, import_jsx_runtime82.jsx)(ToastsProvider, {
-        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Content8, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Content8, _object_spread_props(_object_spread({}, rest), {
             children: children
-        })
+        }))
     });
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
@@ -5245,7 +5293,7 @@ var BarsVisualizer = function(param) {
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
 var import_jsx_runtime84 = require("react/jsx-runtime");
-var Visualization = function() {
+var Visualization = function(props) {
     var audioThreadContext = useAudioThreadContext();
     var assistantNameContext = (0, import_react62.useContext)(AssistantNameContext);
     var _ref = _sliced_to_array((0, import_react62.useState)(0), 2), scale = _ref[0], setScale = _ref[1];
@@ -5272,12 +5320,13 @@ var Visualization = function() {
         draw,
         audioThreadContext
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes59.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes59.Flex, _object_spread_props(_object_spread({
         direction: "column",
         align: "center",
         justify: "center",
         mb: "3",
-        flexGrow: "1",
+        flexGrow: "1"
+    }, props), {
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_themes59.Flex, {
                 align: "center",
@@ -5308,7 +5357,7 @@ var Visualization = function() {
                 ]
             })
         ]
-    });
+    }));
 };
 // src/components/threads/AudioThread/Status/StatusMessages.tsx
 var import_themes60 = require("@radix-ui/themes");
@@ -5320,10 +5369,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__ */ (0, import_jsx_runtime85.jsxs)(import_themes60.Flex, {
         justify: "center",
         pb: "5",
+        className: className,
+        style: style,
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_themes60.Text, {
                 size: "2",
@@ -5343,41 +5394,41 @@ var StatusMessages = function(param) {
 };
 // src/components/threads/AudioThread/Status/index.tsx
 var import_jsx_runtime86 = require("react/jsx-runtime");
-var Status = function() {
+var Status = function(props) {
     var audioThreadContext = useAudioThreadContext();
     if (audioThreadContext.status === "recording") {
-        return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(StatusMessages, {
+        return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(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__ */ (0, import_jsx_runtime86.jsx)(StatusMessages, {
+        return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(StatusMessages, _object_spread({
             texts: [
                 "Click the button below to activate"
             ]
-        });
+        }, props));
     }
     if (audioThreadContext.status === "playing") {
-        return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(StatusMessages, {
+        return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(StatusMessages, _object_spread({
             texts: [
                 "Click the button below to interrupt"
             ]
-        });
+        }, props));
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(StatusMessages, {
+    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(StatusMessages, _object_spread({
         texts: [
             "Thinking"
         ]
-    });
+    }, props));
 };
 // src/components/threads/AudioThread/Form/index.tsx
 var import_themes62 = require("@radix-ui/themes");
@@ -5479,11 +5530,12 @@ var ActionButton = function() {
 };
 // src/components/threads/AudioThread/Form/index.tsx
 var import_jsx_runtime89 = require("react/jsx-runtime");
-var Form = function() {
+var Form = function(props) {
     var audioThreadContext = useAudioThreadContext();
-    return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(import_themes62.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(import_themes62.Flex, _object_spread_props(_object_spread({
         direction: "column",
-        align: "center",
+        align: "center"
+    }, props), {
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(import_themes62.Flex, {
                 pb: "3",
@@ -5517,7 +5569,7 @@ var Form = function() {
             }),
             /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ActionButton, {})
         ]
-    });
+    }));
 };
 // src/components/threads/AudioThread/index.tsx
 var import_jsx_runtime90 = require("react/jsx-runtime");
@@ -5536,15 +5588,15 @@ AudioThread.Status = Status;
 AudioThread.Form = Form;
 // src/components/threads/AudioThreadDialog/index.tsx
 var import_jsx_runtime91 = require("react/jsx-runtime");
-var AudioThreadDialog = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(Root9, {
+var AudioThreadDialog = function(props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(Root9, _object_spread_props(_object_spread({}, props), {
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Content7.Root, {
                 children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(AudioThread, {})
             }),
             /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Trigger, {})
         ]
-    });
+    }));
 };
 AudioThreadDialog.Root = Root9;
 AudioThreadDialog.Trigger = Trigger;
@@ -5624,9 +5676,11 @@ var optimizedSrc = function(param) {
 // src/components/imageAvatars/ImageAvatar/index.tsx
 var import_jsx_runtime93 = require("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__ */ (0, import_jsx_runtime93.jsx)(import_themes63.Avatar, {
+        className: className,
+        style: style,
         fallback: "",
         src: optimizedSrc({
             imageAvatar: imageAvatar,
@@ -5646,13 +5700,15 @@ var iconAvatarComponents = (_obj = {}, _define_property(_obj, "BACKPACK" /* BACK
 // src/components/iconAvatars/IconAvatar.tsx
 var import_jsx_runtime94 = require("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 = (0, import_react64.useMemo)(function() {
         return iconAvatarComponents[iconAvatar.name];
     }, [
         iconAvatar
     ]);
     return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_themes64.Avatar, {
+        className: className,
+        style: style,
         size: size,
         fallback: Component ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Component, {}) : ""
     });
@@ -5660,24 +5716,30 @@ var IconAvatar = function(param) {
 // src/components/avatars/Avatar.tsx
 var import_jsx_runtime95 = require("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__ */ (0, import_jsx_runtime95.jsx)(ImageAvatar, {
                 imageAvatar: avatar.imageAvatar,
-                size: size
+                size: size,
+                className: className,
+                style: style
             });
         }
         if (avatar.type === "ICON" /* ICON */  && avatar.iconAvatar) {
             return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(IconAvatar, {
                 iconAvatar: avatar.iconAvatar,
-                size: size
+                size: size,
+                className: className,
+                style: style
             });
         }
     }
     return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_themes65.Avatar, {
         fallback: "",
-        size: size
+        size: size,
+        className: className,
+        style: style
     });
 };
 // src/components/components/ComponentsProvider.tsx