fix: check if message unread to show read receipts (#25216)

apps/meteor/client/views/room/MessageList/components/MessageContent.tsx

@@ -17,7 +17,7 @@ import { UserPresence } from '../../../../lib/presence';
 import MessageBlock from '../../../blocks/MessageBlock';
 import MessageLocation from '../../../location/MessageLocation';
 import { useMessageActions, useMessageOembedIsEnabled, useMessageRunActionLink } from '../../contexts/MessageContext';
-import { useMessageListShowReadReceipt } from '../contexts/MessageListContext';
+import { useMessageShowReadReceipt } from '../contexts/MessageListContext';
 import EncryptedMessageRender from './EncryptedMessageRender';
 import ReactionsList from './MessageReactionsList';
 import ReadReceipt from './MessageReadReceipt';
@@ -35,7 +35,7 @@ const MessageContent: FC<{ message: IMessage; sequential: boolean; subscription?
 	const runActionLink = useMessageRunActionLink();
 
 	const oembedIsEnabled = useMessageOembedIsEnabled();
-	const shouldShowReadReceipt = useMessageListShowReadReceipt();
+	const shouldShowReadReceipt = useMessageShowReadReceipt({ message });
 	const user: UserPresence = { ...message.u, roles: [], ...useUserData(message.u._id) };
 	const isEncryptedMessage = isE2EEMessage(message);
 

apps/meteor/client/views/room/MessageList/contexts/MessageListContext.tsx

@@ -5,6 +5,7 @@ export type MessageListContextValue = {
 	useShowTranslated: ({ message }: { message: IMessage }) => boolean;
 	useShowStarred: ({ message }: { message: IMessage }) => boolean;
 	useShowFollowing: ({ message }: { message: IMessage }) => boolean;
+	useShowReadReceipt: ({ message }: { message: IMessage }) => boolean;
 	useMessageDateFormatter: () => (date: Date) => string;
 	useUserHasReacted: (message: IMessage) => (reaction: string) => boolean;
 	useReactToMessage: (message: IMessage) => (reaction: string) => void;
@@ -13,7 +14,6 @@ export type MessageListContextValue = {
 	showRoles: boolean;
 	showRealName: boolean;
 	showUsername: boolean;
-	showReadReceipt: boolean;
 	highlights?:
 		| {
 				highlight: string;
@@ -26,6 +26,7 @@ export const MessageListContext = createContext<MessageListContextValue>({
 	useShowTranslated: () => false,
 	useShowStarred: () => false,
 	useShowFollowing: () => false,
+	useShowReadReceipt: () => false,
 	useUserHasReacted: () => (): boolean => false,
 	useMessageDateFormatter:
 		() =>
@@ -40,7 +41,6 @@ export const MessageListContext = createContext<MessageListContextValue>({
 	showRoles: false,
 	showRealName: false,
 	showUsername: false,
-	showReadReceipt: false,
 });
 
 export const useShowTranslated: MessageListContextValue['useShowTranslated'] = (...args) =>
@@ -51,11 +51,11 @@ export const useShowFollowing: MessageListContextValue['useShowFollowing'] = (..
 	useContext(MessageListContext).useShowFollowing(...args);
 export const useMessageDateFormatter: MessageListContextValue['useMessageDateFormatter'] = (...args) =>
 	useContext(MessageListContext).useMessageDateFormatter(...args);
+export const useMessageShowReadReceipt: MessageListContextValue['useShowReadReceipt'] = (...args) =>
+	useContext(MessageListContext).useShowReadReceipt(...args);
 export const useMessageListShowRoles = (): MessageListContextValue['showRoles'] => useContext(MessageListContext).showRoles;
 export const useMessageListShowRealName = (): MessageListContextValue['showRealName'] => useContext(MessageListContext).showRealName;
 export const useMessageListShowUsername = (): MessageListContextValue['showUsername'] => useContext(MessageListContext).showUsername;
-export const useMessageListShowReadReceipt = (): MessageListContextValue['showReadReceipt'] =>
-	useContext(MessageListContext).showReadReceipt;
 export const useMessageListHighlights = (): MessageListContextValue['highlights'] => useContext(MessageListContext).highlights;
 
 export const useUserHasReacted: MessageListContextValue['useUserHasReacted'] = (message: IMessage) =>

apps/meteor/client/views/room/MessageList/providers/MessageListProvider.tsx

@@ -75,6 +75,7 @@ export const MessageListProvider: FC<{
 			useShowStarred: hasSubscription
 				? ({ message }): boolean => Boolean(Array.isArray(message.starred) && message.starred.find((star) => star._id === uid))
 				: (): boolean => false,
+			useShowReadReceipt: ({ message }): boolean => showReadReceipt && !message.unread,
 			useMessageDateFormatter:
 				() =>
 				(date: Date): string =>
@@ -83,7 +84,6 @@ export const MessageListProvider: FC<{
 			showRoles,
 			showRealName,
 			showUsername,
-			showReadReceipt,
 			highlights: highlights
 				?.map((str) => str.trim())
 				.map((highlight) => ({

packages/core-typings/src/IMessage/IMessage.ts

@@ -106,6 +106,7 @@ export interface IMessage extends IRocketChatRecord {
   };
   starred?: { _id: IUser["_id"] }[];
   pinned?: boolean;
+  unread?: boolean;
   drid?: RoomID;
   tlm?: Date;