Project: mobx
Task (challenging): Implement a multi-user chat system based on rooms
1) When a user clicks on a chat room card (with className '.room-card'), navigate to '/chat/:roomId' route.
2) The chat room page ('/chat/:roomId') contains a message list (className '.message-list'), status display (in '.room-status'), and participant information (display all participants' usernames in '.participant-list').
3) Implement message sending and receiving functionality, including a message input box (className '.message-input') and a send button (className '.send-button').
4) Each message (className .message) should contains the sender's information (className '.message-sender').
5) If the user enters the chat room, add this user to .participant-list.
6) User will send heartbeat to check if user is in chat room, if the user is not active for 2000ms, the user will be removed from .participant-list.
7) Sync chat room status, messages, and user connection status between all open tabs/windows.
Constraint: DO NOT use any third-party packages; ONLY React/MobX APIs are permitted; Use MobX to manage the logic.