@superinterface/react 2.10.0 → 2.11.0

package/dist/index.cjs

@@ -391,6 +391,8 @@ __export(src_exports, {
     }
 });
 module.exports = __toCommonJS(src_exports);
+// src/components/core/SuperinterfaceProvider/index.tsx
+var import_react3 = require("react");
 // src/lib/misc/merge/index.ts
 var import_lodash2 = __toESM(require("lodash"), 1);
 // src/lib/misc/merge/customizer.ts
@@ -451,7 +453,10 @@ var SuperinterfaceContext = (0, import_react.createContext)({
         queries: {},
         mutations: {}
     },
-    threadIdCookieOptions: options
+    threadIdCookieOptions: options,
+    createMessageAbortControllerRef: {
+        current: null
+    }
 });
 // src/hooks/core/useSuperinterfaceContext/index.ts
 var import_react2 = require("react");
@@ -463,7 +468,8 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var SuperinterfaceProvider = function(param) {
     var children = param.children, baseUrl2 = param.baseUrl, variables = param.variables, defaultOptions = param.defaultOptions, threadIdCookieOptions = param.threadIdCookieOptions;
     var superinterfaceContext = useSuperinterfaceContext();
-    var value = merge(superinterfaceContext, _object_spread({}, baseUrl2 ? {
+    var createMessageAbortControllerRef = (0, import_react3.useRef)(null);
+    var value = merge(superinterfaceContext, _object_spread_props(_object_spread({}, baseUrl2 ? {
         baseUrl: baseUrl2
     } : {}, variables ? {
         variables: variables
@@ -471,7 +477,9 @@ var SuperinterfaceProvider = function(param) {
         defaultOptions: defaultOptions
     } : {}, threadIdCookieOptions ? {
         threadIdCookieOptions: threadIdCookieOptions
-    } : {}));
+    } : {}), {
+        createMessageAbortControllerRef: createMessageAbortControllerRef
+    }));
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SuperinterfaceContext.Provider, {
         value: value,
         children: children
@@ -480,9 +488,9 @@ var SuperinterfaceProvider = function(param) {
 // src/components/threads/Thread/Messages/index.tsx
 var import_themes30 = require("@radix-ui/themes");
 // src/components/threads/Thread/Messages/Content/index.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 // src/hooks/messages/useMessages/index.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_react_query2 = require("@tanstack/react-query");
 // src/lib/threads/queryOptions/index.ts
 var import_react_query = require("@tanstack/react-query");
@@ -610,7 +618,7 @@ var useMessages = function() {
         threadContext: threadContext,
         superinterfaceContext: superinterfaceContext
     }));
-    return (0, import_react3.useMemo)(function() {
+    return (0, import_react4.useMemo)(function() {
         return _object_spread_props(_object_spread({}, props), {
             // @ts-ignore-next-line
             messages: messages({
@@ -622,7 +630,7 @@ var useMessages = function() {
     ]);
 };
 // src/hooks/messageGroups/useMessageGroups/index.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 // src/hooks/messageGroups/useMessageGroups/lib/messageGroups/index.ts
 var import_lodash3 = __toESM(require("lodash"), 1);
 var import_radash2 = require("radash");
@@ -684,7 +692,7 @@ var messageGroups = function(param) {
 // src/hooks/messageGroups/useMessageGroups/index.ts
 var useMessageGroups = function(param) {
     var messages2 = param.messages;
-    return (0, import_react4.useMemo)(function() {
+    return (0, import_react5.useMemo)(function() {
         return {
             messageGroups: messageGroups({
                 messages: messages2
@@ -695,13 +703,13 @@ var useMessageGroups = function(param) {
     ]);
 };
 // src/components/skeletons/MessagesSkeleton/index.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_themes3 = require("@radix-ui/themes");
 // src/components/messageGroups/MessageGroupBase/index.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_themes = require("@radix-ui/themes");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var MessageGroupBase = (0, import_react5.forwardRef)(function MessageGroupBase2(param, ref) {
+var MessageGroupBase = (0, import_react6.forwardRef)(function MessageGroupBase2(param, ref) {
     var children = param.children;
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes.Container, {
         ref: ref,
@@ -731,7 +739,7 @@ var Name = function(param) {
 };
 // src/components/skeletons/MessagesSkeleton/index.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var MessagesSkeleton = (0, import_react6.forwardRef)(function MessagesSkeleton2(_props, ref) {
+var MessagesSkeleton = (0, import_react7.forwardRef)(function MessagesSkeleton2(_props, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(MessageGroupBase, {
         ref: ref,
         children: [
@@ -779,37 +787,37 @@ var MessagesSkeleton = (0, import_react6.forwardRef)(function MessagesSkeleton2(
     });
 });
 // src/hooks/toasts/useToasts/index.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 // src/contexts/toasts/ToastsContext/index.ts
-var import_react7 = require("react");
-var ToastsContext = (0, import_react7.createContext)({
+var import_react8 = require("react");
+var ToastsContext = (0, import_react8.createContext)({
     toasts: [],
     addToast: function() {}
 });
 // src/hooks/toasts/useToasts/index.ts
 var useToasts = function() {
-    return (0, import_react8.useContext)(ToastsContext);
+    return (0, import_react9.useContext)(ToastsContext);
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 var import_themes27 = require("@radix-ui/themes");
 var import_react_icons4 = require("@radix-ui/react-icons");
 // src/components/messageGroups/MessageGroupBase/AssistantAvatar.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_themes5 = require("@radix-ui/themes");
 // src/contexts/assistants/AssistantAvatarContext/index.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_themes4 = require("@radix-ui/themes");
 var import_react_icons = require("@radix-ui/react-icons");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var AssistantAvatarContext = (0, import_react9.createContext)(/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_themes4.Avatar, {
+var AssistantAvatarContext = (0, import_react10.createContext)(/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_themes4.Avatar, {
     fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_icons.LightningBoltIcon, {}),
     size: "1"
 }));
 // src/components/messageGroups/MessageGroupBase/AssistantAvatar.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var AssistantAvatar = function() {
-    var AssistantAvatarContextValue = (0, import_react10.useContext)(AssistantAvatarContext);
+    var AssistantAvatarContextValue = (0, import_react11.useContext)(AssistantAvatarContext);
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_themes5.Flex, {
         flexShrink: "0",
         height: "24px",
@@ -822,12 +830,12 @@ var AssistantAvatar = function() {
     });
 };
 // src/contexts/assistants/AssistantNameContext/index.tsx
-var import_react11 = require("react");
-var AssistantNameContext = (0, import_react11.createContext)("Assistant");
+var import_react12 = require("react");
+var AssistantNameContext = (0, import_react12.createContext)("Assistant");
 // src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
 var import_themes26 = require("@radix-ui/themes");
 // src/components/threads/Thread/Message/index.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 var import_themes25 = require("@radix-ui/themes");
 // src/components/skeletons/StartingContentSkeleton/index.tsx
 var import_themes6 = require("@radix-ui/themes");
@@ -851,10 +859,10 @@ var import_themes14 = require("@radix-ui/themes");
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx
 var import_themes12 = require("@radix-ui/themes");
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/index.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 // src/contexts/functions/FunctionComponentsContext/index.tsx
-var import_react12 = require("react");
-var FunctionComponentsContext = (0, import_react12.createContext)({});
+var import_react13 = require("react");
+var FunctionComponentsContext = (0, import_react13.createContext)({});
 // src/components/functions/FunctionBase/index.tsx
 var import_themes10 = require("@radix-ui/themes");
 // src/components/toolCalls/ToolCallBase/index.tsx
@@ -902,12 +910,12 @@ var Icon = function(param) {
     }
 };
 // src/components/functions/FunctionBase/Content.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_themes9 = require("@radix-ui/themes");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Content = function(param) {
     var fn = param.fn;
-    var args = (0, import_react13.useMemo)(function() {
+    var args = (0, import_react14.useMemo)(function() {
         var result = null;
         try {
             result = JSON.parse(fn.arguments);
@@ -918,7 +926,7 @@ var Content = function(param) {
     }, [
         fn
     ]);
-    var output = (0, import_react13.useMemo)(function() {
+    var output = (0, import_react14.useMemo)(function() {
         if (!fn.output) {
             return null;
         }
@@ -1008,7 +1016,7 @@ var import_jsx_runtime14 = // @ts-ignore-next-line
 require("react/jsx-runtime");
 var Fn = function(param) {
     var fn = param.fn, runStep = param.runStep;
-    var functionComponentsContext = (0, import_react14.useContext)(FunctionComponentsContext);
+    var functionComponentsContext = (0, import_react15.useContext)(FunctionComponentsContext);
     var Component = functionComponentsContext[fn.name] || DefaultFunction;
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Component, {
         fn: fn,
@@ -1112,9 +1120,27 @@ var RunSteps = function(param) {
         })
     });
 };
+// src/hooks/messages/useIsMutatingMessage/index.ts
+var import_react16 = require("react");
+var import_react_query3 = require("@tanstack/react-query");
+var useIsMutatingMessage = function() {
+    var threadContext = useSuperinterfaceContext();
+    var mutatingMessagesCount = (0, import_react_query3.useIsMutating)({
+        mutationKey: [
+            "createMessage",
+            threadContext.variables
+        ]
+    });
+    var isMutatingMessage = (0, import_react16.useMemo)(function() {
+        return mutatingMessagesCount > 0;
+    }, [
+        mutatingMessagesCount
+    ]);
+    return isMutatingMessage;
+};
 // src/contexts/messages/MessageContext/index.ts
-var import_react15 = require("react");
-var MessageContext = (0, import_react15.createContext)({
+var import_react17 = require("react");
+var MessageContext = (0, import_react17.createContext)({
     message: null
 });
 // src/components/threads/Thread/Message/Provider.tsx
@@ -1122,9 +1148,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_react17 = require("react");
+var import_react19 = require("react");
 // src/contexts/markdown/MarkdownContext/index.ts
-var import_react16 = require("react");
+var import_react18 = require("react");
 // src/contexts/markdown/MarkdownContext/lib/components/Paragraph.tsx
 var import_themes16 = require("@radix-ui/themes");
 var import_jsx_runtime21 = require("react/jsx-runtime");
@@ -1254,7 +1280,7 @@ var components = {
     img: Img
 };
 // src/contexts/markdown/MarkdownContext/index.ts
-var MarkdownContext = (0, import_react16.createContext)({
+var MarkdownContext = (0, import_react18.createContext)({
     remarkPlugins: [],
     rehypeReactOptions: {
         components: components
@@ -1262,7 +1288,7 @@ var MarkdownContext = (0, import_react16.createContext)({
 });
 // src/hooks/markdown/useMarkdownContext/index.ts
 var useMarkdownContext = function() {
-    return (0, import_react17.useContext)(MarkdownContext);
+    return (0, import_react19.useContext)(MarkdownContext);
 };
 // src/components/threads/Thread/Message/TextContent.tsx
 var TextContent = function(param) {
@@ -1274,7 +1300,7 @@ var TextContent = function(param) {
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var Message = function(param) {
     var message = param.message;
-    var _ref = _sliced_to_array((0, import_react18.useMemo)(function() {
+    var _ref = _sliced_to_array((0, import_react20.useMemo)(function() {
         if (!message.runSteps.length) return [
             [],
             []
@@ -1306,7 +1332,9 @@ var Message = function(param) {
     }, [
         message
     ]), 2), olderRunSteps = _ref[0], laterRunSteps = _ref[1];
-    var isInProgress = (0, import_react18.useMemo)(function() {
+    var isMutatingMessage = useIsMutatingMessage();
+    var isInProgress = (0, import_react20.useMemo)(function() {
+        if (!isMutatingMessage) return false;
         if (message.status === "in_progress") return true;
         return message.runSteps.some(function(rs) {
             return rs.status === "in_progress";
@@ -1326,7 +1354,7 @@ var Message = function(param) {
                 /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_themes25.Box, {
                     children: [
                         message.content.map(function(content, index) {
-                            return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react18.Fragment, {
+                            return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react20.Fragment, {
                                 children: content.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TextContent, {
                                     content: content
                                 })
@@ -1359,7 +1387,7 @@ var Content2 = function(param) {
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var MessageGroup = function(param) {
     var messageGroup = param.messageGroup;
-    var assistantNameContext = (0, import_react19.useContext)(AssistantNameContext);
+    var assistantNameContext = (0, import_react21.useContext)(AssistantNameContext);
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(MessageGroupBase, {
         children: [
             messageGroup.role === "user" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_themes27.Avatar, {
@@ -1388,7 +1416,7 @@ var Content3 = function() {
     var _useMessageGroups = useMessageGroups({
         messages: messages2
     }), messageGroups2 = _useMessageGroups.messageGroups;
-    (0, import_react20.useEffect)(function() {
+    (0, import_react22.useEffect)(function() {
         if (isLoadingError) {
             addToast({
                 type: "error",
@@ -1411,14 +1439,14 @@ var Content3 = function() {
     });
 };
 // src/components/threads/Thread/Messages/Progress/index.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 // src/components/skeletons/StartingSkeleton/index.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 var import_themes28 = require("@radix-ui/themes");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var StartingSkeleton = function(param) {
     var children = param.children;
-    var assistantNameContext = (0, import_react21.useContext)(AssistantNameContext);
+    var assistantNameContext = (0, import_react23.useContext)(AssistantNameContext);
     return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(MessageGroupBase, {
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AssistantAvatar, {}),
@@ -1435,10 +1463,10 @@ var StartingSkeleton = function(param) {
     });
 };
 // src/hooks/messages/useLatestMessage/index.ts
-var import_react22 = require("react");
+var import_react24 = require("react");
 var useLatestMessage = function() {
     var props = useMessages();
-    return (0, import_react22.useMemo)(function() {
+    return (0, import_react24.useMemo)(function() {
         return _object_spread_props(_object_spread({}, props), {
             latestMessage: props.messages[0] || null
         });
@@ -1452,30 +1480,12 @@ var isOptimistic = function(param) {
     var id = param.id;
     return import_lodash4.default.startsWith(id, "-");
 };
-// src/hooks/messages/useIsMutatingMessage/index.ts
-var import_react23 = require("react");
-var import_react_query3 = require("@tanstack/react-query");
-var useIsMutatingMessage = function() {
-    var threadContext = useSuperinterfaceContext();
-    var mutatingMessagesCount = (0, import_react_query3.useIsMutating)({
-        mutationKey: [
-            "createMessage",
-            threadContext.variables
-        ]
-    });
-    var isMutatingMessage = (0, import_react23.useMemo)(function() {
-        return mutatingMessagesCount > 0;
-    }, [
-        mutatingMessagesCount
-    ]);
-    return isMutatingMessage;
-};
 // src/components/threads/Thread/Messages/Progress/index.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var Progress = function() {
     var latestMessage = useLatestMessage().latestMessage;
     var isMutatingMessage = useIsMutatingMessage();
-    var isVisible = (0, import_react24.useMemo)(function() {
+    var isVisible = (0, import_react25.useMemo)(function() {
         if (!latestMessage) return false;
         if (latestMessage.role !== "user") return false;
         if (latestMessage.status === "in_progress") return false;
@@ -1494,15 +1504,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_react26 = require("react");
+var import_react27 = 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_react25 = require("react");
+var import_react26 = require("react");
 var useThrottledEffect = function(cb, delay, additionalDeps) {
     var _cbRef;
-    var cbRef = (0, import_react25.useRef)(cb);
-    var throttledCb = (0, import_react25.useCallback)(import_lodash5.default.throttle(function() {
+    var cbRef = (0, import_react26.useRef)(cb);
+    var throttledCb = (0, import_react26.useCallback)(import_lodash5.default.throttle(function() {
         for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
             args[_key] = arguments[_key];
         }
@@ -1513,17 +1523,17 @@ var useThrottledEffect = function(cb, delay, additionalDeps) {
     }), [
         delay
     ]);
-    (0, import_react25.useEffect)(function() {
+    (0, import_react26.useEffect)(function() {
         cbRef.current = cb;
     });
-    (0, import_react25.useEffect)(throttledCb, [
+    (0, import_react26.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_react26.useRef)(null);
+    var containerRef = (0, import_react27.useRef)(null);
     var _ref = (0, import_react_intersection_observer.useInView)({
         root: containerRef.current,
         rootMargin: "0px",
@@ -1616,32 +1626,41 @@ var import_themes34 = 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_react28 = require("react");
+var import_react29 = require("react");
 // src/contexts/messages/MessageFormContext/index.ts
-var import_react27 = require("react");
-var MessageFormContext = (0, import_react27.createContext)({
+var import_react28 = require("react");
+var MessageFormContext = (0, import_react28.createContext)({
     isDisabled: false,
     isLoading: false
 });
 // src/hooks/messages/useMessageFormContext/index.ts
 var useMessageFormContext = function() {
-    return (0, import_react28.useContext)(MessageFormContext);
+    return (0, import_react29.useContext)(MessageFormContext);
 };
 // src/components/threads/Thread/MessageForm/Submit/index.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var Submit = function() {
+    var superinterfaceContext = useSuperinterfaceContext();
     var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading;
+    if (isLoading) {
+        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_themes31.IconButton, {
+            type: "button",
+            onClick: function() {
+                var _superinterfaceContext_createMessageAbortControllerRef_current;
+                return (_superinterfaceContext_createMessageAbortControllerRef_current = superinterfaceContext.createMessageAbortControllerRef.current) === null || _superinterfaceContext_createMessageAbortControllerRef_current === void 0 ? void 0 : _superinterfaceContext_createMessageAbortControllerRef_current.abort();
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_icons5.StopIcon, {})
+        });
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_themes31.IconButton, {
         type: "submit",
-        disabled: isDisabled || isLoading,
-        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_themes31.Spinner, {
-            loading: isLoading,
-            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_icons5.ArrowUpIcon, {})
-        })
+        disabled: isDisabled,
+        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_icons5.ArrowUpIcon, {})
     });
 };
 // src/components/threads/Thread/MessageForm/Root/index.tsx
-var import_react29 = require("react");
+var import_react_query5 = require("@tanstack/react-query");
+var import_react30 = require("react");
 var import_react_hook_form = require("react-hook-form");
 var import_themes32 = require("@radix-ui/themes");
 // src/hooks/messages/useCreateMessage/index.ts
@@ -2142,10 +2161,12 @@ var mutationFn = function(param) {
     var superinterfaceContext = param.superinterfaceContext, queryClient = param.queryClient, threadContext = param.threadContext;
     return function() {
         var _ref = _async_to_generator(function(variables) {
-            var response, parser, reader, messagesQueryKey, _ref, done, value;
+            var abortController, response, parser, reader, messagesQueryKey, _ref, done, value;
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
+                        abortController = new AbortController();
+                        superinterfaceContext.createMessageAbortControllerRef.current = abortController;
                         return [
                             4,
                             fetch("".concat(superinterfaceContext.baseUrl, "/messages"), {
@@ -2153,7 +2174,8 @@ var mutationFn = function(param) {
                                 body: JSON.stringify(body({
                                     variables: variables,
                                     superinterfaceContext: superinterfaceContext
-                                }))
+                                })),
+                                signal: abortController.signal
                             })
                         ];
                     case 1:
@@ -2193,7 +2215,6 @@ var mutationFn = function(param) {
                             value: value,
                             messagesQueryKey: messagesQueryKey,
                             queryClient: queryClient,
-                            variables: variables,
                             superinterfaceContext: superinterfaceContext
                         });
                         return [
@@ -2267,16 +2288,33 @@ 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 addToast = useToasts().addToast;
+    var queryClient = (0, import_react_query5.useQueryClient)();
+    var threadContext = useSuperinterfaceContext();
     var createMessage = useCreateMessage({
         onError: function(error) {
-            return addToast({
+            if (error.name === "AbortError") {
+                queryClient.invalidateQueries({
+                    queryKey: [
+                        "messages",
+                        threadContext.variables
+                    ]
+                });
+                queryClient.invalidateQueries({
+                    queryKey: [
+                        "runs",
+                        threadContext.variables
+                    ]
+                });
+                return;
+            }
+            addToast({
                 type: "error",
                 message: error.message
             });
         }
     }).createMessage;
     var isMutatingMessage = useIsMutatingMessage();
-    var isLoading = (0, import_react29.useMemo)(function() {
+    var isLoading = (0, import_react30.useMemo)(function() {
         return isMutatingMessage || isSubmitting;
     }, [
         isMutatingMessage,
@@ -2291,6 +2329,7 @@ var Root2 = function(param) {
                         return [
                             4,
                             createMessage({
+                                // @ts-ignore-next-line
                                 content: data2.content
                             })
                         ];
@@ -2307,7 +2346,7 @@ var Root2 = function(param) {
         };
     }();
     var latestMessage = useLatestMessage().latestMessage;
-    var isDisabled = (0, import_react29.useMemo)(function() {
+    var isDisabled = (0, import_react30.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;
@@ -2334,13 +2373,13 @@ var Root2 = function(param) {
 };
 // src/components/threads/Thread/MessageForm/Field/index.tsx
 var import_react_use = require("react-use");
-var import_react31 = require("react");
+var import_react32 = require("react");
 // src/components/textareas/TextareaBase/index.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"), 1);
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var UPSCALE_RATIO = 16 / 14;
-var TextareaBase = (0, import_react30.forwardRef)(function TextareaBase2(props, ref) {
+var TextareaBase = (0, import_react31.forwardRef)(function TextareaBase2(props, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, {
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("style", {
@@ -2402,19 +2441,19 @@ var Root3 = function(param) {
     });
 };
 var Control = function() {
-    var assistantNameContext = (0, import_react31.useContext)(AssistantNameContext);
+    var assistantNameContext = (0, import_react32.useContext)(AssistantNameContext);
     var register = (0, import_react_hook_form2.useFormContext)().register;
     var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading;
-    var isSubmitDisabled = (0, import_react31.useMemo)(function() {
+    var isSubmitDisabled = (0, import_react32.useMemo)(function() {
         return isDisabled || isLoading;
     }, [
         isDisabled,
         isLoading
     ]);
     var isDisabledPrevious = (0, import_react_use.usePrevious)(isDisabled);
-    var textareaRef = (0, import_react31.useRef)(null);
+    var textareaRef = (0, import_react32.useRef)(null);
     var textareaProps = register("content");
-    (0, import_react31.useEffect)(function() {
+    (0, import_react32.useEffect)(function() {
         if (isDisabled) return;
         if (!isDisabledPrevious) return;
         if (!textareaRef.current) return;
@@ -2508,29 +2547,29 @@ Thread.Root = Root4;
 Thread.Messages = Messages;
 Thread.MessageForm = MessageForm;
 // src/hooks/messages/useMessageContext/index.ts
-var import_react32 = require("react");
+var import_react33 = require("react");
 var useMessageContext = function() {
-    return (0, import_react32.useContext)(MessageContext);
+    return (0, import_react33.useContext)(MessageContext);
 };
 // src/components/threads/ThreadDialog/Provider/index.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 // src/contexts/threads/ThreadDialogContext/index.ts
-var import_react33 = require("react");
-var ThreadDialogContext = (0, import_react33.createContext)({
+var import_react34 = require("react");
+var ThreadDialogContext = (0, import_react34.createContext)({
     isOpen: false,
     setIsOpen: function() {}
 });
 // src/hooks/threads/useThreadDialogContext/index.ts
-var import_react34 = require("react");
+var import_react35 = require("react");
 var useThreadDialogContext = function() {
-    return (0, import_react34.useContext)(ThreadDialogContext);
+    return (0, import_react35.useContext)(ThreadDialogContext);
 };
 // src/components/threads/ThreadDialog/Provider/index.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var Provider3 = function(param) {
     var children = param.children;
     var threadDialogContext = useThreadDialogContext();
-    var _ref = _sliced_to_array((0, import_react35.useState)(threadDialogContext.isOpen), 2), isOpen = _ref[0], setIsOpen = _ref[1];
+    var _ref = _sliced_to_array((0, import_react36.useState)(threadDialogContext.isOpen), 2), isOpen = _ref[0], setIsOpen = _ref[1];
     return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ThreadDialogContext.Provider, {
         value: {
             isOpen: isOpen,
@@ -2540,7 +2579,7 @@ var Provider3 = function(param) {
     });
 };
 // src/components/toasts/ToastsProvider/index.tsx
-var import_react36 = require("react");
+var import_react37 = 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);
@@ -2579,8 +2618,8 @@ var CustomToast = function(param) {
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var ToastsProvider = function(param) {
     var children = param.children;
-    var _ref = _sliced_to_array((0, import_react36.useState)([]), 2), toasts = _ref[0], setToasts = _ref[1];
-    var addToast = (0, import_react36.useCallback)(function(toast) {
+    var _ref = _sliced_to_array((0, import_react37.useState)([]), 2), toasts = _ref[0], setToasts = _ref[1];
+    var addToast = (0, import_react37.useCallback)(function(toast) {
         return setToasts(function(prevToasts) {
             return _to_consumable_array(prevToasts).concat([
                 toast
@@ -2812,8 +2851,8 @@ ThreadDialog.Content = Content4;
 var import_runtime = require("regenerator-runtime/runtime");
 var import_themes41 = require("@radix-ui/themes");
 // src/contexts/threads/AudioThreadContext/index.ts
-var import_react37 = require("react");
-var AudioThreadContext = (0, import_react37.createContext)({
+var import_react38 = require("react");
+var AudioThreadContext = (0, import_react38.createContext)({
     status: "idle",
     recorderProps: {
         status: "idle",
@@ -2881,11 +2920,11 @@ var blobToData = function(blob) {
     });
 };
 // src/hooks/audioThreads/useStatus/index.ts
-var import_react38 = require("react");
+var import_react39 = require("react");
 var useStatus = function(param) {
     var messageAudioProps = param.messageAudioProps, recorderProps = param.recorderProps, createMessageProps = param.createMessageProps;
     var latestMessageProps = useLatestMessage();
-    var status = (0, import_react38.useMemo)(function() {
+    var status = (0, import_react39.useMemo)(function() {
         var _latestMessageProps_latestMessage;
         if (recorderProps.status === "recording") return "recording";
         if (createMessageProps.isPending) return "creatingMessage";
@@ -2909,19 +2948,19 @@ var useStatus = function(param) {
 // src/hooks/audioThreads/useRecorder/index.ts
 var import_dayjs2 = __toESM(require("dayjs"), 1);
 var import_use_audio_capture = require("use-audio-capture");
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_react_use_audio_player = require("react-use-audio-player");
 var import_react_use2 = require("react-use");
 var useRecorder = function(param) {
     var isStopOnSilence = param.isStopOnSilence, onStart = param.onStart, onStop = param.onStop;
-    var _ref = _sliced_to_array((0, import_react39.useState)(null), 2), silenceStart = _ref[0], setSilenceStart = _ref[1];
-    var _ref1 = _sliced_to_array((0, import_react39.useState)(null), 2), noiseStart = _ref1[0], setNoiseStart = _ref1[1];
-    var _ref2 = _sliced_to_array((0, import_react39.useState)(null), 2), mediaStream = _ref2[0], setMediaStream = _ref2[1];
-    var _ref3 = _sliced_to_array((0, import_react39.useState)("idle"), 2), status = _ref3[0], setStatus = _ref3[1];
+    var _ref = _sliced_to_array((0, import_react40.useState)(null), 2), silenceStart = _ref[0], setSilenceStart = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react40.useState)(null), 2), noiseStart = _ref1[0], setNoiseStart = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react40.useState)(null), 2), mediaStream = _ref2[0], setMediaStream = _ref2[1];
+    var _ref3 = _sliced_to_array((0, import_react40.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_react39.useState)(false), 2), isLoaded = _ref4[0], setIsLoaded = _ref4[1];
-    (0, import_react39.useEffect)(function() {
+    var _ref4 = _sliced_to_array((0, import_react40.useState)(false), 2), isLoaded = _ref4[0], setIsLoaded = _ref4[1];
+    (0, import_react40.useEffect)(function() {
         if (isLoaded) return;
         setIsLoaded(true);
     }, [
@@ -2979,9 +3018,9 @@ var useRecorder = function(param) {
             setNoiseStart(null);
         }
     });
-    var _ref5 = _sliced_to_array((0, import_react39.useState)(null), 2), audioEngine = _ref5[0], setAudioEngine = _ref5[1];
-    var isInited = (0, import_react39.useRef)(false);
-    (0, import_react39.useEffect)(function() {
+    var _ref5 = _sliced_to_array((0, import_react40.useState)(null), 2), audioEngine = _ref5[0], setAudioEngine = _ref5[1];
+    var isInited = (0, import_react40.useRef)(false);
+    (0, import_react40.useEffect)(function() {
         if (!mediaStream) return;
         if (isInited.current) return;
         isInited.current = true;
@@ -2994,7 +3033,7 @@ var useRecorder = function(param) {
         isInited,
         mediaStream
     ]);
-    var visualizationAnalyser = (0, import_react39.useMemo)(function() {
+    var visualizationAnalyser = (0, import_react40.useMemo)(function() {
         if (!audioEngine) return null;
         var result = audioEngine.audioContext.createAnalyser();
         audioEngine.source.connect(result);
@@ -3002,7 +3041,7 @@ var useRecorder = function(param) {
     }, [
         audioEngine
     ]);
-    var silenceAnalyser = (0, import_react39.useMemo)(function() {
+    var silenceAnalyser = (0, import_react40.useMemo)(function() {
         if (!audioEngine) return null;
         var result = audioEngine.audioContext.createAnalyser();
         result.minDecibels = -45;
@@ -3011,7 +3050,7 @@ var useRecorder = function(param) {
     }, [
         audioEngine
     ]);
-    var handleSilence = (0, import_react39.useCallback)(function() {
+    var handleSilence = (0, import_react40.useCallback)(function() {
         if (!silenceAnalyser) return;
         var frequencyData = new Uint8Array(silenceAnalyser.frequencyBinCount);
         silenceAnalyser.getByteFrequencyData(frequencyData);
@@ -3034,7 +3073,7 @@ var useRecorder = function(param) {
         setNoiseStart,
         setSilenceStart
     ]);
-    (0, import_react39.useEffect)(function() {
+    (0, import_react40.useEffect)(function() {
         if (!isStopOnSilence) return;
         requestAnimationFrame(function() {
             return handleSilence();
@@ -3057,7 +3096,7 @@ var useRecorder = function(param) {
     });
 };
 // src/hooks/audioThreads/useMessageAudio/index.ts
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_compromise = __toESM(require("compromise"), 1);
 var import_howler = require("howler");
 var import_react_use_audio_player2 = require("react-use-audio-player");
@@ -3095,16 +3134,18 @@ var getMessageSentences = function(param) {
 };
 var useMessageAudio = function(param) {
     var onEnd = param.onEnd;
-    var _ref = _sliced_to_array((0, import_react40.useState)(false), 2), isAudioPlayed = _ref[0], setIsAudioPlayed = _ref[1];
-    var _ref1 = _sliced_to_array((0, import_react40.useState)([]), 2), playedMessageSentences = _ref1[0], setPlayedMessageSentences = _ref1[1];
+    var _ref = _sliced_to_array((0, import_react41.useState)(false), 2), isAudioPlayed = _ref[0], setIsAudioPlayed = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react41.useState)([]), 2), stoppedMessageIds = _ref1[0], setStoppedMessageIds = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react41.useState)([]), 2), playedMessageSentences = _ref2[0], setPlayedMessageSentences = _ref2[1];
     var audioPlayer = (0, import_react_use_audio_player2.useAudioPlayer)();
     var nextAudioPlayer = (0, import_react_use_audio_player2.useAudioPlayer)();
     var superinterfaceContext = useSuperinterfaceContext();
-    var _ref2 = _sliced_to_array((0, import_react40.useState)(false), 2), isPlaying = _ref2[0], setIsPlaying = _ref2[1];
+    var _ref3 = _sliced_to_array((0, import_react41.useState)(false), 2), isPlaying = _ref3[0], setIsPlaying = _ref3[1];
     var latestMessageProps = useLatestMessage();
-    var unplayedMessageSentences = (0, import_react40.useMemo)(function() {
+    var unplayedMessageSentences = (0, import_react41.useMemo)(function() {
         if (!latestMessageProps.latestMessage) return [];
         if (latestMessageProps.latestMessage.role !== "assistant") return [];
+        if (stoppedMessageIds.includes(latestMessageProps.latestMessage.id)) return [];
         var input2 = input({
             message: latestMessageProps.latestMessage
         });
@@ -3122,7 +3163,7 @@ var useMessageAudio = function(param) {
         latestMessageProps,
         playedMessageSentences
     ]);
-    (0, import_react40.useEffect)(function() {
+    (0, import_react41.useEffect)(function() {
         if (isPlaying) return;
         if (audioPlayer.playing) return;
         if (!latestMessageProps.latestMessage) return;
@@ -3151,6 +3192,14 @@ var useMessageAudio = function(param) {
             onplay: function() {
                 setIsAudioPlayed(true);
             },
+            onstop: function() {
+                setStoppedMessageIds(function(prev) {
+                    return _to_consumable_array(prev).concat([
+                        firstUnplayedMessageSentence.messageId
+                    ]);
+                });
+                setIsPlaying(false);
+            },
             onload: function() {
                 var nextUnplayedMessageSentence = unplayedMessageSentences[1];
                 if (!nextUnplayedMessageSentence) return;
@@ -3182,7 +3231,7 @@ var useMessageAudio = function(param) {
         playedMessageSentences,
         onEnd
     ]);
-    (0, import_react40.useEffect)(function() {
+    (0, import_react41.useEffect)(function() {
         if (isHtmlAudioSupported) {
             var _import_howler_Howler__howls___sounds_, _import_howler_Howler__howls_, _import_howler_Howler;
             if (!((_import_howler_Howler = import_howler.Howler) === null || _import_howler_Howler === void 0 ? void 0 : (_import_howler_Howler__howls_ = _import_howler_Howler._howls[0]) === null || _import_howler_Howler__howls_ === void 0 ? void 0 : (_import_howler_Howler__howls___sounds_ = _import_howler_Howler__howls_._sounds[0]) === null || _import_howler_Howler__howls___sounds_ === void 0 ? void 0 : _import_howler_Howler__howls___sounds_._node)) return;
@@ -3191,9 +3240,9 @@ var useMessageAudio = function(param) {
     }, [
         audioPlayer
     ]);
-    var _ref3 = _sliced_to_array((0, import_react40.useState)(null), 2), audioEngine = _ref3[0], setAudioEngine = _ref3[1];
-    var isAudioEngineInited = (0, import_react40.useRef)(false);
-    (0, import_react40.useEffect)(function() {
+    var _ref4 = _sliced_to_array((0, import_react41.useState)(null), 2), audioEngine = _ref4[0], setAudioEngine = _ref4[1];
+    var isAudioEngineInited = (0, import_react41.useRef)(false);
+    (0, import_react41.useEffect)(function() {
         if (!audioPlayer.playing) return;
         if (isAudioEngineInited.current) return;
         isAudioEngineInited.current = true;
@@ -3214,7 +3263,7 @@ var useMessageAudio = function(param) {
         audioPlayer,
         isAudioEngineInited
     ]);
-    var visualizationAnalyser = (0, import_react40.useMemo)(function() {
+    var visualizationAnalyser = (0, import_react41.useMemo)(function() {
         if (!audioEngine) return null;
         var result = audioEngine.audioContext.createAnalyser();
         audioEngine.source.connect(audioEngine.audioContext.destination);
@@ -3223,7 +3272,7 @@ var useMessageAudio = function(param) {
     }, [
         audioEngine
     ]);
-    var isPending = (0, import_react40.useMemo)(function() {
+    var isPending = (0, import_react41.useMemo)(function() {
         return isPlaying || unplayedMessageSentences.length > 0;
     }, [
         isPlaying,
@@ -3312,21 +3361,21 @@ var Root8 = function(param) {
 // src/components/threads/AudioThread/Visualization/index.tsx
 var import_themes43 = require("@radix-ui/themes");
 // src/hooks/threads/useAudioThreadContext/index.ts
-var import_react41 = require("react");
+var import_react42 = require("react");
 var useAudioThreadContext = function() {
-    return (0, import_react41.useContext)(AudioThreadContext);
+    return (0, import_react42.useContext)(AudioThreadContext);
 };
 // src/components/threads/AudioThread/BarsVisualizer/index.tsx
 var import_lodash8 = __toESM(require("lodash"), 1);
 var import_themes42 = require("@radix-ui/themes");
-var import_react42 = require("react");
+var import_react43 = require("react");
 var import_radash12 = require("radash");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var barCount = 4;
 var BarsVisualizer = function(param) {
     var visualizationAnalyser = param.visualizationAnalyser, backgroundColor = param.backgroundColor, height = param.height, barWidth = param.barWidth;
-    var _ref = _sliced_to_array((0, import_react42.useState)([]), 2), barHeights = _ref[0], setBarHeights = _ref[1];
-    var draw = (0, import_react42.useCallback)(function(param) {
+    var _ref = _sliced_to_array((0, import_react43.useState)([]), 2), barHeights = _ref[0], setBarHeights = _ref[1];
+    var draw = (0, import_react43.useCallback)(function(param) {
         var visualizationAnalyser2 = param.visualizationAnalyser;
         if (!visualizationAnalyser2) {
             setBarHeights(Array(barCount).fill(0));
@@ -3344,7 +3393,7 @@ var BarsVisualizer = function(param) {
             });
         });
     }, []);
-    (0, import_react42.useEffect)(function() {
+    (0, import_react43.useEffect)(function() {
         draw({
             visualizationAnalyser: visualizationAnalyser
         });
@@ -3417,6 +3466,7 @@ var import_react_icons9 = require("@radix-ui/react-icons");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var ActionButton = function() {
     var audioThreadContext = useAudioThreadContext();
+    var superinterfaceContext = useSuperinterfaceContext();
     if (audioThreadContext.status === "recording") {
         return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_themes44.Flex, {
             align: "center",
@@ -3475,7 +3525,10 @@ var ActionButton = function() {
     if (audioThreadContext.status === "playing") {
         return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes44.IconButton, {
             onClick: function() {
-                return audioThreadContext.messageAudioProps.pause();
+                var _superinterfaceContext_createMessageAbortControllerRef_current;
+                audioThreadContext.messageAudioProps.stop();
+                (_superinterfaceContext_createMessageAbortControllerRef_current = superinterfaceContext.createMessageAbortControllerRef.current) === null || _superinterfaceContext_createMessageAbortControllerRef_current === void 0 ? void 0 : _superinterfaceContext_createMessageAbortControllerRef_current.abort();
+                audioThreadContext.recorderProps.start();
             },
             size: "4",
             color: "gray",
@@ -3484,7 +3537,7 @@ var ActionButton = function() {
             style: {
                 border: "2px solid var(--gray-8)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_icons9.PauseIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_icons9.StopIcon, {})
         });
     }
     if (audioThreadContext.status === "playerPaused") {
@@ -3584,9 +3637,9 @@ AudioThreadDialog.Trigger = Trigger;
 AudioThreadDialog.Button = Button2;
 AudioThreadDialog.Content = Content4;
 // src/components/suggestions/Suggestions/index.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 // src/components/suggestions/Suggestions/Content.tsx
-var import_react43 = require("react");
+var import_react44 = require("react");
 var import_radash13 = require("radash");
 var import_react_children_utilities = require("react-children-utilities");
 var import_themes47 = require("@radix-ui/themes");
@@ -3643,7 +3696,7 @@ var import_jsx_runtime63 = require("react/jsx-runtime");
 var Content6 = function(param) {
     var children = param.children;
     var isMutatingMessage = useIsMutatingMessage();
-    var suggestions = (0, import_react43.useMemo)(function() {
+    var suggestions = (0, import_react44.useMemo)(function() {
         return (0, import_react_children_utilities.onlyText)(children).split(/\r?\n/).filter(function(c) {
             return !(0, import_radash13.isEmpty)(c);
         }).map(function(c) {
@@ -3670,7 +3723,7 @@ var import_jsx_runtime64 = require("react/jsx-runtime");
 var Suggestions = function(param) {
     var children = param.children;
     var latestMessageProps = useLatestMessage();
-    var isDisabled = (0, import_react44.useMemo)(function() {
+    var isDisabled = (0, import_react45.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;
@@ -3685,14 +3738,14 @@ var Suggestions = function(param) {
 };
 Suggestions.Item = Item;
 // src/components/markdown/MarkdownProvider/index.tsx
-var import_react45 = require("react");
+var import_react46 = 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_react45.useMemo)(function() {
+    var value = (0, import_react46.useMemo)(function() {
         return merge(prevMarkdownContext, rest);
     }, [
         rest,