Spaces:
Sleeping
Sleeping
File size: 2,804 Bytes
c05ab04 060fd46 c05ab04 060fd46 c05ab04 060fd46 c05ab04 | 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 | import { X, RefreshCw, CheckCircle2, XCircle, AlertCircle } from 'lucide-react';
import { neonModelDisplayName } from '../utils/displayName';
const STATUS_META = {
online: { label: 'Online', Icon: CheckCircle2, className: 'status-online' },
unavailable: { label: 'Unavailable', Icon: AlertCircle, className: 'status-unavailable' },
error: { label: 'Error', Icon: XCircle, className: 'status-error' },
};
export default function ModelStatusModal({ statuses, loading, onClose, onRefresh }) {
return (
<div className="modal-overlay" onClick={onClose}>
<div className="modal-panel model-status-modal" onClick={(e) => e.stopPropagation()}>
<div className="modal-header">
<h2 className="modal-title">Model Status</h2>
<div className="modal-header-actions">
<button className="icon-btn" onClick={onRefresh} title="Re-check models" disabled={loading}>
<RefreshCw size={16} className={loading ? 'spin' : ''} />
</button>
<button className="icon-btn" onClick={onClose} title="Close">
<X size={16} />
</button>
</div>
</div>
<div className="modal-body">
{loading && !statuses.length ? (
<p className="model-status-empty">Checking models…</p>
) : !statuses.length ? (
<p className="model-status-empty">No models configured.</p>
) : (
<ul className="model-status-list">
{statuses.map((s) => {
const meta = STATUS_META[s.status] || STATUS_META.unavailable;
const { Icon } = meta;
const displayName = s.is_neon
? neonModelDisplayName(s.model_name || s.model_id)
: s.model_name;
return (
<li key={`${s.is_neon ? 'neon' : s.provider}:${s.model_id}`} className="model-status-row">
<div className="model-status-main">
<span className="model-status-names">
<span className="model-status-provider">{s.provider_name}</span>
<span className="model-status-model">{displayName}</span>
</span>
<span className={`model-status-badge ${meta.className}`}>
<Icon size={12} />
{meta.label}
</span>
</div>
{s.status === 'error' && s.error && (
<pre className="model-status-error">{s.error}</pre>
)}
</li>
);
})}
</ul>
)}
</div>
</div>
</div>
);
}
|