fix

src/app/chat/api.service.ts

@@ -48,15 +48,20 @@ export class ApiService {
     return this.http.post<any>(`${this.baseUrl}/generate-questions`, body, { headers });
   }
 
-  explainGrammar(question: string): Observable<any> {
+  // Accept either a string (legacy) or an object { question, synthesize_audio, synthesize_video }
+  explainGrammar(payload: string | any): Observable<any> {
     const grade = this.getGrade();
     const headers = this.makeHeaders(grade);
-    const body = {
-      question,
-      model: 'gpt-4o-mini',
-      db_level: this.toDbLevel(grade),
-    };
-    return this.http.post<any>(`${this.baseUrl}/explain-grammar`, body, { headers });
+
+    // Normalize payload into an object
+    const body = typeof payload === 'string' ? { question: payload } : { ...payload };
+
+    // Ensure backend gets db_level and model so it selects the right vectorstore/LLM
+    if (!body.db_level) body.db_level = this.toDbLevel(grade);
+    if (!body.model) body.model = 'gpt-4o-mini';
+
+    const url = `${this.baseUrl}/explain-grammar`;
+    return this.http.post(url, body, { headers });
   }
 
   // ✅ Updated to carry source_ids so follow-ups stay in the same textbook pages

src/app/chat/chat.component.ts

@@ -68,13 +68,13 @@ export class ChatComponent implements OnDestroy {
     isSynthesizing?: boolean;
     isVideoSynthesizing?: boolean;
   }> = [];
-   isTyping: boolean = false;
+  isTyping: boolean = false;
   @ViewChild('chatBox') chatBox!: ElementRef;
 
   /** Speech / mic state */
   isLoadingSpeech: boolean = false;
   selectedVoice: SpeechSynthesisVoice | null = null;
-  
+
   speechSynthesisInstance: SpeechSynthesisUtterance | null = null;
   isListening: boolean = false;
   isProcessingSpeech: boolean = false;
@@ -85,7 +85,7 @@ export class ChatComponent implements OnDestroy {
   suggestions: string[] = [];
   isInputValid = false;
   /** Popup */
-  
+
 
   /** Subscriptions */
   private responseSub?: Subscription;
@@ -134,7 +134,7 @@ export class ChatComponent implements OnDestroy {
 
 
   currentFollowups: string[] = [];
-  
+
   /*private shouldAutoScroll = true;*/
   videoUrl = '';
   aiResponseInterval: any = null;
@@ -284,7 +284,7 @@ export class ChatComponent implements OnDestroy {
     }
   }
 
-  
+
 
   ngOnInit(): void {
     this.ensureGradeLevel();
@@ -296,7 +296,7 @@ export class ChatComponent implements OnDestroy {
     this.loadVoices();
   }
 
-  
+
 
   ngOnDestroy(): void {
     if (this.currentExplainSub) { this.currentExplainSub.unsubscribe(); this.currentExplainSub = null; }
@@ -324,7 +324,7 @@ export class ChatComponent implements OnDestroy {
     });
   }
 
-  
+
 
   scrollToBottom(): void {
     if (this.shouldAutoScroll) {
@@ -564,49 +564,54 @@ export class ChatComponent implements OnDestroy {
     this.shouldAutoScroll = true;
     this.scrollToBottom();
 
-    this.responseSub = this.apiService.explainGrammar(message)
-      .pipe(finalize(() => {
-        this.isSubmitting = false;
-      }))
-      .subscribe({
-        next: (response) => {
-          this.isTyping = false;
-
-          const explanation =
-            (response?.answer || response?.response || response?.text || 'No explanation available.').trim();
-
-          const sourceIds: string[] = Array.isArray(response?.source_ids)
-            ? response.source_ids.filter((s: any) => typeof s === 'string' && s.trim().length > 0)
-            : [];
-
-          // Store question + source ids *now*.
-          this.lastQuestion = message;
-          this.lastSourceIds = sourceIds;
-
-          const notFound = /No information available in the provided textbook content/i.test(explanation);
-          const hasContext = !!sourceIds.length && !notFound;
-
-          // 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.responseSub = this.apiService.explainGrammar({
+      question: message,
+      // ask backend to synthesize audio/video only when user toggles are ON
+      synthesize_audio: Boolean(this.isVoiceEnabled),
+      synthesize_video: Boolean(this.isTutorEnabled)
+    })
+    .pipe(finalize(() => {
+      this.isSubmitting = false;
+    }))
+    .subscribe({
+      next: (response) => {
+        this.isTyping = false;
+
+        const explanation =
+          (response?.answer || response?.response || response?.text || 'No explanation available.').trim();
+
+        const sourceIds: string[] = Array.isArray(response?.source_ids)
+          ? response.source_ids.filter((s: any) => typeof s === 'string' && s.trim().length > 0)
+          : [];
+
+        const audioUrl = (response?.audio_url || response?.audioUrl || '') as string;
+        const videoUrl = (response?.video_url || response?.videoUrl || '') as string;
+
+        // Store question + source ids *now*.
+        this.lastQuestion = message;
+        this.lastSourceIds = sourceIds;
+
+        const notFound = /No information available in the provided textbook content/i.test(explanation);
+        const hasContext = !!sourceIds.length && !notFound;
+
+        // Pass URLs along to the stream/attach to message
+        this.streamAiAnswer(explanation, sourceIds, hasContext, audioUrl || undefined, videoUrl || undefined);
+      },
+      error: (err) => {
+        console.error('API Error:', err);
+        this.isTyping = false;
+        const errorMessage = 'Error: Could not get a response from the server.';
 
-          // We can still stream the error text (or you can show it directly if you prefer)
-          this.streamAiAnswer(errorMessage, [], false);
-        }
-      });
+        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 {
+  private streamAiAnswer(explanation: string, sourceIds: string[], hasContext: boolean, audioUrl?: string, videoUrl?: string): void {
     const text = (explanation || '').trim() || 'No explanation available.';
     const timestamp = new Date().toLocaleTimeString();
 
@@ -616,9 +621,17 @@ export class ChatComponent implements OnDestroy {
       text: '',
       timestamp,
       source_ids: sourceIds,
-      pending: true
+      pending: true,
+      audioUrl: audioUrl || '',
+      videoUrl: videoUrl || '',
+      playingVideoUrl: ''
     } as any) - 1;
 
+    // ensure video-enabled index has an entry for this message
+    if (this.isVideoEnabledIndex.length <= aiIndex) {
+      this.isVideoEnabledIndex[aiIndex] = false;
+    }
+
     this.isAiResponding = true;
     this.shouldAutoScroll = true;
     this.cdr.detectChanges();
@@ -628,16 +641,56 @@ export class ChatComponent implements OnDestroy {
       // When streaming is finished, we finally store lastAnswer
       this.lastAnswer = text;
       this.lastAnswerHasContext = hasContext;
+
+      // After the AI text finishes streaming, automatically play server media when toggles are enabled.
+      // If both audio and video are present and both toggles are enabled, video takes precedence.
+      this.autoPlayMediaForMessage(aiIndex);
     });
 
-    // Play audio at the same time (only if voice is enabled)
-    this.speakResponse(text);
+    // Only run client-side TTS when there is no server-provided audio URL.
+    if (!audioUrl && this.isVoiceEnabled) {
+      this.speakResponse(text);
+    }
   }
 
+  /**
+   * Decide and start playback for a message that already has `audioUrl` and/or `videoUrl`.
+   * Behavior:
+   *  - If both videoUrl && audioUrl && both video and audio toggles are ON -> play video (video wins)
+   *  - Else if videoUrl && video toggle ON -> play video
+   *  - Else if audioUrl && voice toggle ON -> play audio
+   */
+  private autoPlayMediaForMessage(index: number): void {
+    const msg = this.messages[index] as any;
+    if (!msg) return;
 
+    const hasVideo = !!(msg.videoUrl && msg.videoUrl.trim());
+    const hasAudio = !!(msg.audioUrl && msg.audioUrl.trim());
 
+    // If both present and user enabled both, prefer video
+    if (hasVideo && this.isTutorEnabled) {
+      try { this.stopServerAudio(); } catch { /* noop */ }
+      try { window.speechSynthesis?.cancel(); } catch { /* noop */ }
 
-  
+      // request autoplay (will mute to allow autoplay)
+      this.openMessageVideo(index, true);
+      return;
+    }
+
+    // If video present but tutor (video) is not enabled, do not auto-play it.
+    // Only auto-play audio if user enabled voice
+    if (hasAudio && this.isVoiceEnabled) {
+      // play server audio (this will stop videos if any)
+      // ensure inline videos are stopped
+      try { this.stopAllVideo(); } catch { /* noop */ }
+
+      // If message already has audioUrl, play it
+      this.playServerAudioForMessage(index);
+      return;
+    }
+
+    // If no server media played and no TTS, do nothing (user may manually click synth).
+  }
 
   displaySource(tag: string): string {
     if (!tag) return '';
@@ -822,7 +875,7 @@ export class ChatComponent implements OnDestroy {
   }
 
 
-  
+
 
   resumeAudio(): void {
     if (this.serverAudio && this.serverAudio.paused) {
@@ -978,7 +1031,7 @@ export class ChatComponent implements OnDestroy {
     });
   }
 
-  openMessageVideo(i: number): void {
+  openMessageVideo(i: number, autoPlay: boolean = false): void {
     const msg = this.messages[i] as any;
     if (!msg?.videoUrl) return;
 
@@ -1002,6 +1055,13 @@ export class ChatComponent implements OnDestroy {
       const vid = document.getElementById(`inline-video-${i}`) as HTMLVideoElement | null;
       if (!vid) { this.isVideoPlayingIndex = null; this.cdr.detectChanges(); return; }
 
+      // If autoplay requested, mute to satisfy browser autoplay policies.
+      if (autoPlay) {
+        try { vid.muted = true; } catch { /* noop */ }
+      } else {
+        try { vid.muted = false; } catch { /* noop */ }
+      }
+
       vid.onplay = () => { this.isVideoPlayingIndex = i; this.cdr.detectChanges(); };
       vid.onpause = () => { this.cdr.detectChanges(); };
       vid.onended = () => { this.onMessageVideoEnded(i); };
@@ -1083,8 +1143,8 @@ export class ChatComponent implements OnDestroy {
     }
   }
 
-  
-  
+
+
 
   stopListening(): void {
     this.isListening = false;
@@ -1308,7 +1368,7 @@ export class ChatComponent implements OnDestroy {
     }
   }
 
-  
+
 
   addNewLine(event: KeyboardEvent): void {
     if (event.key === 'Enter' && event.shiftKey) {
@@ -1353,7 +1413,7 @@ export class ChatComponent implements OnDestroy {
 
     //if (this.serverAudio) {
     //  try { this.serverAudio.volume = this.isMuted ? 0 : 1; } catch { /* noop */ }
-    //}
+    // }
     //this.saveToggleStates();
   }
 
@@ -1452,7 +1512,7 @@ export class ChatComponent implements OnDestroy {
 
   goToHomePageShortcut(): void { this.router.navigate(['/home']); }
 
-  
+
 
   openUserGuide(): void { this.showUserGuide = true; }
   closeUserGuide(): void { this.showUserGuide = false; }
@@ -1501,7 +1561,7 @@ export class ChatComponent implements OnDestroy {
         alert("Please check your browser's settings to enable the microphone.");
       }
     } catch (err) {
-      console.error('openMicrophoneSettings error:', err);
+      console.error('openMicrophoneSettings error', err);
       alert("Unable to open settings automatically. Please check your browser's microphone/privacy settings.");
     }
     this.cdr.detectChanges();
@@ -1751,6 +1811,7 @@ export class ChatComponent implements OnDestroy {
       analyser.smoothingTimeConstant = 0.85;
       source.connect(analyser);
 
+      // assign to instance field
       this.analyser = analyser;
       const bufferLength = analyser.fftSize;
       this.dataArray = new Uint8Array(bufferLength);