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>
67 lines
2.4 KiB
Markdown
67 lines
2.4 KiB
Markdown
## ADDED Requirements
|
|
|
|
### Requirement: Message display
|
|
|
|
The chat page SHALL display messages in a vertically scrolling list, with each message showing the sender role (user or assistant), the message content, and a visual distinction between user and assistant messages (e.g., alignment, color, or avatar).
|
|
|
|
#### Scenario: User message displayed
|
|
|
|
- **WHEN** the user sends a message
|
|
- **THEN** the message appears in the message list aligned or styled to indicate it is from the user
|
|
|
|
#### Scenario: Assistant message displayed
|
|
|
|
- **WHEN** the assistant responds
|
|
- **THEN** the response appears in the message list with distinct styling from user messages (different alignment, color, or avatar)
|
|
|
|
#### Scenario: Message ordering
|
|
|
|
- **WHEN** multiple messages exist in the conversation
|
|
- **THEN** messages are displayed in chronological order, oldest at top
|
|
|
|
### Requirement: Message input
|
|
|
|
The chat page SHALL provide a text input area at the bottom of the page where the user can type and submit messages.
|
|
|
|
#### Scenario: Submit via button
|
|
|
|
- **WHEN** the user types text and clicks the send button
|
|
- **THEN** the message is added to the conversation and the input is cleared
|
|
|
|
#### Scenario: Submit via Enter key
|
|
|
|
- **WHEN** the user types text and presses Enter
|
|
- **THEN** the message is submitted (same as clicking send)
|
|
|
|
#### Scenario: Empty input blocked
|
|
|
|
- **WHEN** the user attempts to send an empty or whitespace-only message
|
|
- **THEN** nothing is sent and no message is added
|
|
|
|
### Requirement: Hardcoded response
|
|
|
|
In this phase, the assistant SHALL reply with a hardcoded message to every user input. This stubs the AI integration point for future phases.
|
|
|
|
#### Scenario: Bot replies to any input
|
|
|
|
- **WHEN** the user sends any message
|
|
- **THEN** the assistant replies with a hardcoded response (e.g., "This is a placeholder response. AI integration coming soon!")
|
|
|
|
### Requirement: Auto-scroll
|
|
|
|
The message list SHALL automatically scroll to the newest message when a new message is added.
|
|
|
|
#### Scenario: New message scrolls into view
|
|
|
|
- **WHEN** a new message (user or assistant) is added to the conversation
|
|
- **THEN** the message list scrolls to the bottom so the new message is visible
|
|
|
|
### Requirement: Chat page is default route
|
|
|
|
The chat page SHALL be the default route (`/`) of the application.
|
|
|
|
#### Scenario: App opens to chat
|
|
|
|
- **WHEN** the user navigates to the root URL
|
|
- **THEN** the chat page is displayed
|