@superinterface/react 2.0.7 → 2.0.8

package/dist/index.js

@@ -1,4 +1,4 @@
-// src/components/core/SuperinterfaceProvider/index.tsx
+// src/lib/misc/merge/index.ts
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -265,8 +265,6 @@ function _ts_generator(thisArg, body) {
 }
 var _2;
 var _detect;
-import { Toaster, toast } from "sonner";
-// src/lib/misc/merge/index.ts
 import _21 from "lodash";
 // src/lib/misc/merge/customizer.ts
 import _ from "lodash";
@@ -293,8 +291,7 @@ var SuperinterfaceContext = createContext({
     defaultOptions: {
         queries: {},
         mutations: {}
-    },
-    isToasterRendered: false
+    }
 });
 // src/hooks/core/useSuperinterfaceContext/index.ts
 import { useContext } from "react";
@@ -302,42 +299,28 @@ var useSuperinterfaceContext = function() {
     return useContext(SuperinterfaceContext);
 };
 // src/components/core/SuperinterfaceProvider/index.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 var SuperinterfaceProvider = function(param) {
     var children = param.children, baseUrl = param.baseUrl, publicApiKey = param.publicApiKey, variables = param.variables, defaultOptions = param.defaultOptions;
     var superinterfaceContext = useSuperinterfaceContext();
-    var value = merge(superinterfaceContext, _object_spread_props(_object_spread({}, baseUrl ? {
+    var value = merge(superinterfaceContext, _object_spread({}, baseUrl ? {
         baseUrl: baseUrl
     } : {}, publicApiKey ? {
         publicApiKey: publicApiKey
     } : {}, variables ? {
         variables: variables
-    } : {}, merge({
-        defaultOptions: {
-            mutations: {
-                onError: function(error) {
-                    return toast.error(error.message);
-                }
-            }
-        }
-    }, defaultOptions !== null && defaultOptions !== void 0 ? defaultOptions : {
+    } : {}, defaultOptions ? {
         defaultOptions: defaultOptions
-    })), {
-        isToasterRendered: true
-    }));
-    return /* @__PURE__ */ jsxs(SuperinterfaceContext.Provider, {
+    } : {}));
+    return /* @__PURE__ */ jsx(SuperinterfaceContext.Provider, {
         value: value,
-        children: [
-            children,
-            !superinterfaceContext.isToasterRendered && /* @__PURE__ */ jsx(Toaster, {})
-        ]
+        children: children
     });
 };
 // src/components/threads/Thread/Messages/index.tsx
 import { Flex as Flex12 } from "@radix-ui/themes";
 // src/components/threads/Thread/Messages/Content/index.tsx
 import { useEffect } from "react";
-import { toast as toast2 } from "sonner";
 // src/hooks/messages/useMessages/index.tsx
 import { useMemo } from "react";
 import { useInfiniteQuery, useQueryClient as useQueryClient2 } from "@tanstack/react-query";
@@ -574,9 +557,9 @@ var Name = function(param) {
     });
 };
 // src/components/skeletons/MessagesSkeleton/index.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 var MessagesSkeleton = forwardRef2(function MessagesSkeleton2(_props, ref) {
-    return /* @__PURE__ */ jsxs2(MessageGroupBase, {
+    return /* @__PURE__ */ jsxs(MessageGroupBase, {
         ref: ref,
         children: [
             /* @__PURE__ */ jsx4(Skeleton, {
@@ -586,7 +569,7 @@ var MessagesSkeleton = forwardRef2(function MessagesSkeleton2(_props, ref) {
                     size: "1"
                 })
             }),
-            /* @__PURE__ */ jsxs2(Box, {
+            /* @__PURE__ */ jsxs(Box, {
                 pb: "3",
                 children: [
                     /* @__PURE__ */ jsx4(Name, {
@@ -622,26 +605,38 @@ var MessagesSkeleton = forwardRef2(function MessagesSkeleton2(_props, ref) {
         ]
     });
 });
+// src/hooks/toasts/useToasts/index.ts
+import { useContext as useContext2 } from "react";
+// src/contexts/toasts/ToastsContext/index.ts
+import { createContext as createContext2 } from "react";
+var ToastsContext = createContext2({
+    toasts: [],
+    addToast: function() {}
+});
+// src/hooks/toasts/useToasts/index.ts
+var useToasts = function() {
+    return useContext2(ToastsContext);
+};
 // src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
-import { useContext as useContext5 } from "react";
+import { useContext as useContext6 } from "react";
 import { Box as Box9, Avatar as Avatar3 } from "@radix-ui/themes";
 import { PersonIcon } from "@radix-ui/react-icons";
 // src/components/messageGroups/MessageGroupBase/AssistantAvatar.tsx
-import { useContext as useContext2 } from "react";
+import { useContext as useContext3 } from "react";
 import { Flex as Flex4 } from "@radix-ui/themes";
 // src/contexts/assistants/AssistantAvatarContext/index.tsx
-import { createContext as createContext2 } from "react";
+import { createContext as createContext3 } from "react";
 import { Avatar as Avatar2 } from "@radix-ui/themes";
 import { LightningBoltIcon } from "@radix-ui/react-icons";
 import { jsx as jsx5 } from "react/jsx-runtime";
-var AssistantAvatarContext = createContext2(/* @__PURE__ */ jsx5(Avatar2, {
+var AssistantAvatarContext = createContext3(/* @__PURE__ */ jsx5(Avatar2, {
     fallback: /* @__PURE__ */ jsx5(LightningBoltIcon, {}),
     size: "1"
 }));
 // src/components/messageGroups/MessageGroupBase/AssistantAvatar.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
 var AssistantAvatar = function() {
-    var AssistantAvatarContextValue = useContext2(AssistantAvatarContext);
+    var AssistantAvatarContextValue = useContext3(AssistantAvatarContext);
     return /* @__PURE__ */ jsx6(Flex4, {
         flexShrink: "0",
         height: "24px",
@@ -654,8 +649,8 @@ var AssistantAvatar = function() {
     });
 };
 // src/contexts/assistants/AssistantNameContext/index.tsx
-import { createContext as createContext3 } from "react";
-var AssistantNameContext = createContext3("Assistant");
+import { createContext as createContext4 } from "react";
+var AssistantNameContext = createContext4("Assistant");
 // src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
 import { Flex as Flex10 } from "@radix-ui/themes";
 // src/components/threads/Thread/Message/index.tsx
@@ -668,10 +663,10 @@ import { Flex as Flex8 } from "@radix-ui/themes";
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx
 import { Flex as Flex7 } from "@radix-ui/themes";
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/index.tsx
-import { useContext as useContext3 } from "react";
+import { useContext as useContext4 } from "react";
 // src/contexts/functions/FunctionComponentsContext/index.tsx
-import { createContext as createContext4 } from "react";
-var FunctionComponentsContext = createContext4({});
+import { createContext as createContext5 } from "react";
+var FunctionComponentsContext = createContext5({});
 // src/components/functions/FunctionBase/index.tsx
 import { PopoverRoot, PopoverContent } from "@radix-ui/themes";
 // src/components/toolCalls/ToolCallBase/index.tsx
@@ -721,7 +716,7 @@ var Icon = function(param) {
 // src/components/functions/FunctionBase/Content.tsx
 import { useMemo as useMemo3 } from "react";
 import { Code, Box as Box2 } from "@radix-ui/themes";
-import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
 var Content = function(param) {
     var fn = param.fn;
     var args = useMemo3(function() {
@@ -752,7 +747,7 @@ var Content = function(param) {
     if (!args) {
         return null;
     }
-    return /* @__PURE__ */ jsxs3(Code, {
+    return /* @__PURE__ */ jsxs2(Code, {
         variant: "ghost",
         color: "gold",
         style: {
@@ -770,12 +765,12 @@ var Content = function(param) {
     });
 };
 // src/components/functions/FunctionBase/index.tsx
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
 var FunctionBase = function(param) {
     var fn = param.fn, runStep = param.runStep, title2 = param.title;
-    return /* @__PURE__ */ jsxs4(PopoverRoot, {
+    return /* @__PURE__ */ jsxs3(PopoverRoot, {
         children: [
-            /* @__PURE__ */ jsxs4(ToolCallBase, {
+            /* @__PURE__ */ jsxs3(ToolCallBase, {
                 children: [
                     /* @__PURE__ */ jsx11(Icon, {
                         runStep: runStep
@@ -824,7 +819,7 @@ var DefaultFunction = function(param) {
 import { jsx as jsx13 } from "react/jsx-runtime";
 var Fn = function(param) {
     var fn = param.fn, runStep = param.runStep;
-    var functionComponentsContext = useContext3(FunctionComponentsContext);
+    var functionComponentsContext = useContext4(FunctionComponentsContext);
     var Component = functionComponentsContext[fn.name] || DefaultFunction;
     return(// @ts-ignore-next-line
     /* @__PURE__ */ jsx13(Component, {
@@ -864,11 +859,11 @@ var ToolCall = function(param) {
 // src/components/runSteps/RunStep/ToolCalls/Starting/index.tsx
 import { PopoverRoot as PopoverRoot2, PopoverContent as PopoverContent2, Text as Text3 } from "@radix-ui/themes";
 import { CircleIcon as CircleIcon2 } from "@radix-ui/react-icons";
-import { jsx as jsx16, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
 var Starting = function() {
-    return /* @__PURE__ */ jsxs5(PopoverRoot2, {
+    return /* @__PURE__ */ jsxs4(PopoverRoot2, {
         children: [
-            /* @__PURE__ */ jsxs5(ToolCallBase, {
+            /* @__PURE__ */ jsxs4(ToolCallBase, {
                 children: [
                     /* @__PURE__ */ jsx16(CircleIcon2, {}),
                     /* @__PURE__ */ jsx16(ToolCallTitle, {
@@ -888,10 +883,10 @@ var Starting = function() {
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/index.tsx
-import { jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
 var ToolCalls = function(param) {
     var stepDetails = param.stepDetails, runStep = param.runStep;
-    return /* @__PURE__ */ jsxs6(Flex8, {
+    return /* @__PURE__ */ jsxs5(Flex8, {
         direction: "column",
         children: [
             !stepDetails.tool_calls.length && /* @__PURE__ */ jsx17(Starting, {}),
@@ -930,8 +925,8 @@ var RunSteps = function(param) {
     });
 };
 // src/contexts/messages/MessageContext/index.ts
-import { createContext as createContext5 } from "react";
-var MessageContext = createContext5({
+import { createContext as createContext6 } from "react";
+var MessageContext = createContext6({
     message: null
 });
 // src/components/threads/Thread/Message/Provider.tsx
@@ -939,9 +934,9 @@ var Provider = MessageContext.Provider;
 // src/components/threads/Thread/Message/TextContent.tsx
 import { useRemarkSync } from "react-remark";
 // src/hooks/markdown/useMarkdownContext/index.ts
-import { useContext as useContext4 } from "react";
+import { useContext as useContext5 } from "react";
 // src/contexts/markdown/MarkdownContext/index.ts
-import { createContext as createContext6 } from "react";
+import { createContext as createContext7 } from "react";
 // src/contexts/markdown/MarkdownContext/lib/components/Paragraph.tsx
 import { Box as Box3, Text as Text4 } from "@radix-ui/themes";
 import { jsx as jsx20 } from "react/jsx-runtime";
@@ -1056,7 +1051,7 @@ var components = {
     code: Code2
 };
 // src/contexts/markdown/MarkdownContext/index.ts
-var MarkdownContext = createContext6({
+var MarkdownContext = createContext7({
     remarkPlugins: [],
     rehypeReactOptions: {
         components: components
@@ -1064,7 +1059,7 @@ var MarkdownContext = createContext6({
 });
 // src/hooks/markdown/useMarkdownContext/index.ts
 var useMarkdownContext = function() {
-    return useContext4(MarkdownContext);
+    return useContext5(MarkdownContext);
 };
 // src/components/threads/Thread/Message/TextContent.tsx
 var TextContent = function(param) {
@@ -1073,7 +1068,7 @@ var TextContent = function(param) {
     return useRemarkSync(content.text.value, markdownContext);
 };
 // src/components/threads/Thread/Message/index.tsx
-import { jsx as jsx28, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs6 } from "react/jsx-runtime";
 var Message = function(param) {
     var message = param.message;
     var _useMemo4 = _sliced_to_array(useMemo4(function() {
@@ -1112,7 +1107,7 @@ var Message = function(param) {
         value: {
             message: message
         },
-        children: /* @__PURE__ */ jsxs7(Box8, {
+        children: /* @__PURE__ */ jsxs6(Box8, {
             children: [
                 /* @__PURE__ */ jsx28(RunSteps, {
                     runSteps: olderRunSteps
@@ -1145,17 +1140,17 @@ var Content2 = function(param) {
     });
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
-import { jsx as jsx30, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs7 } from "react/jsx-runtime";
 var MessageGroup = function(param) {
     var messageGroup = param.messageGroup;
-    var assistantNameContext = useContext5(AssistantNameContext);
-    return /* @__PURE__ */ jsxs8(MessageGroupBase, {
+    var assistantNameContext = useContext6(AssistantNameContext);
+    return /* @__PURE__ */ jsxs7(MessageGroupBase, {
         children: [
             messageGroup.role === "user" ? /* @__PURE__ */ jsx30(Avatar3, {
                 fallback: /* @__PURE__ */ jsx30(PersonIcon, {}),
                 size: "1"
             }) : /* @__PURE__ */ jsx30(AssistantAvatar, {}),
-            /* @__PURE__ */ jsxs8(Box9, {
+            /* @__PURE__ */ jsxs7(Box9, {
                 flexGrow: "1",
                 children: [
                     /* @__PURE__ */ jsx30(Name, {
@@ -1173,15 +1168,20 @@ var MessageGroup = function(param) {
 import { Fragment, jsx as jsx31 } from "react/jsx-runtime";
 var Content3 = function() {
     var _useMessages = useMessages(), messages2 = _useMessages.messages, isLoading = _useMessages.isLoading, isLoadingError = _useMessages.isLoadingError;
+    var addToast = useToasts().addToast;
     var _useMessageGroups = useMessageGroups({
         messages: messages2
     }), messageGroups2 = _useMessageGroups.messageGroups;
     useEffect(function() {
         if (isLoadingError) {
-            toast2.error("Could not load messages. Please try again.");
+            addToast({
+                type: "error",
+                message: "Could not load messages. Please try again."
+            });
         }
     }, [
-        isLoadingError
+        isLoadingError,
+        addToast
     ]);
     if (isLoading || isLoadingError) {
         return /* @__PURE__ */ jsx31(MessagesSkeleton, {});
@@ -1212,16 +1212,16 @@ var StartingContentSkeleton = function() {
     });
 };
 // src/components/skeletons/StartingSkeleton/index.tsx
-import { useContext as useContext6 } from "react";
+import { useContext as useContext7 } from "react";
 import { Box as Box10 } from "@radix-ui/themes";
-import { jsx as jsx33, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs8 } from "react/jsx-runtime";
 var StartingSkeleton = function(param) {
     var children = param.children;
-    var assistantNameContext = useContext6(AssistantNameContext);
-    return /* @__PURE__ */ jsxs9(MessageGroupBase, {
+    var assistantNameContext = useContext7(AssistantNameContext);
+    return /* @__PURE__ */ jsxs8(MessageGroupBase, {
         children: [
             /* @__PURE__ */ jsx33(AssistantAvatar, {}),
-            /* @__PURE__ */ jsxs9(Box10, {
+            /* @__PURE__ */ jsxs8(Box10, {
                 children: [
                     /* @__PURE__ */ jsx33(Name, {
                         children: assistantNameContext
@@ -1320,16 +1320,16 @@ var isRunEditingMessage = function(param) {
     return !hasContent;
 };
 // src/hooks/runs/usePollingContext/index.ts
-import { useContext as useContext7 } from "react";
+import { useContext as useContext8 } from "react";
 // src/contexts/runs/PollingContext/index.tsx
-import { createContext as createContext7 } from "react";
-var PollingContext = createContext7({
+import { createContext as createContext8 } from "react";
+var PollingContext = createContext8({
     isPollRefetching: false,
     setIsPollRefetching: function() {}
 });
 // src/hooks/runs/usePollingContext/index.ts
 var usePollingContext = function() {
-    return useContext7(PollingContext);
+    return useContext8(PollingContext);
 };
 // src/hooks/runs/useIsRunActive/index.tsx
 var progressStatuses = [
@@ -1398,7 +1398,7 @@ var useIsRunActive = function() {
     ]);
 };
 // src/components/threads/Thread/Messages/Progress/index.tsx
-import { jsx as jsx34, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs9 } from "react/jsx-runtime";
 var Progress = function() {
     var _useIsRunActive = useIsRunActive(), isRunActive2 = _useIsRunActive.isRunActive;
     var latestMessage = useLatestMessage().latestMessage;
@@ -1407,7 +1407,7 @@ var Progress = function() {
     if (latestMessage.role === "user") {
         return /* @__PURE__ */ jsx34(StartingSkeleton, {});
     }
-    return /* @__PURE__ */ jsxs10(MessageGroupBase, {
+    return /* @__PURE__ */ jsxs9(MessageGroupBase, {
         children: [
             /* @__PURE__ */ jsx34(Box11, {
                 pl: "5"
@@ -1473,7 +1473,6 @@ var useInfiniteScroll = function(param) {
     };
 };
 // src/hooks/runs/useManageRuns/index.tsx
-import { toast as toast3 } from "sonner";
 import { useQueryClient as useQueryClient5 } from "@tanstack/react-query";
 import { useEffect as useEffect3, useState } from "react";
 // src/hooks/runs/useCreateRun/index.ts
@@ -1724,6 +1723,9 @@ var onMutate = function(param) {
 };
 // src/hooks/runs/useCreateRun/index.ts
 var useCreateRun = function() {
+    var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {
+        onError: function() {}
+    }, _ref_onError = _ref.onError, onError = _ref_onError === void 0 ? function() {} : _ref_onError;
     var queryClient = useQueryClient4();
     var superinterfaceContext = useSuperinterfaceContext();
     var threadContext = useSuperinterfaceContext();
@@ -1736,7 +1738,8 @@ var useCreateRun = function() {
         }),
         onMutate: onMutate({
             queryClient: queryClient
-        })
+        }),
+        onError: onError
     }, mutationOptions({
         mutationKeyBase: [
             "createRun"
@@ -1758,10 +1761,18 @@ var isOptimistic = function(param) {
 };
 // src/hooks/runs/useManageRuns/index.tsx
 var useManageRuns = function() {
+    var addToast = useToasts().addToast;
     var queryClient = useQueryClient5();
     var latestRunProps = useLatestRun();
     var latestMessageProps = useLatestMessage();
-    var createRunProps = useCreateRun();
+    var createRunProps = useCreateRun({
+        onError: function(error) {
+            return addToast({
+                type: "error",
+                message: error.message
+            });
+        }
+    });
     var threadContext = useSuperinterfaceContext();
     var _useState = _sliced_to_array(useState([]), 2), toastedErrorRunIds = _useState[0], setToastedErrorRunIds = _useState[1];
     useEffect3(function() {
@@ -1773,10 +1784,14 @@ var useManageRuns = function() {
                 latestRunProps.latestRun.id
             ]);
         });
-        toast3.error("AI run failed. Please try again.");
+        addToast({
+            type: "error",
+            message: "AI run failed. Please try again."
+        });
     }, [
         latestRunProps,
-        toastedErrorRunIds
+        toastedErrorRunIds,
+        addToast
     ]);
     useEffect3(function() {
         if (createRunProps.isPending) return;
@@ -1987,7 +2002,7 @@ var useLifecycle = function() {
     return null;
 };
 // src/components/threads/Thread/Messages/Root/index.tsx
-import { jsx as jsx35, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs10 } from "react/jsx-runtime";
 var Root = function(param) {
     var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
     var _useMessages = useMessages(), isFetchingNextPage = _useMessages.isFetchingNextPage, hasNextPage = _useMessages.hasNextPage, fetchNextPage = _useMessages.fetchNextPage;
@@ -1997,7 +2012,7 @@ var Root = function(param) {
         hasNextPage: hasNextPage,
         fetchNextPage: fetchNextPage
     }), containerRef = _useInfiniteScroll.containerRef, loaderRef = _useInfiniteScroll.loaderRef;
-    return /* @__PURE__ */ jsxs11(Flex11, {
+    return /* @__PURE__ */ jsxs10(Flex11, {
         ref: containerRef,
         direction: "column-reverse",
         flexGrow: "1",
@@ -2026,10 +2041,10 @@ var NextPageSkeleton = function() {
     return /* @__PURE__ */ jsx36(MessagesSkeleton, {});
 };
 // src/components/threads/Thread/Messages/index.tsx
-import { jsx as jsx37, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs11 } from "react/jsx-runtime";
 var Messages = function(param) {
     var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
-    return /* @__PURE__ */ jsxs12(Root, {
+    return /* @__PURE__ */ jsxs11(Root, {
         style: style,
         children: [
             /* @__PURE__ */ jsx37(Flex12, {
@@ -2056,16 +2071,16 @@ import { Flex as Flex14, Text as Text5 } from "@radix-ui/themes";
 import { ArrowUpIcon } from "@radix-ui/react-icons";
 import { Button as Button2, Spinner } from "@radix-ui/themes";
 // src/hooks/messages/useMessageFormContext/index.ts
-import { useContext as useContext8 } from "react";
+import { useContext as useContext9 } from "react";
 // src/contexts/messages/MessageFormContext/index.ts
-import { createContext as createContext8 } from "react";
-var MessageFormContext = createContext8({
+import { createContext as createContext9 } from "react";
+var MessageFormContext = createContext9({
     isDisabled: false,
     isLoading: false
 });
 // src/hooks/messages/useMessageFormContext/index.ts
 var useMessageFormContext = function() {
-    return useContext8(MessageFormContext);
+    return useContext9(MessageFormContext);
 };
 // src/components/threads/Thread/MessageForm/Submit/index.tsx
 import { jsx as jsx38 } from "react/jsx-runtime";
@@ -2230,6 +2245,9 @@ var onSettled3 = function(param) {
 };
 // src/hooks/messages/useCreateMessage/index.ts
 var useCreateMessage = function() {
+    var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {
+        onError: function() {}
+    }, _ref_onError = _ref.onError, onError = _ref_onError === void 0 ? function() {} : _ref_onError;
     var queryClient = useQueryClient9();
     var superinterfaceContext = useSuperinterfaceContext();
     var threadContext = useSuperinterfaceContext();
@@ -2239,7 +2257,8 @@ var useCreateMessage = function() {
         }),
         onSettled: onSettled3({
             queryClient: queryClient
-        })
+        }),
+        onError: onError
     }, mutationOptions({
         mutationKeyBase: [
             "createMessage"
@@ -2275,7 +2294,15 @@ var Root2 = function(param) {
         isRunActive2,
         isSubmitting
     ]);
-    var createMessage = useCreateMessage().createMessage;
+    var addToast = useToasts().addToast;
+    var createMessage = useCreateMessage({
+        onError: function(error) {
+            return addToast({
+                type: "error",
+                message: error.message
+            });
+        }
+    }).createMessage;
     var onSubmit = function() {
         var _ref = _async_to_generator(function(data3) {
             return _ts_generator(this, function(_state) {
@@ -2324,14 +2351,14 @@ var Root2 = function(param) {
 };
 // src/components/threads/Thread/MessageForm/Field/index.tsx
 import { usePrevious } from "react-use";
-import { useContext as useContext9, useMemo as useMemo10, useRef as useRef3, useEffect as useEffect5 } from "react";
+import { useContext as useContext10, useMemo as useMemo10, useRef as useRef3, useEffect as useEffect5 } from "react";
 // src/components/textareas/TextareaBase/index.tsx
 import { forwardRef as forwardRef3 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
-import { Fragment as Fragment2, jsx as jsx40, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx40, jsxs as jsxs12 } from "react/jsx-runtime";
 var UPSCALE_RATIO = 16 / 14;
 var TextareaBase = forwardRef3(function TextareaBase2(props, ref) {
-    return /* @__PURE__ */ jsxs13(Fragment2, {
+    return /* @__PURE__ */ jsxs12(Fragment2, {
         children: [
             /* @__PURE__ */ jsx40("style", {
                 children: ".superinterface-textarea { min-height: inherit; height: 30px; }\n.superinterface-textarea::placeholder { color: var(--gray-a10); }"
@@ -2392,7 +2419,7 @@ var Root3 = function(param) {
     });
 };
 var Control = function() {
-    var assistantNameContext = useContext9(AssistantNameContext);
+    var assistantNameContext = useContext10(AssistantNameContext);
     var register = useFormContext().register;
     var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading;
     var isSubmitDisabled = useMemo10(function() {
@@ -2438,10 +2465,10 @@ var Field = {
     Control: Control
 };
 // src/components/threads/Thread/MessageForm/index.tsx
-import { jsx as jsx42, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs13 } from "react/jsx-runtime";
 var MessageForm = function() {
     return /* @__PURE__ */ jsx42(Root2, {
-        children: /* @__PURE__ */ jsxs14(Field.Root, {
+        children: /* @__PURE__ */ jsxs13(Field.Root, {
             children: [
                 /* @__PURE__ */ jsx42(Text5, {
                     size: "2",
@@ -2504,9 +2531,9 @@ var Root4 = function(_param) {
     }));
 };
 // src/components/threads/Thread/index.tsx
-import { jsx as jsx46, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs14 } from "react/jsx-runtime";
 var Thread = function(props) {
-    return /* @__PURE__ */ jsxs15(Root4, _object_spread_props(_object_spread({}, props), {
+    return /* @__PURE__ */ jsxs14(Root4, _object_spread_props(_object_spread({}, props), {
         children: [
             /* @__PURE__ */ jsx46(Messages, {}),
             /* @__PURE__ */ jsx46(MessageForm, {})
@@ -2517,24 +2544,24 @@ Thread.Root = Root4;
 Thread.Messages = Messages;
 Thread.MessageForm = MessageForm;
 // src/hooks/messages/useMessageContext/index.ts
-import { useContext as useContext10 } from "react";
+import { useContext as useContext11 } from "react";
 var useMessageContext = function() {
-    return useContext10(MessageContext);
+    return useContext11(MessageContext);
 };
 // src/components/threads/ThreadDialog/Root/index.tsx
-import { Flex as Flex16 } from "@radix-ui/themes";
+import { Flex as Flex17 } from "@radix-ui/themes";
 // src/components/threads/ThreadDialog/Provider/index.tsx
 import { useState as useState3 } from "react";
 // src/contexts/threads/ThreadDialogContext/index.ts
-import { createContext as createContext9 } from "react";
-var ThreadDialogContext = createContext9({
+import { createContext as createContext10 } from "react";
+var ThreadDialogContext = createContext10({
     isOpen: false,
     setIsOpen: function() {}
 });
 // src/hooks/threads/useThreadDialogContext/index.ts
-import { useContext as useContext11 } from "react";
+import { useContext as useContext12 } from "react";
 var useThreadDialogContext = function() {
-    return useContext11(ThreadDialogContext);
+    return useContext12(ThreadDialogContext);
 };
 // src/components/threads/ThreadDialog/Provider/index.tsx
 import { jsx as jsx47 } from "react/jsx-runtime";
@@ -2550,33 +2577,117 @@ var Provider3 = function(param) {
         children: children
     });
 };
+// src/components/toasts/ToastsProvider/index.tsx
+import { useState as useState4, useCallback as useCallback2 } from "react";
+import * as Toast2 from "@radix-ui/react-toast";
+// src/components/toasts/ToastsProvider/CustomToast.tsx
+import * as Toast from "@radix-ui/react-toast";
+import { Card, Text as Text6, Flex as Flex16 } from "@radix-ui/themes";
+import { CheckCircledIcon as CheckCircledIcon2, CrossCircledIcon } from "@radix-ui/react-icons";
+import { jsx as jsx48, jsxs as jsxs15 } from "react/jsx-runtime";
+var CustomToast = function(param) {
+    var toast = param.toast;
+    return /* @__PURE__ */ jsx48(Toast.Root, {
+        children: /* @__PURE__ */ jsx48(Card, {
+            children: /* @__PURE__ */ jsx48(Toast.Title, {
+                children: /* @__PURE__ */ jsxs15(Flex16, {
+                    children: [
+                        /* @__PURE__ */ jsx48(Flex16, {
+                            pr: "2",
+                            height: "14px",
+                            align: "center",
+                            children: toast.type === "success" ? /* @__PURE__ */ jsx48(CheckCircledIcon2, {
+                                color: "var(--mint-9)"
+                            }) : /* @__PURE__ */ jsx48(CrossCircledIcon, {
+                                color: "var(--red-9)"
+                            })
+                        }),
+                        /* @__PURE__ */ jsx48(Text6, {
+                            weight: "medium",
+                            size: "1",
+                            children: toast.message
+                        })
+                    ]
+                })
+            })
+        })
+    });
+};
+// src/components/toasts/ToastsProvider/index.tsx
+import { jsx as jsx49, jsxs as jsxs16 } from "react/jsx-runtime";
+var ToastsProvider = function(param) {
+    var children = param.children;
+    var _useState4 = _sliced_to_array(useState4([]), 2), toasts = _useState4[0], setToasts = _useState4[1];
+    var addToast = useCallback2(function(toast) {
+        return setToasts(function(prevToasts) {
+            return _to_consumable_array(prevToasts).concat([
+                toast
+            ]);
+        });
+    }, []);
+    return /* @__PURE__ */ jsx49(ToastsContext.Provider, {
+        value: {
+            toasts: toasts,
+            addToast: addToast
+        },
+        children: /* @__PURE__ */ jsxs16(Toast2.Provider, {
+            children: [
+                children,
+                Array.from(toasts).map(function(toast, index) {
+                    return /* @__PURE__ */ jsx49(CustomToast, {
+                        toast: toast
+                    }, index);
+                }),
+                /* @__PURE__ */ jsx49(Toast2.Viewport, {
+                    style: {
+                        position: "absolute",
+                        bottom: 0,
+                        right: 0,
+                        display: "flex",
+                        flexDirection: "column",
+                        padding: "var(--space-5)",
+                        gap: "var(--space-3)",
+                        width: "390px",
+                        maxWidth: "100vw",
+                        margin: 0,
+                        listStyle: "none",
+                        zIndex: 99999999999999,
+                        outline: "none"
+                    }
+                })
+            ]
+        })
+    });
+};
 // src/components/threads/ThreadDialog/Root/index.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
-var Root5 = function(param) {
+import { jsx as jsx50 } from "react/jsx-runtime";
+var Root6 = function(param) {
     var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
-    return /* @__PURE__ */ jsx48(Provider3, {
-        children: /* @__PURE__ */ jsx48(Flex16, {
-            direction: "column",
-            justify: "end",
-            align: "end",
-            position: "fixed",
-            style: _object_spread({
-                bottom: "24px",
-                right: "24px",
-                top: "24px",
-                zIndex: 9999999999
-            }, style),
-            children: children
+    return /* @__PURE__ */ jsx50(ToastsProvider, {
+        children: /* @__PURE__ */ jsx50(Provider3, {
+            children: /* @__PURE__ */ jsx50(Flex17, {
+                direction: "column",
+                justify: "end",
+                align: "end",
+                position: "fixed",
+                style: _object_spread({
+                    bottom: "24px",
+                    right: "24px",
+                    top: "24px",
+                    zIndex: 9999999999
+                }, style),
+                children: children
+            })
         })
     });
 };
 // src/components/threads/ThreadDialog/Trigger/index.tsx
-import { Flex as Flex17 } from "@radix-ui/themes";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { Flex as Flex18 } from "@radix-ui/themes";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var Trigger = function(param) {
     var children = param.children;
     var setIsOpen = useThreadDialogContext().setIsOpen;
-    return /* @__PURE__ */ jsx49(Flex17, {
+    return /* @__PURE__ */ jsx51(Flex18, {
         onClick: function() {
             return setIsOpen(function(prev) {
                 return !prev;
@@ -2590,22 +2701,22 @@ var Trigger = function(param) {
 // src/components/threads/ThreadDialog/Button/index.tsx
 import { IconButton } from "@radix-ui/themes";
 import { ChatBubbleIcon } from "@radix-ui/react-icons";
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var Button3 = function() {
-    return /* @__PURE__ */ jsx50(IconButton, {
+    return /* @__PURE__ */ jsx52(IconButton, {
         size: "4",
         radius: "full",
-        children: /* @__PURE__ */ jsx50(ChatBubbleIcon, {})
+        children: /* @__PURE__ */ jsx52(ChatBubbleIcon, {})
     });
 };
 // src/components/threads/ThreadDialog/Content/index.tsx
-import { Card, Inset, Flex as Flex18 } from "@radix-ui/themes";
-import { jsx as jsx51, jsxs as jsxs16 } from "react/jsx-runtime";
-var Root6 = function(param) {
+import { Card as Card2, Inset, Flex as Flex19 } from "@radix-ui/themes";
+import { jsx as jsx53, jsxs as jsxs17 } from "react/jsx-runtime";
+var Root7 = function(param) {
     var children = param.children;
     var isOpen = useThreadDialogContext().isOpen;
     if (!isOpen) return null;
-    return /* @__PURE__ */ jsx51(Card, {
+    return /* @__PURE__ */ jsx53(Card2, {
         mb: "3",
         style: {
             display: "flex",
@@ -2614,7 +2725,7 @@ var Root6 = function(param) {
             maxWidth: "400px",
             maxHeight: "720px"
         },
-        children: /* @__PURE__ */ jsx51(Inset, {
+        children: /* @__PURE__ */ jsx53(Inset, {
             clip: "padding-box",
             side: "all",
             pb: "current",
@@ -2627,51 +2738,51 @@ var Root6 = function(param) {
     });
 };
 var Content4 = function() {
-    return /* @__PURE__ */ jsx51(Root6, {
-        children: /* @__PURE__ */ jsxs16(Thread.Root, {
+    return /* @__PURE__ */ jsx53(Root7, {
+        children: /* @__PURE__ */ jsxs17(Thread.Root, {
             children: [
-                /* @__PURE__ */ jsx51(Thread.Messages, {
+                /* @__PURE__ */ jsx53(Thread.Messages, {
                     style: {
                         paddingTop: "var(--space-5)",
                         paddingRight: "var(--space-5)",
                         paddingLeft: "var(--space-5)"
                     }
                 }),
-                /* @__PURE__ */ jsx51(Flex18, {
+                /* @__PURE__ */ jsx53(Flex19, {
                     direction: "column",
                     pl: "5",
                     pr: "5",
                     pb: "3",
                     flexShrink: "0",
-                    children: /* @__PURE__ */ jsx51(Thread.MessageForm, {})
+                    children: /* @__PURE__ */ jsx53(Thread.MessageForm, {})
                 })
             ]
         })
     });
 };
-Content4.Root = Root6;
+Content4.Root = Root7;
 // src/components/threads/ThreadDialog/index.tsx
-import { jsx as jsx52, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs18 } from "react/jsx-runtime";
 var ThreadDialog = function() {
-    return /* @__PURE__ */ jsxs17(Root5, {
+    return /* @__PURE__ */ jsxs18(Root6, {
         children: [
-            /* @__PURE__ */ jsx52(Content4, {}),
-            /* @__PURE__ */ jsx52(Trigger, {
-                children: /* @__PURE__ */ jsx52(Button3, {})
+            /* @__PURE__ */ jsx54(Content4, {}),
+            /* @__PURE__ */ jsx54(Trigger, {
+                children: /* @__PURE__ */ jsx54(Button3, {})
             })
         ]
     });
 };
-ThreadDialog.Root = Root5;
+ThreadDialog.Root = Root6;
 ThreadDialog.Trigger = Trigger;
 ThreadDialog.Button = Button3;
 ThreadDialog.Content = Content4;
 // src/components/threads/AudioThread/Root/index.tsx
 import "regenerator-runtime/runtime";
-import { Flex as Flex19 } from "@radix-ui/themes";
+import { Flex as Flex20 } from "@radix-ui/themes";
 // src/contexts/threads/AudioThreadContext/index.ts
-import { createContext as createContext10 } from "react";
-var AudioThreadContext = createContext10({
+import { createContext as createContext11 } from "react";
+var AudioThreadContext = createContext11({
     status: "idle",
     recorderProps: {
         status: "idle",
@@ -2766,18 +2877,18 @@ var useStatus = function(param) {
 // src/hooks/audioThreads/useRecorder/index.ts
 import dayjs from "dayjs";
 import { useAudioCapture } from "use-audio-capture";
-import { useMemo as useMemo12, useRef as useRef4, useState as useState4, useCallback as useCallback2, useEffect as useEffect6 } from "react";
+import { useMemo as useMemo12, useRef as useRef4, useState as useState5, useCallback as useCallback3, useEffect as useEffect6 } from "react";
 import { useAudioPlayer } from "react-use-audio-player";
 import { useInterval as useInterval2 } from "react-use";
 var useRecorder = function(param) {
     var isStopOnSilence = param.isStopOnSilence, onStart = param.onStart, onStop = param.onStop;
-    var _useState4 = _sliced_to_array(useState4(null), 2), silenceStart = _useState4[0], setSilenceStart = _useState4[1];
-    var _useState41 = _sliced_to_array(useState4(null), 2), noiseStart = _useState41[0], setNoiseStart = _useState41[1];
-    var _useState42 = _sliced_to_array(useState4(null), 2), mediaStream = _useState42[0], setMediaStream = _useState42[1];
-    var _useState43 = _sliced_to_array(useState4("idle"), 2), status = _useState43[0], setStatus = _useState43[1];
+    var _useState5 = _sliced_to_array(useState5(null), 2), silenceStart = _useState5[0], setSilenceStart = _useState5[1];
+    var _useState51 = _sliced_to_array(useState5(null), 2), noiseStart = _useState51[0], setNoiseStart = _useState51[1];
+    var _useState52 = _sliced_to_array(useState5(null), 2), mediaStream = _useState52[0], setMediaStream = _useState52[1];
+    var _useState53 = _sliced_to_array(useState5("idle"), 2), status = _useState53[0], setStatus = _useState53[1];
     var startAudioPlayer = useAudioPlayer();
     var endAudioPlayer = useAudioPlayer();
-    var _useState44 = _sliced_to_array(useState4(false), 2), isLoaded = _useState44[0], setIsLoaded = _useState44[1];
+    var _useState54 = _sliced_to_array(useState5(false), 2), isLoaded = _useState54[0], setIsLoaded = _useState54[1];
     useEffect6(function() {
         if (isLoaded) return;
         setIsLoaded(true);
@@ -2836,7 +2947,7 @@ var useRecorder = function(param) {
             setNoiseStart(null);
         }
     });
-    var _useState45 = _sliced_to_array(useState4(null), 2), audioEngine = _useState45[0], setAudioEngine = _useState45[1];
+    var _useState55 = _sliced_to_array(useState5(null), 2), audioEngine = _useState55[0], setAudioEngine = _useState55[1];
     var isInited = useRef4(false);
     useEffect6(function() {
         if (!mediaStream) return;
@@ -2868,7 +2979,7 @@ var useRecorder = function(param) {
     }, [
         audioEngine
     ]);
-    var handleSilence = useCallback2(function() {
+    var handleSilence = useCallback3(function() {
         if (!silenceAnalyser) return;
         var frequencyData = new Uint8Array(silenceAnalyser.frequencyBinCount);
         silenceAnalyser.getByteFrequencyData(frequencyData);
@@ -2914,7 +3025,7 @@ var useRecorder = function(param) {
     });
 };
 // src/hooks/audioThreads/useMessageAudio/index.ts
-import { useMemo as useMemo13, useRef as useRef5, useState as useState5, useEffect as useEffect7 } from "react";
+import { useMemo as useMemo13, useRef as useRef5, useState as useState6, useEffect as useEffect7 } from "react";
 import { Howler } from "howler";
 import { useAudioPlayer as useAudioPlayer2 } from "react-use-audio-player";
 // src/hooks/audioThreads/useMessageAudio/lib/input.ts
@@ -2940,7 +3051,7 @@ var isHtmlAudioSupported = !unsupportedNames.includes(((_detect = detect()) ===
 // src/hooks/audioThreads/useMessageAudio/index.ts
 var useMessageAudio = function(param) {
     var onEnd = param.onEnd;
-    var _useState5 = _sliced_to_array(useState5([]), 2), playedMessageIds = _useState5[0], setPlayedMessageIds = _useState5[1];
+    var _useState6 = _sliced_to_array(useState6([]), 2), playedMessageIds = _useState6[0], setPlayedMessageIds = _useState6[1];
     var audioPlayer = useAudioPlayer2();
     var superinterfaceContext = useSuperinterfaceContext();
     var latestMessageProps = useLatestMessage();
@@ -2979,7 +3090,7 @@ var useMessageAudio = function(param) {
         onEnd
     ]);
     var isInited = useRef5(false);
-    var _useState51 = _sliced_to_array(useState5(null), 2), audioEngine = _useState51[0], setAudioEngine = _useState51[1];
+    var _useState61 = _sliced_to_array(useState6(null), 2), audioEngine = _useState61[0], setAudioEngine = _useState61[1];
     useEffect7(function() {
         if (!audioPlayer.playing) return;
         if (isInited.current) return;
@@ -3015,8 +3126,8 @@ var useMessageAudio = function(param) {
     });
 };
 // src/components/threads/AudioThread/Root/index.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
-var Root7 = function(param) {
+import { jsx as jsx55 } from "react/jsx-runtime";
+var Root8 = function(param) {
     var children = param.children;
     useLifecycle();
     var createMessageProps = useCreateMessage();
@@ -3075,13 +3186,13 @@ var Root7 = function(param) {
         createMessageProps: createMessageProps,
         messageAudioProps: messageAudioProps
     }).status;
-    return /* @__PURE__ */ jsx53(AudioThreadContext.Provider, {
+    return /* @__PURE__ */ jsx55(AudioThreadContext.Provider, {
         value: {
             status: status,
             recorderProps: recorderProps,
             messageAudioProps: messageAudioProps
         },
-        children: /* @__PURE__ */ jsx53(Flex19, {
+        children: /* @__PURE__ */ jsx55(Flex20, {
             direction: "column",
             flexGrow: "1",
             p: "5",
@@ -3090,23 +3201,23 @@ var Root7 = function(param) {
     });
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
-import { Flex as Flex20 } from "@radix-ui/themes";
+import { Flex as Flex21 } from "@radix-ui/themes";
 // src/hooks/threads/useAudioThreadContext/index.ts
-import { useContext as useContext12 } from "react";
+import { useContext as useContext13 } from "react";
 var useAudioThreadContext = function() {
-    return useContext12(AudioThreadContext);
+    return useContext13(AudioThreadContext);
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var Visualization = function() {
     var audioThreadContext = useAudioThreadContext();
-    return /* @__PURE__ */ jsx54(Flex20, {
+    return /* @__PURE__ */ jsx56(Flex21, {
         direction: "column",
         align: "center",
         justify: "center",
         mb: "3",
         flexGrow: "1",
-        children: /* @__PURE__ */ jsx54(Flex20, {
+        children: /* @__PURE__ */ jsx56(Flex21, {
             align: "center",
             justify: "center",
             height: "200px",
@@ -3120,22 +3231,22 @@ var Visualization = function() {
 };
 // src/components/threads/AudioThread/Form/index.tsx
 import { SpeakerModerateIcon } from "@radix-ui/react-icons";
-import { Flex as Flex23 } from "@radix-ui/themes";
+import { Flex as Flex24 } from "@radix-ui/themes";
 // src/components/threads/AudioThread/Form/Visualizer/index.tsx
 import _7 from "lodash";
-import { Flex as Flex21, Grid } from "@radix-ui/themes";
-import { useState as useState6, useEffect as useEffect8, useCallback as useCallback3 } from "react";
+import { Flex as Flex22, Grid } from "@radix-ui/themes";
+import { useState as useState7, useEffect as useEffect8, useCallback as useCallback4 } from "react";
 import { cluster } from "radash";
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var barCount = 4;
 var Visualizer = function() {
     var audioThreadContext = useAudioThreadContext();
     var visualizationAnalyser = audioThreadContext.recorderProps.visualizationAnalyser;
-    var _useState6 = _sliced_to_array(useState6(function() {
+    var _useState7 = _sliced_to_array(useState7(function() {
         return new AudioContext().createAnalyser();
-    }), 1), emptyVisualizer = _useState6[0];
-    var _useState61 = _sliced_to_array(useState6([]), 2), barHeights = _useState61[0], setBarHeights = _useState61[1];
-    var draw = useCallback3(function(param) {
+    }), 1), emptyVisualizer = _useState7[0];
+    var _useState71 = _sliced_to_array(useState7([]), 2), barHeights = _useState71[0], setBarHeights = _useState71[1];
+    var draw = useCallback4(function(param) {
         var visualizationAnalyser2 = param.visualizationAnalyser;
         var frequencyData = new Uint8Array(visualizationAnalyser2.frequencyBinCount / 15);
         visualizationAnalyser2.getByteFrequencyData(frequencyData);
@@ -3158,7 +3269,7 @@ var Visualizer = function() {
         visualizationAnalyser,
         emptyVisualizer
     ]);
-    return /* @__PURE__ */ jsx55(Grid, {
+    return /* @__PURE__ */ jsx57(Grid, {
         columns: "".concat(barCount),
         gap: "1",
         width: "auto",
@@ -3167,12 +3278,12 @@ var Visualizer = function() {
             gridTemplateColumns: "repeat(4, minmax(0, 1fr))"
         },
         children: barHeights.map(function(barHeight, index) {
-            return /* @__PURE__ */ jsx55(Flex21, {
+            return /* @__PURE__ */ jsx57(Flex22, {
                 direction: "column",
                 align: "center",
                 justify: "center",
                 height: "20px",
-                children: /* @__PURE__ */ jsx55(Flex21, {
+                children: /* @__PURE__ */ jsx57(Flex22, {
                     minHeight: "50%",
                     maxHeight: "100%",
                     height: "".concat(barHeight + 20, "%"),
@@ -3187,31 +3298,31 @@ var Visualizer = function() {
     });
 };
 // src/components/threads/AudioThread/Form/ActionButton/index.tsx
-import { Flex as Flex22, IconButton as IconButton2, Tooltip } from "@radix-ui/themes";
+import { Flex as Flex23, IconButton as IconButton2, Tooltip } from "@radix-ui/themes";
 import { PauseIcon, ArrowUpIcon as ArrowUpIcon2, ResumeIcon } from "@radix-ui/react-icons";
-import { jsx as jsx56, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs19 } from "react/jsx-runtime";
 var ActionButton = function() {
     var audioThreadContext = useAudioThreadContext();
     if (audioThreadContext.status === "recording") {
-        return /* @__PURE__ */ jsxs18(Flex22, {
+        return /* @__PURE__ */ jsxs19(Flex23, {
             align: "center",
             children: [
-                /* @__PURE__ */ jsx56(Flex22, {
+                /* @__PURE__ */ jsx58(Flex23, {
                     mr: "3",
                     ml: "-7",
-                    children: /* @__PURE__ */ jsx56(IconButton2, {
+                    children: /* @__PURE__ */ jsx58(IconButton2, {
                         onClick: audioThreadContext.recorderProps.pause,
                         color: "gray",
                         radius: "full",
                         size: "1",
-                        children: /* @__PURE__ */ jsx56(PauseIcon, {})
+                        children: /* @__PURE__ */ jsx58(PauseIcon, {})
                     })
                 }),
-                /* @__PURE__ */ jsx56(Tooltip, {
+                /* @__PURE__ */ jsx58(Tooltip, {
                     open: true,
                     content: "Send your message",
                     side: "bottom",
-                    children: /* @__PURE__ */ jsx56(IconButton2, {
+                    children: /* @__PURE__ */ jsx58(IconButton2, {
                         onClick: audioThreadContext.recorderProps.stop,
                         color: "gray",
                         highContrast: true,
@@ -3220,14 +3331,14 @@ var ActionButton = function() {
                         style: {
                             border: "2px solid var(--gray-8)"
                         },
-                        children: /* @__PURE__ */ jsx56(ArrowUpIcon2, {})
+                        children: /* @__PURE__ */ jsx58(ArrowUpIcon2, {})
                     })
                 })
             ]
         });
     }
     if (audioThreadContext.status === "recorderPaused") {
-        return /* @__PURE__ */ jsx56(IconButton2, {
+        return /* @__PURE__ */ jsx58(IconButton2, {
             onClick: audioThreadContext.recorderProps.resume,
             color: "red",
             radius: "full",
@@ -3235,11 +3346,11 @@ var ActionButton = function() {
             style: {
                 border: "2px solid var(--gray-8)"
             },
-            children: /* @__PURE__ */ jsx56(ResumeIcon, {})
+            children: /* @__PURE__ */ jsx58(ResumeIcon, {})
         });
     }
     if (audioThreadContext.status === "idle") {
-        return /* @__PURE__ */ jsx56(IconButton2, {
+        return /* @__PURE__ */ jsx58(IconButton2, {
             onClick: function() {
                 return audioThreadContext.recorderProps.start();
             },
@@ -3252,7 +3363,7 @@ var ActionButton = function() {
         });
     }
     if (audioThreadContext.status === "playing") {
-        return /* @__PURE__ */ jsx56(IconButton2, {
+        return /* @__PURE__ */ jsx58(IconButton2, {
             onClick: function() {
                 return audioThreadContext.messageAudioProps.pause();
             },
@@ -3262,11 +3373,11 @@ var ActionButton = function() {
             style: {
                 border: "2px solid var(--gray-8)"
             },
-            children: /* @__PURE__ */ jsx56(PauseIcon, {})
+            children: /* @__PURE__ */ jsx58(PauseIcon, {})
         });
     }
     if (audioThreadContext.status === "playerPaused") {
-        return /* @__PURE__ */ jsx56(IconButton2, {
+        return /* @__PURE__ */ jsx58(IconButton2, {
             onClick: function() {
                 return audioThreadContext.messageAudioProps.play();
             },
@@ -3276,10 +3387,10 @@ var ActionButton = function() {
             style: {
                 border: "2px solid var(--gray-8)"
             },
-            children: /* @__PURE__ */ jsx56(ResumeIcon, {})
+            children: /* @__PURE__ */ jsx58(ResumeIcon, {})
         });
     }
-    return /* @__PURE__ */ jsx56(IconButton2, {
+    return /* @__PURE__ */ jsx58(IconButton2, {
         size: "4",
         color: "red",
         radius: "full",
@@ -3290,70 +3401,70 @@ var ActionButton = function() {
     });
 };
 // src/components/threads/AudioThread/Form/index.tsx
-import { jsx as jsx57, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs20 } from "react/jsx-runtime";
 var Form = function() {
     var audioThreadContext = useAudioThreadContext();
-    return /* @__PURE__ */ jsxs19(Flex23, {
+    return /* @__PURE__ */ jsxs20(Flex24, {
         direction: "column",
         align: "center",
         children: [
-            /* @__PURE__ */ jsxs19(Flex23, {
+            /* @__PURE__ */ jsxs20(Flex24, {
                 pb: "3",
                 align: "center",
                 children: [
-                    /* @__PURE__ */ jsx57(Flex23, {
+                    /* @__PURE__ */ jsx59(Flex24, {
                         ml: "-5",
                         mr: "2",
                         align: "center",
-                        children: /* @__PURE__ */ jsx57(SpeakerModerateIcon, {
+                        children: /* @__PURE__ */ jsx59(SpeakerModerateIcon, {
                             style: {
                                 color: "var(--".concat(audioThreadContext.status === "recording" ? "mint" : "gray", "-12)")
                             }
                         })
                     }),
-                    /* @__PURE__ */ jsx57(Flex23, {
+                    /* @__PURE__ */ jsx59(Flex24, {
                         px: "2",
                         py: "1",
                         style: {
                             backgroundColor: "var(--".concat(audioThreadContext.status === "recording" ? "mint" : "gray", "-4)"),
                             borderRadius: "var(--radius-6)"
                         },
-                        children: /* @__PURE__ */ jsx57(Visualizer, {})
+                        children: /* @__PURE__ */ jsx59(Visualizer, {})
                     })
                 ]
             }),
-            /* @__PURE__ */ jsx57(ActionButton, {})
+            /* @__PURE__ */ jsx59(ActionButton, {})
         ]
     });
 };
 // src/components/threads/AudioThread/index.tsx
-import { jsx as jsx58, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs21 } from "react/jsx-runtime";
 var AudioThread = function(props) {
-    return /* @__PURE__ */ jsxs20(Root7, _object_spread_props(_object_spread({}, props), {
+    return /* @__PURE__ */ jsxs21(Root8, _object_spread_props(_object_spread({}, props), {
         children: [
-            /* @__PURE__ */ jsx58(Visualization, {}),
-            /* @__PURE__ */ jsx58(Form, {})
+            /* @__PURE__ */ jsx60(Visualization, {}),
+            /* @__PURE__ */ jsx60(Form, {})
         ]
     }));
 };
-AudioThread.Root = Root7;
+AudioThread.Root = Root8;
 AudioThread.Visualization = Visualization;
 AudioThread.Form = Form;
 // src/components/threads/AudioThreadDialog/index.tsx
-import { jsx as jsx59, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs22 } from "react/jsx-runtime";
 var AudioThreadDialog = function() {
-    return /* @__PURE__ */ jsxs21(Root5, {
+    return /* @__PURE__ */ jsxs22(Root6, {
         children: [
-            /* @__PURE__ */ jsx59(Content4.Root, {
-                children: /* @__PURE__ */ jsx59(AudioThread, {})
+            /* @__PURE__ */ jsx61(Content4.Root, {
+                children: /* @__PURE__ */ jsx61(AudioThread, {})
             }),
-            /* @__PURE__ */ jsx59(Trigger, {
-                children: /* @__PURE__ */ jsx59(Button3, {})
+            /* @__PURE__ */ jsx61(Trigger, {
+                children: /* @__PURE__ */ jsx61(Button3, {})
             })
         ]
     });
 };
-AudioThreadDialog.Root = Root5;
+AudioThreadDialog.Root = Root6;
 AudioThreadDialog.Trigger = Trigger;
 AudioThreadDialog.Button = Button3;
 AudioThreadDialog.Content = Content4;
@@ -3363,15 +3474,15 @@ import { useMemo as useMemo15 } from "react";
 import { useMemo as useMemo14 } from "react";
 import { isEmpty as isEmpty2 } from "radash";
 import { onlyText } from "react-children-utilities";
-import { Flex as Flex24 } from "@radix-ui/themes";
+import { Flex as Flex25 } from "@radix-ui/themes";
 // src/components/suggestions/Suggestions/Item.tsx
 import { ArrowUpIcon as ArrowUpIcon3 } from "@radix-ui/react-icons";
-import { Text as Text6, Button as Button4, Spinner as Spinner2 } from "@radix-ui/themes";
-import { jsx as jsx60, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Text as Text7, Button as Button4, Spinner as Spinner2 } from "@radix-ui/themes";
+import { jsx as jsx62, jsxs as jsxs23 } from "react/jsx-runtime";
 var Item = function(param) {
     var suggestion = param.suggestion, isDisabled = param.isDisabled;
     var _useCreateMessage = useCreateMessage(), createMessage = _useCreateMessage.createMessage, isPending = _useCreateMessage.isPending;
-    return /* @__PURE__ */ jsx60(Content5, {
+    return /* @__PURE__ */ jsx62(Content5, {
         onClick: function() {
             createMessage({
                 // @ts-ignore-next-line
@@ -3385,26 +3496,26 @@ var Item = function(param) {
 };
 var Content5 = function(param) {
     var onClick = param.onClick, isDisabled = param.isDisabled, isPending = param.isPending, children = param.children;
-    return /* @__PURE__ */ jsxs22(Button4, {
+    return /* @__PURE__ */ jsxs23(Button4, {
         variant: "soft",
         onClick: onClick,
         disabled: isDisabled,
         children: [
-            /* @__PURE__ */ jsx60(Text6, {
+            /* @__PURE__ */ jsx62(Text7, {
                 size: "1",
                 weight: "regular",
                 children: children
             }),
-            /* @__PURE__ */ jsx60(Spinner2, {
+            /* @__PURE__ */ jsx62(Spinner2, {
                 loading: isPending,
-                children: /* @__PURE__ */ jsx60(ArrowUpIcon3, {})
+                children: /* @__PURE__ */ jsx62(ArrowUpIcon3, {})
             })
         ]
     });
 };
 Item.Content = Content5;
 // src/components/suggestions/Suggestions/Content.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var Content6 = function(param) {
     var children = param.children;
     var messageContext = useMessageContext();
@@ -3428,12 +3539,12 @@ var Content6 = function(param) {
         isRunActiveProps
     ]);
     if (isEmpty2(suggestions)) return null;
-    return /* @__PURE__ */ jsx61(Flex24, {
+    return /* @__PURE__ */ jsx63(Flex25, {
         gap: "2",
         py: "2",
         wrap: "wrap",
         children: suggestions.map(function(suggestion) {
-            return /* @__PURE__ */ jsx61(Item, {
+            return /* @__PURE__ */ jsx63(Item, {
                 suggestion: suggestion,
                 isDisabled: isDisabled
             }, suggestion);
@@ -3441,7 +3552,7 @@ var Content6 = function(param) {
     });
 };
 // src/components/suggestions/Suggestions/index.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 var Suggestions = function(param) {
     var children = param.children;
     var latestMessageProps = useLatestMessage();
@@ -3454,14 +3565,14 @@ var Suggestions = function(param) {
     ]);
     if (latestMessageProps.isLoading) return null;
     if (isDisabled) return null;
-    return /* @__PURE__ */ jsx62(Content6, {
+    return /* @__PURE__ */ jsx64(Content6, {
         children: children
     });
 };
 Suggestions.Item = Item;
 // src/components/markdown/MarkdownProvider/index.tsx
 import { useMemo as useMemo16 } from "react";
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var MarkdownProvider = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
@@ -3473,7 +3584,7 @@ var MarkdownProvider = function(_param) {
         rest,
         prevMarkdownContext
     ]);
-    return /* @__PURE__ */ jsx63(MarkdownContext.Provider, {
+    return /* @__PURE__ */ jsx65(MarkdownContext.Provider, {
         value: value,
         children: children
     });