Improve deployment safety and chat reliability

frontend/js/voice.js

@@ -14,6 +14,9 @@ class VoiceManager {
         this.browserSTTSupported = false;
         this.apiAvailable = false;
         this.onProcessing = null; // New callback for "Transcribing..." state
+        this.currentAudio = null;      // clip currently playing, if any
+        this._resolvePlayback = null;  // settles whoever awaits playAudio()
+        this._resetPlayerUI = null;    // puts that clip's player back to rest
     }
 
     async init() {
@@ -98,10 +101,18 @@ class VoiceManager {
         // if hardware access fails or takes time.
 
         if (this.mode === 'api') {
+            if (typeof MediaRecorder === 'undefined') {
+                showToast('This browser cannot record audio.', 'error');
+                return;
+            }
+
             try {
                 const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                 this.audioChunks = [];
-                this.mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });
+
+                // Safari/iOS has no webm — let it fall through to mp4
+                const mimeType = VoiceManager.pickMimeType();
+                this.mediaRecorder = new MediaRecorder(stream, mimeType ? { mimeType } : undefined);
 
                 this.mediaRecorder.ondataavailable = (e) => {
                     if (e.data.size > 0) this.audioChunks.push(e.data);
@@ -109,7 +120,11 @@ class VoiceManager {
 
                 this.mediaRecorder.onstop = async () => {
                     stream.getTracks().forEach(t => t.stop());
-                    const blob = new Blob(this.audioChunks, { type: 'audio/webm' });
+                    // Use what the recorder produced, not what we asked for.
+                    // A few old WebViews report an empty mimeType even though
+                    // they recorded something else — webm is the best guess left.
+                    const type = this.mediaRecorder.mimeType || mimeType || 'audio/webm';
+                    const blob = new Blob(this.audioChunks, { type });
                     await this._transcribeAPI(blob);
                 };
 
@@ -124,7 +139,12 @@ class VoiceManager {
 
             } catch (e) {
                 console.error('[Voice] Mic access error:', e);
-                showToast('Microphone access denied or error', 'error');
+                showToast(
+                    e.name === 'NotAllowedError'
+                        ? 'Microphone access denied. Allow it in browser settings.'
+                        : `Could not start recording: ${e.message || e.name}`,
+                    'error'
+                );
                 this.isRecording = false;
                 if (this.onStateChange) this.onStateChange(false);
             }
@@ -175,7 +195,9 @@ class VoiceManager {
 
         try {
             const formData = new FormData();
-            formData.append('audio', blob, 'recording.webm');
+            // The OpenAI SDK infers the audio format from this filename, so it
+            // has to match what the recorder actually produced.
+            formData.append('audio', blob, `recording.${VoiceManager.extensionFor(blob.type)}`);
 
             const response = await api('/voice/transcribe', {
                 method: 'POST',
@@ -204,13 +226,15 @@ class VoiceManager {
      * Fetch TTS audio blob for text (API only).
      * Returns audio URL or null.
      */
-    async fetchAudio(text) {
+    async fetchAudio(text, signal) {
         if (!this.apiAvailable) return null;
 
         const clean = VoiceManager.stripMarkdown(text);
         try {
-            const response = await api(`/voice/synthesize?text=${encodeURIComponent(clean)}`, {
+            const response = await api('/voice/synthesize', {
                 method: 'POST',
+                body: JSON.stringify({ text: clean }),
+                signal,
             });
 
             if (response?.ok) {
@@ -235,7 +259,13 @@ class VoiceManager {
     async playAudio(audioUrl, containerEl) {
         if (!audioUrl) return;
 
+        this.stopPlayback();   // only one clip at a time
+
         const audio = new Audio(audioUrl);
+        this.currentAudio = audio;
+
+        // Settles on end, on error, or when stopPlayback() is called
+        const finished = new Promise(resolve => { this._resolvePlayback = resolve; });
 
         // Visual feedback — avatar pulse
         const avatarContainer = document.querySelector('.avatar-container');
@@ -268,6 +298,15 @@ class VoiceManager {
             containerEl.appendChild(player);
         }
 
+        // Lets stopPlayback() return this player to a resting state
+        const resetPlayerUI = () => {
+            playBtn.classList.remove('playing');
+            playBtn.innerHTML = VoiceManager._playIcon();
+            playBtn.title = 'Replay';
+            fill.style.width = '0%';
+        };
+        this._resetPlayerUI = resetPlayerUI;
+
         // ── Helpers ───────────────────────────────────────────────────
         function fmt(s) {
             if (!isFinite(s)) return '0:00';
@@ -301,6 +340,10 @@ class VoiceManager {
         // Play/pause toggle
         playBtn.addEventListener('click', () => {
             if (audio.paused) {
+                // Register the replay, otherwise stopPlayback() can't reach it
+                this.stopPlayback();
+                this.currentAudio = audio;
+                this._resetPlayerUI = resetPlayerUI;
                 audio.play();
                 playBtn.classList.add('playing');
                 playBtn.innerHTML = VoiceManager._pauseIcon();
@@ -308,6 +351,10 @@ class VoiceManager {
                 if (avatarContainer) avatarContainer.classList.add('speaking');
             } else {
                 audio.pause();
+                if (this.currentAudio === audio) {
+                    this.currentAudio = null;
+                    this._resetPlayerUI = null;
+                }
                 playBtn.classList.remove('playing');
                 playBtn.innerHTML = VoiceManager._playIcon();
                 playBtn.title = 'Play';
@@ -317,38 +364,78 @@ class VoiceManager {
 
         // ── Playback ──────────────────────────────────────────────────
         try {
-            // Wait for audio to be fully buffered before playing
-            await new Promise((resolve, reject) => {
-                audio.addEventListener('canplaythrough', resolve, { once: true });
-                audio.addEventListener('error', reject, { once: true });
-                audio.load(); // Explicitly trigger loading
-            });
+            // Wait for audio to be fully buffered before playing — but give up
+            // if stopPlayback() cuts in while it is still loading
+            await Promise.race([
+                new Promise((resolve, reject) => {
+                    audio.addEventListener('canplaythrough', resolve, { once: true });
+                    audio.addEventListener('error', reject, { once: true });
+                    audio.load(); // Explicitly trigger loading
+                }),
+                finished,
+            ]);
+
+            if (this.currentAudio !== audio) return;   // stopped while loading
+
             audio.currentTime = 0; // Ensure we start from the very beginning
             await audio.play();
-            return new Promise(resolve => {
-                audio.onended = () => {
-                    if (avatarContainer) avatarContainer.classList.remove('speaking');
-                    playBtn.classList.remove('playing');
-                    playBtn.innerHTML = VoiceManager._playIcon();
-                    playBtn.title = 'Replay';
-                    fill.style.width = '100%';
-                    // Reset to beginning for replay
-                    audio.currentTime = 0;
-                    resolve();
-                };
-                audio.onerror = () => {
-                    if (avatarContainer) avatarContainer.classList.remove('speaking');
-                    resolve();
-                };
-            });
+
+            audio.onended = () => {
+                if (avatarContainer) avatarContainer.classList.remove('speaking');
+                playBtn.classList.remove('playing');
+                playBtn.innerHTML = VoiceManager._playIcon();
+                playBtn.title = 'Replay';
+                fill.style.width = '100%';
+                // Reset to beginning for replay
+                audio.currentTime = 0;
+                this._settlePlayback();
+            };
+            audio.onerror = () => {
+                if (avatarContainer) avatarContainer.classList.remove('speaking');
+                this._settlePlayback();
+            };
+            return finished;
         } catch (e) {
             console.error('Playback failed', e);
             if (avatarContainer) avatarContainer.classList.remove('speaking');
             playBtn.classList.remove('playing');
             playBtn.innerHTML = VoiceManager._playIcon();
+            this._settlePlayback();
         }
     }
 
+    /**
+     * Stop whatever is playing right now. Without this the Audio object is
+     * unreachable once playAudio() returns, so removing the player from the
+     * DOM leaves a detached clip still talking.
+     */
+    stopPlayback() {
+        const audio = this.currentAudio;
+        if (audio) {
+            audio.pause();
+            try { audio.currentTime = 0; } catch (e) { /* not seekable yet */ }
+        }
+
+        // Leave onended attached so a later replay still resets its own player
+        const resetUI = this._resetPlayerUI;
+        this._resetPlayerUI = null;
+        if (resetUI) resetUI();
+
+        const avatarContainer = document.querySelector('.avatar-container');
+        if (avatarContainer) avatarContainer.classList.remove('speaking');
+
+        this._settlePlayback();
+    }
+
+    /** Release anyone awaiting playAudio() and forget the current clip. */
+    _settlePlayback() {
+        this.currentAudio = null;
+        this._resetPlayerUI = null;
+        const resolve = this._resolvePlayback;
+        this._resolvePlayback = null;
+        if (resolve) resolve();
+    }
+
     // ── SVG icons (inline, no external deps) ──────────────────────────
     static _playIcon() {
         return `<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="6,3 20,12 6,21"/></svg>`;
@@ -367,6 +454,31 @@ class VoiceManager {
         if (url) await this.playAudio(url);
     }
 
+    /**
+     * Pick a recording format this browser supports.
+     * Chrome/Edge/Firefox give webm; Safari and iOS only do mp4.
+     * Returns '' to let the browser choose its own default.
+     */
+    static pickMimeType() {
+        const candidates = [
+            'audio/webm;codecs=opus',
+            'audio/webm',
+            'audio/mp4',
+            'audio/ogg;codecs=opus',
+        ];
+
+        if (typeof MediaRecorder === 'undefined' || !MediaRecorder.isTypeSupported) return '';
+        return candidates.find(type => MediaRecorder.isTypeSupported(type)) || '';
+    }
+
+    /** File extension matching a recorded blob's MIME type. */
+    static extensionFor(mimeType = '') {
+        if (mimeType.includes('mp4')) return 'mp4';
+        if (mimeType.includes('mpeg')) return 'mp3';
+        if (mimeType.includes('ogg')) return 'ogg';
+        return 'webm';
+    }
+
     /**
      * Strip markdown formatting from text so TTS reads naturally.
      */