1614a61617
Install MudBlazor 9.2.0, replace Bootstrap layout with MudLayout/MudAppBar, create Chat.razor with message list, text input, auto-scroll, and hardcoded responses. Add ChatMessage shared model. Remove template pages (Counter, Weather), move health check to /health. Include OpenSpec change artifacts for the upcoming wire-responses-api work. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
49 lines
2.7 KiB
Markdown
49 lines
2.7 KiB
Markdown
## Context
|
|
|
|
The project has a working Blazor WASM client and ASP.NET Core API with health check connectivity proven. The client currently uses Bootstrap for layout and has template pages (Counter, Weather). No UI component library is installed. This change introduces MudBlazor and builds the first real feature — a chat interface with hardcoded responses.
|
|
|
|
## Goals / Non-Goals
|
|
|
|
**Goals:**
|
|
- Install and configure MudBlazor as the UI component library
|
|
- Build a ChatGPT/Gemini-inspired chat interface
|
|
- Establish the message model and UI patterns that future phases will build on
|
|
- Keep hardcoded responses so the UI is testable without API wiring
|
|
|
|
**Non-Goals:**
|
|
- OpenAI API integration (future phase)
|
|
- Markdown rendering of messages (future phase — Markdig)
|
|
- Conversation persistence or history (future phase)
|
|
- Multiple conversations / sidebar navigation (future phase)
|
|
- Responsive mobile layout optimization
|
|
|
|
## Decisions
|
|
|
|
### Decision 1: MudBlazor component choices
|
|
|
|
**Chat message list**: Use `MudPaper` cards inside a scrollable `div` (or `MudStack`). Each message gets a `MudPaper` with `Elevation="0"` and a background color to distinguish user vs assistant.
|
|
|
|
**Input area**: `MudTextField` with `Variant="Outlined"` and an `Adornment` send button (icon). This gives a single-line input with integrated send — similar to ChatGPT.
|
|
|
|
**Layout**: `MudLayout` + `MudAppBar` + `MudMainContent`. No drawer/sidebar yet — that comes when we add conversation management.
|
|
|
|
**Alternative considered**: Building with raw HTML/CSS. Rejected because MudBlazor is in the tech stack spec and provides the component patterns needed for later phases (dialogs, drawers, lists).
|
|
|
|
### Decision 2: ChatMessage model location
|
|
|
|
Place `ChatMessage.cs` in `ChatAgent.Shared` so it's available to both Client and API when API integration comes. Fields: `Role` (string: "user" or "assistant"), `Content` (string), `Timestamp` (DateTime).
|
|
|
|
### Decision 3: Chat page structure
|
|
|
|
The Chat.razor component owns the message list (`List<ChatMessage>`) and handles input. No separate service layer yet — the hardcoded response is inline in the component. When AI integration comes, a service will be extracted.
|
|
|
|
### Decision 4: Template page cleanup
|
|
|
|
Remove Counter.razor and Weather.razor. Move Home.razor from `/` to `/health` so the health check is still accessible but the chat page takes the root route.
|
|
|
|
## Risks / Trade-offs
|
|
|
|
- [MudBlazor WASM bundle size] → Acceptable for a personal tool; AOT is deferred per stack spec
|
|
- [No service abstraction for responses] → Intentional; extracting too early adds complexity before the pattern is clear. Will refactor when adding API integration.
|
|
- [Removing template pages] → Low risk; they were scaffolding. Health check preserved at `/health`.
|