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>
1.6 KiB
1.6 KiB
1. MudBlazor Setup
- 1.1 Install MudBlazor 9.2.0 NuGet package in ChatAgent.Client
- 1.2 Add MudBlazor CSS, JS, and Material Design Icons font to index.html (remove Bootstrap CSS)
- 1.3 Add
@using MudBlazorto _Imports.razor - 1.4 Register MudBlazor services (
AddMudServices()) in Program.cs - 1.5 Add MudThemeProvider, MudPopoverProvider, MudDialogProvider to MainLayout.razor
2. Layout Migration
- 2.1 Replace MainLayout.razor with MudBlazor layout (MudLayout, MudAppBar, MudMainContent)
- 2.2 Remove NavMenu.razor (Bootstrap navbar no longer needed)
- 2.3 Remove MainLayout.razor.css (MudBlazor handles styling)
3. Shared Model
- 3.1 Create ChatMessage.cs in ChatAgent.Shared/Models with Role, Content, Timestamp
4. Chat Page
- 4.1 Create Chat.razor at route
/with message list and input area - 4.2 Implement message display with MudPaper cards (distinct styling for user vs assistant)
- 4.3 Implement text input with MudTextField and send button adornment
- 4.4 Wire Enter key and send button to submit handler
- 4.5 Block empty/whitespace-only submissions
- 4.6 Add hardcoded assistant response after each user message
- 4.7 Implement auto-scroll to bottom on new messages
5. Cleanup
- 5.1 Move Home.razor route from
/to/health - 5.2 Remove Counter.razor and Weather.razor
- 5.3 Update app.css — remove Bootstrap-specific styles, keep custom styles that still apply
6. Verify
- 6.1 Run
dotnet buildon the solution to confirm no errors - 6.2 Manually verify: chat page loads at
/, messages display correctly, hardcoded response works