chore: paginated thread message list

apps/meteor/app/api/server/v1/chat.ts

@@ -1135,7 +1135,7 @@ const chatEndpoints = API.v1
 			},
 		},
 		async function action() {
-			const { tmid } = this.queryParams;
+			const { tmid, aroundId } = this.queryParams;
 			const { query, fields, sort } = await this.parseJsonQuery();
 			const { offset, count } = await getPaginationItems(this.queryParams);
 
@@ -1153,11 +1153,27 @@ const chatEndpoints = API.v1
 			if (!room || !user || !(await canAccessRoomAsync(room, user))) {
 				throw new Meteor.Error('error-not-allowed', 'Not Allowed');
 			}
+
+			let resolvedOffset = offset;
+			let resolvedSort = sort || { ts: 1 };
+			if (aroundId) {
+				resolvedSort = { ts: 1 };
+				if (aroundId === tmid) {
+					resolvedOffset = 0;
+				} else {
+					const target = await Messages.findOneById(aroundId, { projection: { ts: 1, tmid: 1 } });
+					if (target?.tmid === tmid && target.ts) {
+						const before = await Messages.countDocuments({ tmid, ts: { $lt: target.ts } });
+						resolvedOffset = Math.max(0, before - Math.floor(count / 2));
+					}
+				}
+			}
+
 			const { cursor, totalCount } = Messages.findPaginated(
 				{ ...query, tmid },
 				{
-					sort: sort || { ts: 1 },
-					skip: offset,
+					sort: resolvedSort,
+					skip: resolvedOffset,
 					limit: count,
 					projection: fields,
 				},
@@ -1168,7 +1184,7 @@ const chatEndpoints = API.v1
 			return API.v1.success({
 				messages,
 				count: messages.length,
-				offset,
+				offset: resolvedOffset,
 				total,
 			});
 		},

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

@@ -1,6 +1,6 @@
 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 { InfiniteData, QueryClient } from '@tanstack/react-query';
 import type { Condition, Filter } from 'mongodb';
 
 import { queryClient as defaultQueryClient } from '../queryClient';
@@ -47,24 +47,76 @@ export const createDeleteCriteria = (params: NotifyRoomRidDeleteBulkEvent): ((me
 	return createPredicateFromFilter(query);
 };
 
+export type ThreadMessagesPage = {
+	items: IThreadMessage[];
+	itemCount: number;
+};
+
+export type ThreadMessagesInfiniteData = InfiniteData<ThreadMessagesPage, number>;
+
+export const mutateThreadMessagesInfiniteData = (
+	client: QueryClient,
+	queryKey: readonly unknown[],
+	mutation: (messages: IThreadMessage[]) => void,
+): void => {
+	client.setQueryData<ThreadMessagesInfiniteData>(queryKey, (old) => {
+		if (!old?.pages.length) {
+			return old;
+		}
+
+		const items = old.pages.flatMap((page) => page.items);
+		const originalPageLengths = old.pages.map((page) => page.items.length);
+		const oldTotal = old.pages.at(-1)?.itemCount ?? 0;
+
+		const beforeMutationItemsLength = items.length;
+		mutation(items);
+		const afterMutationItemsLength = items.length;
+
+		const itemCountDelta = beforeMutationItemsLength - afterMutationItemsLength;
+		const newTotal = Math.max(0, oldTotal - itemCountDelta);
+
+		const pages: ThreadMessagesPage[] = [];
+		let cursor = 0;
+		for (let pageIndex = 0; pageIndex < old.pages.length; pageIndex++) {
+			const isLastPage = pageIndex === old.pages.length - 1;
+			const take = isLastPage ? items.length - cursor : Math.min(originalPageLengths[pageIndex], items.length - cursor);
+			const slice = items.slice(cursor, cursor + Math.max(0, take));
+			cursor += slice.length;
+			pages.push({ items: slice, itemCount: newTotal });
+		}
+
+		return {
+			pages,
+			pageParams: old.pageParams,
+		};
+	});
+};
+
 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 (!client.getQueryData<ThreadMessagesInfiniteData>(queryKey)) {
+		client.setQueryData<ThreadMessagesInfiniteData>(queryKey, {
+			pages: [{ items: [message as IThreadMessage], itemCount: 1 }],
+			pageParams: [0],
+		});
+		return;
+	}
+
+	mutateThreadMessagesInfiniteData(client, queryKey, (messages) => {
+		const idx = messages.findIndex((m) => m._id === message._id);
 		if (idx >= 0) {
-			const updated = [...old];
-			updated[idx] = message;
-			return updated;
+			messages[idx] = message as IThreadMessage;
+			return;
 		}
-		return [...old, message].sort((a, b) => new Date(a.ts).getTime() - new Date(b.ts).getTime());
+
+		messages.push(message as IThreadMessage);
+		messages.sort((a, b) => new Date(a.ts).getTime() - new Date(b.ts).getTime());
 	});
 };
 

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

@@ -1,16 +1,18 @@
 import type { IMessage, IThreadMainMessage } from '@rocket.chat/core-typings';
 import { isEditedMessage } from '@rocket.chat/core-typings';
+import { useDebouncedCallback } from '@rocket.chat/fuselage-hooks';
 import { MessageTypes } from '@rocket.chat/message-types';
 import { isTruthy } from '@rocket.chat/tools';
 import { clientCallbacks, CustomVirtuaScrollbars } from '@rocket.chat/ui-client';
 import { useSearchParameter, useSetting, useUserId, useUserPreference } from '@rocket.chat/ui-contexts';
 import { differenceInSeconds } from 'date-fns';
-import { Fragment, useEffect, useMemo, useRef } from 'react';
+import { Fragment, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { VirtualizerHandle } from 'virtua';
 import { VList } from 'virtua';
 
 import { ThreadMessageItem } from './ThreadMessageItem';
+import InfiniteListAnchor from '../../../../../components/InfiniteListAnchor';
 import { useMergedRefsV2 } from '../../../../../hooks/useMergedRefsV2';
 import { setMessageJumpQueryStringParameter } from '../../../../../lib/utils/setMessageJumpQueryStringParameter';
 import { BubbleDate } from '../../../BubbleDate';
@@ -61,7 +63,40 @@ const ThreadMessageList = ({ mainMessage, shouldJumpToBottom, setShouldJumpToBot
 	const msgJumpParam = useSearchParameter('msg');
 	const { bubbleRef, handleDateScroll, ...bubbleDate } = useDateScroll();
 
-	const { data: messages = [], isLoading: loading } = useThreadMessagesQuery(mainMessage._id);
+	const {
+		data,
+		isLoading: loading,
+		fetchNextPage,
+		hasNextPage,
+		isFetchingNextPage,
+		fetchPreviousPage,
+		hasPreviousPage,
+		isFetchingPreviousPage,
+		loadMessageAround,
+	} = useThreadMessagesQuery(mainMessage._id);
+	const messages = useMemo(() => data?.messages ?? [], [data?.messages]);
+
+	const loadMoreMessages = useDebouncedCallback(
+		() => {
+			if (hasNextPage && !isFetchingNextPage) {
+				void fetchNextPage();
+			}
+		},
+		100,
+		[hasNextPage, isFetchingNextPage, fetchNextPage],
+	);
+
+	const initialScrollDoneRef = useRef(false);
+
+	const loadPreviousMessages = useDebouncedCallback(
+		() => {
+			if (initialScrollDoneRef.current && isAtBottom.current !== true && hasPreviousPage && !isFetchingPreviousPage) {
+				void fetchPreviousPage();
+			}
+		},
+		100,
+		[hasPreviousPage, isFetchingPreviousPage, fetchPreviousPage],
+	);
 
 	const room = useRoom();
 	const uid = useUserId();
@@ -88,12 +123,50 @@ const ThreadMessageList = ({ mainMessage, shouldJumpToBottom, setShouldJumpToBot
 			}
 		});
 	}, [messagesLength, setKeepAtBottom, msgJumpParam]);
+	const loadingWindowKeyRef = useRef<string | undefined>(undefined);
+
+	useEffect(() => {
+		if (loading || !msgJumpParam || isFetchingNextPage || isFetchingPreviousPage) {
+			return;
+		}
+		if (msgJumpParam === mainMessage._id) {
+			return;
+		}
+		if (messages.some((message) => message._id === msgJumpParam)) {
+			return;
+		}
+		const windowKey = `${mainMessage._id}:${msgJumpParam}`;
+		if (loadingWindowKeyRef.current === windowKey) {
+			return;
+		}
+		loadingWindowKeyRef.current = windowKey;
+		void loadMessageAround(msgJumpParam);
+	}, [loading, isFetchingNextPage, isFetchingPreviousPage, msgJumpParam, messages, mainMessage._id, loadMessageAround]);
 
 	const mergedRefs = useMergedRefsV2(messageListRef, keepAtBottomRef);
 
 	const lastScrollSizeRef = useRef(0);
 
-	const items = loading ? [] : [mainMessage, ...messages];
+	const showMainMessage = !hasPreviousPage;
+	const items = useMemo(() => {
+		if (loading) {
+			return [];
+		}
+		return showMainMessage ? [mainMessage, ...messages] : messages;
+	}, [loading, showMainMessage, mainMessage, messages]);
+
+	const firstItemId = items[0]?._id;
+	const prevFirstItemIdRef = useRef<string | undefined>(undefined);
+	const prevItemsCountRef = useRef(0);
+	const isPrepend =
+		prevItemsCountRef.current > 0 &&
+		items.length > prevItemsCountRef.current &&
+		firstItemId !== undefined &&
+		firstItemId !== prevFirstItemIdRef.current;
+	useLayoutEffect(() => {
+		prevFirstItemIdRef.current = firstItemId;
+		prevItemsCountRef.current = items.length;
+	});
 
 	const threadMsgTargetIndex = useMemo(() => {
 		if (!msgJumpParam || loading) {
@@ -103,14 +176,19 @@ const ThreadMessageList = ({ mainMessage, shouldJumpToBottom, setShouldJumpToBot
 			return 0;
 		}
 		const replyIndex = messages.findIndex((m) => m._id === msgJumpParam);
-		return replyIndex >= 0 ? 1 + replyIndex : -1;
-	}, [msgJumpParam, loading, mainMessage._id, messages]);
+		if (replyIndex < 0) {
+			return -1;
+		}
+		return showMainMessage ? 1 + replyIndex : replyIndex;
+	}, [msgJumpParam, loading, mainMessage._id, messages, showMainMessage]);
 
 	const lastThreadJumpKeyRef = useRef<string | undefined>(undefined);
 
 	useEffect(() => {
 		lastThreadJumpKeyRef.current = undefined;
+		loadingWindowKeyRef.current = undefined;
 		prevItemsLengthRef.current = 0;
+		initialScrollDoneRef.current = false;
 	}, [mainMessage._id]);
 
 	useEffect(() => {
@@ -145,6 +223,7 @@ const ThreadMessageList = ({ mainMessage, shouldJumpToBottom, setShouldJumpToBot
 			isAtBottom.current = true;
 			handle.scrollToIndex(items.length, { align: 'end' });
 			setShouldJumpToBottom(false);
+			initialScrollDoneRef.current = true;
 		}
 	}, [items, loading, msgJumpParam, threadMsgTargetIndex, shouldJumpToBottom, setShouldJumpToBottom, uid]);
 
@@ -163,6 +242,7 @@ const ThreadMessageList = ({ mainMessage, shouldJumpToBottom, setShouldJumpToBot
 		lastThreadJumpKeyRef.current = jumpKey;
 		setShouldJumpToBottom(false);
 		handle.scrollToIndex(threadMsgTargetIndex, { align: 'center' });
+		initialScrollDoneRef.current = true;
 		setHighlightMessage(msgJumpParam);
 		setTimeout(() => {
 			clearHighlightMessage();
@@ -213,15 +293,20 @@ const ThreadMessageList = ({ mainMessage, shouldJumpToBottom, setShouldJumpToBot
 				<MessageListProvider>
 					<VList
 						ref={virtualizerRef}
+						shift={isPrepend}
 						style={{ height: '100%' }}
 						aria-label={t('Thread_message_list')}
-						aria-busy={loading}
+						aria-busy={loading || isFetchingNextPage || isFetchingPreviousPage}
 						role='list'
 						keepMounted={keepMountedMessages}
 						onScroll={(offset) => {
 							const handle = virtualizerRef.current;
 							if (!handle) return;
 
+							if (offset < 200 && hasPreviousPage) {
+								loadPreviousMessages();
+							}
+
 							// Copied from messageList, I'm unsure why this is necessary, but it seems to be needed to properly set the isAtBottom state
 							if (handle.scrollSize >= handle.viewportSize) {
 								isAtBottom.current = true;
@@ -236,7 +321,11 @@ const ThreadMessageList = ({ mainMessage, shouldJumpToBottom, setShouldJumpToBot
 							<li className='load-more'>
 								<LoadingMessagesIndicator />
 							</li>
-						) : (
+						) : null}
+						{!loading && hasPreviousPage ? (
+							<li className='load-more'>{isFetchingPreviousPage ? <LoadingMessagesIndicator /> : null}</li>
+						) : null}
+						{!loading &&
 							items.map((message, index, { [index - 1]: previous }) => {
 								const sequential = isMessageSequential(message, previous, messageGroupingPeriod);
 								const newDay = isMessageNewDay(message, previous);
@@ -257,8 +346,12 @@ const ThreadMessageList = ({ mainMessage, shouldJumpToBottom, setShouldJumpToBot
 										/>
 									</Fragment>
 								);
-							})
-						)}
+							})}
+						{!loading && hasNextPage ? (
+							<li className='load-more'>
+								{isFetchingNextPage ? <LoadingMessagesIndicator /> : <InfiniteListAnchor loadMore={loadMoreMessages} />}
+							</li>
+						) : null}
 					</VList>
 				</MessageListProvider>
 			</CustomVirtuaScrollbars>