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

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

@@ -6,7 +6,10 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatChipsModule } from '@angular/material/chips';
-import { Subscription } from 'rxjs';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Inject } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
 
 import { ConversationManagerService, ConversationState, ConversationMessage } from '../../services/conversation-manager.service';
 import { AudioStreamService } from '../../services/audio-stream.service';
@@ -21,7 +24,8 @@ import { AudioStreamService } from '../../services/audio-stream.service';
     MatIconModule,
     MatProgressSpinnerModule,
     MatDividerModule,
-    MatChipsModule
+    MatChipsModule,
+    MatSnackBarModule
   ],
   template: `
     <mat-card class="realtime-chat-container">
@@ -36,11 +40,23 @@ import { AudioStreamService } from '../../services/audio-stream.service';
             </mat-chip>
           </mat-chip-listbox>
         </mat-card-subtitle>
+        <button mat-icon-button class="close-button" (click)="closeDialog()">
+          <mat-icon>close</mat-icon>
+        </button>
       </mat-card-header>
 
       <mat-divider></mat-divider>
 
       <mat-card-content>
+        <!-- Error State -->
+        <div class="error-banner" *ngIf="error">
+          <mat-icon>error_outline</mat-icon>
+          <span>{{ error }}</span>
+          <button mat-icon-button (click)="retryConnection()">
+            <mat-icon>refresh</mat-icon>
+          </button>
+        </div>
+
         <!-- Transcription Display -->
         <div class="transcription-area" *ngIf="currentTranscription">
           <div class="transcription-label">Dinleniyor...</div>
@@ -49,7 +65,7 @@ import { AudioStreamService } from '../../services/audio-stream.service';
 
         <!-- Chat Messages -->
         <div class="chat-messages" #scrollContainer>
-          <div *ngFor="let msg of messages" 
+          <div *ngFor="let msg of messages; trackBy: trackByIndex" 
                [class]="'message ' + msg.role">
             <mat-icon class="message-icon">
               {{ msg.role === 'user' ? 'person' : 'smart_toy' }}
@@ -60,11 +76,18 @@ import { AudioStreamService } from '../../services/audio-stream.service';
               <button *ngIf="msg.audioUrl" 
                       mat-icon-button 
                       (click)="playAudio(msg.audioUrl)"
-                      class="audio-button">
-                <mat-icon>volume_up</mat-icon>
+                      class="audio-button"
+                      [disabled]="isPlayingAudio">
+                <mat-icon>{{ isPlayingAudio ? 'stop' : 'volume_up' }}</mat-icon>
               </button>
             </div>
           </div>
+          
+          <!-- Empty State -->
+          <div class="empty-state" *ngIf="messages.length === 0 && !isConversationActive">
+            <mat-icon>mic_off</mat-icon>
+            <p>Konuşmaya başlamak için aşağıdaki butona tıklayın</p>
+          </div>
         </div>
 
         <!-- Audio Visualizer -->
@@ -80,9 +103,13 @@ import { AudioStreamService } from '../../services/audio-stream.service';
         <button mat-raised-button 
                 color="primary" 
                 (click)="toggleConversation()"
-                [disabled]="!sessionId">
-          <mat-icon>{{ isConversationActive ? 'stop' : 'mic' }}</mat-icon>
-          {{ isConversationActive ? 'Konuşmayı Bitir' : 'Konuşmaya Başla' }}
+                [disabled]="!sessionId || loading">
+          @if (loading) {
+            <mat-spinner diameter="20"></mat-spinner>
+          } @else {
+            <mat-icon>{{ isConversationActive ? 'stop' : 'mic' }}</mat-icon>
+            {{ isConversationActive ? 'Konuşmayı Bitir' : 'Konuşmaya Başla' }}
+          }
         </button>
 
         <button mat-button 
@@ -91,6 +118,13 @@ import { AudioStreamService } from '../../services/audio-stream.service';
           <mat-icon>clear</mat-icon>
           Temizle
         </button>
+        
+        <button mat-button 
+                (click)="performBargeIn()"
+                [disabled]="!isConversationActive || currentState === 'idle' || currentState === 'listening'">
+          <mat-icon>pan_tool</mat-icon>
+          Kesme (Barge-in)
+        </button>
       </mat-card-actions>
     </mat-card>
   `,
@@ -101,6 +135,38 @@ import { AudioStreamService } from '../../services/audio-stream.service';
       height: 80vh;
       display: flex;
       flex-direction: column;
+      position: relative;
+    }
+
+    mat-card-header {
+      position: relative;
+      
+      .close-button {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+      }
+    }
+
+    .error-banner {
+      background-color: #ffebee;
+      color: #c62828;
+      padding: 12px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 16px;
+      
+      mat-icon {
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+      }
+      
+      span {
+        flex: 1;
+      }
     }
 
     .transcription-area {
@@ -109,6 +175,13 @@ import { AudioStreamService } from '../../services/audio-stream.service';
       border-radius: 8px;
       margin-bottom: 16px;
       min-height: 60px;
+      animation: pulse 2s infinite;
+    }
+
+    @keyframes pulse {
+      0% { opacity: 1; }
+      50% { opacity: 0.7; }
+      100% { opacity: 1; }
     }
 
     .transcription-label {
@@ -129,6 +202,8 @@ import { AudioStreamService } from '../../services/audio-stream.service';
       padding: 16px;
       background: #fafafa;
       border-radius: 8px;
+      min-height: 200px;
+      max-height: 400px;
     }
 
     .message {
@@ -164,6 +239,7 @@ import { AudioStreamService } from '../../services/audio-stream.service';
       padding: 12px 16px;
       border-radius: 12px;
       box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+      position: relative;
     }
 
     .message.user .message-content {
@@ -184,6 +260,19 @@ import { AudioStreamService } from '../../services/audio-stream.service';
       margin-top: 8px;
     }
 
+    .empty-state {
+      text-align: center;
+      padding: 60px 20px;
+      color: #999;
+      
+      mat-icon {
+        font-size: 48px;
+        width: 48px;
+        height: 48px;
+        margin-bottom: 16px;
+      }
+    }
+
     .audio-visualizer {
       width: 100%;
       height: 100px;
@@ -209,7 +298,14 @@ import { AudioStreamService } from '../../services/audio-stream.service';
 
     mat-card-actions {
       padding: 16px;
-      justify-content: space-between;
+      display: flex;
+      gap: 16px;
+      justify-content: flex-start;
+      
+      mat-spinner {
+        display: inline-block;
+        margin-right: 8px;
+      }
     }
   `]
 })
@@ -218,56 +314,72 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
   @ViewChild('audioVisualizer') private audioVisualizer!: ElementRef<HTMLCanvasElement>;
   
   sessionId: string | null = null;
+  projectName: string | null = null;
   isConversationActive = false;
   isRecording = false;
+  isPlayingAudio = false;
   currentState: ConversationState = 'idle';
   currentTranscription = '';
   messages: ConversationMessage[] = [];
+  error = '';
+  loading = false;
   
   conversationStates: ConversationState[] = [
     'idle', 'listening', 'processing_stt', 'processing_llm', 'processing_tts', 'playing_audio'
   ];
   
-  private subscriptions = new Subscription();
+  private destroyed$ = new Subject<void>();
   private shouldScrollToBottom = false;
   private animationId: number | null = null;
+  private currentAudio: HTMLAudioElement | null = null;
 
   constructor(
     private conversationManager: ConversationManagerService,
-    private audioService: AudioStreamService
-  ) {}
+    private audioService: AudioStreamService,
+    private snackBar: MatSnackBar,
+    public dialogRef: MatDialogRef<RealtimeChatComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { sessionId: string; projectName?: string }
+  ) {
+    this.sessionId = data.sessionId;
+    this.projectName = data.projectName || null;
+  }
 
   ngOnInit(): void {
-    // Get session ID from parent component or service
-    this.sessionId = localStorage.getItem('current_session_id');
+    // Check browser support
+    if (!AudioStreamService.checkBrowserSupport()) {
+      this.error = 'Tarayıcınız ses kaydını desteklemiyor. Lütfen modern bir tarayıcı kullanın.';
+      this.snackBar.open(this.error, 'Close', {
+        duration: 5000,
+        panelClass: 'error-snackbar'
+      });
+      return;
+    }
+    
+    // Check microphone permission
+    this.checkMicrophonePermission();
     
     // Subscribe to conversation state
-    this.subscriptions.add(
-      this.conversationManager.currentState$.subscribe(state => {
-        this.currentState = state;
-        this.updateRecordingState(state);
-      })
-    );
+    this.conversationManager.currentState$.pipe(
+      takeUntil(this.destroyed$)
+    ).subscribe(state => {
+      this.currentState = state;
+      this.updateRecordingState(state);
+    });
     
     // Subscribe to messages
-    this.subscriptions.add(
-      this.conversationManager.messages$.subscribe(messages => {
-        this.messages = messages;
-        this.shouldScrollToBottom = true;
-      })
-    );
+    this.conversationManager.messages$.pipe(
+      takeUntil(this.destroyed$)
+    ).subscribe(messages => {
+      this.messages = messages;
+      this.shouldScrollToBottom = true;
+    });
     
     // Subscribe to transcription
-    this.subscriptions.add(
-      this.conversationManager.transcription$.subscribe(text => {
-        this.currentTranscription = text;
-      })
-    );
-    
-    // Check browser support
-    if (!AudioStreamService.checkBrowserSupport()) {
-      alert('Tarayıcınız ses kaydını desteklemiyor. Lütfen modern bir tarayıcı kullanın.');
-    }
+    this.conversationManager.transcription$.pipe(
+      takeUntil(this.destroyed$)
+    ).subscribe(text => {
+      this.currentTranscription = text;
+    });
   }
 
   ngAfterViewChecked(): void {
@@ -278,8 +390,11 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
   }
 
   ngOnDestroy(): void {
-    this.subscriptions.unsubscribe();
+    this.destroyed$.next();
+    this.destroyed$.complete();
     this.stopVisualization();
+    this.cleanupAudio();
+    
     if (this.isConversationActive) {
       this.conversationManager.stopConversation();
     }
@@ -289,29 +404,99 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
     if (!this.sessionId) return;
     
     if (this.isConversationActive) {
-      this.conversationManager.stopConversation();
-      this.isConversationActive = false;
-      this.stopVisualization();
+      this.stopConversation();
     } else {
-      try {
-        await this.conversationManager.startConversation(this.sessionId);
-        this.isConversationActive = true;
-        this.startVisualization();
-      } catch (error) {
-        console.error('Failed to start conversation:', error);
-        alert('Konuşma başlatılamadı. Lütfen tekrar deneyin.');
-      }
+      await this.startConversation();
+    }
+  }
+
+  private async startConversation(): Promise<void> {
+    try {
+      this.loading = true;
+      this.error = '';
+      
+      await this.conversationManager.startConversation(this.sessionId!);
+      this.isConversationActive = true;
+      this.startVisualization();
+      
+      this.snackBar.open('Konuşma başlatıldı', 'Close', {
+        duration: 2000
+      });
+    } catch (error: any) {
+      console.error('Failed to start conversation:', error);
+      this.error = 'Konuşma başlatılamadı. Lütfen tekrar deneyin.';
+      this.snackBar.open(this.error, 'Close', {
+        duration: 5000,
+        panelClass: 'error-snackbar'
+      });
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  private stopConversation(): void {
+    this.conversationManager.stopConversation();
+    this.isConversationActive = false;
+    this.stopVisualization();
+    
+    this.snackBar.open('Konuşma sonlandırıldı', 'Close', {
+      duration: 2000
+    });
+  }
+
+  async retryConnection(): Promise<void> {
+    this.error = '';
+    if (!this.isConversationActive && this.sessionId) {
+      await this.startConversation();
     }
   }
 
   clearChat(): void {
     this.conversationManager.clearMessages();
     this.currentTranscription = '';
+    this.error = '';
   }
 
-  playAudio(audioUrl: string): void {
-    const audio = new Audio(audioUrl);
-    audio.play();
+  performBargeIn(): void {
+    this.conversationManager.performBargeIn();
+    this.snackBar.open('Kesme yapıldı', 'Close', {
+      duration: 1000
+    });
+  }
+
+  playAudio(audioUrl?: string): void {
+    if (!audioUrl) return;
+    
+    // Stop current audio if playing
+    if (this.currentAudio) {
+      this.currentAudio.pause();
+      this.currentAudio = null;
+      this.isPlayingAudio = false;
+      return;
+    }
+    
+    this.currentAudio = new Audio(audioUrl);
+    this.isPlayingAudio = true;
+    
+    this.currentAudio.play().catch(error => {
+      console.error('Audio playback error:', error);
+      this.isPlayingAudio = false;
+      this.currentAudio = null;
+    });
+    
+    this.currentAudio.onended = () => {
+      this.isPlayingAudio = false;
+      this.currentAudio = null;
+    };
+    
+    this.currentAudio.onerror = () => {
+      this.isPlayingAudio = false;
+      this.currentAudio = null;
+      this.snackBar.open('Ses çalınamadı', 'Close', {
+        duration: 2000,
+        panelClass: 'error-snackbar'
+      });
+    };
   }
 
   getStateLabel(state: ConversationState): string {
@@ -326,15 +511,43 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
     return labels[state] || state;
   }
 
+  closeDialog(): void {
+    const result = this.isConversationActive ? 'session_active' : 'closed';
+    this.dialogRef.close(result);
+  }
+
+  trackByIndex(index: number): number {
+    return index;
+  }
+
+  private async checkMicrophonePermission(): Promise<void> {
+    try {
+      const permission = await this.audioService.checkMicrophonePermission();
+      if (permission === 'denied') {
+        this.error = 'Mikrofon erişimi reddedildi. Lütfen tarayıcı ayarlarından izin verin.';
+        this.snackBar.open(this.error, 'Close', {
+          duration: 5000,
+          panelClass: 'error-snackbar'
+        });
+      }
+    } catch (error) {
+      console.error('Failed to check microphone permission:', error);
+    }
+  }
+
   private updateRecordingState(state: ConversationState): void {
     this.isRecording = state === 'listening';
   }
 
   private scrollToBottom(): void {
     try {
-      this.scrollContainer.nativeElement.scrollTop = 
-        this.scrollContainer.nativeElement.scrollHeight;
-    } catch(err) {}
+      if (this.scrollContainer?.nativeElement) {
+        const element = this.scrollContainer.nativeElement;
+        element.scrollTop = element.scrollHeight;
+      }
+    } catch(err) {
+      console.error('Scroll error:', err);
+    }
   }
 
   private startVisualization(): void {
@@ -344,27 +557,50 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
     const ctx = canvas.getContext('2d');
     if (!ctx) return;
     
-    // Simple visualization animation
-    const draw = () => {
+    // Get volume level and visualize
+    const draw = async () => {
+      if (!this.isConversationActive) {
+        this.clearVisualization();
+        return;
+      }
+      
       ctx.fillStyle = '#333';
       ctx.fillRect(0, 0, canvas.width, canvas.height);
       
-      // Draw random bars for demo
-      ctx.fillStyle = '#4caf50';
-      const barCount = 50;
-      const barWidth = canvas.width / barCount;
-      
-      for (let i = 0; i < barCount; i++) {
-        const barHeight = Math.random() * canvas.height * 0.8;
-        const x = i * barWidth;
-        const y = canvas.height - barHeight;
-        
-        ctx.fillRect(x, y, barWidth - 2, barHeight);
-      }
-      
       if (this.isRecording) {
-        this.animationId = requestAnimationFrame(draw);
+        // Get actual volume level
+        try {
+          const volume = await this.audioService.getVolumeLevel();
+          
+          // Draw volume bars
+          ctx.fillStyle = '#4caf50';
+          const barCount = 50;
+          const barWidth = canvas.width / barCount;
+          
+          for (let i = 0; i < barCount; i++) {
+            const barHeight = Math.random() * volume * canvas.height;
+            const x = i * barWidth;
+            const y = canvas.height - barHeight;
+            
+            ctx.fillRect(x, y, barWidth - 2, barHeight);
+          }
+        } catch (error) {
+          // Fallback to random visualization
+          ctx.fillStyle = '#4caf50';
+          const barCount = 50;
+          const barWidth = canvas.width / barCount;
+          
+          for (let i = 0; i < barCount; i++) {
+            const barHeight = Math.random() * canvas.height * 0.8;
+            const x = i * barWidth;
+            const y = canvas.height - barHeight;
+            
+            ctx.fillRect(x, y, barWidth - 2, barHeight);
+          }
+        }
       }
+      
+      this.animationId = requestAnimationFrame(draw);
     };
     
     draw();
@@ -376,14 +612,25 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
       this.animationId = null;
     }
     
-    // Clear canvas
-    if (this.audioVisualizer) {
-      const canvas = this.audioVisualizer.nativeElement;
-      const ctx = canvas.getContext('2d');
-      if (ctx) {
-        ctx.fillStyle = '#333';
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-      }
+    this.clearVisualization();
+  }
+
+  private clearVisualization(): void {
+    if (!this.audioVisualizer) return;
+    
+    const canvas = this.audioVisualizer.nativeElement;
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+      ctx.fillStyle = '#333';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+  }
+
+  private cleanupAudio(): void {
+    if (this.currentAudio) {
+      this.currentAudio.pause();
+      this.currentAudio = null;
+      this.isPlayingAudio = false;
     }
   }
 }