@superinterface/react 2.8.1 → 2.9.0

package/dist/index.js

@@ -729,16 +729,16 @@ import { useContext as useContext4 } from "react";
 import { createContext as createContext5 } from "react";
 var FunctionComponentsContext = createContext5({});
 // src/components/functions/FunctionBase/index.tsx
-import { PopoverRoot, PopoverContent } from "@radix-ui/themes";
+import { Popover as Popover2 } from "@radix-ui/themes";
 // src/components/toolCalls/ToolCallBase/index.tsx
-import { Flex as Flex5, Button, PopoverTrigger } from "@radix-ui/themes";
+import { Flex as Flex5, Button, Popover } from "@radix-ui/themes";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var ToolCallBase = function(param) {
     var children = param.children;
     return /* @__PURE__ */ jsx8(Flex5, {
         py: "1",
         ml: "-2",
-        children: /* @__PURE__ */ jsx8(PopoverTrigger, {
+        children: /* @__PURE__ */ jsx8(Popover.Trigger, {
             children: /* @__PURE__ */ jsx8(Button, {
                 size: "1",
                 color: "gold",
@@ -829,7 +829,7 @@ var Content = function(param) {
 import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
 var FunctionBase = function(param) {
     var fn = param.fn, runStep = param.runStep, title2 = param.title;
-    return /* @__PURE__ */ jsxs3(PopoverRoot, {
+    return /* @__PURE__ */ jsxs3(Popover2.Root, {
         children: [
             /* @__PURE__ */ jsxs3(ToolCallBase, {
                 children: [
@@ -841,7 +841,7 @@ var FunctionBase = function(param) {
                     })
                 ]
             }),
-            /* @__PURE__ */ jsx12(PopoverContent, {
+            /* @__PURE__ */ jsx12(Popover2.Content, {
                 style: {
                     maxHeight: "200px"
                 },
@@ -918,11 +918,11 @@ var ToolCall = function(param) {
     });
 };
 // src/components/runSteps/RunStep/ToolCalls/Starting/index.tsx
-import { PopoverRoot as PopoverRoot2, PopoverContent as PopoverContent2, Text as Text3 } from "@radix-ui/themes";
+import { Popover as Popover3, Text as Text3 } from "@radix-ui/themes";
 import { CircleIcon as CircleIcon2 } from "@radix-ui/react-icons";
 import { jsx as jsx17, jsxs as jsxs4 } from "react/jsx-runtime";
 var Starting = function() {
-    return /* @__PURE__ */ jsxs4(PopoverRoot2, {
+    return /* @__PURE__ */ jsxs4(Popover3.Root, {
         children: [
             /* @__PURE__ */ jsxs4(ToolCallBase, {
                 children: [
@@ -932,7 +932,7 @@ var Starting = function() {
                     })
                 ]
             }),
-            /* @__PURE__ */ jsx17(PopoverContent2, {
+            /* @__PURE__ */ jsx17(Popover3.Content, {
                 style: {
                     maxHeight: "500px"
                 },
@@ -2432,7 +2432,7 @@ var CustomToast = function(param) {
                             height: "14px",
                             align: "center",
                             children: toast.type === "success" ? /* @__PURE__ */ jsx47(CheckCircledIcon2, {
-                                color: "var(--mint-9)"
+                                color: "var(--accent-9)"
                             }) : /* @__PURE__ */ jsx47(CrossCircledIcon, {
                                 color: "var(--red-9)"
                             })
@@ -2762,8 +2762,8 @@ var useStatus = function(param) {
         var _latestMessageProps_latestMessage;
         if (recorderProps.status === "recording") return "recording";
         if (createMessageProps.isPending) return "creatingMessage";
+        if (messageAudioProps.paused || !messageAudioProps.isAudioPlayed) return "playerPaused";
         if (messageAudioProps.playing || messageAudioProps.isPending) return "playing";
-        if (messageAudioProps.paused) return "playerPaused";
         if (!messageAudioProps.isReady) return "loading";
         if (((_latestMessageProps_latestMessage = latestMessageProps.latestMessage) === null || _latestMessageProps_latestMessage === void 0 ? void 0 : _latestMessageProps_latestMessage.status) === "in_progress") return "creatingMessage";
         if (recorderProps.status === "idle") return "idle";
@@ -2968,10 +2968,12 @@ var getMessageSentences = function(param) {
 };
 var useMessageAudio = function(param) {
     var onEnd = param.onEnd;
-    var _useState4 = _sliced_to_array(useState4([]), 2), playedMessageSentences = _useState4[0], setPlayedMessageSentences = _useState4[1];
+    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 audioPlayer = useAudioPlayer2();
+    var nextAudioPlayer = useAudioPlayer2();
     var superinterfaceContext = useSuperinterfaceContext();
-    var _useState41 = _sliced_to_array(useState4(false), 2), isPlaying = _useState41[0], setIsPlaying = _useState41[1];
+    var _useState42 = _sliced_to_array(useState4(false), 2), isPlaying = _useState42[0], setIsPlaying = _useState42[1];
     var latestMessageProps = useLatestMessage();
     var unplayedMessageSentences = useMemo12(function() {
         if (!latestMessageProps.latestMessage) return [];
@@ -3015,8 +3017,25 @@ var useMessageAudio = function(param) {
         }, superinterfaceContext.variables));
         audioPlayer.load("".concat(superinterfaceContext.baseUrl, "/tts?").concat(searchParams), {
             format: "mp3",
-            autoplay: true,
+            autoplay: isAudioPlayed,
             html5: isHtmlAudioSupported,
+            onplay: function() {
+                setIsAudioPlayed(true);
+            },
+            onload: function() {
+                var nextUnplayedMessageSentence = unplayedMessageSentences[1];
+                if (!nextUnplayedMessageSentence) return;
+                var isNextFullSentence = FULL_SENTENCE_REGEX.test(nextUnplayedMessageSentence.sentence);
+                if (!isNextFullSentence) return;
+                var nextSearchParams = new URLSearchParams(_object_spread({
+                    input: nextUnplayedMessageSentence.sentence
+                }, superinterfaceContext.variables));
+                nextAudioPlayer.load("".concat(superinterfaceContext.baseUrl, "/tts?").concat(nextSearchParams), {
+                    format: "mp3",
+                    autoplay: false,
+                    html5: isHtmlAudioSupported
+                });
+            },
             onend: function() {
                 setIsPlaying(false);
                 if (unplayedMessageSentences.length === 1 && latestMessageProps.latestMessage.status !== "in_progress") {
@@ -3030,24 +3049,16 @@ var useMessageAudio = function(param) {
         superinterfaceContext,
         latestMessageProps,
         audioPlayer,
+        nextAudioPlayer,
         playedMessageSentences,
         onEnd
     ]);
-    var isInited = useRef5(false);
-    var _useState42 = _sliced_to_array(useState4(null), 2), audioEngine = _useState42[0], setAudioEngine = _useState42[1];
-    useEffect5(function() {
-        if (isHtmlAudioSupported) {
-            var _Howler__howls___sounds_, _Howler__howls_;
-            if (!(Howler === null || Howler === void 0 ? void 0 : (_Howler__howls_ = Howler._howls[0]) === null || _Howler__howls_ === void 0 ? void 0 : (_Howler__howls___sounds_ = _Howler__howls_._sounds[0]) === null || _Howler__howls___sounds_ === void 0 ? void 0 : _Howler__howls___sounds_._node)) return;
-            Howler._howls[0]._sounds[0]._node.crossOrigin = "anonymous";
-        }
-    }, [
-        audioPlayer
-    ]);
+    var _useState43 = _sliced_to_array(useState4(null), 2), audioEngine = _useState43[0], setAudioEngine = _useState43[1];
+    var isAudioEngineInited = useRef5(false);
     useEffect5(function() {
         if (!audioPlayer.playing) return;
-        if (isInited.current) return;
-        isInited.current = true;
+        if (isAudioEngineInited.current) return;
+        isAudioEngineInited.current = true;
         if (isHtmlAudioSupported) {
             var audioContext = new AudioContext();
             setAudioEngine({
@@ -3063,7 +3074,7 @@ var useMessageAudio = function(param) {
         }
     }, [
         audioPlayer,
-        isInited
+        isAudioEngineInited
     ]);
     var visualizationAnalyser = useMemo12(function() {
         if (!audioEngine) return null;
@@ -3081,7 +3092,8 @@ var useMessageAudio = function(param) {
         unplayedMessageSentences
     ]);
     return _object_spread_props(_object_spread({
-        isPending: isPending
+        isPending: isPending,
+        isAudioPlayed: isAudioPlayed
     }, audioPlayer), {
         visualizationAnalyser: visualizationAnalyser
     });
@@ -3095,7 +3107,6 @@ var Root8 = function(param) {
         isStopOnSilence: true,
         onStart: /*#__PURE__*/ _async_to_generator(function() {
             return _ts_generator(this, function(_state) {
-                console.log("start");
                 return [
                     2
                 ];
@@ -3175,18 +3186,14 @@ import { cluster } from "radash";
 import { jsx as jsx56 } from "react/jsx-runtime";
 var barCount = 4;
 var BarsVisualizer = function(param) {
-    var visualizationAnalyser = param.visualizationAnalyser, color = param.color, height = param.height, barWidth = param.barWidth;
-    var _useState5 = _sliced_to_array(useState5(null), 2), cachedEmptyVisualizer = _useState5[0], setCachedEmptyVisualizer = _useState5[1];
-    var getEmptyVisualizer = useCallback4(function() {
-        var result = new AudioContext().createAnalyser();
-        setCachedEmptyVisualizer(result);
-        return result;
-    }, [
-        cachedEmptyVisualizer
-    ]);
-    var _useState51 = _sliced_to_array(useState5([]), 2), barHeights = _useState51[0], setBarHeights = _useState51[1];
+    var visualizationAnalyser = param.visualizationAnalyser, backgroundColor = param.backgroundColor, height = param.height, barWidth = param.barWidth;
+    var _useState5 = _sliced_to_array(useState5([]), 2), barHeights = _useState5[0], setBarHeights = _useState5[1];
     var draw = useCallback4(function(param) {
         var visualizationAnalyser2 = param.visualizationAnalyser;
+        if (!visualizationAnalyser2) {
+            setBarHeights(Array(barCount).fill(0));
+            return;
+        }
         var frequencyData = new Uint8Array(visualizationAnalyser2.frequencyBinCount / 15);
         visualizationAnalyser2.getByteFrequencyData(frequencyData);
         var clusteredFrequencyData = cluster(frequencyData, frequencyData.length / barCount);
@@ -3201,13 +3208,11 @@ var BarsVisualizer = function(param) {
     }, []);
     useEffect6(function() {
         draw({
-            visualizationAnalyser: visualizationAnalyser || cachedEmptyVisualizer || getEmptyVisualizer()
+            visualizationAnalyser: visualizationAnalyser
         });
     }, [
         draw,
-        visualizationAnalyser,
-        cachedEmptyVisualizer,
-        getEmptyVisualizer
+        visualizationAnalyser
     ]);
     return /* @__PURE__ */ jsx56(Grid, {
         columns: "".concat(barCount),
@@ -3229,7 +3234,7 @@ var BarsVisualizer = function(param) {
                     height: "".concat(barHeight + 20, "%"),
                     width: barWidth,
                     style: {
-                        backgroundColor: "var(--".concat(color, "-11)"),
+                        backgroundColor: backgroundColor,
                         borderRadius: "var(--radius-6)"
                     }
                 })
@@ -3253,12 +3258,12 @@ var Visualization = function() {
             height: "200px",
             width: "200px",
             style: {
-                backgroundColor: "var(--".concat(audioThreadContext.status === "playing" ? "mint" : "gray", "-4)"),
+                backgroundColor: audioThreadContext.status === "playing" ? "var(--accent-4)" : "var(--gray-4)",
                 borderRadius: "9999px"
             },
             children: /* @__PURE__ */ jsx57(BarsVisualizer, {
                 visualizationAnalyser: audioThreadContext.messageAudioProps.visualizationAnalyser,
-                color: audioThreadContext.status === "playing" ? "mint" : "gray",
+                backgroundColor: audioThreadContext.status === "playing" ? "var(--accent-11)" : "var(--gray-11)",
                 height: "40px",
                 barWidth: "24px"
             })
@@ -3348,9 +3353,9 @@ var ActionButton = function() {
                 return audioThreadContext.messageAudioProps.play();
             },
             size: "4",
-            color: "gray",
             radius: "full",
             style: {
+                backgroundColor: "var(--accent-11)",
                 border: "2px solid var(--gray-8)"
             },
             children: /* @__PURE__ */ jsx58(ResumeIcon, {})
@@ -3384,7 +3389,7 @@ var Form = function() {
                         align: "center",
                         children: /* @__PURE__ */ jsx59(SpeakerModerateIcon, {
                             style: {
-                                color: "var(--".concat(audioThreadContext.status === "recording" ? "mint" : "gray", "-12)")
+                                color: audioThreadContext.status === "recording" ? "var(--accent-12)" : "var(--gray-12)"
                             }
                         })
                     }),
@@ -3392,12 +3397,12 @@ var Form = function() {
                         px: "2",
                         py: "1",
                         style: {
-                            backgroundColor: "var(--".concat(audioThreadContext.status === "recording" ? "mint" : "gray", "-4)"),
+                            backgroundColor: audioThreadContext.status === "recording" ? "var(--accent-4)" : "var(--gray-4)",
                             borderRadius: "var(--radius-6)"
                         },
                         children: /* @__PURE__ */ jsx59(BarsVisualizer, {
                             visualizationAnalyser: audioThreadContext.recorderProps.visualizationAnalyser,
-                            color: audioThreadContext.status === "recording" ? "mint" : "gray",
+                            backgroundColor: audioThreadContext.status === "recording" ? "var(--accent-11)" : "var(--gray-11)",
                             height: "20px",
                             barWidth: "12px"
                         })