Phase 2 — Chat Window UI + Message Display + Input #237

New issue

Closed

opened 2026-07-15 11:38:48 +00:00 by Mark · 0 comments

Mark commented

2026-07-15 11:38:48 +00:00

Owner

Phase 2: Chat Window UI + Message Display + Input

Goal: Build the core web chat interface — a single-page HTML/JS/CSS app with a chat window displaying user/assistant/system messages and a text input area, connected to the WebSocket backend.

Approach candidates:

Pure HTML+CSS+JS (vanilla) — no build step, simplest deployment, served directly by Flask
React (via CDN or bundled) — component model suits chat UI, but adds build complexity
Vue.js (via CDN) — lighter than React, good for single-page apps

Outputs:

runtime/static/index.html — main chat page shell
runtime/static/css/chat.css — chat UI styles
runtime/static/js/chat.js — chat client: WebSocket connection, message rendering, input handling
runtime/static/js/mesh_api.js — REST API client for thread management (CONV-001 endpoints)
Tests in tests/integration/test_chat_ui.py

Acceptance criteria:

Chat window renders messages in distinct user/assistant/system bubbles
User can type and send text messages via input box + send button
Messages are sent via WebSocket, responses appear in real-time
Enter key sends message, Shift+Enter inserts newline
Scroll position follows the conversation (auto-scroll to latest)
Page loads without errors in Chrome, Firefox, Safari
Chat UI works alongside existing REST API endpoints

Files touched: runtime/static/index.html (create), runtime/static/css/chat.css (create), runtime/static/js/chat.js (create), runtime/static/js/mesh_api.js (create), tests/integration/test_chat_ui.py (create)

Decomposed from mesh-seed#133

## Phase 2: Chat Window UI + Message Display + Input **Goal:** Build the core web chat interface — a single-page HTML/JS/CSS app with a chat window displaying user/assistant/system messages and a text input area, connected to the WebSocket backend. **Approach candidates:** - Pure HTML+CSS+JS (vanilla) — no build step, simplest deployment, served directly by Flask - React (via CDN or bundled) — component model suits chat UI, but adds build complexity - Vue.js (via CDN) — lighter than React, good for single-page apps **Outputs:** - `runtime/static/index.html` — main chat page shell - `runtime/static/css/chat.css` — chat UI styles - `runtime/static/js/chat.js` — chat client: WebSocket connection, message rendering, input handling - `runtime/static/js/mesh_api.js` — REST API client for thread management (CONV-001 endpoints) - Tests in `tests/integration/test_chat_ui.py` **Acceptance criteria:** - [ ] Chat window renders messages in distinct user/assistant/system bubbles - [ ] User can type and send text messages via input box + send button - [ ] Messages are sent via WebSocket, responses appear in real-time - [ ] Enter key sends message, Shift+Enter inserts newline - [ ] Scroll position follows the conversation (auto-scroll to latest) - [ ] Page loads without errors in Chrome, Firefox, Safari - [ ] Chat UI works alongside existing REST API endpoints **Files touched:** `runtime/static/index.html` (create), `runtime/static/css/chat.css` (create), `runtime/static/js/chat.js` (create), `runtime/static/js/mesh_api.js` (create), `tests/integration/test_chat_ui.py` (create) --- --- _Decomposed from [mesh-seed#133](https://forgejo.tail018ac4.ts.net/Mark/mesh-seed/issues/133)_

Mark added the

triage-approved

label

2026-07-15 11:38:48 +00:00

Mark referenced this issue

2026-07-15 11:38:53 +00:00

Decompose: CONV-003: Web Chat Interface #133

Mark changed title from ~~Decompose: CONV-003: Web Chat Interface — Phase 2: Chat Window UI + Message Display + Input~~ to Phase 2 — Chat Window UI + Message Display + Input

2026-07-15 11:39:36 +00:00

Mark added

blocked:depends-236

and removed

triage-approved

labels

2026-07-15 11:39:45 +00:00

Mark added the

blocked:preflight

label

2026-07-31 04:26:43 +00:00

Mark