added rename/delete sessions modal to chat client
This commit is contained in:
Storme-bit
@@ -48,6 +48,7 @@ export default function App() {
|
||||
onNewChat={createSession}
|
||||
isOpen={leftOpen}
|
||||
onToggle={() => setLeftOpen(o => !o)}
|
||||
onSessionsChange={refreshSessions}
|
||||
/>
|
||||
|
||||
<ChatWindow
|
||||
|
||||
@@ -1,103 +1,204 @@
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import SessionModal from './SessionModal';
|
||||
import { useContextMenu } from '../hooks/useContextMenu';
|
||||
import { renameSession, deleteSession } from '../api/orchestration';
|
||||
|
||||
export default function SessionList({ sessions, activeSession, onSelectSession, onNewChat, isOpen, onToggle }) {
|
||||
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' });
|
||||
}
|
||||
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();
|
||||
|
||||
function getPreview(session) {
|
||||
if (session.isNew) return 'New conversation';
|
||||
return session.external_id;
|
||||
}
|
||||
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' });
|
||||
}
|
||||
|
||||
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">
|
||||
function getPreview(session) {
|
||||
if (session.isNew) return 'New conversation';
|
||||
return session.name || session.external_id;
|
||||
}
|
||||
|
||||
{/* 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>
|
||||
async function handleRename(session, name) {
|
||||
try {
|
||||
await renameSession(session.external_id, name);
|
||||
onSessionsChange();
|
||||
} catch (err) {
|
||||
console.error('[SessionList] Rename failed:', err.message);
|
||||
}
|
||||
}
|
||||
|
||||
{/* 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>
|
||||
async function handleDelete(session) {
|
||||
try {
|
||||
await deleteSession(session.external_id);
|
||||
onSessionsChange();
|
||||
} catch (err) {
|
||||
console.error('[SessionList] Delete failed:', err.message);
|
||||
}
|
||||
}
|
||||
|
||||
{/* Session list */}
|
||||
<div className="flex-1 scroll-y">
|
||||
{isOpen && sessions.map(session => {
|
||||
const isActive = activeSession?.external_id === session.external_id;
|
||||
return (
|
||||
<button
|
||||
key={session.external_id}
|
||||
onClick={() => onSelectSession(session)}
|
||||
className="btn-reset"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '10px 16px',
|
||||
background: isActive ? 'var(--bg-elevated)' : 'transparent',
|
||||
borderLeft: isActive ? '2px solid var(--accent)' : '2px solid transparent',
|
||||
textAlign: 'left',
|
||||
flexDirection: 'column',
|
||||
gap: '3px',
|
||||
transition: 'background 0.1s',
|
||||
}}
|
||||
onMouseEnter={e => { if (!isActive) e.currentTarget.style.background = 'var(--bg-elevated)'; }}
|
||||
onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = 'transparent'; }}
|
||||
>
|
||||
<div className="flex truncate" style={{ justifyContent: 'space-between', gap: '8px' }}>
|
||||
<span className="text-base truncate" style={{
|
||||
color: isActive ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
fontWeight: isActive ? 500 : 400,
|
||||
flex: 1,
|
||||
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',
|
||||
}}>
|
||||
{getPreview(session)}
|
||||
</span>
|
||||
<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>
|
||||
);
|
||||
})}
|
||||
<span style={{ fontSize: '18px', lineHeight: 1, flexShrink: 0 }}>+</span>
|
||||
{isOpen && <span>New Chat</span>}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isOpen && sessions.length === 0 && (
|
||||
<div className="text-base text-muted" style={{ padding: '24px 16px', textAlign: 'center' }}>
|
||||
No conversations yet
|
||||
</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>
|
||||
</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>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
{/* Rename modal */}
|
||||
{modalSession && (
|
||||
<SessionModal
|
||||
session={modalSession}
|
||||
onRename={handleRename}
|
||||
onClose={() => setModalSession(null)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
import React, {useState, useEffect, useRef} from "react";
|
||||
|
||||
export default function SessionModal({ session, onRename, onClose}) {
|
||||
const [name, setName] = useState(session?.name || '');
|
||||
const inputRef = useRef(null)
|
||||
|
||||
//Focus input when modal opens
|
||||
useEffect(() => {
|
||||
inputRef.current?.focus();
|
||||
inputRef.current?.select();
|
||||
}, []);
|
||||
|
||||
function handleSubmit() {
|
||||
const trimmed = name.trim();
|
||||
if (!trimmed) return;
|
||||
|
||||
onRename(session, trimmed);
|
||||
onClose();
|
||||
}
|
||||
|
||||
function handleKeyDown(e) {
|
||||
if (e.key === 'Enter') handleSubmit();
|
||||
if(e.key === 'Escape') onClose();
|
||||
|
||||
}
|
||||
|
||||
if (!session) return null;
|
||||
return (
|
||||
//Backdrop
|
||||
<div
|
||||
onClick={onClose}
|
||||
style={{
|
||||
position:'fixed',
|
||||
inset: 0,
|
||||
background: 'rgba(0,0,0,0.5)',
|
||||
display:'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zIndex: 100,
|
||||
}}
|
||||
>
|
||||
{/* Modal - stop click propagating to backdrop */}
|
||||
<div
|
||||
onClick={e => e.stopPropagation()}
|
||||
style={{
|
||||
background: 'var(--bg-surface)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--radius-lg)',
|
||||
padding: '24px',
|
||||
width: '360px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '16px',
|
||||
}}
|
||||
>
|
||||
{/* Modal Header*/}
|
||||
<h2 style={{ fontSize: '15px', fontWeight: 600, color: 'var(--text-primary)' }}>
|
||||
Session Settings
|
||||
</h2>
|
||||
|
||||
{/* Modal Session name input*/}
|
||||
<div className="flex-col" style={{ gap: '8px' }}>
|
||||
<label className="label-upper">Name</label>
|
||||
<input
|
||||
ref={inputRef}
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Enter session name..."
|
||||
style={{
|
||||
background: 'var(--bg-elevated)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--radius-md)',
|
||||
padding: '8px 12px',
|
||||
color: 'var(--text-primary)',
|
||||
fontSize: '14px',
|
||||
outline: 'none',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Modal Buttons*/}
|
||||
<div className="flex" style={{ gap: '8px', justifyContent: 'flex-end' }}>
|
||||
<button className="btn-reset text-base text-muted"
|
||||
onClick={onClose}
|
||||
style={{ padding: '8px 14px', borderRadius: 'var(--radius-md)' }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
className="btn-primary"
|
||||
onClick={handleSubmit}
|
||||
disabled={!name.trim()}
|
||||
style={{ padding: '8px 16px' }}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user