fix: respect read events for unread notification display in Message Lists (#3234)

Author: khushal87

package/src/components/MessageList/MessageFlashList.tsx

@@ -36,6 +36,10 @@ import {
   MessagesContextValue,
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
+import {
+  OwnCapabilitiesContextValue,
+  useOwnCapabilitiesContext,
+} from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import {
   PaginatedMessageListContextValue,
   usePaginatedMessageListContext,
@@ -93,6 +97,7 @@ type MessageFlashListPropsWithContext = Pick<
   AttachmentPickerContextValue,
   'closePicker' | 'selectedPicker' | 'setSelectedPicker'
 > &
+  Pick<OwnCapabilitiesContextValue, 'readEvents'> &
   Pick<
     ChannelContextValue,
     | 'channel'
@@ -269,6 +274,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     Message,
     MessageSystem,
     myMessageTheme,
+    readEvents,
     NetworkDownIndicator,
     noGroupByUser,
     onListScroll,
@@ -630,7 +636,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
    * This function should show or hide the unread indicator depending on the
    */
   const updateStickyUnreadIndicator = useStableCallback((viewableItems: ViewToken[]) => {
-    if (!viewableItems.length) {
+    if (!viewableItems.length || !readEvents) {
       setIsUnreadNotificationOpen(false);
       return;
     }
@@ -1227,6 +1233,7 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
   } = useMessagesContext();
   const { loadMore, loadMoreRecent } = usePaginatedMessageListContext();
   const { loadMoreRecentThread, loadMoreThread, thread, threadInstance } = useThreadContext();
+  const { readEvents } = useOwnCapabilitiesContext();
 
   return (
     <MessageFlashListWithContext
@@ -1260,6 +1267,7 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
         MessageSystem,
         myMessageTheme,
         NetworkDownIndicator,
+        readEvents,
         reloadChannel,
         ScrollToBottomButton,
         scrollToFirstUnreadThreshold,

package/src/components/MessageList/MessageList.tsx

@@ -37,6 +37,10 @@ import {
   MessagesContextValue,
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
+import {
+  OwnCapabilitiesContextValue,
+  useOwnCapabilitiesContext,
+} from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import {
   PaginatedMessageListContextValue,
   usePaginatedMessageListContext,
@@ -115,6 +119,7 @@ type MessageListPropsWithContext = Pick<
   AttachmentPickerContextValue,
   'closePicker' | 'selectedPicker' | 'setSelectedPicker'
 > &
+  Pick<OwnCapabilitiesContextValue, 'readEvents'> &
   Pick<
     ChannelContextValue,
     | 'channel'
@@ -277,6 +282,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     noGroupByUser,
     onListScroll,
     onThreadSelect,
+    readEvents,
     reloadChannel,
     ScrollToBottomButton,
     selectedPicker,
@@ -441,7 +447,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     }
     messagesLength.current = processedMessageList.length;
 
-    if (!viewableItems.length) {
+    if (!viewableItems.length || !readEvents) {
       setIsUnreadNotificationOpen(false);
       return;
     }
@@ -1294,6 +1300,7 @@ export const MessageList = (props: MessageListProps) => {
   } = useChannelContext();
   const { client } = useChatContext();
   const { setMessages } = useImageGalleryContext();
+  const { readEvents } = useOwnCapabilitiesContext();
   const {
     DateHeader,
     disableTypingIndicator,
@@ -1345,6 +1352,7 @@ export const MessageList = (props: MessageListProps) => {
         MessageSystem,
         myMessageTheme,
         NetworkDownIndicator,
+        readEvents,
         reloadChannel,
         ScrollToBottomButton,
         scrollToFirstUnreadThreshold,