fix: resolve inconsistent audio interruption behavior

Author: ylxmf2005

src/renderer/src/hooks/footer/use-text-input.tsx

@@ -10,7 +10,7 @@ export function useTextInput() {
   const [inputText, setInputText] = useState('');
   const [isComposing, setIsComposing] = useState(false);
   const wsContext = useWebSocket();
-  const { aiState, setAiState } = useAiState();
+  const { aiState } = useAiState();
   const { interrupt } = useInterrupt();
   const { appendHumanMessage } = useChatHistory();
   const { stopMic, autoStopMic } = useVAD();
@@ -35,7 +35,6 @@ export function useTextInput() {
       images,
     });
 
-    setAiState('thinking-speaking');
     if (autoStopMic) stopMic();
     setInputText('');
   };

src/renderer/src/hooks/utils/use-audio-task.ts

@@ -7,6 +7,7 @@ import { useAiState } from '@/context/ai-state-context';
 import { useSubtitle } from '@/context/subtitle-context';
 import { useChatHistory } from '@/context/chat-history-context';
 import { audioTaskQueue } from '@/utils/task-queue';
+import { audioManager } from '@/utils/audio-manager';
 import { toaster } from '@/components/ui/toaster';
 import { useWebSocket } from '@/context/websocket-context';
 import { DisplayText } from '@/services/websocket-service';
@@ -45,9 +46,7 @@ export const useAudioTask = () => {
     appendAIMessage,
   });
 
-  // Track current audio and model
-  const currentAudioRef = useRef<HTMLAudioElement | null>(null);
-  const currentModelRef = useRef<Live2DModel | null>(null);
+  // Note: currentAudioRef and currentModelRef are now managed by the global audioManager
 
   stateRef.current = {
     aiState,
@@ -57,42 +56,10 @@ export const useAudioTask = () => {
   };
 
   /**
-   * Stop current audio playback and lip sync
+   * Stop current audio playback and lip sync (delegates to global audioManager)
    */
   const stopCurrentAudioAndLipSync = useCallback(() => {
-    if (currentAudioRef.current) {
-      console.log('Stopping current audio and lip sync');
-      const audio = currentAudioRef.current;
-      audio.pause();
-      audio.src = '';
-      audio.load();
-
-      const model = currentModelRef.current;
-      if (model && model._wavFileHandler) {
-        try {
-          // Release PCM data to stop lip sync calculation in update()
-          model._wavFileHandler.releasePcmData();
-          console.log('Called _wavFileHandler.releasePcmData()');
-
-          // Additional reset of state variables as fallback
-          model._wavFileHandler._lastRms = 0.0;
-          model._wavFileHandler._sampleOffset = 0;
-          model._wavFileHandler._userTimeSeconds = 0.0;
-          console.log('Also reset _lastRms, _sampleOffset, _userTimeSeconds as fallback');
-        } catch (e) {
-          console.error('Error stopping/resetting wavFileHandler:', e);
-        }
-      } else if (model) {
-        console.warn('Current model does not have _wavFileHandler to stop/reset.');
-      } else {
-        console.log('No associated model found to stop lip sync.');
-      }
-
-      currentAudioRef.current = null;
-      currentModelRef.current = null;
-    } else {
-      console.log('No current audio playing to stop.');
-    }
+    audioManager.stopCurrentAudioAndLipSync();
   }, []);
 
   /**
@@ -151,7 +118,6 @@ export const useAudioTask = () => {
           return;
         }
         console.log('Found model for audio playback');
-        currentModelRef.current = model;
 
         if (!model._wavFileHandler) {
           console.warn('Model does not have _wavFileHandler for lip sync');
@@ -182,14 +148,13 @@ export const useAudioTask = () => {
 
         // Setup audio element
         const audio = new Audio(audioDataUrl);
-        currentAudioRef.current = audio;
+        
+        // Register with global audio manager IMMEDIATELY after creating audio
+        audioManager.setCurrentAudio(audio, model);
         let isFinished = false;
 
         const cleanup = () => {
-          if (currentAudioRef.current === audio) {
-            currentAudioRef.current = null;
-            currentModelRef.current = null;
-          }
+          audioManager.clearCurrentAudio(audio);
           if (!isFinished) {
             isFinished = true;
             resolve();
@@ -201,8 +166,8 @@ export const useAudioTask = () => {
 
         audio.addEventListener('canplaythrough', () => {
           // Check for interruption before playback
-          if (stateRef.current.aiState === 'interrupted' || currentAudioRef.current !== audio) {
-            console.warn('Audio playback cancelled due to interruption or new audio');
+          if (stateRef.current.aiState === 'interrupted' || !audioManager.hasCurrentAudio()) {
+            console.warn('Audio playback cancelled due to interruption or audio was stopped');
             cleanup();
             return;
           }
@@ -228,7 +193,7 @@ export const useAudioTask = () => {
               };
             }
 
-            if (currentAudioRef.current === audio) {
+            if (audioManager.hasCurrentAudio()) {
               model._wavFileHandler.start(audioDataUrl);
             } else {
               console.warn('WavFileHandler start skipped - audio was stopped');
@@ -257,8 +222,6 @@ export const useAudioTask = () => {
         type: "error",
         duration: 2000,
       });
-      currentAudioRef.current = null;
-      currentModelRef.current = null;
       resolve();
     }
   });

src/renderer/src/utils/audio-manager.ts

@@ -0,0 +1,79 @@
+/**
+ * Global audio manager for handling audio playback and interruption
+ * This ensures all components share the same audio reference
+ */
+class AudioManager {
+  private currentAudio: HTMLAudioElement | null = null;
+  private currentModel: any | null = null;
+
+  /**
+   * Set the current playing audio
+   */
+  setCurrentAudio(audio: HTMLAudioElement, model: any) {
+    this.currentAudio = audio;
+    this.currentModel = model;
+  }
+
+  /**
+   * Stop current audio playback and lip sync
+   */
+  stopCurrentAudioAndLipSync() {
+    if (this.currentAudio) {
+      console.log('[AudioManager] Stopping current audio and lip sync');
+      const audio = this.currentAudio;
+      
+      // Stop audio playback
+      audio.pause();
+      audio.src = '';
+      audio.load();
+
+      // Stop Live2D lip sync
+      const model = this.currentModel;
+      if (model && model._wavFileHandler) {
+        try {
+          // Release PCM data to stop lip sync calculation in update()
+          model._wavFileHandler.releasePcmData();
+          console.log('[AudioManager] Called _wavFileHandler.releasePcmData()');
+
+          // Additional reset of state variables as fallback
+          model._wavFileHandler._lastRms = 0.0;
+          model._wavFileHandler._sampleOffset = 0;
+          model._wavFileHandler._userTimeSeconds = 0.0;
+          console.log('[AudioManager] Also reset _lastRms, _sampleOffset, _userTimeSeconds as fallback');
+        } catch (e) {
+          console.error('[AudioManager] Error stopping/resetting wavFileHandler:', e);
+        }
+      } else if (model) {
+        console.warn('[AudioManager] Current model does not have _wavFileHandler to stop/reset.');
+      } else {
+        console.log('[AudioManager] No associated model found to stop lip sync.');
+      }
+
+      // Clear references
+      this.currentAudio = null;
+      this.currentModel = null;
+    } else {
+      console.log('[AudioManager] No current audio playing to stop.');
+    }
+  }
+
+  /**
+   * Clear the current audio reference (called when audio ends naturally)
+   */
+  clearCurrentAudio(audio: HTMLAudioElement) {
+    if (this.currentAudio === audio) {
+      this.currentAudio = null;
+      this.currentModel = null;
+    }
+  }
+
+  /**
+   * Check if there's currently playing audio
+   */
+  hasCurrentAudio(): boolean {
+    return this.currentAudio !== null;
+  }
+}
+
+// Export singleton instance
+export const audioManager = new AudioManager();