Spaces:
Running
Running
File size: 2,459 Bytes
c0ddd13 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | import { X } from "lucide-react";
import { motion } from "motion/react";
import type { VoiceState } from "../../../hooks/useVoiceSession";
interface VoiceStatusBarProps {
voiceState: VoiceState;
onStop: () => void;
}
const STATE_LABELS: Record<VoiceState, string> = {
IDLE: "",
CONNECTING: "Connecting...",
LISTENING: "Listening...",
PROCESSING: "Processing...",
SPEAKING: "Agent is speaking",
ERROR: "Connection error",
};
const STATE_COLORS: Record<VoiceState, string> = {
IDLE: "",
CONNECTING: "bg-brand-green/10 text-brand-green border-brand-green/20",
LISTENING: "bg-brand-green/10 text-brand-green border-brand-green/20",
PROCESSING: "bg-brand-amber/10 text-brand-amber border-brand-amber/20",
SPEAKING: "bg-brand-cyan/10 text-brand-cyan border-brand-cyan/20",
ERROR: "bg-red-50 text-red-500 border-red-200",
};
export default function VoiceStatusBar({ voiceState, onStop }: VoiceStatusBarProps) {
return (
<motion.div
initial={{ opacity: 0, y: 6 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 6 }}
transition={{ duration: 0.2 }}
className={`flex items-center justify-between gap-2 px-3 py-1.5 rounded-xl border text-xs font-medium ${STATE_COLORS[voiceState]}`}
>
<div className="flex items-center gap-2">
<span className="relative flex h-2 w-2">
<span
className={`animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 ${
voiceState === "LISTENING"
? "bg-brand-green"
: voiceState === "SPEAKING"
? "bg-brand-cyan"
: voiceState === "PROCESSING"
? "bg-brand-amber"
: "bg-neutral-400"
}`}
/>
<span
className={`relative inline-flex rounded-full h-2 w-2 ${
voiceState === "LISTENING"
? "bg-brand-green"
: voiceState === "SPEAKING"
? "bg-brand-cyan"
: voiceState === "PROCESSING"
? "bg-brand-amber"
: "bg-neutral-400"
}`}
/>
</span>
<span>{STATE_LABELS[voiceState]}</span>
</div>
<button
onClick={onStop}
className="p-0.5 rounded hover:bg-black/10 transition-colors"
aria-label="End voice session"
>
<X className="h-3.5 w-3.5" />
</button>
</motion.div>
);
}
|