@smooai/chat-widget 0.13.0 → 0.14.0

package/dist/chat-widget.global.js

@@ -11741,6 +11741,314 @@ var SmoothAgentChat = (function(exports) {
 		return s;
 	}
 	//#endregion
+	//#region \0@oxc-project+runtime@0.134.0/helpers/esm/typeof.js
+	function _typeof(o) {
+		"@babel/helpers - typeof";
+		return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+			return typeof o;
+		} : function(o) {
+			return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+		}, _typeof(o);
+	}
+	//#endregion
+	//#region \0@oxc-project+runtime@0.134.0/helpers/esm/toPrimitive.js
+	function toPrimitive(t, r) {
+		if ("object" != _typeof(t) || !t) return t;
+		var e = t[Symbol.toPrimitive];
+		if (void 0 !== e) {
+			var i = e.call(t, r || "default");
+			if ("object" != _typeof(i)) return i;
+			throw new TypeError("@@toPrimitive must return a primitive value.");
+		}
+		return ("string" === r ? String : Number)(t);
+	}
+	//#endregion
+	//#region \0@oxc-project+runtime@0.134.0/helpers/esm/toPropertyKey.js
+	function toPropertyKey(t) {
+		var i = toPrimitive(t, "string");
+		return "symbol" == _typeof(i) ? i : i + "";
+	}
+	//#endregion
+	//#region \0@oxc-project+runtime@0.134.0/helpers/esm/defineProperty.js
+	function _defineProperty(e, r, t) {
+		return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+			value: t,
+			enumerable: !0,
+			configurable: !0,
+			writable: !0
+		}) : e[r] = t, e;
+	}
+	/** Target wire format: PCM linear16 mono @ 16 kHz. */
+	const VOICE_SAMPLE_RATE = 16e3;
+	/**
+	* Downsample Float32 mic samples at `inputRate` to 16 kHz mono Int16 (linear16).
+	* Bucket-averaging decimation: each output sample averages its source bucket,
+	* which is a cheap low-pass that's plenty for speech (and handles non-integer
+	* ratios like 44.1k → 16k). Values are clamped to the Int16 range.
+	*/
+	function downsampleTo16k(samples, inputRate) {
+		const ratio = inputRate / VOICE_SAMPLE_RATE;
+		const outLen = ratio <= 1 ? samples.length : Math.floor(samples.length / ratio);
+		const out = new Int16Array(outLen);
+		for (let i = 0; i < outLen; i++) {
+			let v;
+			if (ratio <= 1) v = samples[i];
+			else {
+				const start = Math.floor(i * ratio);
+				const end = Math.min(samples.length, Math.max(start + 1, Math.floor((i + 1) * ratio)));
+				let sum = 0;
+				for (let j = start; j < end; j++) sum += samples[j];
+				v = sum / (end - start);
+			}
+			out[i] = Math.max(-32768, Math.min(32767, Math.round(v * 32767)));
+		}
+		return out;
+	}
+	/** Root-mean-square level of a Float32 frame (0..1) — the barge-in speech gate. */
+	function rmsLevel(samples) {
+		if (samples.length === 0) return 0;
+		let sum = 0;
+		for (let i = 0; i < samples.length; i++) sum += samples[i] * samples[i];
+		return Math.sqrt(sum / samples.length);
+	}
+	/**
+	* Gapless PCM playback: each incoming linear16 chunk becomes an AudioBuffer
+	* scheduled back-to-back (`nextTime`) so consecutive chunks butt together with
+	* no gaps. `flush()` stops every scheduled source (barge-in / mic-button stop).
+	*/
+	var PcmPlayer = class {
+		constructor(ctx) {
+			this.ctx = ctx;
+			_defineProperty(this, "nextTime", 0);
+			_defineProperty(this, "live", /* @__PURE__ */ new Set());
+		}
+		enqueue(chunk) {
+			const int16 = new Int16Array(chunk);
+			if (int16.length === 0) return;
+			const buf = this.ctx.createBuffer(1, int16.length, VOICE_SAMPLE_RATE);
+			const ch = buf.getChannelData(0);
+			for (let i = 0; i < int16.length; i++) ch[i] = int16[i] / 32768;
+			const src = this.ctx.createBufferSource();
+			src.buffer = buf;
+			src.connect(this.ctx.destination);
+			const start = Math.max(this.ctx.currentTime, this.nextTime);
+			src.start(start);
+			this.nextTime = start + int16.length / VOICE_SAMPLE_RATE;
+			this.live.add(src);
+			src.onended = () => this.live.delete(src);
+		}
+		flush() {
+			for (const src of this.live) try {
+				src.stop();
+			} catch {}
+			this.live.clear();
+			this.nextTime = 0;
+		}
+		close() {
+			this.flush();
+			this.ctx.close?.();
+		}
+	};
+	/** AudioWorklet processor source — posts each 128-sample mic block to the main thread. */
+	const CAPTURE_WORKLET_SRC = `
+registerProcessor('sac-mic-capture', class extends AudioWorkletProcessor {
+    process(inputs) {
+        const ch = inputs[0] && inputs[0][0];
+        if (ch && ch.length > 0) {
+            const copy = new Float32Array(ch);
+            this.port.postMessage(copy.buffer, [copy.buffer]);
+        }
+        return true;
+    }
+});
+`;
+	/** Real mic capture: getUserMedia → AudioWorklet (or ScriptProcessor fallback). */
+	const defaultStartCapture = async (onFrame) => {
+		const stream = await navigator.mediaDevices.getUserMedia({ audio: {
+			channelCount: 1,
+			echoCancellation: true,
+			noiseSuppression: true,
+			autoGainControl: true
+		} });
+		const Ctx = globalThis.AudioContext;
+		if (!Ctx) {
+			stream.getTracks().forEach((t) => t.stop());
+			throw new Error("AudioContext is not available");
+		}
+		const ctx = new Ctx();
+		const sampleRate = ctx.sampleRate;
+		const source = ctx.createMediaStreamSource(stream);
+		let disconnectNode;
+		if (ctx.audioWorklet && typeof AudioWorkletNode === "function") {
+			const url = URL.createObjectURL(new Blob([CAPTURE_WORKLET_SRC], { type: "text/javascript" }));
+			try {
+				await ctx.audioWorklet.addModule(url);
+			} finally {
+				URL.revokeObjectURL(url);
+			}
+			const node = new AudioWorkletNode(ctx, "sac-mic-capture");
+			node.port.onmessage = (ev) => onFrame(new Float32Array(ev.data), sampleRate);
+			source.connect(node);
+			disconnectNode = () => node.disconnect();
+		} else {
+			const node = ctx.createScriptProcessor(4096, 1, 1);
+			node.onaudioprocess = (ev) => onFrame(new Float32Array(ev.inputBuffer.getChannelData(0)), sampleRate);
+			source.connect(node);
+			node.connect(ctx.destination);
+			disconnectNode = () => node.disconnect();
+		}
+		return () => {
+			disconnectNode();
+			source.disconnect();
+			stream.getTracks().forEach((t) => t.stop());
+			ctx.close();
+		};
+	};
+	const defaultCreatePlayer = () => {
+		const Ctx = globalThis.AudioContext;
+		if (!Ctx) throw new Error("AudioContext is not available");
+		return new PcmPlayer(new Ctx({ sampleRate: VOICE_SAMPLE_RATE }));
+	};
+	var VoiceSession = class {
+		constructor(opts, events = {}) {
+			_defineProperty(this, "opts", void 0);
+			_defineProperty(this, "events", void 0);
+			_defineProperty(this, "ws", null);
+			_defineProperty(this, "player", null);
+			_defineProperty(this, "stopCapture", null);
+			_defineProperty(this, "speaking", false);
+			_defineProperty(this, "ended", false);
+			_defineProperty(this, "state", "idle");
+			this.opts = opts;
+			this.events = events;
+		}
+		/** Open the WS, send the start frame, and begin streaming mic audio. */
+		async start() {
+			if (this.state !== "idle") return;
+			this.state = "connecting";
+			const url = this.opts.url ?? "wss://twilio-voice.smoo.ai/browser-voice/ws";
+			const createWs = this.opts.seams?.createWebSocket ?? ((u) => new WebSocket(u));
+			const startCapture = this.opts.seams?.startCapture ?? defaultStartCapture;
+			const createPlayer = this.opts.seams?.createPlayer ?? defaultCreatePlayer;
+			this.stopCapture = await startCapture((samples, rate) => this.handleMicFrame(samples, rate));
+			try {
+				this.player = createPlayer();
+				const ws = createWs(url);
+				ws.binaryType = "arraybuffer";
+				this.ws = ws;
+				ws.addEventListener("open", () => {
+					const start = {
+						type: "start",
+						agent_id: this.opts.agentId
+					};
+					if (this.opts.conversationId) start.conversation_id = this.opts.conversationId;
+					if (this.opts.token) start.token = this.opts.token;
+					ws.send(JSON.stringify(start));
+					this.state = "active";
+				});
+				ws.addEventListener("message", (ev) => this.handleServerFrame(ev.data));
+				ws.addEventListener("close", () => this.teardown());
+				ws.addEventListener("error", () => {
+					this.events.onError?.("connection_error");
+					this.teardown();
+				});
+			} catch (err) {
+				this.teardown();
+				throw err;
+			}
+		}
+		/** One raw mic frame: barge-in check, then downsample → binary frame. */
+		handleMicFrame(samples, sampleRate) {
+			const ws = this.ws;
+			if (!ws || ws.readyState !== 1 || this.state !== "active") return;
+			if (this.speaking && rmsLevel(samples) > (this.opts.bargeInThreshold ?? .02)) this.interrupt();
+			const pcm = downsampleTo16k(samples, sampleRate);
+			ws.send(pcm.buffer);
+		}
+		/** Route a server frame: binary = TTS audio, string = JSON control event. */
+		handleServerFrame(data) {
+			if (typeof data !== "string") {
+				this.player?.enqueue(data);
+				return;
+			}
+			let msg;
+			try {
+				msg = JSON.parse(data);
+			} catch {
+				return;
+			}
+			switch (msg.type) {
+				case "transcript_partial":
+					this.events.onTranscriptPartial?.(msg.text ?? "");
+					break;
+				case "transcript_final":
+					this.events.onTranscriptFinal?.(msg.text ?? "");
+					break;
+				case "reply_text":
+					this.events.onReplyText?.(msg.text ?? "");
+					break;
+				case "speaking_started":
+					this.setSpeaking(true);
+					break;
+				case "speaking_done":
+					this.setSpeaking(false);
+					break;
+				case "handoff":
+					this.stop();
+					break;
+				case "error":
+					this.events.onError?.(msg.code ?? "unknown");
+					this.stop();
+					break;
+				default: break;
+			}
+		}
+		setSpeaking(speaking) {
+			if (this.speaking === speaking) return;
+			this.speaking = speaking;
+			this.events.onSpeaking?.(speaking);
+		}
+		/** True while agent TTS is playing (between speaking_started/done). */
+		get isSpeaking() {
+			return this.speaking;
+		}
+		/**
+		* Barge in: tell the server the user interrupted and flush queued TTS so the
+		* agent goes silent immediately. Called automatically on mic speech during
+		* playback; the widget also calls it when the visitor hits the mic button
+		* mid-playback.
+		*/
+		interrupt() {
+			if (this.ws && this.ws.readyState === 1) this.ws.send(JSON.stringify({ type: "interrupt" }));
+			this.player?.flush();
+			this.setSpeaking(false);
+		}
+		/** Graceful end: send `stop`, then tear everything down. */
+		stop() {
+			if (this.ws && this.ws.readyState === 1) try {
+				this.ws.send(JSON.stringify({ type: "stop" }));
+			} catch {}
+			this.teardown();
+		}
+		/** Idempotent teardown: capture, playback, socket, `ended` event. */
+		teardown() {
+			if (this.ended) return;
+			this.ended = true;
+			this.state = "ended";
+			this.stopCapture?.();
+			this.stopCapture = null;
+			this.player?.close();
+			this.player = null;
+			const ws = this.ws;
+			this.ws = null;
+			if (ws && ws.readyState <= 1) try {
+				ws.close(1e3, "voice ended");
+			} catch {}
+			this.setSpeaking(false);
+			this.events.onEnded?.();
+		}
+	};
+	//#endregion
 	//#region src/config.ts
 	/**
 	* Public configuration surface for the chat widget.
@@ -11783,6 +12091,10 @@ var SmoothAgentChat = (function(exports) {
 			allowChatRestore: config.allowChatRestore ?? true,
 			allowAnonymous: config.allowAnonymous ?? false,
 			showToolActivity: config.showToolActivity ?? false,
+			voice: {
+				enabled: config.voice?.enabled ?? false,
+				url: config.voice?.url ?? "wss://twilio-voice.smoo.ai/browser-voice/ws"
+			},
 			theme: {
 				text: theme.text ?? "#f8fafc",
 				background: theme.background ?? "#040d30",
@@ -11805,44 +12117,6 @@ var SmoothAgentChat = (function(exports) {
 		return !resolved.allowAnonymous && (resolved.requireName || resolved.requireEmail || resolved.requirePhone);
 	}
 	//#endregion
-	//#region \0@oxc-project+runtime@0.134.0/helpers/esm/typeof.js
-	function _typeof(o) {
-		"@babel/helpers - typeof";
-		return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
-			return typeof o;
-		} : function(o) {
-			return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-		}, _typeof(o);
-	}
-	//#endregion
-	//#region \0@oxc-project+runtime@0.134.0/helpers/esm/toPrimitive.js
-	function toPrimitive(t, r) {
-		if ("object" != _typeof(t) || !t) return t;
-		var e = t[Symbol.toPrimitive];
-		if (void 0 !== e) {
-			var i = e.call(t, r || "default");
-			if ("object" != _typeof(i)) return i;
-			throw new TypeError("@@toPrimitive must return a primitive value.");
-		}
-		return ("string" === r ? String : Number)(t);
-	}
-	//#endregion
-	//#region \0@oxc-project+runtime@0.134.0/helpers/esm/toPropertyKey.js
-	function toPropertyKey(t) {
-		var i = toPrimitive(t, "string");
-		return "symbol" == _typeof(i) ? i : i + "";
-	}
-	//#endregion
-	//#region \0@oxc-project+runtime@0.134.0/helpers/esm/defineProperty.js
-	function _defineProperty(e, r, t) {
-		return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-			value: t,
-			enumerable: !0,
-			configurable: !0,
-			writable: !0
-		}) : e[r] = t, e;
-	}
-	//#endregion
 	//#region node_modules/.pnpm/@smooai+smooth-operator@1.21.1/node_modules/@smooai/smooth-operator/dist/transport.js
 	/**
 	* Transport abstraction for the client.
@@ -13004,6 +13278,7 @@ var SmoothAgentChat = (function(exports) {
 			_defineProperty(this, "store", void 0);
 			_defineProperty(this, "client", null);
 			_defineProperty(this, "sessionId", null);
+			_defineProperty(this, "conversationId", null);
 			_defineProperty(this, "messages", []);
 			_defineProperty(this, "status", "idle");
 			_defineProperty(this, "seq", 0);
@@ -13027,6 +13302,26 @@ var SmoothAgentChat = (function(exports) {
 		get connectionStatus() {
 			return this.status;
 		}
+		/** Conversation id of the live session, or null before connect (voice passes this as `conversation_id`). */
+		get currentConversationId() {
+			return this.conversationId;
+		}
+		/**
+		* Append an already-finalized message to the transcript and emit — the voice
+		* path reuses this so `transcript_final` (user) and `reply_text` (assistant)
+		* turns land in the same message list / render pipeline as typed chat.
+		*/
+		appendLocalMessage(role, text) {
+			const trimmed = text.trim();
+			if (!trimmed) return;
+			this.messages.push({
+				id: this.nextId(role === "user" ? "u" : "a"),
+				role,
+				text: trimmed,
+				streaming: false
+			});
+			this.emitMessages();
+		}
 		/** The persisted store, exposed so the view can read identity for the pre-chat gate. */
 		getStore() {
 			return this.store;
@@ -13290,6 +13585,7 @@ var SmoothAgentChat = (function(exports) {
 				...metadata ? { metadata } : {}
 			});
 			this.sessionId = session.sessionId;
+			this.conversationId = session.conversationId ?? null;
 			this.store.getState().setSessionId(session.sessionId);
 		}
 		/**
@@ -13306,6 +13602,7 @@ var SmoothAgentChat = (function(exports) {
 			}
 			if (snap.status === "ended") return false;
 			this.sessionId = sessionId;
+			this.conversationId = snap.conversationId ?? null;
 			await this.hydrateHistory(sessionId);
 			return true;
 		}
@@ -13649,6 +13946,7 @@ var SmoothAgentChat = (function(exports) {
 			this.client?.disconnect("widget closed");
 			this.client = null;
 			this.sessionId = null;
+			this.conversationId = null;
 			this.activeRequestId = null;
 			this.resumeAttempted = false;
 			this.setInterrupt(null);
@@ -14199,6 +14497,47 @@ ${mode === "fullpage" ? `
 .send:hover { transform: translateY(-1px) scale(1.05); }
 .send:active { transform: scale(.94); }
 .send:disabled { opacity: .4; cursor: default; transform: none; box-shadow: none; }
+
+/* Voice mic toggle (SMOODEV-2534) — ghost twin of .send; lights up while live. */
+.mic {
+    width: 38px; height: 38px;
+    flex: none;
+    border: 1px solid color-mix(in srgb, var(--sac-border) 80%, transparent);
+    border-radius: 13px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    color: color-mix(in srgb, var(--sac-text) 65%, transparent);
+    transition: transform .2s var(--sac-ease), color .2s ease, background .25s ease, box-shadow .25s ease;
+}
+.mic svg { width: 18px; height: 18px; }
+.mic:hover { color: var(--sac-text); transform: translateY(-1px) scale(1.05); }
+.mic:active { transform: scale(.94); }
+.mic.active {
+    border-color: transparent;
+    background: linear-gradient(150deg, var(--sac-primary), var(--sac-primary-2));
+    color: var(--sac-primary-text);
+    animation: sac-mic-pulse 1.6s ease-out infinite;
+}
+/* Listening → soft expanding ring off the button (mirrors the presence pulse). */
+@keyframes sac-mic-pulse {
+    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sac-primary) 45%, transparent); }
+    70% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--sac-primary) 0%, transparent); }
+    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sac-primary) 0%, transparent); }
+}
+/* Agent TTS playing → faster secondary-accent shimmer so "speaking" reads distinctly. */
+.mic.active.speaking {
+    animation: sac-mic-speaking 0.9s ease-in-out infinite;
+}
+@keyframes sac-mic-speaking {
+    0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sac-secondary) 35%, transparent); }
+    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--sac-secondary) 12%, transparent); }
+}
+@media (prefers-reduced-motion: reduce) {
+    .mic.active, .mic.active.speaking { animation: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--sac-primary) 40%, transparent); }
+}
 .footer {
     text-align: center;
     margin-top: 9px;
@@ -14511,7 +14850,9 @@ ${mode === "fullpage" ? `
 		/** Tool-confirmation interrupt — a shield. */
 		shield: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3 5 6v5c0 4.4 3 7.2 7 8.5 4-1.3 7-4.1 7-8.5V6l-7-3Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="m9 11.5 2 2 4-4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
 		/** Tool-activity chip — a wrench. */
-		tool: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.7 6.3a3.5 3.5 0 0 0-4.6 4.3l-5 5a1.6 1.6 0 0 0 2.3 2.3l5-5a3.5 3.5 0 0 0 4.3-4.6l-2 2-1.7-.3-.3-1.7 2-2Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>`
+		tool: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.7 6.3a3.5 3.5 0 0 0-4.6 4.3l-5 5a1.6 1.6 0 0 0 2.3 2.3l5-5a3.5 3.5 0 0 0 4.3-4.6l-2 2-1.7-.3-.3-1.7 2-2Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>`,
+		/** Voice toggle — a microphone. */
+		mic: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="9" y="3.5" width="6" height="11" rx="3" stroke="currentColor" stroke-width="1.7"/><path d="M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v2.5M9 20.5h6" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>`
 	};
 	/**
 	* The identity_intake card: the fields the agent requested (pre-chat form field
@@ -14664,6 +15005,11 @@ ${mode === "fullpage" ? `
 			_defineProperty(this, "identityRestore", { phase: "idle" });
 			_defineProperty(this, "allowChatRestore", true);
 			_defineProperty(this, "gating", false);
+			_defineProperty(this, "voiceCfg", {
+				enabled: false,
+				url: ""
+			});
+			_defineProperty(this, "voiceSession", null);
 			_defineProperty(this, "panelEl", null);
 			_defineProperty(this, "launcherEl", null);
 			_defineProperty(this, "messagesEl", null);
@@ -14671,6 +15017,7 @@ ${mode === "fullpage" ? `
 			_defineProperty(this, "dotEl", null);
 			_defineProperty(this, "inputEl", null);
 			_defineProperty(this, "sendBtn", null);
+			_defineProperty(this, "micBtn", null);
 			_defineProperty(this, "suggestionsEl", null);
 			_defineProperty(this, "streamBubbleEl", null);
 			_defineProperty(this, "streamMsgId", null);
@@ -14687,6 +15034,7 @@ ${mode === "fullpage" ? `
 		disconnectedCallback() {
 			this.mounted = false;
 			this.resetReveal();
+			this.stopVoice();
 			this.controller?.disconnect();
 			this.controller = null;
 		}
@@ -14750,6 +15098,7 @@ ${mode === "fullpage" ? `
 				allowChatRestore: this.overrides.allowChatRestore,
 				allowAnonymous: this.overrides.allowAnonymous,
 				showToolActivity: this.overrides.showToolActivity ?? this.hasAttribute("show-tool-activity"),
+				voice: this.overrides.voice,
 				theme
 			};
 		}
@@ -14834,6 +15183,8 @@ ${mode === "fullpage" ? `
             </div>`;
 			const footerInner = [resolved.hideBranding ? "" : `<a href="${SMOOTH_OPERATOR_URL}" target="_blank" rel="noopener noreferrer">powered by <b>smooth&#8209;operator</b></a>`, this.allowChatRestore ? `<button type="button" class="restore-link">Restore my chats</button>` : ""].filter(Boolean).join(" · ");
 			const footerHtml = footerInner ? `<div class="footer">${footerInner}</div>` : "";
+			this.voiceCfg = resolved.voice;
+			const micHtml = resolved.voice.enabled ? `<button class="mic" type="button" aria-label="Start voice" aria-pressed="false" title="Talk to ${escapeHtml(resolved.agentName)}">${ICON.mic}</button>` : "";
 			const chatHtml = `
                 <div class="messages"></div>
                 <div class="reply-suggestions"></div>
@@ -14841,6 +15192,7 @@ ${mode === "fullpage" ? `
                 <div class="composer-wrap">
                     <div class="composer">
                         <textarea rows="1" placeholder="${escapeHtml(resolved.placeholder)}"></textarea>
+                        ${micHtml}
                         <button class="send" type="button" aria-label="Send message">${ICON.send}</button>
                     </div>
                     ${footerHtml}
@@ -14858,6 +15210,7 @@ ${mode === "fullpage" ? `
 			const logoSvg = container.querySelector(".logo-wrap svg");
 			if (logoSvg) logoSvg.setAttribute("class", "logo");
 			this.resetReveal();
+			this.stopVoice();
 			this.root.replaceChildren(style, container);
 			this.launcherEl = container.querySelector(".launcher");
 			this.panelEl = container.querySelector(".panel");
@@ -14866,11 +15219,13 @@ ${mode === "fullpage" ? `
 			this.dotEl = container.querySelector(".dot");
 			this.inputEl = container.querySelector("textarea");
 			this.sendBtn = container.querySelector(".send");
+			this.micBtn = container.querySelector(".mic");
 			this.interruptEl = container.querySelector(".interrupt");
 			this.suggestionsEl = container.querySelector(".reply-suggestions");
 			this.launcherEl?.addEventListener("click", () => this.openChat());
 			container.querySelector(".close")?.addEventListener("click", () => this.closeChat());
 			this.sendBtn?.addEventListener("click", () => this.submit());
+			this.micBtn?.addEventListener("click", () => this.toggleVoice());
 			this.inputEl?.addEventListener("input", () => this.autosize());
 			this.inputEl?.addEventListener("keydown", (ev) => {
 				if (ev.key === "Enter" && !ev.shiftKey) {
@@ -15645,6 +16000,84 @@ ${mode === "fullpage" ? `
 			if (this.sendBtn) this.sendBtn.disabled = busy;
 			if (this.inputEl) this.inputEl.disabled = busy;
 		}
+		/**
+		* Mic button: start a voice session, or — when one is live — end it. Hitting
+		* the button while the agent's TTS is playing barges in first (interrupt +
+		* playback flush) so the audio dies instantly, then the session ends.
+		*/
+		toggleVoice() {
+			if (this.voiceSession) {
+				if (this.voiceSession.isSpeaking) this.voiceSession.interrupt();
+				this.stopVoice();
+				return;
+			}
+			this.startVoice();
+		}
+		async startVoice() {
+			if (!this.controller || this.voiceSession || !this.voiceCfg.enabled) return;
+			const config = this.readConfig();
+			if (!config) return;
+			const conversationId = this.controller.currentConversationId ?? void 0;
+			const controller = this.controller;
+			const session = new VoiceSession({
+				url: this.voiceCfg.url,
+				agentId: config.agentId,
+				conversationId
+			}, {
+				onTranscriptPartial: (text) => {
+					if (this.inputEl) {
+						this.inputEl.value = text;
+						this.autosize();
+					}
+				},
+				onTranscriptFinal: (text) => {
+					if (this.inputEl) {
+						this.inputEl.value = "";
+						this.autosize();
+					}
+					controller.appendLocalMessage("user", text);
+				},
+				onReplyText: (text) => {
+					controller.appendLocalMessage("assistant", text);
+				},
+				onSpeaking: (speaking) => {
+					this.micBtn?.classList.toggle("speaking", speaking);
+				},
+				onError: () => this.stopVoice(),
+				onEnded: () => {
+					this.voiceSession = null;
+					this.syncVoiceUi(false);
+				}
+			});
+			this.voiceSession = session;
+			this.syncVoiceUi(true);
+			try {
+				await session.start();
+			} catch {
+				this.voiceSession = null;
+				this.syncVoiceUi(false);
+			}
+		}
+		/** End any live voice session and reset the composer UI. Idempotent. */
+		stopVoice() {
+			const session = this.voiceSession;
+			this.voiceSession = null;
+			session?.stop();
+			this.syncVoiceUi(false);
+		}
+		/** Toggle the mic button's listening state + clear the partial transcript. */
+		syncVoiceUi(active) {
+			this.micBtn?.classList.toggle("active", active);
+			this.micBtn?.setAttribute("aria-pressed", String(active));
+			this.micBtn?.setAttribute("aria-label", active ? "Stop voice" : "Start voice");
+			if (!active) {
+				this.micBtn?.classList.remove("speaking");
+				if (this.inputEl && this.inputEl.value) {
+					this.inputEl.value = "";
+					this.autosize();
+				}
+			}
+		}
 		submit() {
 			if (!this.inputEl || !this.controller) return;
 			const text = this.inputEl.value;