Mark conversation as read when entering chat

components/Conversation/V3Conversation.tsx

@@ -1,7 +1,7 @@
 import { useCurrentAccount } from "@data/store/accountsStore";
 import { useConversationMessages } from "@queries/useConversationMessages";
 import { ConversationTopic, ConversationVersion } from "@xmtp/react-native-sdk";
-import { memo, useCallback, useEffect } from "react";
+import { memo, useCallback, useEffect, useRef } from "react";
 import { FlatListProps, Platform } from "react-native";
 // import { DmChatPlaceholder } from "@components/Chat/ChatPlaceholder/ChatPlaceholder";
 import { DmConsentPopup } from "@/components/Chat/ConsentPopup/dm-consent-popup";
@@ -41,6 +41,8 @@ import {
 import { DmConversationTitle } from "../../features/conversations/components/DmConversationTitle";
 import { GroupConversationTitle } from "../../features/conversations/components/GroupConversationTitle";
 import { NewConversationTitle } from "../../features/conversations/components/NewConversationTitle";
+import { useConversationIsUnread } from "@/features/conversation-list/hooks/useMessageIsUnread";
+import { useToggleReadStatus } from "@/features/conversation-list/hooks/useToggleReadStatus";
 
 const keyExtractor = (item: string) => item;
 
@@ -138,6 +140,26 @@ const DmContent = memo(function DmContent() {
 
   const { data: peerInboxId } = useDmPeerInboxId(currentAccount, topic!);
 
+  const isUnread = useConversationIsUnread({
+    topic,
+    lastMessage: messages?.ids?.length
+      ? messages.byId[messages.ids[0]]
+      : undefined,
+    timestamp: messages?.ids?.length
+      ? (messages.byId[messages.ids[0]]?.sentNs ?? 0)
+      : 0,
+  });
+  const toggleReadStatus = useToggleReadStatus({
+    topic,
+    isUnread,
+    currentAccount,
+  });
+  useMarkAsReadOnEnter({
+    messagesLoading,
+    isUnread,
+    toggleReadStatus,
+  });
+
   useDmHeader();
 
   if (conversationNotFound) {
@@ -189,6 +211,22 @@ const GroupContent = memo(function GroupContent() {
     refetch,
   } = useConversationMessages(currentAccount, topic!);
 
+  const isUnread = useConversationIsUnread({
+    topic,
+    lastMessage: messages?.byId[messages?.ids[0]], // Get latest message
+    timestamp: messages?.byId[messages?.ids[0]]?.sentNs ?? 0,
+  });
+  const toggleReadStatus = useToggleReadStatus({
+    topic,
+    isUnread,
+    currentAccount,
+  });
+  useMarkAsReadOnEnter({
+    messagesLoading,
+    isUnread,
+    toggleReadStatus,
+  });
+
   useGroupHeader();
 
   if (conversationNotFound) {
@@ -271,6 +309,25 @@ export const KeyboardFiller = memo(function KeyboardFiller() {
   return <AnimatedVStack style={as} />;
 });
 
+const useMarkAsReadOnEnter = ({
+  messagesLoading,
+  isUnread,
+  toggleReadStatus,
+}: {
+  messagesLoading: boolean;
+  isUnread: boolean;
+  toggleReadStatus: () => void;
+}) => {
+  const hasMarkedAsRead = useRef(false);
+
+  useEffect(() => {
+    if (isUnread && !messagesLoading && !hasMarkedAsRead.current) {
+      toggleReadStatus();
+      hasMarkedAsRead.current = true;
+    }
+  }, [isUnread, messagesLoading, toggleReadStatus]);
+};
+
 function useNewConversationHeader() {
   const navigation = useRouter();
 

components/PinnedConversations/PinnedV3DMConversation.tsx

@@ -55,7 +55,6 @@ export const PinnedV3DMConversation = ({
   const isUnread = useConversationIsUnread({
     topic,
     lastMessage: conversation.lastMessage,
-    conversation: conversation,
     timestamp,
   });
 

components/PinnedConversations/PinnedV3GroupConversation.tsx

@@ -52,7 +52,6 @@ export const PinnedV3GroupConversation = ({
   const isUnread = useConversationIsUnread({
     topic,
     lastMessage: group.lastMessage,
-    conversation: group,
     timestamp,
   });
 

components/V3DMListItem.tsx

@@ -69,7 +69,6 @@ export const V3DMListItem = ({ conversation }: V3DMListItemProps) => {
   const isUnread = useConversationIsUnread({
     topic,
     lastMessage: conversation.lastMessage,
-    conversation: conversation,
     timestamp,
   });
 

components/V3GroupConversationListItem.tsx

@@ -10,7 +10,7 @@ import { saveTopicsData } from "@utils/api";
 import { getMinimalDate } from "@utils/date";
 import { Haptics } from "@utils/haptics";
 import { navigate } from "@utils/navigation";
-import { RefObject, useCallback, useMemo, useRef } from "react";
+import { RefObject, useCallback, useEffect, useMemo, useRef } from "react";
 import { useColorScheme } from "react-native";
 import { Swipeable } from "react-native-gesture-handler";
 import { runOnJS } from "react-native-reanimated";
@@ -69,7 +69,6 @@ const useData = ({ group }: UseDataProps) => {
   const isUnread = useConversationIsUnread({
     topic,
     lastMessage: group.lastMessage,
-    conversation: group,
     timestamp,
   });
 
@@ -371,7 +370,9 @@ export function V3GroupConversationListItem({
     handleRestore,
     messageText,
   } = useData({ group });
+
   const ref = useRef<Swipeable>(null);
+
   const {
     onPress,
     onLongPress,
@@ -390,6 +391,7 @@ export function V3GroupConversationListItem({
     handleRestore,
     isBlockedChatView,
   });
+
   const { timeToShow, leftActionIcon } = useDisplayInfo({
     timestamp,
     isUnread,

features/conversation-list/hooks/useMessageIsUnread.ts

@@ -1,17 +1,14 @@
 import { useMemo } from "react";
-import { ChatStoreType, TopicsData } from "@data/store/chatStore";
-import {
-  ConversationWithCodecsType,
-  DecodedMessageWithCodecsType,
-} from "@utils/xmtpRN/client";
-import { useChatStore } from "@data/store/accountsStore";
+import { ChatStoreType } from "@data/store/chatStore";
+import { DecodedMessageWithCodecsType } from "@utils/xmtpRN/client";
+import { useChatStore, useCurrentAccount } from "@data/store/accountsStore";
 import { useSelect } from "@data/store/storeHelpers";
 import { normalizeTimestamp } from "@/utils/date";
+import { getCurrentUserAccountInboxId } from "@/components/Chat/Message/message-utils";
 
 type UseConversationIsUnreadProps = {
   topic: string;
   lastMessage: DecodedMessageWithCodecsType | undefined;
-  conversation: ConversationWithCodecsType;
   timestamp: number;
 };
 
@@ -20,26 +17,27 @@ const chatStoreSelectKeys: (keyof ChatStoreType)[] = ["topicsData"];
 export const useConversationIsUnread = ({
   topic,
   lastMessage,
-  conversation,
   timestamp: timestampNs,
 }: UseConversationIsUnreadProps) => {
   const { topicsData } = useChatStore(useSelect(chatStoreSelectKeys));
+  const currentInboxId = getCurrentUserAccountInboxId();
 
   return useMemo(() => {
-    if (topicsData[topic]?.status === "unread") {
-      return true;
-    }
-    if (lastMessage?.senderAddress === conversation?.client.inboxId) {
+    // No message means no unread status
+    if (!lastMessage) return false;
+
+    // Check if status is unread
+    if (topicsData[topic]?.status === "unread") return true;
+
+    // Check if the last message was sent by the current user
+    if (lastMessage.senderAddress === currentInboxId) {
       return false;
     }
+
     const timestamp = normalizeTimestamp(timestampNs);
     const readUntil = topicsData[topic]?.readUntil || 0;
+
+    // Return true if the last message timestamp is greater than readUntil
     return readUntil < (timestamp ?? 0);
-  }, [
-    topicsData,
-    topic,
-    lastMessage?.senderAddress,
-    conversation?.client.inboxId,
-    timestampNs,
-  ]);
+  }, [topicsData, topic, timestampNs, lastMessage, currentInboxId]);
 };

features/conversation-list/hooks/useToggleReadStatus.ts

@@ -15,19 +15,20 @@ export const useToggleReadStatus = ({
   currentAccount,
 }: UseToggleReadStatusProps) => {
   const { setTopicsData } = useChatStore(useSelect(["setTopicsData"]));
-
   return useCallback(() => {
     const newStatus = isUnread ? "read" : "unread";
     const timestamp = new Date().getTime();
     setTopicsData({
       [topic]: {
         status: newStatus,
+        readUntil: isUnread ? timestamp : 0,
         timestamp,
       },
     });
     saveTopicsData(currentAccount, {
       [topic]: {
         status: newStatus,
+        readUntil: isUnread ? timestamp : 0,
         timestamp,
       },
     });