@alia.onl/sdk 7.2.8 → 8.0.0

package/src/hooks/useAudioLevelMonitor.ts

@@ -1,141 +1,45 @@
 /**
- * Real-time audio level monitoring using Web Audio API.
+ * A voice call's live levels, as React state at ~20fps.
  *
- * Extracts RMS levels from LiveKit audio tracks (local mic + remote agents)
- * and returns them at ~20fps for driving wave animations.
- *
- * Supports multiple remote audio tracks (primary + cohost) by taking
- * the max RMS level across all subscribed remote tracks.
+ * `useVoiceRoom` writes the microphone level (from the recognizer) and the
+ * playback level (from the clip being spoken) into a `VoiceLevelSource`; this
+ * reads them on a clock so a wave can follow them without rendering once per
+ * audio buffer. It used to put Web Audio analysers on a LiveKit room's tracks;
+ * the signature kept its shape — `room` is now the level source `useVoiceRoom`
+ * returns under that name.
  */
 
-import { useState, useEffect, useRef } from 'react';
-import { Room, RoomEvent, Track, type RemoteTrack, type RemoteTrackPublication, type RemoteParticipant } from 'livekit-client';
+import { useState, useEffect } from 'react';
+import type { VoiceLevelSource } from '../lib/voice-levels';
 
-/** Compute RMS (root mean square) amplitude from an AnalyserNode. Returns 0-1. */
-function getRMS(analyser: AnalyserNode, buffer: Float32Array<ArrayBuffer>): number {
-  analyser.getFloatTimeDomainData(buffer);
-  let sum = 0;
-  for (let i = 0; i < buffer.length; i++) sum += buffer[i] * buffer[i];
-  return Math.min(1, Math.sqrt(sum / buffer.length) * 8);
-}
+const POLL_MS = 50;
 
-export function useAudioLevelMonitor(room: Room | null, isConnected: boolean) {
+export function useAudioLevelMonitor(room: VoiceLevelSource | null, isConnected: boolean) {
   const [captureLevel, setCaptureLevel] = useState(0);
   const [playbackLevel, setPlaybackLevel] = useState(0);
-  const cleanupRef = useRef<(() => void) | null>(null);
 
   useEffect(() => {
-    // Tear down previous monitors
-    cleanupRef.current?.();
-    cleanupRef.current = null;
-
     if (!room || !isConnected) {
       setCaptureLevel(0);
       setPlaybackLevel(0);
-      return;
-    }
-
-    // Guard: Web Audio API required
-    if (typeof AudioContext === 'undefined') return;
-
-    const audioCtx = new AudioContext();
-    // Resume AudioContext (may be suspended until user gesture on mobile/WebView)
-    if (audioCtx.state === 'suspended') {
-      audioCtx.resume().catch(() => {});
-    }
-
-    let localAnalyser: AnalyserNode | null = null;
-    let localBuffer: Float32Array<ArrayBuffer> | null = null;
-    const remoteAnalysers = new Map<string, { analyser: AnalyserNode; buffer: Float32Array<ArrayBuffer> }>();
-    let rafId = 0;
-    let disposed = false;
-
-    // ---------- Local mic ----------
-    const localTrack = room.localParticipant?.getTrackPublication(Track.Source.Microphone)?.track;
-    if (localTrack?.mediaStreamTrack) {
-      try {
-        const source = audioCtx.createMediaStreamSource(new MediaStream([localTrack.mediaStreamTrack]));
-        localAnalyser = audioCtx.createAnalyser();
-        localAnalyser.fftSize = 256;
-        source.connect(localAnalyser);
-        localBuffer = new Float32Array(localAnalyser.fftSize);
-      } catch {
-        // MediaStream creation can fail in some environments
-      }
-    }
-
-    // ---------- Remote agent audio (supports multiple tracks) ----------
-    const setupRemoteAnalyser = (mediaStreamTrack: MediaStreamTrack, key: string) => {
-      if (remoteAnalysers.has(key) || disposed) return;
-      try {
-        const source = audioCtx.createMediaStreamSource(new MediaStream([mediaStreamTrack]));
-        const analyser = audioCtx.createAnalyser();
-        analyser.fftSize = 256;
-        source.connect(analyser);
-        const buffer = new Float32Array(analyser.fftSize);
-        remoteAnalysers.set(key, { analyser, buffer });
-      } catch {
-        // Ignore errors
-      }
-    };
-
-    // Check already-subscribed remote tracks
-    for (const [, p] of room.remoteParticipants) {
-      for (const [, pub] of p.audioTrackPublications) {
-        if (pub.track?.mediaStreamTrack) {
-          setupRemoteAnalyser(pub.track.mediaStreamTrack, `${p.identity}-${pub.trackSid}`);
-        }
-      }
+      return undefined;
     }
 
-    // Listen for new remote audio tracks
-    const onTrackSubscribed = (track: RemoteTrack, publication: RemoteTrackPublication, participant: RemoteParticipant) => {
-      if (track.kind === Track.Kind.Audio && track.mediaStreamTrack) {
-        setupRemoteAnalyser(track.mediaStreamTrack, `${participant.identity}-${publication.trackSid}`);
-      }
-    };
-    room.on(RoomEvent.TrackSubscribed, onTrackSubscribed);
-
-    // Clean up stale analysers when tracks are unsubscribed
-    const onTrackUnsubscribed = (_track: RemoteTrack, publication: RemoteTrackPublication, participant: RemoteParticipant) => {
-      const key = `${participant.identity}-${publication.trackSid}`;
-      remoteAnalysers.delete(key);
+    let dirty = true;
+    const unsubscribe = room.subscribe(() => {
+      dirty = true;
+    });
+    const timer = setInterval(() => {
+      if (!dirty) return;
+      dirty = false;
+      setCaptureLevel(room.capture);
+      setPlaybackLevel(room.playback);
+    }, POLL_MS);
+
+    return () => {
+      clearInterval(timer);
+      unsubscribe();
     };
-    room.on(RoomEvent.TrackUnsubscribed, onTrackUnsubscribed);
-
-    // ---------- Poll loop (~20fps) ----------
-    let lastUpdate = 0;
-    const poll = (time: number) => {
-      if (disposed) return;
-      if (time - lastUpdate > 50) {
-        lastUpdate = time;
-        if (localAnalyser && localBuffer) {
-          setCaptureLevel(getRMS(localAnalyser, localBuffer));
-        }
-        // Take max RMS across all remote tracks (primary + cohost)
-        let maxRemoteLevel = 0;
-        for (const [, { analyser, buffer }] of remoteAnalysers) {
-          const level = getRMS(analyser, buffer);
-          if (level > maxRemoteLevel) maxRemoteLevel = level;
-        }
-        setPlaybackLevel(maxRemoteLevel);
-      }
-      rafId = requestAnimationFrame(poll);
-    };
-    rafId = requestAnimationFrame(poll);
-
-    // ---------- Cleanup ----------
-    const dispose = () => {
-      disposed = true;
-      cancelAnimationFrame(rafId);
-      room.off(RoomEvent.TrackSubscribed, onTrackSubscribed);
-      room.off(RoomEvent.TrackUnsubscribed, onTrackUnsubscribed);
-      remoteAnalysers.clear();
-      audioCtx.close().catch(() => {});
-    };
-    cleanupRef.current = dispose;
-
-    return dispose;
   }, [room, isConnected]);
 
   return { captureLevel, playbackLevel };

package/src/hooks/useSpeechToText.ts

@@ -1,23 +1,22 @@
 import { useState, useCallback, useRef, useEffect } from 'react';
-import { errorMessage } from '../lib/utils';
-import {
-  useAudioRecorder,
-  useAudioRecorderState,
-  RecordingPresets,
-  getRecordingPermissionsAsync,
-  setAudioModeAsync,
-} from 'expo-audio';
-import { useOxy } from '@oxy.so/services';
 import { create } from 'zustand';
-import { levelFromDbfs } from '../lib/audio-level';
-
-const API_URL = process.env.EXPO_PUBLIC_ALIA_API_URL ?? 'https://api.alia.onl';
+import {
+  isSpeechRecognitionAvailable,
+  requestSpeechRecognitionPermission,
+  startSpeechRecognition,
+} from '../lib/speech-recognition';
+import type { SpeechRecognitionSession } from '../lib/speech-recognition-types';
+import { speechFailureMessage } from '../lib/speech-messages';
+import { defaultSpeechLanguage } from '../lib/speech-language';
 
 // ============== OPTIONS ==============
 
 export interface UseSTTOptions {
-  apiUrl?: string;
-  accessToken?: string;
+  /**
+   * Language to recognize, as a BCP-47 tag (`es-ES`). Defaults to the
+   * platform's own language. The Alia app passes its UI locale.
+   */
+  lang?: string;
 }
 
 // ============== INLINE STT STORE ==============
@@ -40,169 +39,185 @@ export const useSTTStore = create<STTStoreState>((set) => ({
 
 type STTState = 'idle' | 'recording' | 'transcribing';
 
-const METERING_PRESET = { ...RecordingPresets.HIGH_QUALITY, isMeteringEnabled: true };
-
+/** How long `stopAndTranscribe` waits for the engine's final words. */
+const FINAL_RESULT_TIMEOUT_MS = 2_000;
+
+/**
+ * How many times one dictation may quietly re-open the recognizer.
+ *
+ * Browsers end a continuous session on their own — Chrome after a stretch of
+ * silence or about a minute of audio — and the person is still looking at a
+ * dictation bar that says it is listening. Re-opening keeps what was already
+ * heard and carries on. The cap is what stops an engine that ends the instant
+ * it starts from spinning.
+ */
+const MAX_SILENT_RESTARTS = 20;
+
+/**
+ * Dictation, recognized on the device.
+ *
+ * The public shape is the one the recorder-and-upload version had —
+ * `startRecording`, `stopAndTranscribe`, `cancel`, the three states and
+ * `useSTTStore`'s metering — so the composer and the dictation bar did not
+ * change. What changed underneath: words arrive while the person speaks
+ * (`speech-recognition.ts` on web, `.native.ts` on iOS/Android), so
+ * `transcribing` is now the moment between "stop" and the engine's final
+ * result rather than an upload, and there is no transcription endpoint.
+ */
 export function useSpeechToText(options: UseSTTOptions = {}) {
-  const apiUrl = options.apiUrl || API_URL;
+  const lang = options.lang ?? defaultSpeechLanguage();
 
   const [state, setState] = useState<STTState>('idle');
   const [error, setError] = useState<string | null>(null);
-  const isRecordingRef = useRef(false);
-  const { oxyServices } = useOxy();
-
-  const audioRecorder = useAudioRecorder(METERING_PRESET);
-  const recorderState = useAudioRecorderState(audioRecorder, 100);
-
-  const sttStore = useSTTStore;
-
-  // ============== AUTH ==============
-
-  const getToken = useCallback((): string | null => {
-    if (options.accessToken) return options.accessToken;
-    return oxyServices.httpService.getAccessToken();
-  }, [options.accessToken, oxyServices]);
-
-  // Push metering to store while recording (with epsilon guard to avoid thrashing subscribers)
+  const [isSupported] = useState(isSpeechRecognitionAvailable);
+
+  const stateRef = useRef<STTState>('idle');
+  const sessionRef = useRef<SpeechRecognitionSession | null>(null);
+  /** Text from sessions that already ended during this dictation. */
+  const earlierTextRef = useRef('');
+  /** Text from the live session. */
+  const currentTextRef = useRef('');
+  const restartsRef = useRef(0);
+  const endWaitersRef = useRef<Array<() => void>>([]);
   const lastMeteringRef = useRef(0);
-  useEffect(() => {
-    if (state === 'recording') {
-      let target: number;
-      if (recorderState.metering != null) {
-        // The same curve read-aloud playback uses, so one background answers
-        // both the same way — see `lib/audio-level.ts`.
-        target = levelFromDbfs(recorderState.metering);
-      } else {
-        // Metering unavailable — simulate gentle activity
-        target = 0.12 + Math.random() * 0.18;
-      }
-      if (Math.abs(target - lastMeteringRef.current) >= 0.02) {
-        lastMeteringRef.current = target;
-        sttStore.getState().setMetering(target);
-      }
-    }
-  }, [state, recorderState.metering, recorderState.durationMillis]);
+  const mountedRef = useRef(true);
+
+  const setPhase = useCallback((next: STTState) => {
+    stateRef.current = next;
+    if (mountedRef.current) setState(next);
+  }, []);
 
   // Sync recording state to store + reset metering on stop
   useEffect(() => {
-    sttStore.getState().setRecording(state === 'recording');
+    useSTTStore.getState().setRecording(state === 'recording');
     if (state !== 'recording') {
       lastMeteringRef.current = 0;
-      sttStore.getState().setMetering(0);
+      useSTTStore.getState().setMetering(0);
     }
   }, [state]);
 
+  const fullText = (): string =>
+    `${earlierTextRef.current} ${currentTextRef.current}`.replace(/\s+/g, ' ').trim();
+
+  const openSession = useCallback(() => {
+    currentTextRef.current = '';
+    let failed = false;
+    sessionRef.current = startSpeechRecognition(
+      { lang },
+      {
+        onResult: ({ transcript }) => {
+          currentTextRef.current = transcript;
+        },
+        onLevel: (level) => {
+          if (stateRef.current !== 'recording') return;
+          // Epsilon guard: quiet should not thrash the store's subscribers.
+          if (Math.abs(level - lastMeteringRef.current) < 0.02) return;
+          lastMeteringRef.current = level;
+          useSTTStore.getState().setMetering(level);
+        },
+        onError: (failure) => {
+          const message = speechFailureMessage(failure);
+          if (message === null) return;
+          failed = true;
+          if (mountedRef.current) setError(message);
+        },
+        onEnd: () => {
+          sessionRef.current = null;
+          earlierTextRef.current = fullText();
+          currentTextRef.current = '';
+          const waiters = endWaitersRef.current;
+          endWaitersRef.current = [];
+          for (const resolve of waiters) resolve();
+          if (waiters.length > 0) return;
+
+          // The engine ended on its own while the person is still dictating.
+          if (stateRef.current !== 'recording') return;
+          if (failed || restartsRef.current >= MAX_SILENT_RESTARTS) {
+            setPhase('idle');
+            return;
+          }
+          restartsRef.current += 1;
+          openSession();
+        },
+      },
+    );
+  }, [lang, setPhase]);
+
   const startRecording = useCallback(async () => {
-    try {
-      setError(null);
-
-      // getRecordingPermissionsAsync consults the Permissions API first (and
-      // only falls back to a real getUserMedia prompt when undetermined), so an
-      // already-granted permission never gets misreported as denied when the
-      // device itself is missing/busy — that failure surfaces from
-      // prepareToRecordAsync below with an accurate message.
-      const permStatus = await getRecordingPermissionsAsync();
-      if (!permStatus.granted) {
-        setError('Microphone permission required');
-        return;
-      }
-
-      setState('recording');
-
-      await setAudioModeAsync({
-        allowsRecording: true,
-        playsInSilentMode: true,
-      });
+    if (stateRef.current !== 'idle') return;
+    setError(null);
 
-      await audioRecorder.prepareToRecordAsync();
-      audioRecorder.record();
-      isRecordingRef.current = true;
-    } catch (e: unknown) {
-      const name = e instanceof Error ? e.name : '';
-      if (name === 'NotFoundError' || name === 'OverconstrainedError') {
-        setError('No microphone found — check your input devices');
-      } else if (name === 'NotAllowedError') {
-        setError('Microphone permission required');
-      } else if (name === 'NotReadableError') {
-        setError('Microphone is in use by another application');
-      } else {
-        setError('Failed to start recording');
-      }
-      setState('idle');
-      isRecordingRef.current = false;
+    if (!isSpeechRecognitionAvailable()) {
+      setError(speechFailureMessage({ code: 'unsupported' }));
+      return;
     }
-  }, [audioRecorder]);
 
-  const stopAndTranscribe = useCallback(async (): Promise<string | null> => {
-    if (!isRecordingRef.current) return null;
-
-    try {
-      setState('transcribing');
-      isRecordingRef.current = false;
-      await audioRecorder.stop();
-      const uri = audioRecorder.uri;
-
-      if (!uri) {
-        setState('idle');
-        return null;
-      }
-
-      // Read audio file as base64
-      const response = await fetch(uri);
-      const blob = await response.blob();
-      // Detect actual MIME type (web records webm, native records m4a)
-      const detectedFormat = blob.type?.split(';')[0] || 'audio/m4a';
-      const base64 = await new Promise<string>((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => {
-          const result = reader.result as string;
-          resolve(result.split(',')[1]);
-        };
-        reader.onerror = reject;
-        reader.readAsDataURL(blob);
-      });
+    // Claim the state before the first await so a double tap cannot open two.
+    setPhase('recording');
+    const refusal = await requestSpeechRecognitionPermission();
+    if ((stateRef.current as STTState) !== 'recording') return; // cancelled while asking
+    if (refusal !== null) {
+      setError(speechFailureMessage(refusal));
+      setPhase('idle');
+      return;
+    }
 
-      // Send to transcription API
-      const token = getToken();
-      const transcribeResponse = await fetch(`${apiUrl}/v1/voice/transcribe`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify({
-          audio: base64,
-          format: detectedFormat,
-        }),
+    earlierTextRef.current = '';
+    currentTextRef.current = '';
+    restartsRef.current = 0;
+    openSession();
+  }, [openSession, setPhase]);
+
+  const waitForEnd = useCallback((): Promise<void> => {
+    if (sessionRef.current === null) return Promise.resolve();
+    return new Promise<void>((resolve) => {
+      const timer = setTimeout(() => {
+        sessionRef.current?.abort();
+        resolve();
+      }, FINAL_RESULT_TIMEOUT_MS);
+      endWaitersRef.current.push(() => {
+        clearTimeout(timer);
+        resolve();
       });
+    });
+  }, []);
 
-      if (!transcribeResponse.ok) {
-        const errorData = await transcribeResponse.json().catch(() => ({}));
-        throw new Error(errorData.error || 'Transcription failed');
-      }
-
-      const result = await transcribeResponse.json() as { text: string };
-      setState('idle');
-      return result.text || null;
-    } catch (e: unknown) {
-      console.error('[STT] Transcription error:', e);
-      setError(errorMessage(e, 'Transcription failed'));
-      setState('idle');
-      return null;
-    }
-  }, [audioRecorder, getToken, apiUrl]);
+  const stopAndTranscribe = useCallback(async (): Promise<string | null> => {
+    if (stateRef.current !== 'recording') return null;
+    setPhase('transcribing');
+    const ended = waitForEnd();
+    sessionRef.current?.stop();
+    await ended;
+    const text = fullText();
+    earlierTextRef.current = '';
+    currentTextRef.current = '';
+    setPhase('idle');
+    return text === '' ? null : text;
+  }, [setPhase, waitForEnd]);
 
   const cancel = useCallback(() => {
-    if (isRecordingRef.current) {
-      isRecordingRef.current = false;
-      Promise.resolve(audioRecorder.stop()).catch(() => {});
-    }
-    setState('idle');
+    const session = sessionRef.current;
+    setPhase('idle');
+    earlierTextRef.current = '';
+    currentTextRef.current = '';
+    session?.abort();
     setError(null);
-  }, [audioRecorder]);
+  }, [setPhase]);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      stateRef.current = 'idle';
+      sessionRef.current?.abort();
+    };
+  }, []);
 
   return {
     state,
     error,
+    /** False where the platform cannot recognize speech at all (Firefox). */
+    isSupported,
     startRecording,
     stopAndTranscribe,
     cancel,

package/src/hooks/useTTS.ts

@@ -6,6 +6,7 @@ import { errorMessage } from '../lib/utils';
 import { create } from 'zustand';
 import { createAudioLevelMeter } from '../lib/audio-level';
 import { PREFERRED_VOICE_MODEL_ID } from '../lib/config';
+import { requestSpeechClip } from '../lib/speech-synthesis';
 
 const API_URL = process.env.EXPO_PUBLIC_ALIA_API_URL ?? 'https://api.alia.onl';
 
@@ -105,6 +106,7 @@ export function useTTS(options: UseTTSOptions = {}) {
   const reset = useTTSStore((s) => s.reset);
 
   const playerRef = useRef<AudioPlayer | null>(null);
+  const requestRef = useRef<AbortController | null>(null);
 
   // ============== AUTH ==============
 
@@ -114,7 +116,7 @@ export function useTTS(options: UseTTSOptions = {}) {
   }, [options.accessToken, oxyServices]);
 
   const getTTSVoice = useCallback(() => {
-    return voicePref === 'male' ? 'echo' : 'nova';
+    return voicePref === 'male' ? 'male' : 'female';
   }, [voicePref]);
 
   const getTTSSpeed = useCallback(() => {
@@ -133,6 +135,8 @@ export function useTTS(options: UseTTSOptions = {}) {
   }, []);
 
   const stop = useCallback(() => {
+    requestRef.current?.abort();
+    requestRef.current = null;
     releasePlayer();
     reset();
   }, [reset, releasePlayer]);
@@ -150,6 +154,7 @@ export function useTTS(options: UseTTSOptions = {}) {
   const playFromUrl = useCallback((
     audioUrl: string,
     _messageId: string,
+    signal: AbortSignal,
     onUnplayable?: () => void,
   ) => {
     releasePlayer();
@@ -157,6 +162,7 @@ export function useTTS(options: UseTTSOptions = {}) {
     (async () => {
       try {
         const { createAudioPlayer } = await import('expo-audio');
+        if (signal.aborted) return;
         /**
          * `crossOrigin` is web-only and ignored elsewhere, and it is what makes
          * the waveform readable there: a browser will not let an `AnalyserNode`
@@ -199,6 +205,7 @@ export function useTTS(options: UseTTSOptions = {}) {
         });
 
         player.addListener('playbackStatusUpdate', (status: AudioStatus) => {
+          if (signal.aborted || playerRef.current !== player) return;
           if (status.error) {
             releasePlayer();
             if (onUnplayable) {
@@ -217,6 +224,7 @@ export function useTTS(options: UseTTSOptions = {}) {
         player.play();
         setPlaybackState('playing');
       } catch {
+        if (signal.aborted) return;
         if (onUnplayable) {
           onUnplayable();
           return;
@@ -256,6 +264,8 @@ export function useTTS(options: UseTTSOptions = {}) {
       stop();
     }
 
+    const controller = new AbortController();
+    requestRef.current = controller;
     try {
       setActiveMessage(messageId);
       setPlaybackState('loading');
@@ -274,32 +284,18 @@ export function useTTS(options: UseTTSOptions = {}) {
           throw new Error('Not authenticated');
         }
 
-        const response = await fetch(`${apiUrl}/v1/audio/speech`, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${token}`,
-          },
-          body: JSON.stringify({
-            model: voiceModel,
-            input: text,
-            voice: getTTSVoice(),
-            speed: getTTSSpeed(),
-            conversationId,
-            messageId,
-          }),
+        const audioUrl = await requestSpeechClip({
+          apiUrl,
+          token,
+          model: voiceModel,
+          input: text,
+          voice: getTTSVoice(),
+          speed: getTTSSpeed(),
+          conversationId,
+          messageId,
+          signal: controller.signal,
         });
-
-        if (!response.ok) {
-          if (response.status === 504) {
-            throw new Error('Request timed out — please try again');
-          }
-          const errData = await response.json().catch(() => ({}));
-          throw new Error(errData.error?.message || errData.error || 'TTS failed');
-        }
-
-        const data = await response.json();
-        playFromUrl(data.audioUrl, messageId);
+        playFromUrl(audioUrl, messageId, controller.signal);
       };
 
       /**
@@ -311,22 +307,26 @@ export function useTTS(options: UseTTSOptions = {}) {
        * forever, and the person notices nothing.
        */
       if (audioUrl) {
-        playFromUrl(audioUrl, messageId, () => {
-          void synthesize().catch((e: unknown) => setError(errorMessage(e, 'Failed to read aloud')));
+        playFromUrl(audioUrl, messageId, controller.signal, () => {
+          void synthesize().catch((e: unknown) => {
+            if (!controller.signal.aborted) setError(errorMessage(e, 'Failed to read aloud'));
+          });
         });
         return;
       }
 
       await synthesize();
     } catch (e: unknown) {
+      if (controller.signal.aborted) return;
       console.error('[TTS] Error:', e);
       setError(errorMessage(e, 'Failed to read aloud'));
     }
-  }, [getToken, apiUrl, getTTSVoice, getTTSSpeed, stop, playFromUrl, setActiveMessage, setPlaybackState, setError]);
+  }, [getToken, apiUrl, voiceModel, getTTSVoice, getTTSSpeed, stop, playFromUrl, setActiveMessage, setPlaybackState, setError]);
 
   // Cleanup on unmount
   useEffect(() => {
     return () => {
+      requestRef.current?.abort();
       releasePlayer();
     };
   }, []);