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

2026-04-13 04:35:49 -07:00
parent 4fd7f9824b
commit 630ec22d8a
6 changed files with 400 additions and 309 deletions
--- a/docs/services/chat-client.md
+++ b/docs/services/chat-client.md
@@ -18,29 +18,63 @@ inference services. Served as static files by Caddy on Mini PC 2.
 - `vite` + `@vitejs/plugin-react` — build tooling

 ## Build
+
 ```bash
 cd packages/chat-client
-npm run build       # outputs to dist/
 npm run dev         # local dev server on port 5173
+npm run build       # outputs to dist/ for production
 ```

+After building, copy `dist/` contents to `/srv/nexusai` on Mini PC 2 for Caddy to serve.
+
 Vite bakes environment variables into the bundle at build time. The `.env`
 file is only needed on the machine running the build, not where files are served.

-After building, copy `dist/` contents to `/srv/nexusai` on Mini PC 2 for Caddy to serve.
-
 ## Environment Variables

 | Variable | Required | Default | Description |
 |---|---|---|---|
-| VITE_ORCHESTRATION_URL | No | `''` (empty) | Orchestration base URL. Must be set to the HTTPS domain in production to avoid mixed content errors. |
+| VITE_ORCHESTRATION_URL | No | `''` (empty) | Orchestration base URL. Leave empty in dev (Vite proxy handles routing). Set to HTTPS domain for production builds. |

-Production value:
+**Development:** leave `VITE_ORCHESTRATION_URL` unset — the Vite proxy routes
+API requests directly to orchestration, bypassing Caddy and Authelia.
+
+**Production build:** set before running `npm run build`:
 ```
 VITE_ORCHESTRATION_URL=https://nexus.jellystorm.com
 ```

+> Do not set `VITE_ORCHESTRATION_URL` to the HTTPS domain during local dev.
+> Requests from `localhost:5173` to `nexus.jellystorm.com` will hit Authelia,
+> which returns an HTML login page instead of JSON — causing `Unexpected token '<'`
+> parse errors in `useModels` and `useSession`.
+
+## Vite Dev Proxy
+
+`vite.config.js` proxies API routes directly to the orchestration service
+during local development, bypassing Caddy and Authelia entirely:
+
+```js
+// vite.config.js
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      '/models':   'http://192.168.0.205:4000',
+      '/sessions': 'http://192.168.0.205:4000',
+      '/chat':     'http://192.168.0.205:4000',
+    }
+  }
+});
+```
+
+If new routes are added to the orchestration service, add them here too.
+
 ## Internal Structure
+
 ```
 src/
 ├── api/
@@ -58,7 +92,7 @@ src/
 │   ├── ChatWindow.jsx       # Centre panel — message thread and input bar
 │   ├── MessageBubble.jsx    # Individual message bubble (user or assistant)
 │   ├── InfoPanel.jsx        # Right panel — model selector and session metadata
-│   └── SessionModal.jsx     # Modal dialog for session settings (rename)
+│   └── SessionModal.jsx     # Modal dialog for session settings and delete confirmation
 ├── index.css                # Global reset, CSS variables, utility classes
 └── main.jsx                 # React entry point
 ```
@@ -66,6 +100,7 @@ src/
 ## Layout

 Three-panel layout with collapsible sidebars:
+
 ```
 ┌─────────────────┬──────────────────────────┬─────────────┐
 │  Session List   │       Chat Window         │  Info Panel │
@@ -92,19 +127,19 @@ rules, inline styles for dynamic prop-driven values.
 | Variable | Value | Description |
 |---|---|---|
 | `--bg-base` | `#0f1117` | Page background |
-| `--bg-surface` | `#1a1d27` | Panel backgrounds |
+| `--bg-surface` | `#0e0d0d` | Panel backgrounds |
 | `--bg-elevated` | `#222536` | Elevated elements (inputs, cards) |
 | `--border` | `#2e3150` | Border colour |
-| `--accent` | `#6c63ff` | Primary accent (buttons, highlights) |
+| `--accent` | `#3d3a79` | Primary accent (buttons, highlights) |
 | `--accent-hover` | `#574fd6` | Accent hover state |
 | `--text-primary` | `#e8e8f0` | Primary text |
 | `--text-secondary` | `#8b8fa8` | Secondary text |
 | `--text-muted` | `#555870` | Muted / placeholder text |
-| `--bubble-user` | `#6c63ff` | User message bubble background |
-| `--bubble-ai` | `#222536` | AI message bubble background |
-| `--sidebar-width` | `280px` | Expanded sidebar width |
-| `--panel-width` | `260px` | Expanded info panel width |
-| `--header-height` | `56px` | Shared header height across all panels |
+| `--bubble-user` | `#4742a8` | User message bubble background |
+| `--bubble-ai` | `#20264d` | AI message bubble background |
+| `--sidebar-width` | `180px` | Expanded sidebar width |
+| `--panel-width` | `200px` | Expanded info panel width |
+| `--header-height` | `40px` | Shared header height across all panels |
 | `--radius-sm` | `6px` | Small border radius |
 | `--radius-md` | `8px` | Medium border radius |
 | `--radius-lg` | `12px` | Large border radius |
@@ -146,6 +181,7 @@ Uses a buffer pattern to handle SSE chunks that may span multiple network packet
 ## Streaming

 The chat input sends messages via `POST /chat/stream`. Tokens arrive as SSE events:
+
 ```
 data: {"text":"Hello"}
 data: {"text":" Tim"}
@@ -165,16 +201,10 @@ The hook initialises with `FALLBACK_MODELS` from `constants.js` and replaces the
 with the server response on success. If the fetch fails, the fallback list is used
 silently — a warning is logged to the console.

-```js
-// constants.js
-export const FALLBACK_MODELS = [
-  { value: 'companion:latest', label: 'Companion' },
-  // ...
-];
-```
+To add a model, update `models.json` on the main PC — no client rebuild needed.

-The selected model is passed with every chat request. To add a model, update
-`models.json` on the main PC — no client rebuild needed.
+`FALLBACK_MODELS` in `constants.js` should be kept in sync with `models.json`
+as a reasonable last-resort list in case the endpoint is unreachable.

 ## Session Management

@@ -183,24 +213,58 @@ Sessions are identified by `external_id` — a UUID generated client-side via th
 service on the first message. The session list refreshes after each completed
 response to surface newly created sessions.

+### Session Name Display
+
+The chat header and session list both display `session.name` if set, falling back
+to `session.external_id` if no name has been assigned:
+
+```js
+activeSession.name || activeSession.external_id
+```
+
 ### Session Actions

-The session list supports rename and delete:
+The session list supports rename and delete via two entry points:

- **Hover** — reveals ✎ (rename) and ✕ (delete) icon buttons on the session row
+- **Hover** — reveals ✎ (rename) and ✕ (delete) icon buttons alongside the session row
 - **Right-click** — opens a context menu with the same actions

-Rename opens a `SessionModal` dialog. The modal is designed to expand into a full
-session settings panel in future — the title is already "Session Settings" to
-reflect this intent.
+Both trigger `SessionModal` — a shared modal component with two modes:

-Delete is immediate with no confirmation dialog (planned for a future update).
+| Mode | Trigger | Behaviour |
+|---|---|---|
+| `settings` | Rename button / context menu rename | Shows name input, saves on Enter or Save button |
+| `confirm-delete` | Delete button / context menu delete | Shows confirmation dialog with session name, requires explicit Delete button click |

-Actions are disabled on unsaved (new) sessions that haven't had a message sent yet.
+The modal is intentionally titled "Session Settings" and structured to expand
+into a full settings panel in future iterations.
+
+Actions are disabled on unsaved (new) sessions that haven't had a first message sent yet.
+
+### Active Session Clearing on Delete
+
+When the deleted session is the currently active one, `App.jsx` detects the match
+and calls `selectSession(null)` to clear the chat window before refreshing the list:
+
+```js
+function handleSessionsChange(deletedSession) {
+    if (deletedSession?.external_id === activeSession?.external_id) {
+        selectSession(null);
+    }
+    refreshSessions();
+}
+```

 ### Context Menu

 Implemented via `useContextMenu` hook — tracks `{ x, y, session }` state and
 attaches a `window` click listener to dismiss on any outside click. Rendered
-outside the sidebar div (via React fragment) to avoid being clipped by
+outside the sidebar div via a React fragment to avoid being clipped by
 `overflow: hidden`.
+
+### Button Nesting
+
+Session row action icons (✎ ✕) are rendered as siblings of the session
+`<button>`, not children — HTML does not allow `<button>` inside `<button>`.
+The outer `<div>` owns hover state and context menu; the inner `<button>` handles
+session selection; action icon buttons sit alongside it in the same flex row.
--- a/packages/chat-client/src/App.jsx
+++ b/packages/chat-client/src/App.jsx
@@ -35,6 +35,13 @@ export default function App() {
    sendMessage(text, selectedModel);
  }

+  function handleSessionsChange(deletedSession){
+    if(deletedSession?.external_id === activeSession?.external_id){
+      selectSession(null);
+    }
+    refreshSessions();
+  }
+
  return (
    <div style={{
      display: 'flex',
@@ -48,7 +55,7 @@ export default function App() {
        onNewChat={createSession}
        isOpen={leftOpen}
        onToggle={() => setLeftOpen(o => !o)}
-        onSessionsChange={refreshSessions}
+        onSessionsChange={handleSessionsChange}
      />

      <ChatWindow
--- a/packages/chat-client/src/components/ChatWindow.jsx
+++ b/packages/chat-client/src/components/ChatWindow.jsx
@@ -30,7 +30,7 @@ export default function ChatWindow({ messages, loadingHistory, streaming, onSend
      {/* Header */}
      <div className="panel-header" style={{ padding: '0 20px' }}>
        <span className="text-base text-secondary">
-          {activeSession ? activeSession.external_id : 'No session selected'}
+          {activeSession ? ( activeSession.name || activeSession.external_id) : 'No session selected'}
        </span>
      </div>

--- a/packages/chat-client/src/components/SessionList.jsx
+++ b/packages/chat-client/src/components/SessionList.jsx
@@ -7,6 +7,7 @@ export default function SessionList({ sessions, activeSession, onSelectSession,
  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 '';
@@ -93,23 +94,28 @@ export default function SessionList({ sessions, activeSession, onSelectSession,
                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={{
-                                    width: '100%',
+                    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={{ justifyContent: 'space-between', gap: '8px', width: '100%' }}>
+                  <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,
@@ -117,26 +123,7 @@ export default function SessionList({ sessions, activeSession, onSelectSession,
                    }}>
                      {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>
-                                    ) : (
+                    {!isHovered && (
                      <span className="text-xs text-muted flex-shrink">
                        {formatDate(session.updated_at)}
                      </span>
@@ -146,6 +133,24 @@ export default function SessionList({ sessions, activeSession, onSelectSession,
                    <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>
            );
          })}
@@ -174,20 +179,24 @@ export default function SessionList({ sessions, activeSession, onSelectSession,
            minWidth: '140px',
          }}
        >
-                <button className="btn-reset text-base" onClick={() => { setModalSession(menu.session); closeMenu(); }}
+          <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={() => { handleDelete(menu.session); closeMenu(); }}
-                    style={{ width: '100%', padding: '8px 12px', borderRadius: 'var(--radius-sm)', justifyContent: 'flex-start', color: '#ff6b6b' }}
+          <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>
+          >✕ Delete</button>
        </div>
      )}

@@ -195,7 +204,9 @@ export default function SessionList({ sessions, activeSession, onSelectSession,
      {modalSession && (
        <SessionModal
          session={modalSession}
+          mode={modalMode}
          onRename={handleRename}
+          onDelete={handleDelete}
          onClose={() => setModalSession(null)}
        />
      )}
--- a/packages/chat-client/src/components/SessionModal.jsx
+++ b/packages/chat-client/src/components/SessionModal.jsx
@@ -1,35 +1,33 @@
-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(() => {
+        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 === 'Enter' && mode === 'settings') handleSubmit();
        if (e.key === 'Escape') onClose();
-        
    }

    if (!session) return null;
+
    return (
-        //Backdrop
-        <div
-            onClick={onClose}
-            style={{
+        <div onClick={onClose} style={{
            position: 'fixed',
            inset: 0,
            background: 'rgba(0,0,0,0.5)',
@@ -37,12 +35,8 @@ export default function SessionModal({ session, onRename, onClose}) {
            alignItems: 'center',
            justifyContent: 'center',
            zIndex: 100,
-            }}
-        >
-            {/* Modal - stop click propagating to backdrop */}
-            <div
-                onClick={e => e.stopPropagation()}
-                style={{
+        }}>
+            <div onClick={e => e.stopPropagation()} onKeyDown={handleKeyDown} style={{
                background: 'var(--bg-surface)',
                border: '1px solid var(--border)',
                borderRadius: 'var(--radius-lg)',
@@ -51,21 +45,18 @@ export default function SessionModal({ session, onRename, onClose}) {
                display: 'flex',
                flexDirection: 'column',
                gap: '16px',
-                }}
-            >
-                {/* Modal Header*/}
+            }}>
+                {mode === 'settings' ? (
+                    <>
                        <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)',
@@ -79,30 +70,47 @@ export default function SessionModal({ session, onRename, onClose}) {
                                }}
                            />
                        </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}
+                            >Cancel</button>
+                            <button className="btn-primary" onClick={handleSubmit}
                                disabled={!name.trim()}
                                style={{ padding: '8px 16px' }}
-                    >
-                        Save
-                    </button>
+                            >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>
+    );
 }
--- a/packages/chat-client/vite.config.js
+++ b/packages/chat-client/vite.config.js
@@ -11,6 +11,7 @@ export default defineConfig({
    proxy: {
      '/chat': 'http://192.168.0.205:4000',
      '/sessions': 'http://192.168.0.205:4000',
+      '/models': 'http://192.168.0.205:4000',
    },
  },
 });