@apteva/apteva-kit 0.1.128 → 0.1.130

package/dist/index.js

@@ -747,8 +747,8 @@ var WIDGET_DEFINITIONS = {
     example: '@ui:button_group[{"buttons": [{"id": "ok", "label": "OK"}]}]'
   },
   form: {
-    schema: 'title?, fields: [{name, type: "text"|"password"|"number"|"select"|"checkbox"|"textarea"|"date", label, required?, placeholder?, options?: [{label, value}]}], actions: [{type, label}]',
-    example: '@ui:form[{"title": "Settings", "fields": [{"name": "key", "type": "password", "label": "API Key", "required": true}], "actions": [{"type": "save", "label": "Save"}]}]'
+    schema: 'title?, fields: [{name, type: "text"|"password"|"number"|"select"|"checkbox"|"textarea"|"date", label, required?, placeholder?, options?: [{label, value}]}], submitLabel?: string',
+    example: '@ui:form[{"title": "Settings", "fields": [{"name": "key", "type": "password", "label": "API Key", "required": true}]}]'
   },
   table: {
     schema: "columns: [{key, label}], rows: [{key: value, \u2026}], striped?, compact?",
@@ -797,9 +797,9 @@ Do NOT wrap widgets in code blocks or backticks. Write them directly in your res
 `;
   }
   context += `### Notes
-- **actions**: the \`type\` field is a custom string you choose (e.g. "edit", "delete", "submit"). It is returned to the app when the user clicks the button.
+- **actions**: the \`type\` field is a custom string you choose (e.g. "edit", "delete"). It is returned to the app when the user clicks the button.
 - **metadata** on list items: any extra data attached to an item. Returned as the action payload when the user clicks that item.
-- **form**: buttons are defined in \`actions\`, do NOT add a separate button_group for form submission.
+- **form**: always has a submit button (label defaults to "Submit"). When clicked, the form data is sent as a chat message automatically. Do NOT add a separate button_group for form submission.
 - **select fields**: \`options\` is an array of \`{label, value}\` objects.
 `;
   return context;
@@ -819,7 +819,7 @@ Use when structured display is clearer than plain text. Normal text can surround
 `;
   }
   context += `
-actions.type = custom string returned on click. list metadata = payload on item click. form buttons go in actions, not button_group.
+actions.type = custom string returned on click. list metadata = payload on item click. form submit sends data as chat message automatically, no button_group needed.
 `;
   return context;
 }
@@ -1765,10 +1765,10 @@ function Form({ widget, onAction }) {
   }, []);
   const handleSubmit = (e) => {
     e.preventDefault();
-    if (_optionalChain([widget, 'access', _24 => _24.actions, 'optionalAccess', _25 => _25[0]]) && onAction) {
+    if (onAction) {
       onAction({
-        type: widget.actions[0].type,
-        payload: { ...widget.actions[0].payload, formData },
+        type: "submit",
+        payload: { formData },
         widgetId: widget.id,
         timestamp: /* @__PURE__ */ new Date()
       });
@@ -1873,7 +1873,7 @@ function Form({ widget, onAction }) {
             "button",
             {
               type: "button",
-              onClick: () => _optionalChain([fileInputRefs, 'access', _26 => _26.current, 'access', _27 => _27[field.name], 'optionalAccess', _28 => _28.click, 'call', _29 => _29()]),
+              onClick: () => _optionalChain([fileInputRefs, 'access', _24 => _24.current, 'access', _25 => _25[field.name], 'optionalAccess', _26 => _26.click, 'call', _27 => _27()]),
               className: "apteva-file-drop w-full px-3 py-3 rounded-lg border-2 border-dashed transition-colors cursor-pointer !text-sm",
               children: field.placeholder || "Click to add files"
             }
@@ -1910,7 +1910,7 @@ function Form({ widget, onAction }) {
         return null;
     }
   };
-  const submitAction = _optionalChain([widget, 'access', _30 => _30.actions, 'optionalAccess', _31 => _31.find, 'call', _32 => _32((a) => a.type === "submit")]) || _optionalChain([widget, 'access', _33 => _33.actions, 'optionalAccess', _34 => _34[0]]);
+  const submitLabel = widget.props.submitLabel || _optionalChain([widget, 'access', _28 => _28.actions, 'optionalAccess', _29 => _29.find, 'call', _30 => _30((a) => a.type === "submit"), 'optionalAccess', _31 => _31.label]) || _optionalChain([widget, 'access', _32 => _32.actions, 'optionalAccess', _33 => _33[0], 'optionalAccess', _34 => _34.label]) || "Submit";
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { onSubmit: handleSubmit, className: "border rounded-xl overflow-hidden", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "p-4", children: [
       title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "!text-lg font-semibold mb-4", children: title }),
@@ -1922,12 +1922,12 @@ function Form({ widget, onAction }) {
         renderField(field)
       ] }, field.name)) })
     ] }),
-    submitAction && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-4 pb-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-4 pb-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "button",
       {
         type: "submit",
         className: "px-3 py-1.5 !text-sm rounded-lg font-medium transition-colors",
-        children: submitAction.label || "Submit"
+        children: submitLabel
       }
     ) })
   ] });
@@ -3370,7 +3370,7 @@ 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 }) {
+function Composer({ onSendMessage, placeholder = "Type a message...", disabled = false, isLoading = false, onStop, onFileUpload, onSwitchMode, speechToText, enableVoice = false, voiceState = "idle", voicePartialTranscript = "", voiceDuration = 0, onVoiceStart, onVoiceStop }) {
   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, []);
@@ -3663,6 +3663,31 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
   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";
+  const voiceActive = voiceState === "active" || voiceState === "connecting";
+  const formatVoiceDuration = (s) => {
+    const m = Math.floor(s / 60);
+    const sec = s % 60;
+    return `${m}:${sec.toString().padStart(2, "0")}`;
+  };
+  const showMicButton = enableVoice && !text.trim() && pendingFiles.length === 0 && !isLoading && !voiceActive;
+  if (voiceActive) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-4 py-3 relative", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-voice-overlay", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-voice-transcript-area", children: voicePartialTranscript ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-voice-partial", children: voicePartialTranscript }) : voiceState === "connecting" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-voice-connecting", children: "Connecting..." }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-voice-listening", children: "Listening..." }) }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-voice-controls", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-voice-duration", children: formatVoiceDuration(voiceDuration) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "button",
+          {
+            onClick: onVoiceStop,
+            className: "apteva-voice-stop-btn",
+            title: "Stop voice mode",
+            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, "rect", { x: "3", y: "3", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-voice-indicator", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: `apteva-voice-pulse ${voiceState === "active" ? "apteva-voice-pulse-active" : ""}` }) })
+    ] }) });
+  }
   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" }) }),
@@ -3806,6 +3831,18 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
                 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" }) })
               }
+            ) : showMicButton ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                onClick: onVoiceStart,
+                className: "apteva-composer-voice-btn w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0",
+                title: "Start voice mode",
+                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, 
               "button",
               {
@@ -4366,6 +4403,261 @@ function PersistentWidgetPanel({ widgets, onAction }) {
   ] });
 }
 
+// src/hooks/useVoiceSession.ts
+
+
+// src/utils/audio-utils.ts
+function float32ToInt16(float32Array) {
+  const int16Array = new Int16Array(float32Array.length);
+  for (let i = 0; i < float32Array.length; i++) {
+    const s = Math.max(-1, Math.min(1, float32Array[i]));
+    int16Array[i] = s < 0 ? s * 32768 : s * 32767;
+  }
+  return int16Array;
+}
+function int16ToBase64(int16Array) {
+  const uint8Array = new Uint8Array(int16Array.buffer);
+  let binary = "";
+  for (let i = 0; i < uint8Array.length; i++) {
+    binary += String.fromCharCode(uint8Array[i]);
+  }
+  return btoa(binary);
+}
+function base64ToFloat32(base64) {
+  const binaryString = atob(base64);
+  const int16Array = new Int16Array(binaryString.length / 2);
+  for (let i = 0; i < int16Array.length; i++) {
+    int16Array[i] = binaryString.charCodeAt(i * 2 + 1) << 8 | binaryString.charCodeAt(i * 2);
+  }
+  const float32Array = new Float32Array(int16Array.length);
+  for (let i = 0; i < int16Array.length; i++) {
+    float32Array[i] = int16Array[i] / (int16Array[i] < 0 ? 32768 : 32767);
+  }
+  return float32Array;
+}
+function resampleAudio(inputData, inputSampleRate, outputSampleRate) {
+  if (inputSampleRate === outputSampleRate) {
+    return inputData;
+  }
+  const ratio = inputSampleRate / outputSampleRate;
+  const outputLength = Math.floor(inputData.length / ratio);
+  const output = new Float32Array(outputLength);
+  for (let i = 0; i < outputLength; i++) {
+    const srcIndex = i * ratio;
+    const srcIndexFloor = Math.floor(srcIndex);
+    const srcIndexCeil = Math.min(srcIndexFloor + 1, inputData.length - 1);
+    const t = srcIndex - srcIndexFloor;
+    output[i] = inputData[srcIndexFloor] * (1 - t) + inputData[srcIndexCeil] * t;
+  }
+  return output;
+}
+
+// src/hooks/useVoiceSession.ts
+function useVoiceSession(config) {
+  const [state, setState] = _react.useState.call(void 0, "idle");
+  const [partialTranscript, setPartialTranscript] = _react.useState.call(void 0, "");
+  const [duration, setDuration] = _react.useState.call(void 0, 0);
+  const wsRef = _react.useRef.call(void 0, null);
+  const captureCtxRef = _react.useRef.call(void 0, null);
+  const playbackCtxRef = _react.useRef.call(void 0, null);
+  const mediaStreamRef = _react.useRef.call(void 0, null);
+  const processorRef = _react.useRef.call(void 0, null);
+  const nextPlayTimeRef = _react.useRef.call(void 0, 0);
+  const durationIntervalRef = _react.useRef.call(void 0, null);
+  const startTimeRef = _react.useRef.call(void 0, 0);
+  const configRef = _react.useRef.call(void 0, config);
+  configRef.current = config;
+  const cleanup = _react.useCallback.call(void 0, () => {
+    if (durationIntervalRef.current) {
+      clearInterval(durationIntervalRef.current);
+      durationIntervalRef.current = null;
+    }
+    if (processorRef.current) {
+      processorRef.current.disconnect();
+      processorRef.current = null;
+    }
+    if (mediaStreamRef.current) {
+      mediaStreamRef.current.getTracks().forEach((t) => t.stop());
+      mediaStreamRef.current = null;
+    }
+    if (captureCtxRef.current) {
+      try {
+        captureCtxRef.current.close();
+      } catch (_) {
+      }
+      captureCtxRef.current = null;
+    }
+    if (playbackCtxRef.current) {
+      try {
+        playbackCtxRef.current.close();
+      } catch (_) {
+      }
+      playbackCtxRef.current = null;
+    }
+    if (wsRef.current) {
+      try {
+        wsRef.current.close();
+      } catch (_) {
+      }
+      wsRef.current = null;
+    }
+    nextPlayTimeRef.current = 0;
+    setPartialTranscript("");
+    setDuration(0);
+  }, []);
+  _react.useEffect.call(void 0, () => {
+    return () => {
+      cleanup();
+    };
+  }, [cleanup]);
+  const playAudioChunk = _react.useCallback.call(void 0, (base64Audio) => {
+    if (!playbackCtxRef.current) {
+      playbackCtxRef.current = new AudioContext({ sampleRate: 24e3 });
+    }
+    const ctx = playbackCtxRef.current;
+    if (ctx.state === "suspended") {
+      ctx.resume();
+    }
+    const float32Data = base64ToFloat32(base64Audio);
+    const audioBuffer = ctx.createBuffer(1, float32Data.length, 24e3);
+    audioBuffer.getChannelData(0).set(float32Data);
+    const source = ctx.createBufferSource();
+    source.buffer = audioBuffer;
+    source.connect(ctx.destination);
+    const currentTime = ctx.currentTime;
+    const startTime = Math.max(currentTime, nextPlayTimeRef.current);
+    source.start(startTime);
+    nextPlayTimeRef.current = startTime + audioBuffer.duration;
+  }, []);
+  const handleMessage = _react.useCallback.call(void 0, (msg) => {
+    const cfg = configRef.current;
+    switch (msg.type) {
+      case "session_created":
+        setState("active");
+        startTimeRef.current = Date.now();
+        durationIntervalRef.current = setInterval(() => {
+          setDuration(Math.floor((Date.now() - startTimeRef.current) / 1e3));
+        }, 1e3);
+        break;
+      case "audio_delta":
+        if (_optionalChain([msg, 'access', _93 => _93.data, 'optionalAccess', _94 => _94.chunk])) {
+          playAudioChunk(msg.data.chunk);
+        }
+        break;
+      case "transcript":
+        if (msg.data) {
+          if (msg.data.partial) {
+            setPartialTranscript(msg.data.content);
+          } else {
+            setPartialTranscript("");
+            _optionalChain([cfg, 'access', _95 => _95.onTranscript, 'optionalCall', _96 => _96({
+              id: `vt-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
+              role: msg.data.role,
+              content: msg.data.content,
+              partial: false,
+              timestamp: /* @__PURE__ */ new Date()
+            })]);
+          }
+        }
+        break;
+      case "tool_call":
+        if (msg.data) {
+          nextPlayTimeRef.current = 0;
+          _optionalChain([cfg, 'access', _97 => _97.onTranscript, 'optionalCall', _98 => _98({
+            id: `vt-tool-${Date.now()}`,
+            role: "system",
+            content: `Using ${msg.data.name}...`,
+            partial: false,
+            timestamp: /* @__PURE__ */ new Date()
+          })]);
+        }
+        break;
+      case "tool_result":
+        if (msg.data) {
+          nextPlayTimeRef.current = 0;
+        }
+        break;
+      case "error":
+        setState("error");
+        _optionalChain([cfg, 'access', _99 => _99.onError, 'optionalCall', _100 => _100(new Error(_optionalChain([msg, 'access', _101 => _101.data, 'optionalAccess', _102 => _102.message]) || "Voice session error"))]);
+        break;
+    }
+  }, [playAudioChunk]);
+  const startCapture = _react.useCallback.call(void 0, async () => {
+    const ws = wsRef.current;
+    if (!ws) return;
+    try {
+      captureCtxRef.current = new AudioContext();
+      const nativeSampleRate = captureCtxRef.current.sampleRate;
+      mediaStreamRef.current = await navigator.mediaDevices.getUserMedia({ audio: true });
+      const source = captureCtxRef.current.createMediaStreamSource(mediaStreamRef.current);
+      processorRef.current = captureCtxRef.current.createScriptProcessor(2048, 1, 1);
+      processorRef.current.onaudioprocess = (e) => {
+        if (!ws || ws.readyState !== WebSocket.OPEN) return;
+        const inputData = e.inputBuffer.getChannelData(0);
+        const resampledData = resampleAudio(inputData, nativeSampleRate, 16e3);
+        const int16Data = float32ToInt16(resampledData);
+        const base64Data = int16ToBase64(int16Data);
+        ws.send(JSON.stringify({
+          type: "audio",
+          data: { chunk: base64Data }
+        }));
+      };
+      source.connect(processorRef.current);
+      processorRef.current.connect(captureCtxRef.current.destination);
+    } catch (e) {
+      _optionalChain([configRef, 'access', _103 => _103.current, 'access', _104 => _104.onError, 'optionalCall', _105 => _105(new Error("Microphone access denied"))]);
+      cleanup();
+      setState("idle");
+    }
+  }, [cleanup]);
+  const start = _react.useCallback.call(void 0, () => {
+    if (state !== "idle") return;
+    setState("connecting");
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const wsUrl = `${protocol}//${window.location.host}${config.apiUrl}/voice`;
+    const ws = new WebSocket(wsUrl);
+    wsRef.current = ws;
+    ws.onopen = () => {
+      const provider = configRef.current.provider || "openai";
+      const voice = configRef.current.voice || "ash";
+      ws.send(JSON.stringify({
+        type: "start",
+        data: { provider, voice }
+      }));
+      startCapture();
+    };
+    ws.onmessage = (event) => {
+      try {
+        const msg = JSON.parse(event.data);
+        handleMessage(msg);
+      } catch (_) {
+      }
+    };
+    ws.onerror = () => {
+      setState("error");
+      _optionalChain([configRef, 'access', _106 => _106.current, 'access', _107 => _107.onError, 'optionalCall', _108 => _108(new Error("WebSocket connection failed"))]);
+    };
+    ws.onclose = () => {
+      cleanup();
+      setState("idle");
+    };
+  }, [state, config.apiUrl, startCapture, handleMessage, cleanup]);
+  const stop = _react.useCallback.call(void 0, () => {
+    cleanup();
+    setState("idle");
+  }, [cleanup]);
+  const sendText = _react.useCallback.call(void 0, (text) => {
+    const ws = wsRef.current;
+    if (!ws || ws.readyState !== WebSocket.OPEN) return;
+    ws.send(JSON.stringify({
+      type: "text",
+      data: { content: text }
+    }));
+  }, []);
+  return { state, partialTranscript, duration, start, stop, sendText };
+}
+
 // src/components/Chat/Chat.tsx
 
 var Chat = _react.forwardRef.call(void 0, function Chat2({
@@ -4418,6 +4710,10 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   onWidgetRender,
   // Speech to text
   speechToText,
+  // Realtime voice
+  enableVoice = false,
+  voiceProvider,
+  voiceId,
   className
 }, ref) {
   const [messages, setMessages] = _react.useState.call(void 0, initialMessages);
@@ -4438,6 +4734,23 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   const [internalPlanMode, setInternalPlanMode] = _react.useState.call(void 0, planMode);
   const [showSettingsMenu, setShowSettingsMenu] = _react.useState.call(void 0, false);
   const fileInputRef = _react.useRef.call(void 0, null);
+  const handleVoiceTranscript = _react.useCallback.call(void 0, (entry) => {
+    const msg = {
+      id: entry.id,
+      role: entry.role === "system" ? "assistant" : entry.role,
+      content: entry.content,
+      timestamp: entry.timestamp,
+      metadata: entry.role === "system" ? { isVoiceSystem: true } : { isVoice: true }
+    };
+    setMessages((prev) => [...prev, msg]);
+  }, []);
+  const voice = useVoiceSession({
+    apiUrl: apiUrl || "",
+    provider: voiceProvider,
+    voice: voiceId,
+    onTranscript: handleVoiceTranscript,
+    onError
+  });
   const [persistentWidgets, setPersistentWidgets] = _react.useState.call(void 0, /* @__PURE__ */ new Map());
   const updatePersistentWidgets = _react.useCallback.call(void 0, (msgs) => {
     setPersistentWidgets((prev) => {
@@ -4493,7 +4806,7 @@ ${widgetContext}` : widgetContext;
   }, [apiUrl, apiKey]);
   _react.useEffect.call(void 0, () => {
     if (threadId) {
-      _optionalChain([onThreadChange, 'optionalCall', _93 => _93(threadId)]);
+      _optionalChain([onThreadChange, 'optionalCall', _109 => _109(threadId)]);
     }
   }, [threadId, onThreadChange]);
   _react.useEffect.call(void 0, () => {
@@ -4511,7 +4824,7 @@ ${widgetContext}` : widgetContext;
   }, [showSettingsMenu]);
   const handleModeChange = (newMode) => {
     setMode(newMode);
-    _optionalChain([onModeChange, 'optionalCall', _94 => _94(newMode)]);
+    _optionalChain([onModeChange, 'optionalCall', _110 => _110(newMode)]);
     if (newMode === "command") {
       setCommandState("idle");
       setCommandResult(null);
@@ -4520,8 +4833,8 @@ ${widgetContext}` : widgetContext;
   };
   const defaultPlaceholder = mode === "chat" ? "Type a message..." : "Enter your command...";
   const handleWidgetAction = _react.useCallback.call(void 0, (action) => {
-    _optionalChain([onAction, 'optionalCall', _95 => _95(action)]);
-    if (action.type === "submit" && _optionalChain([action, 'access', _96 => _96.payload, 'optionalAccess', _97 => _97.formData])) {
+    _optionalChain([onAction, 'optionalCall', _111 => _111(action)]);
+    if (action.type === "submit" && _optionalChain([action, 'access', _112 => _112.payload, 'optionalAccess', _113 => _113.formData])) {
       const formData = action.payload.formData;
       const lines = [];
       for (const [key, value] of Object.entries(formData)) {
@@ -4560,7 +4873,7 @@ ${widgetContext}` : widgetContext;
         metadata: hasFiles ? { attachments } : void 0
       };
       setMessages((prev) => [...prev, userMessage]);
-      _optionalChain([onMessageSent, 'optionalCall', _98 => _98(userMessage)]);
+      _optionalChain([onMessageSent, 'optionalCall', _114 => _114(userMessage)]);
     }
     setIsLoading(true);
     try {
@@ -4628,7 +4941,7 @@ ${widgetContext}` : widgetContext;
                   responseThreadId = chunk.thread_id;
                   if (!currentThreadId) {
                     setCurrentThreadId(chunk.thread_id);
-                    _optionalChain([onThreadChange, 'optionalCall', _99 => _99(chunk.thread_id)]);
+                    _optionalChain([onThreadChange, 'optionalCall', _115 => _115(chunk.thread_id)]);
                   }
                 }
                 break;
@@ -4660,7 +4973,7 @@ ${widgetContext}` : widgetContext;
                   contentSegments.push({ type: "tool", id: chunk.tool_id, name: displayName, status: "preparing" });
                   toolInputBuffers[chunk.tool_id] = "";
                   setChatToolName(displayName);
-                  _optionalChain([onToolCall, 'optionalCall', _100 => _100(chunk.tool_name, chunk.tool_id)]);
+                  _optionalChain([onToolCall, 'optionalCall', _116 => _116(chunk.tool_name, chunk.tool_id)]);
                   updateMessage();
                 }
                 break;
@@ -4720,7 +5033,7 @@ ${widgetContext}` : widgetContext;
                     toolSegment.result = chunk.content;
                     toolSegment.status = "completed";
                     toolSegment.isReceiving = false;
-                    _optionalChain([onToolResult, 'optionalCall', _101 => _101(toolSegment.name, chunk.content)]);
+                    _optionalChain([onToolResult, 'optionalCall', _117 => _117(toolSegment.name, chunk.content)]);
                   }
                   setChatToolName(null);
                   updateMessage();
@@ -4764,7 +5077,7 @@ ${widgetContext}` : widgetContext;
             });
             if (threadId2 && threadId2 !== currentThreadId) {
               setCurrentThreadId(threadId2);
-              _optionalChain([onThreadChange, 'optionalCall', _102 => _102(threadId2)]);
+              _optionalChain([onThreadChange, 'optionalCall', _118 => _118(threadId2)]);
             }
             setIsLoading(false);
             setCurrentRequestId(null);
@@ -4788,7 +5101,7 @@ ${widgetContext}` : widgetContext;
             setIsLoading(false);
             setCurrentRequestId(null);
             setChatToolName(null);
-            _optionalChain([onError, 'optionalCall', _103 => _103(error)]);
+            _optionalChain([onError, 'optionalCall', _119 => _119(error)]);
           }
         );
       }
@@ -4801,7 +5114,7 @@ ${widgetContext}` : widgetContext;
         metadata: { error: true }
       };
       setMessages((prev) => [...prev, errorMessage]);
-      _optionalChain([onError, 'optionalCall', _104 => _104(error instanceof Error ? error : new Error("Unknown error"))]);
+      _optionalChain([onError, 'optionalCall', _120 => _120(error instanceof Error ? error : new Error("Unknown error"))]);
     } finally {
       setIsLoading(false);
     }
@@ -4847,7 +5160,7 @@ ${planningInstruction}` : planningInstruction;
           const error = err instanceof Error ? err : new Error("Failed to generate plan");
           setCommandError(error);
           setCommandState("error");
-          _optionalChain([onError, 'optionalCall', _105 => _105(error)]);
+          _optionalChain([onError, 'optionalCall', _121 => _121(error)]);
         }
       }
       return;
@@ -4880,12 +5193,12 @@ ${planningInstruction}` : planningInstruction;
               setCommandResult(result);
               setCommandState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _106 => _106(result)]);
+              _optionalChain([onComplete, 'optionalCall', _122 => _122(result)]);
             },
             (error) => {
               setCommandError(error);
               setCommandState("error");
-              _optionalChain([onError, 'optionalCall', _107 => _107(error)]);
+              _optionalChain([onError, 'optionalCall', _123 => _123(error)]);
             }
           );
         } else {
@@ -4898,7 +5211,7 @@ ${planningInstruction}` : planningInstruction;
           setCommandResult(result);
           setCommandState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _108 => _108(result)]);
+          _optionalChain([onComplete, 'optionalCall', _124 => _124(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.`;
@@ -4928,16 +5241,16 @@ ${commandInstruction}` : commandInstruction;
                 const displayName = chunk.tool_display_name || chunk.tool_name;
                 lastToolName = chunk.tool_name;
                 setCurrentToolName(displayName);
-                _optionalChain([onToolCall, 'optionalCall', _109 => _109(chunk.tool_name, chunk.tool_id || "")]);
+                _optionalChain([onToolCall, 'optionalCall', _125 => _125(chunk.tool_name, chunk.tool_id || "")]);
                 accumulatedContent = "";
                 setStreamedContent("");
               } else if (chunk.type === "tool_result") {
-                _optionalChain([onToolResult, 'optionalCall', _110 => _110(lastToolName, chunk.content)]);
+                _optionalChain([onToolResult, 'optionalCall', _126 => _126(lastToolName, chunk.content)]);
                 setCurrentToolName(null);
               } else if (chunk.type === "thread_id" && chunk.thread_id) {
                 if (!currentThreadId) {
                   setCurrentThreadId(chunk.thread_id);
-                  _optionalChain([onThreadChange, 'optionalCall', _111 => _111(chunk.thread_id)]);
+                  _optionalChain([onThreadChange, 'optionalCall', _127 => _127(chunk.thread_id)]);
                 }
               } else if (chunk.type === "request_id" && chunk.request_id) {
                 setCurrentRequestId(chunk.request_id);
@@ -4953,13 +5266,13 @@ ${commandInstruction}` : commandInstruction;
               setCommandState("success");
               setProgress(100);
               setCurrentRequestId(null);
-              _optionalChain([onComplete, 'optionalCall', _112 => _112(result)]);
+              _optionalChain([onComplete, 'optionalCall', _128 => _128(result)]);
             },
             (error) => {
               setCommandError(error);
               setCommandState("error");
               setCurrentRequestId(null);
-              _optionalChain([onError, 'optionalCall', _113 => _113(error)]);
+              _optionalChain([onError, 'optionalCall', _129 => _129(error)]);
             }
           );
         } else {
@@ -4979,14 +5292,14 @@ ${commandInstruction}` : commandInstruction;
           setCommandResult(result);
           setCommandState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _114 => _114(result)]);
+          _optionalChain([onComplete, 'optionalCall', _130 => _130(result)]);
         }
       }
     } catch (err) {
       const error = err instanceof Error ? err : new Error("Unknown error");
       setCommandError(error);
       setCommandState("error");
-      _optionalChain([onError, 'optionalCall', _115 => _115(error)]);
+      _optionalChain([onError, 'optionalCall', _131 => _131(error)]);
     }
   };
   const resetCommand = () => {
@@ -5040,8 +5353,8 @@ ${planToExecute}`;
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-chat-title", children: headerTitle }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn(
           "apteva-chat-status",
-          isLoading ? chatToolName ? "apteva-chat-status-tool" : "apteva-chat-status-thinking" : "apteva-chat-status-ready"
-        ), children: isLoading ? chatToolName ? `Using ${chatToolName}...` : "Thinking..." : "Ready" })
+          voice.state === "active" ? "apteva-chat-status-voice" : voice.state === "connecting" ? "apteva-chat-status-thinking" : isLoading ? chatToolName ? "apteva-chat-status-tool" : "apteva-chat-status-thinking" : "apteva-chat-status-ready"
+        ), children: voice.state === "active" ? "Voice active" : voice.state === "connecting" ? "Connecting voice..." : isLoading ? chatToolName ? `Using ${chatToolName}...` : "Thinking..." : "Ready" })
       ] })
     ] }) }),
     mode === "chat" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
@@ -5074,7 +5387,13 @@ ${planToExecute}`;
           onStop: handleStop,
           onFileUpload,
           onSwitchMode: showModeToggle ? () => handleModeChange("command") : void 0,
-          speechToText
+          speechToText,
+          enableVoice,
+          voiceState: voice.state,
+          voicePartialTranscript: voice.partialTranscript,
+          voiceDuration: voice.duration,
+          onVoiceStart: voice.start,
+          onVoiceStop: voice.stop
         }
       )
     ] }),
@@ -5086,8 +5405,8 @@ ${planToExecute}`;
           executeCommand(text, files);
         },
         state: commandState,
-        response: _optionalChain([commandResult, 'optionalAccess', _116 => _116.data, 'optionalAccess', _117 => _117.summary]) || _optionalChain([commandResult, 'optionalAccess', _118 => _118.message]),
-        error: _optionalChain([commandError, 'optionalAccess', _119 => _119.message]),
+        response: _optionalChain([commandResult, 'optionalAccess', _132 => _132.data, 'optionalAccess', _133 => _133.summary]) || _optionalChain([commandResult, 'optionalAccess', _134 => _134.message]),
+        error: _optionalChain([commandError, 'optionalAccess', _135 => _135.message]),
         plan,
         streamedContent,
         toolName: currentToolName,
@@ -5255,13 +5574,13 @@ ${planningInstruction}` : planningInstruction;
             const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
             setError(error2);
             setState("error");
-            _optionalChain([onError, 'optionalCall', _120 => _120(error2)]);
+            _optionalChain([onError, 'optionalCall', _136 => _136(error2)]);
           });
         } catch (err) {
           const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
           setError(error2);
           setState("error");
-          _optionalChain([onError, 'optionalCall', _121 => _121(error2)]);
+          _optionalChain([onError, 'optionalCall', _137 => _137(error2)]);
         }
       }
       return;
@@ -5272,7 +5591,7 @@ ${planningInstruction}` : planningInstruction;
     setStreamedContent("");
     setCommand("");
     setUploadedFiles([]);
-    _optionalChain([onStart, 'optionalCall', _122 => _122()]);
+    _optionalChain([onStart, 'optionalCall', _138 => _138()]);
     try {
       if (useMock) {
         if (enableStreaming) {
@@ -5283,16 +5602,16 @@ ${planningInstruction}` : planningInstruction;
               if (chunk.type === "token" && chunk.content) {
                 accumulatedContent += chunk.content;
                 setStreamedContent(accumulatedContent);
-                _optionalChain([onChunk, 'optionalCall', _123 => _123(chunk.content)]);
+                _optionalChain([onChunk, 'optionalCall', _139 => _139(chunk.content)]);
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
-                _optionalChain([onProgress, 'optionalCall', _124 => _124(estimatedProgress)]);
+                _optionalChain([onProgress, 'optionalCall', _140 => _140(estimatedProgress)]);
               } else if (chunk.type === "widget" && chunk.widget) {
                 const widget = chunk.widget;
                 setResult((prev) => ({
                   success: true,
-                  data: _optionalChain([prev, 'optionalAccess', _125 => _125.data]) || {},
-                  widgets: [..._optionalChain([prev, 'optionalAccess', _126 => _126.widgets]) || [], widget],
+                  data: _optionalChain([prev, 'optionalAccess', _141 => _141.data]) || {},
+                  widgets: [..._optionalChain([prev, 'optionalAccess', _142 => _142.widgets]) || [], widget],
                   message: accumulatedContent || "Command executed successfully"
                 }));
               }
@@ -5312,19 +5631,19 @@ ${planningInstruction}` : planningInstruction;
               setResult(result2);
               setState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _127 => _127(result2)]);
+              _optionalChain([onComplete, 'optionalCall', _143 => _143(result2)]);
             },
             (error2) => {
               setError(error2);
               setState("error");
-              _optionalChain([onError, 'optionalCall', _128 => _128(error2)]);
+              _optionalChain([onError, 'optionalCall', _144 => _144(error2)]);
             }
           );
         } else {
           const progressInterval = setInterval(() => {
             setProgress((prev) => {
               const next = Math.min(prev + 10, 90);
-              _optionalChain([onProgress, 'optionalCall', _129 => _129(next)]);
+              _optionalChain([onProgress, 'optionalCall', _145 => _145(next)]);
               return next;
             });
           }, 200);
@@ -5348,7 +5667,7 @@ ${planningInstruction}` : planningInstruction;
           setResult(result2);
           setState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _130 => _130(result2)]);
+          _optionalChain([onComplete, 'optionalCall', _146 => _146(result2)]);
         }
       } else {
         if (enableStreaming) {
@@ -5394,16 +5713,16 @@ ${commandInstruction}` : commandInstruction;
               if (chunk.type === "token" && chunk.content) {
                 accumulatedContent += chunk.content;
                 setStreamedContent(accumulatedContent);
-                _optionalChain([onChunk, 'optionalCall', _131 => _131(chunk.content)]);
+                _optionalChain([onChunk, 'optionalCall', _147 => _147(chunk.content)]);
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
-                _optionalChain([onProgress, 'optionalCall', _132 => _132(estimatedProgress)]);
+                _optionalChain([onProgress, 'optionalCall', _148 => _148(estimatedProgress)]);
               } else if (chunk.type === "widget" && chunk.widget) {
                 const widget = chunk.widget;
                 setResult((prev) => ({
                   success: true,
-                  data: _optionalChain([prev, 'optionalAccess', _133 => _133.data]) || {},
-                  widgets: [..._optionalChain([prev, 'optionalAccess', _134 => _134.widgets]) || [], widget],
+                  data: _optionalChain([prev, 'optionalAccess', _149 => _149.data]) || {},
+                  widgets: [..._optionalChain([prev, 'optionalAccess', _150 => _150.widgets]) || [], widget],
                   message: accumulatedContent || "Command executed successfully"
                 }));
               }
@@ -5423,20 +5742,20 @@ ${commandInstruction}` : commandInstruction;
               setResult(result2);
               setState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _135 => _135(result2)]);
+              _optionalChain([onComplete, 'optionalCall', _151 => _151(result2)]);
             },
             (error2) => {
               const err = error2 instanceof Error ? error2 : new Error("Unknown error");
               setError(err);
               setState("error");
-              _optionalChain([onError, 'optionalCall', _136 => _136(err)]);
+              _optionalChain([onError, 'optionalCall', _152 => _152(err)]);
             }
           );
         } else {
           const progressInterval = setInterval(() => {
             setProgress((prev) => {
               const next = Math.min(prev + 10, 90);
-              _optionalChain([onProgress, 'optionalCall', _137 => _137(next)]);
+              _optionalChain([onProgress, 'optionalCall', _153 => _153(next)]);
               return next;
             });
           }, 200);
@@ -5492,14 +5811,14 @@ ${commandInstruction}` : commandInstruction;
           setResult(result2);
           setState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _138 => _138(result2)]);
+          _optionalChain([onComplete, 'optionalCall', _154 => _154(result2)]);
         }
       }
     } catch (err) {
       const error2 = err instanceof Error ? err : new Error("Unknown error");
       setError(error2);
       setState("error");
-      _optionalChain([onError, 'optionalCall', _139 => _139(error2)]);
+      _optionalChain([onError, 'optionalCall', _155 => _155(error2)]);
     }
   };
   const resetCommand = () => {
@@ -5532,14 +5851,14 @@ ${planToExecute}`;
   };
   const handleFileSelect = async (e) => {
     if (e.target.files && e.target.files.length > 0) {
-      _optionalChain([onFileUpload, 'optionalCall', _140 => _140(e.target.files)]);
+      _optionalChain([onFileUpload, 'optionalCall', _156 => _156(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', _141 => _141.target, 'optionalAccess', _142 => _142.result])) {
+            if (_optionalChain([event, 'access', _157 => _157.target, 'optionalAccess', _158 => _158.result])) {
               const fullDataUrl = event.target.result;
               const base64Data = fullDataUrl.split(",")[1];
               if (file.type.startsWith("image/")) {
@@ -5633,7 +5952,7 @@ ${planToExecute}`;
               enableFileUpload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "button",
                 {
-                  onClick: () => _optionalChain([fileInputRef, 'access', _143 => _143.current, 'optionalAccess', _144 => _144.click, 'call', _145 => _145()]),
+                  onClick: () => _optionalChain([fileInputRef, 'access', _159 => _159.current, 'optionalAccess', _160 => _160.click, 'call', _161 => _161()]),
                   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)" }) })
@@ -5852,7 +6171,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', _146 => _146.message]) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: _optionalChain([error, 'optionalAccess', _162 => _162.message]) })
               ] })
             ] }) }),
             allowInput && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -5880,7 +6199,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', _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 }),
+            _optionalChain([result, 'access', _163 => _163.data, 'optionalAccess', _164 => _164.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,
               {
@@ -5931,7 +6250,7 @@ ${planToExecute}`;
             enableFileUpload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
-                onClick: () => _optionalChain([fileInputRef, 'access', _149 => _149.current, 'optionalAccess', _150 => _150.click, 'call', _151 => _151()]),
+                onClick: () => _optionalChain([fileInputRef, 'access', _165 => _165.current, 'optionalAccess', _166 => _166.click, 'call', _167 => _167()]),
                 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)" }) })
@@ -6117,25 +6436,25 @@ function Prompt({
     const newValue = e.target.value;
     if (!maxLength || newValue.length <= maxLength) {
       setValue(newValue);
-      _optionalChain([onChange, 'optionalCall', _152 => _152(newValue)]);
+      _optionalChain([onChange, 'optionalCall', _168 => _168(newValue)]);
     }
   };
   const handleSubmit = async () => {
     if (value.length < minLength) return;
-    _optionalChain([onSubmit, 'optionalCall', _153 => _153(value)]);
+    _optionalChain([onSubmit, 'optionalCall', _169 => _169(value)]);
     setIsLoading(true);
     try {
       if (useMock) {
         await new Promise((resolve) => setTimeout(resolve, 1500));
         const mockResult = `Enhanced version: ${value} [AI-generated content]`;
-        _optionalChain([onResult, 'optionalCall', _154 => _154(mockResult)]);
+        _optionalChain([onResult, 'optionalCall', _170 => _170(mockResult)]);
         setValue("");
       } else {
         const response = await aptevaClient.chat({
           agent_id: agentId,
           message: value
         });
-        _optionalChain([onResult, 'optionalCall', _155 => _155(response.message)]);
+        _optionalChain([onResult, 'optionalCall', _171 => _171(response.message)]);
         setValue("");
       }
     } catch (error) {
@@ -6230,7 +6549,7 @@ function Stream({
   }, [autoStart]);
   const startStreaming = async () => {
     setIsStreaming(true);
-    _optionalChain([onStart, 'optionalCall', _156 => _156()]);
+    _optionalChain([onStart, 'optionalCall', _172 => _172()]);
     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.";
@@ -6238,13 +6557,13 @@ function Stream({
           mockText,
           (chunk) => {
             setText((prev) => prev + chunk);
-            _optionalChain([onChunk, 'optionalCall', _157 => _157(chunk)]);
+            _optionalChain([onChunk, 'optionalCall', _173 => _173(chunk)]);
           },
           typingSpeed
         );
         setIsComplete(true);
         setIsStreaming(false);
-        _optionalChain([onComplete, 'optionalCall', _158 => _158(text + mockText)]);
+        _optionalChain([onComplete, 'optionalCall', _174 => _174(text + mockText)]);
       } else {
         let accumulatedText = "";
         await aptevaClient.chatStream(
@@ -6257,24 +6576,24 @@ function Stream({
             if (chunk.type === "token" && chunk.content) {
               accumulatedText += chunk.content;
               setText(accumulatedText);
-              _optionalChain([onChunk, 'optionalCall', _159 => _159(chunk.content)]);
+              _optionalChain([onChunk, 'optionalCall', _175 => _175(chunk.content)]);
             }
           },
           () => {
             setIsComplete(true);
             setIsStreaming(false);
-            _optionalChain([onComplete, 'optionalCall', _160 => _160(accumulatedText)]);
+            _optionalChain([onComplete, 'optionalCall', _176 => _176(accumulatedText)]);
           },
           (error) => {
             const err = error instanceof Error ? error : new Error("Streaming error");
-            _optionalChain([onError, 'optionalCall', _161 => _161(err)]);
+            _optionalChain([onError, 'optionalCall', _177 => _177(err)]);
             setIsStreaming(false);
           }
         );
       }
     } catch (error) {
       const err = error instanceof Error ? error : new Error("Streaming error");
-      _optionalChain([onError, 'optionalCall', _162 => _162(err)]);
+      _optionalChain([onError, 'optionalCall', _178 => _178(err)]);
       setIsStreaming(false);
     }
   };
@@ -6366,7 +6685,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', _163 => _163.preview, 'optionalAccess', _164 => _164.toLowerCase, 'call', _165 => _165(), 'access', _166 => _166.includes, 'call', _167 => _167(searchQuery.toLowerCase())])
+    (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || _optionalChain([thread, 'access', _179 => _179.preview, 'optionalAccess', _180 => _180.toLowerCase, 'call', _181 => _181(), 'access', _182 => _182.includes, 'call', _183 => _183(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: [
@@ -6388,8 +6707,8 @@ function ThreadList({
           {
             thread,
             isActive: thread.id === currentThreadId,
-            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _168 => _168(thread.id)]),
-            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _169 => _169(thread.id)])
+            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _184 => _184(thread.id)]),
+            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _185 => _185(thread.id)])
           },
           thread.id
         ))
@@ -6451,7 +6770,7 @@ function Threads({
       threads.slice(0, 5).map((thread) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
-          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _170 => _170(thread.id)]),
+          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _186 => _186(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"
@@ -6636,7 +6955,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', _171 => _171.props, 'optionalAccess', _172 => _172.widget])) {
+  if (node.type === "widget" && _optionalChain([node, 'access', _187 => _187.props, 'optionalAccess', _188 => _188.widget])) {
     node.type = node.props.widget;
     const { widget: _, ...rest } = node.props;
     node.props = rest;
@@ -6774,10 +7093,10 @@ function AutoInterface({
   ].filter(Boolean).join("\n\n");
   const updateInterface = _react.useCallback.call(void 0, (newSpec) => {
     setInterfaceSpec(newSpec);
-    _optionalChain([onInterfaceChange, 'optionalCall', _173 => _173(newSpec)]);
+    _optionalChain([onInterfaceChange, 'optionalCall', _189 => _189(newSpec)]);
   }, [onInterfaceChange]);
   const handleAction = _react.useCallback.call(void 0, (action) => {
-    _optionalChain([onAction, 'optionalCall', _174 => _174(action)]);
+    _optionalChain([onAction, 'optionalCall', _190 => _190(action)]);
     if (chatRef.current) {
       chatRef.current.sendMessage(
         `[Action: ${action.type} on widget ${action.widgetId || "unknown"}. Payload: ${JSON.stringify(action.payload)}]`
@@ -6785,7 +7104,7 @@ function AutoInterface({
     }
   }, [onAction]);
   const handleMessageComplete = _react.useCallback.call(void 0, (result) => {
-    if (!_optionalChain([result, 'optionalAccess', _175 => _175.data])) return;
+    if (!_optionalChain([result, 'optionalAccess', _191 => _191.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);
@@ -6825,7 +7144,7 @@ function AutoInterface({
     }).catch((err) => {
       if (cancelled) return;
       console.error("[AutoInterface] Initial generation failed:", err);
-      _optionalChain([onError, 'optionalCall', _176 => _176(err instanceof Error ? err : new Error(String(err)))]);
+      _optionalChain([onError, 'optionalCall', _192 => _192(err instanceof Error ? err : new Error(String(err)))]);
       setIsGenerating(false);
     });
     return () => {
@@ -6991,7 +7310,7 @@ function useInterfaceAI({
   }
   const sendMessage = _react.useCallback.call(void 0, async (message) => {
     accumulatedTextRef.current = "";
-    _optionalChain([onStreamStart, 'optionalCall', _177 => _177()]);
+    _optionalChain([onStreamStart, 'optionalCall', _193 => _193()]);
     const systemPrompt = [
       generateInterfaceContext(),
       context || ""
@@ -7014,27 +7333,27 @@ function useInterfaceAI({
             accumulatedTextRef.current += chunk.content || "";
             const parsed = parseInterfaceFromText(accumulatedTextRef.current);
             if (parsed) {
-              _optionalChain([onInterface, 'optionalCall', _178 => _178(parsed)]);
+              _optionalChain([onInterface, 'optionalCall', _194 => _194(parsed)]);
             }
             const updates = parseUpdatesFromText(accumulatedTextRef.current);
             if (updates.length > 0) {
-              _optionalChain([onUpdates, 'optionalCall', _179 => _179(updates)]);
+              _optionalChain([onUpdates, 'optionalCall', _195 => _195(updates)]);
             }
           }
         },
         // onComplete
         () => {
-          _optionalChain([onStreamEnd, 'optionalCall', _180 => _180()]);
+          _optionalChain([onStreamEnd, 'optionalCall', _196 => _196()]);
         },
         // onError
         (error) => {
-          _optionalChain([onError, 'optionalCall', _181 => _181(error)]);
-          _optionalChain([onStreamEnd, 'optionalCall', _182 => _182()]);
+          _optionalChain([onError, 'optionalCall', _197 => _197(error)]);
+          _optionalChain([onStreamEnd, 'optionalCall', _198 => _198()]);
         }
       );
     } catch (error) {
-      _optionalChain([onError, 'optionalCall', _183 => _183(error instanceof Error ? error : new Error("Unknown error"))]);
-      _optionalChain([onStreamEnd, 'optionalCall', _184 => _184()]);
+      _optionalChain([onError, 'optionalCall', _199 => _199(error instanceof Error ? error : new Error("Unknown error"))]);
+      _optionalChain([onStreamEnd, 'optionalCall', _200 => _200()]);
     }
   }, [agentId, context, onInterface, onUpdates, onError, onStreamStart, onStreamEnd]);
   return {