Regression: Jump to message not working (#28163)

Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>
Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>

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

@@ -12,10 +12,10 @@ import { getConfig } from '../../../../client/lib/utils/getConfig';
 import { ChatMessage, ChatSubscription } from '../../../models/client';
 import { callWithErrorHandling } from '../../../../client/lib/utils/callWithErrorHandling';
 import { onClientMessageReceived } from '../../../../client/lib/onClientMessageReceived';
-import {
-	setHighlightMessage,
-	clearHighlightMessage,
-} from '../../../../client/views/room/MessageList/providers/messageHighlightSubscription';
+// import {
+// 	setHighlightMessage,
+// 	clearHighlightMessage,
+// } from '../../../../client/views/room/MessageList/providers/messageHighlightSubscription';
 import type { MinimongoCollection } from '../../../../client/definitions/MinimongoCollection';
 
 export async function upsertMessage(
@@ -271,7 +271,7 @@ class RoomHistoryManagerClass extends Emitter {
 		room.loaded = undefined;
 	}
 
-	public async getSurroundingMessages(message?: Pick<IMessage, '_id' | 'rid'> & { ts?: Date }, atBottomRef?: MutableRefObject<boolean>) {
+	public async getSurroundingMessages(message?: Pick<IMessage, '_id' | 'rid'> & { ts?: Date }) {
 		if (!message?.rid) {
 			return;
 		}
@@ -279,28 +279,6 @@ class RoomHistoryManagerClass extends Emitter {
 		const surroundingMessage = ChatMessage.findOne({ _id: message._id, _hidden: { $ne: true } });
 
 		if (surroundingMessage) {
-			await waitForElement(`[data-id='${message._id}']`);
-			const wrapper = $('.messages-box .wrapper');
-			const msgElement = $(`[data-id='${message._id}']`, wrapper);
-
-			if (msgElement.length === 0) {
-				return;
-			}
-
-			const pos = (wrapper.scrollTop() ?? NaN) + (msgElement.offset()?.top ?? NaN) - (wrapper.height() ?? NaN) / 2;
-			wrapper.animate(
-				{
-					scrollTop: pos,
-				},
-				500,
-			);
-
-			setHighlightMessage(message._id);
-
-			setTimeout(() => {
-				clearHighlightMessage();
-			}, 1000);
-
 			return;
 		}
 
@@ -321,31 +299,7 @@ class RoomHistoryManagerClass extends Emitter {
 		readMessage.refreshUnreadMark(message.rid);
 
 		Tracker.afterFlush(async () => {
-			await waitForElement(`[data-id='${message._id}']`);
-			const wrapper = $('.messages-box .wrapper');
-			const msgElement = $(`[data-id=${message._id}]`, wrapper);
-
-			if (msgElement.length === 0) {
-				return;
-			}
-
-			const pos = (wrapper.scrollTop() ?? NaN) + (msgElement.offset()?.top ?? NaN) - (wrapper.height() ?? NaN) / 2;
-			wrapper.animate(
-				{
-					scrollTop: pos,
-				},
-				500,
-			);
-
-			setHighlightMessage(message._id);
-
 			room.isLoading.set(false);
-			const messages = wrapper[0];
-			if (atBottomRef) atBottomRef.current = !result.moreAfter && messages.scrollTop >= messages.scrollHeight - messages.clientHeight;
-
-			setTimeout(() => {
-				clearHighlightMessage();
-			}, 1000);
 		});
 
 		if (!room.loaded) {

apps/meteor/app/ui-utils/client/lib/openRoom.tsx

@@ -7,12 +7,12 @@ import type { RoomType } from '@rocket.chat/core-typings';
 
 import { appLayout } from '../../../../client/lib/appLayout';
 import { waitUntilFind } from '../../../../client/lib/utils/waitUntilFind';
-import { Messages, ChatSubscription, Rooms, Subscriptions } from '../../../models/client';
+import { ChatSubscription, Rooms, Subscriptions } from '../../../models/client';
 import { settings } from '../../../settings/client';
 import { callbacks } from '../../../../lib/callbacks';
 import { callWithErrorHandling } from '../../../../client/lib/utils/callWithErrorHandling';
 import { call } from '../../../../client/lib/utils/call';
-import { RoomManager, RoomHistoryManager } from '..';
+import { RoomManager } from '..';
 import { fireGlobalEvent } from '../../../../client/lib/utils/fireGlobalEvent';
 import { roomCoordinator } from '../../../../client/lib/rooms/roomCoordinator';
 import MainLayout from '../../../../client/views/root/MainLayout';
@@ -44,9 +44,7 @@ export async function openRoom(type: RoomType, name: string, render = true) {
 
 				c.stop();
 
-				const messageId = FlowRouter.getQueryParam('msg');
-
-				if (room._id === Session.get('openedRoom') && !messageId) {
+				if (room._id === Session.get('openedRoom')) {
 					return;
 				}
 
@@ -76,22 +74,6 @@ export async function openRoom(type: RoomType, name: string, render = true) {
 					await callWithErrorHandling('openRoom', room._id);
 				}
 
-				if (messageId) {
-					const msg = { _id: messageId, rid: room._id };
-
-					const message = Messages.findOne({ _id: msg._id }) || (await callWithErrorHandling('getMessages', [msg._id]))[0];
-
-					if (message && (message.tmid || message.tcount)) {
-						FlowRouter.withReplaceState(() => {
-							FlowRouter.setParams({ tab: 'thread', context: message.tmid || message._id });
-						});
-						return;
-					}
-
-					RoomHistoryManager.getSurroundingMessages(msg);
-					FlowRouter.setQueryParams({ msg: null });
-				}
-
 				return callbacks.run('enter-room', sub);
 			} catch (error) {
 				c.stop();

apps/meteor/client/components/message/list/MessageListContext.tsx

@@ -24,6 +24,8 @@ export type MessageListContextValue = {
 	};
 	autoTranslateLanguage?: string;
 	showColors: boolean;
+	jumpToMessageParam?: string;
+	scrollMessageList?: (callback: (wrapper: HTMLDivElement | null) => ScrollToOptions | void) => void;
 };
 
 export const MessageListContext = createContext<MessageListContextValue>({
@@ -44,6 +46,7 @@ export const MessageListContext = createContext<MessageListContextValue>({
 	showRealName: false,
 	showUsername: false,
 	showColors: false,
+	scrollMessageList: () => undefined,
 });
 
 export const useShowTranslated: MessageListContextValue['useShowTranslated'] = (...args) =>
@@ -59,6 +62,9 @@ export const useMessageListShowRealName = (): MessageListContextValue['showRealN
 export const useMessageListShowUsername = (): MessageListContextValue['showUsername'] => useContext(MessageListContext).showUsername;
 export const useMessageListHighlights = (): MessageListContextValue['highlights'] => useContext(MessageListContext).highlights;
 export const useMessageListKatex = (): MessageListContextValue['katex'] => useContext(MessageListContext).katex;
+export const useMessageListJumpToMessageParam = (): MessageListContextValue['jumpToMessageParam'] =>
+	useContext(MessageListContext).jumpToMessageParam;
+export const useMessageListScroll = (): MessageListContextValue['scrollMessageList'] => useContext(MessageListContext).scrollMessageList;
 
 export const useUserHasReacted: MessageListContextValue['useUserHasReacted'] = (message: IMessage) =>
 	useContext(MessageListContext).useUserHasReacted(message);

apps/meteor/client/components/message/variants/RoomMessage.tsx

@@ -3,7 +3,7 @@ import { Message, MessageLeftContainer, MessageContainer, CheckBox } from '@rock
 import { useToggle } from '@rocket.chat/fuselage-hooks';
 import { useUserId } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
-import React, { memo } from 'react';
+import React, { useRef, memo } from 'react';
 
 import type { MessageActionContext } from '../../../../app/ui-utils/client/lib/MessageAction';
 import { useIsMessageHighlight } from '../../../views/room/MessageList/contexts/MessageHighlightContext';
@@ -13,6 +13,7 @@ import {
 	useIsSelectedMessage,
 	useCountSelected,
 } from '../../../views/room/MessageList/contexts/SelectedMessagesContext';
+import { useJumpToMessage } from '../../../views/room/MessageList/hooks/useJumpToMessage';
 import { useChat } from '../../../views/room/contexts/ChatContext';
 import UserAvatar from '../../avatar/UserAvatar';
 import IgnoredContent from '../IgnoredContent';
@@ -38,14 +39,18 @@ const RoomMessage = ({ message, sequential, all, mention, unread, context, ignor
 	const [displayIgnoredMessage, toggleDisplayIgnoredMessage] = useToggle(false);
 	const ignored = (ignoredUser || message.ignored) && !displayIgnoredMessage;
 	const chat = useChat();
+	const messageRef = useRef(null);
 
 	const selecting = useIsSelecting();
 	const toggleSelected = useToggleSelect(message._id);
 	const selected = useIsSelectedMessage(message._id);
+
 	useCountSelected();
 
+	useJumpToMessage(message._id, messageRef);
 	return (
 		<Message
+			ref={messageRef}
 			id={message._id}
 			onClick={selecting ? toggleSelected : undefined}
 			isSelected={selected}

apps/meteor/client/components/message/variants/ThreadMessage.tsx

@@ -3,9 +3,10 @@ import { Message, MessageLeftContainer, MessageContainer } from '@rocket.chat/fu
 import { useToggle } from '@rocket.chat/fuselage-hooks';
 import { useUserId } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
-import React, { memo } from 'react';
+import React, { memo, useRef } from 'react';
 
 import { useIsMessageHighlight } from '../../../views/room/MessageList/contexts/MessageHighlightContext';
+import { useJumpToMessage } from '../../../views/room/MessageList/hooks/useJumpToMessage';
 import { useChat } from '../../../views/room/contexts/ChatContext';
 import UserAvatar from '../../avatar/UserAvatar';
 import IgnoredContent from '../IgnoredContent';
@@ -26,9 +27,14 @@ const ThreadMessage = ({ message, sequential, unread }: ThreadMessageProps): Rea
 	const [ignored, toggleIgnoring] = useToggle((message as { ignored?: boolean }).ignored);
 	const chat = useChat();
 
+	const messageRef = useRef(null);
+
+	useJumpToMessage(message._id, messageRef);
+
 	return (
 		<Message
 			id={message._id}
+			ref={messageRef}
 			isEditing={editing}
 			isPending={message.temp}
 			sequential={sequential}

apps/meteor/client/components/message/variants/ThreadMessagePreview.tsx

@@ -60,7 +60,7 @@ const ThreadMessagePreview = ({ message, sequential, ...props }: ThreadMessagePr
 				<ThreadMessageRow
 					onClick={
 						!isSelecting && parentMessage.isSuccess
-							? () => goToThread({ rid: message.rid, tmid: message.tmid, jump: parentMessage.data?._id })
+							? () => goToThread({ rid: message.rid, tmid: message.tmid, msg: parentMessage.data?._id })
 							: undefined
 					}
 				>
@@ -91,7 +91,7 @@ const ThreadMessagePreview = ({ message, sequential, ...props }: ThreadMessagePr
 					</ThreadMessageContainer>
 				</ThreadMessageRow>
 			)}
-			<ThreadMessageRow onClick={!isSelecting ? () => goToThread({ rid: message.rid, tmid: message.tmid, jump: message._id }) : undefined}>
+			<ThreadMessageRow onClick={!isSelecting ? () => goToThread({ rid: message.rid, tmid: message.tmid, msg: message._id }) : undefined}>
 				<ThreadMessageLeftContainer>
 					{!isSelecting && <UserAvatar username={message.u.username} size='x18' />}
 					{isSelecting && <CheckBox checked={isSelected} onChange={toggleSelected} />}

apps/meteor/client/lib/utils/jumpToMessage.ts → apps/meteor/client/lib/utils/legacyJumpToMessage.ts

@@ -6,18 +6,24 @@ import { ChatRoom } from '../../../app/models/client';
 import { RoomHistoryManager } from '../../../app/ui-utils/client';
 import { goToRoomById } from './goToRoomById';
 
-export const jumpToMessage = async (message: IMessage) => {
+/** @deprecated */
+export const legacyJumpToMessage = async (message: IMessage) => {
 	if (matchMedia('(max-width: 500px)').matches) {
 		(Template.instance() as any)?.tabBar?.close();
 	}
 
-	if (isThreadMessage(message)) {
-		const { route, queryParams } = FlowRouter.current();
+	if (isThreadMessage(message) || message.tcount) {
+		const { route, queryParams, params } = FlowRouter.current();
+
+		if (params.tab === 'thread' && (params.context === message.tmid || params.context === message._id)) {
+			return;
+		}
+
 		FlowRouter.go(
 			route?.name ?? '/',
 			{
 				tab: 'thread',
-				context: message.tmid,
+				context: message.tmid || message._id,
 				rid: message.rid,
 				name: ChatRoom.findOne({ _id: message.rid })?.name ?? '',
 			},

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

+import type { IMessage } from '@rocket.chat/core-typings';
+import { FlowRouter } from 'meteor/kadira:flow-router';
+
+export const setMessageJumpQueryStringParameter = async (msg: IMessage['_id'] | null) => {
+	FlowRouter.setQueryParams({ msg });
+};

apps/meteor/client/providers/RouterProvider.tsx

@@ -52,6 +52,18 @@ const queryCurrentRoute = (): ReturnType<RouterContextValue['queryCurrentRoute']
 		return [route?.name, params, queryParams, route?.group?.name];
 	});
 
+const setQueryString = (paramsOrFn: Record<string, string | null> | ((prev: Record<string, string>) => Record<string, string>)): void => {
+	if (typeof paramsOrFn === 'function') {
+		const prevParams = FlowRouter.current().queryParams;
+		const emptyParams = Object.fromEntries(Object.entries(prevParams).map(([key]) => [key, null]));
+		const newParams = paramsOrFn(prevParams);
+		FlowRouter.setQueryParams({ ...emptyParams, ...newParams });
+		return;
+	}
+
+	FlowRouter.setQueryParams(paramsOrFn);
+};
+
 const getRoutePath = (name: string, parameters?: Record<string, string>, queryStringParameters?: Record<string, string>) =>
 	Tracker.nonreactive(() => FlowRouter.path(name, parameters, queryStringParameters));
 
@@ -63,6 +75,7 @@ const contextValue = {
 	queryRouteParameter,
 	queryQueryStringParameter,
 	queryCurrentRoute,
+	setQueryString,
 	getRoutePath,
 };
 

apps/meteor/client/startup/actionButtons/jumpToMessage.ts

 import { Meteor } from 'meteor/meteor';
 
 import { MessageAction } from '../../../app/ui-utils/client';
-import { jumpToMessage } from '../../lib/utils/jumpToMessage';
 import { messageArgs } from '../../lib/utils/messageArgs';
+import { setMessageJumpQueryStringParameter } from '../../lib/utils/setMessageJumpQueryStringParameter';
 
 Meteor.startup(() => {
 	MessageAction.addButton({
@@ -12,7 +12,7 @@ Meteor.startup(() => {
 		context: ['mentions', 'threads'],
 		action(_, props) {
 			const { message = messageArgs(this).msg } = props;
-			jumpToMessage(message);
+			setMessageJumpQueryStringParameter(message._id);
 		},
 		order: 100,
 		group: ['message', 'menu'],

apps/meteor/client/startup/actionButtons/jumpToPinMessage.ts

 import { Meteor } from 'meteor/meteor';
 
 import { MessageAction } from '../../../app/ui-utils/client';
-import { jumpToMessage } from '../../lib/utils/jumpToMessage';
 import { messageArgs } from '../../lib/utils/messageArgs';
+import { setMessageJumpQueryStringParameter } from '../../lib/utils/setMessageJumpQueryStringParameter';
 
 Meteor.startup(() => {
 	MessageAction.addButton({
@@ -12,7 +12,7 @@ Meteor.startup(() => {
 		context: ['pinned', 'message-mobile', 'direct'],
 		action(_, props) {
 			const { message = messageArgs(this).msg } = props;
-			jumpToMessage(message);
+			setMessageJumpQueryStringParameter(message._id);
 		},
 		condition({ subscription }) {
 			return !!subscription;

apps/meteor/client/startup/actionButtons/jumpToSearchMessage.ts

 import { Meteor } from 'meteor/meteor';
 
 import { MessageAction } from '../../../app/ui-utils/client';
-import { jumpToMessage } from '../../lib/utils/jumpToMessage';
 import { messageArgs } from '../../lib/utils/messageArgs';
+import { setMessageJumpQueryStringParameter } from '../../lib/utils/setMessageJumpQueryStringParameter';
 
 Meteor.startup(() => {
 	MessageAction.addButton({
@@ -12,7 +12,7 @@ Meteor.startup(() => {
 		context: ['search'],
 		async action(_, props) {
 			const { message = messageArgs(this).msg } = props;
-			await jumpToMessage(message);
+			setMessageJumpQueryStringParameter(message._id);
 		},
 		order: 100,
 		group: 'menu',

apps/meteor/client/startup/actionButtons/jumpToStarMessage.ts

@@ -2,8 +2,8 @@ import { Meteor } from 'meteor/meteor';
 
 import { settings } from '../../../app/settings/client';
 import { MessageAction } from '../../../app/ui-utils/client';
-import { jumpToMessage } from '../../lib/utils/jumpToMessage';
 import { messageArgs } from '../../lib/utils/messageArgs';
+import { setMessageJumpQueryStringParameter } from '../../lib/utils/setMessageJumpQueryStringParameter';
 
 Meteor.startup(() => {
 	MessageAction.addButton({
@@ -13,7 +13,7 @@ Meteor.startup(() => {
 		context: ['starred', 'threads', 'message-mobile'],
 		action(_, props) {
 			const { message = messageArgs(this).msg } = props;
-			jumpToMessage(message);
+			setMessageJumpQueryStringParameter(message._id);
 		},
 		condition({ message, subscription, user }) {
 			if (subscription == null || !settings.get('Message_AllowStarring')) {

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

@@ -2,7 +2,7 @@ import type { IRoom } from '@rocket.chat/core-typings';
 import { isThreadMessage } from '@rocket.chat/core-typings';
 import { MessageDivider } from '@rocket.chat/fuselage';
 import { useSetting, useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
+import type { ReactElement, ComponentProps } from 'react';
 import React, { Fragment, memo } from 'react';
 
 import { MessageTypes } from '../../../../app/ui-utils/client';
@@ -20,9 +20,10 @@ import MessageListProvider from './providers/MessageListProvider';
 
 type MessageListProps = {
 	rid: IRoom['_id'];
+	scrollMessageList: ComponentProps<typeof MessageListProvider>['scrollMessageList'];
 };
 
-export const MessageList = ({ rid }: MessageListProps): ReactElement => {
+export const MessageList = ({ rid, scrollMessageList }: MessageListProps): ReactElement => {
 	const t = useTranslation();
 	const messages = useMessages({ rid });
 	const subscription = useRoomSubscription();
@@ -30,7 +31,7 @@ export const MessageList = ({ rid }: MessageListProps): ReactElement => {
 	const formatDate = useFormatDate();
 
 	return (
-		<MessageListProvider>
+		<MessageListProvider scrollMessageList={scrollMessageList}>
 			<SelectedMessagesProvider>
 				{messages.map((message, index, { [index - 1]: previous }) => {
 					const sequential = isMessageSequential(message, previous, messageGroupingPeriod);

apps/meteor/client/views/room/MessageList/hooks/useJumpToMessage.ts

+import type { IMessage } from '@rocket.chat/core-typings';
+import { RouterContext } from '@rocket.chat/ui-contexts';
+import type { RefObject } from 'react';
+import { useContext, useLayoutEffect } from 'react';
+
+import { useMessageListJumpToMessageParam, useMessageListScroll } from '../../../../components/message/list/MessageListContext';
+import { setHighlightMessage, clearHighlightMessage } from '../providers/messageHighlightSubscription';
+
+// this is an arbitrary value so that there's a gap between the header and the message;
+const SCROLL_EXTRA_OFFSET = 60;
+
+export const useJumpToMessage = (messageId: IMessage['_id'], messageRef: RefObject<HTMLDivElement>): void => {
+	const jumpToMessageParam = useMessageListJumpToMessageParam();
+	const scroll = useMessageListScroll();
+	const router = useContext(RouterContext);
+
+	useLayoutEffect(() => {
+		if (jumpToMessageParam !== messageId || !messageRef.current || !scroll) {
+			return;
+		}
+
+		setTimeout(() => {
+			scroll((wrapper) => {
+				if (!wrapper || !messageRef.current) {
+					return;
+				}
+				const containerRect = wrapper.getBoundingClientRect();
+				const messageRect = messageRef.current.getBoundingClientRect();
+
+				const offset = messageRect.top - containerRect.top;
+				const scrollPosition = wrapper.scrollTop;
+				const newScrollPosition = scrollPosition + offset - SCROLL_EXTRA_OFFSET;
+
+				return { top: newScrollPosition, behavior: 'smooth' };
+			});
+
+			router.setQueryString(({ msg: _, ...params }) => params);
+
+			setHighlightMessage(messageId);
+			setTimeout(clearHighlightMessage, 2000);
+		}, 500);
+	}, [messageId, jumpToMessageParam, messageRef, scroll, router]);
+};

apps/meteor/client/views/room/MessageList/hooks/useLoadSurroundingMessages.ts

+import type { IMessage } from '@rocket.chat/core-typings';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect } from 'react';
+
+import { legacyJumpToMessage } from '../../../../lib/utils/legacyJumpToMessage';
+
+export const useLoadSurroundingMessages = (msgId?: IMessage['_id']) => {
+	const queryClient = useQueryClient();
+	const getMessage = useEndpoint('GET', '/v1/chat.getMessage');
+
+	useEffect(() => {
+		if (!msgId) {
+			return;
+		}
+		queryClient
+			.fetchQuery({
+				queryKey: ['chat.getMessage', msgId],
+				queryFn: () => {
+					return getMessage({ msgId });
+				},
+			})
+			.then(({ message }) => {
+				// Serialized IMessage dates are strings. For this function, only ts is needed
+				legacyJumpToMessage({ ...message, ts: new Date(message.ts) } as any as IMessage);
+			})
+			.catch((error) => {
+				console.warn(error);
+			});
+	}, [msgId, queryClient, getMessage]);
+};

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

 import type { IMessage } from '@rocket.chat/core-typings';
 import { isMessageReactionsNormalized, isThreadMainMessage } from '@rocket.chat/core-typings';
-import { useLayout, useUser, useUserPreference, useSetting, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useLayout, useUser, useUserPreference, useSetting, useEndpoint, useQueryStringParameter } from '@rocket.chat/ui-contexts';
 import type { VFC, ReactNode } from 'react';
 import React, { useMemo, memo } from 'react';
 
@@ -12,12 +12,14 @@ import { useRoom, useRoomSubscription } from '../../contexts/RoomContext';
 import ToolboxProvider from '../../providers/ToolboxProvider';
 import { useAutoTranslate } from '../hooks/useAutoTranslate';
 import { useKatex } from '../hooks/useKatex';
+import { useLoadSurroundingMessages } from '../hooks/useLoadSurroundingMessages';
 
 type MessageListProviderProps = {
 	children: ReactNode;
+	scrollMessageList?: MessageListContextValue['scrollMessageList'];
 };
 
-const MessageListProvider: VFC<MessageListProviderProps> = ({ children }) => {
+const MessageListProvider: VFC<MessageListProviderProps> = ({ children, scrollMessageList }) => {
 	const room = useRoom();
 
 	if (!room) {
@@ -45,6 +47,9 @@ const MessageListProvider: VFC<MessageListProviderProps> = ({ children }) => {
 	const { katexEnabled, katexDollarSyntaxEnabled, katexParenthesisSyntaxEnabled } = useKatex();
 
 	const hasSubscription = Boolean(subscription);
+	const msgParameter = useQueryStringParameter('msg');
+
+	useLoadSurroundingMessages(msgParameter);
 
 	const context: MessageListContextValue = useMemo(
 		() => ({
@@ -55,7 +60,7 @@ const MessageListProvider: VFC<MessageListProviderProps> = ({ children }) => {
 					? (reaction: string): string[] =>
 							reactions?.[reaction]?.usernames.filter((user) => user !== username).map((username) => `@${username}`) || []
 					: (reaction: string): string[] => {
-							if (!reactions || !reactions[reaction]) {
+							if (!reactions?.[reaction]) {
 								return [];
 							}
 							if (!isMessageReactionsNormalized(message)) {
@@ -92,6 +97,8 @@ const MessageListProvider: VFC<MessageListProviderProps> = ({ children }) => {
 			showRoles,
 			showRealName,
 			showUsername,
+			scrollMessageList,
+			jumpToMessageParam: msgParameter,
 			...(katexEnabled && {
 				katex: {
 					dollarSyntaxEnabled: katexDollarSyntaxEnabled,
@@ -132,6 +139,8 @@ const MessageListProvider: VFC<MessageListProviderProps> = ({ children }) => {
 			highlights,
 			reactToMessage,
 			showColors,
+			msgParameter,
+			scrollMessageList,
 		],
 	);
 

apps/meteor/client/views/room/components/body/RoomBody.tsx

@@ -27,12 +27,14 @@ import { useReactiveQuery } from '../../../../hooks/useReactiveQuery';
 import { RoomManager as NewRoomManager } from '../../../../lib/RoomManager';
 import type { Upload } from '../../../../lib/chats/Upload';
 import { roomCoordinator } from '../../../../lib/rooms/roomCoordinator';
+import { setMessageJumpQueryStringParameter } from '../../../../lib/utils/setMessageJumpQueryStringParameter';
 import Announcement from '../../Announcement';
 import { MessageList } from '../../MessageList/MessageList';
 import MessageListErrorBoundary from '../../MessageList/MessageListErrorBoundary';
 import { useChat } from '../../contexts/ChatContext';
 import { useRoom, useRoomSubscription, useRoomMessages } from '../../contexts/RoomContext';
 import { useToolboxContext } from '../../contexts/ToolboxContext';
+import { useScrollMessageList } from '../../hooks/useScrollMessageList';
 import DropTargetOverlay from './DropTargetOverlay';
 import JumpToRecentMessagesBar from './JumpToRecentMessagesBar';
 import LeaderBar from './LeaderBar';
@@ -66,7 +68,7 @@ const RoomBody = (): ReactElement => {
 
 	const wrapperRef = useRef<HTMLDivElement | null>(null);
 	const messagesBoxRef = useRef<HTMLDivElement | null>(null);
-	const atBottomRef = useRef(!useQueryStringParameter('msg'));
+	const atBottomRef = useRef(true);
 	const lastScrollTopRef = useRef(0);
 
 	const chat = useChat();
@@ -91,12 +93,15 @@ const RoomBody = (): ReactElement => {
 		return false;
 	}, []);
 
+	const scrollMessageList = useScrollMessageList(wrapperRef);
+
 	const sendToBottom = useCallback(() => {
-		const wrapper = wrapperRef.current;
+		scrollMessageList((wrapper) => {
+			return { left: 30, top: wrapper?.scrollHeight };
+		});
 
-		wrapper?.scrollTo(30, wrapper.scrollHeight);
 		setHasNewMessages(false);
-	}, []);
+	}, [scrollMessageList]);
 
 	const sendToBottomIfNecessary = useCallback(() => {
 		if (atBottomRef.current === true) {
@@ -185,7 +190,10 @@ const RoomBody = (): ReactElement => {
 		if (!message) {
 			message = ChatMessage.findOne({ rid, ts: { $gt: unread?.since } }, { sort: { ts: 1 }, limit: 1 });
 		}
-		RoomHistoryManager.getSurroundingMessages(message, atBottomRef);
+		if (!message) {
+			return;
+		}
+		setMessageJumpQueryStringParameter(message?._id);
 		setUnreadCount(0);
 	}, [room._id, unread?.since, setUnreadCount]);
 
@@ -601,7 +609,7 @@ const RoomBody = (): ReactElement => {
 														)}
 													</>
 												) : null}
-												<MessageList rid={room._id} />
+												<MessageList rid={room._id} scrollMessageList={scrollMessageList} />
 												{hasMoreNextMessages ? (
 													<li className='load-more'>{isLoadingMoreMessages ? <LoadingMessagesIndicator /> : null}</li>
 												) : null}

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

@@ -17,6 +17,7 @@ import { isMessageNewDay } from '../../../MessageList/lib/isMessageNewDay';
 import MessageListProvider from '../../../MessageList/providers/MessageListProvider';
 import LoadingMessagesIndicator from '../../../components/body/LoadingMessagesIndicator';
 import { useRoomSubscription } from '../../../contexts/RoomContext';
+import { useScrollMessageList } from '../../../hooks/useScrollMessageList';
 import { useLegacyThreadMessageJump } from '../hooks/useLegacyThreadMessageJump';
 import { useLegacyThreadMessageListScrolling } from '../hooks/useLegacyThreadMessageListScrolling';
 import { useLegacyThreadMessages } from '../hooks/useLegacyThreadMessages';
@@ -61,6 +62,8 @@ const ThreadMessageList = ({ mainMessage }: ThreadMessageListProps): ReactElemen
 	const t = useTranslation();
 	const messageGroupingPeriod = Number(useSetting('Message_GroupingPeriod'));
 
+	const scrollMessageList = useScrollMessageList(listWrapperScrollRef);
+
 	return (
 		<div
 			className={['thread-list js-scroll-thread', hideUsernames && 'hide-usernames'].filter(isTruthy).join(' ')}
@@ -74,7 +77,7 @@ const ThreadMessageList = ({ mainMessage }: ThreadMessageListProps): ReactElemen
 							<LoadingMessagesIndicator />
 						</li>
 					) : (
-						<MessageListProvider>
+						<MessageListProvider scrollMessageList={scrollMessageList}>
 							{[mainMessage, ...messages].map((message, index, { [index - 1]: previous }) => {
 								const sequential = isMessageSequential(message, previous, messageGroupingPeriod);
 								const newDay = isMessageNewDay(message, previous);

apps/meteor/client/views/room/hooks/useGoToThread.ts

@@ -5,7 +5,7 @@ import { useCurrentRoute, useRoute } from '@rocket.chat/ui-contexts';
 export const useGoToThread = ({ replace = false }: { replace?: boolean } = {}): ((params: {
 	rid: IRoom['_id'];
 	tmid: IMessage['_id'];
-	jump?: IMessage['_id'];
+	msg?: IMessage['_id'];
 }) => void) => {
 	const [routeName, params, queryParams] = useCurrentRoute();
 
@@ -17,7 +17,7 @@ export const useGoToThread = ({ replace = false }: { replace?: boolean } = {}):
 	const go = replace ? roomRoute.replace : roomRoute.push;
 
 	// TODO: remove params recycling
-	return useMutableCallback(({ rid, tmid, jump }) => {
-		go({ rid, ...params, tab: 'thread', context: tmid }, { ...queryParams, ...(jump && { jump }) });
+	return useMutableCallback(({ rid, tmid, msg }) => {
+		go({ rid, ...params, tab: 'thread', context: tmid }, { ...queryParams, ...(msg && { msg }) });
 	});
 };