From 61dd74a7774bd8e0b623db36aedfa9192b1480b9 Mon Sep 17 00:00:00 2001 From: sdey-ias Date: Sat, 2 Mar 2024 11:59:21 +0530 Subject: [PATCH 1/3] ISSUE-31714 | Scroll the conversation to top --- .../roomActions/useGetTopMessageRoomAction.ts | 16 ++++++++++++++++ apps/meteor/client/ui.ts | 2 ++ apps/meteor/client/views/room/body/RoomBody.tsx | 16 ++++++++++++++++ .../room/contextualBar/FirstMessageScroller.tsx | 8 ++++++++ 4 files changed, 42 insertions(+) create mode 100644 apps/meteor/client/hooks/roomActions/useGetTopMessageRoomAction.ts create mode 100644 apps/meteor/client/views/room/contextualBar/FirstMessageScroller.tsx diff --git a/apps/meteor/client/hooks/roomActions/useGetTopMessageRoomAction.ts b/apps/meteor/client/hooks/roomActions/useGetTopMessageRoomAction.ts new file mode 100644 index 000000000000..862d2c241e71 --- /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: 'Start_of_converstation', + 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 4ec51aa67fda..618a3d658c3c 100644 --- a/apps/meteor/client/views/room/body/RoomBody.tsx +++ b/apps/meteor/client/views/room/body/RoomBody.tsx @@ -9,6 +9,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'; @@ -53,6 +54,8 @@ import { useRetentionPolicy } from './hooks/useRetentionPolicy'; import { useUnreadMessages } from './hooks/useUnreadMessages'; const RoomBody = (): ReactElement => { + const tabActionId = useRouteParameter('tab'); + const t = useTranslation(); const isLayoutEmbedded = useEmbeddedLayout(); const room = useRoom(); @@ -106,6 +109,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(); @@ -260,6 +269,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/apps/meteor/client/views/room/contextualBar/FirstMessageScroller.tsx b/apps/meteor/client/views/room/contextualBar/FirstMessageScroller.tsx new file mode 100644 index 000000000000..e9fba8b0c77e --- /dev/null +++ b/apps/meteor/client/views/room/contextualBar/FirstMessageScroller.tsx @@ -0,0 +1,8 @@ +import type { ReactElement } from 'react'; +import React from 'react'; + +const FirstMessageScroller = (): ReactElement => { + return

Hello

; +}; + +export default FirstMessageScroller; From 877dae2eef105d84d1c781727db6e4b0707ef6a3 Mon Sep 17 00:00:00 2001 From: sdey-ias Date: Sat, 2 Mar 2024 12:26:14 +0530 Subject: [PATCH 2/3] ISSUE-31714 | Added key-value in i18 json --- packages/i18n/src/locales/en.i18n.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json index 271907a68caa..40ddc28b8d73 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", + "Start_of_converstation" : "Start_of_converstation", "Star": "Star", "Star_Message": "Star Message", "Starred_Messages": "Starred Messages", From 8b60ff6fd6775bdb7fe83d4f7bf607376b5f0664 Mon Sep 17 00:00:00 2001 From: sdey-ias Date: Tue, 5 Mar 2024 17:41:10 +0530 Subject: [PATCH 3/3] ISSUE-31714 | Resolving the comments in the UI --- .../hooks/roomActions/useGetTopMessageRoomAction.ts | 2 +- .../views/room/contextualBar/FirstMessageScroller.tsx | 8 -------- packages/i18n/src/locales/en.i18n.json | 2 +- 3 files changed, 2 insertions(+), 10 deletions(-) delete mode 100644 apps/meteor/client/views/room/contextualBar/FirstMessageScroller.tsx diff --git a/apps/meteor/client/hooks/roomActions/useGetTopMessageRoomAction.ts b/apps/meteor/client/hooks/roomActions/useGetTopMessageRoomAction.ts index 862d2c241e71..daaf714f00fc 100644 --- a/apps/meteor/client/hooks/roomActions/useGetTopMessageRoomAction.ts +++ b/apps/meteor/client/hooks/roomActions/useGetTopMessageRoomAction.ts @@ -6,7 +6,7 @@ export const useGetTopMessageRoomAction = () => { return useMemo((): RoomToolboxActionConfig | undefined => { return { id: 'go-to-start-of-the-conversation', - title: 'Start_of_converstation', + title: 'Go_to_first_message', icon: 'arrow-up', order: 21, type: 'organization', diff --git a/apps/meteor/client/views/room/contextualBar/FirstMessageScroller.tsx b/apps/meteor/client/views/room/contextualBar/FirstMessageScroller.tsx deleted file mode 100644 index e9fba8b0c77e..000000000000 --- a/apps/meteor/client/views/room/contextualBar/FirstMessageScroller.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import type { ReactElement } from 'react'; -import React from 'react'; - -const FirstMessageScroller = (): ReactElement => { - return

Hello

; -}; - -export default FirstMessageScroller; diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json index 40ddc28b8d73..8a55c653d7d6 100644 --- a/packages/i18n/src/locales/en.i18n.json +++ b/packages/i18n/src/locales/en.i18n.json @@ -4914,7 +4914,7 @@ "spy-voip-calls": "Spy Voip Calls", "spy-voip-calls_description": "Permission to spy voip calls", "SSL": "SSL", - "Start_of_converstation" : "Start_of_converstation", + "Go_to_first_message" : "Go_to_first_message", "Star": "Star", "Star_Message": "Star Message", "Starred_Messages": "Starred Messages",