fix: Unread mark not showing (#30084)

.changeset/wise-ways-fetch.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+fixed the unread messages mark not showing

apps/meteor/app/ui-utils/client/index.ts

@@ -2,7 +2,6 @@ import './lib/messageActionDefault';
 
 export { MessageAction } from './lib/MessageAction';
 export { messageBox } from './lib/messageBox';
-export { readMessage } from './lib/readMessages';
 export { LegacyRoomManager } from './lib/LegacyRoomManager';
 export { upsertMessage, RoomHistoryManager } from './lib/RoomHistoryManager';
 export { mainReady } from './lib/mainReady';

apps/meteor/app/ui-utils/client/lib/RoomHistoryManager.ts

@@ -13,7 +13,6 @@ import { getConfig } from '../../../../client/lib/utils/getConfig';
 import { waitForElement } from '../../../../client/lib/utils/waitForElement';
 import { ChatMessage, ChatSubscription } from '../../../models/client';
 import { getUserPreference } from '../../../utils/client';
-import { readMessage } from './readMessages';
 
 export async function upsertMessage(
 	{
@@ -196,14 +195,12 @@ class RoomHistoryManagerClass extends Emitter {
 		}
 
 		waitAfterFlush(() => {
+			this.emit('loaded-messages');
 			const heightDiff = wrapper.scrollHeight - (previousHeight ?? NaN);
 			wrapper.scrollTop = (scroll ?? NaN) + heightDiff;
 		});
 
 		room.isLoading.set(false);
-		waitAfterFlush(() => {
-			readMessage.refreshUnreadMark(rid);
-		});
 	}
 
 	public async getMoreNext(rid: IRoom['_id'], atBottomRef: MutableRefObject<boolean>) {
@@ -299,9 +296,8 @@ class RoomHistoryManagerClass extends Emitter {
 
 		upsertMessageBulk({ msgs: Array.from(result.messages).filter((msg) => msg.t !== 'command'), subscription });
 
-		readMessage.refreshUnreadMark(message.rid);
-
 		Tracker.afterFlush(async () => {
+			this.emit('loaded-messages');
 			room.isLoading.set(false);
 		});
 

apps/meteor/app/ui/client/lib/ChatMessages.ts

@@ -12,6 +12,7 @@ import { replyBroadcast } from '../../../../client/lib/chats/flows/replyBroadcas
 import { requestMessageDeletion } from '../../../../client/lib/chats/flows/requestMessageDeletion';
 import { sendMessage } from '../../../../client/lib/chats/flows/sendMessage';
 import { uploadFiles } from '../../../../client/lib/chats/flows/uploadFiles';
+import { ReadStateManager } from '../../../../client/lib/chats/readStateManager';
 import { createUploadsAPI } from '../../../../client/lib/chats/uploads';
 import {
 	setHighlightMessage,
@@ -37,6 +38,8 @@ export class ChatMessages implements ChatAPI {
 
 	public data: DataAPI;
 
+	public readStateManager: ReadStateManager;
+
 	public uploads: UploadsAPI;
 
 	public userCard: { open(username: string): (event: UIEvent) => void; close(): void };
@@ -149,6 +152,8 @@ export class ChatMessages implements ChatAPI {
 			throw new Error('Flow is not implemented');
 		};
 
+		this.readStateManager = new ReadStateManager(rid);
+
 		this.userCard = {
 			open: unimplemented,
 			close: unimplemented,

apps/meteor/client/lib/chats/ChatAPI.ts

@@ -4,6 +4,7 @@ import type { UIEvent } from 'react';
 import type { FormattingButton } from '../../../app/ui-message/client/messageBox/messageBoxFormatting';
 import type { Subscribable } from '../../definitions/Subscribable';
 import type { Upload } from './Upload';
+import type { ReadStateManager } from './readStateManager';
 
 export type ComposerAPI = {
 	release(): void;
@@ -86,7 +87,6 @@ export type DataAPI = {
 	getRoom(): Promise<IRoom>;
 	isSubscribedToRoom(): Promise<boolean>;
 	joinRoom(): Promise<void>;
-	markRoomAsRead(): Promise<void>;
 	findDiscussionByID(drid: IRoom['_id']): Promise<IRoom | undefined>;
 	getDiscussionByID(drid: IRoom['_id']): Promise<IRoom>;
 	findSubscription(): Promise<ISubscription | undefined>;
@@ -110,6 +110,7 @@ export type ChatAPI = {
 	readonly setComposerAPI: (composer: ComposerAPI) => void;
 	readonly data: DataAPI;
 	readonly uploads: UploadsAPI;
+	readonly readStateManager: ReadStateManager;
 	readonly messageEditing: {
 		toPreviousMessage(): Promise<void>;
 		toNextMessage(): Promise<void>;

apps/meteor/client/lib/chats/data.ts

@@ -5,7 +5,7 @@ import moment from 'moment';
 import { hasAtLeastOnePermission, hasPermission } from '../../../app/authorization/client';
 import { Messages, ChatRoom, ChatSubscription } from '../../../app/models/client';
 import { settings } from '../../../app/settings/client';
-import { readMessage, MessageTypes } from '../../../app/ui-utils/client';
+import { MessageTypes } from '../../../app/ui-utils/client';
 import { sdk } from '../../../app/utils/client/lib/SDKClient';
 import { onClientBeforeSendMessage } from '../onClientBeforeSendMessage';
 import { prependReplies } from '../utils/prependReplies';
@@ -249,11 +249,6 @@ export const createDataAPI = ({ rid, tmid }: { rid: IRoom['_id']; tmid: IMessage
 		await sdk.call('joinRoom', rid);
 	};
 
-	const markRoomAsRead = async (): Promise<void> => {
-		readMessage.readNow(rid);
-		readMessage.refreshUnreadMark(rid);
-	};
-
 	const findDiscussionByID = async (drid: IRoom['_id']): Promise<IRoom | undefined> =>
 		ChatRoom.findOne({ _id: drid, prid: { $exists: true } }, { reactive: false });
 
@@ -318,7 +313,6 @@ export const createDataAPI = ({ rid, tmid }: { rid: IRoom['_id']; tmid: IMessage
 		getRoom,
 		isSubscribedToRoom,
 		joinRoom,
-		markRoomAsRead,
 		findDiscussionByID,
 		getDiscussionByID,
 		findSubscription,

apps/meteor/client/lib/chats/flows/sendMessage.ts

@@ -42,7 +42,8 @@ export const sendMessage = async (chat: ChatAPI, { text, tshow }: { text: string
 		}
 	}
 
-	await chat.data.markRoomAsRead();
+	chat.readStateManager.clearUnreadMark();
+	await chat.readStateManager.debouncedMarkAsRead();
 
 	text = text.trim();