Update web client

examples/web_client.html

@@ -396,6 +396,8 @@
       let playbackSources = [];
       let interimUserEl = null;
       let interimAiEl = null;
+      let interimUserText = "";
+      let interimAiText = "";
 
       const targetSampleRate = 16000;
 
@@ -437,6 +439,8 @@
           if (el) el.remove();
           if (isAi) interimAiEl = null;
           else interimUserEl = null;
+          if (isAi) interimAiText = "";
+          else interimUserText = "";
           return;
         }
         if (!el) {
@@ -450,6 +454,17 @@
         chatHistory.scrollTop = chatHistory.scrollHeight;
       }
 
+      function stopPlayback() {
+        discardAudio = true;
+        playbackTime = audioCtx ? audioCtx.currentTime : 0;
+        playbackSources.forEach((s) => {
+          try {
+            s.stop();
+          } catch (err) {}
+        });
+        playbackSources = [];
+      }
+
       function setStatus(connected, detail) {
         statusDot.classList.toggle("on", connected);
         statusText.textContent = connected ? "Connected" : "Disconnected";
@@ -581,7 +596,8 @@
             setInterim("You", "");
             addChat("You", event.text);
           } else if (event.text) {
-            setInterim("You", event.text);
+            interimUserText += event.text;
+            setInterim("You", interimUserText);
           }
         }
         if (type === "llmResponse") {
@@ -589,33 +605,21 @@
             setInterim("AI", "");
             addChat("AI", event.text);
           } else if (event.text) {
-            setInterim("AI", event.text);
+            interimAiText += event.text;
+            setInterim("AI", interimAiText);
           }
         }
         if (type === "trackStart") {
+          // New bot audio: stop any previous playback to avoid overlap
+          stopPlayback();
           discardAudio = false;
-          playbackTime = audioCtx ? audioCtx.currentTime : 0;
         }
         if (type === "speaking") {
           // User started speaking: clear any in-flight audio to avoid overlap
-          discardAudio = true;
+          stopPlayback();
-          playbackTime = audioCtx ? audioCtx.currentTime : 0;
-          playbackSources.forEach((s) => {
-            try {
-              s.stop();
-            } catch (err) {}
-          });
-          playbackSources = [];
         }
         if (type === "interrupt") {
-          discardAudio = true;
+          stopPlayback();
-          playbackTime = audioCtx ? audioCtx.currentTime : 0;
-          playbackSources.forEach((s) => {
-            try {
-              s.stop();
-            } catch (err) {}
-          });
-          playbackSources = [];
         }
       }