@superinterface/react 2.10.1 → 2.12.0

package/dist/index.js

@@ -1,4 +1,4 @@
-// src/lib/misc/merge/index.ts
+// src/components/core/SuperinterfaceProvider/index.tsx
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -265,6 +265,8 @@ function _ts_generator(thisArg, body) {
 }
 var _2;
 var _detect;
+import { useRef } from "react";
+// src/lib/misc/merge/index.ts
 import _21 from "lodash";
 // src/lib/misc/merge/customizer.ts
 import _ from "lodash";
@@ -324,7 +326,10 @@ var SuperinterfaceContext = createContext({
         queries: {},
         mutations: {}
     },
-    threadIdCookieOptions: options
+    threadIdCookieOptions: options,
+    createMessageAbortControllerRef: {
+        current: null
+    }
 });
 // src/hooks/core/useSuperinterfaceContext/index.ts
 import { useContext } from "react";
@@ -336,7 +341,8 @@ import { jsx } from "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 = useRef(null);
+    var value = merge(superinterfaceContext, _object_spread_props(_object_spread({}, baseUrl2 ? {
         baseUrl: baseUrl2
     } : {}, variables ? {
         variables: variables
@@ -344,7 +350,9 @@ var SuperinterfaceProvider = function(param) {
         defaultOptions: defaultOptions
     } : {}, threadIdCookieOptions ? {
         threadIdCookieOptions: threadIdCookieOptions
-    } : {}));
+    } : {}), {
+        createMessageAbortControllerRef: createMessageAbortControllerRef
+    }));
     return /* @__PURE__ */ jsx(SuperinterfaceContext.Provider, {
         value: value,
         children: children
@@ -700,7 +708,7 @@ var AssistantNameContext = createContext4("Assistant");
 // src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
 import { Flex as Flex10 } from "@radix-ui/themes";
 // src/components/threads/Thread/Message/index.tsx
-import { useMemo as useMemo4, Fragment } from "react";
+import { useMemo as useMemo5, Fragment } from "react";
 import { Box as Box9 } from "@radix-ui/themes";
 // src/components/skeletons/StartingContentSkeleton/index.tsx
 import { Skeleton as Skeleton2 } from "@radix-ui/themes";
@@ -985,6 +993,24 @@ var RunSteps = function(param) {
         })
     });
 };
+// src/hooks/messages/useIsMutatingMessage/index.ts
+import { useMemo as useMemo4 } from "react";
+import { useIsMutating } from "@tanstack/react-query";
+var useIsMutatingMessage = function() {
+    var threadContext = useSuperinterfaceContext();
+    var mutatingMessagesCount = useIsMutating({
+        mutationKey: [
+            "createMessage",
+            threadContext.variables
+        ]
+    });
+    var isMutatingMessage = useMemo4(function() {
+        return mutatingMessagesCount > 0;
+    }, [
+        mutatingMessagesCount
+    ]);
+    return isMutatingMessage;
+};
 // src/contexts/messages/MessageContext/index.ts
 import { createContext as createContext6 } from "react";
 var MessageContext = createContext6({
@@ -1147,7 +1173,7 @@ var TextContent = function(param) {
 import { jsx as jsx30, jsxs as jsxs6 } from "react/jsx-runtime";
 var Message = function(param) {
     var message = param.message;
-    var _useMemo4 = _sliced_to_array(useMemo4(function() {
+    var _useMemo5 = _sliced_to_array(useMemo5(function() {
         if (!message.runSteps.length) return [
             [],
             []
@@ -1178,8 +1204,10 @@ var Message = function(param) {
         ];
     }, [
         message
-    ]), 2), olderRunSteps = _useMemo4[0], laterRunSteps = _useMemo4[1];
-    var isInProgress = useMemo4(function() {
+    ]), 2), olderRunSteps = _useMemo5[0], laterRunSteps = _useMemo5[1];
+    var isMutatingMessage = useIsMutatingMessage();
+    var isInProgress = useMemo5(function() {
+        if (!isMutatingMessage) return false;
         if (message.status === "in_progress") return true;
         return message.runSteps.some(function(rs) {
             return rs.status === "in_progress";
@@ -1308,10 +1336,10 @@ var StartingSkeleton = function(param) {
     });
 };
 // src/hooks/messages/useLatestMessage/index.ts
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo6 } from "react";
 var useLatestMessage = function() {
     var props = useMessages();
-    return useMemo5(function() {
+    return useMemo6(function() {
         return _object_spread_props(_object_spread({}, props), {
             latestMessage: props.messages[0] || null
         });
@@ -1325,24 +1353,6 @@ var isOptimistic = function(param) {
     var id = param.id;
     return _4.startsWith(id, "-");
 };
-// src/hooks/messages/useIsMutatingMessage/index.ts
-import { useMemo as useMemo6 } from "react";
-import { useIsMutating } from "@tanstack/react-query";
-var useIsMutatingMessage = function() {
-    var threadContext = useSuperinterfaceContext();
-    var mutatingMessagesCount = useIsMutating({
-        mutationKey: [
-            "createMessage",
-            threadContext.variables
-        ]
-    });
-    var isMutatingMessage = useMemo6(function() {
-        return mutatingMessagesCount > 0;
-    }, [
-        mutatingMessagesCount
-    ]);
-    return isMutatingMessage;
-};
 // src/components/threads/Thread/Messages/Progress/index.tsx
 import { jsx as jsx35 } from "react/jsx-runtime";
 var Progress = function() {
@@ -1367,14 +1377,14 @@ var Progress = function() {
 // src/components/threads/Thread/Messages/Root/index.tsx
 import { Flex as Flex11 } from "@radix-ui/themes";
 // src/hooks/misc/useInfiniteScroll/index.tsx
-import { useRef as useRef2 } from "react";
+import { useRef as useRef3 } from "react";
 import { useInView } from "react-intersection-observer";
 // src/hooks/misc/useThrottledEffect/index.tsx
 import _5 from "lodash";
-import { useRef, useEffect as useEffect2, useCallback } from "react";
+import { useRef as useRef2, useEffect as useEffect2, useCallback } from "react";
 var useThrottledEffect = function(cb, delay, additionalDeps) {
     var _cbRef;
-    var cbRef = useRef(cb);
+    var cbRef = useRef2(cb);
     var throttledCb = useCallback(_5.throttle(function() {
         for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
             args[_key] = arguments[_key];
@@ -1396,7 +1406,7 @@ var useThrottledEffect = function(cb, delay, additionalDeps) {
 // src/hooks/misc/useInfiniteScroll/index.tsx
 var useInfiniteScroll = function(param) {
     var isFetchingNextPage = param.isFetchingNextPage, hasNextPage = param.hasNextPage, fetchNextPage = param.fetchNextPage;
-    var containerRef = useRef2(null);
+    var containerRef = useRef3(null);
     var _useInView = useInView({
         root: containerRef.current,
         rootMargin: "0px",
@@ -1486,8 +1496,8 @@ Messages.NextPageSkeleton = NextPageSkeleton;
 // src/components/threads/Thread/MessageForm/index.tsx
 import { Flex as Flex14, Text as Text5 } from "@radix-ui/themes";
 // src/components/threads/Thread/MessageForm/Submit/index.tsx
-import { ArrowUpIcon } from "@radix-ui/react-icons";
-import { IconButton, Spinner } from "@radix-ui/themes";
+import { ArrowUpIcon, StopIcon } from "@radix-ui/react-icons";
+import { IconButton } from "@radix-ui/themes";
 // src/hooks/messages/useMessageFormContext/index.ts
 import { useContext as useContext8 } from "react";
 // src/contexts/messages/MessageFormContext/index.ts
@@ -1503,17 +1513,26 @@ var useMessageFormContext = function() {
 // src/components/threads/Thread/MessageForm/Submit/index.tsx
 import { jsx as jsx39 } from "react/jsx-runtime";
 var Submit = function() {
+    var superinterfaceContext = useSuperinterfaceContext();
     var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading;
+    if (isLoading) {
+        return /* @__PURE__ */ jsx39(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__ */ jsx39(StopIcon, {})
+        });
+    }
     return /* @__PURE__ */ jsx39(IconButton, {
         type: "submit",
-        disabled: isDisabled || isLoading,
-        children: /* @__PURE__ */ jsx39(Spinner, {
-            loading: isLoading,
-            children: /* @__PURE__ */ jsx39(ArrowUpIcon, {})
-        })
+        disabled: isDisabled,
+        children: /* @__PURE__ */ jsx39(ArrowUpIcon, {})
     });
 };
 // src/components/threads/Thread/MessageForm/Root/index.tsx
+import { useQueryClient as useQueryClient4 } from "@tanstack/react-query";
 import { useMemo as useMemo8 } from "react";
 import { useForm, FormProvider } from "react-hook-form";
 import { Box as Box12 } from "@radix-ui/themes";
@@ -2015,10 +2034,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"), {
@@ -2026,7 +2047,8 @@ var mutationFn = function(param) {
                                 body: JSON.stringify(body({
                                     variables: variables,
                                     superinterfaceContext: superinterfaceContext
-                                }))
+                                })),
+                                signal: abortController.signal
                             })
                         ];
                     case 1:
@@ -2066,7 +2088,6 @@ var mutationFn = function(param) {
                             value: value,
                             messagesQueryKey: messagesQueryKey,
                             queryClient: queryClient,
-                            variables: variables,
                             superinterfaceContext: superinterfaceContext
                         });
                         return [
@@ -2140,9 +2161,26 @@ var Root2 = function(param) {
     var formProps = useForm(formOptions);
     var handleSubmit = formProps.handleSubmit, isSubmitting = formProps.formState.isSubmitting, reset = formProps.reset;
     var addToast = useToasts().addToast;
+    var queryClient = useQueryClient4();
+    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
             });
@@ -2164,6 +2202,7 @@ var Root2 = function(param) {
                         return [
                             4,
                             createMessage({
+                                // @ts-ignore-next-line
                                 content: data2.content
                             })
                         ];
@@ -2207,7 +2246,7 @@ var Root2 = function(param) {
 };
 // src/components/threads/Thread/MessageForm/Field/index.tsx
 import { usePrevious } from "react-use";
-import { useContext as useContext9, useMemo as useMemo9, useRef as useRef3, useEffect as useEffect3 } from "react";
+import { useContext as useContext9, useMemo as useMemo9, useRef as useRef4, useEffect as useEffect3 } from "react";
 // src/components/textareas/TextareaBase/index.tsx
 import { forwardRef as forwardRef3 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
@@ -2285,7 +2324,7 @@ var Control = function() {
         isLoading
     ]);
     var isDisabledPrevious = usePrevious(isDisabled);
-    var textareaRef = useRef3(null);
+    var textareaRef = useRef4(null);
     var textareaProps = register("content");
     useEffect3(function() {
         if (isDisabled) return;
@@ -2782,7 +2821,7 @@ var useStatus = function(param) {
 // src/hooks/audioThreads/useRecorder/index.ts
 import dayjs2 from "dayjs";
 import { useAudioCapture } from "use-audio-capture";
-import { useMemo as useMemo11, useRef as useRef4, useState as useState3, useCallback as useCallback3, useEffect as useEffect4 } from "react";
+import { useMemo as useMemo11, useRef as useRef5, useState as useState3, useCallback as useCallback3, useEffect as useEffect4 } from "react";
 import { useAudioPlayer } from "react-use-audio-player";
 import { useInterval } from "react-use";
 var useRecorder = function(param) {
@@ -2853,7 +2892,7 @@ var useRecorder = function(param) {
         }
     });
     var _useState35 = _sliced_to_array(useState3(null), 2), audioEngine = _useState35[0], setAudioEngine = _useState35[1];
-    var isInited = useRef4(false);
+    var isInited = useRef5(false);
     useEffect4(function() {
         if (!mediaStream) return;
         if (isInited.current) return;
@@ -2930,7 +2969,7 @@ var useRecorder = function(param) {
     });
 };
 // src/hooks/audioThreads/useMessageAudio/index.ts
-import { useMemo as useMemo12, useRef as useRef5, useState as useState4, useEffect as useEffect5 } from "react";
+import { useMemo as useMemo12, useRef as useRef6, useState as useState4, useEffect as useEffect5 } from "react";
 import nlp from "compromise";
 import { Howler } from "howler";
 import { useAudioPlayer as useAudioPlayer2 } from "react-use-audio-player";
@@ -2969,15 +3008,17 @@ var getMessageSentences = function(param) {
 var useMessageAudio = function(param) {
     var onEnd = param.onEnd;
     var _useState4 = _sliced_to_array(useState4(false), 2), isAudioPlayed = _useState4[0], setIsAudioPlayed = _useState4[1];
-    var _useState41 = _sliced_to_array(useState4([]), 2), playedMessageSentences = _useState41[0], setPlayedMessageSentences = _useState41[1];
+    var _useState41 = _sliced_to_array(useState4([]), 2), stoppedMessageIds = _useState41[0], setStoppedMessageIds = _useState41[1];
+    var _useState42 = _sliced_to_array(useState4([]), 2), playedMessageSentences = _useState42[0], setPlayedMessageSentences = _useState42[1];
     var audioPlayer = useAudioPlayer2();
     var nextAudioPlayer = useAudioPlayer2();
     var superinterfaceContext = useSuperinterfaceContext();
-    var _useState42 = _sliced_to_array(useState4(false), 2), isPlaying = _useState42[0], setIsPlaying = _useState42[1];
+    var _useState43 = _sliced_to_array(useState4(false), 2), isPlaying = _useState43[0], setIsPlaying = _useState43[1];
     var latestMessageProps = useLatestMessage();
     var unplayedMessageSentences = useMemo12(function() {
         if (!latestMessageProps.latestMessage) return [];
         if (latestMessageProps.latestMessage.role !== "assistant") return [];
+        if (stoppedMessageIds.includes(latestMessageProps.latestMessage.id)) return [];
         var input2 = input({
             message: latestMessageProps.latestMessage
         });
@@ -3024,6 +3065,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;
@@ -3064,8 +3113,8 @@ var useMessageAudio = function(param) {
     }, [
         audioPlayer
     ]);
-    var _useState43 = _sliced_to_array(useState4(null), 2), audioEngine = _useState43[0], setAudioEngine = _useState43[1];
-    var isAudioEngineInited = useRef5(false);
+    var _useState44 = _sliced_to_array(useState4(null), 2), audioEngine = _useState44[0], setAudioEngine = _useState44[1];
+    var isAudioEngineInited = useRef6(false);
     useEffect5(function() {
         if (!audioPlayer.playing) return;
         if (isAudioEngineInited.current) return;
@@ -3282,14 +3331,14 @@ var Visualization = function() {
     });
 };
 // src/components/threads/AudioThread/Form/index.tsx
-import { SpeakerModerateIcon } from "@radix-ui/react-icons";
 import { Flex as Flex24 } from "@radix-ui/themes";
 // src/components/threads/AudioThread/Form/ActionButton/index.tsx
 import { Flex as Flex23, IconButton as IconButton4 } from "@radix-ui/themes";
-import { PauseIcon, ArrowUpIcon as ArrowUpIcon2, ResumeIcon } from "@radix-ui/react-icons";
+import { StopIcon as StopIcon2, PauseIcon, ArrowUpIcon as ArrowUpIcon2, ResumeIcon } from "@radix-ui/react-icons";
 import { jsx as jsx58, jsxs as jsxs18 } from "react/jsx-runtime";
 var ActionButton = function() {
     var audioThreadContext = useAudioThreadContext();
+    var superinterfaceContext = useSuperinterfaceContext();
     if (audioThreadContext.status === "recording") {
         return /* @__PURE__ */ jsxs18(Flex23, {
             align: "center",
@@ -3348,7 +3397,10 @@ var ActionButton = function() {
     if (audioThreadContext.status === "playing") {
         return /* @__PURE__ */ jsx58(IconButton4, {
             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",
@@ -3357,7 +3409,7 @@ var ActionButton = function() {
             style: {
                 border: "2px solid var(--gray-8)"
             },
-            children: /* @__PURE__ */ jsx58(PauseIcon, {})
+            children: /* @__PURE__ */ jsx58(StopIcon2, {})
         });
     }
     if (audioThreadContext.status === "playerPaused") {
@@ -3391,35 +3443,23 @@ var Form = function() {
         direction: "column",
         align: "center",
         children: [
-            /* @__PURE__ */ jsxs19(Flex24, {
+            /* @__PURE__ */ jsx59(Flex24, {
                 pb: "3",
                 align: "center",
-                children: [
-                    /* @__PURE__ */ jsx59(Flex24, {
-                        ml: "-5",
-                        mr: "2",
-                        align: "center",
-                        children: /* @__PURE__ */ jsx59(SpeakerModerateIcon, {
-                            style: {
-                                color: audioThreadContext.status === "recording" ? "var(--accent-12)" : "var(--gray-12)"
-                            }
-                        })
-                    }),
-                    /* @__PURE__ */ jsx59(Flex24, {
-                        px: "2",
-                        py: "1",
-                        style: {
-                            backgroundColor: audioThreadContext.status === "recording" ? "var(--accent-4)" : "var(--gray-4)",
-                            borderRadius: "var(--radius-6)"
-                        },
-                        children: /* @__PURE__ */ jsx59(BarsVisualizer, {
-                            visualizationAnalyser: audioThreadContext.recorderProps.visualizationAnalyser,
-                            backgroundColor: audioThreadContext.status === "recording" ? "var(--accent-11)" : "var(--gray-11)",
-                            height: "20px",
-                            barWidth: "12px"
-                        })
+                children: /* @__PURE__ */ jsx59(Flex24, {
+                    px: "2",
+                    py: "1",
+                    style: {
+                        backgroundColor: audioThreadContext.status === "recording" ? "var(--accent-4)" : "var(--gray-4)",
+                        borderRadius: "var(--radius-6)"
+                    },
+                    children: /* @__PURE__ */ jsx59(BarsVisualizer, {
+                        visualizationAnalyser: audioThreadContext.recorderProps.visualizationAnalyser,
+                        backgroundColor: audioThreadContext.status === "recording" ? "var(--accent-11)" : "var(--gray-11)",
+                        height: "20px",
+                        barWidth: "12px"
                     })
-                ]
+                })
             }),
             /* @__PURE__ */ jsx59(ActionButton, {})
         ]
@@ -3465,7 +3505,7 @@ import { onlyText } from "react-children-utilities";
 import { Flex as Flex25 } from "@radix-ui/themes";
 // src/components/suggestions/Suggestions/Item.tsx
 import { ArrowUpIcon as ArrowUpIcon3 } from "@radix-ui/react-icons";
-import { Text as Text7, Button as Button3, Spinner as Spinner2 } from "@radix-ui/themes";
+import { Text as Text7, Button as Button3, Spinner } from "@radix-ui/themes";
 import { jsx as jsx62, jsxs as jsxs22 } from "react/jsx-runtime";
 var Item = function(param) {
     var suggestion = param.suggestion, isDisabled = param.isDisabled;
@@ -3499,7 +3539,7 @@ var Content5 = function(param) {
                 weight: "regular",
                 children: children
             }),
-            /* @__PURE__ */ jsx62(Spinner2, {
+            /* @__PURE__ */ jsx62(Spinner, {
                 loading: isPending,
                 children: /* @__PURE__ */ jsx62(ArrowUpIcon3, {
                     style: {