Spaces:
Sleeping
Sleeping
| import ConversationItem from './ConversationItem.jsx' | |
| export default function Sidebar({ | |
| conversations, | |
| activeId, | |
| onSelectConv, | |
| onNewChat, | |
| onEditTitle, | |
| onDeleteChat, | |
| sidebarOpen, | |
| sidebarCollapsed, | |
| onToggleCollapse, | |
| onClose, | |
| }) { | |
| return ( | |
| <aside className={`sidebar ${sidebarOpen ? 'open' : ''} ${sidebarCollapsed ? 'collapsed' : ''}`}> | |
| <div className="sidebar-header"> | |
| <div className="brand-row"> | |
| <button className="icon-button ghost desktop-only" onClick={onToggleCollapse} aria-label="Toggle sidebar"> | |
| {sidebarCollapsed ? '»' : '«'} | |
| </button> | |
| </div> | |
| <div className="mobile-header-row"> | |
| <button className="primary new-chat-btn" onClick={onNewChat}> | |
| New chat | |
| </button> | |
| <button className="icon-button ghost mobile-only" onClick={onClose} aria-label="Close sidebar"> | |
| ✕ | |
| </button> | |
| </div> | |
| <button className="primary" onClick={onNewChat}> | |
| New chat | |
| </button> | |
| </div> | |
| <div className="conversation-list"> | |
| {conversations.map((conversation) => ( | |
| <ConversationItem | |
| key={conversation.id} | |
| conversation={conversation} | |
| isActive={conversation.id === activeId} | |
| onSelect={() => { | |
| onSelectConv(conversation.id) | |
| onClose() | |
| }} | |
| onEditTitle={onEditTitle} | |
| onDelete={onDeleteChat} | |
| /> | |
| ))} | |
| </div> | |
| </aside> | |
| ) | |
| } | |