@smooai/chat-widget 0.12.0 → 0.14.0

package/dist/index.js

@@ -301,6 +301,340 @@ function cleanCitationSnippet(raw) {
 	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;
+}
+//#endregion
+//#region src/voice-session.ts
+/**
+* VoiceSession — framework-free browser voice for the chat widget.
+*
+* Speaks the FROZEN browser-voice WebSocket protocol (SMOODEV-2534 / ADR-084):
+*
+*   client → server:
+*     - first frame, JSON: `{"type":"start","agent_id":"…","conversation_id":"…?","token":"…?"}`
+*       (public-agent auth is the `Origin` header the browser sends automatically;
+*       `token` only for authenticated contexts)
+*     - binary frames: raw PCM linear16 mono @ 16 kHz mic chunks
+*     - JSON `{"type":"interrupt"}` (user barged in), `{"type":"stop"}`
+*   server → client:
+*     - JSON `transcript_partial` / `transcript_final` / `reply_text` /
+*       `speaking_started` / `speaking_done` / `handoff` / `error {code}`
+*     - binary frames: PCM linear16 mono @ 16 kHz TTS audio chunks
+*
+* The class owns: the WS lifecycle, mic capture (getUserMedia → AudioWorklet or
+* ScriptProcessor fallback → downsample to 16 kHz mono Int16 → binary frames),
+* gapless playback of incoming PCM through a 16 kHz AudioContext, and barge-in
+* (RMS speech detection while the agent is speaking → `interrupt` + playback
+* flush). Browser audio + WebSocket are thin injectable seams so unit tests run
+* under jsdom/happy-dom with no real audio.
+*/
+const DEFAULT_VOICE_URL = "wss://twilio-voice.smoo.ai/browser-voice/ws";
+/** 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.
@@ -342,6 +676,11 @@ function resolveConfig(config) {
 		collectConsent: config.collectConsent ?? true,
 		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",
@@ -651,44 +990,6 @@ function createWidgetStore(agentId) {
 	}));
 }
 //#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 src/conversation.ts
 /**
 * ConversationController — the bridge between the widget UI and the
@@ -807,6 +1108,59 @@ function wireMessageToChat(m, idx) {
 		streaming: false
 	};
 }
+let toolSeq = 0;
+const nextToolId = () => `tool-${++toolSeq}`;
+/** Grow the trailing text block, or open a new one if the last block was a tool. */
+function growTextBlock(blocks, text) {
+	if (!text) return;
+	const last = blocks[blocks.length - 1];
+	if (last && last.kind === "text") last.text += text;
+	else blocks.push({
+		kind: "text",
+		text
+	});
+}
+/**
+* Fold a `stream_chunk` node-state into the ordered block list, returning `true`
+* when the chunk carried tool activity.
+*
+* Tool activity rides `state.rawResponse.toolCall` / `state.rawResponse.toolResult`
+* — **NOT** `state.toolResult`. Reading the wrong path leaves every chip stuck on
+* "running…" forever (the exact bug the daemon SPA hit and this mirror avoids).
+*/
+function applyToolChunk(blocks, state) {
+	const raw = state?.rawResponse;
+	if (!raw || typeof raw !== "object") return false;
+	const call = raw.toolCall;
+	const res = raw.toolResult;
+	if (call) {
+		const args = typeof call.arguments === "string" ? call.arguments : JSON.stringify(call.arguments ?? {});
+		blocks.push({
+			kind: "tool",
+			tool: {
+				id: nextToolId(),
+				name: call.name ?? "",
+				args,
+				done: false
+			}
+		});
+		return true;
+	}
+	if (res) {
+		const result = typeof res.result === "string" ? res.result : JSON.stringify(res.result ?? "");
+		for (let i = blocks.length - 1; i >= 0; i--) {
+			const b = blocks[i];
+			if (b && b.kind === "tool" && b.tool.name === (res.name ?? "") && !b.tool.done) {
+				b.tool.done = true;
+				b.tool.isError = !!res.isError;
+				b.tool.result = result;
+				break;
+			}
+		}
+		return true;
+	}
+	return false;
+}
 var ConversationController = class {
 	constructor(config, events, store) {
 		_defineProperty(this, "config", void 0);
@@ -814,6 +1168,7 @@ var ConversationController = class {
 		_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);
@@ -837,6 +1192,26 @@ var ConversationController = class {
 	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;
@@ -1100,6 +1475,7 @@ var ConversationController = class {
 			...metadata ? { metadata } : {}
 		});
 		this.sessionId = session.sessionId;
+		this.conversationId = session.conversationId ?? null;
 		this.store.getState().setSessionId(session.sessionId);
 	}
 	/**
@@ -1116,6 +1492,7 @@ var ConversationController = class {
 		}
 		if (snap.status === "ended") return false;
 		this.sessionId = sessionId;
+		this.conversationId = snap.conversationId ?? null;
 		await this.hydrateHistory(sessionId);
 		return true;
 	}
@@ -1153,11 +1530,13 @@ var ConversationController = class {
 			text: trimmed,
 			streaming: false
 		});
+		const showTools = this.config.showToolActivity === true;
 		const assistant = {
 			id: this.nextId("a"),
 			role: "assistant",
 			text: "",
-			streaming: true
+			streaming: true,
+			blocks: showTools ? [] : void 0
 		};
 		this.messages.push(assistant);
 		this.emitMessages();
@@ -1172,8 +1551,11 @@ var ConversationController = class {
 				const token = event.token ?? event.data?.token ?? "";
 				if (token) {
 					assistant.text += token;
+					if (showTools && assistant.blocks) growTextBlock(assistant.blocks, token);
 					this.emitMessages();
 				}
+			} else if (showTools && event.type === "stream_chunk") {
+				if (assistant.blocks && applyToolChunk(assistant.blocks, event.data?.state)) this.emitMessages();
 			} else this.handleTurnEvent(event);
 			const inner = (await turn).data?.data;
 			const finalText = extractFinalText(inner?.response);
@@ -1183,6 +1565,7 @@ var ConversationController = class {
 			if (citations.length > 0) assistant.citations = citations;
 			const suggestions = extractSuggestions(inner?.response);
 			if (suggestions.length > 0) assistant.suggestions = suggestions;
+			if (assistant.blocks && !assistant.blocks.some((b) => b.kind === "tool")) assistant.blocks = void 0;
 			assistant.streaming = false;
 			this.emitMessages();
 		} catch (err) {
@@ -1453,6 +1836,7 @@ var ConversationController = class {
 		this.client?.disconnect("widget closed");
 		this.client = null;
 		this.sessionId = null;
+		this.conversationId = null;
 		this.activeRequestId = null;
 		this.resumeAttempted = false;
 		this.setInterrupt(null);
@@ -1494,6 +1878,7 @@ function buildStyles(theme, mode = "popover") {
     --sac-bg: ${theme.background};
     --sac-primary: ${theme.primary};
     --sac-primary-text: ${theme.primaryText};
+    --sac-secondary: ${theme.secondary};
     --sac-assistant-bubble: ${theme.assistantBubble};
     --sac-assistant-bubble-text: ${theme.assistantBubbleText};
     --sac-user-bubble: ${theme.userBubble};
@@ -1806,6 +2191,47 @@ ${mode === "fullpage" ? `
 }
 @keyframes sac-blink { to { opacity: 0 } }
 
+/* Interleaved tool-activity strip (gated by showToolActivity): prose bubbles
+   and inline tool chips stacked in the order the model produced them. */
+.blocks { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
+.blocks .bubble { align-self: flex-start; }
+.toolchip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    max-width: 100%;
+    padding: 5px 10px;
+    border-radius: 99px;
+    font-size: 12px;
+    line-height: 1.3;
+    color: color-mix(in srgb, var(--sac-text) 78%, transparent);
+    background: color-mix(in srgb, var(--sac-text) 6%, transparent);
+    border: 1px solid color-mix(in srgb, var(--sac-text) 12%, transparent);
+    animation: sac-msg-in .3s var(--sac-ease) both;
+}
+.toolchip .ti { display: inline-flex; flex: none; opacity: .8; }
+.toolchip .ti svg { width: 13px; height: 13px; }
+.toolchip .tn { font-weight: 600; letter-spacing: .01em; }
+.toolchip .ts { opacity: .7; }
+.toolchip .ta {
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 11px;
+    opacity: .6;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+}
+.toolchip.running { border-color: color-mix(in srgb, var(--sac-primary) 45%, transparent); }
+.toolchip.running .ts { color: var(--sac-primary); opacity: 1; animation: sac-typing 1.3s ease-in-out infinite; }
+.toolchip.done .ts::before { content: '✓ '; }
+.toolchip.error {
+    color: var(--sac-secondary);
+    border-color: color-mix(in srgb, var(--sac-secondary) 50%, transparent);
+    background: color-mix(in srgb, var(--sac-secondary) 10%, transparent);
+}
+.toolchip.error .ts::before { content: '! '; }
+
 /* ─────────────── Rendered markdown (assistant bubbles / snippets) ─────────── */
 /* The renderer (markdown.ts) emits a small allowlisted set of tags; these rules
    keep them legible inside the tight Aurora-Glass bubble + citation card. */
@@ -1961,6 +2387,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;
@@ -2248,7 +2715,8 @@ const OBSERVED = [
 	"greeting",
 	"start-open",
 	"mode",
-	"hide-branding"
+	"hide-branding",
+	"show-tool-activity"
 ];
 /**
 * Inline SVG icons (static, trusted strings — never interpolated with user data).
@@ -2270,7 +2738,11 @@ const ICON = {
 	/** Identity-intake interrupt — a person. */
 	user: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="8.2" r="3.4" stroke="currentColor" stroke-width="1.7"/><path d="M5.5 19.5c.8-3.1 3.4-4.8 6.5-4.8s5.7 1.7 6.5 4.8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>`,
 	/** 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>`
+	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>`,
+	/** 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
@@ -2423,6 +2895,11 @@ var SmoothAgentChatElement = class extends HTMLElement {
 		_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);
@@ -2430,12 +2907,14 @@ var SmoothAgentChatElement = class extends HTMLElement {
 		_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);
 		_defineProperty(this, "streamTarget", "");
 		_defineProperty(this, "displayedLength", 0);
 		_defineProperty(this, "rafId", 0);
+		_defineProperty(this, "prevBlockSig", "");
 		this.root = this.attachShadow({ mode: "open" });
 	}
 	connectedCallback() {
@@ -2445,6 +2924,7 @@ var SmoothAgentChatElement = class extends HTMLElement {
 	disconnectedCallback() {
 		this.mounted = false;
 		this.resetReveal();
+		this.stopVoice();
 		this.controller?.disconnect();
 		this.controller = null;
 	}
@@ -2507,6 +2987,8 @@ var SmoothAgentChatElement = class extends HTMLElement {
 			collectConsent: this.overrides.collectConsent,
 			allowChatRestore: this.overrides.allowChatRestore,
 			allowAnonymous: this.overrides.allowAnonymous,
+			showToolActivity: this.overrides.showToolActivity ?? this.hasAttribute("show-tool-activity"),
+			voice: this.overrides.voice,
 			theme
 		};
 	}
@@ -2591,6 +3073,8 @@ var SmoothAgentChatElement = class extends HTMLElement {
             </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>
@@ -2598,6 +3082,7 @@ var SmoothAgentChatElement = class extends HTMLElement {
                 <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}
@@ -2615,6 +3100,7 @@ var SmoothAgentChatElement = class extends HTMLElement {
 		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");
@@ -2623,11 +3109,13 @@ var SmoothAgentChatElement = class extends HTMLElement {
 		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) {
@@ -3046,15 +3534,38 @@ var SmoothAgentChatElement = class extends HTMLElement {
 		const prev = this.messages;
 		const last = messages[messages.length - 1];
 		const prevLast = prev[prev.length - 1];
-		const structural = messages.length !== prev.length || !last || !prevLast || last.id !== prevLast.id || last.role !== prevLast.role || last.streaming !== prevLast.streaming || !!last.streaming && !prevLast.text && !!last.text;
+		const structural = messages.length !== prev.length || !last || !prevLast || last.id !== prevLast.id || last.role !== prevLast.role || last.streaming !== prevLast.streaming || !!last.streaming && !prevLast.text && !!last.text || this.blockSig(last) !== this.prevBlockSig;
 		this.messages = messages;
-		if (!structural && last && last.streaming && last.id === this.streamMsgId) {
-			this.streamTarget = last.text;
+		this.prevBlockSig = this.blockSig(last);
+		if (!structural && last && last.streaming && this.tailKey(last) === this.streamMsgId) {
+			this.streamTarget = this.tailText(last);
 			this.ensureRevealLoop();
 			return;
 		}
 		this.renderMessages();
 	}
+	/** True when an assistant message's turn invoked at least one tool. */
+	hasToolBlocks(m) {
+		return !!m?.blocks?.some((b) => b.kind === "tool");
+	}
+	/** Signature that changes only when a tool chip is added or resolved (text growth is 'x'). */
+	blockSig(m) {
+		if (!m?.blocks) return "";
+		return m.blocks.map((b) => b.kind === "tool" ? `t:${b.tool.id}:${b.tool.done ? 1 : 0}` : "x").join("|");
+	}
+	/** The live (last) text block for a tool turn, else the whole message text. */
+	tailText(m) {
+		if (this.hasToolBlocks(m) && m.blocks) {
+			const last = m.blocks[m.blocks.length - 1];
+			return last?.kind === "text" ? last.text : "";
+		}
+		return m.text;
+	}
+	/** Reveal-binding key — composite for a tool-turn tail (so a new trailing block rebinds), else msg id. */
+	tailKey(m) {
+		if (this.hasToolBlocks(m) && m.blocks) return `${m.id}#${m.blocks.length - 1}`;
+		return m.id;
+	}
 	renderMessages() {
 		if (!this.messagesEl) return;
 		this.resetReveal();
@@ -3075,6 +3586,11 @@ var SmoothAgentChatElement = class extends HTMLElement {
 			this.messagesEl.appendChild(chips);
 		}
 		for (const msg of this.messages) {
+			if (msg.role === "assistant" && this.hasToolBlocks(msg)) {
+				this.messagesEl.appendChild(this.buildRow("assistant", this.renderAssistantBlocks(msg)));
+				if (!msg.streaming && msg.citations && msg.citations.length > 0) this.messagesEl.appendChild(this.renderSources(msg.citations));
+				continue;
+			}
 			const bubble = document.createElement("div");
 			bubble.className = `bubble ${msg.role}`;
 			if (msg.role === "assistant" && msg.streaming && !msg.text) {
@@ -3132,19 +3648,77 @@ var SmoothAgentChatElement = class extends HTMLElement {
 	* doesn't restart the reveal from zero), then resumes the loop.
 	*/
 	bindReveal(msg, bubble) {
-		const carryOver = msg.id === this.streamMsgId ? Math.min(this.displayedLength, msg.text.length) : 0;
+		const key = this.tailKey(msg);
+		const target = this.tailText(msg);
+		const carryOver = key === this.streamMsgId ? Math.min(this.displayedLength, target.length) : 0;
 		this.streamBubbleEl = bubble;
-		this.streamMsgId = msg.id;
-		this.streamTarget = msg.text;
+		this.streamMsgId = key;
+		this.streamTarget = target;
 		this.displayedLength = carryOver;
 		if (this.prefersReducedMotion()) {
-			this.displayedLength = msg.text.length;
-			bubble.textContent = msg.text;
+			this.displayedLength = target.length;
+			bubble.textContent = target;
 			return;
 		}
-		bubble.textContent = msg.text.slice(0, this.displayedLength);
+		bubble.textContent = target.slice(0, this.displayedLength);
 		this.ensureRevealLoop();
 	}
+	/**
+	* Render a tool-activity assistant turn as an ordered strip: prose bubbles and
+	* inline tool chips in the order the model produced them (mirrors the daemon
+	* SPA's `blocks`). The live trailing text block (while streaming) binds to the
+	* rAF reveal; earlier/finalized text blocks render as sanitized markdown.
+	*/
+	renderAssistantBlocks(msg) {
+		const wrap = document.createElement("div");
+		wrap.className = "blocks";
+		const blocks = msg.blocks ?? [];
+		const lastIdx = blocks.length - 1;
+		blocks.forEach((block, i) => {
+			if (block.kind === "tool") {
+				wrap.appendChild(this.buildToolChip(block.tool));
+				return;
+			}
+			const bubble = document.createElement("div");
+			bubble.className = "bubble assistant";
+			if (msg.streaming && i === lastIdx) {
+				bubble.classList.add("cursor");
+				this.bindReveal(msg, bubble);
+			} else {
+				bubble.classList.add("md");
+				bubble.innerHTML = renderMarkdown(block.text);
+			}
+			wrap.appendChild(bubble);
+		});
+		return wrap;
+	}
+	/**
+	* A single tool-activity chip: icon + tool name + status (running… / done / error),
+	* with a truncated args preview. Tool name/args are set via `textContent` so a
+	* tool payload can never inject markup.
+	*/
+	buildToolChip(tool) {
+		const chip = document.createElement("div");
+		chip.className = `toolchip ${tool.done ? tool.isError ? "error" : "done" : "running"}`;
+		chip.setAttribute("part", "tool-chip");
+		const icon = document.createElement("span");
+		icon.className = "ti";
+		icon.innerHTML = ICON.tool;
+		const name = document.createElement("span");
+		name.className = "tn";
+		name.textContent = tool.name || "tool";
+		const status = document.createElement("span");
+		status.className = "ts";
+		status.textContent = tool.done ? tool.isError ? "error" : "done" : "running…";
+		chip.append(icon, name, status);
+		if (tool.args && tool.args !== "{}" && tool.args !== "\"\"") {
+			const args = document.createElement("span");
+			args.className = "ta";
+			args.textContent = tool.args.length > 80 ? `${tool.args.slice(0, 80)}…` : tool.args;
+			chip.appendChild(args);
+		}
+		return chip;
+	}
 	/** Start the rAF loop if it isn't already running. */
 	ensureRevealLoop() {
 		if (this.prefersReducedMotion() || typeof requestAnimationFrame !== "function") {
@@ -3316,6 +3890,84 @@ var SmoothAgentChatElement = class extends HTMLElement {
 		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;
@@ -3498,6 +4150,6 @@ function initChatWidgetLoader() {
 	else window.addEventListener("load", schedule, { once: true });
 }
 //#endregion
-export { ConversationController, ELEMENT_TAG, PERSIST_VERSION, SmoothAgentChatElement, computeFingerprint, createWidgetStore, defineChatWidget, getOrCreateFingerprint, httpBaseFromWsEndpoint, initChatWidgetLoader, mountChatWidget, mountFullPageChat, storageKey };
+export { ConversationController, DEFAULT_VOICE_URL, ELEMENT_TAG, PERSIST_VERSION, PcmPlayer, SmoothAgentChatElement, VOICE_SAMPLE_RATE, VoiceSession, computeFingerprint, createWidgetStore, defineChatWidget, downsampleTo16k, getOrCreateFingerprint, httpBaseFromWsEndpoint, initChatWidgetLoader, mountChatWidget, mountFullPageChat, rmsLevel, storageKey };
 
 //# sourceMappingURL=index.js.map