@apteva/apteva-kit 0.1.112 → 0.1.114

package/dist/index.js

@@ -3338,7 +3338,11 @@ function MessageList({
 // src/components/Chat/Composer.tsx
 
 
-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] = _react.useState.call(void 0, "");
   const [showMenu, setShowMenu] = _react.useState.call(void 0, false);
   const [pendingFiles, setPendingFiles] = _react.useState.call(void 0, []);
@@ -3347,6 +3351,190 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
   const textareaRef = _react.useRef.call(void 0, null);
   const fileInputRef = _react.useRef.call(void 0, null);
   const menuButtonRef = _react.useRef.call(void 0, null);
+  const [isRecording, setIsRecording] = _react.useState.call(void 0, false);
+  const [recordingTime, setRecordingTime] = _react.useState.call(void 0, 0);
+  const [transcriptFlash, setTranscriptFlash] = _react.useState.call(void 0, null);
+  const recognitionRef = _react.useRef.call(void 0, null);
+  const mediaStreamRef = _react.useRef.call(void 0, null);
+  const audioContextRef = _react.useRef.call(void 0, null);
+  const analyserRef = _react.useRef.call(void 0, null);
+  const canvasRef = _react.useRef.call(void 0, null);
+  const animFrameRef = _react.useRef.call(void 0, 0);
+  const silenceTimerRef = _react.useRef.call(void 0, null);
+  const recordingTimerRef = _react.useRef.call(void 0, null);
+  const finalTranscriptRef = _react.useRef.call(void 0, "");
+  const manualStopRef = _react.useRef.call(void 0, false);
+  const sttConfig = speechToText ? typeof speechToText === "object" ? speechToText : {} : null;
+  const sttSupported = !!sttConfig && !!getSpeechRecognition();
+  const silenceTimeout = _nullishCoalesce(_optionalChain([sttConfig, 'optionalAccess', _54 => _54.silenceTimeout]), () => ( 2e3));
+  const autoSend = _optionalChain([sttConfig, 'optionalAccess', _55 => _55.autoSend]) !== false;
+  _react.useEffect.call(void 0, () => {
+    return () => {
+      stopRecording(true);
+    };
+  }, []);
+  const drawWaveform = _react.useCallback.call(void 0, () => {
+    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 = _react.useCallback.call(void 0, 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 = _optionalChain([sttConfig, 'optionalAccess', _56 => _56.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);
+    }
+  }, [_optionalChain([sttConfig, 'optionalAccess', _57 => _57.language]), silenceTimeout, drawWaveform]);
+  const finishRecording = _react.useCallback.call(void 0, () => {
+    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 = _react.useCallback.call(void 0, (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();
@@ -3406,7 +3594,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
         setFileError(errors.join(", "));
         setTimeout(() => setFileError(null), 5e3);
       }
-      _optionalChain([onFileUpload, 'optionalCall', _54 => _54(e.target.files)]);
+      _optionalChain([onFileUpload, 'optionalCall', _58 => _58(e.target.files)]);
       setShowMenu(false);
       e.target.value = "";
     }
@@ -3429,12 +3617,17 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
     }
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "px-4 py-3 relative", children: [
     fileError && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-file-error", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-file-error-content", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: fileError })
     ] }) }),
-    pendingFiles.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-file-preview", children: pendingFiles.map((pf, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-file-item", children: [
+    transcriptFlash && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-transcript-flash", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: transcriptFlash }) }),
+    pendingFiles.length > 0 && !isRecording && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-file-preview", children: pendingFiles.map((pf, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-file-item", children: [
       pf.preview ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: pf.preview, alt: pf.file.name, className: "apteva-file-thumb" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-file-icon", children: getFileIcon(pf.file.type) }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-file-info", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-file-name", children: pf.file.name }),
@@ -3455,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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative flex-shrink-0 self-end", style: { gridArea: "plus" }, 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, 
               "button",
               {
@@ -3478,15 +3671,15 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
                 {
                   className: "apteva-composer-menu fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
                   style: {
-                    left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _55 => _55.current, 'optionalAccess', _56 => _56.getBoundingClientRect, 'call', _57 => _57(), 'access', _58 => _58.left]), () => ( 0)),
-                    bottom: window.innerHeight - (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _59 => _59.current, 'optionalAccess', _60 => _60.getBoundingClientRect, 'call', _61 => _61(), 'access', _62 => _62.top]), () => ( 0))) + 8
+                    left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _59 => _59.current, 'optionalAccess', _60 => _60.getBoundingClientRect, 'call', _61 => _61(), 'access', _62 => _62.left]), () => ( 0)),
+                    bottom: window.innerHeight - (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _63 => _63.current, 'optionalAccess', _64 => _64.getBoundingClientRect, 'call', _65 => _65(), 'access', _66 => _66.top]), () => ( 0))) + 8
                   },
                   children: [
                     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                       "button",
                       {
                         onClick: () => {
-                          _optionalChain([fileInputRef, 'access', _63 => _63.current, 'optionalAccess', _64 => _64.click, 'call', _65 => _65()]);
+                          _optionalChain([fileInputRef, 'access', _67 => _67.current, 'optionalAccess', _68 => _68.click, 'call', _69 => _69()]);
                           setShowMenu(false);
                         },
                         className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left",
@@ -3514,39 +3707,77 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
                 }
               )
             ] })
-          ] }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "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__ */ _jsxruntime.jsx.call(void 0, "div", { className: "self-end", style: { gridArea: "send" }, children: isLoading && onStop ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "button",
-            {
-              onClick: onStop,
-              className: "apteva-composer-stop-btn",
-              title: "Stop generation",
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
-            }
-          ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "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__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
-            }
-          ) })
+          ] }) }),
+          isRecording ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-composer-waveform", style: { gridArea: "waveform" }, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "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, 
+              "button",
+              {
+                onClick: () => stopRecording(false),
+                className: "apteva-composer-stop-btn",
+                title: "Stop recording",
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
+              }
+            ) })
+          ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "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__ */ _jsxruntime.jsx.call(void 0, "div", { className: "self-end", style: { gridArea: "mic" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                onClick: startRecording,
+                disabled: disabled || isLoading,
+                className: "apteva-composer-mic-btn",
+                title: "Voice input",
+                children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z", fill: "currentColor" }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M19 10v2a7 7 0 01-14 0v-2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M12 19v4M8 23h8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+                ] })
+              }
+            ) }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "self-end", style: { gridArea: "send" }, children: isLoading && onStop ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                onClick: onStop,
+                className: "apteva-composer-stop-btn",
+                title: "Stop generation",
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
+              }
+            ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "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__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+              }
+            ) })
+          ] })
         ]
       }
     ),
@@ -3607,8 +3838,8 @@ function CommandComposer({
     }
   };
   const handleNewCommand = () => {
-    _optionalChain([onReset, 'optionalCall', _66 => _66()]);
-    _optionalChain([inputRef, 'access', _67 => _67.current, 'optionalAccess', _68 => _68.focus, 'call', _69 => _69()]);
+    _optionalChain([onReset, 'optionalCall', _70 => _70()]);
+    _optionalChain([inputRef, 'access', _71 => _71.current, 'optionalAccess', _72 => _72.focus, 'call', _73 => _73()]);
   };
   const handleInputChange = (value) => {
     setInput(value);
@@ -3722,15 +3953,15 @@ function CommandComposer({
                   {
                     className: "apteva-composer-menu fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
                     style: {
-                      left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _70 => _70.current, 'optionalAccess', _71 => _71.getBoundingClientRect, 'call', _72 => _72(), 'access', _73 => _73.left]), () => ( 0)),
-                      top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _74 => _74.current, 'optionalAccess', _75 => _75.getBoundingClientRect, 'call', _76 => _76(), 'access', _77 => _77.bottom]), () => ( 0))) + 8
+                      left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _74 => _74.current, 'optionalAccess', _75 => _75.getBoundingClientRect, 'call', _76 => _76(), 'access', _77 => _77.left]), () => ( 0)),
+                      top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _78 => _78.current, 'optionalAccess', _79 => _79.getBoundingClientRect, 'call', _80 => _80(), 'access', _81 => _81.bottom]), () => ( 0))) + 8
                     },
                     children: [
                       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                         "button",
                         {
                           onClick: () => {
-                            _optionalChain([fileInputRef, 'access', _78 => _78.current, 'optionalAccess', _79 => _79.click, 'call', _80 => _80()]);
+                            _optionalChain([fileInputRef, 'access', _82 => _82.current, 'optionalAccess', _83 => _83.click, 'call', _84 => _84()]);
                             setShowMenu(false);
                           },
                           className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left",
@@ -3883,8 +4114,8 @@ var AptevaClient = class {
   constructor(config) {
     __publicField(this, "config");
     this.config = {
-      apiUrl: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _81 => _81.apiUrl]), () => ( "")),
-      apiKey: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _82 => _82.apiKey]), () => ( ""))
+      apiUrl: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _85 => _85.apiUrl]), () => ( "")),
+      apiKey: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _86 => _86.apiKey]), () => ( ""))
     };
   }
   /**
@@ -3961,7 +4192,7 @@ var AptevaClient = class {
         const error = await response.json().catch(() => ({ error: "Request failed" }));
         throw new Error(error.error || `Request failed with status ${response.status}`);
       }
-      const reader = _optionalChain([response, 'access', _83 => _83.body, 'optionalAccess', _84 => _84.getReader, 'call', _85 => _85()]);
+      const reader = _optionalChain([response, 'access', _87 => _87.body, 'optionalAccess', _88 => _88.getReader, 'call', _89 => _89()]);
       if (!reader) {
         throw new Error("Response body is not readable");
       }
@@ -3979,7 +4210,7 @@ var AptevaClient = class {
           if (line.startsWith("data: ")) {
             const data = line.slice(6);
             if (data === "[DONE]") {
-              _optionalChain([onComplete, 'optionalCall', _86 => _86(threadId)]);
+              _optionalChain([onComplete, 'optionalCall', _90 => _90(threadId)]);
               return;
             }
             try {
@@ -3994,10 +4225,10 @@ var AptevaClient = class {
           }
         }
       }
-      _optionalChain([onComplete, 'optionalCall', _87 => _87(threadId)]);
+      _optionalChain([onComplete, 'optionalCall', _91 => _91(threadId)]);
     } catch (error) {
       const err = error instanceof Error ? error : new Error("Unknown error");
-      _optionalChain([onError, 'optionalCall', _88 => _88(err)]);
+      _optionalChain([onError, 'optionalCall', _92 => _92(err)]);
       throw err;
     }
   }
@@ -4145,6 +4376,8 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   availableWidgets,
   compactWidgetContext = false,
   onWidgetRender,
+  // Speech to text
+  speechToText,
   className
 }, ref) {
   const [messages, setMessages] = _react.useState.call(void 0, initialMessages);
@@ -4220,7 +4453,7 @@ ${widgetContext}` : widgetContext;
   }, [apiUrl, apiKey]);
   _react.useEffect.call(void 0, () => {
     if (threadId) {
-      _optionalChain([onThreadChange, 'optionalCall', _89 => _89(threadId)]);
+      _optionalChain([onThreadChange, 'optionalCall', _93 => _93(threadId)]);
     }
   }, [threadId, onThreadChange]);
   _react.useEffect.call(void 0, () => {
@@ -4238,7 +4471,7 @@ ${widgetContext}` : widgetContext;
   }, [showSettingsMenu]);
   const handleModeChange = (newMode) => {
     setMode(newMode);
-    _optionalChain([onModeChange, 'optionalCall', _90 => _90(newMode)]);
+    _optionalChain([onModeChange, 'optionalCall', _94 => _94(newMode)]);
     if (newMode === "command") {
       setCommandState("idle");
       setCommandResult(null);
@@ -4247,8 +4480,8 @@ ${widgetContext}` : widgetContext;
   };
   const defaultPlaceholder = mode === "chat" ? "Type a message..." : "Enter your command...";
   const handleWidgetAction = _react.useCallback.call(void 0, (action) => {
-    _optionalChain([onAction, 'optionalCall', _91 => _91(action)]);
-    if (action.type === "submit" && _optionalChain([action, 'access', _92 => _92.payload, 'optionalAccess', _93 => _93.formData])) {
+    _optionalChain([onAction, 'optionalCall', _95 => _95(action)]);
+    if (action.type === "submit" && _optionalChain([action, 'access', _96 => _96.payload, 'optionalAccess', _97 => _97.formData])) {
       const formData = action.payload.formData;
       const lines = [];
       for (const [key, value] of Object.entries(formData)) {
@@ -4287,7 +4520,7 @@ ${widgetContext}` : widgetContext;
         metadata: hasFiles ? { attachments } : void 0
       };
       setMessages((prev) => [...prev, userMessage]);
-      _optionalChain([onMessageSent, 'optionalCall', _94 => _94(userMessage)]);
+      _optionalChain([onMessageSent, 'optionalCall', _98 => _98(userMessage)]);
     }
     setIsLoading(true);
     try {
@@ -4355,7 +4588,7 @@ ${widgetContext}` : widgetContext;
                   responseThreadId = chunk.thread_id;
                   if (!currentThreadId) {
                     setCurrentThreadId(chunk.thread_id);
-                    _optionalChain([onThreadChange, 'optionalCall', _95 => _95(chunk.thread_id)]);
+                    _optionalChain([onThreadChange, 'optionalCall', _99 => _99(chunk.thread_id)]);
                   }
                 }
                 break;
@@ -4387,7 +4620,7 @@ ${widgetContext}` : widgetContext;
                   contentSegments.push({ type: "tool", id: chunk.tool_id, name: displayName, status: "preparing" });
                   toolInputBuffers[chunk.tool_id] = "";
                   setChatToolName(displayName);
-                  _optionalChain([onToolCall, 'optionalCall', _96 => _96(chunk.tool_name, chunk.tool_id)]);
+                  _optionalChain([onToolCall, 'optionalCall', _100 => _100(chunk.tool_name, chunk.tool_id)]);
                   updateMessage();
                 }
                 break;
@@ -4447,7 +4680,7 @@ ${widgetContext}` : widgetContext;
                     toolSegment.result = chunk.content;
                     toolSegment.status = "completed";
                     toolSegment.isReceiving = false;
-                    _optionalChain([onToolResult, 'optionalCall', _97 => _97(toolSegment.name, chunk.content)]);
+                    _optionalChain([onToolResult, 'optionalCall', _101 => _101(toolSegment.name, chunk.content)]);
                   }
                   setChatToolName(null);
                   updateMessage();
@@ -4491,7 +4724,7 @@ ${widgetContext}` : widgetContext;
             });
             if (threadId2 && threadId2 !== currentThreadId) {
               setCurrentThreadId(threadId2);
-              _optionalChain([onThreadChange, 'optionalCall', _98 => _98(threadId2)]);
+              _optionalChain([onThreadChange, 'optionalCall', _102 => _102(threadId2)]);
             }
             setIsLoading(false);
             setCurrentRequestId(null);
@@ -4515,7 +4748,7 @@ ${widgetContext}` : widgetContext;
             setIsLoading(false);
             setCurrentRequestId(null);
             setChatToolName(null);
-            _optionalChain([onError, 'optionalCall', _99 => _99(error)]);
+            _optionalChain([onError, 'optionalCall', _103 => _103(error)]);
           }
         );
       }
@@ -4528,7 +4761,7 @@ ${widgetContext}` : widgetContext;
         metadata: { error: true }
       };
       setMessages((prev) => [...prev, errorMessage]);
-      _optionalChain([onError, 'optionalCall', _100 => _100(error instanceof Error ? error : new Error("Unknown error"))]);
+      _optionalChain([onError, 'optionalCall', _104 => _104(error instanceof Error ? error : new Error("Unknown error"))]);
     } finally {
       setIsLoading(false);
     }
@@ -4574,7 +4807,7 @@ ${planningInstruction}` : planningInstruction;
           const error = err instanceof Error ? err : new Error("Failed to generate plan");
           setCommandError(error);
           setCommandState("error");
-          _optionalChain([onError, 'optionalCall', _101 => _101(error)]);
+          _optionalChain([onError, 'optionalCall', _105 => _105(error)]);
         }
       }
       return;
@@ -4607,12 +4840,12 @@ ${planningInstruction}` : planningInstruction;
               setCommandResult(result);
               setCommandState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _102 => _102(result)]);
+              _optionalChain([onComplete, 'optionalCall', _106 => _106(result)]);
             },
             (error) => {
               setCommandError(error);
               setCommandState("error");
-              _optionalChain([onError, 'optionalCall', _103 => _103(error)]);
+              _optionalChain([onError, 'optionalCall', _107 => _107(error)]);
             }
           );
         } else {
@@ -4625,7 +4858,7 @@ ${planningInstruction}` : planningInstruction;
           setCommandResult(result);
           setCommandState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _104 => _104(result)]);
+          _optionalChain([onComplete, 'optionalCall', _108 => _108(result)]);
         }
       } else {
         const commandInstruction = `CRITICAL COMMAND MODE: Maximum 10 words per response. Execute the command immediately. Make reasonable assumptions based on context. Use sensible defaults for missing details. DO NOT ask questions unless something is truly impossible without user input (e.g., missing required password). State what you're doing or the result. Examples: "Analyzing customer data from last quarter..." or "Created 5 new database entries successfully" or "Search complete: found 12 matching results". NO greetings, NO filler words, NO clarification requests. Action/result only.`;
@@ -4655,16 +4888,16 @@ ${commandInstruction}` : commandInstruction;
                 const displayName = chunk.tool_display_name || chunk.tool_name;
                 lastToolName = chunk.tool_name;
                 setCurrentToolName(displayName);
-                _optionalChain([onToolCall, 'optionalCall', _105 => _105(chunk.tool_name, chunk.tool_id || "")]);
+                _optionalChain([onToolCall, 'optionalCall', _109 => _109(chunk.tool_name, chunk.tool_id || "")]);
                 accumulatedContent = "";
                 setStreamedContent("");
               } else if (chunk.type === "tool_result") {
-                _optionalChain([onToolResult, 'optionalCall', _106 => _106(lastToolName, chunk.content)]);
+                _optionalChain([onToolResult, 'optionalCall', _110 => _110(lastToolName, chunk.content)]);
                 setCurrentToolName(null);
               } else if (chunk.type === "thread_id" && chunk.thread_id) {
                 if (!currentThreadId) {
                   setCurrentThreadId(chunk.thread_id);
-                  _optionalChain([onThreadChange, 'optionalCall', _107 => _107(chunk.thread_id)]);
+                  _optionalChain([onThreadChange, 'optionalCall', _111 => _111(chunk.thread_id)]);
                 }
               } else if (chunk.type === "request_id" && chunk.request_id) {
                 setCurrentRequestId(chunk.request_id);
@@ -4680,13 +4913,13 @@ ${commandInstruction}` : commandInstruction;
               setCommandState("success");
               setProgress(100);
               setCurrentRequestId(null);
-              _optionalChain([onComplete, 'optionalCall', _108 => _108(result)]);
+              _optionalChain([onComplete, 'optionalCall', _112 => _112(result)]);
             },
             (error) => {
               setCommandError(error);
               setCommandState("error");
               setCurrentRequestId(null);
-              _optionalChain([onError, 'optionalCall', _109 => _109(error)]);
+              _optionalChain([onError, 'optionalCall', _113 => _113(error)]);
             }
           );
         } else {
@@ -4706,14 +4939,14 @@ ${commandInstruction}` : commandInstruction;
           setCommandResult(result);
           setCommandState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _110 => _110(result)]);
+          _optionalChain([onComplete, 'optionalCall', _114 => _114(result)]);
         }
       }
     } catch (err) {
       const error = err instanceof Error ? err : new Error("Unknown error");
       setCommandError(error);
       setCommandState("error");
-      _optionalChain([onError, 'optionalCall', _111 => _111(error)]);
+      _optionalChain([onError, 'optionalCall', _115 => _115(error)]);
     }
   };
   const resetCommand = () => {
@@ -4800,7 +5033,8 @@ ${planToExecute}`;
           isLoading,
           onStop: handleStop,
           onFileUpload,
-          onSwitchMode: showModeToggle ? () => handleModeChange("command") : void 0
+          onSwitchMode: showModeToggle ? () => handleModeChange("command") : void 0,
+          speechToText
         }
       )
     ] }),
@@ -4812,8 +5046,8 @@ ${planToExecute}`;
           executeCommand(text, files);
         },
         state: commandState,
-        response: _optionalChain([commandResult, 'optionalAccess', _112 => _112.data, 'optionalAccess', _113 => _113.summary]) || _optionalChain([commandResult, 'optionalAccess', _114 => _114.message]),
-        error: _optionalChain([commandError, 'optionalAccess', _115 => _115.message]),
+        response: _optionalChain([commandResult, 'optionalAccess', _116 => _116.data, 'optionalAccess', _117 => _117.summary]) || _optionalChain([commandResult, 'optionalAccess', _118 => _118.message]),
+        error: _optionalChain([commandError, 'optionalAccess', _119 => _119.message]),
         plan,
         streamedContent,
         toolName: currentToolName,
@@ -4981,13 +5215,13 @@ ${planningInstruction}` : planningInstruction;
             const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
             setError(error2);
             setState("error");
-            _optionalChain([onError, 'optionalCall', _116 => _116(error2)]);
+            _optionalChain([onError, 'optionalCall', _120 => _120(error2)]);
           });
         } catch (err) {
           const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
           setError(error2);
           setState("error");
-          _optionalChain([onError, 'optionalCall', _117 => _117(error2)]);
+          _optionalChain([onError, 'optionalCall', _121 => _121(error2)]);
         }
       }
       return;
@@ -4998,7 +5232,7 @@ ${planningInstruction}` : planningInstruction;
     setStreamedContent("");
     setCommand("");
     setUploadedFiles([]);
-    _optionalChain([onStart, 'optionalCall', _118 => _118()]);
+    _optionalChain([onStart, 'optionalCall', _122 => _122()]);
     try {
       if (useMock) {
         if (enableStreaming) {
@@ -5009,16 +5243,16 @@ ${planningInstruction}` : planningInstruction;
               if (chunk.type === "token" && chunk.content) {
                 accumulatedContent += chunk.content;
                 setStreamedContent(accumulatedContent);
-                _optionalChain([onChunk, 'optionalCall', _119 => _119(chunk.content)]);
+                _optionalChain([onChunk, 'optionalCall', _123 => _123(chunk.content)]);
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
-                _optionalChain([onProgress, 'optionalCall', _120 => _120(estimatedProgress)]);
+                _optionalChain([onProgress, 'optionalCall', _124 => _124(estimatedProgress)]);
               } else if (chunk.type === "widget" && chunk.widget) {
                 const widget = chunk.widget;
                 setResult((prev) => ({
                   success: true,
-                  data: _optionalChain([prev, 'optionalAccess', _121 => _121.data]) || {},
-                  widgets: [..._optionalChain([prev, 'optionalAccess', _122 => _122.widgets]) || [], widget],
+                  data: _optionalChain([prev, 'optionalAccess', _125 => _125.data]) || {},
+                  widgets: [..._optionalChain([prev, 'optionalAccess', _126 => _126.widgets]) || [], widget],
                   message: accumulatedContent || "Command executed successfully"
                 }));
               }
@@ -5038,19 +5272,19 @@ ${planningInstruction}` : planningInstruction;
               setResult(result2);
               setState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _123 => _123(result2)]);
+              _optionalChain([onComplete, 'optionalCall', _127 => _127(result2)]);
             },
             (error2) => {
               setError(error2);
               setState("error");
-              _optionalChain([onError, 'optionalCall', _124 => _124(error2)]);
+              _optionalChain([onError, 'optionalCall', _128 => _128(error2)]);
             }
           );
         } else {
           const progressInterval = setInterval(() => {
             setProgress((prev) => {
               const next = Math.min(prev + 10, 90);
-              _optionalChain([onProgress, 'optionalCall', _125 => _125(next)]);
+              _optionalChain([onProgress, 'optionalCall', _129 => _129(next)]);
               return next;
             });
           }, 200);
@@ -5074,7 +5308,7 @@ ${planningInstruction}` : planningInstruction;
           setResult(result2);
           setState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _126 => _126(result2)]);
+          _optionalChain([onComplete, 'optionalCall', _130 => _130(result2)]);
         }
       } else {
         if (enableStreaming) {
@@ -5120,16 +5354,16 @@ ${commandInstruction}` : commandInstruction;
               if (chunk.type === "token" && chunk.content) {
                 accumulatedContent += chunk.content;
                 setStreamedContent(accumulatedContent);
-                _optionalChain([onChunk, 'optionalCall', _127 => _127(chunk.content)]);
+                _optionalChain([onChunk, 'optionalCall', _131 => _131(chunk.content)]);
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
-                _optionalChain([onProgress, 'optionalCall', _128 => _128(estimatedProgress)]);
+                _optionalChain([onProgress, 'optionalCall', _132 => _132(estimatedProgress)]);
               } else if (chunk.type === "widget" && chunk.widget) {
                 const widget = chunk.widget;
                 setResult((prev) => ({
                   success: true,
-                  data: _optionalChain([prev, 'optionalAccess', _129 => _129.data]) || {},
-                  widgets: [..._optionalChain([prev, 'optionalAccess', _130 => _130.widgets]) || [], widget],
+                  data: _optionalChain([prev, 'optionalAccess', _133 => _133.data]) || {},
+                  widgets: [..._optionalChain([prev, 'optionalAccess', _134 => _134.widgets]) || [], widget],
                   message: accumulatedContent || "Command executed successfully"
                 }));
               }
@@ -5149,20 +5383,20 @@ ${commandInstruction}` : commandInstruction;
               setResult(result2);
               setState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _131 => _131(result2)]);
+              _optionalChain([onComplete, 'optionalCall', _135 => _135(result2)]);
             },
             (error2) => {
               const err = error2 instanceof Error ? error2 : new Error("Unknown error");
               setError(err);
               setState("error");
-              _optionalChain([onError, 'optionalCall', _132 => _132(err)]);
+              _optionalChain([onError, 'optionalCall', _136 => _136(err)]);
             }
           );
         } else {
           const progressInterval = setInterval(() => {
             setProgress((prev) => {
               const next = Math.min(prev + 10, 90);
-              _optionalChain([onProgress, 'optionalCall', _133 => _133(next)]);
+              _optionalChain([onProgress, 'optionalCall', _137 => _137(next)]);
               return next;
             });
           }, 200);
@@ -5218,14 +5452,14 @@ ${commandInstruction}` : commandInstruction;
           setResult(result2);
           setState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _134 => _134(result2)]);
+          _optionalChain([onComplete, 'optionalCall', _138 => _138(result2)]);
         }
       }
     } catch (err) {
       const error2 = err instanceof Error ? err : new Error("Unknown error");
       setError(error2);
       setState("error");
-      _optionalChain([onError, 'optionalCall', _135 => _135(error2)]);
+      _optionalChain([onError, 'optionalCall', _139 => _139(error2)]);
     }
   };
   const resetCommand = () => {
@@ -5258,14 +5492,14 @@ ${planToExecute}`;
   };
   const handleFileSelect = async (e) => {
     if (e.target.files && e.target.files.length > 0) {
-      _optionalChain([onFileUpload, 'optionalCall', _136 => _136(e.target.files)]);
+      _optionalChain([onFileUpload, 'optionalCall', _140 => _140(e.target.files)]);
       const files = [];
       for (let i = 0; i < e.target.files.length; i++) {
         const file = e.target.files[i];
         const reader = new FileReader();
         await new Promise((resolve) => {
           reader.onload = (event) => {
-            if (_optionalChain([event, 'access', _137 => _137.target, 'optionalAccess', _138 => _138.result])) {
+            if (_optionalChain([event, 'access', _141 => _141.target, 'optionalAccess', _142 => _142.result])) {
               const fullDataUrl = event.target.result;
               const base64Data = fullDataUrl.split(",")[1];
               if (file.type.startsWith("image/")) {
@@ -5359,7 +5593,7 @@ ${planToExecute}`;
               enableFileUpload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "button",
                 {
-                  onClick: () => _optionalChain([fileInputRef, 'access', _139 => _139.current, 'optionalAccess', _140 => _140.click, 'call', _141 => _141()]),
+                  onClick: () => _optionalChain([fileInputRef, 'access', _143 => _143.current, 'optionalAccess', _144 => _144.click, 'call', _145 => _145()]),
                   className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-neutral-500 dark:!text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800",
                   title: "Attach file",
                   children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
@@ -5578,7 +5812,7 @@ ${planToExecute}`;
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-5 h-5 text-red-600 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
               /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "text-sm font-semibold text-red-800 dark:text-red-400", children: "Error" }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: _optionalChain([error, 'optionalAccess', _142 => _142.message]) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: _optionalChain([error, 'optionalAccess', _146 => _146.message]) })
               ] })
             ] }) }),
             allowInput && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -5606,7 +5840,7 @@ ${planToExecute}`;
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-green-700 dark:text-green-300 text-sm", children: "Command executed successfully" })
               ] })
             ] }),
-            _optionalChain([result, 'access', _143 => _143.data, 'optionalAccess', _144 => _144.summary]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-neutral-700 dark:text-neutral-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
+            _optionalChain([result, 'access', _147 => _147.data, 'optionalAccess', _148 => _148.summary]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-neutral-700 dark:text-neutral-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
             result.widgets && result.widgets.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "space-y-3", children: result.widgets.map((widget) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               WidgetRenderer,
               {
@@ -5657,7 +5891,7 @@ ${planToExecute}`;
             enableFileUpload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
-                onClick: () => _optionalChain([fileInputRef, 'access', _145 => _145.current, 'optionalAccess', _146 => _146.click, 'call', _147 => _147()]),
+                onClick: () => _optionalChain([fileInputRef, 'access', _149 => _149.current, 'optionalAccess', _150 => _150.click, 'call', _151 => _151()]),
                 className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-neutral-500 dark:!text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800",
                 title: "Attach file",
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
@@ -5843,25 +6077,25 @@ function Prompt({
     const newValue = e.target.value;
     if (!maxLength || newValue.length <= maxLength) {
       setValue(newValue);
-      _optionalChain([onChange, 'optionalCall', _148 => _148(newValue)]);
+      _optionalChain([onChange, 'optionalCall', _152 => _152(newValue)]);
     }
   };
   const handleSubmit = async () => {
     if (value.length < minLength) return;
-    _optionalChain([onSubmit, 'optionalCall', _149 => _149(value)]);
+    _optionalChain([onSubmit, 'optionalCall', _153 => _153(value)]);
     setIsLoading(true);
     try {
       if (useMock) {
         await new Promise((resolve) => setTimeout(resolve, 1500));
         const mockResult = `Enhanced version: ${value} [AI-generated content]`;
-        _optionalChain([onResult, 'optionalCall', _150 => _150(mockResult)]);
+        _optionalChain([onResult, 'optionalCall', _154 => _154(mockResult)]);
         setValue("");
       } else {
         const response = await aptevaClient.chat({
           agent_id: agentId,
           message: value
         });
-        _optionalChain([onResult, 'optionalCall', _151 => _151(response.message)]);
+        _optionalChain([onResult, 'optionalCall', _155 => _155(response.message)]);
         setValue("");
       }
     } catch (error) {
@@ -5956,7 +6190,7 @@ function Stream({
   }, [autoStart]);
   const startStreaming = async () => {
     setIsStreaming(true);
-    _optionalChain([onStart, 'optionalCall', _152 => _152()]);
+    _optionalChain([onStart, 'optionalCall', _156 => _156()]);
     try {
       if (useMock) {
         const mockText = "This is a simulated streaming response from the AI agent. In a real implementation, this would stream data from your backend API. The text appears word by word to simulate the streaming effect. You can customize the typing speed and styling based on your needs.";
@@ -5964,13 +6198,13 @@ function Stream({
           mockText,
           (chunk) => {
             setText((prev) => prev + chunk);
-            _optionalChain([onChunk, 'optionalCall', _153 => _153(chunk)]);
+            _optionalChain([onChunk, 'optionalCall', _157 => _157(chunk)]);
           },
           typingSpeed
         );
         setIsComplete(true);
         setIsStreaming(false);
-        _optionalChain([onComplete, 'optionalCall', _154 => _154(text + mockText)]);
+        _optionalChain([onComplete, 'optionalCall', _158 => _158(text + mockText)]);
       } else {
         let accumulatedText = "";
         await aptevaClient.chatStream(
@@ -5983,24 +6217,24 @@ function Stream({
             if (chunk.type === "token" && chunk.content) {
               accumulatedText += chunk.content;
               setText(accumulatedText);
-              _optionalChain([onChunk, 'optionalCall', _155 => _155(chunk.content)]);
+              _optionalChain([onChunk, 'optionalCall', _159 => _159(chunk.content)]);
             }
           },
           () => {
             setIsComplete(true);
             setIsStreaming(false);
-            _optionalChain([onComplete, 'optionalCall', _156 => _156(accumulatedText)]);
+            _optionalChain([onComplete, 'optionalCall', _160 => _160(accumulatedText)]);
           },
           (error) => {
             const err = error instanceof Error ? error : new Error("Streaming error");
-            _optionalChain([onError, 'optionalCall', _157 => _157(err)]);
+            _optionalChain([onError, 'optionalCall', _161 => _161(err)]);
             setIsStreaming(false);
           }
         );
       }
     } catch (error) {
       const err = error instanceof Error ? error : new Error("Streaming error");
-      _optionalChain([onError, 'optionalCall', _158 => _158(err)]);
+      _optionalChain([onError, 'optionalCall', _162 => _162(err)]);
       setIsStreaming(false);
     }
   };
@@ -6092,7 +6326,7 @@ function ThreadList({
 }) {
   const [searchQuery, setSearchQuery] = _react.useState.call(void 0, "");
   const filteredThreads = threads.filter(
-    (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || _optionalChain([thread, 'access', _159 => _159.preview, 'optionalAccess', _160 => _160.toLowerCase, 'call', _161 => _161(), 'access', _162 => _162.includes, 'call', _163 => _163(searchQuery.toLowerCase())])
+    (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || _optionalChain([thread, 'access', _163 => _163.preview, 'optionalAccess', _164 => _164.toLowerCase, 'call', _165 => _165(), 'access', _166 => _166.includes, 'call', _167 => _167(searchQuery.toLowerCase())])
   );
   const groupedThreads = groupBy === "date" ? groupThreadsByDate(filteredThreads) : { All: filteredThreads };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col h-full", children: [
@@ -6114,8 +6348,8 @@ function ThreadList({
           {
             thread,
             isActive: thread.id === currentThreadId,
-            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _164 => _164(thread.id)]),
-            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _165 => _165(thread.id)])
+            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _168 => _168(thread.id)]),
+            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _169 => _169(thread.id)])
           },
           thread.id
         ))
@@ -6177,7 +6411,7 @@ function Threads({
       threads.slice(0, 5).map((thread) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
-          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _166 => _166(thread.id)]),
+          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _170 => _170(thread.id)]),
           className: cn(
             "px-4 py-2 whitespace-nowrap font-medium transition-colors",
             thread.id === currentThreadId ? "border-b-2 border-apteva-500 text-apteva-500" : "text-neutral-600 hover:text-neutral-900"
@@ -6362,7 +6596,7 @@ function TabsLayout({ node, renderNode }) {
 var STRUCTURAL_KEYS = /* @__PURE__ */ new Set(["type", "id", "layout", "props", "children", "actions", "metadata", "isStreaming"]);
 function normalizeNode(n) {
   let node = { ...n };
-  if (node.type === "widget" && _optionalChain([node, 'access', _167 => _167.props, 'optionalAccess', _168 => _168.widget])) {
+  if (node.type === "widget" && _optionalChain([node, 'access', _171 => _171.props, 'optionalAccess', _172 => _172.widget])) {
     node.type = node.props.widget;
     const { widget: _, ...rest } = node.props;
     node.props = rest;
@@ -6500,10 +6734,10 @@ function AutoInterface({
   ].filter(Boolean).join("\n\n");
   const updateInterface = _react.useCallback.call(void 0, (newSpec) => {
     setInterfaceSpec(newSpec);
-    _optionalChain([onInterfaceChange, 'optionalCall', _169 => _169(newSpec)]);
+    _optionalChain([onInterfaceChange, 'optionalCall', _173 => _173(newSpec)]);
   }, [onInterfaceChange]);
   const handleAction = _react.useCallback.call(void 0, (action) => {
-    _optionalChain([onAction, 'optionalCall', _170 => _170(action)]);
+    _optionalChain([onAction, 'optionalCall', _174 => _174(action)]);
     if (chatRef.current) {
       chatRef.current.sendMessage(
         `[Action: ${action.type} on widget ${action.widgetId || "unknown"}. Payload: ${JSON.stringify(action.payload)}]`
@@ -6511,7 +6745,7 @@ function AutoInterface({
     }
   }, [onAction]);
   const handleMessageComplete = _react.useCallback.call(void 0, (result) => {
-    if (!_optionalChain([result, 'optionalAccess', _171 => _171.data])) return;
+    if (!_optionalChain([result, 'optionalAccess', _175 => _175.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));
     const parsed = parseInterfaceFromText(text);
@@ -6551,7 +6785,7 @@ function AutoInterface({
     }).catch((err) => {
       if (cancelled) return;
       console.error("[AutoInterface] Initial generation failed:", err);
-      _optionalChain([onError, 'optionalCall', _172 => _172(err instanceof Error ? err : new Error(String(err)))]);
+      _optionalChain([onError, 'optionalCall', _176 => _176(err instanceof Error ? err : new Error(String(err)))]);
       setIsGenerating(false);
     });
     return () => {
@@ -6717,7 +6951,7 @@ function useInterfaceAI({
   }
   const sendMessage = _react.useCallback.call(void 0, async (message) => {
     accumulatedTextRef.current = "";
-    _optionalChain([onStreamStart, 'optionalCall', _173 => _173()]);
+    _optionalChain([onStreamStart, 'optionalCall', _177 => _177()]);
     const systemPrompt = [
       generateInterfaceContext(),
       context || ""
@@ -6740,27 +6974,27 @@ function useInterfaceAI({
             accumulatedTextRef.current += chunk.content || "";
             const parsed = parseInterfaceFromText(accumulatedTextRef.current);
             if (parsed) {
-              _optionalChain([onInterface, 'optionalCall', _174 => _174(parsed)]);
+              _optionalChain([onInterface, 'optionalCall', _178 => _178(parsed)]);
             }
             const updates = parseUpdatesFromText(accumulatedTextRef.current);
             if (updates.length > 0) {
-              _optionalChain([onUpdates, 'optionalCall', _175 => _175(updates)]);
+              _optionalChain([onUpdates, 'optionalCall', _179 => _179(updates)]);
             }
           }
         },
         // onComplete
         () => {
-          _optionalChain([onStreamEnd, 'optionalCall', _176 => _176()]);
+          _optionalChain([onStreamEnd, 'optionalCall', _180 => _180()]);
         },
         // onError
         (error) => {
-          _optionalChain([onError, 'optionalCall', _177 => _177(error)]);
-          _optionalChain([onStreamEnd, 'optionalCall', _178 => _178()]);
+          _optionalChain([onError, 'optionalCall', _181 => _181(error)]);
+          _optionalChain([onStreamEnd, 'optionalCall', _182 => _182()]);
         }
       );
     } catch (error) {
-      _optionalChain([onError, 'optionalCall', _179 => _179(error instanceof Error ? error : new Error("Unknown error"))]);
-      _optionalChain([onStreamEnd, 'optionalCall', _180 => _180()]);
+      _optionalChain([onError, 'optionalCall', _183 => _183(error instanceof Error ? error : new Error("Unknown error"))]);
+      _optionalChain([onStreamEnd, 'optionalCall', _184 => _184()]);
     }
   }, [agentId, context, onInterface, onUpdates, onError, onStreamStart, onStreamEnd]);
   return {