Update flare-ui/src/app/components/chat/chat.component.ts

flare-ui/src/app/components/chat/chat.component.ts

@@ -12,7 +12,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
-import { Subscription } from 'rxjs';
+import { Subject, takeUntil } from 'rxjs';
 
 import { ApiService } from '../../services/api.service';
 import { EnvironmentService } from '../../services/environment.service';
@@ -72,8 +72,10 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
   analyser?: AnalyserNode;
   animationId?: number;
   
-  private subs = new Subscription();
+  // Memory leak prevention
+  private destroyed$ = new Subject<void>();
   private shouldScroll = false;
+  private audioUrls: string[] = []; // Track URLs for cleanup
 
   constructor(
     private fb: FormBuilder, 
@@ -88,8 +90,10 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
     this.checkTTSAvailability();
     this.checkSTTAvailability();
     
-    // Initialize Audio Context
-    this.audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
+    // Initialize Audio Context lazily to avoid browser warnings
+    if ('AudioContext' in window || 'webkitAudioContext' in window) {
+      // Will be created when needed
+    }
   }
 
   ngAfterViewChecked() {
@@ -99,20 +103,53 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
     }
   }
 
-  ngOnDestroy(): void {
-    this.subs.unsubscribe();
+  async ngOnDestroy(): Promise<void> {
+    // Signal all subscriptions to complete
+    this.destroyed$.next();
+    this.destroyed$.complete();
+    
+    // Clean up audio resources
     if (this.animationId) {
       cancelAnimationFrame(this.animationId);
+      this.animationId = undefined;
     }
-    if (this.audioContext) {
-      this.audioContext.close();
+    
+    // Close audio context properly
+    if (this.audioContext && this.audioContext.state !== 'closed') {
+      try {
+        await this.audioContext.close();
+      } catch (error) {
+        console.error('Error closing audio context:', error);
+      }
+    }
+    
+    // Revoke all created object URLs
+    this.audioUrls.forEach(url => {
+      try {
+        URL.revokeObjectURL(url);
+      } catch (error) {
+        console.error('Error revoking URL:', error);
+      }
+    });
+    this.audioUrls = [];
+    
+    // Clean up any active session
+    if (this.sessionId) {
+      this.api.endSession(this.sessionId).pipe(
+        takeUntil(this.destroyed$)
+      ).subscribe({
+        error: (err) => console.error('Error ending session:', err)
+      });
     }
   }
 
   private checkSTTAvailability(): void {
-    this.api.getEnvironment().subscribe({
+    this.api.getEnvironment().pipe(
+      takeUntil(this.destroyed$)
+    ).subscribe({
       next: (env) => {
         this.sttAvailable = env.stt_engine !== 'no_stt';
+        this.environmentService.setSTTEnabled(this.sttAvailable);
         if (!this.sttAvailable) {
           this.useSTT = false;
         }
@@ -120,6 +157,7 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
       error: (err) => {
         console.error('Failed to check STT availability:', err);
         this.sttAvailable = false;
+        this.environmentService.setSTTEnabled(false);
       }
     });
   }
@@ -139,7 +177,9 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
     this.error = '';
     
     // Start a new session for realtime chat
-    const sub = this.api.startChat(this.selectedProject).subscribe({
+    this.api.startChat(this.selectedProject).pipe(
+      takeUntil(this.destroyed$)
+    ).subscribe({
       next: res => {
         // Store session ID for realtime component
         localStorage.setItem('current_session_id', res.session_id);
@@ -156,13 +196,11 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
         console.error('Start realtime chat error:', err);
       }
     });
-    
-    this.subs.add(sub);
   }
   
   private openRealtimeDialog(sessionId: string): void {
-    // Dinamik import kullan
-    import('./realtime-chat.component').then(module => {
+    // Dynamic import to reduce initial bundle size
+    import('../chat/realtime-chat.component').then(module => {
       const dialogRef = this.dialog.open(module.RealtimeChatComponent, {
         width: '90%',
         maxWidth: '900px',
@@ -176,7 +214,9 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
         }
       });
       
-      dialogRef.afterClosed().subscribe(result => {
+      dialogRef.afterClosed().pipe(
+        takeUntil(this.destroyed$)
+      ).subscribe(result => {
         // Clean up session data
         localStorage.removeItem('current_session_id');
         localStorage.removeItem('current_project');
@@ -184,16 +224,22 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
         // If session was active, we might want to end it
         if (result === 'session_active') {
           // Optionally end the session on backend
-          this.api.endSession(sessionId).subscribe({
+          this.api.endSession(sessionId).pipe(
+            takeUntil(this.destroyed$)
+          ).subscribe({
             next: () => console.log('Session ended'),
             error: (err: any) => console.error('Failed to end session:', err)
           });
         }
       });
+    }).catch(error => {
+      console.error('Failed to load realtime chat component:', error);
+      this.error = 'Failed to open realtime chat';
+      this.loading = false;
     });
   }
   
-  // Alternatif: Route navigasyonu kullanmak isterseniz
+  // Alternative: Route navigation
   private navigateToRealtimeChat(sessionId: string): void {
     this.router.navigate(['/realtime-chat', sessionId], {
       queryParams: { project: this.selectedProject }
@@ -202,7 +248,9 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
   
   loadProjects(): void {
     this.loading = true;
-    const sub = this.api.getChatProjects().subscribe({
+    this.api.getChatProjects().pipe(
+      takeUntil(this.destroyed$)
+    ).subscribe({
       next: projects => {
         this.projects = projects;
         this.loading = false;
@@ -216,24 +264,29 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
         console.error('Load projects error:', err);
       }
     });
-    this.subs.add(sub);
   }
 
   checkTTSAvailability(): void {
-    const sub = this.environmentService.environment$.subscribe(env => {
+    // Subscribe to environment changes
+    this.environmentService.environment$.pipe(
+      takeUntil(this.destroyed$)
+    ).subscribe(env => {
       if (env) {
         this.ttsAvailable = env.tts_engine !== 'no_tts';
+        this.environmentService.setTTSEnabled(this.ttsAvailable);
         if (!this.ttsAvailable) {
           this.useTTS = false;
         }
       }
     });
-    this.subs.add(sub);
     
     // Also get current environment
-    this.api.getEnvironment().subscribe({
+    this.api.getEnvironment().pipe(
+      takeUntil(this.destroyed$)
+    ).subscribe({
       next: (env) => {
         this.ttsAvailable = env.tts_engine !== 'no_tts';
+        this.environmentService.setTTSEnabled(this.ttsAvailable);
         if (!this.ttsAvailable) {
           this.useTTS = false;
         }
@@ -247,7 +300,9 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
     this.loading = true;
     this.error = '';
     
-    const sub = this.api.startChat(this.selectedProject).subscribe({
+    this.api.startChat(this.selectedProject).pipe(
+      takeUntil(this.destroyed$)
+    ).subscribe({
       next: res => {
         this.sessionId = res.session_id;
         const message: ChatMessage = { 
@@ -261,7 +316,7 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
         this.shouldScroll = true;
         
         // Generate TTS if enabled
-        if (this.useTTS) {
+        if (this.useTTS && this.ttsAvailable) {
           this.generateTTS(res.answer, this.messages.length - 1);
         }
       },
@@ -271,11 +326,10 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
         console.error('Start chat error:', err);
       }
     });
-    this.subs.add(sub);
   }
 
   send(): void {
-    if (!this.sessionId || this.input.invalid) return;
+    if (!this.sessionId || this.input.invalid || this.loading) return;
     
     const text = this.input.value!.trim();
     if (!text) return;
@@ -292,7 +346,9 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
     this.shouldScroll = true;
 
     // Send to backend
-    const sub = this.api.chat(this.sessionId, text).subscribe({
+    this.api.chat(this.sessionId, text).pipe(
+      takeUntil(this.destroyed$)
+    ).subscribe({
       next: res => {
         const message: ChatMessage = { 
           author: 'assistant', 
@@ -305,7 +361,7 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
         this.shouldScroll = true;
         
         // Generate TTS if enabled
-        if (this.useTTS) {
+        if (this.useTTS && this.ttsAvailable) {
           this.generateTTS(res.answer, this.messages.length - 1);
         }
       },
@@ -320,69 +376,116 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
         console.error('Chat error:', err);
       }
     });
-    this.subs.add(sub);
   }
 
   generateTTS(text: string, messageIndex: number): void {
-    const sub = this.api.generateTTS(text).subscribe({
+    if (!this.ttsAvailable) return;
+    
+    this.api.generateTTS(text).pipe(
+      takeUntil(this.destroyed$)
+    ).subscribe({
       next: (audioBlob) => {
         const audioUrl = URL.createObjectURL(audioBlob);
-        this.messages[messageIndex].audioUrl = audioUrl;
+        this.audioUrls.push(audioUrl); // Track for cleanup
         
-        // Auto-play the latest message
-        if (messageIndex === this.messages.length - 1) {
-          setTimeout(() => this.playAudio(audioUrl), 100);
+        if (messageIndex < this.messages.length) {
+          this.messages[messageIndex].audioUrl = audioUrl;
+          
+          // Auto-play the latest message
+          if (messageIndex === this.messages.length - 1 && this.useTTS) {
+            setTimeout(() => this.playAudio(audioUrl), 100);
+          }
         }
       },
       error: (err) => {
         console.error('TTS generation error:', err);
+        // Don't show error to user, just silently fail TTS
       }
     });
-    this.subs.add(sub);
   }
 
   playAudio(audioUrl: string): void {
-    if (!this.audioPlayer) return;
+    if (!this.audioPlayer?.nativeElement) return;
+    
+    // Stop any currently playing audio
+    this.stopAudio();
     
     const audio = this.audioPlayer.nativeElement;
     audio.src = audioUrl;
     
-    // Set up audio visualization
-    this.setupAudioVisualization(audio);
+    // Set up audio visualization if context exists
+    if (this.audioContext) {
+      this.setupAudioVisualization(audio);
+    }
     
     audio.play().then(() => {
       this.playingAudio = true;
     }).catch(err => {
       console.error('Audio play error:', err);
+      this.playingAudio = false;
     });
     
     audio.onended = () => {
       this.playingAudio = false;
       if (this.animationId) {
         cancelAnimationFrame(this.animationId);
+        this.animationId = undefined;
         this.clearWaveform();
       }
     };
+    
+    audio.onerror = () => {
+      this.playingAudio = false;
+      console.error('Audio loading error');
+    };
   }
 
-  setupAudioVisualization(audio: HTMLAudioElement): void {
-    if (!this.audioContext || !this.waveformCanvas) return;
+  stopAudio(): void {
+    if (this.audioPlayer?.nativeElement) {
+      const audio = this.audioPlayer.nativeElement;
+      audio.pause();
+      audio.currentTime = 0;
+    }
+    this.playingAudio = false;
     
-    // Create audio source and analyser
-    const source = this.audioContext.createMediaElementSource(audio);
-    this.analyser = this.audioContext.createAnalyser();
-    this.analyser.fftSize = 256;
+    if (this.animationId) {
+      cancelAnimationFrame(this.animationId);
+      this.animationId = undefined;
+    }
+  }
+
+  setupAudioVisualization(audio: HTMLAudioElement): void {
+    if (!this.waveformCanvas?.nativeElement) return;
     
-    // Connect nodes
-    source.connect(this.analyser);
-    this.analyser.connect(this.audioContext.destination);
+    // Create audio context if not exists
+    if (!this.audioContext) {
+      try {
+        this.audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
+      } catch (error) {
+        console.error('Failed to create audio context:', error);
+        return;
+      }
+    }
     
-    // Start visualization
-    this.drawWaveform();
+    try {
+      // Create audio source and analyser
+      const source = this.audioContext.createMediaElementSource(audio);
+      this.analyser = this.audioContext.createAnalyser();
+      this.analyser.fftSize = 256;
+      
+      // Connect nodes
+      source.connect(this.analyser);
+      this.analyser.connect(this.audioContext.destination);
+      
+      // Start visualization
+      this.drawWaveform();
+    } catch (error) {
+      console.error('Audio visualization setup error:', error);
+    }
   }
 
   drawWaveform(): void {
-    if (!this.analyser || !this.waveformCanvas) return;
+    if (!this.analyser || !this.waveformCanvas?.nativeElement) return;
     
     const canvas = this.waveformCanvas.nativeElement;
     const ctx = canvas.getContext('2d');
@@ -392,6 +495,8 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
     const dataArray = new Uint8Array(bufferLength);
     
     const draw = () => {
+      if (!this.playingAudio) return;
+      
       this.animationId = requestAnimationFrame(draw);
       
       this.analyser!.getByteFrequencyData(dataArray);
@@ -417,7 +522,7 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
   }
 
   clearWaveform(): void {
-    if (!this.waveformCanvas) return;
+    if (!this.waveformCanvas?.nativeElement) return;
     
     const canvas = this.waveformCanvas.nativeElement;
     const ctx = canvas.getContext('2d');
@@ -428,6 +533,15 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
   }
 
   endSession(): void {
+    if (this.sessionId) {
+      // End session on backend
+      this.api.endSession(this.sessionId).pipe(
+        takeUntil(this.destroyed$)
+      ).subscribe({
+        error: (err) => console.error('Error ending session:', err)
+      });
+    }
+    
     this.sessionId = null;
     this.messages = [];
     this.selectedProject = null;
@@ -435,18 +549,23 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
     this.error = '';
     
     // Clean up audio
-    if (this.audioPlayer) {
-      this.audioPlayer.nativeElement.pause();
-    }
-    if (this.animationId) {
-      cancelAnimationFrame(this.animationId);
-    }
+    this.stopAudio();
     this.clearWaveform();
+    
+    // Revoke audio URLs
+    this.audioUrls.forEach(url => {
+      try {
+        URL.revokeObjectURL(url);
+      } catch (error) {
+        console.error('Error revoking URL:', error);
+      }
+    });
+    this.audioUrls = [];
   }
 
   private scrollToBottom(): void {
     try {
-      if (this.myScrollContainer) {
+      if (this.myScrollContainer?.nativeElement) {
         this.myScrollContainer.nativeElement.scrollTop = 
           this.myScrollContainer.nativeElement.scrollHeight;
       }