@apteva/apteva-kit 0.1.115 → 0.1.116

package/dist/index.js

@@ -3376,41 +3376,56 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
       stopRecording(true);
     };
   }, []);
-  const drawWaveform = _react.useCallback.call(void 0, () => {
+  const startWaveformLoop = _react.useCallback.call(void 0, () => {
     const canvas = canvasRef.current;
     const analyser = analyserRef.current;
     if (!canvas || !analyser) return;
+    const dpr = window.devicePixelRatio || 1;
+    const rect = canvas.getBoundingClientRect();
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
+    ctx.scale(dpr, dpr);
     const bufferLength = analyser.frequencyBinCount;
     const dataArray = new Uint8Array(bufferLength);
+    const smoothed = new Float32Array(40).fill(2);
     const draw = () => {
       animFrameRef.current = requestAnimationFrame(draw);
       analyser.getByteTimeDomainData(dataArray);
-      const { width, height } = canvas;
-      ctx.clearRect(0, 0, width, height);
-      const barCount = 32;
-      const barWidth = Math.max(2, (width - (barCount - 1) * 2) / barCount);
+      const w = rect.width;
+      const h = rect.height;
+      ctx.clearRect(0, 0, w, h);
+      const barCount = 40;
       const gap = 2;
+      const barWidth = Math.max(2, (w - (barCount - 1) * gap) / barCount);
       const samplesPerBar = Math.floor(bufferLength / barCount);
       for (let i = 0; i < barCount; i++) {
-        let sum = 0;
+        let sumSq = 0;
         for (let j = 0; j < samplesPerBar; j++) {
-          const val = dataArray[i * samplesPerBar + j] - 128;
-          sum += Math.abs(val);
+          const val = (dataArray[i * samplesPerBar + j] - 128) / 128;
+          sumSq += val * val;
         }
-        const avg = sum / samplesPerBar;
-        const barHeight = Math.max(3, avg / 128 * height * 2.5);
+        const rms = Math.sqrt(sumSq / samplesPerBar);
+        const target = Math.max(2, rms * h * 3);
+        smoothed[i] += (target - smoothed[i]) * (target > smoothed[i] ? 0.4 : 0.15);
+        const barHeight = Math.min(smoothed[i], h - 2);
         const x = i * (barWidth + gap);
-        const y = (height - barHeight) / 2;
+        const y = (h - barHeight) / 2;
+        const radius = Math.min(barWidth / 2, barHeight / 2);
         ctx.fillStyle = "#3b82f6";
         ctx.beginPath();
-        ctx.roundRect(x, y, barWidth, barHeight, barWidth / 2);
+        ctx.roundRect(x, y, barWidth, barHeight, radius);
         ctx.fill();
       }
     };
     draw();
   }, []);
+  _react.useEffect.call(void 0, () => {
+    if (isRecording && canvasRef.current && analyserRef.current) {
+      startWaveformLoop();
+    }
+  }, [isRecording, startWaveformLoop]);
   const startRecording = _react.useCallback.call(void 0, async () => {
     const SpeechRecognitionCtor = getSpeechRecognition();
     if (!SpeechRecognitionCtor) return;
@@ -3467,7 +3482,6 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
       recordingTimerRef.current = setInterval(() => {
         setRecordingTime((t) => t + 1);
       }, 1e3);
-      requestAnimationFrame(() => drawWaveform());
       silenceTimerRef.current = setTimeout(() => {
         stopRecording(false);
       }, silenceTimeout + 1e3);
@@ -3476,7 +3490,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
       setFileError("Microphone access denied");
       setTimeout(() => setFileError(null), 3e3);
     }
-  }, [_optionalChain([sttConfig, 'optionalAccess', _57 => _57.language]), silenceTimeout, drawWaveform]);
+  }, [_optionalChain([sttConfig, 'optionalAccess', _57 => _57.language]), silenceTimeout]);
   const finishRecording = _react.useCallback.call(void 0, () => {
     const transcript = finalTranscriptRef.current.trim();
     setIsRecording(false);
@@ -3653,10 +3667,10 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
         style: {
           gridTemplateColumns: isRecording ? gridColsRecording : gridCols,
           gridTemplateAreas: isRecording ? '"plus waveform stop"' : gridAreas,
-          alignItems: "end"
+          alignItems: isRecording ? "center" : "end"
         },
         children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "relative flex-shrink-0 self-end", style: { gridArea: "plus" }, children: isRecording ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-composer-rec-dot", title: "Recording...", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {}) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "relative flex-shrink-0", style: { gridArea: "plus", alignSelf: isRecording ? "center" : "end" }, children: isRecording ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-composer-rec-dot", title: "Recording...", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {}) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
@@ -3717,14 +3731,12 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
                 "canvas",
                 {
                   ref: canvasRef,
-                  width: 300,
-                  height: 36,
                   className: "apteva-composer-waveform-canvas"
                 }
               ),
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-composer-recording-timer", children: formatTime(recordingTime) })
             ] }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "self-end", style: { gridArea: "stop" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "self-center", style: { gridArea: "stop" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
                 onClick: () => stopRecording(false),