diff --git a/apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.ts b/apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.ts index 63909b96249e0..779ef48794284 100644 --- a/apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.ts +++ b/apps/meteor/client/views/room/MessageList/hooks/useTryToJumpToMessage.ts @@ -38,6 +38,9 @@ const useTryToJumpToMessage = ({ rid, virtualizerRef, setIsJumpingToMessage, mes setIsJumpingToMessage(false); return; } + if (!message) { + return; + } // Thread deep links are handled by useTryToJumpToThreadMessage; do not use the main list virtualizer if (message && isThreadMessage(message) && !isThreadMainMessage(message)) { setIsJumpingToMessage(false); @@ -78,7 +81,7 @@ const useTryToJumpToMessage = ({ rid, virtualizerRef, setIsJumpingToMessage, mes setTimeout(() => { setIsJumpingToMessage(false); setMessageJumpQueryStringParameter(null); - }, 1000); + }, 500); }, [messageJumpParam, virtualizerRef, setIsJumpingToMessage, rid, messages, message]); }; diff --git a/apps/meteor/client/views/room/body/hooks/useHasNewMessages.spec.ts b/apps/meteor/client/views/room/body/hooks/useHasNewMessages.spec.ts index d13c3a8f001f9..fa62da76d4268 100644 --- a/apps/meteor/client/views/room/body/hooks/useHasNewMessages.spec.ts +++ b/apps/meteor/client/views/room/body/hooks/useHasNewMessages.spec.ts @@ -15,6 +15,7 @@ jest.mock('../../../../../app/ui-utils/client', () => ({ RoomHistoryManager: { clear: jest.fn(), getMoreIfIsEmpty: jest.fn(), + hasMoreNext: jest.fn(), }, })); diff --git a/apps/meteor/client/views/room/body/hooks/useHasNewMessages.ts b/apps/meteor/client/views/room/body/hooks/useHasNewMessages.ts index ab3afcb05c9fd..acd68261dfc3f 100644 --- a/apps/meteor/client/views/room/body/hooks/useHasNewMessages.ts +++ b/apps/meteor/client/views/room/body/hooks/useHasNewMessages.ts @@ -66,6 +66,10 @@ export const useHasNewMessages = ( return; } if (msg.u._id === uid) { + // If there are more next messages, jump to the recent messages + if (RoomHistoryManager.hasMoreNext(rid)) { + return handleJumpToRecentButtonClick(); + } setShouldJumpToBottom(true); setHasNewMessages(false); } diff --git a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx index dc535603af0ca..2487b3fced269 100644 --- a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx +++ b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx @@ -12,6 +12,7 @@ import type { VirtualizerHandle } from 'virtua'; import { VList } from 'virtua'; import { ThreadMessageItem } from './ThreadMessageItem'; +import { setMessageJumpQueryStringParameter } from '../../../../../lib/utils/setMessageJumpQueryStringParameter'; import { BubbleDate } from '../../../BubbleDate'; import { useKeepMountedMessages } from '../../../MessageList/hooks/useKeepMountedMessages'; import { isMessageNewDay } from '../../../MessageList/lib/isMessageNewDay'; @@ -72,7 +73,8 @@ const ThreadMessageList = ({ mainMessage, shouldJumpToBottom, setShouldJumpToBot const { messageListRef } = useMessageListNavigation(); const virtualizerRef = useRef(null); - const isAtBottom = useRef(true); + const isAtBottom = useRef(null); + const lastScrollSizeRef = useRef(0); const items = loading ? [] : [mainMessage, ...messages]; @@ -102,6 +104,10 @@ const ThreadMessageList = ({ mainMessage, shouldJumpToBottom, setShouldJumpToBot setShouldJumpToBottom(false); return; } + if (isAtBottom.current === true && lastScrollSizeRef.current !== handle?.scrollSize) { + lastScrollSizeRef.current = handle?.scrollSize ?? 0; + setShouldJumpToBottom(true); + } if (shouldJumpToBottom) { handle.scrollToIndex(items.length, { align: 'end' }); setShouldJumpToBottom(false); @@ -129,6 +135,24 @@ const ThreadMessageList = ({ mainMessage, shouldJumpToBottom, setShouldJumpToBot }, 2000); }, [threadMsgTargetIndex, msgJumpParam, mainMessage._id, setShouldJumpToBottom]); + useEffect(() => { + if (!msgJumpParam) { + return; + } + const clearMsgJumpParam = () => { + if (messages.find((m) => m._id === msgJumpParam) && mainMessage._id !== msgJumpParam) { + setMessageJumpQueryStringParameter(null); + } + }; + const timeoutId = setTimeout(() => { + clearMsgJumpParam(); + }, 500); + return () => { + clearMsgJumpParam(); + clearTimeout(timeoutId); + }; + }, [msgJumpParam, messages, mainMessage._id]); + useEffect(() => { const handlerId = `thread-scroll-${mainMessage._id}`; clientCallbacks.add(