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

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

@@ -105,23 +105,24 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
       ).subscribe(state => {
         console.log('📊 Conversation state:', state);
         this.currentState = state;
-        this.updateRecordingState(state);
         
-        // Visualization'ı state'e göre güncelle
+        // Update recording state based on conversation state
         if (state === 'listening') {
           this.isRecording = true;
+          // Make sure visualization is running
+          if (!this.animationId && this.isConversationActive) {
+            this.startVisualization();
+          }
         } else {
           this.isRecording = false;
         }
       });
       
-      // Subscribe to transcription
+      // Subscribe to transcription - HER ZAMAN GÖSTER
       this.conversationManager.transcription$.pipe(
         takeUntil(this.destroyed$)
       ).subscribe(text => {
-        if (text) {
-          console.log('🎙️ Transcription:', text);
-        }
+        console.log('🎙️ Transcription update:', text);
         this.currentTranscription = text;
       });
       
@@ -140,7 +141,7 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
         this.messages = initialMessages;
         this.shouldScrollToBottom = true;
       }
-    }
+  }
     
   ngAfterViewChecked(): void {
     if (this.shouldScrollToBottom) {
@@ -327,67 +328,85 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
   }
 
   private startVisualization(): void {
-    if (!this.audioVisualizer) return;
+    if (!this.audioVisualizer) {
+      console.warn('Audio visualizer element not found');
+      return;
+    }
     
     const canvas = this.audioVisualizer.nativeElement;
     const ctx = canvas.getContext('2d');
-    if (!ctx) return;
+    if (!ctx) {
+      console.warn('Could not get canvas context');
+      return;
+    }
+    
+    // Set canvas size
+    canvas.width = canvas.offsetWidth;
+    canvas.height = canvas.offsetHeight;
     
-    let lastVolume = 0;
+    let animationRunning = true;
     
-    // Subscribe to volume changes
+    // Subscribe to audio service volume level
     this.subscriptions.add(
       this.audioService.volumeLevel$.subscribe(volume => {
-        lastVolume = volume;
+        if (this.isRecording && volume > 0) {
+          this.drawVolumeVisualization(ctx, canvas, volume);
+        }
       })
     );
     
     // Animation loop
-    const draw = () => {
-      if (!this.isConversationActive) {
+    const animate = () => {
+      if (!animationRunning || !this.isConversationActive) {
         this.clearVisualization();
         return;
       }
       
-      // Clear canvas
-      ctx.fillStyle = '#333';
+      // Clear canvas with fade effect
+      ctx.fillStyle = 'rgba(26, 26, 26, 0.1)';
       ctx.fillRect(0, 0, canvas.width, canvas.height);
       
-      if (this.isRecording && lastVolume > 0) {
-        // Draw volume visualization
-        ctx.fillStyle = '#4caf50';
-        const barCount = 50;
-        const barWidth = canvas.width / barCount;
-        
-        for (let i = 0; i < barCount; i++) {
-          const barHeight = (Math.random() * 0.5 + 0.5) * lastVolume * canvas.height;
-          const x = i * barWidth;
-          const y = canvas.height - barHeight;
-          
-          ctx.fillRect(x, y, barWidth - 2, barHeight);
-        }
+      // 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();
       }
       
-      this.animationId = requestAnimationFrame(draw);
+      this.animationId = requestAnimationFrame(animate);
     };
     
-    draw();
+    animate();
   }
-  
-  private drawVolumeLevel(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, volume: number): void {
-    ctx.fillStyle = '#333';
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    
-    ctx.fillStyle = '#4caf50';
-    const barCount = 50;
+
+  private drawVolumeVisualization(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, volume: number): void {
+    const barCount = 64;
     const barWidth = canvas.width / barCount;
+    const barSpacing = 2;
     
     for (let i = 0; i < barCount; i++) {
-      const barHeight = (Math.random() * 0.5 + 0.5) * volume * canvas.height;
+      // Create wave effect
+      const waveOffset = Math.sin((i / barCount) * Math.PI * 2 + Date.now() * 0.002) * 0.3;
+      const barHeight = (volume * 0.7 + waveOffset + Math.random() * 0.3) * canvas.height * 0.8;
+      
       const x = i * barWidth;
-      const y = canvas.height - barHeight;
+      const y = (canvas.height - barHeight) / 2;
+      
+      // Gradient color based on height
+      const hue = 120; // Green
+      const saturation = 70;
+      const lightness = 40 + (barHeight / canvas.height) * 30;
+      
+      ctx.fillStyle = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+      ctx.fillRect(x + barSpacing / 2, y, barWidth - barSpacing, barHeight);
       
-      ctx.fillRect(x, y, barWidth - 2, barHeight);
+      // Mirror effect
+      ctx.fillStyle = `hsla(${hue}, ${saturation}%, ${lightness}%, 0.3)`;
+      ctx.fillRect(x + barSpacing / 2, canvas.height - y, barWidth - barSpacing, -barHeight * 0.3);
     }
   }
 
@@ -406,7 +425,7 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
     const canvas = this.audioVisualizer.nativeElement;
     const ctx = canvas.getContext('2d');
     if (ctx) {
-      ctx.fillStyle = '#333';
+      ctx.fillStyle = '#212121';
       ctx.fillRect(0, 0, canvas.width, canvas.height);
     }
   }