@superinterface/react 2.13.0 → 2.13.3

package/dist/index.js

@@ -2917,7 +2917,7 @@ var useRecorder = function(param) {
     var silenceAnalyser = useMemo11(function() {
         if (!audioEngine) return null;
         var result = audioEngine.audioContext.createAnalyser();
-        result.minDecibels = -45;
+        result.minDecibels = -60;
         audioEngine.source.connect(result);
         return result;
     }, [
@@ -2960,9 +2960,9 @@ var useRecorder = function(param) {
         if (status !== "recording") return;
         if (!silenceStart) return;
         if (!noiseStart) return;
-        if (!silenceStart.isBefore(dayjs2().subtract(1, "second"))) return;
+        if (!silenceStart.isBefore(dayjs2().subtract(1.5, "second"))) return;
         audioCaptureProps.stop();
-    }, 100);
+    }, 300);
     return _object_spread_props(_object_spread({}, audioCaptureProps), {
         status: status,
         visualizationAnalyser: visualizationAnalyser
@@ -3232,7 +3232,8 @@ var Root8 = function(param) {
     });
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
-import { useContext as useContext13 } from "react";
+import { useContext as useContext13, useState as useState6, useCallback as useCallback5, useEffect as useEffect7 } from "react";
+import _9 from "lodash";
 import { Flex as Flex22 } from "@radix-ui/themes";
 // src/hooks/threads/useAudioThreadContext/index.ts
 import { useContext as useContext12 } from "react";
@@ -3308,6 +3309,30 @@ import { jsx as jsx57, jsxs as jsxs18 } from "react/jsx-runtime";
 var Visualization = function() {
     var audioThreadContext = useAudioThreadContext();
     var assistantNameContext = useContext13(AssistantNameContext);
+    var _useState6 = _sliced_to_array(useState6(0), 2), scale = _useState6[0], setScale = _useState6[1];
+    var draw = useCallback5(function(param) {
+        var visualizationAnalyser = param.visualizationAnalyser;
+        if (!visualizationAnalyser) {
+            setScale(1);
+            return;
+        }
+        var frequencyData = new Uint8Array(visualizationAnalyser.frequencyBinCount / 15);
+        visualizationAnalyser.getByteFrequencyData(frequencyData);
+        setScale(1 + _9.mean(frequencyData) / 255 / 10);
+        requestAnimationFrame(function() {
+            return draw({
+                visualizationAnalyser: visualizationAnalyser
+            });
+        });
+    }, []);
+    useEffect7(function() {
+        draw({
+            visualizationAnalyser: audioThreadContext.recorderProps.visualizationAnalyser
+        });
+    }, [
+        draw,
+        audioThreadContext
+    ]);
     return /* @__PURE__ */ jsxs18(Flex22, {
         direction: "column",
         align: "center",
@@ -3322,7 +3347,8 @@ var Visualization = function() {
                 width: "200px",
                 style: {
                     backgroundColor: audioThreadContext.status === "playing" ? "var(--accent-4)" : "var(--gray-4)",
-                    borderRadius: "9999px"
+                    borderRadius: "9999px",
+                    scale: scale
                 },
                 children: /* @__PURE__ */ jsx57(BarsVisualizer, {
                     visualizationAnalyser: audioThreadContext.messageAudioProps.visualizationAnalyser,
@@ -3345,20 +3371,35 @@ var Visualization = function() {
         ]
     });
 };
-// src/components/threads/AudioThread/Status/StatusMessage.tsx
+// src/components/threads/AudioThread/Status/StatusMessages.tsx
 import { Flex as Flex23, Text as Text7 } from "@radix-ui/themes";
-import { jsx as jsx58 } from "react/jsx-runtime";
-var StatusMessage = function(param) {
-    var children = param.children;
-    return /* @__PURE__ */ jsx58(Flex23, {
+import { jsx as jsx58, jsxs as jsxs19 } from "react/jsx-runtime";
+var html = function(param) {
+    var texts = param.texts;
+    return "\n  .status-messages-texts:after {\n    content: '".concat(texts[0], "';\n    animation: texts ").concat(texts.length * 5, "s linear infinite;\n  }\n\n  @keyframes texts {\n    ").concat(texts.map(function(_10, i) {
+        return "\n      ".concat(i * 100 / texts.length, '% {\n        content: "').concat(texts[i], '";\n      }\n    ');
+    }).join(""), "\n  }");
+};
+var StatusMessages = function(param) {
+    var texts = param.texts;
+    return /* @__PURE__ */ jsxs19(Flex23, {
         justify: "center",
-        pb: "9",
-        children: /* @__PURE__ */ jsx58(Text7, {
-            size: "2",
-            weight: "regular",
-            color: "gray",
-            children: children
-        })
+        pb: "5",
+        children: [
+            /* @__PURE__ */ jsx58(Text7, {
+                size: "2",
+                weight: "regular",
+                color: "gray",
+                className: "status-messages-texts"
+            }),
+            /* @__PURE__ */ jsx58("style", {
+                dangerouslySetInnerHTML: {
+                    __html: html({
+                        texts: texts
+                    })
+                }
+            })
+        ]
     });
 };
 // src/components/threads/AudioThread/Status/index.tsx
@@ -3366,8 +3407,13 @@ import { jsx as jsx59 } from "react/jsx-runtime";
 var Status = function() {
     var audioThreadContext = useAudioThreadContext();
     if (audioThreadContext.status === "recording") {
-        return /* @__PURE__ */ jsx59(StatusMessage, {
-            children: "Listening"
+        return /* @__PURE__ */ jsx59(StatusMessages, {
+            texts: [
+                "Start speaking",
+                "Listening",
+                "Finish speaking to send",
+                "Click the button below to send manually"
+            ]
         });
     }
     if ([
@@ -3375,17 +3421,23 @@ var Status = function() {
         "idle",
         "playerPaused"
     ].includes(audioThreadContext.status)) {
-        return /* @__PURE__ */ jsx59(StatusMessage, {
-            children: "Click to activate"
+        return /* @__PURE__ */ jsx59(StatusMessages, {
+            texts: [
+                "Click the button below to activate"
+            ]
         });
     }
     if (audioThreadContext.status === "playing") {
-        return /* @__PURE__ */ jsx59(StatusMessage, {
-            children: "Click to interrupt"
+        return /* @__PURE__ */ jsx59(StatusMessages, {
+            texts: [
+                "Click the button below to interrupt"
+            ]
         });
     }
-    return /* @__PURE__ */ jsx59(StatusMessage, {
-        children: "Thinking"
+    return /* @__PURE__ */ jsx59(StatusMessages, {
+        texts: [
+            "Thinking"
+        ]
     });
 };
 // src/components/threads/AudioThread/Form/index.tsx
@@ -3411,12 +3463,12 @@ var MicIcon = function(props) {
 // src/components/threads/AudioThread/Form/ActionButton/index.tsx
 import { Flex as Flex24, IconButton as IconButton4 } from "@radix-ui/themes";
 import { StopIcon as StopIcon2, PauseIcon, ArrowUpIcon as ArrowUpIcon2, ResumeIcon } from "@radix-ui/react-icons";
-import { jsx as jsx61, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs20 } from "react/jsx-runtime";
 var ActionButton = function() {
     var audioThreadContext = useAudioThreadContext();
     var superinterfaceContext = useSuperinterfaceContext();
     if (audioThreadContext.status === "recording") {
-        return /* @__PURE__ */ jsxs19(Flex24, {
+        return /* @__PURE__ */ jsxs20(Flex24, {
             align: "center",
             children: [
                 /* @__PURE__ */ jsx61(Flex24, {
@@ -3487,14 +3539,14 @@ var ActionButton = function() {
     });
 };
 // src/components/threads/AudioThread/Form/index.tsx
-import { jsx as jsx62, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs21 } from "react/jsx-runtime";
 var Form = function() {
     var audioThreadContext = useAudioThreadContext();
-    return /* @__PURE__ */ jsxs20(Flex25, {
+    return /* @__PURE__ */ jsxs21(Flex25, {
         direction: "column",
         align: "center",
         children: [
-            /* @__PURE__ */ jsxs20(Flex25, {
+            /* @__PURE__ */ jsxs21(Flex25, {
                 pb: "3",
                 align: "center",
                 children: [
@@ -3529,9 +3581,9 @@ var Form = function() {
     });
 };
 // src/components/threads/AudioThread/index.tsx
-import { jsx as jsx63, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs22 } from "react/jsx-runtime";
 var AudioThread = function(props) {
-    return /* @__PURE__ */ jsxs21(Root8, _object_spread_props(_object_spread({}, props), {
+    return /* @__PURE__ */ jsxs22(Root8, _object_spread_props(_object_spread({}, props), {
         children: [
             /* @__PURE__ */ jsx63(Visualization, {}),
             /* @__PURE__ */ jsx63(Status, {}),
@@ -3543,9 +3595,9 @@ AudioThread.Root = Root8;
 AudioThread.Visualization = Visualization;
 AudioThread.Form = Form;
 // src/components/threads/AudioThreadDialog/index.tsx
-import { jsx as jsx64, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs23 } from "react/jsx-runtime";
 var AudioThreadDialog = function() {
-    return /* @__PURE__ */ jsxs22(Root6, {
+    return /* @__PURE__ */ jsxs23(Root6, {
         children: [
             /* @__PURE__ */ jsx64(Content4.Root, {
                 children: /* @__PURE__ */ jsx64(AudioThread, {})
@@ -3570,7 +3622,7 @@ import { Flex as Flex26 } from "@radix-ui/themes";
 // src/components/suggestions/Suggestions/Item.tsx
 import { ArrowUpIcon as ArrowUpIcon3 } from "@radix-ui/react-icons";
 import { Text as Text8, Button as Button3, Spinner } from "@radix-ui/themes";
-import { jsx as jsx65, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs24 } from "react/jsx-runtime";
 var Item = function(param) {
     var suggestion = param.suggestion, isDisabled = param.isDisabled;
     var _useCreateMessage = useCreateMessage(), createMessage = _useCreateMessage.createMessage, isPending = _useCreateMessage.isPending;
@@ -3588,7 +3640,7 @@ var Item = function(param) {
 };
 var Content5 = function(param) {
     var onClick = param.onClick, isDisabled = param.isDisabled, isPending = param.isPending, children = param.children;
-    return /* @__PURE__ */ jsxs23(Button3, {
+    return /* @__PURE__ */ jsxs24(Button3, {
         variant: "soft",
         onClick: onClick,
         disabled: isDisabled,