@superinterface/react 2.0.7 → 2.0.8

package/dist/index.cjs

@@ -403,8 +403,6 @@ __export(src_exports, {
     }
 });
 module.exports = __toCommonJS(src_exports);
-// src/components/core/SuperinterfaceProvider/index.tsx
-var import_sonner = require("sonner");
 // src/lib/misc/merge/index.ts
 var import_lodash2 = __toESM(require("lodash"), 1);
 // src/lib/misc/merge/customizer.ts
@@ -432,8 +430,7 @@ var SuperinterfaceContext = (0, import_react.createContext)({
     defaultOptions: {
         queries: {},
         mutations: {}
-    },
-    isToasterRendered: false
+    }
 });
 // src/hooks/core/useSuperinterfaceContext/index.ts
 var import_react2 = require("react");
@@ -445,38 +442,24 @@ var import_jsx_runtime = require("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 import_sonner.toast.error(error.message);
-                }
-            }
-        }
-    }, defaultOptions !== null && defaultOptions !== void 0 ? defaultOptions : {
+    } : {}, defaultOptions ? {
         defaultOptions: defaultOptions
-    })), {
-        isToasterRendered: true
-    }));
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SuperinterfaceContext.Provider, {
+    } : {}));
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SuperinterfaceContext.Provider, {
         value: value,
-        children: [
-            children,
-            !superinterfaceContext.isToasterRendered && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sonner.Toaster, {})
-        ]
+        children: children
     });
 };
 // src/components/threads/Thread/Messages/index.tsx
 var import_themes30 = require("@radix-ui/themes");
 // src/components/threads/Thread/Messages/Content/index.tsx
-var import_react18 = require("react");
-var import_sonner2 = require("sonner");
+var import_react20 = require("react");
 // src/hooks/messages/useMessages/index.tsx
 var import_react3 = require("react");
 var import_react_query2 = require("@tanstack/react-query");
@@ -761,26 +744,38 @@ var MessagesSkeleton = (0, import_react6.forwardRef)(function MessagesSkeleton2(
         ]
     });
 });
+// src/hooks/toasts/useToasts/index.ts
+var import_react8 = require("react");
+// src/contexts/toasts/ToastsContext/index.ts
+var import_react7 = require("react");
+var ToastsContext = (0, import_react7.createContext)({
+    toasts: [],
+    addToast: function() {}
+});
+// src/hooks/toasts/useToasts/index.ts
+var useToasts = function() {
+    return (0, import_react8.useContext)(ToastsContext);
+};
 // src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 var import_themes25 = require("@radix-ui/themes");
 var import_react_icons4 = require("@radix-ui/react-icons");
 // src/components/messageGroups/MessageGroupBase/AssistantAvatar.tsx
-var import_react8 = require("react");
+var import_react10 = require("react");
 var import_themes5 = require("@radix-ui/themes");
 // src/contexts/assistants/AssistantAvatarContext/index.tsx
-var import_react7 = require("react");
+var import_react9 = 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_react7.createContext)(/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_themes4.Avatar, {
+var AssistantAvatarContext = (0, import_react9.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_react8.useContext)(AssistantAvatarContext);
+    var AssistantAvatarContextValue = (0, import_react10.useContext)(AssistantAvatarContext);
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_themes5.Flex, {
         flexShrink: "0",
         height: "24px",
@@ -793,12 +788,12 @@ var AssistantAvatar = function() {
     });
 };
 // src/contexts/assistants/AssistantNameContext/index.tsx
-var import_react9 = require("react");
-var AssistantNameContext = (0, import_react9.createContext)("Assistant");
+var import_react11 = require("react");
+var AssistantNameContext = (0, import_react11.createContext)("Assistant");
 // src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
 var import_themes24 = require("@radix-ui/themes");
 // src/components/threads/Thread/Message/index.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 var import_themes23 = require("@radix-ui/themes");
 // src/components/runSteps/RunSteps/index.tsx
 var import_themes14 = require("@radix-ui/themes");
@@ -807,10 +802,10 @@ var import_themes13 = require("@radix-ui/themes");
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx
 var import_themes11 = require("@radix-ui/themes");
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/index.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 // src/contexts/functions/FunctionComponentsContext/index.tsx
-var import_react10 = require("react");
-var FunctionComponentsContext = (0, import_react10.createContext)({});
+var import_react12 = require("react");
+var FunctionComponentsContext = (0, import_react12.createContext)({});
 // src/components/functions/FunctionBase/index.tsx
 var import_themes9 = require("@radix-ui/themes");
 // src/components/toolCalls/ToolCallBase/index.tsx
@@ -858,12 +853,12 @@ var Icon = function(param) {
     }
 };
 // src/components/functions/FunctionBase/Content.tsx
-var import_react11 = require("react");
+var import_react13 = require("react");
 var import_themes8 = require("@radix-ui/themes");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var Content = function(param) {
     var fn = param.fn;
-    var args = (0, import_react11.useMemo)(function() {
+    var args = (0, import_react13.useMemo)(function() {
         var result = null;
         try {
             result = JSON.parse(fn.arguments);
@@ -874,7 +869,7 @@ var Content = function(param) {
     }, [
         fn
     ]);
-    var output = (0, import_react11.useMemo)(function() {
+    var output = (0, import_react13.useMemo)(function() {
         if (!fn.output) {
             return null;
         }
@@ -964,7 +959,7 @@ var import_jsx_runtime13 = // @ts-ignore-next-line
 require("react/jsx-runtime");
 var Fn = function(param) {
     var fn = param.fn, runStep = param.runStep;
-    var functionComponentsContext = (0, import_react12.useContext)(FunctionComponentsContext);
+    var functionComponentsContext = (0, import_react14.useContext)(FunctionComponentsContext);
     var Component = functionComponentsContext[fn.name] || DefaultFunction;
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Component, {
         fn: fn,
@@ -1069,8 +1064,8 @@ var RunSteps = function(param) {
     });
 };
 // src/contexts/messages/MessageContext/index.ts
-var import_react13 = require("react");
-var MessageContext = (0, import_react13.createContext)({
+var import_react15 = require("react");
+var MessageContext = (0, import_react15.createContext)({
     message: null
 });
 // src/components/threads/Thread/Message/Provider.tsx
@@ -1078,9 +1073,9 @@ var Provider = MessageContext.Provider;
 // src/components/threads/Thread/Message/TextContent.tsx
 var import_react_remark = require("react-remark");
 // src/hooks/markdown/useMarkdownContext/index.ts
-var import_react15 = require("react");
+var import_react17 = require("react");
 // src/contexts/markdown/MarkdownContext/index.ts
-var import_react14 = require("react");
+var import_react16 = require("react");
 // src/contexts/markdown/MarkdownContext/lib/components/Paragraph.tsx
 var import_themes15 = require("@radix-ui/themes");
 var import_jsx_runtime20 = require("react/jsx-runtime");
@@ -1195,7 +1190,7 @@ var components = {
     code: Code2
 };
 // src/contexts/markdown/MarkdownContext/index.ts
-var MarkdownContext = (0, import_react14.createContext)({
+var MarkdownContext = (0, import_react16.createContext)({
     remarkPlugins: [],
     rehypeReactOptions: {
         components: components
@@ -1203,7 +1198,7 @@ var MarkdownContext = (0, import_react14.createContext)({
 });
 // src/hooks/markdown/useMarkdownContext/index.ts
 var useMarkdownContext = function() {
-    return (0, import_react15.useContext)(MarkdownContext);
+    return (0, import_react17.useContext)(MarkdownContext);
 };
 // src/components/threads/Thread/Message/TextContent.tsx
 var TextContent = function(param) {
@@ -1215,7 +1210,7 @@ var TextContent = function(param) {
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var Message = function(param) {
     var message = param.message;
-    var _ref = _sliced_to_array((0, import_react16.useMemo)(function() {
+    var _ref = _sliced_to_array((0, import_react18.useMemo)(function() {
         if (!message.runSteps.length) return [
             [],
             []
@@ -1287,7 +1282,7 @@ var Content2 = function(param) {
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var MessageGroup = function(param) {
     var messageGroup = param.messageGroup;
-    var assistantNameContext = (0, import_react17.useContext)(AssistantNameContext);
+    var assistantNameContext = (0, import_react19.useContext)(AssistantNameContext);
     return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(MessageGroupBase, {
         children: [
             messageGroup.role === "user" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_themes25.Avatar, {
@@ -1312,15 +1307,20 @@ var MessageGroup = function(param) {
 var import_jsx_runtime31 = require("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;
-    (0, import_react18.useEffect)(function() {
+    (0, import_react20.useEffect)(function() {
         if (isLoadingError) {
-            import_sonner2.toast.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__ */ (0, import_jsx_runtime31.jsx)(MessagesSkeleton, {});
@@ -1351,12 +1351,12 @@ var StartingContentSkeleton = function() {
     });
 };
 // src/components/skeletons/StartingSkeleton/index.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 var import_themes27 = require("@radix-ui/themes");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var StartingSkeleton = function(param) {
     var children = param.children;
-    var assistantNameContext = (0, import_react19.useContext)(AssistantNameContext);
+    var assistantNameContext = (0, import_react21.useContext)(AssistantNameContext);
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(MessageGroupBase, {
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AssistantAvatar, {}),
@@ -1373,10 +1373,10 @@ var StartingSkeleton = function(param) {
     });
 };
 // src/hooks/messages/useLatestMessage/index.ts
-var import_react20 = require("react");
+var import_react22 = require("react");
 var useLatestMessage = function() {
     var props = useMessages();
-    return (0, import_react20.useMemo)(function() {
+    return (0, import_react22.useMemo)(function() {
         return _object_spread_props(_object_spread({}, props), {
             latestMessage: props.messages[0] || null
         });
@@ -1385,12 +1385,12 @@ var useLatestMessage = function() {
     ]);
 };
 // src/hooks/runs/useIsRunActive/index.tsx
-var import_react25 = require("react");
+var import_react27 = require("react");
 var import_react_query4 = require("@tanstack/react-query");
 // src/hooks/runs/useLatestRun/index.ts
-var import_react22 = require("react");
+var import_react24 = require("react");
 // src/hooks/runs/useRuns/index.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 var import_react_query3 = require("@tanstack/react-query");
 // src/lib/runs/runsQueryOptions.ts
 var runsQueryOptions = function(param) {
@@ -1423,7 +1423,7 @@ var useRuns = function() {
         threadContext: threadContext,
         superinterfaceContext: superinterfaceContext
     }));
-    return (0, import_react21.useMemo)(function() {
+    return (0, import_react23.useMemo)(function() {
         return _object_spread_props(_object_spread({}, props), {
             // @ts-ignore-next-line
             runs: getRuns({
@@ -1437,7 +1437,7 @@ var useRuns = function() {
 // src/hooks/runs/useLatestRun/index.ts
 var useLatestRun = function() {
     var props = useRuns();
-    return (0, import_react22.useMemo)(function() {
+    return (0, import_react24.useMemo)(function() {
         return _object_spread_props(_object_spread({}, props), {
             latestRun: props.runs[0]
         });
@@ -1459,16 +1459,16 @@ var isRunEditingMessage = function(param) {
     return !hasContent;
 };
 // src/hooks/runs/usePollingContext/index.ts
-var import_react24 = require("react");
+var import_react26 = require("react");
 // src/contexts/runs/PollingContext/index.tsx
-var import_react23 = require("react");
-var PollingContext = (0, import_react23.createContext)({
+var import_react25 = require("react");
+var PollingContext = (0, import_react25.createContext)({
     isPollRefetching: false,
     setIsPollRefetching: function() {}
 });
 // src/hooks/runs/usePollingContext/index.ts
 var usePollingContext = function() {
-    return (0, import_react24.useContext)(PollingContext);
+    return (0, import_react26.useContext)(PollingContext);
 };
 // src/hooks/runs/useIsRunActive/index.tsx
 var progressStatuses = [
@@ -1518,7 +1518,7 @@ var useIsRunActive = function() {
             threadContext.variables
         ]
     });
-    return (0, import_react25.useMemo)(function() {
+    return (0, import_react27.useMemo)(function() {
         return _object_spread_props(_object_spread({}, latestRunProps), {
             isRunActive: isRunActive({
                 pollingContext: pollingContext,
@@ -1558,15 +1558,15 @@ var Progress = function() {
 // src/components/threads/Thread/Messages/Root/index.tsx
 var import_themes29 = require("@radix-ui/themes");
 // src/hooks/misc/useInfiniteScroll/index.tsx
-var import_react27 = require("react");
+var import_react29 = require("react");
 var import_react_intersection_observer = require("react-intersection-observer");
 // src/hooks/misc/useThrottledEffect/index.tsx
 var import_lodash5 = __toESM(require("lodash"), 1);
-var import_react26 = require("react");
+var import_react28 = require("react");
 var useThrottledEffect = function(cb, delay, additionalDeps) {
     var _cbRef;
-    var cbRef = (0, import_react26.useRef)(cb);
-    var throttledCb = (0, import_react26.useCallback)(import_lodash5.default.throttle(function() {
+    var cbRef = (0, import_react28.useRef)(cb);
+    var throttledCb = (0, import_react28.useCallback)(import_lodash5.default.throttle(function() {
         for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
             args[_key] = arguments[_key];
         }
@@ -1577,17 +1577,17 @@ var useThrottledEffect = function(cb, delay, additionalDeps) {
     }), [
         delay
     ]);
-    (0, import_react26.useEffect)(function() {
+    (0, import_react28.useEffect)(function() {
         cbRef.current = cb;
     });
-    (0, import_react26.useEffect)(throttledCb, [
+    (0, import_react28.useEffect)(throttledCb, [
         throttledCb
     ].concat(_to_consumable_array(additionalDeps)));
 };
 // src/hooks/misc/useInfiniteScroll/index.tsx
 var useInfiniteScroll = function(param) {
     var isFetchingNextPage = param.isFetchingNextPage, hasNextPage = param.hasNextPage, fetchNextPage = param.fetchNextPage;
-    var containerRef = (0, import_react27.useRef)(null);
+    var containerRef = (0, import_react29.useRef)(null);
     var _ref = (0, import_react_intersection_observer.useInView)({
         root: containerRef.current,
         rootMargin: "0px",
@@ -1612,9 +1612,8 @@ var useInfiniteScroll = function(param) {
     };
 };
 // src/hooks/runs/useManageRuns/index.tsx
-var import_sonner3 = require("sonner");
 var import_react_query6 = require("@tanstack/react-query");
-var import_react28 = require("react");
+var import_react30 = require("react");
 // src/hooks/runs/useCreateRun/index.ts
 var import_radash4 = require("radash");
 var import_react_query5 = require("@tanstack/react-query");
@@ -1863,6 +1862,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 = (0, import_react_query5.useQueryClient)();
     var superinterfaceContext = useSuperinterfaceContext();
     var threadContext = useSuperinterfaceContext();
@@ -1875,7 +1877,8 @@ var useCreateRun = function() {
         }),
         onMutate: onMutate({
             queryClient: queryClient
-        })
+        }),
+        onError: onError
     }, mutationOptions({
         mutationKeyBase: [
             "createRun"
@@ -1897,13 +1900,21 @@ var isOptimistic = function(param) {
 };
 // src/hooks/runs/useManageRuns/index.tsx
 var useManageRuns = function() {
+    var addToast = useToasts().addToast;
     var queryClient = (0, import_react_query6.useQueryClient)();
     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 _ref = _sliced_to_array((0, import_react28.useState)([]), 2), toastedErrorRunIds = _ref[0], setToastedErrorRunIds = _ref[1];
-    (0, import_react28.useEffect)(function() {
+    var _ref = _sliced_to_array((0, import_react30.useState)([]), 2), toastedErrorRunIds = _ref[0], setToastedErrorRunIds = _ref[1];
+    (0, import_react30.useEffect)(function() {
         var _latestRunProps_latestRun;
         if (((_latestRunProps_latestRun = latestRunProps.latestRun) === null || _latestRunProps_latestRun === void 0 ? void 0 : _latestRunProps_latestRun.status) !== "failed") return;
         if (toastedErrorRunIds.includes(latestRunProps.latestRun.id)) return;
@@ -1912,12 +1923,16 @@ var useManageRuns = function() {
                 latestRunProps.latestRun.id
             ]);
         });
-        import_sonner3.toast.error("AI run failed. Please try again.");
+        addToast({
+            type: "error",
+            message: "AI run failed. Please try again."
+        });
     }, [
         latestRunProps,
-        toastedErrorRunIds
+        toastedErrorRunIds,
+        addToast
     ]);
-    (0, import_react28.useEffect)(function() {
+    (0, import_react30.useEffect)(function() {
         if (createRunProps.isPending) return;
         if (latestRunProps.isFetching) return;
         if (latestMessageProps.isFetching) return;
@@ -2021,7 +2036,7 @@ var usePolling = function() {
 };
 // src/hooks/actions/useManageActions/index.tsx
 var import_react_query9 = require("@tanstack/react-query");
-var import_react29 = require("react");
+var import_react31 = require("react");
 // src/hooks/actions/useHandleAction/index.tsx
 var import_radash5 = require("radash");
 var import_react_query8 = require("@tanstack/react-query");
@@ -2094,7 +2109,7 @@ var useManageActions = function() {
     var threadContext = useSuperinterfaceContext();
     var latestRunProps = useLatestRun();
     var handleActionProps = useHandleAction();
-    (0, import_react29.useEffect)(function() {
+    (0, import_react31.useEffect)(function() {
         if (handleActionProps.isPending) return;
         if (latestRunProps.isFetching) return;
         if (!latestRunProps.latestRun) return;
@@ -2195,16 +2210,16 @@ var import_themes33 = require("@radix-ui/themes");
 var import_react_icons5 = require("@radix-ui/react-icons");
 var import_themes31 = require("@radix-ui/themes");
 // src/hooks/messages/useMessageFormContext/index.ts
-var import_react31 = require("react");
+var import_react33 = require("react");
 // src/contexts/messages/MessageFormContext/index.ts
-var import_react30 = require("react");
-var MessageFormContext = (0, import_react30.createContext)({
+var import_react32 = require("react");
+var MessageFormContext = (0, import_react32.createContext)({
     isDisabled: false,
     isLoading: false
 });
 // src/hooks/messages/useMessageFormContext/index.ts
 var useMessageFormContext = function() {
-    return (0, import_react31.useContext)(MessageFormContext);
+    return (0, import_react33.useContext)(MessageFormContext);
 };
 // src/components/threads/Thread/MessageForm/Submit/index.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
@@ -2221,7 +2236,7 @@ var Submit = function() {
     });
 };
 // src/components/threads/Thread/MessageForm/Root/index.tsx
-var import_react32 = require("react");
+var import_react34 = require("react");
 var import_react_hook_form = require("react-hook-form");
 // src/hooks/messages/useCreateMessage/index.ts
 var import_radash8 = require("radash");
@@ -2369,6 +2384,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 = (0, import_react_query10.useQueryClient)();
     var superinterfaceContext = useSuperinterfaceContext();
     var threadContext = useSuperinterfaceContext();
@@ -2378,7 +2396,8 @@ var useCreateMessage = function() {
         }),
         onSettled: onSettled3({
             queryClient: queryClient
-        })
+        }),
+        onError: onError
     }, mutationOptions({
         mutationKeyBase: [
             "createMessage"
@@ -2408,13 +2427,21 @@ var Root2 = function(param) {
     var formProps = (0, import_react_hook_form.useForm)(formOptions);
     var handleSubmit = formProps.handleSubmit, isSubmitting = formProps.formState.isSubmitting, reset = formProps.reset;
     var _useIsRunActive = useIsRunActive(), isRunActive2 = _useIsRunActive.isRunActive;
-    var isLoading = (0, import_react32.useMemo)(function() {
+    var isLoading = (0, import_react34.useMemo)(function() {
         return isRunActive2 || isSubmitting;
     }, [
         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) {
@@ -2440,7 +2467,7 @@ var Root2 = function(param) {
         };
     }();
     var latestMessage = useLatestMessage().latestMessage;
-    var isDisabled = (0, import_react32.useMemo)(function() {
+    var isDisabled = (0, import_react34.useMemo)(function() {
         var // @ts-ignore-next-line
         _latestMessage_metadata;
         return latestMessage === null || latestMessage === void 0 ? void 0 : (_latestMessage_metadata = latestMessage.metadata) === null || _latestMessage_metadata === void 0 ? void 0 : _latestMessage_metadata.isBlocking;
@@ -2463,13 +2490,13 @@ var Root2 = function(param) {
 };
 // src/components/threads/Thread/MessageForm/Field/index.tsx
 var import_react_use2 = require("react-use");
-var import_react34 = require("react");
+var import_react36 = require("react");
 // src/components/textareas/TextareaBase/index.tsx
-var import_react33 = require("react");
+var import_react35 = require("react");
 var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"), 1);
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var UPSCALE_RATIO = 16 / 14;
-var TextareaBase = (0, import_react33.forwardRef)(function TextareaBase2(props, ref) {
+var TextareaBase = (0, import_react35.forwardRef)(function TextareaBase2(props, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, {
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("style", {
@@ -2531,19 +2558,19 @@ var Root3 = function(param) {
     });
 };
 var Control = function() {
-    var assistantNameContext = (0, import_react34.useContext)(AssistantNameContext);
+    var assistantNameContext = (0, import_react36.useContext)(AssistantNameContext);
     var register = (0, import_react_hook_form2.useFormContext)().register;
     var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading;
-    var isSubmitDisabled = (0, import_react34.useMemo)(function() {
+    var isSubmitDisabled = (0, import_react36.useMemo)(function() {
         return isDisabled || isLoading;
     }, [
         isDisabled,
         isLoading
     ]);
     var isDisabledPrevious = (0, import_react_use2.usePrevious)(isDisabled);
-    var textareaRef = (0, import_react34.useRef)(null);
+    var textareaRef = (0, import_react36.useRef)(null);
     var textareaProps = register("content");
-    (0, import_react34.useEffect)(function() {
+    (0, import_react36.useEffect)(function() {
         if (isDisabled) return;
         if (!isDisabledPrevious) return;
         if (!textareaRef.current) return;
@@ -2608,11 +2635,11 @@ MessageForm.Submit = Submit;
 // src/components/threads/Thread/Root/index.tsx
 var import_themes34 = require("@radix-ui/themes");
 // src/components/runs/PollingProvider/index.tsx
-var import_react35 = require("react");
+var import_react37 = require("react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var PollingProvider = function(param) {
     var children = param.children;
-    var _ref = _sliced_to_array((0, import_react35.useState)(false), 2), isPollRefetching = _ref[0], setIsPollRefetching = _ref[1];
+    var _ref = _sliced_to_array((0, import_react37.useState)(false), 2), isPollRefetching = _ref[0], setIsPollRefetching = _ref[1];
     return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PollingContext.Provider, {
         value: {
             isPollRefetching: isPollRefetching,
@@ -2656,31 +2683,31 @@ Thread.Root = Root4;
 Thread.Messages = Messages;
 Thread.MessageForm = MessageForm;
 // src/hooks/messages/useMessageContext/index.ts
-var import_react36 = require("react");
+var import_react38 = require("react");
 var useMessageContext = function() {
-    return (0, import_react36.useContext)(MessageContext);
+    return (0, import_react38.useContext)(MessageContext);
 };
 // src/components/threads/ThreadDialog/Root/index.tsx
-var import_themes35 = require("@radix-ui/themes");
+var import_themes36 = require("@radix-ui/themes");
 // src/components/threads/ThreadDialog/Provider/index.tsx
-var import_react39 = require("react");
+var import_react41 = require("react");
 // src/contexts/threads/ThreadDialogContext/index.ts
-var import_react37 = require("react");
-var ThreadDialogContext = (0, import_react37.createContext)({
+var import_react39 = require("react");
+var ThreadDialogContext = (0, import_react39.createContext)({
     isOpen: false,
     setIsOpen: function() {}
 });
 // src/hooks/threads/useThreadDialogContext/index.ts
-var import_react38 = require("react");
+var import_react40 = require("react");
 var useThreadDialogContext = function() {
-    return (0, import_react38.useContext)(ThreadDialogContext);
+    return (0, import_react40.useContext)(ThreadDialogContext);
 };
 // src/components/threads/ThreadDialog/Provider/index.tsx
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var Provider3 = function(param) {
     var children = param.children;
     var threadDialogContext = useThreadDialogContext();
-    var _ref = _sliced_to_array((0, import_react39.useState)(threadDialogContext.isOpen), 2), isOpen = _ref[0], setIsOpen = _ref[1];
+    var _ref = _sliced_to_array((0, import_react41.useState)(threadDialogContext.isOpen), 2), isOpen = _ref[0], setIsOpen = _ref[1];
     return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ThreadDialogContext.Provider, {
         value: {
             isOpen: isOpen,
@@ -2689,33 +2716,117 @@ var Provider3 = function(param) {
         children: children
     });
 };
-// src/components/threads/ThreadDialog/Root/index.tsx
+// src/components/toasts/ToastsProvider/index.tsx
+var import_react42 = require("react");
+var Toast2 = __toESM(require("@radix-ui/react-toast"), 1);
+// src/components/toasts/ToastsProvider/CustomToast.tsx
+var Toast = __toESM(require("@radix-ui/react-toast"), 1);
+var import_themes35 = require("@radix-ui/themes");
+var import_react_icons6 = require("@radix-ui/react-icons");
 var import_jsx_runtime48 = require("react/jsx-runtime");
-var Root5 = function(param) {
+var CustomToast = function(param) {
+    var toast = param.toast;
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Toast.Root, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_themes35.Card, {
+            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Toast.Title, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_themes35.Flex, {
+                    children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_themes35.Flex, {
+                            pr: "2",
+                            height: "14px",
+                            align: "center",
+                            children: toast.type === "success" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react_icons6.CheckCircledIcon, {
+                                color: "var(--mint-9)"
+                            }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react_icons6.CrossCircledIcon, {
+                                color: "var(--red-9)"
+                            })
+                        }),
+                        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_themes35.Text, {
+                            weight: "medium",
+                            size: "1",
+                            children: toast.message
+                        })
+                    ]
+                })
+            })
+        })
+    });
+};
+// src/components/toasts/ToastsProvider/index.tsx
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var ToastsProvider = function(param) {
+    var children = param.children;
+    var _ref = _sliced_to_array((0, import_react42.useState)([]), 2), toasts = _ref[0], setToasts = _ref[1];
+    var addToast = (0, import_react42.useCallback)(function(toast) {
+        return setToasts(function(prevToasts) {
+            return _to_consumable_array(prevToasts).concat([
+                toast
+            ]);
+        });
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ToastsContext.Provider, {
+        value: {
+            toasts: toasts,
+            addToast: addToast
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Toast2.Provider, {
+            children: [
+                children,
+                Array.from(toasts).map(function(toast, index) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CustomToast, {
+                        toast: toast
+                    }, index);
+                }),
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(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
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var Root6 = function(param) {
     var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Provider3, {
-        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_themes35.Flex, {
-            direction: "column",
-            justify: "end",
-            align: "end",
-            position: "fixed",
-            style: _object_spread({
-                bottom: "24px",
-                right: "24px",
-                top: "24px",
-                zIndex: 9999999999
-            }, style),
-            children: children
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ToastsProvider, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Provider3, {
+            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_themes36.Flex, {
+                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
-var import_themes36 = require("@radix-ui/themes");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_themes37 = require("@radix-ui/themes");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var Trigger = function(param) {
     var children = param.children;
     var setIsOpen = useThreadDialogContext().setIsOpen;
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes36.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_themes37.Flex, {
         onClick: function() {
             return setIsOpen(function(prev) {
                 return !prev;
@@ -2727,24 +2838,24 @@ var Trigger = function(param) {
     });
 };
 // src/components/threads/ThreadDialog/Button/index.tsx
-var import_themes37 = require("@radix-ui/themes");
-var import_react_icons6 = require("@radix-ui/react-icons");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_themes38 = require("@radix-ui/themes");
+var import_react_icons7 = require("@radix-ui/react-icons");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var Button3 = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_themes37.IconButton, {
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_themes38.IconButton, {
         size: "4",
         radius: "full",
-        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_icons6.ChatBubbleIcon, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_icons7.ChatBubbleIcon, {})
     });
 };
 // src/components/threads/ThreadDialog/Content/index.tsx
-var import_themes38 = require("@radix-ui/themes");
-var import_jsx_runtime51 = require("react/jsx-runtime");
-var Root6 = function(param) {
+var import_themes39 = require("@radix-ui/themes");
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var Root7 = function(param) {
     var children = param.children;
     var isOpen = useThreadDialogContext().isOpen;
     if (!isOpen) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_themes38.Card, {
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_themes39.Card, {
         mb: "3",
         style: {
             display: "flex",
@@ -2753,7 +2864,7 @@ var Root6 = function(param) {
             maxWidth: "400px",
             maxHeight: "720px"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_themes38.Inset, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_themes39.Inset, {
             clip: "padding-box",
             side: "all",
             pb: "current",
@@ -2766,51 +2877,51 @@ var Root6 = function(param) {
     });
 };
 var Content4 = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Root6, {
-        children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Thread.Root, {
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Root7, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Thread.Root, {
             children: [
-                /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Thread.Messages, {
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Thread.Messages, {
                     style: {
                         paddingTop: "var(--space-5)",
                         paddingRight: "var(--space-5)",
                         paddingLeft: "var(--space-5)"
                     }
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_themes38.Flex, {
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_themes39.Flex, {
                     direction: "column",
                     pl: "5",
                     pr: "5",
                     pb: "3",
                     flexShrink: "0",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Thread.MessageForm, {})
+                    children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Thread.MessageForm, {})
                 })
             ]
         })
     });
 };
-Content4.Root = Root6;
+Content4.Root = Root7;
 // src/components/threads/ThreadDialog/index.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var ThreadDialog = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Root5, {
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Root6, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Content4, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Trigger, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Button3, {})
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Content4, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Trigger, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Button3, {})
             })
         ]
     });
 };
-ThreadDialog.Root = Root5;
+ThreadDialog.Root = Root6;
 ThreadDialog.Trigger = Trigger;
 ThreadDialog.Button = Button3;
 ThreadDialog.Content = Content4;
 // src/components/threads/AudioThread/Root/index.tsx
 var import_runtime = require("regenerator-runtime/runtime");
-var import_themes39 = require("@radix-ui/themes");
+var import_themes40 = require("@radix-ui/themes");
 // src/contexts/threads/AudioThreadContext/index.ts
-var import_react40 = require("react");
-var AudioThreadContext = (0, import_react40.createContext)({
+var import_react43 = require("react");
+var AudioThreadContext = (0, import_react43.createContext)({
     status: "idle",
     recorderProps: {
         status: "idle",
@@ -2878,11 +2989,11 @@ var blobToData = function(blob) {
     });
 };
 // src/hooks/audioThreads/useStatus/index.ts
-var import_react41 = require("react");
+var import_react44 = require("react");
 var useStatus = function(param) {
     var messageAudioProps = param.messageAudioProps, recorderProps = param.recorderProps, createMessageProps = param.createMessageProps;
     var isRunActiveProps = useIsRunActive();
-    var status = (0, import_react41.useMemo)(function() {
+    var status = (0, import_react44.useMemo)(function() {
         if (recorderProps.status === "recording") return "recording";
         if (createMessageProps.isPending) return "creatingMessage";
         if (isRunActiveProps.isRunActive) return "runActive";
@@ -2905,19 +3016,19 @@ var useStatus = function(param) {
 // src/hooks/audioThreads/useRecorder/index.ts
 var import_dayjs = __toESM(require("dayjs"), 1);
 var import_use_audio_capture = require("use-audio-capture");
-var import_react42 = require("react");
+var import_react45 = require("react");
 var import_react_use_audio_player = require("react-use-audio-player");
 var import_react_use3 = require("react-use");
 var useRecorder = function(param) {
     var isStopOnSilence = param.isStopOnSilence, onStart = param.onStart, onStop = param.onStop;
-    var _ref = _sliced_to_array((0, import_react42.useState)(null), 2), silenceStart = _ref[0], setSilenceStart = _ref[1];
-    var _ref1 = _sliced_to_array((0, import_react42.useState)(null), 2), noiseStart = _ref1[0], setNoiseStart = _ref1[1];
-    var _ref2 = _sliced_to_array((0, import_react42.useState)(null), 2), mediaStream = _ref2[0], setMediaStream = _ref2[1];
-    var _ref3 = _sliced_to_array((0, import_react42.useState)("idle"), 2), status = _ref3[0], setStatus = _ref3[1];
+    var _ref = _sliced_to_array((0, import_react45.useState)(null), 2), silenceStart = _ref[0], setSilenceStart = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react45.useState)(null), 2), noiseStart = _ref1[0], setNoiseStart = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react45.useState)(null), 2), mediaStream = _ref2[0], setMediaStream = _ref2[1];
+    var _ref3 = _sliced_to_array((0, import_react45.useState)("idle"), 2), status = _ref3[0], setStatus = _ref3[1];
     var startAudioPlayer = (0, import_react_use_audio_player.useAudioPlayer)();
     var endAudioPlayer = (0, import_react_use_audio_player.useAudioPlayer)();
-    var _ref4 = _sliced_to_array((0, import_react42.useState)(false), 2), isLoaded = _ref4[0], setIsLoaded = _ref4[1];
-    (0, import_react42.useEffect)(function() {
+    var _ref4 = _sliced_to_array((0, import_react45.useState)(false), 2), isLoaded = _ref4[0], setIsLoaded = _ref4[1];
+    (0, import_react45.useEffect)(function() {
         if (isLoaded) return;
         setIsLoaded(true);
     }, [
@@ -2975,9 +3086,9 @@ var useRecorder = function(param) {
             setNoiseStart(null);
         }
     });
-    var _ref5 = _sliced_to_array((0, import_react42.useState)(null), 2), audioEngine = _ref5[0], setAudioEngine = _ref5[1];
-    var isInited = (0, import_react42.useRef)(false);
-    (0, import_react42.useEffect)(function() {
+    var _ref5 = _sliced_to_array((0, import_react45.useState)(null), 2), audioEngine = _ref5[0], setAudioEngine = _ref5[1];
+    var isInited = (0, import_react45.useRef)(false);
+    (0, import_react45.useEffect)(function() {
         if (!mediaStream) return;
         if (isInited.current) return;
         isInited.current = true;
@@ -2990,7 +3101,7 @@ var useRecorder = function(param) {
         isInited,
         mediaStream
     ]);
-    var visualizationAnalyser = (0, import_react42.useMemo)(function() {
+    var visualizationAnalyser = (0, import_react45.useMemo)(function() {
         if (!audioEngine) return null;
         var result = audioEngine.audioContext.createAnalyser();
         audioEngine.source.connect(result);
@@ -2998,7 +3109,7 @@ var useRecorder = function(param) {
     }, [
         audioEngine
     ]);
-    var silenceAnalyser = (0, import_react42.useMemo)(function() {
+    var silenceAnalyser = (0, import_react45.useMemo)(function() {
         if (!audioEngine) return null;
         var result = audioEngine.audioContext.createAnalyser();
         result.minDecibels = -45;
@@ -3007,7 +3118,7 @@ var useRecorder = function(param) {
     }, [
         audioEngine
     ]);
-    var handleSilence = (0, import_react42.useCallback)(function() {
+    var handleSilence = (0, import_react45.useCallback)(function() {
         if (!silenceAnalyser) return;
         var frequencyData = new Uint8Array(silenceAnalyser.frequencyBinCount);
         silenceAnalyser.getByteFrequencyData(frequencyData);
@@ -3030,7 +3141,7 @@ var useRecorder = function(param) {
         setNoiseStart,
         setSilenceStart
     ]);
-    (0, import_react42.useEffect)(function() {
+    (0, import_react45.useEffect)(function() {
         if (!isStopOnSilence) return;
         requestAnimationFrame(function() {
             return handleSilence();
@@ -3053,7 +3164,7 @@ var useRecorder = function(param) {
     });
 };
 // src/hooks/audioThreads/useMessageAudio/index.ts
-var import_react43 = require("react");
+var import_react46 = require("react");
 var import_howler = require("howler");
 var import_react_use_audio_player2 = require("react-use-audio-player");
 // src/hooks/audioThreads/useMessageAudio/lib/input.ts
@@ -3079,11 +3190,11 @@ var isHtmlAudioSupported = !unsupportedNames.includes(((_this = (0, import_detec
 // src/hooks/audioThreads/useMessageAudio/index.ts
 var useMessageAudio = function(param) {
     var onEnd = param.onEnd;
-    var _ref = _sliced_to_array((0, import_react43.useState)([]), 2), playedMessageIds = _ref[0], setPlayedMessageIds = _ref[1];
+    var _ref = _sliced_to_array((0, import_react46.useState)([]), 2), playedMessageIds = _ref[0], setPlayedMessageIds = _ref[1];
     var audioPlayer = (0, import_react_use_audio_player2.useAudioPlayer)();
     var superinterfaceContext = useSuperinterfaceContext();
     var latestMessageProps = useLatestMessage();
-    (0, import_react43.useEffect)(function() {
+    (0, import_react46.useEffect)(function() {
         if (audioPlayer.playing) return;
         if (!latestMessageProps.latestMessage) return;
         if (latestMessageProps.latestMessage.role !== "assistant") return;
@@ -3117,9 +3228,9 @@ var useMessageAudio = function(param) {
         playedMessageIds,
         onEnd
     ]);
-    var isInited = (0, import_react43.useRef)(false);
-    var _ref1 = _sliced_to_array((0, import_react43.useState)(null), 2), audioEngine = _ref1[0], setAudioEngine = _ref1[1];
-    (0, import_react43.useEffect)(function() {
+    var isInited = (0, import_react46.useRef)(false);
+    var _ref1 = _sliced_to_array((0, import_react46.useState)(null), 2), audioEngine = _ref1[0], setAudioEngine = _ref1[1];
+    (0, import_react46.useEffect)(function() {
         if (!audioPlayer.playing) return;
         if (isInited.current) return;
         isInited.current = true;
@@ -3140,7 +3251,7 @@ var useMessageAudio = function(param) {
         audioPlayer,
         isInited
     ]);
-    var visualizationAnalyser = (0, import_react43.useMemo)(function() {
+    var visualizationAnalyser = (0, import_react46.useMemo)(function() {
         if (!audioEngine) return null;
         var result = audioEngine.audioContext.createAnalyser();
         audioEngine.source.connect(audioEngine.audioContext.destination);
@@ -3154,8 +3265,8 @@ var useMessageAudio = function(param) {
     });
 };
 // src/components/threads/AudioThread/Root/index.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
-var Root7 = function(param) {
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var Root8 = function(param) {
     var children = param.children;
     useLifecycle();
     var createMessageProps = useCreateMessage();
@@ -3214,13 +3325,13 @@ var Root7 = function(param) {
         createMessageProps: createMessageProps,
         messageAudioProps: messageAudioProps
     }).status;
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(AudioThreadContext.Provider, {
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(AudioThreadContext.Provider, {
         value: {
             status: status,
             recorderProps: recorderProps,
             messageAudioProps: messageAudioProps
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_themes39.Flex, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_themes40.Flex, {
             direction: "column",
             flexGrow: "1",
             p: "5",
@@ -3229,23 +3340,23 @@ var Root7 = function(param) {
     });
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
-var import_themes40 = require("@radix-ui/themes");
+var import_themes41 = require("@radix-ui/themes");
 // src/hooks/threads/useAudioThreadContext/index.ts
-var import_react44 = require("react");
+var import_react47 = require("react");
 var useAudioThreadContext = function() {
-    return (0, import_react44.useContext)(AudioThreadContext);
+    return (0, import_react47.useContext)(AudioThreadContext);
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var Visualization = function() {
     var audioThreadContext = useAudioThreadContext();
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_themes40.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_themes41.Flex, {
         direction: "column",
         align: "center",
         justify: "center",
         mb: "3",
         flexGrow: "1",
-        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_themes40.Flex, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_themes41.Flex, {
             align: "center",
             justify: "center",
             height: "200px",
@@ -3258,23 +3369,23 @@ var Visualization = function() {
     });
 };
 // src/components/threads/AudioThread/Form/index.tsx
-var import_react_icons8 = require("@radix-ui/react-icons");
-var import_themes43 = require("@radix-ui/themes");
+var import_react_icons9 = require("@radix-ui/react-icons");
+var import_themes44 = require("@radix-ui/themes");
 // src/components/threads/AudioThread/Form/Visualizer/index.tsx
 var import_lodash7 = __toESM(require("lodash"), 1);
-var import_themes41 = require("@radix-ui/themes");
-var import_react45 = require("react");
+var import_themes42 = require("@radix-ui/themes");
+var import_react48 = require("react");
 var import_radash10 = require("radash");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var barCount = 4;
 var Visualizer = function() {
     var audioThreadContext = useAudioThreadContext();
     var visualizationAnalyser = audioThreadContext.recorderProps.visualizationAnalyser;
-    var _ref = _sliced_to_array((0, import_react45.useState)(function() {
+    var _ref = _sliced_to_array((0, import_react48.useState)(function() {
         return new AudioContext().createAnalyser();
     }), 1), emptyVisualizer = _ref[0];
-    var _ref1 = _sliced_to_array((0, import_react45.useState)([]), 2), barHeights = _ref1[0], setBarHeights = _ref1[1];
-    var draw = (0, import_react45.useCallback)(function(param) {
+    var _ref1 = _sliced_to_array((0, import_react48.useState)([]), 2), barHeights = _ref1[0], setBarHeights = _ref1[1];
+    var draw = (0, import_react48.useCallback)(function(param) {
         var visualizationAnalyser2 = param.visualizationAnalyser;
         var frequencyData = new Uint8Array(visualizationAnalyser2.frequencyBinCount / 15);
         visualizationAnalyser2.getByteFrequencyData(frequencyData);
@@ -3288,7 +3399,7 @@ var Visualizer = function() {
             });
         });
     }, []);
-    (0, import_react45.useEffect)(function() {
+    (0, import_react48.useEffect)(function() {
         draw({
             visualizationAnalyser: visualizationAnalyser || emptyVisualizer
         });
@@ -3297,7 +3408,7 @@ var Visualizer = function() {
         visualizationAnalyser,
         emptyVisualizer
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_themes41.Grid, {
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_themes42.Grid, {
         columns: "".concat(barCount),
         gap: "1",
         width: "auto",
@@ -3306,12 +3417,12 @@ var Visualizer = function() {
             gridTemplateColumns: "repeat(4, minmax(0, 1fr))"
         },
         children: barHeights.map(function(barHeight, index) {
-            return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_themes41.Flex, {
+            return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_themes42.Flex, {
                 direction: "column",
                 align: "center",
                 justify: "center",
                 height: "20px",
-                children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_themes41.Flex, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_themes42.Flex, {
                     minHeight: "50%",
                     maxHeight: "100%",
                     height: "".concat(barHeight + 20, "%"),
@@ -3326,31 +3437,31 @@ var Visualizer = function() {
     });
 };
 // src/components/threads/AudioThread/Form/ActionButton/index.tsx
-var import_themes42 = require("@radix-ui/themes");
-var import_react_icons7 = require("@radix-ui/react-icons");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_themes43 = require("@radix-ui/themes");
+var import_react_icons8 = require("@radix-ui/react-icons");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var ActionButton = function() {
     var audioThreadContext = useAudioThreadContext();
     if (audioThreadContext.status === "recording") {
-        return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_themes42.Flex, {
+        return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_themes43.Flex, {
             align: "center",
             children: [
-                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_themes42.Flex, {
+                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes43.Flex, {
                     mr: "3",
                     ml: "-7",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_themes42.IconButton, {
+                    children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes43.IconButton, {
                         onClick: audioThreadContext.recorderProps.pause,
                         color: "gray",
                         radius: "full",
                         size: "1",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_icons7.PauseIcon, {})
+                        children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_icons8.PauseIcon, {})
                     })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_themes42.Tooltip, {
+                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes43.Tooltip, {
                     open: true,
                     content: "Send your message",
                     side: "bottom",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_themes42.IconButton, {
+                    children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes43.IconButton, {
                         onClick: audioThreadContext.recorderProps.stop,
                         color: "gray",
                         highContrast: true,
@@ -3359,14 +3470,14 @@ var ActionButton = function() {
                         style: {
                             border: "2px solid var(--gray-8)"
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_icons7.ArrowUpIcon, {})
+                        children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_icons8.ArrowUpIcon, {})
                     })
                 })
             ]
         });
     }
     if (audioThreadContext.status === "recorderPaused") {
-        return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_themes42.IconButton, {
+        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes43.IconButton, {
             onClick: audioThreadContext.recorderProps.resume,
             color: "red",
             radius: "full",
@@ -3374,11 +3485,11 @@ var ActionButton = function() {
             style: {
                 border: "2px solid var(--gray-8)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_icons7.ResumeIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_icons8.ResumeIcon, {})
         });
     }
     if (audioThreadContext.status === "idle") {
-        return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_themes42.IconButton, {
+        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes43.IconButton, {
             onClick: function() {
                 return audioThreadContext.recorderProps.start();
             },
@@ -3391,7 +3502,7 @@ var ActionButton = function() {
         });
     }
     if (audioThreadContext.status === "playing") {
-        return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_themes42.IconButton, {
+        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes43.IconButton, {
             onClick: function() {
                 return audioThreadContext.messageAudioProps.pause();
             },
@@ -3401,11 +3512,11 @@ var ActionButton = function() {
             style: {
                 border: "2px solid var(--gray-8)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_icons7.PauseIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_icons8.PauseIcon, {})
         });
     }
     if (audioThreadContext.status === "playerPaused") {
-        return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_themes42.IconButton, {
+        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes43.IconButton, {
             onClick: function() {
                 return audioThreadContext.messageAudioProps.play();
             },
@@ -3415,10 +3526,10 @@ var ActionButton = function() {
             style: {
                 border: "2px solid var(--gray-8)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_icons7.ResumeIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_icons8.ResumeIcon, {})
         });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_themes42.IconButton, {
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes43.IconButton, {
         size: "4",
         color: "red",
         radius: "full",
@@ -3429,88 +3540,88 @@ var ActionButton = function() {
     });
 };
 // src/components/threads/AudioThread/Form/index.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var Form = function() {
     var audioThreadContext = useAudioThreadContext();
-    return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_themes43.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_themes44.Flex, {
         direction: "column",
         align: "center",
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_themes43.Flex, {
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_themes44.Flex, {
                 pb: "3",
                 align: "center",
                 children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_themes43.Flex, {
+                    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_themes44.Flex, {
                         ml: "-5",
                         mr: "2",
                         align: "center",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_icons8.SpeakerModerateIcon, {
+                        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_icons9.SpeakerModerateIcon, {
                             style: {
                                 color: "var(--".concat(audioThreadContext.status === "recording" ? "mint" : "gray", "-12)")
                             }
                         })
                     }),
-                    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_themes43.Flex, {
+                    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_themes44.Flex, {
                         px: "2",
                         py: "1",
                         style: {
                             backgroundColor: "var(--".concat(audioThreadContext.status === "recording" ? "mint" : "gray", "-4)"),
                             borderRadius: "var(--radius-6)"
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Visualizer, {})
+                        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Visualizer, {})
                     })
                 ]
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ActionButton, {})
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ActionButton, {})
         ]
     });
 };
 // src/components/threads/AudioThread/index.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var AudioThread = function(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Root7, _object_spread_props(_object_spread({}, props), {
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Root8, _object_spread_props(_object_spread({}, props), {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Visualization, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Form, {})
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Visualization, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Form, {})
         ]
     }));
 };
-AudioThread.Root = Root7;
+AudioThread.Root = Root8;
 AudioThread.Visualization = Visualization;
 AudioThread.Form = Form;
 // src/components/threads/AudioThreadDialog/index.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var AudioThreadDialog = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Root5, {
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Root6, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Content4.Root, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(AudioThread, {})
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Content4.Root, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(AudioThread, {})
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Trigger, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button3, {})
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Trigger, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Button3, {})
             })
         ]
     });
 };
-AudioThreadDialog.Root = Root5;
+AudioThreadDialog.Root = Root6;
 AudioThreadDialog.Trigger = Trigger;
 AudioThreadDialog.Button = Button3;
 AudioThreadDialog.Content = Content4;
 // src/components/suggestions/Suggestions/index.tsx
-var import_react47 = require("react");
+var import_react50 = require("react");
 // src/components/suggestions/Suggestions/Content.tsx
-var import_react46 = require("react");
+var import_react49 = require("react");
 var import_radash11 = require("radash");
 var import_react_children_utilities = require("react-children-utilities");
-var import_themes45 = require("@radix-ui/themes");
+var import_themes46 = require("@radix-ui/themes");
 // src/components/suggestions/Suggestions/Item.tsx
-var import_react_icons9 = require("@radix-ui/react-icons");
-var import_themes44 = require("@radix-ui/themes");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_react_icons10 = require("@radix-ui/react-icons");
+var import_themes45 = require("@radix-ui/themes");
+var import_jsx_runtime62 = require("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__ */ (0, import_jsx_runtime60.jsx)(Content5, {
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Content5, {
         onClick: function() {
             createMessage({
                 // @ts-ignore-next-line
@@ -3524,32 +3635,32 @@ var Item = function(param) {
 };
 var Content5 = function(param) {
     var onClick = param.onClick, isDisabled = param.isDisabled, isPending = param.isPending, children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_themes44.Button, {
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_themes45.Button, {
         variant: "soft",
         onClick: onClick,
         disabled: isDisabled,
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_themes44.Text, {
+            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_themes45.Text, {
                 size: "1",
                 weight: "regular",
                 children: children
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_themes44.Spinner, {
+            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_themes45.Spinner, {
                 loading: isPending,
-                children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_icons9.ArrowUpIcon, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react_icons10.ArrowUpIcon, {})
             })
         ]
     });
 };
 Item.Content = Content5;
 // src/components/suggestions/Suggestions/Content.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var Content6 = function(param) {
     var children = param.children;
     var messageContext = useMessageContext();
     var latestMessageProps = useLatestMessage();
     var isRunActiveProps = useIsRunActive();
-    var suggestions = (0, import_react46.useMemo)(function() {
+    var suggestions = (0, import_react49.useMemo)(function() {
         return (0, import_react_children_utilities.onlyText)(children).split(/\r?\n/).filter(function(c) {
             return !(0, import_radash11.isEmpty)(c);
         }).map(function(c) {
@@ -3558,7 +3669,7 @@ var Content6 = function(param) {
     }, [
         children
     ]);
-    var isDisabled = (0, import_react46.useMemo)(function() {
+    var isDisabled = (0, import_react49.useMemo)(function() {
         var _messageContext_message;
         return ((_messageContext_message = messageContext.message) === null || _messageContext_message === void 0 ? void 0 : _messageContext_message.id) !== latestMessageProps.latestMessage.id || isRunActiveProps.isRunActive;
     }, [
@@ -3567,12 +3678,12 @@ var Content6 = function(param) {
         isRunActiveProps
     ]);
     if ((0, import_radash11.isEmpty)(suggestions)) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_themes45.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_themes46.Flex, {
         gap: "2",
         py: "2",
         wrap: "wrap",
         children: suggestions.map(function(suggestion) {
-            return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Item, {
+            return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Item, {
                 suggestion: suggestion,
                 isDisabled: isDisabled
             }, suggestion);
@@ -3580,11 +3691,11 @@ var Content6 = function(param) {
     });
 };
 // src/components/suggestions/Suggestions/index.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var Suggestions = function(param) {
     var children = param.children;
     var latestMessageProps = useLatestMessage();
-    var isDisabled = (0, import_react47.useMemo)(function() {
+    var isDisabled = (0, import_react50.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;
@@ -3593,26 +3704,26 @@ var Suggestions = function(param) {
     ]);
     if (latestMessageProps.isLoading) return null;
     if (isDisabled) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Content6, {
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Content6, {
         children: children
     });
 };
 Suggestions.Item = Item;
 // src/components/markdown/MarkdownProvider/index.tsx
-var import_react48 = require("react");
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_react51 = require("react");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var MarkdownProvider = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
     ]);
     var prevMarkdownContext = useMarkdownContext();
-    var value = (0, import_react48.useMemo)(function() {
+    var value = (0, import_react51.useMemo)(function() {
         return merge(prevMarkdownContext, rest);
     }, [
         rest,
         prevMarkdownContext
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(MarkdownContext.Provider, {
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(MarkdownContext.Provider, {
         value: value,
         children: children
     });