fix: thread content disappears after jumping to recent messages

.changeset/clever-zebras-melt.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixes an issue where thread content would disappear after clicking "Jump to recent messages".

apps/meteor/app/lib/client/methods/sendMessage.ts

@@ -5,6 +5,7 @@ import { onClientMessageReceived } from '../../../../client/lib/onClientMessageR
 import { settings } from '../../../../client/lib/settings';
 import { dispatchToastMessage } from '../../../../client/lib/toast';
 import { getUser, getUserId } from '../../../../client/lib/user';
+import { upsertThreadMessageInCache } from '../../../../client/lib/utils/threadMessageUtils';
 import { Messages, Rooms } from '../../../../client/stores';
 import { trim } from '../../../../lib/utils/stringUtils';
 import { t } from '../../../utils/lib/i18n';
@@ -45,5 +46,10 @@ export const runOptimisticSendMessage = async (
 
 	const processed = await onClientMessageReceived(optimistic);
 	Messages.state.store(processed);
+
+	if (processed.tmid) {
+		upsertThreadMessageInCache(processed, processed.rid, processed.tmid);
+	}
+
 	await clientCallbacks.run('afterSaveMessage', processed, { room, user });
 };

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

@@ -10,6 +10,7 @@ import { Messages, Rooms, Subscriptions } from '../../stores';
 import { settings } from '../settings';
 import { getUserId } from '../user';
 import { prependReplies } from '../utils/prependReplies';
+import { upsertThreadMessageInCache } from '../utils/threadMessageUtils';
 
 export const createDataAPI = ({ rid, tmid }: { rid: IRoom['_id']; tmid: IMessage['_id'] | undefined }): DataAPI => {
 	const composeMessage = async (
@@ -162,7 +163,12 @@ export const createDataAPI = ({ rid, tmid }: { rid: IRoom['_id']; tmid: IMessage
 	};
 
 	const pushEphemeralMessage = async (message: Omit<IMessage, 'rid' | 'tmid'>): Promise<void> => {
-		Messages.state.store({ ...message, rid, ...(tmid && { tmid }) });
+		const fullMessage = { ...message, rid, ...(tmid && { tmid }) } as IMessage;
+		Messages.state.store(fullMessage);
+
+		if (tmid) {
+			upsertThreadMessageInCache(fullMessage, rid, tmid);
+		}
 	};
 
 	const updateMessage = async (message: IEditedMessage, previewUrls?: string[]): Promise<void> => {

apps/meteor/client/lib/queryKeys.ts

@@ -36,6 +36,8 @@ export const roomsQueryKeys = {
 	images: (rid: IRoom['_id'], options?: { startingFromId?: string }) => [...roomsQueryKeys.room(rid), 'images', options] as const,
 	autocomplete: (text: string) => [...roomsQueryKeys.all, 'autocomplete', text] as const,
 	discussions: (rid: IRoom['_id'], ...args: [filter: { text?: string }]) => [...roomsQueryKeys.room(rid), 'discussions', ...args] as const,
+	threadMessages: (rid: IRoom['_id'], tmid: IMessage['_id']) => [...roomsQueryKeys.room(rid), 'threads', tmid, 'messages'] as const,
+	threadMainMessage: (rid: IRoom['_id'], tmid: IMessage['_id']) => [...roomsQueryKeys.room(rid), 'threads', tmid, 'main-message'] as const,
 };
 
 export const subscriptionsQueryKeys = {

apps/meteor/client/lib/utils/threadMessageUtils.ts

@@ -0,0 +1,105 @@
+import type { IMessage, IThreadMessage, MessageAttachment } from '@rocket.chat/core-typings';
+import { createPredicateFromFilter } from '@rocket.chat/mongo-adapter';
+import type { QueryClient } from '@tanstack/react-query';
+import type { Condition, Filter } from 'mongodb';
+
+import { queryClient as defaultQueryClient } from '../queryClient';
+import { roomsQueryKeys } from '../queryKeys';
+
+export type NotifyRoomRidDeleteBulkEvent = {
+	rid: IMessage['rid'];
+	excludePinned: boolean;
+	ignoreDiscussion: boolean;
+	ts: Condition<Date>;
+	users: string[];
+	ids?: string[];
+	showDeletedStatus?: boolean;
+} & (
+	| {
+			filesOnly: true;
+			replaceFileAttachmentsWith?: MessageAttachment;
+	  }
+	| {
+			filesOnly?: false;
+	  }
+);
+
+export const createDeleteCriteria = (params: NotifyRoomRidDeleteBulkEvent): ((message: IMessage) => boolean) => {
+	const query: Filter<IMessage> = {};
+
+	if (params.ids) {
+		query._id = { $in: params.ids };
+	} else {
+		query.ts = params.ts;
+	}
+
+	if (params.excludePinned) {
+		query.pinned = { $ne: true };
+	}
+
+	if (params.ignoreDiscussion) {
+		query.drid = { $exists: false };
+	}
+	if (params.users?.length) {
+		query['u.username'] = { $in: params.users };
+	}
+
+	return createPredicateFromFilter(query);
+};
+
+export const upsertThreadMessageInCache = (
+	message: IMessage,
+	rid: IMessage['rid'],
+	tmid: IMessage['_id'],
+	client: QueryClient = defaultQueryClient,
+): void => {
+	const queryKey = roomsQueryKeys.threadMessages(rid, tmid);
+	client.setQueryData<IMessage[]>(queryKey, (old) => {
+		if (!old) {
+			return [message];
+		}
+		const idx = old.findIndex((m) => m._id === message._id);
+		if (idx >= 0) {
+			const updated = [...old];
+			updated[idx] = message;
+			return updated;
+		}
+		return [...old, message].sort((a, b) => new Date(a.ts).getTime() - new Date(b.ts).getTime());
+	});
+};
+
+export const markThreadMessagesAsRead = (messages: IThreadMessage[], until?: Date): IThreadMessage[] => {
+	return messages.map((msg) => {
+		if (!msg.unread) {
+			return msg;
+		}
+		if (until && new Date(msg.ts) > until) {
+			return msg;
+		}
+		const { unread: _, ...rest } = msg;
+		return rest as IThreadMessage;
+	});
+};
+
+export const mergeThreadMessages = (cachedMessages: IThreadMessage[], fetchedMessages: IThreadMessage[]): IThreadMessage[] => {
+	const messageMap = new Map<string, IThreadMessage>();
+
+	for (const msg of cachedMessages) {
+		messageMap.set(msg._id, msg);
+	}
+
+	for (const msg of fetchedMessages) {
+		const existing = messageMap.get(msg._id);
+		if (!existing) {
+			messageMap.set(msg._id, msg);
+		} else {
+			const msgTime = new Date(msg._updatedAt ?? msg.ts).getTime();
+			const existingTime = new Date(existing._updatedAt ?? existing.ts).getTime();
+			if (msgTime > existingTime) {
+				messageMap.set(msg._id, msg);
+			}
+		}
+	}
+
+	return Array.from(messageMap.values()).sort((a, b) => new Date(a.ts).getTime() - new Date(b.ts).getTime());
+};

apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx

@@ -20,7 +20,7 @@ import { useDateScroll } from '../../../hooks/useDateScroll';
 import { useFirstUnreadMessageId } from '../../../hooks/useFirstUnreadMessageId';
 import { useMessageListNavigation } from '../../../hooks/useMessageListNavigation';
 import { useLegacyThreadMessageListScrolling } from '../hooks/useLegacyThreadMessageListScrolling';
-import { useLegacyThreadMessages } from '../hooks/useLegacyThreadMessages';
+import { useThreadMessagesQuery } from '../hooks/useThreadMessagesQuery';
 import './threads.css';
 
 const isMessageSequential = (current: IMessage, previous: IMessage | undefined, groupingRange: number): boolean => {
@@ -54,7 +54,7 @@ const ThreadMessageList = ({ mainMessage }: ThreadMessageListProps): ReactElemen
 	const { t } = useTranslation();
 	const { innerRef, bubbleRef, listStyle, ...bubbleDate } = useDateScroll();
 
-	const { messages, loading } = useLegacyThreadMessages(mainMessage._id);
+	const { data: messages = [], isLoading: loading } = useThreadMessagesQuery(mainMessage._id);
 
 	const { innerRef: listScrollRef, jumpToRef } = useLegacyThreadMessageListScrolling(mainMessage);
 

apps/meteor/client/views/room/contextualBar/Threads/hooks/useThreadMainMessageQuery.ts

@@ -1,60 +1,19 @@
 import type { IMessage, IThreadMainMessage, MessageAttachment } from '@rocket.chat/core-typings';
-import { createPredicateFromFilter } from '@rocket.chat/mongo-adapter';
 import { useStream } from '@rocket.chat/ui-contexts';
 import type { UseQueryResult } from '@tanstack/react-query';
 import { useQueryClient, useQuery } from '@tanstack/react-query';
-import type { Condition, Filter } from 'mongodb';
 import { useCallback, useEffect, useRef } from 'react';
 
 import { useGetMessageByID } from './useGetMessageByID';
 import { withDebouncing } from '../../../../../../lib/utils/highOrderFunctions';
 import { onClientMessageReceived } from '../../../../../lib/onClientMessageReceived';
+import { roomsQueryKeys } from '../../../../../lib/queryKeys';
 import { modifyMessageOnFilesDelete } from '../../../../../lib/utils/modifyMessageOnFilesDelete';
+import { createDeleteCriteria } from '../../../../../lib/utils/threadMessageUtils';
 import { useRoom } from '../../../contexts/RoomContext';
 
 type RoomMessagesRidEvent = IMessage;
 
-type NotifyRoomRidDeleteBulkEvent = {
-	rid: IMessage['rid'];
-	excludePinned: boolean;
-	ignoreDiscussion: boolean;
-	ts: Condition<Date>;
-	users: string[];
-	ids?: string[]; // message ids have priority over ts
-	showDeletedStatus?: boolean;
-} & (
-	| {
-			filesOnly: true;
-			replaceFileAttachmentsWith?: MessageAttachment;
-	  }
-	| {
-			filesOnly?: false;
-	  }
-);
-
-const createDeleteCriteria = (params: NotifyRoomRidDeleteBulkEvent): ((message: IMessage) => boolean) => {
-	const query: Filter<IMessage> = {};
-
-	if (params.ids) {
-		query._id = { $in: params.ids };
-	} else {
-		query.ts = params.ts;
-	}
-
-	if (params.excludePinned) {
-		query.pinned = { $ne: true };
-	}
-
-	if (params.ignoreDiscussion) {
-		query.drid = { $exists: false };
-	}
-	if (params.users?.length) {
-		query['u.username'] = { $in: params.users };
-	}
-
-	return createPredicateFromFilter(query);
-};
-
 const useSubscribeToMessage = () => {
 	const subscribeToRoomMessages = useStream('room-messages');
 	const subscribeToNotifyRoom = useStream('notify-room');
@@ -66,10 +25,12 @@ const useSubscribeToMessage = () => {
 				onMutate,
 				onDelete,
 				onFilesDelete,
+				onMessagesRead,
 			}: {
-				onMutate?: (message: IMessage) => void;
-				onDelete?: () => void;
-				onFilesDelete?: (replaceFileAttachmentsWith?: MessageAttachment) => void;
+				onMutate?: (message: IMessage) => void | Promise<void>;
+				onDelete?: () => void | Promise<void>;
+				onFilesDelete?: (replaceFileAttachmentsWith?: MessageAttachment) => void | Promise<void>;
+				onMessagesRead?: (event: { tmid?: string; until: Date }) => void | Promise<void>;
 			},
 		) => {
 			const unsubscribeFromRoomMessages = subscribeToRoomMessages(message.rid, (event: RoomMessagesRidEvent) => {
@@ -90,10 +51,15 @@ const useSubscribeToMessage = () => {
 				}
 			});
 
+			const unsubscribeFromMessagesRead = subscribeToNotifyRoom(`${message.rid}/messagesRead`, (event) => {
+				onMessagesRead?.(event);
+			});
+
 			return () => {
 				unsubscribeFromRoomMessages();
 				unsubscribeFromDeleteMessage();
 				unsubscribeFromDeleteMessageBulk();
+				unsubscribeFromMessagesRead();
 			};
 		},
 		[subscribeToNotifyRoom, subscribeToRoomMessages],
@@ -120,7 +86,7 @@ export const useThreadMainMessageQuery = (
 	}, [tmid]);
 
 	return useQuery({
-		queryKey: ['rooms', room._id, 'threads', tmid, 'main-message'] as const,
+		queryKey: roomsQueryKeys.threadMainMessage(room._id, tmid),
 
 		queryFn: async ({ queryKey }) => {
 			const mainMessage = await getMessage(tmid);
@@ -156,6 +122,24 @@ export const useThreadMainMessageQuery = (
 						queryClient.setQueryData(queryKey, () => msg);
 						debouncedInvalidate();
 					},
+					onMessagesRead: ({ tmid: eventTmid, until }) => {
+						if (eventTmid) {
+							return;
+						}
+
+						queryClient.setQueryData<IThreadMainMessage>(queryKey, (old) => {
+							if (!old?.unread) {
+								return old;
+							}
+
+							if (new Date(old.ts).getTime() <= new Date(until).getTime()) {
+								const { unread: _, ...rest } = old;
+								return rest as IThreadMainMessage;
+							}
+
+							return old;
+						});
+					},
 				});
 
 			return mainMessage;