| import { useState } from 'react' |
| import styles from './Sidebar.module.css' |
|
|
| function formatThreadLabel(thread) { |
| |
| if (thread.preview) { |
| return thread.preview |
| } |
| const date = new Date(thread.created_at) |
| const today = new Date() |
| const isToday = date.toDateString() === today.toDateString() |
| return isToday |
| ? date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) |
| : date.toLocaleDateString([], { month: 'short', day: 'numeric' }) |
| } |
|
|
| export default function Sidebar({ threads, activeThreadId, loading, onSelectThread, onNewChat, onDeleteThread }) { |
| const [collapsed, setCollapsed] = useState(false) |
|
|
| return ( |
| <aside className={`${styles.sidebar} ${collapsed ? styles.collapsed : ''}`}> |
| <div className={styles.top}> |
| <button |
| type="button" |
| className={styles.toggle} |
| onClick={() => setCollapsed((c) => !c)} |
| aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'} |
| title={collapsed ? 'Expand' : 'Collapse'} |
| > |
| <span className={`${styles.chevron} ${collapsed ? styles.chevronRight : ''}`} aria-hidden="true"> |
| ‹ |
| </span> |
| </button> |
| |
| <button |
| type="button" |
| className={styles.newChat} |
| onClick={onNewChat} |
| disabled={loading} |
| title="New conversation" |
| > |
| <span className={styles.newChatIcon} aria-hidden="true">+</span> |
| <span className={styles.newChatLabel}>New chat</span> |
| </button> |
| </div> |
| |
| <nav className={styles.threadList} aria-label="Conversations"> |
| {threads.length === 0 && !collapsed && ( |
| <p className={styles.empty}>No conversations yet</p> |
| )} |
| {threads.map((t) => ( |
| <div |
| key={t.thread_id} |
| className={`${styles.threadItem} ${t.thread_id === activeThreadId ? styles.active : ''}`} |
| > |
| <button |
| type="button" |
| className={styles.threadButton} |
| onClick={() => onSelectThread(t.thread_id)} |
| disabled={loading} |
| title={collapsed ? formatThreadLabel(t) : t.thread_id} |
| > |
| <span className={styles.threadIcon} aria-hidden="true">🗪</span> |
| <span className={styles.threadLabel}>{formatThreadLabel(t)}</span> |
| </button> |
| {!collapsed && ( |
| <button |
| type="button" |
| className={styles.deleteThread} |
| onClick={(e) => { |
| e.stopPropagation() |
| onDeleteThread(t.thread_id) |
| }} |
| disabled={loading} |
| aria-label="Delete conversation" |
| title="Delete conversation" |
| > |
| 🗑 |
| </button> |
| )} |
| </div> |
| ))} |
| </nav> |
| </aside> |
| ) |
| } |
|
|
