diff --git a/docs/services/chat-client.md b/docs/services/chat-client.md index 53b5364..f8796a8 100644 --- a/docs/services/chat-client.md +++ b/docs/services/chat-client.md @@ -66,6 +66,7 @@ export default defineConfig({ '/models': 'http://192.168.0.205:4000', '/sessions': 'http://192.168.0.205:4000', '/chat': 'http://192.168.0.205:4000', + '/projects': 'http://192.168.0.205:4000', } } }); @@ -78,44 +79,63 @@ If new routes are added to the orchestration service, add them here too. ``` src/ ├── api/ -│ └── orchestration.js # All fetch calls to the orchestration service +│ └── orchestration.js # All fetch calls to the orchestration service ├── config/ -│ └── constants.js # FALLBACK_MODELS, DEFAULT_MODEL, API_DEFAULTS +│ └── constants.js # FALLBACK_MODELS, DEFAULT_MODEL, API_DEFAULTS ├── hooks/ │ ├── useSession.js # Session list, history loading, active session state │ ├── useChat.js # Message sending, SSE streaming, message state │ ├── useModels.js # Dynamic model list fetched from /models endpoint -│ └── useContextMenu.js # Right-click context menu position and visibility +│ ├── useProjects.js # Project list fetched from /projects endpoint +│ └── useContextMenu.js # Right-click context menu position and visibility ├── components/ -│ ├── App.jsx # Root component — layout and shared state -│ ├── SessionList.jsx # Left sidebar — session list, rename, delete +│ ├── App.jsx # Root component — layout, shared state, view routing +│ ├── Sidebar.jsx # Left sidebar — projects, recent chats, navigation │ ├── 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 and delete confirmation +│ ├── SessionModal.jsx # Modal for session rename and delete confirmation +│ ├── ProjectModal.jsx # Modal for project create, edit, and delete confirmation +│ ├── AllChatsView.jsx # Full paginated session list with multi-select bulk delete +│ ├── AllProjectsView.jsx # Project tile grid with create/edit/delete +│ └── SettingsView.jsx # Settings placeholder (sections: Appearance, Memory, Models, About) ├── index.css # Global reset, CSS variables, utility classes └── main.jsx # React entry point ``` +> `SessionList.jsx` is superseded by `Sidebar.jsx` and kept only as a reference. + ## Layout -Three-panel layout with collapsible sidebars: +The app uses a view-based layout. `App.jsx` manages a `view` state +(`'chat' | 'all-chats' | 'all-projects' | 'settings'`) that controls which +main panel is rendered. The left sidebar and right info panel are always present. ``` -┌─────────────────┬──────────────────────────┬─────────────┐ -│ Session List │ Chat Window │ Info Panel │ -│ (collapsible) │ │ (collapsible)│ -│ │ [message thread] │ │ -│ + New Chat │ │ Model │ -│ │ │ Session ID │ -│ Session 1 │ │ Token count │ -│ Session 2 │ │ │ -│ │ [input bar] │ │ -└─────────────────┴──────────────────────────┴─────────────┘ +┌──────────────────┬──────────────────────────────┐ +│ Sidebar │ Main Area (view-dependent) │ +│ (collapsible) │ │ +│ │ chat → ChatWindow │ +│ + New Chat │ all-chats → AllChatsView │ +│ ⊞ New Project │ all-projects → AllProjectsView│ +│ │ settings → SettingsView │ +│ PROJECTS ▾ │ │ +│ [tile] [tile] │ │ +│ All Projects → │ │ +│ │ │ +│ RECENT CHATS ▾ │ │ +│ Session 1 │ │ +│ Session 2 │ │ +│ All Chats → │ │ +│ │ │ +│ ⚙ Settings │ │ +└──────────────────┴──────────────────────────────┘ ``` -Sidebars collapse to a 56px icon rail. The centre chat window always -fills the remaining space. +The sidebar collapses to a 48px icon rail. The right info panel (`InfoPanel`) +slides in from the right over the main area using `transform: translateX()` — +it is hidden by default (`rightOpen` starts `false`) and toggled via a button +in the `ChatWindow` header. ## CSS Architecture @@ -148,7 +168,7 @@ rules, inline styles for dynamic prop-driven values. | Class | Description | |---|---| -| `.panel-header` | Shared header row — used in all three panels | +| `.panel-header` | Shared header row — used across all panels | | `.btn-reset` | Resets button styles (no border, bg, cursor pointer) | | `.btn-icon` | Icon button with hover state | | `.btn-primary` | Accent-coloured action button with `:hover` and `:disabled` states | @@ -174,6 +194,10 @@ All orchestration calls are centralised in `src/api/orchestration.js`: | `fetchModels` | GET | /models | Load available models from manifest | | `renameSession` | PATCH | /sessions/:id | Rename a session | | `deleteSession` | DELETE | /sessions/:id | Delete a session | +| `fetchProjects` | GET | /projects | Load project list | +| `createProject` | POST | /projects | Create a new project | +| `updateProject` | PATCH | /projects/:id | Update a project | +| `deleteProject` | DELETE | /projects/:id | Delete a project | `streamMessage` returns an abort function — call it to cancel a stream mid-flight. Uses a buffer pattern to handle SSE chunks that may span multiple network packets. @@ -215,7 +239,7 @@ response to surface newly created sessions. ### Session Name Display -The chat header and session list both display `session.name` if set, falling back +The chat header and session rows both display `session.name` if set, falling back to `session.external_id` if no name has been assigned: ```js @@ -224,9 +248,9 @@ activeSession.name || activeSession.external_id ### Session Actions -The session list supports rename and delete via two entry points: +Session rows in the sidebar support rename and delete via two entry points: -- **Hover** — reveals ✎ (rename) and ✕ (delete) icon buttons alongside the session row +- **Hover** — reveals ✎ (rename) and ✕ (delete) icon buttons alongside the row - **Right-click** — opens a context menu with the same actions Both trigger `SessionModal` — a shared modal component with two modes: @@ -234,10 +258,7 @@ Both trigger `SessionModal` — a shared modal component with two modes: | 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 | - -The modal is intentionally titled "Session Settings" and structured to expand -into a full settings panel in future iterations. +| `confirm-delete` | Delete button / context menu delete | Shows confirmation dialog, requires explicit Delete click | Actions are disabled on unsaved (new) sessions that haven't had a first message sent yet. @@ -267,4 +288,41 @@ outside the sidebar div via a React fragment to avoid being clipped by Session row action icons (✎ ✕) are rendered as siblings of the session `