@cntyclub/agent-react 0.11.0 → 0.12.0

package/dist/components/agent-voice-recorder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"agent-voice-recorder.d.ts","sourceRoot":"","sources":["../../src/components/agent-voice-recorder.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,uBAAuB;IACtC,iFAAiF;IACjF,UAAU,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,UAAU,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAC7C,4EAA4E;IAC5E,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,6EAA6E;IAC7E,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,sEAAsE;IACtE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAkBD;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,uBAAuB,qBAkLhH"}
+{"version":3,"file":"agent-voice-recorder.d.ts","sourceRoot":"","sources":["../../src/components/agent-voice-recorder.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,uBAAuB;IACtC,iFAAiF;IACjF,UAAU,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,UAAU,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAC7C,4EAA4E;IAC5E,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,6EAA6E;IAC7E,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,sEAAsE;IACtE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAqBD;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,uBAAuB,qBAwRhH"}

package/dist/index.js

@@ -312,6 +312,7 @@ function AgentImageLightbox({ src, alt, onClose }) {
     document.body
   );
 }
+var BAR_COUNT = 40;
 function formatClock(totalSeconds) {
   const minutes = Math.floor(totalSeconds / 60);
   const seconds = totalSeconds % 60;
@@ -335,8 +336,24 @@ function AgentVoiceRecorder({ maxSeconds, transcribe, onDone, onCancel, onError
   const audioUrlRef = React11.useRef(null);
   const audioRef = React11.useRef(null);
   const timerRef = React11.useRef(null);
+  const canvasRef = React11.useRef(null);
+  const audioContextRef = React11.useRef(null);
+  const analyserRef = React11.useRef(null);
+  const rafRef = React11.useRef(null);
+  const levelsRef = React11.useRef(new Array(BAR_COUNT).fill(0));
   const onErrorRef = React11.useRef(onError);
   onErrorRef.current = onError;
+  const stopMeter = React11.useCallback(() => {
+    if (rafRef.current != null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    analyserRef.current = null;
+    const ctx = audioContextRef.current;
+    audioContextRef.current = null;
+    if (ctx && ctx.state !== "closed") void ctx.close().catch(() => {
+    });
+  }, []);
   const stopTracks = React11.useCallback(() => {
     streamRef.current?.getTracks().forEach((track) => track.stop());
     streamRef.current = null;
@@ -344,6 +361,73 @@ function AgentVoiceRecorder({ maxSeconds, transcribe, onDone, onCancel, onError
       clearInterval(timerRef.current);
       timerRef.current = null;
     }
+    stopMeter();
+  }, [stopMeter]);
+  const startMeter = React11.useCallback((stream) => {
+    const Ctor = typeof window === "undefined" ? void 0 : window.AudioContext ?? window.webkitAudioContext;
+    if (!Ctor) return;
+    let context;
+    try {
+      context = new Ctor();
+    } catch {
+      return;
+    }
+    audioContextRef.current = context;
+    const source = context.createMediaStreamSource(stream);
+    const analyser = context.createAnalyser();
+    analyser.fftSize = 1024;
+    analyser.smoothingTimeConstant = 0.75;
+    source.connect(analyser);
+    analyserRef.current = analyser;
+    levelsRef.current = new Array(BAR_COUNT).fill(0);
+    const buffer = new Uint8Array(analyser.fftSize);
+    const draw = () => {
+      const canvas = canvasRef.current;
+      const activeAnalyser = analyserRef.current;
+      if (!canvas || !activeAnalyser) return;
+      const ctx2d = canvas.getContext("2d");
+      if (!ctx2d) return;
+      activeAnalyser.getByteTimeDomainData(buffer);
+      let sumSquares = 0;
+      for (let i = 0; i < buffer.length; i += 1) {
+        const centered = (buffer[i] - 128) / 128;
+        sumSquares += centered * centered;
+      }
+      const rms = Math.sqrt(sumSquares / buffer.length);
+      const level = Math.min(1, rms * 3.2);
+      const levels = levelsRef.current;
+      levels.push(level);
+      levels.shift();
+      const dpr = Math.min(2, typeof window === "undefined" ? 1 : window.devicePixelRatio || 1);
+      const cssWidth = canvas.clientWidth || 1;
+      const cssHeight = canvas.clientHeight || 1;
+      const pxWidth = Math.round(cssWidth * dpr);
+      const pxHeight = Math.round(cssHeight * dpr);
+      if (canvas.width !== pxWidth) canvas.width = pxWidth;
+      if (canvas.height !== pxHeight) canvas.height = pxHeight;
+      ctx2d.clearRect(0, 0, pxWidth, pxHeight);
+      ctx2d.fillStyle = getComputedStyle(canvas).color || "currentColor";
+      const gap = Math.max(1, pxWidth / BAR_COUNT / 3);
+      const barWidth = Math.max(1, (pxWidth - gap * (BAR_COUNT - 1)) / BAR_COUNT);
+      const midY = pxHeight / 2;
+      const minBar = Math.max(1, dpr);
+      const radius = barWidth / 2;
+      for (let i = 0; i < BAR_COUNT; i += 1) {
+        const value = levels[i];
+        const barHeight = Math.max(minBar, value * pxHeight);
+        const x = i * (barWidth + gap);
+        const y = midY - barHeight / 2;
+        if (typeof ctx2d.roundRect === "function") {
+          ctx2d.beginPath();
+          ctx2d.roundRect(x, y, barWidth, barHeight, Math.min(radius, barHeight / 2));
+          ctx2d.fill();
+        } else {
+          ctx2d.fillRect(x, y, barWidth, barHeight);
+        }
+      }
+      rafRef.current = requestAnimationFrame(draw);
+    };
+    rafRef.current = requestAnimationFrame(draw);
   }, []);
   React11.useEffect(() => {
     let cancelled = false;
@@ -360,6 +444,7 @@ function AgentVoiceRecorder({ maxSeconds, transcribe, onDone, onCancel, onError
           return;
         }
         streamRef.current = stream;
+        startMeter(stream);
         const mimeType = pickMimeType();
         const recorder = new MediaRecorder(stream, mimeType ? { mimeType } : void 0);
         recorderRef.current = recorder;
@@ -444,7 +529,7 @@ function AgentVoiceRecorder({ maxSeconds, transcribe, onDone, onCancel, onError
       transition: { duration: 0.15 },
       children: [
         phase === "recording" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-2 text-sm", children: [
             /* @__PURE__ */ jsx(
               motion.span,
               {
@@ -453,13 +538,9 @@ function AgentVoiceRecorder({ maxSeconds, transcribe, onDone, onCancel, onError
                 transition: { duration: 1.2, repeat: Infinity }
               }
             ),
-            /* @__PURE__ */ jsx("span", { className: "font-medium tabular-nums", children: formatClock(elapsed) }),
-            /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
-              "/ ",
-              formatClock(maxSeconds)
-            ] })
+            /* @__PURE__ */ jsx("span", { className: "font-medium tabular-nums", children: formatClock(elapsed) })
           ] }),
-          /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+          /* @__PURE__ */ jsx("canvas", { "aria-hidden": true, className: "h-6 min-w-0 flex-1 text-foreground/80", ref: canvasRef }),
           /* @__PURE__ */ jsx(Button, { "aria-label": "Discard recording", onClick: onCancel, size: "icon-sm", type: "button", variant: "ghost", children: /* @__PURE__ */ jsx(Trash2Icon, {}) }),
           /* @__PURE__ */ jsx(Button, { "aria-label": "Stop recording", onClick: stopRecording, size: "icon-sm", type: "button", children: /* @__PURE__ */ jsx(SquareIcon, {}) })
         ] }) : null,