77 lines
1.8 KiB
TypeScript
77 lines
1.8 KiB
TypeScript
import type { AgentStatus } from '../types/realtime-events';
|
|
|
|
interface AgentStatusProps {
|
|
status: AgentStatus;
|
|
}
|
|
|
|
export default function AgentStatus({ status }: AgentStatusProps) {
|
|
function getStatusConfig() {
|
|
switch (status) {
|
|
case 'disconnected':
|
|
return {
|
|
color: 'bg-gray-500',
|
|
text: 'Disconnected',
|
|
icon: '○',
|
|
animate: false
|
|
};
|
|
case 'connecting':
|
|
return {
|
|
color: 'bg-yellow-500',
|
|
text: 'Connecting',
|
|
icon: '◐',
|
|
animate: true
|
|
};
|
|
case 'connected':
|
|
return {
|
|
color: 'bg-green-500',
|
|
text: 'Connected',
|
|
icon: '●',
|
|
animate: false
|
|
};
|
|
case 'listening':
|
|
return {
|
|
color: 'bg-blue-500',
|
|
text: 'Listening',
|
|
icon: '🎤',
|
|
animate: true
|
|
};
|
|
case 'processing':
|
|
return {
|
|
color: 'bg-purple-500',
|
|
text: 'Processing',
|
|
icon: '⚙',
|
|
animate: true
|
|
};
|
|
case 'tool_executing':
|
|
return {
|
|
color: 'bg-orange-500',
|
|
text: 'Executing Tool',
|
|
icon: '🔧',
|
|
animate: true
|
|
};
|
|
case 'speaking':
|
|
return {
|
|
color: 'bg-cyan-500',
|
|
text: 'Speaking',
|
|
icon: '🔊',
|
|
animate: true
|
|
};
|
|
}
|
|
}
|
|
|
|
const config = getStatusConfig();
|
|
|
|
return (
|
|
<div className="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-lg">
|
|
<div className="relative">
|
|
<div
|
|
className={`w-3 h-3 rounded-full ${config.color} ${config.animate ? 'animate-pulse' : ''}`}
|
|
/>
|
|
</div>
|
|
<span className="text-sm font-medium text-gray-700">
|
|
{config.icon} {config.text}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|