added rename/delete sessions modal to chat client

packages/chat-client/src/components/SessionModal.jsx

@@ -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>
+
+
+
+    )
+}