fix

src/app/chat/chat.component.html

@@ -73,109 +73,110 @@
       </div>
 
       <!-- AI message -->
-      <div *ngIf="message.from === 'ai' && !message.pending" class="message-wrapper ai">
-        <div class="profile-pic">
-          <img src="assets/images/chat/natasha.png" alt="AI" />
-        </div>
-
-        <div class="message structured-response">
-          <div [innerHTML]="formatStructuredResponse(message.text)"></div>
-
-          <!-- Follow-ups -->
-          <div class="followups" *ngIf="message.suggestions?.length">
-            <div class="followups-title">Follow-up suggestions</div>
-            <button class="followup-chip"
-                    *ngFor="let s of message.suggestions"
-                    (click)="selectHardcodedQuestion(s)"
-                    title="Ask this next">
-              {{ s }}
-            </button>
+      
+      <div *ngIf="message.from === 'ai'" class="message-wrapper ai">
+          <div class="profile-pic">
+            <img src="assets/images/chat/natasha.png" alt="AI" />
           </div>
 
-          <div class="message-timestamp">
-            {{ message.timestamp }}
-
-            <!-- Copy -->
-            <button class="icon-btn" (click)="copyToClipboard(message.text, i)"
-                    [attr.aria-label]="copySuccessIndex === i ? 'Copied' : 'Copy message'"
-                    title="Copy message">
-              <ng-container *ngIf="copySuccessIndex === i; else showCopy">
-                <span class="copy-tick">&#10003;</span>
-              </ng-container>
-              <ng-template #showCopy>
-                <img src="assets/images/chat/copy.png" alt="Copy" class="meta-icon" />
-              </ng-template>
-            </button>
-
-            <!-- Audio: play / stop -->
-            <button class="icon-btn"
-                    *ngIf="message.audioUrl && isReadingIndex !== i"
-                    (click)="playServerAudioForMessage(i)"
-                    aria-label="Play audio" title="Play audio">
-              <img src="assets/images/chat/speaker.png" alt="Play audio" class="meta-icon" />
-            </button>
-
-            <button class="icon-btn"
-                    *ngIf="message.audioUrl && isReadingIndex === i"
-                    (click)="stopReadAloud()"
-                    aria-label="Stop audio" title="Stop audio">
-              <img src="assets/images/chat/stop-button.png" alt="Stop audio" class="meta-icon" />
-            </button>
-
-            <!-- Generate audio on demand -->
-            <button class="icon-btn"
-                    *ngIf="!message.audioUrl"
-                    (click)="synthesizeAudioAndPlay(i)"
-                    [disabled]="message.isSynthesizing"
-                    aria-label="Generate audio"
-                    title="Generate audio">
-              <ng-container *ngIf="!message.isSynthesizing; else audioSpinner">
-                <img src="assets/images/chat/speaker.png" alt="Generate audio" class="meta-icon" />
-              </ng-container>
-              <ng-template #audioSpinner>
-                <img src="assets/images/chat/loading-spinner.gif" alt="Generating audio" class="meta-icon" />
-              </ng-template>
-            </button>
-
-            <!-- Video: generate, play, stop -->
-            <!-- Show Generate when no cached video -->
-            <button class="icon-btn"
-                    *ngIf="!message.videoUrl && !message.isVideoSynthesizing"
-                    (click)="synthesizeVideoAndPlay(i)"
-                    aria-label="Generate video"
-                    title="Generate video">
-              <img src="assets/images/chat/video.png" alt="Generate video" class="meta-icon" />
-            </button>
-
-            <!-- Spinner while generating video -->
-            <button class="icon-btn" *ngIf="!message.videoUrl && message.isVideoSynthesizing" disabled>
-              <img src="assets/images/chat/loading-spinner.gif" alt="Generating video" class="meta-icon" />
-            </button>
-
-            <!-- Toggle inline video (single button). Show video.png initially, switches to no-video.png when enabled -->
-            <button class="icon-btn"
-                    *ngIf="message.videoUrl"
-                    (click)="toggleMessageVideo(i)"
-                    [class.active]="isVideoEnabledIndex[i]"
-                    aria-label="Toggle video"
-                    title="Toggle video">
-              <img [src]="isVideoEnabledIndex[i] ? 'assets/images/chat/no-video.png' : 'assets/images/chat/video.png'"
-                   alt="Video" class="meta-icon" />
-            </button>
-
+          <div class="message structured-response">
+            <div [innerHTML]="formatStructuredResponse(message.text)"></div>
+
+            <!-- Follow-ups -->
+            <div class="followups" *ngIf="message.suggestions?.length">
+              <div class="followups-title">Follow-up suggestions</div>
+              <button class="followup-chip"
+                      *ngFor="let s of message.suggestions"
+                      (click)="selectHardcodedQuestion(s)"
+                      title="Ask this next">
+                {{ s }}
+              </button>
+            </div>
+
+            <div class="message-timestamp">
+              {{ message.timestamp }}
+
+              <!-- Copy -->
+              <button class="icon-btn" (click)="copyToClipboard(message.text, i)"
+                      [attr.aria-label]="copySuccessIndex === i ? 'Copied' : 'Copy message'"
+                      title="Copy message">
+                <ng-container *ngIf="copySuccessIndex === i; else showCopy">
+                  <span class="copy-tick">&#10003;</span>
+                </ng-container>
+                <ng-template #showCopy>
+                  <img src="assets/images/chat/copy.png" alt="Copy" class="meta-icon" />
+                </ng-template>
+              </button>
+
+              <!-- Audio: play / stop -->
+              <button class="icon-btn"
+                      *ngIf="message.audioUrl && isReadingIndex !== i"
+                      (click)="playServerAudioForMessage(i)"
+                      aria-label="Play audio" title="Play audio">
+                <img src="assets/images/chat/speaker.png" alt="Play audio" class="meta-icon" />
+              </button>
+
+              <button class="icon-btn"
+                      *ngIf="message.audioUrl && isReadingIndex === i"
+                      (click)="stopReadAloud()"
+                      aria-label="Stop audio" title="Stop audio">
+                <img src="assets/images/chat/stop-button.png" alt="Stop audio" class="meta-icon" />
+              </button>
+
+              <!-- Generate audio on demand -->
+              <button class="icon-btn"
+                      *ngIf="!message.audioUrl"
+                      (click)="synthesizeAudioAndPlay(i)"
+                      [disabled]="message.isSynthesizing"
+                      aria-label="Generate audio"
+                      title="Generate audio">
+                <ng-container *ngIf="!message.isSynthesizing; else audioSpinner">
+                  <img src="assets/images/chat/speaker.png" alt="Generate audio" class="meta-icon" />
+                </ng-container>
+                <ng-template #audioSpinner>
+                  <img src="assets/images/chat/loading-spinner.gif" alt="Generating audio" class="meta-icon" />
+                </ng-template>
+              </button>
+
+              <!-- Video: generate, play, stop -->
+              <!-- Show Generate when no cached video -->
+              <button class="icon-btn"
+                      *ngIf="!message.videoUrl && !message.isVideoSynthesizing"
+                      (click)="synthesizeVideoAndPlay(i)"
+                      aria-label="Generate video"
+                      title="Generate video">
+                <img src="assets/images/chat/video.png" alt="Generate video" class="meta-icon" />
+              </button>
+
+              <!-- Spinner while generating video -->
+              <button class="icon-btn" *ngIf="!message.videoUrl && message.isVideoSynthesizing" disabled>
+                <img src="assets/images/chat/loading-spinner.gif" alt="Generating video" class="meta-icon" />
+              </button>
+
+              <!-- Toggle inline video (single button). Show video.png initially, switches to no-video.png when enabled -->
+              <button class="icon-btn"
+                      *ngIf="message.videoUrl"
+                      (click)="toggleMessageVideo(i)"
+                      [class.active]="isVideoEnabledIndex[i]"
+                      aria-label="Toggle video"
+                      title="Toggle video">
+                <img [src]="isVideoEnabledIndex[i] ? 'assets/images/chat/no-video.png' : 'assets/images/chat/video.png'"
+                     alt="Video" class="meta-icon" />
+              </button>
+
+            </div>
+
+            <!-- Inline video player -->
+            <video *ngIf="isVideoEnabledIndex[i] && message.playingVideoUrl"
+                   id="inline-video-{{i}}"
+                   class="tutor-video"
+                   [src]="message.playingVideoUrl"
+                   (ended)="onMessageVideoEnded(i)"
+                   controls autoplay>
+            </video>
           </div>
-
-          <!-- Inline video player -->
-          <video *ngIf="isVideoEnabledIndex[i] && message.playingVideoUrl"
-                 id="inline-video-{{i}}"
-                 class="tutor-video"
-                 [src]="message.playingVideoUrl"
-                 (ended)="onMessageVideoEnded(i)"
-                 controls autoplay>
-          </video>
         </div>
       </div>
-    </div>
 
     <!-- Typing indicator -->
     <div *ngIf="isTyping" class="typing-indicator" aria-live="polite">

src/app/chat/chat.component.ts

@@ -284,14 +284,7 @@ export class ChatComponent implements OnDestroy {
     }
   }
 
-  //private storageHandler = (e: StorageEvent) => {
-  //  if (e.key === 'hasPDF') this.showRagModeAlert();
-  //};
-
-  //private showRagModeAlert(): void {
-  //  const ragEnabled = localStorage.getItem('rag_enabled') === '1' || localStorage.getItem('hasPDF') === 'true';
-  //  // No-op placeholder
-  //}
+  
 
   ngOnInit(): void {
     this.ensureGradeLevel();
@@ -303,11 +296,7 @@ export class ChatComponent implements OnDestroy {
     this.loadVoices();
   }
 
-  //ngAfterViewChecked() {
-  //  setTimeout(() => {
-  //    this.scrollToBottom();
-  //  }, 100);
-  //}
+  
 
   ngOnDestroy(): void {
     if (this.currentExplainSub) { this.currentExplainSub.unsubscribe(); this.currentExplainSub = null; }
@@ -335,13 +324,7 @@ export class ChatComponent implements OnDestroy {
     });
   }
 
-  //scrollToBottom(): void {
-  //  try {
-  //    this.chatBox.nativeElement.scrollTo({ top: this.chatBox.nativeElement.scrollHeight, behavior: 'smooth' });
-  //  } catch (err) {
-  //    console.error('Scroll error:', err);
-  //  }
-  //}
+  
 
   scrollToBottom(): void {
     if (this.shouldAutoScroll) {
@@ -565,6 +548,7 @@ export class ChatComponent implements OnDestroy {
     this.sendMessage();
   }
 
+  /** Send question to backend for an answer */
   /** Send question to backend for an answer */
   sendMessage(inputText?: string): void {
     const message = inputText ? inputText.trim() : this.userInput.trim();
@@ -595,49 +579,64 @@ export class ChatComponent implements OnDestroy {
             ? response.source_ids.filter((s: any) => typeof s === 'string' && s.trim().length > 0)
             : [];
 
-          this.messages.push({
-            from: 'ai',
-            text: explanation,
-            timestamp: new Date().toLocaleTimeString(),
-            source_ids: sourceIds
-          });
-          this.cdr.detectChanges();
-          this.shouldAutoScroll = true;
-          this.scrollToBottom();
-
+          // Store question + source ids *now*.
           this.lastQuestion = message;
-          this.lastAnswer = explanation;
           this.lastSourceIds = sourceIds;
 
-          // NEW: mark if the answer is grounded in textbook pages
           const notFound = /No information available in the provided textbook content/i.test(explanation);
-          this.lastAnswerHasContext = !!sourceIds.length && !notFound;
+          const hasContext = !!sourceIds.length && !notFound;
 
-          this.speakResponse(explanation);
+          // IMPORTANT:
+          // Do NOT set this.lastAnswer here.
+          // We will set it only after the streaming animation has finished.
+          this.streamAiAnswer(explanation, sourceIds, hasContext);
         },
         error: (err) => {
           console.error('API Error:', err);
           this.isTyping = false;
           const errorMessage = 'Error: Could not get a response from the server.';
 
-          this.messages.push({
-            from: 'ai',
-            text: errorMessage,
-            timestamp: new Date().toLocaleTimeString(),
-            source_ids: []
-          });
-          this.cdr.detectChanges();
-          this.shouldAutoScroll = true;
-          this.scrollToBottom();
-
-          // NEW: ensure follow-ups are not attempted after an error
-          this.lastAnswerHasContext = false;
-
-          this.speakResponse(errorMessage);
+          // We can still stream the error text (or you can show it directly if you prefer)
+          this.streamAiAnswer(errorMessage, [], false);
         }
       });
   }
 
+
+
+  /** Show AI answer word-by-word and start audio */
+  /** Show AI answer word-by-word and start audio */
+  private streamAiAnswer(explanation: string, sourceIds: string[], hasContext: boolean): void {
+    const text = (explanation || '').trim() || 'No explanation available.';
+    const timestamp = new Date().toLocaleTimeString();
+
+    // Create an empty AI message first
+    const aiIndex = this.messages.push({
+      from: 'ai',
+      text: '',
+      timestamp,
+      source_ids: sourceIds,
+      pending: true
+    } as any) - 1;
+
+    this.isAiResponding = true;
+    this.shouldAutoScroll = true;
+    this.cdr.detectChanges();
+
+    // Animate the text word by word
+    this.animateAiResponse(text, aiIndex, () => {
+      // When streaming is finished, we finally store lastAnswer
+      this.lastAnswer = text;
+      this.lastAnswerHasContext = hasContext;
+    });
+
+    // Play audio at the same time (only if voice is enabled)
+    this.speakResponse(text);
+  }
+
+
+
+
   
 
   displaySource(tag: string): string {
@@ -658,11 +657,23 @@ export class ChatComponent implements OnDestroy {
   }
 
   /** TTS helpers */
-  animateAiResponse(responseText: string, targetIndex?: number): void {
-    if (!responseText) { this.isAiResponding = false; return; }
+  /** TTS helpers */
+  /** TTS helpers + typing animation */
+  animateAiResponse(
+    responseText: string,
+    targetIndex?: number,
+    onDone?: () => void
+  ): void {
+    if (!responseText) {
+      this.isAiResponding = false;
+      return;
+    }
 
+    // Find or create the AI message to animate into
     let aiIndex: number | null = null;
-    if (typeof targetIndex === 'number' && this.messages[targetIndex] && this.messages[targetIndex].from === 'ai') {
+    if (typeof targetIndex === 'number' &&
+      this.messages[targetIndex] &&
+      this.messages[targetIndex].from === 'ai') {
       aiIndex = targetIndex;
     } else {
       for (let i = this.messages.length - 1; i >= 0; i--) {
@@ -671,36 +682,58 @@ export class ChatComponent implements OnDestroy {
     }
 
     if (aiIndex === null || aiIndex < 0 || !this.messages[aiIndex]) {
-      this.messages.push({ from: 'ai', text: '', timestamp: new Date().toLocaleTimeString() } as any);
+      this.messages.push({
+        from: 'ai',
+        text: '',
+        timestamp: new Date().toLocaleTimeString()
+      } as any);
       aiIndex = this.messages.length - 1;
       this.isVideoEnabledIndex.push(false);
     }
 
     const aiMsg = this.messages[aiIndex] as any;
 
-    if (this.aiResponseInterval) { clearInterval(this.aiResponseInterval); this.aiResponseInterval = null; }
+    if (this.aiResponseInterval) {
+      clearInterval(this.aiResponseInterval);
+      this.aiResponseInterval = null;
+    }
 
     aiMsg.text = '';
+    aiMsg.pending = true;
+    this.isAiResponding = true;
     this.cdr.detectChanges();
 
-    const words = responseText.split(' ');
+    const words = responseText.split(/\s+/).filter(w => w.length);
     let idx = 0;
+
+    // 1 word every 200 ms – you can tune this
+    const speedMs = 200;
+
     this.aiResponseInterval = setInterval(() => {
       if (idx < words.length) {
         aiMsg.text = words.slice(0, idx + 1).join(' ');
         idx++;
         this.cdr.detectChanges();
+        this.scrollToBottom();   // keep view at bottom while streaming
       } else {
-        clearInterval(this.aiResponseInterval);
+        clearInterval(this.aiResponseInterval!);
         this.aiResponseInterval = null;
         aiMsg.text = responseText;
         aiMsg.pending = false;
-        this.cdr.detectChanges();
         this.isAiResponding = false;
+
+        if (onDone) {
+          onDone();
+        }
+
+        this.cdr.detectChanges();
+        this.scrollToBottom();
       }
-    }, 280);
+    }, speedMs);
   }
 
+
+
   stopAiResponse(): void {
     if (this.currentExplainSub) { this.currentExplainSub.unsubscribe(); this.currentExplainSub = null; }
     if (this.currentFollowupsSub) { this.currentFollowupsSub.unsubscribe(); this.currentFollowupsSub = null; }
@@ -748,13 +781,19 @@ export class ChatComponent implements OnDestroy {
 
   speakResponse(responseText: string): void {
     if (!responseText) return;
+
+    // Only speak when the Voice toggle is ON
+    if (!this.isVoiceEnabled) return;
+
     this.stopAllVideo();
+
     const speech = new SpeechSynthesisUtterance();
     speech.text = responseText;
     speech.lang = 'en-US';
     speech.pitch = 1;
     speech.rate = 1;
     this.isSpeaking = true;
+
     const voices = window.speechSynthesis.getVoices();
     const preferred = [
       'Google UK English Female',
@@ -769,24 +808,21 @@ export class ChatComponent implements OnDestroy {
       if (found) { speech.voice = found; break; }
     }
     if (!speech.voice && voices.length) speech.voice = voices[0];
-    speech.onend = () => { this.isSpeaking = false; this.cdr.detectChanges(); };
-    window.speechSynthesis.speak(speech);
+
+    speech.onend = () => {
+      this.isSpeaking = false;
+      this.cdr.detectChanges();
+    };
+
+    try {
+      window.speechSynthesis.speak(speech);
+    } catch {
+      this.isSpeaking = false;
+    }
   }
 
-  //pauseAudio(): void {
-  //  if (this.serverAudio && !this.serverAudio.paused) {
-  //    this.serverAudio.pause();
-  //    this.isAudioPaused = true;
-  //    if (this.serverAudioMessageIndex !== null) this.messages[this.serverAudioMessageIndex].isPlaying = false;
-  //    this.cdr.detectChanges();
-  //    return;
-  //  }
-  //  if (window.speechSynthesis && window.speechSynthesis.speaking && !window.speechSynthesis.paused) {
-  //    window.speechSynthesis.pause();
-  //    this.isAudioPaused = true;
-  //    this.cdr.detectChanges();
-  //  }
-  //}
+
+  
 
   resumeAudio(): void {
     if (this.serverAudio && this.serverAudio.paused) {