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

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

@@ -584,8 +584,18 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
     const ctx = canvas.getContext('2d');
     if (!ctx) return;
     
-    // Get volume level and visualize
-    const draw = async () => {
+    // Subscribe to volume changes
+    this.subscriptions.add(
+      this.audioService.volumeLevel$.subscribe(volume => {
+        // Use actual volume data for visualization
+        if (this.isRecording && volume > 0) {
+          this.drawVolumeLevel(ctx, canvas, volume);
+        }
+      })
+    );
+    
+    // Start animation loop
+    const draw = () => {
       if (!this.isConversationActive) {
         this.clearVisualization();
         return;
@@ -594,37 +604,10 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
       ctx.fillStyle = '#333';
       ctx.fillRect(0, 0, canvas.width, canvas.height);
       
-      if (this.isRecording) {
-        // 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);
-          }
-        }
+      if (!this.isRecording) {
+        // Not recording, just show empty background
+        this.animationId = requestAnimationFrame(draw);
+        return;
       }
       
       this.animationId = requestAnimationFrame(draw);
@@ -632,6 +615,23 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
     
     draw();
   }
+  
+  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;
+    const barWidth = canvas.width / barCount;
+    
+    for (let i = 0; i < barCount; i++) {
+      const barHeight = (Math.random() * 0.5 + 0.5) * volume * canvas.height;
+      const x = i * barWidth;
+      const y = canvas.height - barHeight;
+      
+      ctx.fillRect(x, y, barWidth - 2, barHeight);
+    }
+  }
 
   private stopVisualization(): void {
     if (this.animationId) {