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

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

@@ -11,7 +11,8 @@ import { MatDividerModule } from '@angular/material/divider';
 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 { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { Subject, takeUntil } from 'rxjs';
 
 import { ApiService } from '../../services/api.service';
@@ -22,7 +23,7 @@ interface ChatMessage {
   author: 'user' | 'assistant';
   text: string;
   timestamp?: Date;
-  audioUrl?: string;  // For TTS audio
+  audioUrl?: string;
 }
 
 @Component({
@@ -41,7 +42,9 @@ interface ChatMessage {
     MatDividerModule,
     MatTooltipModule,
     MatProgressSpinnerModule,
-    MatCheckboxModule
+    MatCheckboxModule,
+    MatDialogModule,
+    MatSnackBarModule
   ],
   templateUrl: './chat.component.html',
   styleUrls: ['./chat.component.scss']
@@ -72,17 +75,16 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
   analyser?: AnalyserNode;
   animationId?: number;
   
-  // Memory leak prevention
   private destroyed$ = new Subject<void>();
   private shouldScroll = false;
-  private audioUrls: string[] = []; // Track URLs for cleanup
 
   constructor(
     private fb: FormBuilder, 
     private api: ApiService,
     private environmentService: EnvironmentService,
     private dialog: MatDialog,
-    private router: Router  
+    private router: Router,
+    private snackBar: MatSnackBar
   ) {}
 
   ngOnInit(): void {
@@ -90,9 +92,11 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
     this.checkTTSAvailability();
     this.checkSTTAvailability();
     
-    // Initialize Audio Context lazily to avoid browser warnings
-    if ('AudioContext' in window || 'webkitAudioContext' in window) {
-      // Will be created when needed
+    // Initialize Audio Context with error handling
+    try {
+      this.audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
+    } catch (error) {
+      console.error('Failed to create AudioContext:', error);
     }
   }
 
@@ -103,44 +107,30 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
     }
   }
 
-  async ngOnDestroy(): Promise<void> {
-    // Signal all subscriptions to complete
+  ngOnDestroy(): void {
     this.destroyed$.next();
     this.destroyed$.complete();
     
-    // Clean up audio resources
+    // Cleanup audio resources
+    this.cleanupAudio();
+  }
+
+  private cleanupAudio(): void {
     if (this.animationId) {
       cancelAnimationFrame(this.animationId);
       this.animationId = undefined;
     }
     
-    // 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);
-      }
+      this.audioContext.close().catch(err => console.error('Failed to close audio context:', err));
     }
     
-    // Revoke all created object URLs
-    this.audioUrls.forEach(url => {
-      try {
-        URL.revokeObjectURL(url);
-      } catch (error) {
-        console.error('Error revoking URL:', error);
+    // Clean up audio URLs
+    this.messages.forEach(msg => {
+      if (msg.audioUrl) {
+        URL.revokeObjectURL(msg.audioUrl);
       }
     });
-    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 {
@@ -149,7 +139,6 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
     ).subscribe({
       next: (env) => {
         this.sttAvailable = env.stt_engine !== 'no_stt';
-        this.environmentService.setSTTEnabled(this.sttAvailable);
         if (!this.sttAvailable) {
           this.useSTT = false;
         }
@@ -157,26 +146,26 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
       error: (err) => {
         console.error('Failed to check STT availability:', err);
         this.sttAvailable = false;
-        this.environmentService.setSTTEnabled(false);
       }
     });
   }
   
-  startRealtimeChat(): void {
+  async startRealtimeChat(): Promise<void> {
     if (!this.selectedProject) {
       this.error = 'Please select a project first';
+      this.snackBar.open(this.error, 'Close', { duration: 3000 });
       return;
     }
     
     if (!this.sttAvailable) {
       this.error = 'STT is not configured. Please configure it in Environment settings.';
+      this.snackBar.open(this.error, 'Close', { duration: 5000 });
       return;
     }
     
     this.loading = true;
     this.error = '';
     
-    // Start a new session for realtime chat
     this.api.startChat(this.selectedProject).pipe(
       takeUntil(this.destroyed$)
     ).subscribe({
@@ -191,17 +180,21 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
         this.loading = false;
       },
       error: (err) => {
-        this.error = err.error?.detail || 'Failed to start realtime session';
+        this.error = this.getErrorMessage(err);
         this.loading = false;
-        console.error('Start realtime chat error:', err);
+        this.snackBar.open(this.error, 'Close', { 
+          duration: 5000,
+          panelClass: 'error-snackbar'
+        });
       }
     });
   }
   
-  private openRealtimeDialog(sessionId: string): void {
-    // Dynamic import to reduce initial bundle size
-    import('../chat/realtime-chat.component').then(module => {
-      const dialogRef = this.dialog.open(module.RealtimeChatComponent, {
+  private async openRealtimeDialog(sessionId: string): Promise<void> {
+    try {
+      const { default: RealtimeChatComponent } = await import('./realtime-chat.component');
+      
+      const dialogRef = this.dialog.open(RealtimeChatComponent, {
         width: '90%',
         maxWidth: '900px',
         height: '85vh',
@@ -221,9 +214,8 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
         localStorage.removeItem('current_session_id');
         localStorage.removeItem('current_project');
         
-        // If session was active, we might want to end it
-        if (result === 'session_active') {
-          // Optionally end the session on backend
+        // If session was active, end it
+        if (result === 'session_active' && sessionId) {
           this.api.endSession(sessionId).pipe(
             takeUntil(this.destroyed$)
           ).subscribe({
@@ -232,22 +224,19 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
           });
         }
       });
-    }).catch(error => {
-      console.error('Failed to load realtime chat component:', error);
-      this.error = 'Failed to open realtime chat';
-      this.loading = false;
-    });
-  }
-  
-  // Alternative: Route navigation
-  private navigateToRealtimeChat(sessionId: string): void {
-    this.router.navigate(['/realtime-chat', sessionId], {
-      queryParams: { project: this.selectedProject }
-    });
+    } catch (error) {
+      console.error('Failed to load realtime chat:', error);
+      this.snackBar.open('Failed to open realtime chat', 'Close', {
+        duration: 3000,
+        panelClass: 'error-snackbar'
+      });
+    }
   }
   
   loadProjects(): void {
     this.loading = true;
+    this.error = '';
+    
     this.api.getChatProjects().pipe(
       takeUntil(this.destroyed$)
     ).subscribe({
@@ -261,32 +250,33 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
       error: (err) => {
         this.error = 'Failed to load projects';
         this.loading = false;
-        console.error('Load projects error:', err);
+        this.snackBar.open(this.error, 'Close', {
+          duration: 5000,
+          panelClass: 'error-snackbar'
+        });
       }
     });
   }
 
   checkTTSAvailability(): void {
-    // Subscribe to environment changes
+    // Subscribe to environment updates
     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;
         }
       }
     });
     
-    // Also get current environment
+    // Get current environment
     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;
         }
@@ -295,7 +285,10 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
   }
   
   startChat(): void {
-    if (!this.selectedProject) return;
+    if (!this.selectedProject) {
+      this.snackBar.open('Please select a project', 'Close', { duration: 3000 });
+      return;
+    }
     
     this.loading = true;
     this.error = '';
@@ -321,9 +314,12 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
         }
       },
       error: (err) => {
-        this.error = err.error?.detail || 'Failed to start session';
+        this.error = this.getErrorMessage(err);
         this.loading = false;
-        console.error('Start chat error:', err);
+        this.snackBar.open(this.error, 'Close', {
+          duration: 5000,
+          panelClass: 'error-snackbar'
+        });
       }
     });
   }
@@ -366,55 +362,64 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
         }
       },
       error: (err) => {
+        const errorMsg = this.getErrorMessage(err);
         this.messages.push({
           author: 'assistant',
-          text: '⚠️ ' + (err.error?.detail || 'Failed to send message. Please try again.'),
+          text: '⚠️ ' + errorMsg,
           timestamp: new Date()
         });
         this.loading = false;
         this.shouldScroll = true;
-        console.error('Chat error:', err);
       }
     });
   }
 
   generateTTS(text: string, messageIndex: number): void {
-    if (!this.ttsAvailable) return;
+    if (!this.ttsAvailable || messageIndex < 0 || messageIndex >= this.messages.length) return;
     
     this.api.generateTTS(text).pipe(
       takeUntil(this.destroyed$)
     ).subscribe({
       next: (audioBlob) => {
         const audioUrl = URL.createObjectURL(audioBlob);
-        this.audioUrls.push(audioUrl); // Track for cleanup
         
-        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);
-          }
+        // Clean up old audio URL if exists
+        if (this.messages[messageIndex].audioUrl) {
+          URL.revokeObjectURL(this.messages[messageIndex].audioUrl!);
+        }
+        
+        this.messages[messageIndex].audioUrl = audioUrl;
+        
+        // Auto-play the latest message
+        if (messageIndex === this.messages.length - 1) {
+          setTimeout(() => this.playAudio(audioUrl), 100);
         }
       },
       error: (err) => {
         console.error('TTS generation error:', err);
-        // Don't show error to user, just silently fail TTS
+        this.snackBar.open('Failed to generate audio', 'Close', {
+          duration: 3000,
+          panelClass: 'error-snackbar'
+        });
       }
     });
   }
 
   playAudio(audioUrl: string): void {
-    if (!this.audioPlayer?.nativeElement) return;
-    
-    // Stop any currently playing audio
-    this.stopAudio();
+    if (!this.audioPlayer || !audioUrl) return;
     
     const audio = this.audioPlayer.nativeElement;
+    
+    // Stop current audio if playing
+    if (!audio.paused) {
+      audio.pause();
+      audio.currentTime = 0;
+    }
+    
     audio.src = audioUrl;
     
-    // Set up audio visualization if context exists
-    if (this.audioContext) {
+    // Set up audio visualization
+    if (this.audioContext && this.audioContext.state !== 'closed') {
       this.setupAudioVisualization(audio);
     }
     
@@ -422,7 +427,10 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
       this.playingAudio = true;
     }).catch(err => {
       console.error('Audio play error:', err);
-      this.playingAudio = false;
+      this.snackBar.open('Failed to play audio', 'Close', {
+        duration: 3000,
+        panelClass: 'error-snackbar'
+      });
     });
     
     audio.onended = () => {
@@ -436,56 +444,37 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
     
     audio.onerror = () => {
       this.playingAudio = false;
-      console.error('Audio loading error');
+      console.error('Audio playback error');
     };
   }
 
-  stopAudio(): void {
-    if (this.audioPlayer?.nativeElement) {
-      const audio = this.audioPlayer.nativeElement;
-      audio.pause();
-      audio.currentTime = 0;
-    }
-    this.playingAudio = false;
-    
-    if (this.animationId) {
-      cancelAnimationFrame(this.animationId);
-      this.animationId = undefined;
-    }
-  }
-
   setupAudioVisualization(audio: HTMLAudioElement): void {
-    if (!this.waveformCanvas?.nativeElement) return;
-    
-    // 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;
-      }
-    }
+    if (!this.audioContext || !this.waveformCanvas || this.audioContext.state === 'closed') return;
     
     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);
+      // Check if source already exists for this audio element
+      if (!(audio as any).audioSource) {
+        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);
+        
+        // Store reference to prevent recreation
+        (audio as any).audioSource = source;
+      }
       
       // Start visualization
       this.drawWaveform();
     } catch (error) {
-      console.error('Audio visualization setup error:', error);
+      console.error('Failed to setup audio visualization:', error);
     }
   }
 
   drawWaveform(): void {
-    if (!this.analyser || !this.waveformCanvas?.nativeElement) return;
+    if (!this.analyser || !this.waveformCanvas) return;
     
     const canvas = this.waveformCanvas.nativeElement;
     const ctx = canvas.getContext('2d');
@@ -495,7 +484,10 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
     const dataArray = new Uint8Array(bufferLength);
     
     const draw = () => {
-      if (!this.playingAudio) return;
+      if (!this.playingAudio) {
+        this.clearWaveform();
+        return;
+      }
       
       this.animationId = requestAnimationFrame(draw);
       
@@ -522,7 +514,7 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
   }
 
   clearWaveform(): void {
-    if (!this.waveformCanvas?.nativeElement) return;
+    if (!this.waveformCanvas) return;
     
     const canvas = this.waveformCanvas.nativeElement;
     const ctx = canvas.getContext('2d');
@@ -533,15 +525,23 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
   }
 
   endSession(): void {
+    // Clean up current session
     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)
+        error: (err) => console.error('Failed to end session:', err)
       });
     }
     
+    // Clean up audio URLs
+    this.messages.forEach(msg => {
+      if (msg.audioUrl) {
+        URL.revokeObjectURL(msg.audioUrl);
+      }
+    });
+    
+    // Reset state
     this.sessionId = null;
     this.messages = [];
     this.selectedProject = null;
@@ -549,28 +549,44 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
     this.error = '';
     
     // Clean up audio
-    this.stopAudio();
-    this.clearWaveform();
+    if (this.audioPlayer) {
+      this.audioPlayer.nativeElement.pause();
+      this.audioPlayer.nativeElement.src = '';
+    }
     
-    // Revoke audio URLs
-    this.audioUrls.forEach(url => {
-      try {
-        URL.revokeObjectURL(url);
-      } catch (error) {
-        console.error('Error revoking URL:', error);
-      }
-    });
-    this.audioUrls = [];
+    if (this.animationId) {
+      cancelAnimationFrame(this.animationId);
+      this.animationId = undefined;
+    }
+    
+    this.clearWaveform();
   }
 
   private scrollToBottom(): void {
     try {
       if (this.myScrollContainer?.nativeElement) {
-        this.myScrollContainer.nativeElement.scrollTop = 
-          this.myScrollContainer.nativeElement.scrollHeight;
+        const element = this.myScrollContainer.nativeElement;
+        element.scrollTop = element.scrollHeight;
       }
     } catch(err) {
       console.error('Scroll error:', err);
     }
   }
+
+  private getErrorMessage(error: any): string {
+    if (error.status === 0) {
+      return 'Unable to connect to server. Please check your connection.';
+    } else if (error.status === 401) {
+      return 'Session expired. Please login again.';
+    } else if (error.status === 403) {
+      return 'You do not have permission to use this feature.';
+    } else if (error.status === 404) {
+      return 'Project or session not found. Please try again.';
+    } else if (error.error?.detail) {
+      return error.error.detail;
+    } else if (error.message) {
+      return error.message;
+    }
+    return 'An unexpected error occurred. Please try again.';
+  }
 }