@superinterface/react 3.7.2 → 3.8.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { MessagesPage, ThreadStorageOptions, StyleProps, SerializedMessage, UseCreateMessageVariables, Avatar as Avatar$1, SerializedRunStep, ToolCall } from './types/index.cjs';
+import { MessagesPage, ThreadStorageOptions, StyleProps, SerializedMessage, UseCreateMessageVariables, PlayArgs, Avatar as Avatar$1, SerializedRunStep, ToolCall } from './types/index.cjs';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { UseInfiniteQueryOptions, InfiniteData, UseMutationOptions } from '@tanstack/react-query';
 import * as react_hook_form from 'react-hook-form';
@@ -537,6 +537,7 @@ declare const AudioThreadDialog: {
 
 type Args$5 = {
     children: React.ReactNode;
+    play?: (args: PlayArgs) => void;
 } & StyleProps;
 
 type Args$4 = Omit<Args$5, 'children'>;
@@ -553,8 +554,9 @@ declare const useThreadDialogContext: () => {
     setIsOpen: react.Dispatch<react.SetStateAction<boolean>>;
 };
 
-declare const useMessageAudio: ({ onEnd, }: {
+declare const useMessageAudio: ({ onEnd, play: passedPlay, }: {
     onEnd: () => void;
+    play?: (args: PlayArgs) => void;
 }) => {
     visualizationAnalyser: AnalyserNode | null;
     play: () => void;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { MessagesPage, ThreadStorageOptions, StyleProps, SerializedMessage, UseCreateMessageVariables, Avatar as Avatar$1, SerializedRunStep, ToolCall } from './types/index.js';
+import { MessagesPage, ThreadStorageOptions, StyleProps, SerializedMessage, UseCreateMessageVariables, PlayArgs, Avatar as Avatar$1, SerializedRunStep, ToolCall } from './types/index.js';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { UseInfiniteQueryOptions, InfiniteData, UseMutationOptions } from '@tanstack/react-query';
 import * as react_hook_form from 'react-hook-form';
@@ -537,6 +537,7 @@ declare const AudioThreadDialog: {
 
 type Args$5 = {
     children: React.ReactNode;
+    play?: (args: PlayArgs) => void;
 } & StyleProps;
 
 type Args$4 = Omit<Args$5, 'children'>;
@@ -553,8 +554,9 @@ declare const useThreadDialogContext: () => {
     setIsOpen: react.Dispatch<react.SetStateAction<boolean>>;
 };
 
-declare const useMessageAudio: ({ onEnd, }: {
+declare const useMessageAudio: ({ onEnd, play: passedPlay, }: {
     onEnd: () => void;
+    play?: (args: PlayArgs) => void;
 }) => {
     visualizationAnalyser: AnalyserNode | null;
     play: () => void;

package/dist/index.js

@@ -9066,7 +9066,7 @@ var useRecorder = function(_ref) {
 };
 // src/hooks/audioThreads/useMessageAudio/index.ts
 import { c as _c50 } from "react-compiler-runtime";
-import { useMemo as useMemo18, useRef as useRef8, useState as useState9, useEffect as useEffect10 } from "react";
+import { useMemo as useMemo18, useRef as useRef8, useState as useState9, useEffect as useEffect10, useCallback as useCallback6 } from "react";
 import nlp from "compromise";
 import { Howler } from "howler";
 import { useAudioPlayer as useAudioPlayer2 } from "react-use-audio-player";
@@ -9147,8 +9147,8 @@ var getMessageSentences = function(_ref) {
     });
 };
 var useMessageAudio = function(t0) {
-    var $ = _c50(44);
-    var onEnd = t0.onEnd;
+    var $ = _c50(50);
+    var _onEnd = t0.onEnd, passedPlay = t0.play;
     var _useState9 = _sliced_to_array(useState9(false), 2), isAudioPlayed = _useState9[0], setIsAudioPlayed = _useState9[1];
     var t1;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -9251,8 +9251,56 @@ var useMessageAudio = function(t0) {
     }
     var unplayedMessageSentences = t3;
     var t4;
-    if ($[12] !== audioPlayer || $[13] !== isAudioPlayed || $[14] !== isPlaying || $[15] !== latestMessageProps.latestMessage || $[16] !== nextAudioPlayer || $[17] !== onEnd || $[18] !== superinterfaceContext || $[19] !== unplayedMessageSentences) {
-        t4 = function() {
+    if ($[12] !== audioPlayer || $[13] !== isAudioPlayed || $[14] !== nextAudioPlayer || $[15] !== superinterfaceContext.baseUrl || $[16] !== superinterfaceContext.variables || $[17] !== unplayedMessageSentences) {
+        t4 = function(t52) {
+            var input_0 = t52.input, onPlay = t52.onPlay, onStop = t52.onStop, onEnd_0 = t52.onEnd;
+            var searchParams = new URLSearchParams(_objectSpread45({
+                input: input_0
+            }, superinterfaceContext.variables));
+            audioPlayer.load("".concat(superinterfaceContext.baseUrl, "/tts?").concat(searchParams), {
+                format: "mp3",
+                autoplay: isAudioPlayed,
+                html5: isHtmlAudioSupported,
+                onplay: onPlay,
+                onstop: onStop,
+                onload: function() {
+                    var nextUnplayedMessageSentence = unplayedMessageSentences[1];
+                    if (!nextUnplayedMessageSentence) {
+                        return;
+                    }
+                    var isNextFullSentence = FULL_SENTENCE_REGEX.test(nextUnplayedMessageSentence.sentence);
+                    if (!isNextFullSentence) {
+                        return;
+                    }
+                    var nextSearchParams = new URLSearchParams(_objectSpread45({
+                        input: nextUnplayedMessageSentence.sentence
+                    }, superinterfaceContext.variables));
+                    nextAudioPlayer.load("".concat(superinterfaceContext.baseUrl, "/tts?").concat(nextSearchParams), {
+                        format: "mp3",
+                        autoplay: false,
+                        html5: isHtmlAudioSupported
+                    });
+                },
+                onend: onEnd_0
+            });
+        };
+        $[12] = audioPlayer;
+        $[13] = isAudioPlayed;
+        $[14] = nextAudioPlayer;
+        $[15] = superinterfaceContext.baseUrl;
+        $[16] = superinterfaceContext.variables;
+        $[17] = unplayedMessageSentences;
+        $[18] = t4;
+    } else {
+        t4 = $[18];
+    }
+    var defaultPlay = t4;
+    var t5;
+    t5 = passedPlay || defaultPlay;
+    var play = t5;
+    var t6;
+    if ($[19] !== audioPlayer.playing || $[20] !== isPlaying || $[21] !== latestMessageProps.latestMessage || $[22] !== _onEnd || $[23] !== play || $[24] !== unplayedMessageSentences) {
+        t6 = function() {
             if (isPlaying) {
                 return;
             }
@@ -9281,17 +9329,13 @@ var useMessageAudio = function(t0) {
                     firstUnplayedMessageSentence
                 ]);
             });
-            var searchParams = new URLSearchParams(_objectSpread45({
-                input: firstUnplayedMessageSentence.sentence
-            }, superinterfaceContext.variables));
-            audioPlayer.load("".concat(superinterfaceContext.baseUrl, "/tts?").concat(searchParams), {
-                format: "mp3",
-                autoplay: isAudioPlayed,
-                html5: isHtmlAudioSupported,
-                onplay: function() {
+            var input_1 = firstUnplayedMessageSentence.sentence;
+            play({
+                input: input_1,
+                onPlay: function() {
                     setIsAudioPlayed(true);
                 },
-                onstop: function() {
+                onStop: function() {
                     setStoppedMessageIds(function(prev_0) {
                         return _to_consumable_array(prev_0).concat([
                             firstUnplayedMessageSentence.messageId
@@ -9299,47 +9343,27 @@ var useMessageAudio = function(t0) {
                     });
                     setIsPlaying(false);
                 },
-                onload: function() {
-                    var nextUnplayedMessageSentence = unplayedMessageSentences[1];
-                    if (!nextUnplayedMessageSentence) {
-                        return;
-                    }
-                    var isNextFullSentence = FULL_SENTENCE_REGEX.test(nextUnplayedMessageSentence.sentence);
-                    if (!isNextFullSentence) {
-                        return;
-                    }
-                    var nextSearchParams = new URLSearchParams(_objectSpread45({
-                        input: nextUnplayedMessageSentence.sentence
-                    }, superinterfaceContext.variables));
-                    nextAudioPlayer.load("".concat(superinterfaceContext.baseUrl, "/tts?").concat(nextSearchParams), {
-                        format: "mp3",
-                        autoplay: false,
-                        html5: isHtmlAudioSupported
-                    });
-                },
-                onend: function() {
+                onEnd: function() {
                     setIsPlaying(false);
                     if (unplayedMessageSentences.length === 1 && latestMessageProps.latestMessage.status !== "in_progress") {
-                        onEnd();
+                        _onEnd();
                     }
                 }
             });
         };
-        $[12] = audioPlayer;
-        $[13] = isAudioPlayed;
-        $[14] = isPlaying;
-        $[15] = latestMessageProps.latestMessage;
-        $[16] = nextAudioPlayer;
-        $[17] = onEnd;
-        $[18] = superinterfaceContext;
-        $[19] = unplayedMessageSentences;
-        $[20] = t4;
+        $[19] = audioPlayer.playing;
+        $[20] = isPlaying;
+        $[21] = latestMessageProps.latestMessage;
+        $[22] = _onEnd;
+        $[23] = play;
+        $[24] = unplayedMessageSentences;
+        $[25] = t6;
     } else {
-        t4 = $[20];
+        t6 = $[25];
     }
-    var t5;
-    if ($[21] !== audioPlayer || $[22] !== isPlaying || $[23] !== latestMessageProps || $[24] !== nextAudioPlayer || $[25] !== onEnd || $[26] !== playedMessageSentences || $[27] !== superinterfaceContext || $[28] !== unplayedMessageSentences) {
-        t5 = [
+    var t7;
+    if ($[26] !== audioPlayer || $[27] !== isPlaying || $[28] !== latestMessageProps || $[29] !== nextAudioPlayer || $[30] !== _onEnd || $[31] !== play || $[32] !== playedMessageSentences || $[33] !== superinterfaceContext || $[34] !== unplayedMessageSentences) {
+        t7 = [
             unplayedMessageSentences,
             isPlaying,
             superinterfaceContext,
@@ -9347,37 +9371,39 @@ var useMessageAudio = function(t0) {
             audioPlayer,
             nextAudioPlayer,
             playedMessageSentences,
-            onEnd
+            _onEnd,
+            play
         ];
-        $[21] = audioPlayer;
-        $[22] = isPlaying;
-        $[23] = latestMessageProps;
-        $[24] = nextAudioPlayer;
-        $[25] = onEnd;
-        $[26] = playedMessageSentences;
-        $[27] = superinterfaceContext;
-        $[28] = unplayedMessageSentences;
-        $[29] = t5;
-    } else {
-        t5 = $[29];
-    }
-    useEffect10(t4, t5);
-    var t6;
-    if ($[30] !== audioPlayer) {
-        t6 = [
+        $[26] = audioPlayer;
+        $[27] = isPlaying;
+        $[28] = latestMessageProps;
+        $[29] = nextAudioPlayer;
+        $[30] = _onEnd;
+        $[31] = play;
+        $[32] = playedMessageSentences;
+        $[33] = superinterfaceContext;
+        $[34] = unplayedMessageSentences;
+        $[35] = t7;
+    } else {
+        t7 = $[35];
+    }
+    useEffect10(t6, t7);
+    var t8;
+    if ($[36] !== audioPlayer) {
+        t8 = [
             audioPlayer
         ];
-        $[30] = audioPlayer;
-        $[31] = t6;
+        $[36] = audioPlayer;
+        $[37] = t8;
     } else {
-        t6 = $[31];
+        t8 = $[37];
     }
-    useEffect10(_temp11, t6);
+    useEffect10(_temp11, t8);
     var _useState94 = _sliced_to_array(useState9(null), 2), audioEngine = _useState94[0], setAudioEngine = _useState94[1];
     var isAudioEngineInited = useRef8(false);
-    var t7;
-    if ($[32] !== audioPlayer.playing) {
-        t7 = function() {
+    var t9;
+    if ($[38] !== audioPlayer.playing) {
+        t9 = function() {
             if (!audioPlayer.playing) {
                 return;
             }
@@ -9398,63 +9424,63 @@ var useMessageAudio = function(t0) {
                 });
             }
         };
-        $[32] = audioPlayer.playing;
-        $[33] = t7;
+        $[38] = audioPlayer.playing;
+        $[39] = t9;
     } else {
-        t7 = $[33];
+        t9 = $[39];
     }
-    var t8;
-    if ($[34] !== audioPlayer) {
-        t8 = [
+    var t10;
+    if ($[40] !== audioPlayer) {
+        t10 = [
             audioPlayer,
             isAudioEngineInited
         ];
-        $[34] = audioPlayer;
-        $[35] = t8;
+        $[40] = audioPlayer;
+        $[41] = t10;
     } else {
-        t8 = $[35];
+        t10 = $[41];
     }
-    useEffect10(t7, t8);
-    var t9;
+    useEffect10(t9, t10);
+    var t11;
     bb1: {
         if (!audioEngine) {
-            t9 = null;
+            t11 = null;
             break bb1;
         }
         var result;
-        if ($[36] !== audioEngine.audioContext || $[37] !== audioEngine.source) {
+        if ($[42] !== audioEngine.audioContext || $[43] !== audioEngine.source) {
             result = audioEngine.audioContext.createAnalyser();
             audioEngine.source.connect(audioEngine.audioContext.destination);
             audioEngine.source.connect(result);
-            $[36] = audioEngine.audioContext;
-            $[37] = audioEngine.source;
-            $[38] = result;
+            $[42] = audioEngine.audioContext;
+            $[43] = audioEngine.source;
+            $[44] = result;
         } else {
-            result = $[38];
+            result = $[44];
         }
-        t9 = result;
+        t11 = result;
     }
-    var visualizationAnalyser = t9;
-    var t10;
-    t10 = isPlaying || unplayedMessageSentences.length > 0;
-    var isPending = t10;
-    var t11;
-    if ($[39] !== audioPlayer || $[40] !== isAudioPlayed || $[41] !== isPending || $[42] !== visualizationAnalyser) {
-        t11 = _objectSpread45(_objectSpread45({
+    var visualizationAnalyser = t11;
+    var t12;
+    t12 = isPlaying || unplayedMessageSentences.length > 0;
+    var isPending = t12;
+    var t13;
+    if ($[45] !== audioPlayer || $[46] !== isAudioPlayed || $[47] !== isPending || $[48] !== visualizationAnalyser) {
+        t13 = _objectSpread45(_objectSpread45({
             isPending: isPending,
             isAudioPlayed: isAudioPlayed
         }, audioPlayer), {}, {
             visualizationAnalyser: visualizationAnalyser
         });
-        $[39] = audioPlayer;
-        $[40] = isAudioPlayed;
-        $[41] = isPending;
-        $[42] = visualizationAnalyser;
-        $[43] = t11;
+        $[45] = audioPlayer;
+        $[46] = isAudioPlayed;
+        $[47] = isPending;
+        $[48] = visualizationAnalyser;
+        $[49] = t13;
     } else {
-        t11 = $[43];
+        t13 = $[49];
     }
-    return t11;
+    return t13;
 };
 function _temp11() {
     if (isHtmlAudioSupported) {
@@ -9556,8 +9582,8 @@ function _asyncToGenerator12(n) {
     };
 }
 var Content8 = function(t0) {
-    var $ = _c51(21);
-    var children = t0.children, className = t0.className, style = t0.style;
+    var $ = _c51(24);
+    var children = t0.children, className = t0.className, style = t0.style, play = t0.play;
     var addToast = useToasts().addToast;
     var queryClient = useQueryClient6();
     var threadContext = useSuperinterfaceContext();
@@ -9624,11 +9650,9 @@ var Content8 = function(t0) {
     var microphonePermission = usePermission(t2);
     var t3;
     if ($[3] !== microphonePermission || $[4] !== recorderProps) {
-        t3 = {
-            onEnd: function() {
-                if (microphonePermission === "granted") {
-                    recorderProps.start();
-                }
+        t3 = function() {
+            if (microphonePermission === "granted") {
+                recorderProps.start();
             }
         };
         $[3] = microphonePermission;
@@ -9637,41 +9661,53 @@ var Content8 = function(t0) {
     } else {
         t3 = $[5];
     }
-    var messageAudioProps = useMessageAudio(t3);
-    var t4 = recorderProps;
-    var t5;
-    if ($[6] !== createMessageProps || $[7] !== messageAudioProps || $[8] !== t4) {
-        t5 = {
-            recorderProps: t4,
-            createMessageProps: createMessageProps,
-            messageAudioProps: messageAudioProps
+    var t4;
+    if ($[6] !== play || $[7] !== t3) {
+        t4 = {
+            play: play,
+            onEnd: t3
         };
-        $[6] = createMessageProps;
-        $[7] = messageAudioProps;
+        $[6] = play;
+        $[7] = t3;
         $[8] = t4;
-        $[9] = t5;
     } else {
-        t5 = $[9];
+        t4 = $[8];
     }
-    var status = useStatus(t5).status;
-    var t6 = recorderProps;
-    var t7;
-    if ($[10] !== messageAudioProps || $[11] !== status || $[12] !== t6) {
-        t7 = {
-            status: status,
-            recorderProps: t6,
+    var messageAudioProps = useMessageAudio(t4);
+    var t5 = recorderProps;
+    var t6;
+    if ($[9] !== createMessageProps || $[10] !== messageAudioProps || $[11] !== t5) {
+        t6 = {
+            recorderProps: t5,
+            createMessageProps: createMessageProps,
             messageAudioProps: messageAudioProps
         };
+        $[9] = createMessageProps;
         $[10] = messageAudioProps;
-        $[11] = status;
+        $[11] = t5;
         $[12] = t6;
-        $[13] = t7;
     } else {
-        t7 = $[13];
+        t6 = $[12];
     }
+    var status = useStatus(t6).status;
+    var t7 = recorderProps;
     var t8;
-    if ($[14] !== children || $[15] !== className || $[16] !== style) {
-        t8 = /* @__PURE__ */ _jsx82(Flex29, {
+    if ($[13] !== messageAudioProps || $[14] !== status || $[15] !== t7) {
+        t8 = {
+            status: status,
+            recorderProps: t7,
+            messageAudioProps: messageAudioProps
+        };
+        $[13] = messageAudioProps;
+        $[14] = status;
+        $[15] = t7;
+        $[16] = t8;
+    } else {
+        t8 = $[16];
+    }
+    var t9;
+    if ($[17] !== children || $[18] !== className || $[19] !== style) {
+        t9 = /* @__PURE__ */ _jsx82(Flex29, {
             direction: "column",
             flexGrow: "1",
             p: "9",
@@ -9679,26 +9715,26 @@ var Content8 = function(t0) {
             style: style,
             children: children
         });
-        $[14] = children;
-        $[15] = className;
-        $[16] = style;
-        $[17] = t8;
+        $[17] = children;
+        $[18] = className;
+        $[19] = style;
+        $[20] = t9;
     } else {
-        t8 = $[17];
+        t9 = $[20];
     }
-    var t9;
-    if ($[18] !== t7 || $[19] !== t8) {
-        t9 = /* @__PURE__ */ _jsx82(AudioThreadContext.Provider, {
-            value: t7,
-            children: t8
+    var t10;
+    if ($[21] !== t8 || $[22] !== t9) {
+        t10 = /* @__PURE__ */ _jsx82(AudioThreadContext.Provider, {
+            value: t8,
+            children: t9
         });
-        $[18] = t7;
-        $[19] = t8;
-        $[20] = t9;
+        $[21] = t8;
+        $[22] = t9;
+        $[23] = t10;
     } else {
-        t9 = $[20];
+        t10 = $[23];
     }
-    return t9;
+    return t10;
 };
 var Root12 = function(_ref) {
     var children = _ref.children, rest = _objectWithoutProperties4(_ref, _excluded4);
@@ -9722,7 +9758,7 @@ function _temp23() {
     return _temp23.apply(this, arguments);
 }
 // src/components/threads/AudioThread/Visualization/index.tsx
-import { useContext as useContext16, useState as useState11, useCallback as useCallback7, useEffect as useEffect12 } from "react";
+import { useContext as useContext16, useState as useState11, useCallback as useCallback8, useEffect as useEffect12 } from "react";
 import _9 from "lodash";
 import { Flex as Flex31 } from "@radix-ui/themes";
 // src/hooks/threads/useAudioThreadContext/index.ts
@@ -9733,14 +9769,14 @@ var useAudioThreadContext = function() {
 // src/components/threads/AudioThread/BarsVisualizer/index.tsx
 import _8 from "lodash";
 import { Flex as Flex30, Grid } from "@radix-ui/themes";
-import { useState as useState10, useEffect as useEffect11, useCallback as useCallback6 } from "react";
+import { useState as useState10, useEffect as useEffect11, useCallback as useCallback7 } from "react";
 import { cluster } from "radash";
 import { jsx as _jsx83 } from "react/jsx-runtime";
 var barCount = 4;
 var BarsVisualizer = function(_ref) {
     var visualizationAnalyser = _ref.visualizationAnalyser, backgroundColor = _ref.backgroundColor, height = _ref.height, barWidth = _ref.barWidth;
     var _useState10 = _sliced_to_array(useState10([]), 2), barHeights = _useState10[0], setBarHeights = _useState10[1];
-    var draw = useCallback6(function(_ref2) {
+    var draw = useCallback7(function(_ref2) {
         var visualizationAnalyser_0 = _ref2.visualizationAnalyser;
         if (!visualizationAnalyser_0) {
             setBarHeights(Array(barCount).fill(0));
@@ -9843,7 +9879,7 @@ var Visualization = function(props) {
     var audioThreadContext = useAudioThreadContext();
     var assistantNameContext = useContext16(AssistantNameContext);
     var _useState11 = _sliced_to_array(useState11(0), 2), scale = _useState11[0], setScale = _useState11[1];
-    var draw = useCallback7(function(_ref) {
+    var draw = useCallback8(function(_ref) {
         var visualizationAnalyser = _ref.visualizationAnalyser;
         if (!visualizationAnalyser) {
             setScale(1);