chat window now displays session name instead of UUID, and added delete confirmation for session
This commit is contained in:
Storme-bit
@@ -4,201 +4,212 @@ import { useContextMenu } from '../hooks/useContextMenu';
|
||||
import { renameSession, deleteSession } from '../api/orchestration';
|
||||
|
||||
export default function SessionList({ sessions, activeSession, onSelectSession, onNewChat, isOpen, onToggle, onSessionsChange }) {
|
||||
const [modalSession, setModalSession] = useState(null);
|
||||
const [hoveredId, setHoveredId] = useState(null);
|
||||
const { menu, open: openMenu, close: closeMenu } = useContextMenu();
|
||||
const [modalSession, setModalSession] = useState(null);
|
||||
const [hoveredId, setHoveredId] = useState(null);
|
||||
const { menu, open: openMenu, close: closeMenu } = useContextMenu();
|
||||
const [modalMode, setModalMode] = useState('settings');
|
||||
|
||||
function formatDate(ts) {
|
||||
if (!ts) return '';
|
||||
const date = new Date(ts * 1000);
|
||||
const now = new Date();
|
||||
const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
|
||||
if (diffDays === 0) return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
if (diffDays === 1) return 'Yesterday';
|
||||
if (diffDays < 7) return date.toLocaleDateString([], { weekday: 'long' });
|
||||
return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
|
||||
function formatDate(ts) {
|
||||
if (!ts) return '';
|
||||
const date = new Date(ts * 1000);
|
||||
const now = new Date();
|
||||
const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
|
||||
if (diffDays === 0) return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
if (diffDays === 1) return 'Yesterday';
|
||||
if (diffDays < 7) return date.toLocaleDateString([], { weekday: 'long' });
|
||||
return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
|
||||
}
|
||||
|
||||
function getPreview(session) {
|
||||
if (session.isNew) return 'New conversation';
|
||||
return session.name || session.external_id;
|
||||
}
|
||||
|
||||
async function handleRename(session, name) {
|
||||
try {
|
||||
await renameSession(session.external_id, name);
|
||||
onSessionsChange();
|
||||
} catch (err) {
|
||||
console.error('[SessionList] Rename failed:', err.message);
|
||||
}
|
||||
}
|
||||
|
||||
function getPreview(session) {
|
||||
if (session.isNew) return 'New conversation';
|
||||
return session.name || session.external_id;
|
||||
async function handleDelete(session) {
|
||||
try {
|
||||
await deleteSession(session.external_id);
|
||||
onSessionsChange();
|
||||
} catch (err) {
|
||||
console.error('[SessionList] Delete failed:', err.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRename(session, name) {
|
||||
try {
|
||||
await renameSession(session.external_id, name);
|
||||
onSessionsChange();
|
||||
} catch (err) {
|
||||
console.error('[SessionList] Rename failed:', err.message);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<div style={{
|
||||
width: isOpen ? 'var(--sidebar-width)' : '56px',
|
||||
flexShrink: 0,
|
||||
background: 'var(--bg-surface)',
|
||||
borderRight: '1px solid var(--border)',
|
||||
transition: 'width 0.2s ease',
|
||||
overflow: 'hidden',
|
||||
}} className="flex-col">
|
||||
|
||||
async function handleDelete(session) {
|
||||
try {
|
||||
await deleteSession(session.external_id);
|
||||
onSessionsChange();
|
||||
} catch (err) {
|
||||
console.error('[SessionList] Delete failed:', err.message);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{
|
||||
width: isOpen ? 'var(--sidebar-width)' : '56px',
|
||||
flexShrink: 0,
|
||||
background: 'var(--bg-surface)',
|
||||
borderRight: '1px solid var(--border)',
|
||||
transition: 'width 0.2s ease',
|
||||
overflow: 'hidden',
|
||||
}} className="flex-col">
|
||||
|
||||
{/* Header */}
|
||||
<div className="panel-header" style={{
|
||||
justifyContent: isOpen ? 'space-between' : 'center',
|
||||
padding: isOpen ? '0 12px 0 16px' : '0',
|
||||
}}>
|
||||
{isOpen && <span className="text-base" style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>Conversations</span>}
|
||||
<button className="btn-icon" onClick={onToggle}>{isOpen ? '◀' : '▶'}</button>
|
||||
</div>
|
||||
|
||||
{/* New chat button */}
|
||||
<div style={{ padding: isOpen ? '12px' : '12px 8px', flexShrink: 0 }}>
|
||||
<button className="btn-primary" onClick={onNewChat} style={{
|
||||
width: '100%',
|
||||
padding: isOpen ? '8px 12px' : '8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: isOpen ? 'flex-start' : 'center',
|
||||
gap: '8px',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<span style={{ fontSize: '18px', lineHeight: 1, flexShrink: 0 }}>+</span>
|
||||
{isOpen && <span>New Chat</span>}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Session list */}
|
||||
<div className="flex-1 scroll-y">
|
||||
{isOpen && sessions.map(session => {
|
||||
const isActive = activeSession?.external_id === session.external_id;
|
||||
const isHovered = hoveredId === session.external_id;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={session.external_id}
|
||||
onMouseEnter={() => setHoveredId(session.external_id)}
|
||||
onMouseLeave={() => setHoveredId(null)}
|
||||
onContextMenu={e => !session.isNew && openMenu(e, session)}
|
||||
style={{
|
||||
position: 'relative',
|
||||
background: isActive ? 'var(--bg-elevated)' : isHovered ? 'var(--bg-elevated)' : 'transparent',
|
||||
borderLeft: isActive ? '2px solid var(--accent)' : '2px solid transparent',
|
||||
transition: 'background 0.1s',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={() => onSelectSession(session)}
|
||||
className="btn-reset"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '10px 16px',
|
||||
textAlign: 'left',
|
||||
flexDirection: 'column',
|
||||
gap: '3px',
|
||||
}}
|
||||
>
|
||||
<div className="flex" style={{ justifyContent: 'space-between', gap: '8px', width: '100%' }}>
|
||||
<span className="text-base truncate" style={{
|
||||
color: isActive ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
fontWeight: isActive ? 500 : 400,
|
||||
flex: 1,
|
||||
}}>
|
||||
{getPreview(session)}
|
||||
</span>
|
||||
|
||||
{/* Hover action icons */}
|
||||
{isHovered && !session.isNew ? (
|
||||
<div className="flex flex-shrink" style={{ gap: '4px' }}
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<button
|
||||
className="btn-icon"
|
||||
title="Rename"
|
||||
onClick={() => setModalSession(session)}
|
||||
style={{ padding: '2px 4px', fontSize: '12px' }}
|
||||
>✎</button>
|
||||
<button
|
||||
className="btn-icon"
|
||||
title="Delete"
|
||||
onClick={() => handleDelete(session)}
|
||||
style={{ padding: '2px 4px', fontSize: '12px', color: '#ff6b6b' }}
|
||||
>✕</button>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-xs text-muted flex-shrink">
|
||||
{formatDate(session.updated_at)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{session.isNew && (
|
||||
<span className="text-xs text-accent" style={{ fontStyle: 'italic' }}>Unsaved</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{isOpen && sessions.length === 0 && (
|
||||
<div className="text-base text-muted" style={{ padding: '24px 16px', textAlign: 'center' }}>
|
||||
No conversations yet
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Header */}
|
||||
<div className="panel-header" style={{
|
||||
justifyContent: isOpen ? 'space-between' : 'center',
|
||||
padding: isOpen ? '0 12px 0 16px' : '0',
|
||||
}}>
|
||||
{isOpen && <span className="text-base" style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>Conversations</span>}
|
||||
<button className="btn-icon" onClick={onToggle}>{isOpen ? '◀' : '▶'}</button>
|
||||
</div>
|
||||
|
||||
{/* Context menu */}
|
||||
{menu && (
|
||||
<div
|
||||
onClick={e => e.stopPropagation()}
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: menu.y,
|
||||
left: menu.x,
|
||||
background: 'var(--bg-elevated)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--radius-md)',
|
||||
padding: '4px',
|
||||
zIndex: 50,
|
||||
minWidth: '140px',
|
||||
}}
|
||||
>
|
||||
<button className="btn-reset text-base" onClick={() => { setModalSession(menu.session); closeMenu(); }}
|
||||
style={{ width: '100%', padding: '8px 12px', borderRadius: 'var(--radius-sm)', justifyContent: 'flex-start', color: 'var(--text-primary)' }}
|
||||
onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-surface)'}
|
||||
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
|
||||
>
|
||||
✎ Rename
|
||||
</button>
|
||||
<button className="btn-reset text-base" onClick={() => { handleDelete(menu.session); closeMenu(); }}
|
||||
style={{ width: '100%', padding: '8px 12px', borderRadius: 'var(--radius-sm)', justifyContent: 'flex-start', color: '#ff6b6b' }}
|
||||
onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-surface)'}
|
||||
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
|
||||
>
|
||||
✕ Delete
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{/* New chat button */}
|
||||
<div style={{ padding: isOpen ? '12px' : '12px 8px', flexShrink: 0 }}>
|
||||
<button className="btn-primary" onClick={onNewChat} style={{
|
||||
width: '100%',
|
||||
padding: isOpen ? '8px 12px' : '8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: isOpen ? 'flex-start' : 'center',
|
||||
gap: '8px',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<span style={{ fontSize: '18px', lineHeight: 1, flexShrink: 0 }}>+</span>
|
||||
{isOpen && <span>New Chat</span>}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Rename modal */}
|
||||
{modalSession && (
|
||||
<SessionModal
|
||||
session={modalSession}
|
||||
onRename={handleRename}
|
||||
onClose={() => setModalSession(null)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
{/* Session list */}
|
||||
<div className="flex-1 scroll-y">
|
||||
{isOpen && sessions.map(session => {
|
||||
const isActive = activeSession?.external_id === session.external_id;
|
||||
const isHovered = hoveredId === session.external_id;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={session.external_id}
|
||||
onMouseEnter={() => setHoveredId(session.external_id)}
|
||||
onMouseLeave={() => setHoveredId(null)}
|
||||
onContextMenu={e => !session.isNew && openMenu(e, session)}
|
||||
style={{
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
alignItems: 'stretch',
|
||||
background: isActive ? 'var(--bg-elevated)' : isHovered ? 'var(--bg-elevated)' : 'transparent',
|
||||
borderLeft: isActive ? '2px solid var(--accent)' : '2px solid transparent',
|
||||
transition: 'background 0.1s',
|
||||
}}
|
||||
>
|
||||
{/* Session select button — no action icons inside */}
|
||||
<button
|
||||
onClick={() => onSelectSession(session)}
|
||||
className="btn-reset"
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: '10px 16px',
|
||||
paddingRight: isHovered && !session.isNew ? '4px' : '16px',
|
||||
textAlign: 'left',
|
||||
flexDirection: 'column',
|
||||
gap: '3px',
|
||||
minWidth: 0, // allows truncation to work
|
||||
}}
|
||||
>
|
||||
<div className="flex" style={{ gap: '8px', width: '100%' }}>
|
||||
<span className="text-base truncate" style={{
|
||||
color: isActive ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
fontWeight: isActive ? 500 : 400,
|
||||
flex: 1,
|
||||
}}>
|
||||
{getPreview(session)}
|
||||
</span>
|
||||
{!isHovered && (
|
||||
<span className="text-xs text-muted flex-shrink">
|
||||
{formatDate(session.updated_at)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{session.isNew && (
|
||||
<span className="text-xs text-accent" style={{ fontStyle: 'italic' }}>Unsaved</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Action icons — outside the button, alongside it */}
|
||||
{isHovered && !session.isNew && (
|
||||
<div className="flex items-center flex-shrink" style={{ gap: '2px', paddingRight: '8px' }}>
|
||||
<button
|
||||
className="btn-icon"
|
||||
title="Rename"
|
||||
onClick={() => { setModalMode('settings'); setModalSession(session); }}
|
||||
style={{ padding: '2px 4px', fontSize: '12px' }}
|
||||
>✎</button>
|
||||
<button
|
||||
className="btn-icon"
|
||||
title="Delete"
|
||||
onClick={() => { setModalMode('confirm-delete'); setModalSession(session); }}
|
||||
style={{ padding: '2px 4px', fontSize: '12px', color: '#ff6b6b' }}
|
||||
>✕</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{isOpen && sessions.length === 0 && (
|
||||
<div className="text-base text-muted" style={{ padding: '24px 16px', textAlign: 'center' }}>
|
||||
No conversations yet
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Context menu */}
|
||||
{menu && (
|
||||
<div
|
||||
onClick={e => e.stopPropagation()}
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: menu.y,
|
||||
left: menu.x,
|
||||
background: 'var(--bg-elevated)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--radius-md)',
|
||||
padding: '4px',
|
||||
zIndex: 50,
|
||||
minWidth: '140px',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
className="btn-reset text-base"
|
||||
onClick={() => { setModalMode('settings'); setModalSession(menu.session); closeMenu(); }}
|
||||
style={{ width: '100%', padding: '8px 12px', borderRadius: 'var(--radius-sm)', justifyContent: 'flex-start', color: 'var(--text-primary)' }}
|
||||
onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-surface)'}
|
||||
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
|
||||
>
|
||||
✎ Rename
|
||||
</button>
|
||||
<button className="btn-reset text-base"
|
||||
onClick={() => { setModalMode('confirm-delete'); setModalSession(menu.session); closeMenu(); }}
|
||||
style={{
|
||||
width: '100%', padding: '8px 12px', borderRadius: 'var(--radius-sm)',
|
||||
justifyContent: 'flex-start', color: '#ff6b6b'
|
||||
}}
|
||||
onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-surface)'}
|
||||
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
|
||||
>✕ Delete</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Rename modal */}
|
||||
{modalSession && (
|
||||
<SessionModal
|
||||
session={modalSession}
|
||||
mode={modalMode}
|
||||
onRename={handleRename}
|
||||
onDelete={handleDelete}
|
||||
onClose={() => setModalSession(null)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user