@apteva/apteva-kit 0.1.111 → 0.1.113

package/dist/index.mjs

@@ -4,7 +4,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/components/Chat/Chat.tsx
-import { useState as useState9, useEffect as useEffect8, useRef as useRef9, useMemo as useMemo2, useCallback as useCallback3, forwardRef, useImperativeHandle } from "react";
+import { useState as useState9, useEffect as useEffect9, useRef as useRef9, useMemo as useMemo2, useCallback as useCallback4, forwardRef, useImperativeHandle } from "react";
 
 // src/components/Chat/MessageList.tsx
 import { useEffect as useEffect7, useRef as useRef6 } from "react";
@@ -1439,7 +1439,74 @@ function Table({ widget, onAction }) {
 
 // src/components/Widgets/widget-library/Form.tsx
 import { useState as useState3, useRef as useRef3, useEffect as useEffect3, useCallback } from "react";
+import { createPortal } from "react-dom";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function PortalDropdown({
+  anchorRef,
+  open,
+  onClose,
+  width,
+  children
+}) {
+  const dropdownRef = useRef3(null);
+  const [pos, setPos] = useState3({ top: 0, left: 0, width: 0 });
+  useEffect3(() => {
+    if (!open || !anchorRef.current) return;
+    const update = () => {
+      const rect = anchorRef.current.getBoundingClientRect();
+      setPos({
+        top: rect.bottom + window.scrollY + 4,
+        left: rect.left + window.scrollX,
+        width: rect.width
+      });
+    };
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [open, anchorRef]);
+  useEffect3(() => {
+    if (!open) return;
+    const handler = (e) => {
+      const target = e.target;
+      if (dropdownRef.current && !dropdownRef.current.contains(target) && anchorRef.current && !anchorRef.current.contains(target)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open, onClose, anchorRef]);
+  useEffect3(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, onClose]);
+  if (!open) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx6(
+      "div",
+      {
+        ref: dropdownRef,
+        className: "apteva-widget",
+        style: {
+          position: "absolute",
+          top: pos.top,
+          left: pos.left,
+          width: width === "match" ? pos.width : void 0,
+          zIndex: 99999
+        },
+        children
+      }
+    ),
+    document.body
+  );
+}
 function CustomSelect({
   name,
   value,
@@ -1449,17 +1516,10 @@ function CustomSelect({
   onChange
 }) {
   const [open, setOpen] = useState3(false);
-  const ref = useRef3(null);
+  const triggerRef = useRef3(null);
   const selected = options?.find((o) => o.value === value);
-  useEffect3(() => {
-    if (!open) return;
-    const handler = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
-  return /* @__PURE__ */ jsxs4("div", { ref, className: "apteva-select relative", children: [
+  const close = useCallback(() => setOpen(false), []);
+  return /* @__PURE__ */ jsxs4("div", { className: "apteva-select relative", children: [
     /* @__PURE__ */ jsxs4(
       "select",
       {
@@ -1480,6 +1540,7 @@ function CustomSelect({
     /* @__PURE__ */ jsxs4(
       "button",
       {
+        ref: triggerRef,
         type: "button",
         onClick: () => setOpen(!open),
         className: "apteva-select-trigger w-full flex items-center justify-between px-3 py-2 rounded-lg border transition-colors text-left",
@@ -1498,14 +1559,14 @@ function CustomSelect({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx6("div", { className: "apteva-select-dropdown absolute z-50 w-full mt-1 rounded-lg border shadow-lg overflow-hidden", children: /* @__PURE__ */ jsxs4("div", { className: "max-h-48 overflow-y-auto py-1", children: [
+    /* @__PURE__ */ jsx6(PortalDropdown, { anchorRef: triggerRef, open, onClose: close, width: "match", children: /* @__PURE__ */ jsx6("div", { className: "apteva-select-dropdown rounded-lg border shadow-lg overflow-hidden", children: /* @__PURE__ */ jsxs4("div", { className: "max-h-48 overflow-y-auto py-1", children: [
       options?.map((opt) => /* @__PURE__ */ jsx6(
         "button",
         {
           type: "button",
           onClick: () => {
             onChange(opt.value);
-            setOpen(false);
+            close();
           },
           className: `apteva-select-option w-full text-left px-3 py-2 text-sm transition-colors ${opt.value === value ? "apteva-select-option-active" : ""}`,
           children: opt.label
@@ -1513,7 +1574,7 @@ function CustomSelect({
         opt.value
       )),
       (!options || options.length === 0) && /* @__PURE__ */ jsx6("div", { className: "px-3 py-2 text-sm apteva-select-placeholder", children: "No options" })
-    ] }) })
+    ] }) }) })
   ] });
 }
 function CustomDatePicker({
@@ -1524,7 +1585,8 @@ function CustomDatePicker({
   onChange
 }) {
   const [open, setOpen] = useState3(false);
-  const ref = useRef3(null);
+  const triggerRef = useRef3(null);
+  const close = useCallback(() => setOpen(false), []);
   const parseDate = (v) => {
     if (v) {
       const [y, m, d] = v.split("-").map(Number);
@@ -1536,14 +1598,6 @@ function CustomDatePicker({
   const parsed = parseDate(value);
   const [viewYear, setViewYear] = useState3(parsed.year);
   const [viewMonth, setViewMonth] = useState3(parsed.month);
-  useEffect3(() => {
-    if (!open) return;
-    const handler = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
   useEffect3(() => {
     if (value) {
       const p = parseDate(value);
@@ -1570,7 +1624,7 @@ function CustomDatePicker({
     const m = String(viewMonth + 1).padStart(2, "0");
     const d = String(day).padStart(2, "0");
     onChange(`${viewYear}-${m}-${d}`);
-    setOpen(false);
+    close();
   };
   const formatDisplay = (v) => {
     if (!v) return "";
@@ -1588,7 +1642,7 @@ function CustomDatePicker({
     const now = /* @__PURE__ */ new Date();
     return now.getFullYear() === viewYear && now.getMonth() === viewMonth && now.getDate() === day;
   };
-  return /* @__PURE__ */ jsxs4("div", { ref, className: "apteva-datepicker relative", children: [
+  return /* @__PURE__ */ jsxs4("div", { className: "apteva-datepicker relative", children: [
     /* @__PURE__ */ jsx6(
       "input",
       {
@@ -1606,6 +1660,7 @@ function CustomDatePicker({
     /* @__PURE__ */ jsxs4(
       "button",
       {
+        ref: triggerRef,
         type: "button",
         onClick: () => setOpen(!open),
         className: "apteva-datepicker-trigger w-full flex items-center justify-between px-3 py-2 rounded-lg border transition-colors text-left",
@@ -1615,7 +1670,7 @@ function CustomDatePicker({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs4("div", { className: "apteva-datepicker-dropdown absolute z-50 mt-1 rounded-lg border shadow-lg overflow-hidden", children: [
+    /* @__PURE__ */ jsx6(PortalDropdown, { anchorRef: triggerRef, open, onClose: close, width: "auto", children: /* @__PURE__ */ jsxs4("div", { className: "apteva-datepicker-dropdown rounded-lg border shadow-lg overflow-hidden", children: [
       /* @__PURE__ */ jsxs4("div", { className: "apteva-datepicker-header flex items-center justify-between px-3 py-2", children: [
         /* @__PURE__ */ jsx6("button", { type: "button", onClick: prevMonth, className: "apteva-datepicker-nav p-1 rounded transition-colors", children: /* @__PURE__ */ jsx6("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }),
         /* @__PURE__ */ jsxs4("span", { className: "apteva-datepicker-title text-sm font-semibold", children: [
@@ -1648,7 +1703,7 @@ function CustomDatePicker({
           );
         })
       ] })
-    ] })
+    ] }) })
   ] });
 }
 function Form({ widget, onAction }) {
@@ -3281,9 +3336,13 @@ function MessageList({
 }
 
 // src/components/Chat/Composer.tsx
-import { useState as useState6, useRef as useRef7 } from "react";
+import { useState as useState6, useEffect as useEffect8, useCallback as useCallback3, useRef as useRef7 } from "react";
 import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
-function Composer({ onSendMessage, placeholder = "Type a message...", disabled = false, isLoading = false, onStop, onFileUpload, onSwitchMode }) {
+var getSpeechRecognition = () => {
+  if (typeof window === "undefined") return null;
+  return window.SpeechRecognition || window.webkitSpeechRecognition || null;
+};
+function Composer({ onSendMessage, placeholder = "Type a message...", disabled = false, isLoading = false, onStop, onFileUpload, onSwitchMode, speechToText }) {
   const [text, setText] = useState6("");
   const [showMenu, setShowMenu] = useState6(false);
   const [pendingFiles, setPendingFiles] = useState6([]);
@@ -3292,6 +3351,190 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
   const textareaRef = useRef7(null);
   const fileInputRef = useRef7(null);
   const menuButtonRef = useRef7(null);
+  const [isRecording, setIsRecording] = useState6(false);
+  const [recordingTime, setRecordingTime] = useState6(0);
+  const [transcriptFlash, setTranscriptFlash] = useState6(null);
+  const recognitionRef = useRef7(null);
+  const mediaStreamRef = useRef7(null);
+  const audioContextRef = useRef7(null);
+  const analyserRef = useRef7(null);
+  const canvasRef = useRef7(null);
+  const animFrameRef = useRef7(0);
+  const silenceTimerRef = useRef7(null);
+  const recordingTimerRef = useRef7(null);
+  const finalTranscriptRef = useRef7("");
+  const manualStopRef = useRef7(false);
+  const sttConfig = speechToText ? typeof speechToText === "object" ? speechToText : {} : null;
+  const sttSupported = !!sttConfig && !!getSpeechRecognition();
+  const silenceTimeout = sttConfig?.silenceTimeout ?? 2e3;
+  const autoSend = sttConfig?.autoSend !== false;
+  useEffect8(() => {
+    return () => {
+      stopRecording(true);
+    };
+  }, []);
+  const drawWaveform = useCallback3(() => {
+    const canvas = canvasRef.current;
+    const analyser = analyserRef.current;
+    if (!canvas || !analyser) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const bufferLength = analyser.frequencyBinCount;
+    const dataArray = new Uint8Array(bufferLength);
+    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 gap = 2;
+      const samplesPerBar = Math.floor(bufferLength / barCount);
+      for (let i = 0; i < barCount; i++) {
+        let sum = 0;
+        for (let j = 0; j < samplesPerBar; j++) {
+          const val = dataArray[i * samplesPerBar + j] - 128;
+          sum += Math.abs(val);
+        }
+        const avg = sum / samplesPerBar;
+        const barHeight = Math.max(3, avg / 128 * height * 2.5);
+        const x = i * (barWidth + gap);
+        const y = (height - barHeight) / 2;
+        ctx.fillStyle = "#3b82f6";
+        ctx.beginPath();
+        ctx.roundRect(x, y, barWidth, barHeight, barWidth / 2);
+        ctx.fill();
+      }
+    };
+    draw();
+  }, []);
+  const startRecording = useCallback3(async () => {
+    const SpeechRecognitionCtor = getSpeechRecognition();
+    if (!SpeechRecognitionCtor) return;
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      mediaStreamRef.current = stream;
+      const audioCtx = new AudioContext();
+      audioContextRef.current = audioCtx;
+      const source = audioCtx.createMediaStreamSource(stream);
+      const analyser = audioCtx.createAnalyser();
+      analyser.fftSize = 256;
+      source.connect(analyser);
+      analyserRef.current = analyser;
+      const recognition = new SpeechRecognitionCtor();
+      recognition.continuous = true;
+      recognition.interimResults = true;
+      recognition.lang = sttConfig?.language || navigator.language || "en-US";
+      recognitionRef.current = recognition;
+      finalTranscriptRef.current = "";
+      manualStopRef.current = false;
+      recognition.onresult = (event) => {
+        let final = "";
+        let interim = "";
+        for (let i = 0; i < event.results.length; i++) {
+          const result = event.results[i];
+          if (result.isFinal) {
+            final += result[0].transcript;
+          } else {
+            interim += result[0].transcript;
+          }
+        }
+        finalTranscriptRef.current = final;
+        if (silenceTimerRef.current) {
+          clearTimeout(silenceTimerRef.current);
+        }
+        silenceTimerRef.current = setTimeout(() => {
+          stopRecording(false);
+        }, silenceTimeout);
+      };
+      recognition.onerror = (event) => {
+        if (event.error !== "aborted") {
+          console.warn("Speech recognition error:", event.error);
+        }
+        stopRecording(true);
+      };
+      recognition.onend = () => {
+        if (!manualStopRef.current && isRecording) {
+          finishRecording();
+        }
+      };
+      recognition.start();
+      setIsRecording(true);
+      setRecordingTime(0);
+      recordingTimerRef.current = setInterval(() => {
+        setRecordingTime((t) => t + 1);
+      }, 1e3);
+      requestAnimationFrame(() => drawWaveform());
+      silenceTimerRef.current = setTimeout(() => {
+        stopRecording(false);
+      }, silenceTimeout + 1e3);
+    } catch (err) {
+      console.warn("Microphone access denied or error:", err);
+      setFileError("Microphone access denied");
+      setTimeout(() => setFileError(null), 3e3);
+    }
+  }, [sttConfig?.language, silenceTimeout, drawWaveform]);
+  const finishRecording = useCallback3(() => {
+    const transcript = finalTranscriptRef.current.trim();
+    setIsRecording(false);
+    setRecordingTime(0);
+    if (transcript) {
+      if (autoSend) {
+        setTranscriptFlash(transcript);
+        setTimeout(() => {
+          setTranscriptFlash(null);
+          onSendMessage(transcript);
+        }, 600);
+      } else {
+        setText((prev) => prev ? `${prev} ${transcript}` : transcript);
+      }
+    }
+  }, [autoSend, onSendMessage]);
+  const stopRecording = useCallback3((isCleanupOnly) => {
+    manualStopRef.current = true;
+    if (silenceTimerRef.current) {
+      clearTimeout(silenceTimerRef.current);
+      silenceTimerRef.current = null;
+    }
+    if (recordingTimerRef.current) {
+      clearInterval(recordingTimerRef.current);
+      recordingTimerRef.current = null;
+    }
+    if (animFrameRef.current) {
+      cancelAnimationFrame(animFrameRef.current);
+      animFrameRef.current = 0;
+    }
+    if (recognitionRef.current) {
+      try {
+        recognitionRef.current.stop();
+      } catch (_e) {
+      }
+      recognitionRef.current = null;
+    }
+    if (mediaStreamRef.current) {
+      mediaStreamRef.current.getTracks().forEach((t) => t.stop());
+      mediaStreamRef.current = null;
+    }
+    if (audioContextRef.current) {
+      try {
+        audioContextRef.current.close();
+      } catch (_e) {
+      }
+      audioContextRef.current = null;
+    }
+    analyserRef.current = null;
+    if (!isCleanupOnly) {
+      finishRecording();
+    } else {
+      setIsRecording(false);
+      setRecordingTime(0);
+    }
+  }, [finishRecording]);
+  const formatTime = (seconds) => {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+  };
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
@@ -3374,12 +3617,17 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
     }
     return /* @__PURE__ */ jsx23("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) });
   };
+  const hasMic = sttSupported && !isRecording;
+  const gridCols = hasMic ? "auto 1fr auto auto" : "auto 1fr auto";
+  const gridAreas = isRecording ? '"plus waveform waveform stop"' : isMultiLine ? hasMic ? '"textarea textarea textarea textarea" "plus . mic send"' : '"textarea textarea textarea" "plus . send"' : hasMic ? '"plus textarea mic send"' : '"plus textarea send"';
+  const gridColsRecording = "auto 1fr auto";
   return /* @__PURE__ */ jsxs17("div", { className: "px-4 py-3 relative", children: [
     fileError && /* @__PURE__ */ jsx23("div", { className: "apteva-file-error", children: /* @__PURE__ */ jsxs17("div", { className: "apteva-file-error-content", children: [
       /* @__PURE__ */ jsx23("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
       /* @__PURE__ */ jsx23("span", { children: fileError })
     ] }) }),
-    pendingFiles.length > 0 && /* @__PURE__ */ jsx23("div", { className: "apteva-file-preview", children: pendingFiles.map((pf, index) => /* @__PURE__ */ jsxs17("div", { className: "apteva-file-item", children: [
+    transcriptFlash && /* @__PURE__ */ jsx23("div", { className: "apteva-transcript-flash", children: /* @__PURE__ */ jsx23("span", { children: transcriptFlash }) }),
+    pendingFiles.length > 0 && !isRecording && /* @__PURE__ */ jsx23("div", { className: "apteva-file-preview", children: pendingFiles.map((pf, index) => /* @__PURE__ */ jsxs17("div", { className: "apteva-file-item", children: [
       pf.preview ? /* @__PURE__ */ jsx23("img", { src: pf.preview, alt: pf.file.name, className: "apteva-file-thumb" }) : /* @__PURE__ */ jsx23("div", { className: "apteva-file-icon", children: getFileIcon(pf.file.type) }),
       /* @__PURE__ */ jsxs17("div", { className: "apteva-file-info", children: [
         /* @__PURE__ */ jsx23("span", { className: "apteva-file-name", children: pf.file.name }),
@@ -3400,12 +3648,12 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
       {
         className: "apteva-composer",
         style: {
-          gridTemplateColumns: "auto 1fr auto",
-          gridTemplateAreas: isMultiLine ? '"textarea textarea textarea" "plus . send"' : '"plus textarea send"',
+          gridTemplateColumns: isRecording ? gridColsRecording : gridCols,
+          gridTemplateAreas: isRecording ? '"plus waveform stop"' : gridAreas,
           alignItems: "end"
         },
         children: [
-          /* @__PURE__ */ jsxs17("div", { className: "relative flex-shrink-0 self-end", style: { gridArea: "plus" }, children: [
+          /* @__PURE__ */ jsx23("div", { className: "relative flex-shrink-0 self-end", style: { gridArea: "plus" }, children: isRecording ? /* @__PURE__ */ jsx23("div", { className: "apteva-composer-rec-dot", title: "Recording...", children: /* @__PURE__ */ jsx23("span", {}) }) : /* @__PURE__ */ jsxs17(Fragment4, { children: [
             /* @__PURE__ */ jsx23(
               "button",
               {
@@ -3459,39 +3707,77 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
                 }
               )
             ] })
-          ] }),
-          /* @__PURE__ */ jsx23(
-            "textarea",
-            {
-              ref: textareaRef,
-              value: text,
-              onChange: handleChange,
-              onKeyDown: handleKeyDown,
-              placeholder,
-              disabled,
-              className: "apteva-composer-textarea resize-none bg-transparent border-none focus:outline-none !text-neutral-900 dark:!text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 py-1 disabled:opacity-50 disabled:cursor-not-allowed overflow-y-auto max-h-[200px]",
-              style: { gridArea: "textarea" },
-              rows: 1
-            }
-          ),
-          /* @__PURE__ */ jsx23("div", { className: "self-end", style: { gridArea: "send" }, children: isLoading && onStop ? /* @__PURE__ */ jsx23(
-            "button",
-            {
-              onClick: onStop,
-              className: "apteva-composer-stop-btn",
-              title: "Stop generation",
-              children: /* @__PURE__ */ jsx23("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx23("rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
-            }
-          ) : /* @__PURE__ */ jsx23(
-            "button",
-            {
-              onClick: handleSend,
-              disabled: !text.trim() && pendingFiles.length === 0 || disabled,
-              className: "apteva-composer-send-btn w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 !text-neutral-700 dark:!text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700 disabled:opacity-30 disabled:cursor-not-allowed !text-lg",
-              title: "Send message",
-              children: /* @__PURE__ */ jsx23("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx23("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
-            }
-          ) })
+          ] }) }),
+          isRecording ? /* @__PURE__ */ jsxs17(Fragment4, { children: [
+            /* @__PURE__ */ jsxs17("div", { className: "apteva-composer-waveform", style: { gridArea: "waveform" }, children: [
+              /* @__PURE__ */ jsx23(
+                "canvas",
+                {
+                  ref: canvasRef,
+                  width: 300,
+                  height: 36,
+                  className: "apteva-composer-waveform-canvas"
+                }
+              ),
+              /* @__PURE__ */ jsx23("span", { className: "apteva-composer-recording-timer", children: formatTime(recordingTime) })
+            ] }),
+            /* @__PURE__ */ jsx23("div", { className: "self-end", style: { gridArea: "stop" }, children: /* @__PURE__ */ jsx23(
+              "button",
+              {
+                onClick: () => stopRecording(false),
+                className: "apteva-composer-stop-btn",
+                title: "Stop recording",
+                children: /* @__PURE__ */ jsx23("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx23("rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
+              }
+            ) })
+          ] }) : /* @__PURE__ */ jsxs17(Fragment4, { children: [
+            /* @__PURE__ */ jsx23(
+              "textarea",
+              {
+                ref: textareaRef,
+                value: text,
+                onChange: handleChange,
+                onKeyDown: handleKeyDown,
+                placeholder,
+                disabled,
+                className: "apteva-composer-textarea resize-none bg-transparent border-none focus:outline-none !text-neutral-900 dark:!text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 py-1 disabled:opacity-50 disabled:cursor-not-allowed overflow-y-auto max-h-[200px]",
+                style: { gridArea: "textarea" },
+                rows: 1
+              }
+            ),
+            sttSupported && /* @__PURE__ */ jsx23("div", { className: "self-end", style: { gridArea: "mic" }, children: /* @__PURE__ */ jsx23(
+              "button",
+              {
+                onClick: startRecording,
+                disabled: disabled || isLoading,
+                className: "apteva-composer-mic-btn",
+                title: "Voice input",
+                children: /* @__PURE__ */ jsxs17("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                  /* @__PURE__ */ jsx23("path", { d: "M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z", fill: "currentColor" }),
+                  /* @__PURE__ */ jsx23("path", { d: "M19 10v2a7 7 0 01-14 0v-2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+                  /* @__PURE__ */ jsx23("path", { d: "M12 19v4M8 23h8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+                ] })
+              }
+            ) }),
+            /* @__PURE__ */ jsx23("div", { className: "self-end", style: { gridArea: "send" }, children: isLoading && onStop ? /* @__PURE__ */ jsx23(
+              "button",
+              {
+                onClick: onStop,
+                className: "apteva-composer-stop-btn",
+                title: "Stop generation",
+                children: /* @__PURE__ */ jsx23("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx23("rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
+              }
+            ) : /* @__PURE__ */ jsx23(
+              "button",
+              {
+                onClick: handleSend,
+                disabled: !text.trim() && pendingFiles.length === 0 || disabled,
+                className: "apteva-composer-send-btn w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 !text-neutral-700 dark:!text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700 disabled:opacity-30 disabled:cursor-not-allowed !text-lg",
+                title: "Send message",
+                children: /* @__PURE__ */ jsx23("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx23("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+              }
+            ) })
+          ] })
         ]
       }
     ),
@@ -4090,6 +4376,8 @@ var Chat = forwardRef(function Chat2({
   availableWidgets,
   compactWidgetContext = false,
   onWidgetRender,
+  // Speech to text
+  speechToText,
   className
 }, ref) {
   const [messages, setMessages] = useState9(initialMessages);
@@ -4111,7 +4399,7 @@ var Chat = forwardRef(function Chat2({
   const [showSettingsMenu, setShowSettingsMenu] = useState9(false);
   const fileInputRef = useRef9(null);
   const [persistentWidgets, setPersistentWidgets] = useState9(/* @__PURE__ */ new Map());
-  const updatePersistentWidgets = useCallback3((msgs) => {
+  const updatePersistentWidgets = useCallback4((msgs) => {
     setPersistentWidgets((prev) => {
       const next = new Map(prev);
       let changed = false;
@@ -4129,7 +4417,7 @@ var Chat = forwardRef(function Chat2({
       return changed ? next : prev;
     });
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     updatePersistentWidgets(messages);
   }, [messages, updatePersistentWidgets]);
   const persistentWidgetList = useMemo2(() => Array.from(persistentWidgets.values()), [persistentWidgets]);
@@ -4155,7 +4443,7 @@ var Chat = forwardRef(function Chat2({
     return context ? `${context}
 ${widgetContext}` : widgetContext;
   }, [context, enableWidgets, availableWidgets, compactWidgetContext]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (apiUrl || apiKey) {
       aptevaClient.configure({
         ...apiUrl && { apiUrl },
@@ -4163,15 +4451,15 @@ ${widgetContext}` : widgetContext;
       });
     }
   }, [apiUrl, apiKey]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (threadId) {
       onThreadChange?.(threadId);
     }
   }, [threadId, onThreadChange]);
-  useEffect8(() => {
+  useEffect9(() => {
     setInternalPlanMode(planMode);
   }, [planMode]);
-  useEffect8(() => {
+  useEffect9(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       if (showSettingsMenu && !target.closest(".settings-menu-container")) {
@@ -4191,7 +4479,7 @@ ${widgetContext}` : widgetContext;
     }
   };
   const defaultPlaceholder = mode === "chat" ? "Type a message..." : "Enter your command...";
-  const handleWidgetAction = useCallback3((action) => {
+  const handleWidgetAction = useCallback4((action) => {
     onAction?.(action);
     if (action.type === "submit" && action.payload?.formData) {
       const formData = action.payload.formData;
@@ -4745,7 +5033,8 @@ ${planToExecute}`;
           isLoading,
           onStop: handleStop,
           onFileUpload,
-          onSwitchMode: showModeToggle ? () => handleModeChange("command") : void 0
+          onSwitchMode: showModeToggle ? () => handleModeChange("command") : void 0,
+          speechToText
         }
       )
     ] }),
@@ -4792,7 +5081,7 @@ import { useState as useState10 } from "react";
 import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 
 // src/components/Command/Command.tsx
-import React, { useState as useState11, useEffect as useEffect9 } from "react";
+import React, { useState as useState11, useEffect as useEffect10 } from "react";
 import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
 function Command({
   agentId,
@@ -4833,15 +5122,15 @@ function Command({
   const [showSettingsMenu, setShowSettingsMenu] = useState11(false);
   const [internalPlanMode, setInternalPlanMode] = useState11(planMode);
   const fileInputRef = React.useRef(null);
-  useEffect9(() => {
+  useEffect10(() => {
     if (autoExecute && state === "idle" && command) {
       executeCommand();
     }
   }, [autoExecute]);
-  useEffect9(() => {
+  useEffect10(() => {
     setInternalPlanMode(planMode);
   }, [planMode]);
-  useEffect9(() => {
+  useEffect10(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       if (showSettingsMenu && !target.closest(".settings-menu-container")) {
@@ -5874,7 +6163,7 @@ function Prompt({
 }
 
 // src/components/Stream/Stream.tsx
-import { useState as useState13, useEffect as useEffect10 } from "react";
+import { useState as useState13, useEffect as useEffect11 } from "react";
 import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
 function Stream({
   agentId,
@@ -5894,7 +6183,7 @@ function Stream({
   const [text, setText] = useState13("");
   const [isStreaming, setIsStreaming] = useState13(false);
   const [isComplete, setIsComplete] = useState13(false);
-  useEffect10(() => {
+  useEffect11(() => {
     if (autoStart && !isStreaming && !isComplete) {
       startStreaming();
     }
@@ -6165,7 +6454,7 @@ function Threads({
 }
 
 // src/components/AutoInterface/AutoInterface.tsx
-import { useState as useState16, useRef as useRef10, useCallback as useCallback4, useEffect as useEffect11 } from "react";
+import { useState as useState16, useRef as useRef10, useCallback as useCallback5, useEffect as useEffect12 } from "react";
 
 // src/components/AutoInterface/LayoutRenderer.tsx
 import { useState as useState15 } from "react";
@@ -6443,11 +6732,11 @@ function AutoInterface({
     generateInterfaceContext(),
     context || ""
   ].filter(Boolean).join("\n\n");
-  const updateInterface = useCallback4((newSpec) => {
+  const updateInterface = useCallback5((newSpec) => {
     setInterfaceSpec(newSpec);
     onInterfaceChange?.(newSpec);
   }, [onInterfaceChange]);
-  const handleAction = useCallback4((action) => {
+  const handleAction = useCallback5((action) => {
     onAction?.(action);
     if (chatRef.current) {
       chatRef.current.sendMessage(
@@ -6455,7 +6744,7 @@ function AutoInterface({
       );
     }
   }, [onAction]);
-  const handleMessageComplete = useCallback4((result) => {
+  const handleMessageComplete = useCallback5((result) => {
     if (!result?.data) return;
     const text = typeof result.data === "string" ? result.data : result.data.message || "";
     console.log("[AutoInterface] Chat message complete, text (" + text.length + " chars):", text.substring(0, 300));
@@ -6476,7 +6765,7 @@ function AutoInterface({
     }
     setIsGenerating(false);
   }, [interfaceSpec, updateInterface]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!initialPrompt || initialInterface || useMock) return;
     if (!apiUrl) return;
     let cancelled = false;
@@ -6601,29 +6890,29 @@ function getThemeScript() {
 }
 
 // src/hooks/useInterfaceState.ts
-import { useState as useState17, useCallback as useCallback5 } from "react";
+import { useState as useState17, useCallback as useCallback6 } from "react";
 function useInterfaceState(initialSpec) {
   const [spec, setSpec] = useState17(initialSpec || null);
   const [isStreaming, setIsStreaming] = useState17(false);
-  const setInterface = useCallback5((newSpec) => {
+  const setInterface = useCallback6((newSpec) => {
     setSpec(newSpec);
   }, []);
-  const clearInterface = useCallback5(() => {
+  const clearInterface = useCallback6(() => {
     setSpec(null);
   }, []);
-  const applyInterfaceUpdate = useCallback5((update) => {
+  const applyInterfaceUpdate = useCallback6((update) => {
     setSpec((prev) => {
       if (!prev) return prev;
       return applyUpdate(prev, update);
     });
   }, []);
-  const applyInterfaceUpdates = useCallback5((updates) => {
+  const applyInterfaceUpdates = useCallback6((updates) => {
     setSpec((prev) => {
       if (!prev) return prev;
       return applyUpdates(prev, updates);
     });
   }, []);
-  const getNode = useCallback5((id) => {
+  const getNode = useCallback6((id) => {
     if (!spec) return null;
     return findNode(spec.root, id);
   }, [spec]);
@@ -6640,7 +6929,7 @@ function useInterfaceState(initialSpec) {
 }
 
 // src/hooks/useInterfaceAI.ts
-import { useCallback as useCallback6, useRef as useRef11 } from "react";
+import { useCallback as useCallback7, useRef as useRef11 } from "react";
 function useInterfaceAI({
   agentId,
   apiUrl,
@@ -6660,7 +6949,7 @@ function useInterfaceAI({
       ...apiKey && { apiKey }
     });
   }
-  const sendMessage = useCallback6(async (message) => {
+  const sendMessage = useCallback7(async (message) => {
     accumulatedTextRef.current = "";
     onStreamStart?.();
     const systemPrompt = [