133 lines
4.3 KiB
JavaScript
133 lines
4.3 KiB
JavaScript
import React from 'react';
|
|
|
|
export default function InfoPanel({ isOpen, onToggle, activeSession, lastModel, lastTokenCount, selectedModel, onModelChange, models }) {
|
|
return (
|
|
<div className="flex-col" style={{
|
|
width: isOpen ? 'var(--panel-width)' : '56px',
|
|
flexShrink: 0,
|
|
background: 'var(--bg-surface)',
|
|
borderLeft: '1px solid var(--border)',
|
|
transition: 'width 0.2s ease',
|
|
overflow: 'hidden',
|
|
}}>
|
|
|
|
{/* Header */}
|
|
<div className="panel-header" style={{
|
|
justifyContent: isOpen ? 'space-between' : 'center',
|
|
padding: isOpen ? '0 16px 0 12px' : '0',
|
|
}}>
|
|
<button className="btn-icon" onClick={onToggle}>{isOpen ? '▶' : '◀'}</button>
|
|
{isOpen && <span className="text-base" style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>Session Info</span>}
|
|
</div>
|
|
|
|
{isOpen && (
|
|
<div className="flex-1 scroll-y" style={{ padding: '16px' }}>
|
|
|
|
{/* Model selector */}
|
|
<Section title="Model">
|
|
<select
|
|
value={selectedModel}
|
|
onChange={e => onModelChange(e.target.value)}
|
|
style={{
|
|
width: '100%',
|
|
padding: '8px 10px',
|
|
background: 'var(--bg-elevated)',
|
|
border: '1px solid var(--border)',
|
|
borderRadius: 'var(--radius-md)',
|
|
color: 'var(--text-primary)',
|
|
fontSize: '13px',
|
|
cursor: 'pointer',
|
|
outline: 'none',
|
|
}}
|
|
>
|
|
{models.map(m => (
|
|
<option key={m.value} value={m.value}>{m.label}</option>
|
|
))}
|
|
</select>
|
|
</Section>
|
|
|
|
{/* Session details */}
|
|
<Section title="Session">
|
|
{activeSession ? (
|
|
<div className="flex-col" style={{ gap: '8px' }}>
|
|
<InfoRow label="ID" value={activeSession.external_id} mono truncate />
|
|
<InfoRow label="Status" value={activeSession.isNew ? 'Unsaved' : 'Active'} accent={activeSession.isNew} />
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-muted">No session selected</p>
|
|
)}
|
|
</Section>
|
|
|
|
{/* Last response stats */}
|
|
<Section title="Last Response">
|
|
{lastModel ? (
|
|
<div className="flex-col" style={{ gap: '8px' }}>
|
|
<InfoRow label="Model" value={lastModel} />
|
|
<InfoRow label="Tokens" value={lastTokenCount > 0 ? lastTokenCount.toLocaleString() : '—'} />
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-muted">No response yet</p>
|
|
)}
|
|
</Section>
|
|
|
|
</div>
|
|
)}
|
|
|
|
{!isOpen && (
|
|
<div className="flex-col items-center" style={{ flex: 1, paddingTop: '16px', gap: '16px' }}>
|
|
<IconHint title="Model">M</IconHint>
|
|
<IconHint title="Session">S</IconHint>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Section({ title, children }) {
|
|
return (
|
|
<div style={{ marginBottom: '24px' }}>
|
|
<p className="label-upper" style={{ marginBottom: '10px' }}>{title}</p>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function InfoRow({ label, value, mono, truncate, accent }) {
|
|
return (
|
|
<div className="flex items-center" style={{ justifyContent: 'space-between', gap: '8px' }}>
|
|
<span className="text-sm text-muted flex-shrink">{label}</span>
|
|
<span style={{
|
|
fontSize: '12px',
|
|
color: accent ? 'var(--accent)' : 'var(--text-secondary)',
|
|
fontFamily: mono ? 'monospace' : 'inherit',
|
|
overflow: truncate ? 'hidden' : 'visible',
|
|
textOverflow: truncate ? 'ellipsis' : 'clip',
|
|
whiteSpace: truncate ? 'nowrap' : 'normal',
|
|
maxWidth: truncate ? '130px' : 'auto',
|
|
textAlign: 'right',
|
|
}}>
|
|
{value}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function IconHint({ title, children }) {
|
|
return (
|
|
<div title={title} style={{
|
|
width: '32px',
|
|
height: '32px',
|
|
borderRadius: 'var(--radius-md)',
|
|
background: 'var(--bg-elevated)',
|
|
border: '1px solid var(--border)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontSize: '12px',
|
|
color: 'var(--text-muted)',
|
|
cursor: 'default',
|
|
}}>
|
|
{children}
|
|
</div>
|
|
);
|
|
} |