feat: add chat page layout with message list and bubble components

- Create /chat route with scrollable message list
- MessageBubble component with distinct user/assistant styles
- MessageList with auto-scroll-to-bottom on new messages
- Empty state display when no messages
- ChatMessage type definition in src/lib/types.ts
- Add browser globals to ESLint config for Svelte files

Closes #5

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
shahondin1624
2026-03-12 11:25:08 +01:00
parent f2daa9cef2
commit 6df4c396b9
10 changed files with 125 additions and 3 deletions

View File

@@ -6,3 +6,4 @@
| #2 | Proto codegen pipeline for TypeScript gRPC-Web stubs | COMPLETED | [issue-002.md](issue-002.md) |
| #3 | Configure Caddy for gRPC-Web support | COMPLETED | [issue-003.md](issue-003.md) |
| #4 | gRPC-Web client service layer | COMPLETED | [issue-004.md](issue-004.md) |
| #5 | Chat page layout and message list component | COMPLETED | [issue-005.md](issue-005.md) |

View File

@@ -0,0 +1,25 @@
---
---
# Issue #5: Chat page layout and message list component
**Status:** COMPLETED
**Issue:** https://git.shahondin1624.de/llm-multiverse/llm-multiverse-ui/issues/5
**Branch:** `feature/issue-5-chat-layout`
## Summary
Build the `/chat` route with scrollable message list, user/assistant message bubbles, auto-scroll, and empty state. Uses Svelte 5 runes.
## Acceptance Criteria
- [x] `/chat` route created
- [x] Scrollable message list component
- [x] Distinct user and assistant message bubble styles
- [x] Auto-scroll to bottom on new messages
- [x] Svelte 5 runes used for reactive message state (`$state`, `$derived`)
- [x] Empty state shown when no messages
## Deviations
- Added `globals` package to ESLint config for browser globals in Svelte files (fixes `Element`/`HTMLDivElement` not defined errors).