Ken
79 lines
2.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
import { IconPlus, IconLogout } from '@tabler/icons-react'
|
|
import type { Session } from '../lib/types'
|
|
|
|
interface SessionSidebarProps {
|
|
sessions: Session[]
|
|
activeSessionId: string | null
|
|
onSelect: (id: string) => void
|
|
onCreate: () => void
|
|
onLogout: () => void
|
|
}
|
|
|
|
export function SessionSidebar({
|
|
sessions,
|
|
activeSessionId,
|
|
onSelect,
|
|
onCreate,
|
|
onLogout,
|
|
}: SessionSidebarProps) {
|
|
return (
|
|
<div className='sidebar'>
|
|
<div className='sidebar-header'>
|
|
<h3>Sessions</h3>
|
|
<div style={{ display: 'flex' }}>
|
|
<button
|
|
title='New session'
|
|
onClick={onCreate}
|
|
style={{
|
|
border: 'none',
|
|
background: 'transparent',
|
|
cursor: 'pointer',
|
|
padding: '4px',
|
|
}}
|
|
>
|
|
<IconPlus size={18} color='#7aa2f7' />
|
|
</button>
|
|
<button
|
|
title='Log out'
|
|
onClick={onLogout}
|
|
style={{
|
|
border: 'none',
|
|
background: 'transparent',
|
|
cursor: 'pointer',
|
|
padding: '4px',
|
|
}}
|
|
>
|
|
<IconLogout size={18} color='#8888aa' />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className='session-list'>
|
|
{sessions.length === 0 ? (
|
|
<div
|
|
style={{
|
|
color: '#6a6a8a',
|
|
fontSize: '0.85rem',
|
|
padding: '1rem',
|
|
}}
|
|
>
|
|
No sessions yet. Click + to start researching.
|
|
</div>
|
|
) : (
|
|
sessions.map(s => (
|
|
<div
|
|
key={s.session_id}
|
|
className={`session-item ${s.session_id === activeSessionId ? 'active' : ''}`}
|
|
onClick={() => onSelect(s.session_id)}
|
|
>
|
|
{s.session_id.slice(0, 12)}...
|
|
<div className='session-meta'>
|
|
{s.total_messages ?? 0} msgs · {s.status}
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|