| function formatRelativeTime(isoString) { |
| const date = new Date(isoString) |
| const diffMs = Date.now() - date.getTime() |
| const diffMinutes = Math.round(diffMs / 60000) |
|
|
| if (diffMinutes < 1) return 'just now' |
| if (diffMinutes < 60) return `${diffMinutes}m ago` |
|
|
| const diffHours = Math.round(diffMinutes / 60) |
| if (diffHours < 24) return `${diffHours}h ago` |
|
|
| const diffDays = Math.round(diffHours / 24) |
| if (diffDays < 7) return `${diffDays}d ago` |
|
|
| return date.toLocaleDateString() |
| } |
|
|
| export default function Sidebar({ |
| conversations, |
| activeId, |
| onSelect, |
| onNew, |
| onDelete, |
| }) { |
| return ( |
| <aside className="sidebar"> |
| <div className="sidebar-header"> |
| <div className="brand"> |
| <span className="brand-mark">Æ</span> |
| <span className="brand-name">Aegis</span> |
| </div> |
| <button className="new-chat-btn" onClick={onNew}> |
| + New chat |
| </button> |
| </div> |
| |
| <div className="conversation-list"> |
| {conversations.length === 0 && ( |
| <div className="empty-history">No conversations yet</div> |
| )} |
| |
| {conversations.map((conversation) => ( |
| <div |
| key={conversation.id} |
| className={ |
| 'conversation-item' + |
| (conversation.id === activeId ? ' active' : '') |
| } |
| onClick={() => onSelect(conversation.id)} |
| > |
| <div className="conversation-title">{conversation.title}</div> |
| <div className="conversation-meta"> |
| <span>{formatRelativeTime(conversation.updated_at)}</span> |
| <button |
| className="delete-btn" |
| title="Delete conversation" |
| onClick={(event) => { |
| event.stopPropagation() |
| onDelete(conversation.id) |
| }} |
| > |
| × |
| </button> |
| </div> |
| </div> |
| ))} |
| </div> |
| |
| <div className="sidebar-footer"> |
| Local model · RAG enabled |
| </div> |
| </aside> |
| ) |
| } |
|
|
