closest so far!

ai_animation/src/config.ts

@@ -5,6 +5,12 @@ export const config = {
   // Default speed in milliseconds for animations and transitions
   playbackSpeed: 500,
   
+  // Streaming mode specific timing
+  get streamingPlaybackSpeed(): number {
+    const isStreamingMode = import.meta.env.VITE_STREAMING_MODE === 'True' || import.meta.env.VITE_STREAMING_MODE === 'true';
+    return isStreamingMode ? 1000 : this.playbackSpeed; // Slower for streaming
+  },
+
   // Whether to enable debug mode (faster animations, more console logging)
   isDebugMode: import.meta.env.VITE_DEBUG_MODE === 'true' || import.meta.env.VITE_DEBUG_MODE === 'True',
 
@@ -59,7 +65,7 @@ export const config = {
    * Get effective playback speed (minimal if instant mode, normal speed otherwise)
    */
   get effectivePlaybackSpeed(): number {
-    return this.isInstantMode ? 10 : this.playbackSpeed;
+    return this.isInstantMode ? 10 : this.streamingPlaybackSpeed;
   },
 
   // Animation timing configuration

ai_animation/src/domElements/chatWindows.ts

@@ -231,7 +231,10 @@ export function updateChatWindows(phase: any, stepMessages = false) {
         index++; // Only increment after animation completes
 
         // Schedule next message with proper delay
-        setTimeout(showNext, config.effectivePlaybackSpeed / 2);
+        // In streaming mode, add extra delay to prevent message overlap
+        const isStreamingMode = import.meta.env.VITE_STREAMING_MODE === 'True' || import.meta.env.VITE_STREAMING_MODE === 'true';
+        const messageDelay = isStreamingMode ? config.effectivePlaybackSpeed : config.effectivePlaybackSpeed / 2;
+        setTimeout(showNext, messageDelay);
       };
 
       // Add the message with word animation
@@ -394,7 +397,10 @@ function animateMessageWords(message: string, contentSpanId: string, targetPower
     // Calculate delay based on word length and playback speed
     // Longer words get slightly longer display time
     const wordLength = words[wordIndex - 1].length;
-    const delay = Math.max(30, Math.min(120, config.effectivePlaybackSpeed / 10 * (wordLength / 4)));
+    // In streaming mode, use a more consistent delay to prevent overlap
+    const isStreamingMode = import.meta.env.VITE_STREAMING_MODE === 'True' || import.meta.env.VITE_STREAMING_MODE === 'true';
+    const baseDelay = isStreamingMode ? 150 : config.effectivePlaybackSpeed / 10;
+    const delay = Math.max(50, Math.min(200, baseDelay * (wordLength / 4)));
     setTimeout(addNextWord, delay);
 
     // Scroll to ensure newest content is visible

ai_animation/src/main.ts

@@ -79,7 +79,7 @@ function initScene() {
       if (isStreamingMode) {
         setTimeout(() => {
           togglePlayback()
-        }, 2000)
+        }, 5000) // Increased delay to 5 seconds for Chrome to stabilize
       }
     })
   }).catch(err => {

ai_animation/src/phase.ts

@@ -279,28 +279,35 @@ export function advanceToNextPhase() {
     console.log(`Processing phase transition for ${currentPhase.name}`);
   }
 
+  // In streaming mode, add extra delay before speech to ensure phase is fully displayed
+  const isStreamingMode = import.meta.env.VITE_STREAMING_MODE === 'True' || import.meta.env.VITE_STREAMING_MODE === 'true';
+  const speechDelay = isStreamingMode ? 2000 : 0; // 2 second delay in streaming mode
+  
   // First show summary if available
   if (currentPhase.summary && currentPhase.summary.trim() !== '') {
-    // Speak the summary and advance after
+    // Delay speech in streaming mode
-    if (!gameState.isSpeaking) {
+    setTimeout(() => {
-      speakSummary(currentPhase.summary)
+      // Speak the summary and advance after
-        .then(() => {
+      if (!gameState.isSpeaking) {
-          console.log("Speech completed successfully");
+        speakSummary(currentPhase.summary)
-          if (gameState.isPlaying) {
+          .then(() => {
-            nextPhase();
+            console.log("Speech completed successfully");
-          }
+            if (gameState.isPlaying) {
-        })
+              nextPhase();
-        .catch((error) => {
+            }
-          console.error("Speech failed with error:", error);
+          })
-          if (gameState.isPlaying) {
+          .catch((error) => {
-            nextPhase();
+            console.error("Speech failed with error:", error);
-          }
+            if (gameState.isPlaying) {
-        }).finally(() => {
+              nextPhase();
-
+            }
-        });
+          }).finally(() => {
-    } else {
+            // Any cleanup code here
-      console.error("Attempted to start speaking when already speaking...")
+          });
-    }
+      } else {
+        console.error("Attempted to start speaking when already speaking...");
+      }
+    }, speechDelay);
   } else {
     console.log("No summary available, skipping speech");
     // No summary to speak, advance immediately