@devicai/ui 0.60.0 → 0.61.1

package/dist/cjs/components/ChatDrawer/LiveVoicePrompter.js

@@ -0,0 +1,148 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var useTranslations = require('../../i18n/useTranslations.js');
+
+/** Level readings kept per wave: one bar each, spread over the whole width. */
+const WAVE_HISTORY = 160;
+/** A new reading this often, so 160 bars are eight seconds of conversation. */
+const WAVE_TICK_MS = 50;
+/** Silence draws a dotted baseline rather than nothing, so the row reads as "live, quiet". */
+const WAVE_FLOOR = 0.06;
+/** Loudness of the last analyser window, 0..1: RMS rather than peak, so a click does not spike. */
+function waveLevel(samples) {
+    let sum = 0;
+    for (let i = 0; i < samples.length; i++) {
+        const value = (samples[i] - 128) / 128;
+        sum += value * value;
+    }
+    return Math.min(1, Math.sqrt(sum / samples.length) * 4);
+}
+/**
+ * A full-width level history for one speaker: newest at the right, sliding
+ * left. Drawn in the row's CSS `color`, so the user's wave takes the muted grey
+ * and the assistant's the accent, and the two rows in parallel show who spoke
+ * when without a legend. Analyses existing streams only: never acquires a
+ * microphone or routes audio.
+ */
+function VoiceWave({ stream, role }) {
+    const t = useTranslations.useTranslations();
+    const canvasRef = React.useRef(null);
+    React.useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        let drawing;
+        try {
+            drawing = canvas.getContext('2d');
+        }
+        catch {
+            return;
+        }
+        if (!drawing)
+            return;
+        let context;
+        let source;
+        let analyser;
+        let frame = 0;
+        let tick = -Infinity;
+        let color = '';
+        const levels = new Float32Array(WAVE_HISTORY);
+        const samples = new Uint8Array(256);
+        try {
+            if (stream && typeof AudioContext !== 'undefined') {
+                context = new AudioContext();
+                source = context.createMediaStreamSource(stream);
+                analyser = context.createAnalyser();
+                analyser.fftSize = 256;
+                source.connect(analyser);
+                void context.resume().catch(() => { });
+            }
+        }
+        catch { /* A visualisation failure must not interrupt the call. */ }
+        const fit = () => {
+            const ratio = typeof devicePixelRatio === 'number' && devicePixelRatio > 0 ? devicePixelRatio : 1;
+            canvas.width = Math.max(1, Math.round((canvas.clientWidth || canvas.width) * ratio));
+            canvas.height = Math.max(1, Math.round((canvas.clientHeight || canvas.height) * ratio));
+        };
+        const draw = (now) => {
+            if (now - tick >= WAVE_TICK_MS) {
+                tick = now;
+                samples.fill(128);
+                try {
+                    analyser?.getByteTimeDomainData(samples);
+                }
+                catch { /* Closed stream. */ }
+                levels.copyWithin(0, 1);
+                levels[WAVE_HISTORY - 1] = waveLevel(samples);
+                color = typeof getComputedStyle === 'function' ? getComputedStyle(canvas).color : '';
+            }
+            const { width, height } = canvas;
+            drawing.clearRect(0, 0, width, height);
+            drawing.strokeStyle = color || '#8c8c8c';
+            drawing.lineCap = 'round';
+            const step = width / WAVE_HISTORY;
+            const bar = Math.max(1, step * 0.5);
+            drawing.lineWidth = bar;
+            const middle = height / 2;
+            for (let i = 0; i < WAVE_HISTORY; i++) {
+                const tall = Math.max(0, Math.max(WAVE_FLOOR, levels[i]) * (height - bar) - bar);
+                const x = i * step + step / 2;
+                drawing.globalAlpha = 0.3 + 0.7 * (i / WAVE_HISTORY);
+                drawing.beginPath();
+                drawing.moveTo(x, middle - tall / 2);
+                drawing.lineTo(x, middle + tall / 2);
+                drawing.stroke();
+            }
+            drawing.globalAlpha = 1;
+            frame = requestAnimationFrame(draw);
+        };
+        fit();
+        const observer = typeof ResizeObserver === 'function' ? new ResizeObserver(fit) : undefined;
+        observer?.observe(canvas);
+        frame = requestAnimationFrame(draw);
+        return () => {
+            cancelAnimationFrame(frame);
+            observer?.disconnect();
+            source?.disconnect();
+            analyser?.disconnect();
+            if (context)
+                void context.close().catch(() => { });
+            try {
+                drawing.clearRect(0, 0, canvas.width, canvas.height);
+            }
+            catch { /* Detached canvas. */ }
+        };
+    }, [stream, role]);
+    return jsxRuntime.jsxs("div", { className: `devic-voice-wave-row devic-voice-wave-row--${role}`, children: [jsxRuntime.jsx("span", { children: role === 'user' ? t('You') : t('Assistant') }), jsxRuntime.jsx("canvas", { ref: canvasRef, className: "devic-voice-wave-canvas", width: 640, height: 28, role: "img", "aria-label": role === 'user' ? t('Your audio level') : t('Assistant audio level') })] });
+}
+/**
+ * The transcript as a teleprompter, matching Active Chat: the newest words sit
+ * at the bottom of a fixed-height viewport and everything earlier slides up and
+ * fades out through the top edge; below it, one level wave per speaker.
+ */
+function LiveVoicePrompter({ voice }) {
+    const t = useTranslations.useTranslations();
+    const viewport = React.useRef(null);
+    const text = React.useRef(null);
+    React.useLayoutEffect(() => {
+        const update = () => {
+            if (text.current && viewport.current)
+                text.current.style.transform = `translateY(-${Math.max(0, text.current.scrollHeight - viewport.current.clientHeight)}px)`;
+        };
+        update();
+        const observer = typeof ResizeObserver === 'function' ? new ResizeObserver(update) : undefined;
+        if (viewport.current)
+            observer?.observe(viewport.current);
+        if (text.current)
+            observer?.observe(text.current);
+        return () => observer?.disconnect();
+    }, [voice.transcript]);
+    const placeholder = voice.state === 'connecting' ? t('Connecting voice…') : voice.state === 'closing' ? t('Closing voice…') : voice.state === 'reconnecting' ? t('Restoring voice…') : t('Listening…');
+    return jsxRuntime.jsxs("div", { className: "devic-voice-prompter", "aria-label": t('Live voice conversation'), children: [jsxRuntime.jsx("div", { ref: viewport, className: "devic-voice-prompter-viewport", "aria-live": "polite", children: jsxRuntime.jsx("div", { ref: text, className: "devic-voice-prompter-text", children: voice.transcript.length ? voice.transcript.slice(-4).map((turn, i, turns) => jsxRuntime.jsxs("p", { className: `devic-voice-turn${i === turns.length - 1 ? ' devic-voice-turn--current' : ''}`, children: [jsxRuntime.jsx("span", { children: turn.role === 'user' ? t('You') : t('Assistant') }), turn.text.replace(/\s+/g, ' ')] }, i)) : jsxRuntime.jsx("p", { className: "devic-voice-turn devic-voice-turn--placeholder", children: placeholder }) }) }), jsxRuntime.jsxs("div", { className: "devic-voice-waves", children: [jsxRuntime.jsx(VoiceWave, { role: "user", stream: voice.muted ? undefined : voice.input }), jsxRuntime.jsx(VoiceWave, { role: "assistant", stream: voice.output })] })] });
+}
+
+exports.LiveVoicePrompter = LiveVoicePrompter;
+exports.waveLevel = waveLevel;
+//# sourceMappingURL=LiveVoicePrompter.js.map

package/dist/cjs/components/ChatDrawer/LiveVoicePrompter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveVoicePrompter.js","sources":["../../../../../src/components/ChatDrawer/LiveVoicePrompter.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef } from 'react';\nimport { useTranslations } from '../../i18n';\nimport type { UseDevicLiveVoiceResult } from '../../hooks/useDevicLiveVoice';\n\nexport interface LiveVoicePrompterProps {\n  voice: Pick<UseDevicLiveVoiceResult, 'transcript' | 'input' | 'output' | 'muted' | 'state'>;\n}\n\n/** Level readings kept per wave: one bar each, spread over the whole width. */\nconst WAVE_HISTORY = 160;\n/** A new reading this often, so 160 bars are eight seconds of conversation. */\nconst WAVE_TICK_MS = 50;\n/** Silence draws a dotted baseline rather than nothing, so the row reads as \"live, quiet\". */\nconst WAVE_FLOOR = 0.06;\n\n/** Loudness of the last analyser window, 0..1: RMS rather than peak, so a click does not spike. */\nexport function waveLevel(samples: Uint8Array): number {\n  let sum = 0;\n  for (let i = 0; i < samples.length; i++) {\n    const value = (samples[i] - 128) / 128;\n    sum += value * value;\n  }\n  return Math.min(1, Math.sqrt(sum / samples.length) * 4);\n}\n\n/**\n * A full-width level history for one speaker: newest at the right, sliding\n * left. Drawn in the row's CSS `color`, so the user's wave takes the muted grey\n * and the assistant's the accent, and the two rows in parallel show who spoke\n * when without a legend. Analyses existing streams only: never acquires a\n * microphone or routes audio.\n */\nfunction VoiceWave({ stream, role }: { stream?: MediaStream; role: 'user' | 'assistant' }) {\n  const t = useTranslations();\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    let drawing: CanvasRenderingContext2D | null;\n    try { drawing = canvas.getContext('2d'); } catch { return; }\n    if (!drawing) return;\n    let context: AudioContext | undefined;\n    let source: MediaStreamAudioSourceNode | undefined;\n    let analyser: AnalyserNode | undefined;\n    let frame = 0;\n    let tick = -Infinity;\n    let color = '';\n    const levels = new Float32Array(WAVE_HISTORY);\n    const samples = new Uint8Array(256);\n    try {\n      if (stream && typeof AudioContext !== 'undefined') {\n        context = new AudioContext(); source = context.createMediaStreamSource(stream);\n        analyser = context.createAnalyser(); analyser.fftSize = 256;\n        source.connect(analyser); void context.resume().catch(() => {});\n      }\n    } catch { /* A visualisation failure must not interrupt the call. */ }\n    const fit = () => {\n      const ratio = typeof devicePixelRatio === 'number' && devicePixelRatio > 0 ? devicePixelRatio : 1;\n      canvas.width = Math.max(1, Math.round((canvas.clientWidth || canvas.width) * ratio));\n      canvas.height = Math.max(1, Math.round((canvas.clientHeight || canvas.height) * ratio));\n    };\n    const draw = (now: number) => {\n      if (now - tick >= WAVE_TICK_MS) {\n        tick = now; samples.fill(128);\n        try { analyser?.getByteTimeDomainData(samples); } catch { /* Closed stream. */ }\n        levels.copyWithin(0, 1); levels[WAVE_HISTORY - 1] = waveLevel(samples);\n        color = typeof getComputedStyle === 'function' ? getComputedStyle(canvas).color : '';\n      }\n      const { width, height } = canvas;\n      drawing!.clearRect(0, 0, width, height);\n      drawing!.strokeStyle = color || '#8c8c8c';\n      drawing!.lineCap = 'round';\n      const step = width / WAVE_HISTORY;\n      const bar = Math.max(1, step * 0.5);\n      drawing!.lineWidth = bar;\n      const middle = height / 2;\n      for (let i = 0; i < WAVE_HISTORY; i++) {\n        const tall = Math.max(0, Math.max(WAVE_FLOOR, levels[i]) * (height - bar) - bar);\n        const x = i * step + step / 2;\n        drawing!.globalAlpha = 0.3 + 0.7 * (i / WAVE_HISTORY);\n        drawing!.beginPath(); drawing!.moveTo(x, middle - tall / 2);\n        drawing!.lineTo(x, middle + tall / 2); drawing!.stroke();\n      }\n      drawing!.globalAlpha = 1;\n      frame = requestAnimationFrame(draw);\n    };\n    fit();\n    const observer = typeof ResizeObserver === 'function' ? new ResizeObserver(fit) : undefined;\n    observer?.observe(canvas); frame = requestAnimationFrame(draw);\n    return () => {\n      cancelAnimationFrame(frame); observer?.disconnect(); source?.disconnect(); analyser?.disconnect();\n      if (context) void context.close().catch(() => {});\n      try { drawing!.clearRect(0, 0, canvas.width, canvas.height); } catch { /* Detached canvas. */ }\n    };\n  }, [stream, role]);\n  return <div className={`devic-voice-wave-row devic-voice-wave-row--${role}`}>\n    <span>{role === 'user' ? t('You') : t('Assistant')}</span>\n    <canvas ref={canvasRef} className=\"devic-voice-wave-canvas\" width={640} height={28} role=\"img\"\n      aria-label={role === 'user' ? t('Your audio level') : t('Assistant audio level')} />\n  </div>;\n}\n\n/**\n * The transcript as a teleprompter, matching Active Chat: the newest words sit\n * at the bottom of a fixed-height viewport and everything earlier slides up and\n * fades out through the top edge; below it, one level wave per speaker.\n */\nexport function LiveVoicePrompter({ voice }: LiveVoicePrompterProps) {\n  const t = useTranslations();\n  const viewport = useRef<HTMLDivElement>(null);\n  const text = useRef<HTMLDivElement>(null);\n  useLayoutEffect(() => {\n    const update = () => {\n      if (text.current && viewport.current) text.current.style.transform = `translateY(-${Math.max(0, text.current.scrollHeight - viewport.current.clientHeight)}px)`;\n    };\n    update();\n    const observer = typeof ResizeObserver === 'function' ? new ResizeObserver(update) : undefined;\n    if (viewport.current) observer?.observe(viewport.current);\n    if (text.current) observer?.observe(text.current);\n    return () => observer?.disconnect();\n  }, [voice.transcript]);\n  const placeholder = voice.state === 'connecting' ? t('Connecting voice…') : voice.state === 'closing' ? t('Closing voice…') : voice.state === 'reconnecting' ? t('Restoring voice…') : t('Listening…');\n  return <div className=\"devic-voice-prompter\" aria-label={t('Live voice conversation')}>\n    <div ref={viewport} className=\"devic-voice-prompter-viewport\" aria-live=\"polite\">\n      <div ref={text} className=\"devic-voice-prompter-text\">\n        {voice.transcript.length ? voice.transcript.slice(-4).map((turn, i, turns) =>\n          <p key={i} className={`devic-voice-turn${i === turns.length - 1 ? ' devic-voice-turn--current' : ''}`}>\n            <span>{turn.role === 'user' ? t('You') : t('Assistant')}</span>{turn.text.replace(/\\s+/g, ' ')}\n          </p>) : <p className=\"devic-voice-turn devic-voice-turn--placeholder\">{placeholder}</p>}\n      </div>\n    </div>\n    <div className=\"devic-voice-waves\">\n      <VoiceWave role=\"user\" stream={voice.muted ? undefined : voice.input} />\n      <VoiceWave role=\"assistant\" stream={voice.output} />\n    </div>\n  </div>;\n}\n"],"names":["useTranslations","useRef","useEffect","_jsxs","_jsx","useLayoutEffect"],"mappings":"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"}

package/dist/cjs/hooks/useDevicChat.js

@@ -9,6 +9,7 @@ var usePolling = require('./usePolling.js');
 var useModelInterface = require('./useModelInterface.js');
 var assistantInfo = require('../api/assistantInfo.js');
 var useTranslations = require('../i18n/useTranslations.js');
+var useDevicLiveVoice = require('./useDevicLiveVoice.js');
 
 /**
  * Cadence for the handoff watch, which only waits for the parent thread to
@@ -143,16 +144,12 @@ function useDevicChat(options) {
         onChatCreatedRef.current = onChatCreated;
     });
     // Create API client
-    const clientRef = React.useRef(null);
-    if (!clientRef.current && (apiKey || getTenantSession)) {
-        clientRef.current = new client.DevicApiClient({ apiKey, baseUrl, getTenantSession, onSessionExpired });
-    }
-    // Update client config if it changes
-    React.useEffect(() => {
-        if (clientRef.current && apiKey) {
-            clientRef.current.setConfig({ apiKey, baseUrl });
-        }
-    }, [apiKey, baseUrl]);
+    const client$1 = React.useMemo(() => apiKey || getTenantSession
+        ? new client.DevicApiClient({ apiKey, baseUrl, getTenantSession, onSessionExpired }) : null, [apiKey, baseUrl, getTenantSession, onSessionExpired]);
+    const clientRef = React.useRef(client$1);
+    // A voice controller keeps its original client for teardown. Mutating its
+    // credentials on account switch would close the old session as the new user.
+    clientRef.current = client$1;
     // --- Message queue --------------------------------------------------------
     /**
      * Messages accepted by this conversation that the model has not seen yet.
@@ -264,7 +261,13 @@ function useDevicChat(options) {
     // Load initial chat history if chatUid prop is provided
     // This runs once on mount (or when initialChatUid changes) to fetch existing conversation
     const initialChatLoadedRef = React.useRef(false);
+    const previousInitialChatRef = React.useRef(initialChatUid);
     React.useEffect(() => {
+        if (previousInitialChatRef.current !== initialChatUid) {
+            previousInitialChatRef.current = initialChatUid;
+            initialChatLoadedRef.current = false;
+            void voiceRef.current.stop();
+        }
         if (initialChatUid && clientRef.current && !initialChatLoadedRef.current) {
             initialChatLoadedRef.current = true;
             const loadInitialChat = async () => {
@@ -272,6 +275,8 @@ function useDevicChat(options) {
                 setError(null);
                 try {
                     const history = await clientRef.current.getChatHistory(assistantId, initialChatUid, { tenantId: resolvedTenantId });
+                    if (previousInitialChatRef.current !== initialChatUid)
+                        return;
                     setMessages(history.chatContent);
                     mergeRecalledMemories(history.recalledMemories);
                     mergeCompactions(history.compactions);
@@ -294,6 +299,34 @@ function useDevicChat(options) {
         tools: modelInterfaceTools,
         onToolExecute: onToolCall,
     });
+    const voice = useDevicLiveVoice.useDevicLiveVoice({
+        client: clientRef.current, assistantId, chatUid, enabled: options.liveVoice?.enabled,
+        context: { tenantId: resolvedTenantId, subtenantId: resolvedSubtenantId,
+            metadata: { ...resolvedTenantMetadata, ...(Object.keys(resolvedSubtenantMetadata).length ? { subtenantMetadata: resolvedSubtenantMetadata } : {}) },
+            tags: resolvedTags, tools: toolSchemas, enabledTools, disabledIntegrations },
+        onChatCreated: uid => {
+            if (chatUidRef.current !== uid) {
+                chatUidRef.current = uid;
+                setChatUid(uid);
+                onChatCreatedRef.current?.(uid);
+            }
+            setShouldPoll(true);
+        },
+        onError: error => onErrorRef.current?.(error),
+    });
+    const observingVoice = voice.active && !!chatUid && voice.chatUid === chatUid;
+    const observing = shouldPoll || observingVoice;
+    const voiceRef = React.useRef(voice);
+    voiceRef.current = voice;
+    const wasVoiceActive = React.useRef(false);
+    React.useEffect(() => {
+        if (wasVoiceActive.current && !voice.active && status === 'completed' && !queuedCount)
+            setShouldPoll(false);
+        wasVoiceActive.current = voice.active;
+    }, [voice.active, status, queuedCount]);
+    const handledClientCalls = React.useRef(new Set());
+    const notifiedMessages = React.useRef(new Map());
+    React.useEffect(() => { handledClientCalls.current.clear(); notifiedMessages.current.clear(); }, [chatUid, assistantId]);
     // Pending widget calls awaiting user interaction
     const [pendingWidgetCalls, setPendingWidgetCalls] = React.useState([]);
     const pendingWidgetCallsRef = React.useRef([]);
@@ -302,7 +335,7 @@ function useDevicChat(options) {
     }, [pendingWidgetCalls]);
     // Polling hook - uses callbacks for side effects, return value not needed
     logRef.current.log('[useDevicChat] Render - shouldPoll:', shouldPoll, 'chatUid:', chatUid);
-    usePolling.usePolling(shouldPoll ? chatUid : null, async () => {
+    usePolling.usePolling(observing ? chatUid : null, async () => {
         logRef.current.log('[useDevicChat] fetchFn called, chatUid:', chatUid);
         if (!clientRef.current || !chatUid) {
             throw new Error(t('Cannot poll without client or chatUid'));
@@ -313,10 +346,10 @@ function useDevicChat(options) {
     }, {
         interval: pollingInterval,
         // Only when asked for: the poll is the default until the flag flips.
-        streamFn: streaming
+        streamFn: (streaming || observingVoice)
             ? (onSnapshot, signal, onActivity) => clientRef.current.streamRealtimeHistory(assistantId, chatUid, onSnapshot, signal, onActivity)
             : undefined,
-        enabled: shouldPoll,
+        enabled: observing,
         stopStatuses: [
             'completed',
             'error',
@@ -325,6 +358,13 @@ function useDevicChat(options) {
             'limit_exceeded',
         ],
         onUpdate: async (data) => {
+            if (observingVoice) {
+                setIsLoading(data.status === 'processing' || data.status === 'buffering');
+                setHandedOff(data.status === 'handed_off');
+                setHandedOffSubThreadId(data.status === 'handed_off' ? data.handedOffSubThreadId || null : null);
+                if (data.status === 'error' || data.status === 'limit_exceeded')
+                    void voiceRef.current.stop();
+            }
             setStreamingMessage(data.status === 'processing' ? data.streamingMessage || null : null);
             logRef.current.log('[useDevicChat] onUpdate called, status:', data.status);
             // An assistant message written after something was queued from here is
@@ -415,7 +455,9 @@ function useDevicChat(options) {
             setStatus(data.status);
             // Notify about new messages
             const lastMessage = data.chatHistory[data.chatHistory.length - 1];
-            if (lastMessage && lastMessage.role === 'assistant') {
+            const messageRevision = lastMessage ? JSON.stringify(lastMessage) : '';
+            if (lastMessage && lastMessage.role === 'assistant' && notifiedMessages.current.get(lastMessage.uid) !== messageRevision) {
+                notifiedMessages.current.set(lastMessage.uid, messageRevision);
                 onMessageReceivedRef.current?.(lastMessage);
             }
             // Handle model interface - check for pending tool calls
@@ -424,6 +466,8 @@ function useDevicChat(options) {
             }
         },
         holdOpen: (data) => {
+            if (observingVoice && ['completed', 'waiting_for_tool_response', 'handed_off'].includes(data.status))
+                return true;
             // Only `completed` is worth waiting on. An error, a usage limit or a
             // gate mean something else is going on, and holding the poll open would
             // just be watching a conversation that is not coming back.
@@ -494,9 +538,13 @@ function useDevicChat(options) {
         if (!clientRef.current || !chatUid)
             return;
         // Get pending tool calls
-        const pendingCalls = data.pendingToolCalls || extractPendingToolCalls(data.chatHistory);
+        const pendingCalls = (data.pendingToolCalls || extractPendingToolCalls(data.chatHistory))
+            .filter(call => !handledClientCalls.current.has(call.id));
         if (pendingCalls.length === 0)
             return;
+        // Reserve before awaiting callbacks: repeated snapshots must not execute
+        // side effects twice. An ambiguous tool-response failure is not replayed.
+        pendingCalls.forEach(call => handledClientCalls.current.add(call.id));
         try {
             // Execute client-side tools (partitioned into immediate responses and widget-driven)
             const { responses, widgetCalls } = await handleToolCalls(pendingCalls);
@@ -742,6 +790,7 @@ function useDevicChat(options) {
     ]);
     // Clear chat
     const clearChat = React.useCallback(() => {
+        void voiceRef.current.stop();
         setShouldPoll(false);
         setHandedOff(false);
         setHandedOffSubThreadId(null);
@@ -764,6 +813,7 @@ function useDevicChat(options) {
     }, [resetQueueState]);
     // Load existing chat
     const loadChat = React.useCallback(async (loadChatUid) => {
+        await voiceRef.current.stop();
         if (!clientRef.current) {
             const err = new Error(t('API client not configured'));
             setError(err);
@@ -814,7 +864,7 @@ function useDevicChat(options) {
     // 5s (or the configured cadence) to detect when the parent thread is no
     // longer in handed_off state.
     React.useEffect(() => {
-        if (!handedOff || !chatUid || !clientRef.current)
+        if (observingVoice || !handedOff || !chatUid || !clientRef.current)
             return;
         const pollHandoff = async () => {
             try {
@@ -841,7 +891,7 @@ function useDevicChat(options) {
                 handoffPollRef.current = null;
             }
         };
-    }, [handedOff, chatUid, assistantId, handoffPollingInterval]);
+    }, [handedOff, chatUid, assistantId, handoffPollingInterval, observingVoice]);
     // Called by HandoffSubagentWidget when the subthread reaches a terminal state
     const onHandoffCompleted = React.useCallback(() => {
         logRef.current.log('[useDevicChat] onHandoffCompleted called');
@@ -929,6 +979,7 @@ function useDevicChat(options) {
         };
     }, [assistantId, resetQueueState]);
     return {
+        voice,
         messages: streamingMessage && isLoading ? [...messages, streamingMessage] : messages,
         chatUid,
         isLoading,