feat: Export selected room messages as JSON file

.changeset/shaggy-bulldogs-beg.md

@@ -0,0 +1,7 @@
+---
+'@rocket.chat/ui-composer': minor
+'@rocket.chat/i18n': minor
+'@rocket.chat/meteor': minor
+---
+
+Introduces a new option when exporting messages, allowing users to select and download a JSON file directly from client

apps/meteor/client/views/room/Header/icons/Encrypted.tsx

@@ -9,7 +9,7 @@ import { HeaderState } from '../../../../components/Header';
 const Encrypted = ({ room }: { room: IRoom }) => {
 	const { t } = useTranslation();
 	const e2eEnabled = useSetting('E2E_Enable');
-	return e2eEnabled && room?.encrypted ? <HeaderState title={t('Encrypted')} icon='key' color={colors.g500} tiny /> : null;
+	return e2eEnabled && room?.encrypted ? <HeaderState title={t('Encrypted')} icon='key' color={colors.g500} /> : null;
 };
 
 export default memo(Encrypted);

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

@@ -44,6 +44,20 @@ export const useToggleSelect = (mid: string): (() => void) => {
 	}, [mid, selectedMessageStore]);
 };
 
+export const useToggleSelectAll = (): (() => void) => {
+	const { selectedMessageStore } = useContext(SelectedMessageContext);
+	return useCallback(() => {
+		selectedMessageStore.toggleAll(Array.from(selectedMessageStore.availableMessages));
+	}, [selectedMessageStore]);
+};
+
+export const useClearSelection = (): (() => void) => {
+	const { selectedMessageStore } = useContext(SelectedMessageContext);
+	return useCallback(() => {
+		selectedMessageStore.clearStore();
+	}, [selectedMessageStore]);
+};
+
 export const useCountSelected = (): number => {
 	const { selectedMessageStore } = useContext(SelectedMessageContext);
 
@@ -56,3 +70,16 @@ export const useCountSelected = (): number => {
 
 	return useSyncExternalStore(subscribe, getSnapshot);
 };
+
+export const useSelectedMessages = (): string[] => {
+	const { selectedMessageStore } = useContext(SelectedMessageContext);
+
+	const subscribe = useCallback(
+		(callback: () => void): (() => void) => selectedMessageStore.on('change', callback),
+		[selectedMessageStore],
+	);
+
+	const getSnapshot = () => selectedMessageStore.getSelectedMessages();
+
+	return useSyncExternalStore(subscribe, getSnapshot);
+};

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

@@ -102,7 +102,7 @@ const RoomBody = (): ReactElement => {
 
 	const { innerRef: isAtBottomInnerRef, atBottomRef, sendToBottom, sendToBottomIfNecessary, isAtBottom } = useListIsAtBottom();
 
-	const { innerRef: getMoreInnerRef } = useGetMore(room._id, atBottomRef);
+	const { innerRef: getMoreInnerRef, handleGetMore } = useGetMore(room._id, atBottomRef);
 
 	const { wrapperRef: leaderBannerWrapperRef, hideLeaderHeader, innerRef: leaderBannerInnerRef } = useLeaderBanner();
 
@@ -313,6 +313,7 @@ const RoomBody = (): ReactElement => {
 									onNavigateToPreviousMessage={handleNavigateToPreviousMessage}
 									onNavigateToNextMessage={handleNavigateToNextMessage}
 									onUploadFiles={handleUploadFiles}
+									onGetMore={handleGetMore}
 									// TODO: send previewUrls param
 									// previewUrls={}
 								/>

apps/meteor/client/views/room/body/RoomBodyV2.tsx

@@ -97,7 +97,7 @@ const RoomBody = (): ReactElement => {
 
 	const { innerRef: isAtBottomInnerRef, atBottomRef, sendToBottom, sendToBottomIfNecessary, isAtBottom } = useListIsAtBottom();
 
-	const { innerRef: getMoreInnerRef } = useGetMore(room._id, atBottomRef);
+	const { innerRef: getMoreInnerRef, handleGetMore } = useGetMore(room._id, atBottomRef);
 
 	const { wrapperRef: sectionWrapperRef, hideSection, innerRef: sectionScrollRef } = useBannerSection();
 
@@ -285,6 +285,7 @@ const RoomBody = (): ReactElement => {
 									onNavigateToPreviousMessage={handleNavigateToPreviousMessage}
 									onNavigateToNextMessage={handleNavigateToNextMessage}
 									onUploadFiles={handleUploadFiles}
+									onGetMore={handleGetMore}
 									// TODO: send previewUrls param
 									// previewUrls={}
 								/>

apps/meteor/client/views/room/body/hooks/useGetMore.ts

@@ -1,17 +1,28 @@
 import type { MutableRefObject } from 'react';
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 
 import { RoomHistoryManager } from '../../../../../app/ui-utils/client';
 import { withThrottling } from '../../../../../lib/utils/highOrderFunctions';
+import { useToggleSelectAll } from '../../MessageList/contexts/SelectedMessagesContext';
 
 export const useGetMore = (rid: string, atBottomRef: MutableRefObject<boolean>) => {
+	const ref: MutableRefObject<HTMLElement | null> = useRef(null);
+	const handleToggleAll = useToggleSelectAll();
+
+	const handleGetMore = () => {
+		ref.current?.scrollTo({ top: 0, behavior: 'smooth' });
+		handleToggleAll();
+	};
+
 	return {
+		handleGetMore,
 		innerRef: useCallback(
 			(wrapper: HTMLElement | null) => {
 				if (!wrapper) {
 					return;
 				}
 
+				ref.current = wrapper;
 				let lastScrollTopRef = 0;
 
 				wrapper.addEventListener(

apps/meteor/client/views/room/composer/ComposerContainer.tsx

@@ -13,13 +13,15 @@ import type { ComposerMessageProps } from './ComposerMessage';
 import ComposerMessage from './ComposerMessage';
 import ComposerOmnichannel from './ComposerOmnichannel';
 import ComposerReadOnly from './ComposerReadOnly';
+import ComposerSelectMessages from './ComposerSelectMessages';
 import ComposerVoIP from './ComposerVoIP';
 import { useRoom } from '../contexts/RoomContext';
 import { useMessageComposerIsAnonymous } from './hooks/useMessageComposerIsAnonymous';
 import { useMessageComposerIsArchived } from './hooks/useMessageComposerIsArchived';
 import { useMessageComposerIsBlocked } from './hooks/useMessageComposerIsBlocked';
 import { useMessageComposerIsReadOnly } from './hooks/useMessageComposerIsReadOnly';
 import { useAirGappedRestriction } from '../../../hooks/useAirGappedRestriction';
+import { useIsSelecting } from '../MessageList/contexts/SelectedMessagesContext';
 
 const ComposerContainer = ({ children, ...props }: ComposerMessageProps): ReactElement => {
 	const room = useRoom();
@@ -28,6 +30,7 @@ const ComposerContainer = ({ children, ...props }: ComposerMessageProps): ReactE
 	const mustJoinWithCode = !props.subscription && room.joinCodeRequired && !canJoinWithoutCode;
 
 	const isAnonymous = useMessageComposerIsAnonymous();
+	const isSelectingMessages = useIsSelecting();
 	const isBlockedOrBlocker = useMessageComposerIsBlocked({ subscription: props.subscription });
 	const isArchived = useMessageComposerIsArchived(room._id, props.subscription);
 	const isReadOnly = useMessageComposerIsReadOnly(room._id);
@@ -74,6 +77,10 @@ const ComposerContainer = ({ children, ...props }: ComposerMessageProps): ReactE
 		return <ComposerBlocked />;
 	}
 
+	if (isSelectingMessages) {
+		return <ComposerSelectMessages {...props} />;
+	}
+
 	return (
 		<>
 			{children}

apps/meteor/client/views/room/composer/ComposerMessage.tsx

@@ -22,6 +22,7 @@ export type ComposerMessageProps = {
 	onNavigateToNextMessage?: () => void;
 	onNavigateToPreviousMessage?: () => void;
 	onUploadFiles?: (files: readonly File[]) => void;
+	onGetMore?: () => void;
 };
 
 const ComposerMessage = ({ tmid, onSend, ...props }: ComposerMessageProps): ReactElement => {

apps/meteor/client/views/room/composer/ComposerSelectMessages.tsx

@@ -0,0 +1,34 @@
+import { Button, ButtonGroup } from '@rocket.chat/fuselage';
+import { MessageFooterCallout, MessageFooterCalloutContent } from '@rocket.chat/ui-composer';
+import type { ReactElement } from 'react';
+import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { ComposerMessageProps } from './ComposerMessage';
+import { useCountSelected, useClearSelection, SelectedMessageContext } from '../MessageList/contexts/SelectedMessagesContext';
+
+const ComposerSelectMessages = ({ onGetMore }: ComposerMessageProps): ReactElement => {
+	const { t } = useTranslation();
+
+	const { selectedMessageStore } = useContext(SelectedMessageContext);
+	const clearSelection = useClearSelection();
+	const countSelected = useCountSelected();
+	const countAvailable = selectedMessageStore.availableMessages.size;
+	const noMessagesAvailable = countAvailable <= countSelected;
+
+	return (
+		<MessageFooterCallout>
+			<MessageFooterCalloutContent textAlign='left'>{t('number_messages_selected', { count: countSelected })}</MessageFooterCalloutContent>
+			<ButtonGroup>
+				<Button small disabled={countSelected === 0} onClick={clearSelection}>
+					{t('Clear_selection')}
+				</Button>
+				<Button icon='arrow-up' small primary disabled={noMessagesAvailable} onClick={onGetMore}>
+					{t('Select_number_messages', { count: countAvailable - countSelected })}
+				</Button>
+			</ButtonGroup>
+		</MessageFooterCallout>
+	);
+};
+
+export default ComposerSelectMessages;