Fix Unread Messages overlay doesn't respond to messages being read

[supra08]

🎯 Goal

🛠 Implementation details

🎨 UI Changes

iOS

Before	After

Android

Before	After

🧪 Testing

☑️ Checklist

• I have signed the Stream CLA (required)
• PR targets the develop branch
• Documentation is updated
• New code is tested in main example apps, including all possible scenarios
  • SampleApp iOS and Android
  • Expo iOS and Android

---

Important

Fix unread messages overlay by tracking last viewed message timestamp and marking messages as read after 2 seconds of visibility in MessageList.tsx.

• Behavior:
  • Adds logic in MessageListWithContext to track last viewed message timestamp using lastViewedMessageTimestampRef.
  • Marks messages as read if user views unread messages for more than 2 seconds and the message is newer than the last read timestamp.
• Functions:
  • Updates updateStickyUnreadIndicator to handle marking messages as read based on visibility and time viewed.
  • Adds timeout logic to mark messages as read after 2 seconds if conditions are met.
• Misc:
  • Fixes typo in comment in MessageList.tsx.

^{This description was created by for dd71c91. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

Caution

Changes requested ❌

Reviewed everything up to dd71c91 in 2 minutes and 16 seconds. Click for details.

• Reviewed 76 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 4 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. package/src/components/MessageList/MessageList.tsx:747

• Draft comment:
  Minor typo in the comment: insert a space after channelUnreadState?.first_unread_message_id.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

2. package/src/components/MessageList/MessageList.tsx:380

• Draft comment:
  Typo: The declaration for 'messageIdLastScrolledToRef' is missing its 'const'. It should be declared as 'const messageIdLastScrolledToRef = useRef(undefined);' to match the intended declaration.
• Reason this comment was not posted:
  Marked as duplicate.

3. package/src/components/MessageList/MessageList.tsx:747

• Draft comment:
  Typographical error: In the comment, 'The channelUnreadState?.first_unread_message_idis here for sent messages unread label' is missing a space after the backtick. It should read: 'The channelUnreadState?.first_unread_message_id is here for sent messages unread label'.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

4. package/src/components/MessageList/MessageList.tsx:377

• Draft comment:
  Typographical issue: In the comment ('so that we dont scroll to it again on target message set'), 'dont' should be corrected to "don't" for proper contraction.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% This comment is purely informative as it points out a typographical error in a comment within the code. It does not suggest a code change or improvement, nor does it address functionality or logic. Therefore, it violates the rule against making purely informative comments.

Workflow ID: wflow_vYPmivU5o8aJN8iC

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[ellipsis-dev]

Missing const in the declaration of messageIdLastScrolledToRef. This change unintentionally removes the variable declaration and can lead to unexpected behavior. Please restore the const.

Suggested change

	messageIdLastScrolledToRef = useRef<string>(undefined);
	const messageIdLastScrolledToRef = useRef<string>(undefined);

[ellipsis-dev]

The new setTimeout in updateStickyUnreadIndicator schedules markRead after 2 seconds. Consider storing the timer reference and clearing it if conditions change or if the component unmounts to avoid duplicate or stale calls.