diff --git a/apps/meteor/client/hooks/roomActions/useGetTopMessageRoomAction.ts b/apps/meteor/client/hooks/roomActions/useGetTopMessageRoomAction.ts new file mode 100644 index 000000000000..daaf714f00fc --- /dev/null +++ b/apps/meteor/client/hooks/roomActions/useGetTopMessageRoomAction.ts @@ -0,0 +1,16 @@ +import { useMemo } from 'react'; + +import type { RoomToolboxActionConfig } from '../../views/room/contexts/RoomToolboxContext'; + +export const useGetTopMessageRoomAction = () => { + return useMemo((): RoomToolboxActionConfig | undefined => { + return { + id: 'go-to-start-of-the-conversation', + title: 'Go_to_first_message', + icon: 'arrow-up', + order: 21, + type: 'organization', + groups: ['channel', 'group', 'direct', 'direct_multiple', 'team'], + }; + }, []); +}; diff --git a/apps/meteor/client/ui.ts b/apps/meteor/client/ui.ts index 5dd438129c9a..948d0333e7b3 100644 --- a/apps/meteor/client/ui.ts +++ b/apps/meteor/client/ui.ts @@ -14,6 +14,7 @@ import { useContactProfileRoomAction } from './hooks/roomActions/useContactProfi import { useDiscussionsRoomAction } from './hooks/roomActions/useDiscussionsRoomAction'; import { useE2EERoomAction } from './hooks/roomActions/useE2EERoomAction'; import { useExportMessagesRoomAction } from './hooks/roomActions/useExportMessagesRoomAction'; +import { useGetTopMessageRoomAction } from './hooks/roomActions/useGetTopMessageRoomAction'; import { useKeyboardShortcutListRoomAction } from './hooks/roomActions/useKeyboardShortcutListRoomAction'; import { useMembersListRoomAction } from './hooks/roomActions/useMembersListRoomAction'; import { useMentionsRoomAction } from './hooks/roomActions/useMentionsRoomAction'; @@ -69,6 +70,7 @@ export const roomActionHooks = [ useUploadedFilesListRoomAction, useVoIPRoomInfoRoomAction, useWebRTCVideoRoomAction, + useGetTopMessageRoomAction, ] satisfies (() => RoomToolboxActionConfig | undefined)[]; export const quickActionHooks = [ diff --git a/apps/meteor/client/views/room/body/RoomBody.tsx b/apps/meteor/client/views/room/body/RoomBody.tsx index d6fb6e8cbfe1..c16c29ffb984 100644 --- a/apps/meteor/client/views/room/body/RoomBody.tsx +++ b/apps/meteor/client/views/room/body/RoomBody.tsx @@ -11,6 +11,7 @@ import { useTranslation, useUser, useUserPreference, + useRouteParameter, } from '@rocket.chat/ui-contexts'; import type { MouseEventHandler, ReactElement, UIEvent } from 'react'; import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; @@ -59,6 +60,7 @@ import { useRetentionPolicy } from './hooks/useRetentionPolicy'; import { useUnreadMessages } from './hooks/useUnreadMessages'; const RoomBody = (): ReactElement => { + const tabActionId = useRouteParameter('tab'); const formatDate = useFormatDate(); const t = useTranslation(); const isLayoutEmbedded = useEmbeddedLayout(); @@ -117,6 +119,12 @@ const RoomBody = (): ReactElement => { setHasNewMessages(false); }, [scrollMessageList]); + const sendToTop = useCallback(() => { + scrollMessageList(() => { + return { left: 30, top: 0 }; + }); + }, [scrollMessageList]); + const sendToBottomIfNecessary = useCallback(() => { if (atBottomRef.current === true) { sendToBottom(); @@ -271,6 +279,13 @@ const RoomBody = (): ReactElement => { }; }, [sendToBottomIfNecessary]); + useEffect(() => { + if (tabActionId === 'go-to-start-of-the-conversation') { + sendToTop(); + toolbox.closeTab(); + } + }, [tabActionId, sendToTop, toolbox]); + const router = useRouter(); const debouncedReadMessageRead = useMemo( diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json index 271907a68caa..8a55c653d7d6 100644 --- a/packages/i18n/src/locales/en.i18n.json +++ b/packages/i18n/src/locales/en.i18n.json @@ -4914,6 +4914,7 @@ "spy-voip-calls": "Spy Voip Calls", "spy-voip-calls_description": "Permission to spy voip calls", "SSL": "SSL", + "Go_to_first_message" : "Go_to_first_message", "Star": "Star", "Star_Message": "Star Message", "Starred_Messages": "Starred Messages",