update calling tts after chatbot response

src/app/components/Main.tsx

@@ -11,8 +11,8 @@ import {
   streamChat,
   type ChatSource,
 } from "../../services/api";
-import { textToSpeechStreaming } from "../../services/voiceApi";
-import { AudioPlayer } from "../../audio/AudioPlayer";
+import { textToSpeech } from "../../services/voiceApi";
+import { replayAudio } from "../../audio/AudioPlayer";
 import ChatLayout from "./chat/ChatLayout";
 import Sidebar from "./chat/Sidebar";
 import ChatWindow from "./chat/ChatWindow";
@@ -401,59 +401,30 @@ export default function Main() {
     }
   }, [user, ensureRoom]);
 
+  const cancelTtsRef = useRef<(() => void) | null>(null);
+
   const playTtsAudio = useCallback(async (
     ttsText: string,
     onStarted?: () => void,
   ): Promise<{ chunks: ArrayBuffer[]; sampleRate: number }> => {
-    const chunks: ArrayBuffer[] = [];
+    // Stop any in-flight TTS before starting a new one (e.g. rapid re-query).
+    cancelTtsRef.current?.();
+    cancelTtsRef.current = null;
     try {
-      const { sampleRate, stream } = await textToSpeechStreaming(ttsText);
-      const player = new AudioPlayer();
-      player.init(sampleRate);
-      const reader = stream.getReader();
-      let startedNotified = false;
-      // Track the exact moment the AudioContext actually starts playing so the
-      // stop timer is anchored to playback start, not stream-end.
-      let audioStartedAt: number | null = null;
-      const notifyStarted = () => {
-        if (!startedNotified) {
-          startedNotified = true;
-          audioStartedAt = Date.now();
-          onStarted?.();
-        }
-      };
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        if (value && value.byteLength > 0) {
-          const pcm = value.buffer.slice(value.byteOffset, value.byteOffset + value.byteLength) as ArrayBuffer;
-          chunks.push(pcm);
-          player.enqueue(pcm, notifyStarted);
-        }
-      }
-      // Play any remaining buffered audio that didn't reach the threshold (short responses)
-      player.flush(notifyStarted);
-      const totalBytes = chunks.reduce((acc, c) => acc + c.byteLength, 0);
-      const durationMs = (totalBytes / 2 / sampleRate) * 1000;
-      // Wait until audio actually starts, then wait for the full playback duration.
-      // Polling in 10ms steps avoids a fixed large buffer while staying responsive.
-      await new Promise<void>((resolve) => {
-        const check = () => {
-          if (audioStartedAt !== null) {
-            const elapsed = Date.now() - audioStartedAt;
-            const remaining = Math.max(0, durationMs - elapsed) + 150;
-            setTimeout(resolve, remaining);
-          } else {
-            setTimeout(check, 10);
-          }
-        };
-        check();
-      });
-      player.stopImmediately();
-      return { chunks, sampleRate };
+      const { pcm, sampleRate } = await textToSpeech(ttsText);
+      const durationMs = (pcm.byteLength / 2 / sampleRate) * 1000;
+      // Use the same proven playback path as the speaker button: schedule the
+      // full response at once via replayAudio, avoiding all streaming complexity.
+      const cancel = replayAudio([pcm], sampleRate);
+      cancelTtsRef.current = cancel;
+      onStarted?.();
+      await new Promise<void>((resolve) => setTimeout(resolve, durationMs + 150));
+      cancel();
+      cancelTtsRef.current = null;
+      return { chunks: [pcm], sampleRate };
     } catch {
       // TTS failure is non-fatal
-      return { chunks, sampleRate: 24000 };
+      return { chunks: [], sampleRate: 24000 };
     }
   }, []);