feat: Add Chat UX improvements with notifications and @mention support
- Add ActionBar component with expandable toolbar for mobile - Add @mention functionality with autocomplete dropdown - Add browser notification system (push, sound, vibration) - Add NotificationSettings modal for user preferences - Add mention badges on room list cards - Add ReportPreview with Markdown rendering and copy/download - Add message copy functionality with hover actions - Add backend mentions field to messages with Alembic migration - Add lots field to rooms, remove templates - Optimize WebSocket database session handling - Various UX polish (animations, accessibility) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
egg
@@ -0,0 +1,33 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Markdown Report Output
|
||||
The report generation system SHALL provide reports in Markdown format for in-page preview.
|
||||
|
||||
#### Scenario: Get report as Markdown
|
||||
- **WHEN** user requests `GET /api/rooms/{room_id}/reports/{report_id}/markdown`
|
||||
- **AND** the report status is `completed`
|
||||
- **THEN** the system returns the report content in Markdown format
|
||||
- **AND** the Markdown includes all report sections (summary, timeline, participants, etc.)
|
||||
|
||||
#### Scenario: Markdown includes metadata
|
||||
- **WHEN** generating Markdown output
|
||||
- **THEN** the output includes a metadata header with room info, LOT numbers, dates
|
||||
- **AND** the format is suitable for copy-paste to other platforms
|
||||
|
||||
### Requirement: In-Page Report Preview
|
||||
The frontend SHALL display a preview of the generated report within the chat room interface.
|
||||
|
||||
#### Scenario: Display report preview
|
||||
- **WHEN** user clicks on a completed report
|
||||
- **THEN** a modal or drawer opens showing the Markdown-rendered report
|
||||
- **AND** the preview includes proper formatting (headers, tables, lists)
|
||||
|
||||
#### Scenario: Copy Markdown content
|
||||
- **WHEN** user clicks "Copy Markdown" in the preview
|
||||
- **THEN** the raw Markdown text is copied to clipboard
|
||||
- **AND** a success toast notification is shown
|
||||
|
||||
#### Scenario: Download Word from preview
|
||||
- **WHEN** user clicks "Download Word" in the preview
|
||||
- **THEN** the .docx file is downloaded
|
||||
- **AND** the filename uses the report title
|
||||
@@ -0,0 +1,32 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Action Bar Layout
|
||||
The chat room interface SHALL provide an action bar near the message input area for quick access to common operations.
|
||||
|
||||
#### Scenario: Action bar displays common actions
|
||||
- **WHEN** user views a chat room
|
||||
- **THEN** an action bar is displayed above or beside the message input
|
||||
- **AND** the action bar includes: upload file, generate report, add member buttons
|
||||
|
||||
#### Scenario: Action bar toggle on mobile
|
||||
- **WHEN** user is on a mobile device
|
||||
- **THEN** the action bar buttons can be collapsed/expanded
|
||||
- **AND** a single toggle button reveals the full action options
|
||||
|
||||
### Requirement: Message Copy Action
|
||||
Users SHALL be able to copy individual message content to clipboard.
|
||||
|
||||
#### Scenario: Copy message content
|
||||
- **WHEN** user hovers over a message
|
||||
- **THEN** a copy button appears
|
||||
- **AND** clicking the button copies the message content to clipboard
|
||||
- **AND** a success toast notification is shown
|
||||
|
||||
### Requirement: Notification Settings
|
||||
Users SHALL be able to configure notification preferences for the chat room.
|
||||
|
||||
#### Scenario: Configure notification settings
|
||||
- **WHEN** user accesses notification settings
|
||||
- **THEN** user can enable/disable sound notifications
|
||||
- **AND** user can enable/disable browser push notifications
|
||||
- **AND** user can enable/disable vibration (on supported devices)
|
||||
@@ -0,0 +1,61 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: @Mention Support
|
||||
The messaging system SHALL support @mention functionality to tag specific users in messages.
|
||||
|
||||
#### Scenario: Trigger mention autocomplete
|
||||
- **WHEN** user types `@` in the message input
|
||||
- **THEN** a dropdown menu appears showing room members
|
||||
- **AND** the list filters as user continues typing
|
||||
- **AND** user can select a member using keyboard or mouse
|
||||
|
||||
#### Scenario: Insert mention into message
|
||||
- **WHEN** user selects a member from the mention dropdown
|
||||
- **THEN** the mention is inserted as `@display_name`
|
||||
- **AND** the mention is stored with the user_id reference
|
||||
- **AND** the mention is visually highlighted in the message
|
||||
|
||||
#### Scenario: Mention notification
|
||||
- **WHEN** a message containing @mention is sent
|
||||
- **THEN** the mentioned user receives a highlighted notification
|
||||
- **AND** the notification indicates they were mentioned
|
||||
|
||||
### Requirement: Browser Push Notifications
|
||||
The system SHALL support browser push notifications for new messages.
|
||||
|
||||
#### Scenario: Request notification permission
|
||||
- **WHEN** user first visits the chat room
|
||||
- **THEN** the system prompts for notification permission
|
||||
- **AND** the permission state is stored locally
|
||||
|
||||
#### Scenario: Send push notification
|
||||
- **WHEN** a new message arrives while the tab is not focused
|
||||
- **AND** user has granted notification permission
|
||||
- **THEN** a browser push notification is displayed
|
||||
- **AND** clicking the notification focuses the chat room
|
||||
|
||||
### Requirement: Sound and Vibration Alerts
|
||||
The system SHALL support audio and haptic feedback for new messages.
|
||||
|
||||
#### Scenario: Play notification sound
|
||||
- **WHEN** a new message arrives
|
||||
- **AND** sound notifications are enabled
|
||||
- **THEN** a notification sound is played
|
||||
|
||||
#### Scenario: Vibrate on mobile
|
||||
- **WHEN** a new message arrives on a mobile device
|
||||
- **AND** vibration is enabled
|
||||
- **AND** the device supports Vibration API
|
||||
- **THEN** the device vibrates briefly
|
||||
|
||||
### Requirement: Mention Data Storage
|
||||
Messages with @mentions SHALL store the mention metadata for querying.
|
||||
|
||||
#### Scenario: Store mention references
|
||||
- **WHEN** a message with @mentions is created
|
||||
- **THEN** the `mentions` field stores an array of mentioned user_ids
|
||||
- **AND** the message content preserves the @display_name format
|
||||
|
||||
#### Scenario: Query messages mentioning user
|
||||
- **WHEN** fetching messages that mention a specific user
|
||||
- **THEN** messages with that user_id in `mentions` array are returned
|
||||
Reference in New Issue
Block a user