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

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

@@ -40,12 +40,9 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
   isRecording = false;
   isPlayingAudio = false;
   currentState: ConversationState = 'idle';
-  currentTranscription = '';
   messages: ConversationMessage[] = [];
   error = '';
   loading = false;
-
-  isVisualizationActive = false;
   
   conversationStates: ConversationState[] = [
     'idle', 'listening', 'processing_stt', 'processing_llm', 'processing_tts', 'playing_audio'
@@ -56,6 +53,7 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
   private shouldScrollToBottom = false;
   private animationId: number | null = null;
   private currentAudio: HTMLAudioElement | null = null;
+  private volumeUpdateSubscription?: Subscription;
 
   constructor(
     private conversationManager: ConversationManagerService,
@@ -105,20 +103,18 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
     this.conversationManager.currentState$.pipe(
       takeUntil(this.destroyed$)
     ).subscribe(state => {
-      console.log('📊 UI received conversation state:', state);
+      console.log('📊 Conversation state:', state);
       this.currentState = state;
       
-      // 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 ? `"${text}"` : '(empty)');
-      this.currentTranscription = text;
+      // Update recording state based on conversation state
+      this.isRecording = (state === 'listening');
+      
+      // Start/stop visualization based on state
+      if (state === 'listening' && this.isConversationActive) {
+        this.startVisualization();
+      } else {
+        this.stopVisualization();
+      }
     });
     
     // Subscribe to errors
@@ -137,7 +133,7 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
       this.shouldScrollToBottom = true;
     }
   }
-
+  
   ngAfterViewChecked(): void {
     if (this.shouldScrollToBottom) {
       this.scrollToBottom();
@@ -313,13 +309,7 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
   }
 
   private startVisualization(): void {
-    if (!this.audioVisualizer) {
-      console.warn('Audio visualizer element not found');
-      return;
-    }
-    
-    if (this.animationId) {
-      console.log('🎨 Visualization already running');
+    if (!this.audioVisualizer || this.animationId) {
       return;
     }
     
@@ -334,33 +324,62 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
     canvas.width = canvas.offsetWidth;
     canvas.height = canvas.offsetHeight;
     
-    console.log('🎨 Starting continuous visualization');
+    // Create gradient for bars
+    const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
+    gradient.addColorStop(0, '#4caf50');
+    gradient.addColorStop(0.5, '#66bb6a');
+    gradient.addColorStop(1, '#4caf50');
     
-    // Subscribe to audio service volume level
-    this.subscriptions.add(
-      this.audioService.volumeLevel$.subscribe(volume => {
-        // Konuşma aktif olduğu sürece her zaman visualize et
-        if (this.isVisualizationActive) {
-          this.drawVolumeVisualization(ctx, canvas, volume);
-        }
-      })
-    );
+    let lastVolume = 0;
+    let targetVolume = 0;
+    const smoothingFactor = 0.8;
+    
+    // Subscribe to volume updates
+    this.volumeUpdateSubscription = this.audioService.volumeLevel$.subscribe(volume => {
+      targetVolume = volume;
+    });
     
     // Animation loop
     const animate = () => {
-      // Visualization aktif olduğu sürece devam et
-      if (!this.isVisualizationActive) {
-        console.log('🎨 Stopping animation - visualization inactive');
+      if (!this.isRecording || !this.isConversationActive) {
         this.clearVisualization();
         return;
       }
       
-      // Clear canvas with fade effect
-      ctx.fillStyle = 'rgba(26, 26, 26, 0.1)';
+      // Clear canvas
+      ctx.fillStyle = '#1a1a1a';
       ctx.fillRect(0, 0, canvas.width, canvas.height);
       
-      // Always draw center line
-      ctx.strokeStyle = 'rgba(76, 175, 80, 0.3)';
+      // Smooth volume transition
+      lastVolume = lastVolume * smoothingFactor + targetVolume * (1 - smoothingFactor);
+      
+      // Draw frequency bars
+      const barCount = 32;
+      const barWidth = canvas.width / barCount;
+      const barSpacing = 2;
+      
+      for (let i = 0; i < barCount; i++) {
+        // Create natural wave effect based on volume
+        const frequencyFactor = Math.sin((i / barCount) * Math.PI);
+        const timeFactor = Math.sin(Date.now() * 0.001 + i * 0.2) * 0.2 + 0.8;
+        const randomFactor = 0.8 + Math.random() * 0.2;
+        
+        const barHeight = lastVolume * canvas.height * 0.7 * frequencyFactor * timeFactor * randomFactor;
+        
+        const x = i * barWidth;
+        const y = (canvas.height - barHeight) / 2;
+        
+        // Draw bar
+        ctx.fillStyle = gradient;
+        ctx.fillRect(x + barSpacing / 2, y, barWidth - barSpacing, barHeight);
+        
+        // Draw reflection
+        ctx.fillStyle = 'rgba(76, 175, 80, 0.2)';
+        ctx.fillRect(x + barSpacing / 2, canvas.height - y, barWidth - barSpacing, -barHeight * 0.3);
+      }
+      
+      // Draw center line
+      ctx.strokeStyle = 'rgba(76, 175, 80, 0.5)';
       ctx.lineWidth = 1;
       ctx.beginPath();
       ctx.moveTo(0, canvas.height / 2);
@@ -372,7 +391,7 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
     
     animate();
   }
-
+  
   private drawVolumeVisualization(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, volume: number): void {
     const barCount = 64;
     const barWidth = canvas.width / barCount;
@@ -406,6 +425,11 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
       this.animationId = null;
     }
     
+    if (this.volumeUpdateSubscription) {
+      this.volumeUpdateSubscription.unsubscribe();
+      this.volumeUpdateSubscription = undefined;
+    }
+    
     this.clearVisualization();
   }
 
@@ -420,6 +444,7 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
     }
   }
 
+
   private cleanupAudio(): void {
     if (this.currentAudio) {
       this.currentAudio.pause();