Files
egg 599802b818 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>
2025-12-08 08:20:37 +08:00

2.4 KiB

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