@apteva/apteva-kit 0.1.114 → 0.1.116

package/dist/index.js

@@ -1449,9 +1449,12 @@ function PortalDropdown({
   children
 }) {
   const dropdownRef = _react.useRef.call(void 0, null);
-  const [pos, setPos] = _react.useState.call(void 0, { top: 0, left: 0, width: 0 });
+  const [pos, setPos] = _react.useState.call(void 0, null);
   _react.useEffect.call(void 0, () => {
-    if (!open || !anchorRef.current) return;
+    if (!open || !anchorRef.current) {
+      setPos(null);
+      return;
+    }
     const update = () => {
       const rect = anchorRef.current.getBoundingClientRect();
       setPos({
@@ -1487,7 +1490,7 @@ function PortalDropdown({
     document.addEventListener("keydown", handler);
     return () => document.removeEventListener("keydown", handler);
   }, [open, onClose]);
-  if (!open) return null;
+  if (!open || !pos) return null;
   return _reactdom.createPortal.call(void 0, 
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "div",
@@ -1517,7 +1520,7 @@ function CustomSelect({
 }) {
   const [open, setOpen] = _react.useState.call(void 0, false);
   const triggerRef = _react.useRef.call(void 0, null);
-  const selected = _optionalChain([options, 'optionalAccess', _18 => _18.find, 'call', _19 => _19((o) => o.value === value)]);
+  const selected = _optionalChain([options, 'optionalAccess', _18 => _18.find, 'call', _19 => _19((o) => o.label === value || o.value === value)]);
   const close = _react.useCallback.call(void 0, () => setOpen(false), []);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-select relative", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -1533,7 +1536,7 @@ function CustomSelect({
         "aria-hidden": true,
         children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "" }),
-          _optionalChain([options, 'optionalAccess', _20 => _20.map, 'call', _21 => _21((o) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: o.value, children: o.label }, o.value))])
+          _optionalChain([options, 'optionalAccess', _20 => _20.map, 'call', _21 => _21((o) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: o.label, children: o.label }, o.value))])
         ]
       }
     ),
@@ -1565,10 +1568,10 @@ function CustomSelect({
         {
           type: "button",
           onClick: () => {
-            onChange(opt.value);
+            onChange(opt.label);
             close();
           },
-          className: `apteva-select-option w-full text-left px-3 py-2 text-sm transition-colors ${opt.value === value ? "apteva-select-option-active" : ""}`,
+          className: `apteva-select-option w-full text-left px-3 py-2 text-sm transition-colors ${value === opt.label ? "apteva-select-option-active" : ""}`,
           children: opt.label
         },
         opt.value
@@ -3373,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;
@@ -3464,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);
@@ -3473,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);
@@ -3650,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",
               {
@@ -3714,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),