feat(voice-session): Redesign voice session UI and functionality

Refactor the VoiceSession component to improve its UI and streamline its functionality. This includes updating imports, renaming and reordering elements for better clarity, and introducing new UI elements like a dedicated phone off button. Additionally, the AudioVisualizer component has been updated to visually differentiate between user and AI speech. This change aims to enhance the user experience and improve the modularity of the voice session interface.

components/AudioVisualizer.tsx

@@ -1,11 +1,13 @@
+
 import React from 'react';
 
 interface AudioVisualizerProps {
   level: number;
   active: boolean;
+  isAiSpeaking?: boolean;
 }
 
-const AudioVisualizer: React.FC<AudioVisualizerProps> = ({ level, active }) => {
+const AudioVisualizer: React.FC<AudioVisualizerProps> = ({ level, active, isAiSpeaking = false }) => {
   const barCount = 19;
   return (
     <div className="flex items-center justify-center gap-1.5 h-24 w-full px-4">
@@ -21,7 +23,7 @@ const AudioVisualizer: React.FC<AudioVisualizerProps> = ({ level, active }) => {
             key={i}
             className={`w-1.5 rounded-full transition-all duration-100 ease-out border-b border-white/5 ${
               active 
-                ? 'bg-teal-400 shadow-[0_0_15px_rgba(45,212,191,0.6)]' 
+                ? (isAiSpeaking ? 'bg-blue-400 shadow-[0_0_15px_rgba(59,130,246,0.6)]' : 'bg-teal-400 shadow-[0_0_15px_rgba(45,212,191,0.6)]')
                 : 'bg-slate-700/50'
             }`}
             style={{ 
@@ -35,4 +37,4 @@ const AudioVisualizer: React.FC<AudioVisualizerProps> = ({ level, active }) => {
   );
 };
 
-export default React.memo(AudioVisualizer);
+export default React.memo(AudioVisualizer);