feat: add unread message indicator and scroll functionality in person…#2111
feat: add unread message indicator and scroll functionality in person…#2111Ashwin-op wants to merge 1 commit intocommudle:test-serverfrom
Conversation
…al discussion chat
There was a problem hiding this comment.
Pull Request Overview
This PR adds unread message indicator and scroll functionality to the personal discussion chat. The changes enable users to see where they left off in a conversation by highlighting the first unread message and automatically scrolling to it.
Key changes include:
- Uncommented and imported the UserMessageReceiptHandlerService to enable message read tracking
- Added scroll-to-unread functionality that finds and scrolls to the first unread message on initial load
- Added a visual "You left off here" divider that appears above the first unread message
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| message.component.ts | Re-enabled message receipt tracking by uncommenting service import and markAsRead method |
| discussion-personal-chat.component.ts | Added logic to find first unread message and scroll to it on initial load |
| discussion-personal-chat.component.scss | Added styling for the unread message divider with red accent color |
| discussion-personal-chat.component.html | Added visual divider element and message ID attributes for scroll targeting |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| try { | ||
| // If there's a scroll target message (first unread), scroll to it | ||
| if (this.scrollToMessageId) { | ||
| const messageElement = document.getElementById(`message-${this.scrollToMessageId}`); |
There was a problem hiding this comment.
Using document.getElementById for DOM manipulation in Angular is not recommended. Consider using ViewChild, template reference variables, or the Renderer2 service for better Angular integration and testability.
|
|
||
| // On first load, find the first unread message to scroll to | ||
| if (this.nextPage === 1) { | ||
| const firstUnreadMessage = this.messages.find((msg) => !msg.read); |
There was a problem hiding this comment.
The logic assumes that messages have a 'read' property, but this should be validated or documented. Consider adding a type guard or null check to ensure the property exists and is properly typed.
…al discussion chat
PR Template
Type
Description
Screenshots
Testing
Bundle Size