●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Chat-driven intake panel using MudChat with bot and user bubbles.
- Step-based conversation flow (claim type, policy number, claimant, date, loss type, description).
- Claim type selector (MudSelect) and text input (MudTextField) for responses.
- File upload via InputFile with uploaded file names shown as MudChip items.
- Right-hand summary panel with MudForm editable fields (policy number, claimant name, date picker, loss type, description).
- Submit flow with basic validation and simulated submission messages; reset/start-over support.
## Key components
- MudChat, MudChatHeader, MudChatBubble
- MudSelect, MudSelectItem
- MudTextField, MudDatePicker
- MudForm, MudButton, MudDivider
- InputFile (Blazor file input), MudChip, MudPaper
- Model binding via @bind-*, and step state integer (_step)
## How it works
- Conversation state is driven by an integer field (_step) and handled in SendAsync via a switch statement to populate the FNOLModel.
- Messages are stored in a List<ChatMessageModel>; AddBotMessage and AddUserMessage append entries and call StateHasChanged.
- InputFile.OnChange (OnInputFileChanged) reads files, appends names to FNOLModel.PhotoNames, and adds user messages with attachment names.
- SubmitClaim validates the MudForm with _form.Validate(), checks required fields (policy, claimant), simulates submission, and emits bot messages.
- StartOver resets state, clears messages, and restarts the flow.
## Styling
- UI uses MudBlazor components for controls and theming combined with Tailwind utility classes (flex, gap-*, md:*, text-gray-*, sticky top-6) for layout, spacing, and responsive two-column behavior.
- Chat panel and summary are contained in MudPaper elements; responsive layout uses Tailwind md: classes to switch between column and row.
## Reuse steps
1. Add MudBlazor NuGet and register services (e.g., builder.Services.AddMudServices()) in Program.cs.
2. Include Tailwind-generated CSS or equivalent utility CSS in the project alongside MudBlazor CSS.
3. Copy Models (FNOLModel, ChatMessageModel) and the Razor page; import namespaces (MudBlazor, Microsoft.AspNetCore.Components.Forms).
4. Register route and navigation entry; ensure MudThemeProvider/MudLayout are present if using a MudBlazor layout.
5. Implement server-side endpoints or services for persistence and real file upload handling; adapt SubmitClaim to call APIs.
6. Optionally add JS interop for ScrollToBottom, enhance validation rules, and secure file uploads.
## Limitations & next steps
- This is a single-page UI example; persistent storage, authentication, and backend APIs are not included.
- File uploads only record filenames client-side; server upload handling and size/type validation are required.
- Validation is minimal (checks in SubmitClaim); add DataAnnotations or custom MudForm validators for rules.
- Scrolling to the most recent message is noted but not implemented (JS interop required).
- Consider integrating an NLP or dialog service for richer bot responses and accessibility testing for keyboard/screen reader support.