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

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

@@ -44,6 +44,8 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
   messages: ConversationMessage[] = [];
   error = '';
   loading = false;
+
+  isVisualizationActive = false;
   
   conversationStates: ConversationState[] = [
     'idle', 'listening', 'processing_stt', 'processing_llm', 'processing_tts', 'playing_audio'
@@ -66,7 +68,7 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
     this.projectName = data.projectName || null;
   }
 
-ngOnInit(): void {
+  ngOnInit(): void {
     console.log('🎤 RealtimeChat component initialized');
     console.log('Session ID:', this.sessionId);
     console.log('Project Name:', this.projectName);
@@ -103,25 +105,19 @@ ngOnInit(): void {
     this.conversationManager.currentState$.pipe(
       takeUntil(this.destroyed$)
     ).subscribe(state => {
-      console.log('📊 Conversation state:', state);
+      console.log('📊 UI received conversation state:', state);
       this.currentState = state;
       
-      // Update recording state based on conversation state
-      // SADECE listening state'inde recording true olmalı
-      this.isRecording = (state === 'listening');
-      
-      // Eğer listening state'e geçtiyse ve konuşma aktifse visualization'ı başlat
-      if (state === 'listening' && this.isConversationActive && !this.animationId) {
-        console.log('🎤 Starting visualization for listening state');
-        this.startVisualization();
-      }
+      // State ne olursa olsun, konuşma aktifse recording true
+      this.isRecording = this.isConversationActive && state !== 'error';
+      console.log('🎤 Recording state updated:', this.isRecording, 'State:', state);
     });
     
     // Subscribe to transcription
     this.conversationManager.transcription$.pipe(
       takeUntil(this.destroyed$)
     ).subscribe(text => {
-      console.log('🎙️ Transcription update:', text);
+      console.log('🎙️ Transcription update:', text ? `"${text}"` : '(empty)');
       this.currentTranscription = text;
     });
     
@@ -182,8 +178,10 @@ ngOnInit(): void {
       await this.conversationManager.startConversation(this.sessionId!);
       this.isConversationActive = true;
       
-      // Visualization'ı başlat
+      // Visualization'ı başlat ve aktif olarak işaretle
+      this.isVisualizationActive = true;
       this.startVisualization();
+      console.log('✅ Conversation and visualization started');
       
       this.snackBar.open('Konuşma başlatıldı', 'Close', {
         duration: 2000
@@ -203,6 +201,7 @@ ngOnInit(): void {
   private stopConversation(): void {
     this.conversationManager.stopConversation();
     this.isConversationActive = false;
+    this.isVisualizationActive = false;
     this.stopVisualization();
     
     this.snackBar.open('Konuşma sonlandırıldı', 'Close', {
@@ -319,6 +318,11 @@ ngOnInit(): void {
       return;
     }
     
+    if (this.animationId) {
+      console.log('🎨 Visualization already running');
+      return;
+    }
+    
     const canvas = this.audioVisualizer.nativeElement;
     const ctx = canvas.getContext('2d');
     if (!ctx) {
@@ -330,12 +334,13 @@ ngOnInit(): void {
     canvas.width = canvas.offsetWidth;
     canvas.height = canvas.offsetHeight;
     
-    let animationRunning = true;
+    console.log('🎨 Starting continuous visualization');
     
     // Subscribe to audio service volume level
     this.subscriptions.add(
       this.audioService.volumeLevel$.subscribe(volume => {
-        if (this.isRecording && volume > 0) {
+        // Konuşma aktif olduğu sürece her zaman visualize et
+        if (this.isVisualizationActive) {
           this.drawVolumeVisualization(ctx, canvas, volume);
         }
       })
@@ -343,7 +348,9 @@ ngOnInit(): void {
     
     // Animation loop
     const animate = () => {
-      if (!animationRunning || !this.isConversationActive) {
+      // Visualization aktif olduğu sürece devam et
+      if (!this.isVisualizationActive) {
+        console.log('🎨 Stopping animation - visualization inactive');
         this.clearVisualization();
         return;
       }
@@ -352,16 +359,13 @@ ngOnInit(): void {
       ctx.fillStyle = 'rgba(26, 26, 26, 0.1)';
       ctx.fillRect(0, 0, canvas.width, canvas.height);
       
-      // Draw visualization only when recording
-      if (this.isRecording) {
-        // Draw center line
-        ctx.strokeStyle = 'rgba(76, 175, 80, 0.3)';
-        ctx.lineWidth = 1;
-        ctx.beginPath();
-        ctx.moveTo(0, canvas.height / 2);
-        ctx.lineTo(canvas.width, canvas.height / 2);
-        ctx.stroke();
-      }
+      // Always draw center line
+      ctx.strokeStyle = 'rgba(76, 175, 80, 0.3)';
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(0, canvas.height / 2);
+      ctx.lineTo(canvas.width, canvas.height / 2);
+      ctx.stroke();
       
       this.animationId = requestAnimationFrame(animate);
     };