chore: loadaround and jump to message

Author: MartinSchoeler

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

@@ -65,26 +65,29 @@ export const mutateThreadMessagesInfiniteData = (
 		}
 
 		const items = old.pages.flatMap((page) => page.items);
-		const lastPage = old.pages.at(-1) ?? { items: [], itemCount: 0 };
+		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 pageSize = lastPage.items.length || items.length;
-		if (pageSize === 0) {
-			return old;
-		}
-
-		const newPageCount = Math.ceil(items.length / pageSize);
 		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: Array.from({ length: newPageCount }, (_, pageIndex) => ({
-				items: items.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize),
-				itemCount: lastPage.itemCount - itemCountDelta,
-			})),
-			pageParams: Array.from({ length: newPageCount }, (_, pageIndex) => pageIndex * pageSize),
+			pages,
+			pageParams: old.pageParams,
 		};
 	});
 };

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

@@ -6,7 +6,7 @@ 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';
@@ -63,7 +63,17 @@ const ThreadMessageList = ({ mainMessage, shouldJumpToBottom, setShouldJumpToBot
 	const msgJumpParam = useSearchParameter('msg');
 	const { bubbleRef, handleDateScroll, ...bubbleDate } = useDateScroll();
 
-	const { data, isLoading: loading, fetchNextPage, hasNextPage, isFetchingNextPage } = useThreadMessagesQuery(mainMessage._id);
+	const {
+		data,
+		isLoading: loading,
+		fetchNextPage,
+		hasNextPage,
+		isFetchingNextPage,
+		fetchPreviousPage,
+		hasPreviousPage,
+		isFetchingPreviousPage,
+		loadMessageAround,
+	} = useThreadMessagesQuery(mainMessage._id);
 	const messages = data?.messages ?? [];
 
 	const loadMoreMessages = useDebouncedCallback(
@@ -76,6 +86,16 @@ const ThreadMessageList = ({ mainMessage, shouldJumpToBottom, setShouldJumpToBot
 		[hasNextPage, isFetchingNextPage, fetchNextPage],
 	);
 
+	const loadPreviousMessages = useDebouncedCallback(
+		() => {
+			if (hasPreviousPage && !isFetchingPreviousPage) {
+				void fetchPreviousPage();
+			}
+		},
+		100,
+		[hasPreviousPage, isFetchingPreviousPage, fetchPreviousPage],
+	);
+
 	const room = useRoom();
 	const uid = useUserId();
 
@@ -90,6 +110,16 @@ const ThreadMessageList = ({ mainMessage, shouldJumpToBottom, setShouldJumpToBot
 	const isAtBottom = useRef<boolean | null>(null);
 	const prevItemsLengthRef = useRef(0);
 
+	// When older replies are prepended (loading previous pages), virtua must shift the
+	// scroll position so the viewport stays anchored on the same message instead of
+	// jumping. The flag is armed near the top in onScroll and reset after every commit,
+	// so appends at the bottom (new messages) don't shift.
+	// https://inokawa.github.io/virtua/?path=/story/advanced-chat--default
+	const isPrepend = useRef(false);
+	useLayoutEffect(() => {
+		isPrepend.current = false;
+	});
+
 	const { keepAtBottomRef, setKeepAtBottom } = useKeepAtBottom(isAtBottom);
 	const messagesLength = messages.length;
 	useEffect(() => {
@@ -101,9 +131,10 @@ const ThreadMessageList = ({ mainMessage, shouldJumpToBottom, setShouldJumpToBot
 			}
 		});
 	}, [messagesLength, setKeepAtBottom, msgJumpParam]);
+	const loadingWindowKeyRef = useRef<string | undefined>(undefined);
 
 	useEffect(() => {
-		if (loading || isFetchingNextPage || !hasNextPage || !msgJumpParam) {
+		if (loading || !msgJumpParam || isFetchingNextPage || isFetchingPreviousPage) {
 			return;
 		}
 		if (msgJumpParam === mainMessage._id) {
@@ -112,8 +143,13 @@ const ThreadMessageList = ({ mainMessage, shouldJumpToBottom, setShouldJumpToBot
 		if (messages.some((message) => message._id === msgJumpParam)) {
 			return;
 		}
-		void fetchNextPage();
-	}, [loading, isFetchingNextPage, hasNextPage, msgJumpParam, messages, mainMessage._id, fetchNextPage]);
+		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);
 
@@ -136,6 +172,7 @@ const ThreadMessageList = ({ mainMessage, shouldJumpToBottom, setShouldJumpToBot
 
 	useEffect(() => {
 		lastThreadJumpKeyRef.current = undefined;
+		loadingWindowKeyRef.current = undefined;
 		prevItemsLengthRef.current = 0;
 	}, [mainMessage._id]);
 
@@ -239,15 +276,20 @@ const ThreadMessageList = ({ mainMessage, shouldJumpToBottom, setShouldJumpToBot
 				<MessageListProvider>
 					<VList
 						ref={virtualizerRef}
+						shift={isPrepend.current === true}
 						style={{ height: '100%' }}
 						aria-label={t('Thread_message_list')}
-						aria-busy={loading || isFetchingNextPage}
+						aria-busy={loading || isFetchingNextPage || isFetchingPreviousPage}
 						role='list'
 						keepMounted={keepMountedMessages}
 						onScroll={(offset) => {
 							const handle = virtualizerRef.current;
 							if (!handle) return;
 
+							if (offset < 200 && hasPreviousPage) {
+								isPrepend.current = true;
+							}
+
 							// 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;
@@ -281,6 +323,11 @@ const ThreadMessageList = ({ mainMessage, shouldJumpToBottom, setShouldJumpToBot
 											firstUnread={firstUnread}
 											system={system}
 										/>
+										{index === 0 && hasPreviousPage ? (
+											<li className='load-more'>
+												{isFetchingPreviousPage ? <LoadingMessagesIndicator /> : <InfiniteListAnchor loadMore={loadPreviousMessages} />}
+											</li>
+										) : null}
 									</Fragment>
 								);
 							})

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

@@ -1,7 +1,7 @@
 import { isThreadMessage, type IMessage, type IRoom, type IThreadMainMessage, type IThreadMessage } from '@rocket.chat/core-typings';
 import { useEndpoint, useMethod, useStream } from '@rocket.chat/ui-contexts';
 import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
 import { onClientMessageReceived } from '../../../../../lib/onClientMessageReceived';
 import { roomsQueryKeys } from '../../../../../lib/queryKeys';
@@ -112,7 +112,29 @@ export const useThreadMessagesQuery = (tmid: IThreadMainMessage['_id'], rid?: IR
 		};
 	}, [tmid, roomId, queryClient, subscribeToRoomMessages, subscribeToNotifyRoom]);
 
-	return useInfiniteQuery({
+	const loadMessageAround = useCallback(
+		async (messageId: string) => {
+			const currentQueryKey = roomsQueryKeys.threadMessages(roomId, tmid);
+
+			const { messages, total, offset } = await getThreadMessages({
+				tmid,
+				aroundId: messageId,
+				count,
+				sort: JSON.stringify({ ts: 1 }),
+			});
+
+			const filtered = filterThreadMessages(messages, tmid);
+			const processed = (await processMessages(filtered)) as IThreadMessage[];
+
+			queryClient.setQueryData<ThreadMessagesInfiniteData>(currentQueryKey, {
+				pages: [{ items: processed, itemCount: total }],
+				pageParams: [offset],
+			});
+		},
+		[queryClient, getThreadMessages, roomId, tmid, count],
+	);
+
+	const query = useInfiniteQuery({
 		queryKey,
 		queryFn: async ({ pageParam: offset }) => {
 			if (offset === 0) {
@@ -148,13 +170,27 @@ export const useThreadMessagesQuery = (tmid: IThreadMainMessage['_id'], rid?: IR
 			};
 		},
 		initialPageParam: 0,
-		getNextPageParam: (lastPage, allPages) => {
-			const loadedItemsCount = allPages.reduce((acc, page) => acc + page.items.length, 0);
-			return loadedItemsCount < lastPage.itemCount ? loadedItemsCount : undefined;
+		getNextPageParam: (lastPage, _allPages, lastPageParam) => {
+			const next = lastPageParam + count;
+			return next < lastPage.itemCount ? next : undefined;
+		},
+		getPreviousPageParam: (_firstPage, _allPages, firstPageParam) => {
+			return firstPageParam > 0 ? Math.max(0, firstPageParam - count) : undefined;
+		},
+		select: ({ pages }) => {
+			const byId = new Map<string, IThreadMessage>();
+			for (const page of pages) {
+				for (const item of page.items) {
+					byId.set(item._id, item);
+				}
+			}
+			const messages = Array.from(byId.values()).sort((a, b) => new Date(a.ts).getTime() - new Date(b.ts).getTime());
+			return {
+				messages,
+				itemCount: pages.at(-1)?.itemCount ?? 0,
+			};
 		},
-		select: ({ pages }) => ({
-			messages: pages.flatMap((page) => page.items),
-			itemCount: pages.at(-1)?.itemCount ?? 0,
-		}),
 	});
+
+	return { ...query, loadMessageAround };
 };

packages/rest-typings/src/v1/chat.ts

@@ -683,6 +683,7 @@ export const isChatSyncThreadMessagesProps = ajvQuery.compile<ChatSyncThreadMess
 
 type ChatGetThreadMessages = PaginatedRequest<{
 	tmid: string;
+	aroundId?: string;
 }>;
 
 const ChatGetThreadMessagesSchema = {
@@ -692,6 +693,11 @@ const ChatGetThreadMessagesSchema = {
 			type: 'string',
 			minLength: 1,
 		},
+		aroundId: {
+			type: 'string',
+			minLength: 1,
+			nullable: true,
+		},
 		count: {
 			type: 'number',
 			nullable: true,