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

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

@@ -586,30 +586,39 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
     const ctx = canvas.getContext('2d');
     if (!ctx) return;
     
+    let lastVolume = 0;
+    
     // 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);
-        }
+        lastVolume = volume;
       })
     );
     
-    // Start animation loop
+    // Animation loop
     const draw = () => {
       if (!this.isConversationActive) {
         this.clearVisualization();
         return;
       }
       
+      // Clear canvas
       ctx.fillStyle = '#333';
       ctx.fillRect(0, 0, canvas.width, canvas.height);
       
-      if (!this.isRecording) {
-        // Not recording, just show empty background
-        this.animationId = requestAnimationFrame(draw);
-        return;
+      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);
+        }
       }
       
       this.animationId = requestAnimationFrame(draw);