storme/nexusAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chat window now displays session name instead of UUID, and added delete confirmation for session

Browse Source
This commit is contained in:
Storme-bit
2026-04-13 04:35:49 -07:00
parent 4fd7f9824b
commit 630ec22d8a
6 changed files with 400 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
packages/chat-client/src/components/SessionModal.jsx
View File

@@ -1,108 +1,116 @@
import React, {useState, useEffect, useRef} from "react";
// SessionModal.jsx
import React, {useState, useEffect, useRef} from 'react';
export default function SessionModal({ session, onRename, onClose}) {
export default function SessionModal({ session, mode = 'settings', onRename, onDelete, onClose }) {
const [name, setName] = useState(session?.name || '');
const inputRef = useRef(null)
const inputRef = useRef(null);
//Focus input when modal opens
useEffect(() => {
inputRef.current?.focus();
inputRef.current?.select();
}, []);
if (mode === 'settings') {
inputRef.current?.focus();
inputRef.current?.select();
}
}, [mode]);
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 (e.key === 'Enter' && mode === 'settings') 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 onClick={onClose} style={{
position: 'fixed',
inset: 0,
background: 'rgba(0,0,0,0.5)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
zIndex: 100,
}}>
<div onClick={e => e.stopPropagation()} onKeyDown={handleKeyDown} style={{
background: 'var(--bg-surface)',
border: '1px solid var(--border)',
borderRadius: 'var(--radius-lg)',
padding: '24px',
width: '360px',
display: 'flex',
flexDirection: 'column',
gap: '16px',
}}>
{mode === 'settings' ? (
<>
<h2 style={{ fontSize: '15px', fontWeight: 600, color: 'var(--text-primary)' }}>
Session Settings
</h2>
<div className="flex-col" style={{ gap: '8px' }}>
<label className="label-upper">Name</label>
<input
ref={inputRef}
value={name}
onChange={e => setName(e.target.value)}
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>
<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>
</>
) : (
<>
<h2 style={{ fontSize: '15px', fontWeight: 600, color: 'var(--text-primary)' }}>
Delete Session
</h2>
<p className="text-sm text-secondary">
Are you sure you want to delete{' '}
<span style={{ color: 'var(--text-primary)', fontWeight: 500 }}>
{session.name || session.external_id}
</span>
? This will permanently remove all messages in this conversation.
</p>
<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-reset text-base"
onClick={() => { onDelete(session); onClose(); }}
style={{
padding: '8px 16px',
borderRadius: 'var(--radius-md)',
background: '#c0392b',
color: 'white',
}}
>Delete</button>
</div>
</>
)}
</div>
</div>
)
);
}