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>
2.7 KiB
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.