@superinterface/react 2.13.0 → 2.13.1

package/dist/index.cjs

@@ -3472,20 +3472,35 @@ var Visualization = function() {
         ]
     });
 };
-// src/components/threads/AudioThread/Status/StatusMessage.tsx
+// src/components/threads/AudioThread/Status/StatusMessages.tsx
 var import_themes44 = require("@radix-ui/themes");
 var import_jsx_runtime58 = require("react/jsx-runtime");
-var StatusMessage = function(param) {
-    var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes44.Flex, {
+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 * 3, "s linear infinite;\n  }\n\n  @keyframes texts {\n    ").concat(texts.map(function(_9, 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__ */ (0, import_jsx_runtime58.jsxs)(import_themes44.Flex, {
         justify: "center",
-        pb: "9",
-        children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes44.Text, {
-            size: "2",
-            weight: "regular",
-            color: "gray",
-            children: children
-        })
+        pb: "5",
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes44.Text, {
+                size: "2",
+                weight: "regular",
+                color: "gray",
+                className: "status-messages-texts"
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("style", {
+                dangerouslySetInnerHTML: {
+                    __html: html({
+                        texts: texts
+                    })
+                }
+            })
+        ]
     });
 };
 // src/components/threads/AudioThread/Status/index.tsx
@@ -3493,8 +3508,13 @@ var import_jsx_runtime59 = require("react/jsx-runtime");
 var Status = function() {
     var audioThreadContext = useAudioThreadContext();
     if (audioThreadContext.status === "recording") {
-        return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StatusMessage, {
-            children: "Listening"
+        return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StatusMessages, {
+            texts: [
+                "Start speaking",
+                "Listening",
+                "Finish speaking to send",
+                "Click the button below to send manually"
+            ]
         });
     }
     if ([
@@ -3502,17 +3522,23 @@ var Status = function() {
         "idle",
         "playerPaused"
     ].includes(audioThreadContext.status)) {
-        return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StatusMessage, {
-            children: "Click to activate"
+        return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StatusMessages, {
+            texts: [
+                "Click the button below to activate"
+            ]
         });
     }
     if (audioThreadContext.status === "playing") {
-        return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StatusMessage, {
-            children: "Click to interrupt"
+        return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StatusMessages, {
+            texts: [
+                "Click the button below to interrupt"
+            ]
         });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StatusMessage, {
-        children: "Thinking"
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StatusMessages, {
+        texts: [
+            "Thinking"
+        ]
     });
 };
 // src/components/threads/AudioThread/Form/index.tsx