@superinterface/react 2.8.1 → 2.9.0

package/dist/index.cjs

@@ -865,7 +865,7 @@ var ToolCallBase = function(param) {
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes7.Flex, {
         py: "1",
         ml: "-2",
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes7.PopoverTrigger, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes7.Popover.Trigger, {
             children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes7.Button, {
                 size: "1",
                 color: "gold",
@@ -956,7 +956,7 @@ var Content = function(param) {
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var FunctionBase = function(param) {
     var fn = param.fn, runStep = param.runStep, title2 = param.title;
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_themes10.PopoverRoot, {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_themes10.Popover.Root, {
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ToolCallBase, {
                 children: [
@@ -968,7 +968,7 @@ var FunctionBase = function(param) {
                     })
                 ]
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_themes10.PopoverContent, {
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_themes10.Popover.Content, {
                 style: {
                     maxHeight: "200px"
                 },
@@ -1049,7 +1049,7 @@ var import_themes13 = require("@radix-ui/themes");
 var import_react_icons3 = require("@radix-ui/react-icons");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var Starting = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_themes13.PopoverRoot, {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_themes13.Popover.Root, {
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(ToolCallBase, {
                 children: [
@@ -1059,7 +1059,7 @@ var Starting = function() {
                     })
                 ]
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes13.PopoverContent, {
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes13.Popover.Content, {
                 style: {
                     maxHeight: "500px"
                 },
@@ -2559,7 +2559,7 @@ var CustomToast = function(param) {
                             height: "14px",
                             align: "center",
                             children: toast.type === "success" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_icons6.CheckCircledIcon, {
-                                color: "var(--mint-9)"
+                                color: "var(--accent-9)"
                             }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_icons6.CrossCircledIcon, {
                                 color: "var(--red-9)"
                             })
@@ -2889,8 +2889,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";
@@ -3095,10 +3095,12 @@ var getMessageSentences = function(param) {
 };
 var useMessageAudio = function(param) {
     var onEnd = param.onEnd;
-    var _ref = _sliced_to_array((0, import_react40.useState)([]), 2), playedMessageSentences = _ref[0], setPlayedMessageSentences = _ref[1];
+    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 audioPlayer = (0, import_react_use_audio_player2.useAudioPlayer)();
+    var nextAudioPlayer = (0, import_react_use_audio_player2.useAudioPlayer)();
     var superinterfaceContext = useSuperinterfaceContext();
-    var _ref1 = _sliced_to_array((0, import_react40.useState)(false), 2), isPlaying = _ref1[0], setIsPlaying = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react40.useState)(false), 2), isPlaying = _ref2[0], setIsPlaying = _ref2[1];
     var latestMessageProps = useLatestMessage();
     var unplayedMessageSentences = (0, import_react40.useMemo)(function() {
         if (!latestMessageProps.latestMessage) return [];
@@ -3142,8 +3144,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") {
@@ -3157,24 +3176,16 @@ var useMessageAudio = function(param) {
         superinterfaceContext,
         latestMessageProps,
         audioPlayer,
+        nextAudioPlayer,
         playedMessageSentences,
         onEnd
     ]);
-    var isInited = (0, import_react40.useRef)(false);
-    var _ref2 = _sliced_to_array((0, import_react40.useState)(null), 2), audioEngine = _ref2[0], setAudioEngine = _ref2[1];
-    (0, import_react40.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;
-            import_howler.Howler._howls[0]._sounds[0]._node.crossOrigin = "anonymous";
-        }
-    }, [
-        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() {
         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({
@@ -3190,7 +3201,7 @@ var useMessageAudio = function(param) {
         }
     }, [
         audioPlayer,
-        isInited
+        isAudioEngineInited
     ]);
     var visualizationAnalyser = (0, import_react40.useMemo)(function() {
         if (!audioEngine) return null;
@@ -3208,7 +3219,8 @@ var useMessageAudio = function(param) {
         unplayedMessageSentences
     ]);
     return _object_spread_props(_object_spread({
-        isPending: isPending
+        isPending: isPending,
+        isAudioPlayed: isAudioPlayed
     }, audioPlayer), {
         visualizationAnalyser: visualizationAnalyser
     });
@@ -3222,7 +3234,6 @@ var Root8 = function(param) {
         isStopOnSilence: true,
         onStart: /*#__PURE__*/ _async_to_generator(function() {
             return _ts_generator(this, function(_state) {
-                console.log("start");
                 return [
                     2
                 ];
@@ -3302,18 +3313,14 @@ var import_radash12 = require("radash");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var barCount = 4;
 var BarsVisualizer = function(param) {
-    var visualizationAnalyser = param.visualizationAnalyser, color = param.color, height = param.height, barWidth = param.barWidth;
-    var _ref = _sliced_to_array((0, import_react42.useState)(null), 2), cachedEmptyVisualizer = _ref[0], setCachedEmptyVisualizer = _ref[1];
-    var getEmptyVisualizer = (0, import_react42.useCallback)(function() {
-        var result = new AudioContext().createAnalyser();
-        setCachedEmptyVisualizer(result);
-        return result;
-    }, [
-        cachedEmptyVisualizer
-    ]);
-    var _ref1 = _sliced_to_array((0, import_react42.useState)([]), 2), barHeights = _ref1[0], setBarHeights = _ref1[1];
+    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 visualizationAnalyser2 = param.visualizationAnalyser;
+        if (!visualizationAnalyser2) {
+            setBarHeights(Array(barCount).fill(0));
+            return;
+        }
         var frequencyData = new Uint8Array(visualizationAnalyser2.frequencyBinCount / 15);
         visualizationAnalyser2.getByteFrequencyData(frequencyData);
         var clusteredFrequencyData = (0, import_radash12.cluster)(frequencyData, frequencyData.length / barCount);
@@ -3328,13 +3335,11 @@ var BarsVisualizer = function(param) {
     }, []);
     (0, import_react42.useEffect)(function() {
         draw({
-            visualizationAnalyser: visualizationAnalyser || cachedEmptyVisualizer || getEmptyVisualizer()
+            visualizationAnalyser: visualizationAnalyser
         });
     }, [
         draw,
-        visualizationAnalyser,
-        cachedEmptyVisualizer,
-        getEmptyVisualizer
+        visualizationAnalyser
     ]);
     return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_themes42.Grid, {
         columns: "".concat(barCount),
@@ -3356,7 +3361,7 @@ var BarsVisualizer = function(param) {
                     height: "".concat(barHeight + 20, "%"),
                     width: barWidth,
                     style: {
-                        backgroundColor: "var(--".concat(color, "-11)"),
+                        backgroundColor: backgroundColor,
                         borderRadius: "var(--radius-6)"
                     }
                 })
@@ -3380,12 +3385,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__ */ (0, import_jsx_runtime57.jsx)(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"
             })
@@ -3475,9 +3480,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__ */ (0, import_jsx_runtime58.jsx)(import_react_icons9.ResumeIcon, {})
@@ -3511,7 +3516,7 @@ var Form = function() {
                         align: "center",
                         children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_icons10.SpeakerModerateIcon, {
                             style: {
-                                color: "var(--".concat(audioThreadContext.status === "recording" ? "mint" : "gray", "-12)")
+                                color: audioThreadContext.status === "recording" ? "var(--accent-12)" : "var(--gray-12)"
                             }
                         })
                     }),
@@ -3519,12 +3524,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__ */ (0, import_jsx_runtime59.jsx)(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"
                         })