import { useEffect, useState } from 'react';
import { VoiceState } from '../../hooks/useVoice';
import './arthur.css';
interface StatusPanelProps {
voiceState: VoiceState;
connected: boolean;
ragActive: boolean;
docCount: number;
}
export function StatusPanel({ voiceState, connected, ragActive, docCount }: StatusPanelProps) {
const [time, setTime] = useState(new Date().toLocaleTimeString());
useEffect(() => {
const interval = setInterval(() => {
setTime(new Date().toLocaleTimeString());
}, 1000);
return () => clearInterval(interval);
}, []);
const voiceText = {
idle: 'Ready',
listening: 'Listening',
speaking: 'Speaking',
error: 'Error',
}[voiceState];
return (
<div className="info-panel">
<h3>System Status</h3>
<div className="status-row">
Time: <span className="status-value">{time}</span>
</div>
<div className="status-row">
Voice: <span className={`status-value ${voiceState === 'error' ? 'disconnected' : ''}`}>{voiceText}</span>
</div>
<div className="status-row">
Memory: <span className={`status-value ${connected ? 'connected' : 'warning'}`}>
{connected ? 'Connected' : 'Demo Mode'}
</span>
</div>
<div className="status-row">
RAG: <span className={`status-value ${ragActive ? 'connected' : 'disconnected'}`}>
{ragActive ? `Active (${(docCount / 1000).toFixed(1)}K docs)` : 'Offline'}
</span>
</div>
</div>
);
}
