@apteva/apteva-kit 0.1.129 → 0.1.131

package/dist/index.mjs

@@ -4,7 +4,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/components/Chat/Chat.tsx
-import { useState as useState9, useEffect as useEffect9, useRef as useRef9, useMemo as useMemo2, useCallback as useCallback4, forwardRef, useImperativeHandle } from "react";
+import { useState as useState10, useEffect as useEffect10, useRef as useRef10, useMemo as useMemo2, useCallback as useCallback5, forwardRef, useImperativeHandle } from "react";
 
 // src/components/Chat/MessageList.tsx
 import { useEffect as useEffect7, useRef as useRef6 } from "react";
@@ -2805,17 +2805,36 @@ function ToolCall({ name, status, isReceiving = false, inputLength = 0, streamOu
 // src/components/Chat/ToolCallGroup.tsx
 import { useState as useState5 } from "react";
 import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+function formatResultPreview(result) {
+  if (result == null) return "";
+  const str = typeof result === "string" ? result : JSON.stringify(result);
+  const oneLine = str.replace(/\s+/g, " ").trim();
+  return oneLine.length > 120 ? oneLine.slice(0, 117) + "..." : oneLine;
+}
 function ToolCallGroup({ tools }) {
   const completed = tools.filter((t) => t.status === "completed").length;
   const errored = tools.filter((t) => t.status === "error").length;
-  const running = tools.filter((t) => t.status === "running").length;
-  const preparing = tools.filter((t) => t.status === "preparing").length;
   const total = tools.length;
   const allDone = completed + errored === total;
   const [expanded, setExpanded] = useState5(false);
-  const isExpanded = allDone ? expanded : true;
-  const activeStreamTool = tools.find((t) => t.status === "running" && t.streamOutput);
-  const statusText = allDone ? `Used ${total} tools` : `Using ${total} tools${completed > 0 ? ` \xB7 ${completed}/${total} done` : ""}`;
+  const isExpanded = expanded;
+  const activeTool = tools.find((t) => t.status === "running") || tools.find((t) => t.status === "preparing");
+  let statusText;
+  if (allDone) {
+    if (errored > 0) {
+      statusText = `Used ${total} tools \xB7 ${errored} failed`;
+    } else {
+      statusText = `Used ${total} tools`;
+    }
+  } else {
+    const parts = [`Using ${total} tools`];
+    if (completed > 0) parts.push(`${completed} done`);
+    if (activeTool) {
+      const activeLabel = activeTool.streamOutput || (activeTool.status === "preparing" ? "preparing" : "running");
+      parts.push(`${activeTool.name} ${activeLabel === "preparing" || activeLabel === "running" ? activeLabel + "..." : "\xB7 " + activeLabel}`);
+    }
+    statusText = parts.join(" \xB7 ");
+  }
   const cardClass = allDone ? errored > 0 ? "apteva-tool-group apteva-tool-group-error" : "apteva-tool-group apteva-tool-group-completed" : "apteva-tool-group apteva-tool-group-running";
   return /* @__PURE__ */ jsxs13("div", { className: cardClass, children: [
     /* @__PURE__ */ jsxs13(
@@ -2846,18 +2865,20 @@ function ToolCallGroup({ tools }) {
         ]
       }
     ),
-    !isExpanded && activeStreamTool && /* @__PURE__ */ jsxs13("div", { className: "apteva-tool-group-stream", children: [
-      /* @__PURE__ */ jsxs13("span", { className: "apteva-tool-group-stream-name", children: [
-        activeStreamTool.name,
-        ":"
-      ] }),
-      /* @__PURE__ */ jsx18("span", { className: "apteva-tool-group-stream-text", children: activeStreamTool.streamOutput })
-    ] }),
-    isExpanded && /* @__PURE__ */ jsx18("div", { className: "apteva-tool-group-list", children: tools.map((tool) => /* @__PURE__ */ jsxs13("div", { className: "apteva-tool-group-item", children: [
-      tool.status === "completed" ? /* @__PURE__ */ jsx18("svg", { className: "apteva-tool-group-item-icon apteva-tool-group-item-done", width: "12", height: "12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) }) : tool.status === "error" ? /* @__PURE__ */ jsx18("svg", { className: "apteva-tool-group-item-icon apteva-tool-group-item-error", width: "12", height: "12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M6 18L18 6M6 6l12 12" }) }) : /* @__PURE__ */ jsx18("div", { className: "apteva-tool-group-item-icon apteva-tool-group-item-spinner" }),
-      /* @__PURE__ */ jsx18("span", { className: "apteva-tool-group-item-name", children: tool.name }),
-      tool.streamOutput && tool.status === "running" && /* @__PURE__ */ jsx18("span", { className: "apteva-tool-group-item-stream", children: tool.streamOutput })
-    ] }, tool.id)) })
+    isExpanded && /* @__PURE__ */ jsx18("div", { className: "apteva-tool-group-list", children: tools.map((tool) => {
+      const resultPreview = tool.status === "completed" && tool.result ? formatResultPreview(tool.result) : "";
+      const hasDetail = tool.status === "running" && tool.streamOutput || resultPreview;
+      return /* @__PURE__ */ jsxs13("div", { className: `apteva-tool-group-item ${hasDetail ? "apteva-tool-group-item-has-detail" : ""}`, children: [
+        /* @__PURE__ */ jsxs13("div", { className: "apteva-tool-group-item-row", children: [
+          tool.status === "completed" ? /* @__PURE__ */ jsx18("svg", { className: "apteva-tool-group-item-icon apteva-tool-group-item-done", width: "12", height: "12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) }) : tool.status === "error" ? /* @__PURE__ */ jsx18("svg", { className: "apteva-tool-group-item-icon apteva-tool-group-item-error", width: "12", height: "12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M6 18L18 6M6 6l12 12" }) }) : /* @__PURE__ */ jsx18("div", { className: "apteva-tool-group-item-icon apteva-tool-group-item-spinner" }),
+          /* @__PURE__ */ jsx18("span", { className: "apteva-tool-group-item-name", children: tool.name }),
+          tool.status === "running" && !tool.streamOutput && /* @__PURE__ */ jsx18("span", { className: "apteva-tool-group-item-running-label", children: "running..." }),
+          tool.status === "preparing" && /* @__PURE__ */ jsx18("span", { className: "apteva-tool-group-item-running-label", children: "preparing..." })
+        ] }),
+        tool.status === "running" && tool.streamOutput && /* @__PURE__ */ jsx18("div", { className: "apteva-tool-group-item-detail", children: tool.streamOutput }),
+        resultPreview && /* @__PURE__ */ jsx18("div", { className: "apteva-tool-group-item-detail apteva-tool-group-item-result-text", children: resultPreview })
+      ] }, tool.id);
+    }) })
   ] });
 }
 
@@ -3108,7 +3129,8 @@ function Message({ message, onAction, enableWidgets, onWidgetRender, persistentW
               name: tool.name,
               status: tool.status || (tool.result !== void 0 ? "completed" : "running"),
               isReceiving: tool.isReceiving,
-              streamOutput: tool.streamOutput
+              streamOutput: tool.streamOutput,
+              result: tool.result
             };
           });
           elements.push(
@@ -3370,7 +3392,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] = useState6("");
   const [showMenu, setShowMenu] = useState6(false);
   const [pendingFiles, setPendingFiles] = useState6([]);
@@ -3663,6 +3685,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__ */ jsx23("div", { className: "px-4 py-3 relative", children: /* @__PURE__ */ jsxs17("div", { className: "apteva-voice-overlay", children: [
+      /* @__PURE__ */ jsx23("div", { className: "apteva-voice-transcript-area", children: voicePartialTranscript ? /* @__PURE__ */ jsx23("span", { className: "apteva-voice-partial", children: voicePartialTranscript }) : voiceState === "connecting" ? /* @__PURE__ */ jsx23("span", { className: "apteva-voice-connecting", children: "Connecting..." }) : /* @__PURE__ */ jsx23("span", { className: "apteva-voice-listening", children: "Listening..." }) }),
+      /* @__PURE__ */ jsxs17("div", { className: "apteva-voice-controls", children: [
+        /* @__PURE__ */ jsx23("span", { className: "apteva-voice-duration", children: formatVoiceDuration(voiceDuration) }),
+        /* @__PURE__ */ jsx23(
+          "button",
+          {
+            onClick: onVoiceStop,
+            className: "apteva-voice-stop-btn",
+            title: "Stop voice mode",
+            children: /* @__PURE__ */ jsx23("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx23("rect", { x: "3", y: "3", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx23("div", { className: "apteva-voice-indicator", children: /* @__PURE__ */ jsx23("div", { className: `apteva-voice-pulse ${voiceState === "active" ? "apteva-voice-pulse-active" : ""}` }) })
+    ] }) });
+  }
   return /* @__PURE__ */ jsxs17("div", { className: "px-4 py-3 relative", children: [
     fileError && /* @__PURE__ */ jsx23("div", { className: "apteva-file-error", children: /* @__PURE__ */ jsxs17("div", { className: "apteva-file-error-content", children: [
       /* @__PURE__ */ jsx23("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
@@ -3806,6 +3853,18 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
                 title: "Stop generation",
                 children: /* @__PURE__ */ jsx23("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx23("rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
               }
+            ) : showMicButton ? /* @__PURE__ */ jsx23(
+              "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__ */ jsxs17("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                  /* @__PURE__ */ jsx23("path", { d: "M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z", fill: "currentColor" }),
+                  /* @__PURE__ */ jsx23("path", { d: "M19 10v2a7 7 0 01-14 0v-2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+                  /* @__PURE__ */ jsx23("path", { d: "M12 19v4M8 23h8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+                ] })
+              }
             ) : /* @__PURE__ */ jsx23(
               "button",
               {
@@ -4366,6 +4425,261 @@ function PersistentWidgetPanel({ widgets, onAction }) {
   ] });
 }
 
+// src/hooks/useVoiceSession.ts
+import { useState as useState9, useRef as useRef9, useCallback as useCallback4, useEffect as useEffect9 } from "react";
+
+// 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] = useState9("idle");
+  const [partialTranscript, setPartialTranscript] = useState9("");
+  const [duration, setDuration] = useState9(0);
+  const wsRef = useRef9(null);
+  const captureCtxRef = useRef9(null);
+  const playbackCtxRef = useRef9(null);
+  const mediaStreamRef = useRef9(null);
+  const processorRef = useRef9(null);
+  const nextPlayTimeRef = useRef9(0);
+  const durationIntervalRef = useRef9(null);
+  const startTimeRef = useRef9(0);
+  const configRef = useRef9(config);
+  configRef.current = config;
+  const cleanup = useCallback4(() => {
+    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);
+  }, []);
+  useEffect9(() => {
+    return () => {
+      cleanup();
+    };
+  }, [cleanup]);
+  const playAudioChunk = useCallback4((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 = useCallback4((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 (msg.data?.chunk) {
+          playAudioChunk(msg.data.chunk);
+        }
+        break;
+      case "transcript":
+        if (msg.data) {
+          if (msg.data.partial) {
+            setPartialTranscript(msg.data.content);
+          } else {
+            setPartialTranscript("");
+            cfg.onTranscript?.({
+              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;
+          cfg.onTranscript?.({
+            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");
+        cfg.onError?.(new Error(msg.data?.message || "Voice session error"));
+        break;
+    }
+  }, [playAudioChunk]);
+  const startCapture = useCallback4(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) {
+      configRef.current.onError?.(new Error("Microphone access denied"));
+      cleanup();
+      setState("idle");
+    }
+  }, [cleanup]);
+  const start = useCallback4(() => {
+    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");
+      configRef.current.onError?.(new Error("WebSocket connection failed"));
+    };
+    ws.onclose = () => {
+      cleanup();
+      setState("idle");
+    };
+  }, [state, config.apiUrl, startCapture, handleMessage, cleanup]);
+  const stop = useCallback4(() => {
+    cleanup();
+    setState("idle");
+  }, [cleanup]);
+  const sendText = useCallback4((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
 import { Fragment as Fragment6, jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 var Chat = forwardRef(function Chat2({
@@ -4418,28 +4732,49 @@ var Chat = forwardRef(function Chat2({
   onWidgetRender,
   // Speech to text
   speechToText,
+  // Realtime voice
+  enableVoice = false,
+  voiceProvider,
+  voiceId,
   className
 }, ref) {
-  const [messages, setMessages] = useState9(initialMessages);
-  const [isLoading, setIsLoading] = useState9(false);
-  const [currentThreadId, setCurrentThreadId] = useState9(threadId || null);
-  const [mode, setMode] = useState9(initialMode);
-  const [chatToolName, setChatToolName] = useState9(null);
-  const [commandState, setCommandState] = useState9("idle");
-  const [commandResult, setCommandResult] = useState9(null);
-  const [commandError, setCommandError] = useState9(null);
-  const [progress, setProgress] = useState9(0);
-  const [commandInput, setCommandInput] = useState9("");
-  const [streamedContent, setStreamedContent] = useState9("");
-  const [currentToolName, setCurrentToolName] = useState9(null);
-  const [currentRequestId, setCurrentRequestId] = useState9(null);
-  const [plan, setPlan] = useState9("");
-  const [pendingCommand, setPendingCommand] = useState9("");
-  const [internalPlanMode, setInternalPlanMode] = useState9(planMode);
-  const [showSettingsMenu, setShowSettingsMenu] = useState9(false);
-  const fileInputRef = useRef9(null);
-  const [persistentWidgets, setPersistentWidgets] = useState9(/* @__PURE__ */ new Map());
-  const updatePersistentWidgets = useCallback4((msgs) => {
+  const [messages, setMessages] = useState10(initialMessages);
+  const [isLoading, setIsLoading] = useState10(false);
+  const [currentThreadId, setCurrentThreadId] = useState10(threadId || null);
+  const [mode, setMode] = useState10(initialMode);
+  const [chatToolName, setChatToolName] = useState10(null);
+  const [commandState, setCommandState] = useState10("idle");
+  const [commandResult, setCommandResult] = useState10(null);
+  const [commandError, setCommandError] = useState10(null);
+  const [progress, setProgress] = useState10(0);
+  const [commandInput, setCommandInput] = useState10("");
+  const [streamedContent, setStreamedContent] = useState10("");
+  const [currentToolName, setCurrentToolName] = useState10(null);
+  const [currentRequestId, setCurrentRequestId] = useState10(null);
+  const [plan, setPlan] = useState10("");
+  const [pendingCommand, setPendingCommand] = useState10("");
+  const [internalPlanMode, setInternalPlanMode] = useState10(planMode);
+  const [showSettingsMenu, setShowSettingsMenu] = useState10(false);
+  const fileInputRef = useRef10(null);
+  const handleVoiceTranscript = useCallback5((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] = useState10(/* @__PURE__ */ new Map());
+  const updatePersistentWidgets = useCallback5((msgs) => {
     setPersistentWidgets((prev) => {
       const next = new Map(prev);
       let changed = false;
@@ -4457,12 +4792,12 @@ var Chat = forwardRef(function Chat2({
       return changed ? next : prev;
     });
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     updatePersistentWidgets(messages);
   }, [messages, updatePersistentWidgets]);
   const persistentWidgetList = useMemo2(() => Array.from(persistentWidgets.values()), [persistentWidgets]);
   const persistentWidgetIds = useMemo2(() => new Set(persistentWidgets.keys()), [persistentWidgets]);
-  const handleSendMessageRef = useRef9(null);
+  const handleSendMessageRef = useRef10(null);
   useImperativeHandle(ref, () => ({
     sendMessage: async (text) => {
       if (handleSendMessageRef.current) {
@@ -4483,7 +4818,7 @@ var Chat = forwardRef(function Chat2({
     return context ? `${context}
 ${widgetContext}` : widgetContext;
   }, [context, enableWidgets, availableWidgets, compactWidgetContext]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (apiUrl || apiKey) {
       aptevaClient.configure({
         ...apiUrl && { apiUrl },
@@ -4491,15 +4826,15 @@ ${widgetContext}` : widgetContext;
       });
     }
   }, [apiUrl, apiKey]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (threadId) {
       onThreadChange?.(threadId);
     }
   }, [threadId, onThreadChange]);
-  useEffect9(() => {
+  useEffect10(() => {
     setInternalPlanMode(planMode);
   }, [planMode]);
-  useEffect9(() => {
+  useEffect10(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       if (showSettingsMenu && !target.closest(".settings-menu-container")) {
@@ -4519,7 +4854,7 @@ ${widgetContext}` : widgetContext;
     }
   };
   const defaultPlaceholder = mode === "chat" ? "Type a message..." : "Enter your command...";
-  const handleWidgetAction = useCallback4((action) => {
+  const handleWidgetAction = useCallback5((action) => {
     onAction?.(action);
     if (action.type === "submit" && action.payload?.formData) {
       const formData = action.payload.formData;
@@ -5040,8 +5375,8 @@ ${planToExecute}`;
         /* @__PURE__ */ jsx26("div", { className: "apteva-chat-title", children: headerTitle }),
         /* @__PURE__ */ jsx26("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__ */ jsxs20(Fragment6, { children: [
@@ -5074,7 +5409,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
         }
       )
     ] }),
@@ -5117,11 +5458,11 @@ ${planToExecute}`;
 });
 
 // src/components/Chat/CommandOutput.tsx
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 
 // src/components/Command/Command.tsx
-import React, { useState as useState11, useEffect as useEffect10 } from "react";
+import React, { useState as useState12, useEffect as useEffect11 } from "react";
 import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
 function Command({
   agentId,
@@ -5149,28 +5490,28 @@ function Command({
   resultRenderer,
   className
 }) {
-  const [state, setState] = useState11("idle");
-  const [result, setResult] = useState11(null);
-  const [error, setError] = useState11(null);
-  const [progress, setProgress] = useState11(0);
-  const [command, setCommand] = useState11(initialCommand || "");
-  const [streamedContent, setStreamedContent] = useState11("");
-  const [plan, setPlan] = useState11("");
-  const [pendingCommand, setPendingCommand] = useState11("");
-  const [showPlanDetails, setShowPlanDetails] = useState11(false);
-  const [uploadedFiles, setUploadedFiles] = useState11([]);
-  const [showSettingsMenu, setShowSettingsMenu] = useState11(false);
-  const [internalPlanMode, setInternalPlanMode] = useState11(planMode);
+  const [state, setState] = useState12("idle");
+  const [result, setResult] = useState12(null);
+  const [error, setError] = useState12(null);
+  const [progress, setProgress] = useState12(0);
+  const [command, setCommand] = useState12(initialCommand || "");
+  const [streamedContent, setStreamedContent] = useState12("");
+  const [plan, setPlan] = useState12("");
+  const [pendingCommand, setPendingCommand] = useState12("");
+  const [showPlanDetails, setShowPlanDetails] = useState12(false);
+  const [uploadedFiles, setUploadedFiles] = useState12([]);
+  const [showSettingsMenu, setShowSettingsMenu] = useState12(false);
+  const [internalPlanMode, setInternalPlanMode] = useState12(planMode);
   const fileInputRef = React.useRef(null);
-  useEffect10(() => {
+  useEffect11(() => {
     if (autoExecute && state === "idle" && command) {
       executeCommand();
     }
   }, [autoExecute]);
-  useEffect10(() => {
+  useEffect11(() => {
     setInternalPlanMode(planMode);
   }, [planMode]);
-  useEffect10(() => {
+  useEffect11(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       if (showSettingsMenu && !target.closest(".settings-menu-container")) {
@@ -6092,7 +6433,7 @@ ${planToExecute}`;
 }
 
 // src/components/Prompt/Prompt.tsx
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
 function Prompt({
   agentId,
@@ -6110,9 +6451,9 @@ function Prompt({
   showSuggestions = false,
   className
 }) {
-  const [value, setValue] = useState12(initialValue);
-  const [isLoading, setIsLoading] = useState12(false);
-  const [suggestions] = useState12(["Plan a trip", "Write a description", "Analyze data"]);
+  const [value, setValue] = useState13(initialValue);
+  const [isLoading, setIsLoading] = useState13(false);
+  const [suggestions] = useState13(["Plan a trip", "Write a description", "Analyze data"]);
   const handleChange = (e) => {
     const newValue = e.target.value;
     if (!maxLength || newValue.length <= maxLength) {
@@ -6203,7 +6544,7 @@ function Prompt({
 }
 
 // src/components/Stream/Stream.tsx
-import { useState as useState13, useEffect as useEffect11 } from "react";
+import { useState as useState14, useEffect as useEffect12 } from "react";
 import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
 function Stream({
   agentId,
@@ -6220,10 +6561,10 @@ function Stream({
   typingSpeed = 30,
   className
 }) {
-  const [text, setText] = useState13("");
-  const [isStreaming, setIsStreaming] = useState13(false);
-  const [isComplete, setIsComplete] = useState13(false);
-  useEffect11(() => {
+  const [text, setText] = useState14("");
+  const [isStreaming, setIsStreaming] = useState14(false);
+  const [isComplete, setIsComplete] = useState14(false);
+  useEffect12(() => {
     if (autoStart && !isStreaming && !isComplete) {
       startStreaming();
     }
@@ -6300,7 +6641,7 @@ function Stream({
 }
 
 // src/components/Threads/ThreadList.tsx
-import { useState as useState14 } from "react";
+import { useState as useState15 } from "react";
 
 // src/components/Threads/ThreadItem.tsx
 import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
@@ -6364,7 +6705,7 @@ function ThreadList({
   showSearch = false,
   groupBy = "none"
 }) {
-  const [searchQuery, setSearchQuery] = useState14("");
+  const [searchQuery, setSearchQuery] = useState15("");
   const filteredThreads = threads.filter(
     (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || thread.preview?.toLowerCase().includes(searchQuery.toLowerCase())
   );
@@ -6494,10 +6835,10 @@ function Threads({
 }
 
 // src/components/AutoInterface/AutoInterface.tsx
-import { useState as useState16, useRef as useRef10, useCallback as useCallback5, useEffect as useEffect12 } from "react";
+import { useState as useState17, useRef as useRef11, useCallback as useCallback6, useEffect as useEffect13 } from "react";
 
 // src/components/AutoInterface/LayoutRenderer.tsx
-import { useState as useState15 } from "react";
+import { useState as useState16 } from "react";
 import { Fragment as Fragment8, jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
 var gapClasses = {
   none: "gap-0",
@@ -6613,7 +6954,7 @@ function SidebarLayout({ node, renderNode }) {
 function TabsLayout({ node, renderNode }) {
   const { labels = [], defaultTab = 0 } = node.props || {};
   const children = node.children || [];
-  const [activeTab, setActiveTab] = useState15(defaultTab);
+  const [activeTab, setActiveTab] = useState16(defaultTab);
   return /* @__PURE__ */ jsxs28("div", { children: [
     /* @__PURE__ */ jsx34("div", { className: "flex border-b border-neutral-200 dark:border-neutral-700 mb-4", children: labels.map((label, idx) => /* @__PURE__ */ jsx34(
       "button",
@@ -6764,19 +7105,19 @@ function AutoInterface({
   theme,
   className
 }) {
-  const [interfaceSpec, setInterfaceSpec] = useState16(initialInterface || null);
-  const [isGenerating, setIsGenerating] = useState16(false);
-  const [chatCollapsed, setChatCollapsed] = useState16(false);
-  const chatRef = useRef10(null);
+  const [interfaceSpec, setInterfaceSpec] = useState17(initialInterface || null);
+  const [isGenerating, setIsGenerating] = useState17(false);
+  const [chatCollapsed, setChatCollapsed] = useState17(false);
+  const chatRef = useRef11(null);
   const systemContext = [
     generateInterfaceContext(),
     context || ""
   ].filter(Boolean).join("\n\n");
-  const updateInterface = useCallback5((newSpec) => {
+  const updateInterface = useCallback6((newSpec) => {
     setInterfaceSpec(newSpec);
     onInterfaceChange?.(newSpec);
   }, [onInterfaceChange]);
-  const handleAction = useCallback5((action) => {
+  const handleAction = useCallback6((action) => {
     onAction?.(action);
     if (chatRef.current) {
       chatRef.current.sendMessage(
@@ -6784,7 +7125,7 @@ function AutoInterface({
       );
     }
   }, [onAction]);
-  const handleMessageComplete = useCallback5((result) => {
+  const handleMessageComplete = useCallback6((result) => {
     if (!result?.data) return;
     const text = typeof result.data === "string" ? result.data : result.data.message || "";
     console.log("[AutoInterface] Chat message complete, text (" + text.length + " chars):", text.substring(0, 300));
@@ -6805,7 +7146,7 @@ function AutoInterface({
     }
     setIsGenerating(false);
   }, [interfaceSpec, updateInterface]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!initialPrompt || initialInterface || useMock) return;
     if (!apiUrl) return;
     let cancelled = false;
@@ -6930,29 +7271,29 @@ function getThemeScript() {
 }
 
 // src/hooks/useInterfaceState.ts
-import { useState as useState17, useCallback as useCallback6 } from "react";
+import { useState as useState18, useCallback as useCallback7 } from "react";
 function useInterfaceState(initialSpec) {
-  const [spec, setSpec] = useState17(initialSpec || null);
-  const [isStreaming, setIsStreaming] = useState17(false);
-  const setInterface = useCallback6((newSpec) => {
+  const [spec, setSpec] = useState18(initialSpec || null);
+  const [isStreaming, setIsStreaming] = useState18(false);
+  const setInterface = useCallback7((newSpec) => {
     setSpec(newSpec);
   }, []);
-  const clearInterface = useCallback6(() => {
+  const clearInterface = useCallback7(() => {
     setSpec(null);
   }, []);
-  const applyInterfaceUpdate = useCallback6((update) => {
+  const applyInterfaceUpdate = useCallback7((update) => {
     setSpec((prev) => {
       if (!prev) return prev;
       return applyUpdate(prev, update);
     });
   }, []);
-  const applyInterfaceUpdates = useCallback6((updates) => {
+  const applyInterfaceUpdates = useCallback7((updates) => {
     setSpec((prev) => {
       if (!prev) return prev;
       return applyUpdates(prev, updates);
     });
   }, []);
-  const getNode = useCallback6((id) => {
+  const getNode = useCallback7((id) => {
     if (!spec) return null;
     return findNode(spec.root, id);
   }, [spec]);
@@ -6969,7 +7310,7 @@ function useInterfaceState(initialSpec) {
 }
 
 // src/hooks/useInterfaceAI.ts
-import { useCallback as useCallback7, useRef as useRef11 } from "react";
+import { useCallback as useCallback8, useRef as useRef12 } from "react";
 function useInterfaceAI({
   agentId,
   apiUrl,
@@ -6981,15 +7322,15 @@ function useInterfaceAI({
   onStreamStart,
   onStreamEnd
 }) {
-  const threadIdRef = useRef11(null);
-  const accumulatedTextRef = useRef11("");
+  const threadIdRef = useRef12(null);
+  const accumulatedTextRef = useRef12("");
   if (apiUrl || apiKey) {
     aptevaClient.configure({
       ...apiUrl && { apiUrl },
       ...apiKey && { apiKey }
     });
   }
-  const sendMessage = useCallback7(async (message) => {
+  const sendMessage = useCallback8(async (message) => {
     accumulatedTextRef.current = "";
     onStreamStart?.();
     const systemPrompt = [