fix: message list improvements and channel first message mark unread improvements

Author: khushal87

package/src/components/Channel/Channel.tsx

@@ -175,6 +175,7 @@ import { ScrollToBottomButton as ScrollToBottomButtonDefault } from '../MessageL
 import { StickyHeader as StickyHeaderDefault } from '../MessageList/StickyHeader';
 import { TypingIndicator as TypingIndicatorDefault } from '../MessageList/TypingIndicator';
 import { TypingIndicatorContainer as TypingIndicatorContainerDefault } from '../MessageList/TypingIndicatorContainer';
+import { UnreadMessagesNotification as UnreadMessagesNotificationDefault } from '../MessageList/UnreadMessagesNotification';
 import { MessageActionList as MessageActionListDefault } from '../MessageMenu/MessageActionList';
 import { MessageActionListItem as MessageActionListItemDefault } from '../MessageMenu/MessageActionListItem';
 import { MessageMenu as MessageMenuDefault } from '../MessageMenu/MessageMenu';
@@ -183,7 +184,6 @@ import { MessageUserReactions as MessageUserReactionsDefault } from '../MessageM
 import { MessageUserReactionsAvatar as MessageUserReactionsAvatarDefault } from '../MessageMenu/MessageUserReactionsAvatar';
 import { MessageUserReactionsItem as MessageUserReactionsItemDefault } from '../MessageMenu/MessageUserReactionsItem';
 import { Reply as ReplyDefault } from '../Reply/Reply';
-import { UnreadMessagesNotification as UnreadMessagesNotificationDefault } from '../MessageList/UnreadMessagesNotification';
 
 export type MarkReadFunctionOptions = {
   /**
@@ -646,8 +646,8 @@ const ChannelWithContext = <
     threadMessages,
     TypingIndicator = TypingIndicatorDefault,
     TypingIndicatorContainer = TypingIndicatorContainerDefault,
-    UploadProgressIndicator = UploadProgressIndicatorDefault,
     UnreadMessagesNotification = UnreadMessagesNotificationDefault,
+    UploadProgressIndicator = UploadProgressIndicatorDefault,
     UrlPreview = CardDefault,
     VideoThumbnail = VideoThumbnailDefault,
   } = props;
@@ -662,6 +662,7 @@ const ChannelWithContext = <
   } = useTheme();
   const [editing, setEditing] = useState<MessageType<StreamChatGenerics> | undefined>(undefined);
   const [error, setError] = useState<Error | boolean>(false);
+  const [lastRead, setLastRead] = useState<ChannelContextValue<StreamChatGenerics>['lastRead']>();
   const [quotedMessage, setQuotedMessage] = useState<MessageType<StreamChatGenerics> | undefined>(
     undefined,
   );
@@ -777,6 +778,7 @@ const ChannelWithContext = <
   useEffect(() => {
     let listener: ReturnType<typeof channel.on>;
     const initChannel = async () => {
+      setLastRead(new Date());
       if (!channel || !shouldSyncChannel || channel.offlineMode) return;
       let errored = false;
 
@@ -796,6 +798,7 @@ const ChannelWithContext = <
       }
 
       if (client.user?.id && channel.state.read[client.user.id]) {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { user, ...ownReadState } = channel.state.read[client.user.id];
         setChannelUnreadState(ownReadState);
       }
@@ -807,6 +810,7 @@ const ChannelWithContext = <
         client.user &&
         channel.countUnread() > scrollToFirstUnreadThreshold
       ) {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { user, ...ownReadState } = channel.state.read[client.user.id];
         await loadChannelAtFirstUnreadMessage({
           channelUnreadState: ownReadState,
@@ -890,15 +894,15 @@ const ChannelWithContext = <
       } else {
         try {
           const response = await channel.markRead();
-          if (updateChannelUnreadState && response) {
+          if (updateChannelUnreadState && response && lastRead) {
             setChannelUnreadState({
-              last_read: new Date(),
+              last_read: lastRead,
               last_read_message_id: response?.event.last_read_message_id,
               unread_messages: 0,
             });
           }
-        } catch (error) {
-          console.log('Error marking channel as read:', error);
+        } catch (err) {
+          console.log('Error marking channel as read:', err);
         }
       }
     },
@@ -1645,6 +1649,7 @@ const ChannelWithContext = <
     hideDateSeparators,
     hideStickyDateHeader,
     isChannelActive: shouldSyncChannel,
+    lastRead,
     loadChannelAroundMessage,
     loadChannelAtFirstUnreadMessage,
     loading: channelMessagesState.loading,
@@ -1655,8 +1660,9 @@ const ChannelWithContext = <
     NetworkDownIndicator,
     read: channelState.read ?? {},
     reloadChannel,
-    setChannelUnreadState,
     scrollToFirstUnreadThreshold,
+    setChannelUnreadState,
+    setLastRead,
     setTargetedMessage,
     StickyHeader,
     targetedMessage,
@@ -1849,8 +1855,8 @@ const ChannelWithContext = <
     targetedMessage,
     TypingIndicator,
     TypingIndicatorContainer,
-    updateMessage,
     UnreadMessagesNotification,
+    updateMessage,
     UrlPreview,
     VideoThumbnail,
   });

package/src/components/Channel/hooks/useCreateChannelContext.ts

@@ -17,6 +17,7 @@ export const useCreateChannelContext = <
   hideDateSeparators,
   hideStickyDateHeader,
   isChannelActive,
+  lastRead,
   loadChannelAroundMessage,
   loadChannelAtFirstUnreadMessage,
   loading,
@@ -29,6 +30,7 @@ export const useCreateChannelContext = <
   reloadChannel,
   scrollToFirstUnreadThreshold,
   setChannelUnreadState,
+  setLastRead,
   setTargetedMessage,
   StickyHeader,
   targetedMessage,
@@ -38,6 +40,7 @@ export const useCreateChannelContext = <
   watchers,
 }: ChannelContextValue<StreamChatGenerics>) => {
   const channelId = channel?.id;
+  const lastReadTime = lastRead?.getTime();
   const membersLength = Object.keys(members).length;
 
   const readUsers = Object.values(read);
@@ -58,6 +61,7 @@ export const useCreateChannelContext = <
       hideDateSeparators,
       hideStickyDateHeader,
       isChannelActive,
+      lastRead,
       loadChannelAroundMessage,
       loadChannelAtFirstUnreadMessage,
       loading,
@@ -70,6 +74,7 @@ export const useCreateChannelContext = <
       reloadChannel,
       scrollToFirstUnreadThreshold,
       setChannelUnreadState,
+      setLastRead,
       setTargetedMessage,
       StickyHeader,
       targetedMessage,
@@ -84,6 +89,7 @@ export const useCreateChannelContext = <
       disabled,
       error,
       isChannelActive,
+      lastReadTime,
       loading,
       membersLength,
       readUsersLength,

package/src/components/Channel/hooks/useMessageListPagination.tsx

@@ -206,14 +206,9 @@ export const useMessageListPagination = <
         // If the last read message is already in the current message set, we don't need to load more messages, and we set the first unread message id as that is what we want to operate on.
         else if (lastReadMessageId) {
           const messageIdx = findInMessagesById(channel.state.messages, lastReadMessageId);
-          const messagesLength = channel.state.messages.length;
           isInCurrentMessageSet = messageIdx !== -1;
           firstUnreadMessageId =
-            messageIdx !== -1
-              ? messageIdx < messagesLength - 1
-                ? channel.state.messages[messageIdx + 1].id
-                : channel.state.messages[messageIdx].id
-              : undefined;
+            messageIdx > -1 ? channel.state.messages[messageIdx + 1]?.id : undefined;
         } else {
           // TODO
           const lastReadTimestamp = last_read.getTime();

package/src/components/Chat/hooks/handleEventToSyncDB.ts

@@ -107,8 +107,8 @@ export const handleEventToSyncDB = async <
           flush: flushOverride,
           reads: [
             {
-              last_read_message_id: event.last_read_message_id,
               last_read: event.received_at as string,
+              last_read_message_id: event.last_read_message_id,
               unread_messages: 0,
               user,
             },
@@ -128,8 +128,8 @@ export const handleEventToSyncDB = async <
           flush: flushOverride,
           reads: [
             {
-              last_read_message_id: event.last_read_message_id,
               last_read: event.received_at as string,
+              last_read_message_id: event.last_read_message_id,
               unread_messages: event.unread_messages,
               user,
             },

package/src/components/MessageList/MessageList.tsx

@@ -269,8 +269,8 @@ const MessageListWithContext = <
     reloadChannel,
     ScrollToBottomButton,
     selectedPicker,
-    setFlatListRef,
     setChannelUnreadState,
+    setFlatListRef,
     setMessages,
     setSelectedPicker,
     setTargetedMessage,
@@ -453,6 +453,22 @@ const MessageListWithContext = <
     }
   }, [disabled]);
 
+  useEffect(() => {
+    const listener: ReturnType<typeof channel.on> = channel.on('message.new', (event) => {
+      const newMessageToCurrentChannel = event.cid === channel.cid;
+      const mainChannelUpdated = !event.message?.parent_id || event.message?.show_in_channel;
+
+      if (newMessageToCurrentChannel && mainChannelUpdated && !scrollToBottomButtonVisible) {
+        markRead();
+      }
+    });
+
+    return () => {
+      listener?.unsubscribe();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   // TODO: Think if the useEffect is really needed?
   useEffect(() => {
     const lastReceivedMessage = getLastReceivedMessage(processedMessageList);
@@ -565,46 +581,18 @@ const MessageListWithContext = <
 
     const createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
     const lastReadTimestamp = channelUnreadState?.last_read.getTime();
-    const isFirstMessage = index === processedMessageList.length - 1;
     const isNewestMessage = index === 0;
     const isLastReadMessage =
       channelUnreadState?.last_read_message_id === message.id ||
       (!channelUnreadState?.unread_messages && createdAtTimestamp === lastReadTimestamp);
 
-    const isFirstUnreadMessage =
-      channelUnreadState?.first_unread_message_id === message.id ||
-      (!!channelUnreadState?.unread_messages &&
-        !!createdAtTimestamp &&
-        !!lastReadTimestamp &&
-        createdAtTimestamp > lastReadTimestamp &&
-        isFirstMessage);
-
-    const showUnreadSeparatorAbove =
-      !channelUnreadState?.last_read_message_id && isFirstUnreadMessage;
-
-    const showUnreadSeparatorBelow =
+    const showUnreadSeparator =
       isLastReadMessage &&
       !isNewestMessage &&
+      // The `channelUnreadState?.first_unread_message_id` is here for sent messages unread label
       (!!channelUnreadState?.first_unread_message_id || !!channelUnreadState?.unread_messages);
 
-    const showUnreadUnderlay =
-      !!shouldShowUnreadUnderlay && (showUnreadSeparatorAbove || showUnreadSeparatorBelow);
-
-    if (message.type === 'system') {
-      return (
-        <View
-          style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}
-          testID={`message-list-item-${index}`}
-        >
-          {showUnreadSeparatorAbove && <InlineUnreadIndicator />}
-          <MessageSystem
-            message={message}
-            style={[{ paddingHorizontal: screenPadding }, messageContainer]}
-          />
-          {showUnreadSeparatorBelow && <InlineUnreadIndicator />}
-        </View>
-      );
-    }
+    const showUnreadUnderlay = !!shouldShowUnreadUnderlay && showUnreadSeparator;
 
     const wrapMessageInTheme = client.userID === message.user?.id && !!myMessageTheme;
     const renderDateSeperator = isMessageWithStylesReadByAndDateSeparator(message) &&
@@ -626,10 +614,16 @@ const MessageListWithContext = <
     );
 
     return (
-      <View style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}>
-        {/* Adding indicator below the messages, since the list is inverted */}
-        {showUnreadSeparatorAbove && <InlineUnreadIndicator />}
-        {wrapMessageInTheme ? (
+      <View
+        style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}
+        testID={`message-list-item-${index}`}
+      >
+        {message.type === 'system' ? (
+          <MessageSystem
+            message={message}
+            style={[{ paddingHorizontal: screenPadding }, messageContainer]}
+          />
+        ) : wrapMessageInTheme ? (
           <ThemeProvider mergedStyle={modifiedTheme}>
             <View testID={`message-list-item-${index}`}>
               {renderDateSeperator}
@@ -642,7 +636,7 @@ const MessageListWithContext = <
             {renderMessage}
           </View>
         )}
-        {showUnreadSeparatorBelow && <InlineUnreadIndicator />}
+        {showUnreadSeparator && <InlineUnreadIndicator />}
       </View>
     );
   };
@@ -768,7 +762,7 @@ const MessageListWithContext = <
     }
   };
 
-  const handleScroll: ScrollViewProps['onScroll'] = async (event) => {
+  const handleScroll: ScrollViewProps['onScroll'] = (event) => {
     const messageListHasMessages = processedMessageList.length > 0;
     const offset = event.nativeEvent.contentOffset.y;
     // Show scrollToBottom button once scroll position goes beyond 150.
@@ -886,7 +880,7 @@ const MessageListWithContext = <
       if (initialScrollToFirstUnreadMessage) {
         clearTimeout(initialScrollSettingTimeoutRef.current);
       }
-      let messageIdToScroll: string | undefined = targetedMessage;
+      const messageIdToScroll: string | undefined = targetedMessage;
       if (!messageIdToScroll) return;
       const indexOfParentInMessageList = processedMessageList.findIndex(
         (message) => message?.id === messageIdToScroll,
@@ -1147,9 +1141,8 @@ const MessageListWithContext = <
       <NetworkDownIndicator />
       {isUnreadNotificationOpen && !threadList ? (
         <UnreadMessagesNotification
-          unread={channel.countUnread()}
-          onPressHandler={onUnreadNotificationPress}
           onCloseHandler={onUnreadNotificationClose}
+          onPressHandler={onUnreadNotificationPress}
         />
       ) : null}
     </View>

package/src/components/MessageList/UnreadMessagesNotification.tsx

@@ -12,10 +12,7 @@ export type UnreadMessagesNotificationProps = {
    * Callback to handle the close event
    */
   onCloseHandler?: () => void;
-  /**
-   * Number of unread messages
-   */
-  unread?: number;
+
   /**
    * If the notification is visible
    */

package/src/contexts/channelContext/ChannelContext.tsx

@@ -125,6 +125,7 @@ export type ChannelContextValue<
   read: ChannelState<StreamChatGenerics>['read'];
   reloadChannel: () => Promise<void>;
   scrollToFirstUnreadThreshold: number;
+  setLastRead: React.Dispatch<React.SetStateAction<Date | undefined>>;
   setChannelUnreadState: React.Dispatch<
     React.SetStateAction<ChannelUnreadState<StreamChatGenerics> | undefined>
   >;
@@ -139,6 +140,7 @@ export type ChannelContextValue<
   enableMessageGroupingByUser?: boolean;
   isChannelActive?: boolean;
 
+  lastRead?: Date;
   loading?: boolean;
   /**
    * Maximum time in milliseconds that should occur between messages