John Remillard
e92c489db5
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.
41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
|
|
import React from 'react';
|
|
|
|
interface AudioVisualizerProps {
|
|
level: number;
|
|
active: boolean;
|
|
isAiSpeaking?: boolean;
|
|
}
|
|
|
|
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">
|
|
{Array.from({ length: barCount }).map((_, i) => {
|
|
const center = (barCount - 1) / 2;
|
|
const dist = Math.abs(i - center);
|
|
const multiplier = Math.pow(0.88, dist);
|
|
const jitter = 0.8 + (Math.sin(i * 1.5) * 0.2);
|
|
const height = active ? Math.max(8, level * multiplier * jitter) : 6;
|
|
|
|
return (
|
|
<div
|
|
key={i}
|
|
className={`w-1.5 rounded-full transition-all duration-100 ease-out border-b border-white/5 ${
|
|
active
|
|
? (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={{
|
|
height: `${height}%`,
|
|
opacity: active ? 1 - (dist / barCount) : 0.3
|
|
}}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default React.memo(AudioVisualizer);
|