[IMPROVE] Message rewrite

app/theme/client/imports/general/variables.css

@@ -341,7 +341,7 @@
 	--message-box-container-border-color: var(--color-gray-medium);
 	--message-box-container-border-width: var(--border);
 	--message-box-container-border-radius: var(--border-radius);
-	--message-box-editing-color: #fff5df;
+	--message-box-editing-color: #fff6d6;
 	--message-box-popover-title-text-color: var(--color-gray);
 	--message-box-popover-title-text-size: 0.75rem;
 

client/views/room/MessageList/MessageList.tsx

@@ -9,6 +9,7 @@ import { useTranslation } from '../../../contexts/TranslationContext';
 import { useUserSubscription } from '../../../contexts/UserContext';
 import { useFormatDate } from '../../../hooks/useFormatDate';
 import { MessageProvider } from '../providers/MessageProvider';
+import { SelectedMessagesProvider } from '../providers/SelectedMessagesProvider';
 import Message from './components/Message';
 import MessageSystem from './components/MessageSystem';
 import { ThreadMessagePreview } from './components/ThreadMessagePreview';
@@ -31,61 +32,63 @@ export const MessageList: FC<{ rid: IRoom['_id'] }> = ({ rid }) => {
 	return (
 		<MessageListProvider rid={rid}>
 			<MessageProvider rid={rid} broadcast={isBroadcast}>
-				<MessageHighlightProvider>
-					{messages.map((message, index, arr) => {
-						const previous = arr[index - 1];
+				<SelectedMessagesProvider>
+					<MessageHighlightProvider>
+						{messages.map((message, index, arr) => {
+							const previous = arr[index - 1];
 
-						const isSequential = isMessageSequential(message, previous, messageGroupingPeriod);
+							const isSequential = isMessageSequential(message, previous, messageGroupingPeriod);
 
-						const isNewDay = isMessageNewDay(message, previous);
-						const isFirstUnread = isMessageFirstUnread(subscription, message, previous);
-						const isUserOwnMessage = isOwnUserMessage(message, subscription);
-						const shouldShowDivider = isNewDay || isFirstUnread;
+							const isNewDay = isMessageNewDay(message, previous);
+							const isFirstUnread = isMessageFirstUnread(subscription, message, previous);
+							const isUserOwnMessage = isOwnUserMessage(message, subscription);
+							const shouldShowDivider = isNewDay || isFirstUnread;
 
-						const shouldShowAsSequential = isSequential && !isNewDay;
+							const shouldShowAsSequential = isSequential && !isNewDay;
 
-						const isSystemMessage = MessageTypes.isSystemMessage(message);
-						const shouldShowMessage = !isThreadMessage(message) && !isSystemMessage;
+							const isSystemMessage = MessageTypes.isSystemMessage(message);
+							const shouldShowMessage = !isThreadMessage(message) && !isSystemMessage;
 
-						return (
-							<Fragment key={message._id}>
-								{shouldShowDivider && (
-									<MessageDivider unreadLabel={isFirstUnread ? t('Unread_Messages').toLowerCase() : undefined}>
-										{isNewDay && format(message.ts)}
-									</MessageDivider>
-								)}
+							return (
+								<Fragment key={message._id}>
+									{shouldShowDivider && (
+										<MessageDivider unreadLabel={isFirstUnread ? t('Unread_Messages').toLowerCase() : undefined}>
+											{isNewDay && format(message.ts)}
+										</MessageDivider>
+									)}
 
-								{shouldShowMessage && (
-									<Message
-										id={message._id}
-										data-id={message._id}
-										data-system-message={Boolean(message.t)}
-										data-mid={message._id}
-										data-unread={isFirstUnread}
-										data-sequential={isSequential}
-										data-own={isUserOwnMessage}
-										sequential={shouldShowAsSequential}
-										message={message}
-										subscription={subscription}
-									/>
-								)}
+									{shouldShowMessage && (
+										<Message
+											id={message._id}
+											data-id={message._id}
+											data-system-message={Boolean(message.t)}
+											data-mid={message._id}
+											data-unread={isFirstUnread}
+											data-sequential={isSequential}
+											data-own={isUserOwnMessage}
+											sequential={shouldShowAsSequential}
+											message={message}
+											subscription={subscription}
+										/>
+									)}
 
-								{isThreadMessage(message) && (
-									<ThreadMessagePreview
-										data-system-message={Boolean(message.t)}
-										data-mid={message._id}
-										data-unread={isFirstUnread}
-										data-sequential={isSequential}
-										sequential={shouldShowAsSequential}
-										message={message as IThreadMessage}
-									/>
-								)}
+									{isThreadMessage(message) && (
+										<ThreadMessagePreview
+											data-system-message={Boolean(message.t)}
+											data-mid={message._id}
+											data-unread={isFirstUnread}
+											data-sequential={isSequential}
+											sequential={shouldShowAsSequential}
+											message={message as IThreadMessage}
+										/>
+									)}
 
-								{isSystemMessage && <MessageSystem message={message} />}
-							</Fragment>
-						);
-					})}
-				</MessageHighlightProvider>
+									{isSystemMessage && <MessageSystem message={message} />}
+								</Fragment>
+							);
+						})}
+					</MessageHighlightProvider>
+				</SelectedMessagesProvider>
 			</MessageProvider>
 		</MessageListProvider>
 	);

client/views/room/MessageList/components/Message.tsx

@@ -1,20 +1,19 @@
 /* eslint-disable complexity */
-import { Message as MessageTemplate, MessageLeftContainer, MessageContainer, MessageBody } from '@rocket.chat/fuselage';
+import { Message as MessageTemplate, MessageLeftContainer, MessageContainer, MessageBody, CheckBox } from '@rocket.chat/fuselage';
 import { useToggle } from '@rocket.chat/fuselage-hooks';
 import React, { FC, memo } from 'react';
 
 import { IMessage } from '../../../../../definition/IMessage';
 import { ISubscription } from '../../../../../definition/ISubscription';
 import UserAvatar from '../../../../components/avatar/UserAvatar';
 import { useIsMessageHighlight } from '../contexts/MessageHighlightContext';
+import { useIsSelecting, useToggleSelect, useIsSelectedMessage, useCountSelected } from '../contexts/SelectedMessagesContext';
 import MessageContent from './MessageContent';
 import MessageContentIgnored from './MessageContentIgnored';
 import MessageHeader from './MessageHeader';
 import { MessageIndicators } from './MessageIndicators';
 import Toolbox from './Toolbox';
 
-const style = { backgroundColor: 'var(--message-box-editing-color)' };
-
 const Message: FC<{ message: IMessage; sequential: boolean; subscription?: ISubscription; id: IMessage['_id'] }> = ({
 	message,
 	sequential,
@@ -24,18 +23,31 @@ const Message: FC<{ message: IMessage; sequential: boolean; subscription?: ISubs
 	const isMessageHighlight = useIsMessageHighlight(message._id);
 	const [isMessageIgnored, toggleMessageIgnored] = useToggle(message.ignored);
 
+	const isSelecting = useIsSelecting();
+	const toggleSelected = useToggleSelect(message._id);
+	const isSelected = useIsSelectedMessage(message._id);
+	useCountSelected();
+
 	return (
-		<MessageTemplate {...props} style={isMessageHighlight ? style : undefined}>
+		<MessageTemplate
+			{...props}
+			onClick={isSelecting ? toggleSelected : undefined}
+			isSelected={isSelected}
+			isEditing={isMessageHighlight}
+			// highlight={isMessageHighlight}
+			data-qa-editing={isMessageHighlight}
+			data-qa-selected={isSelected}
+		>
 			<MessageLeftContainer>
-				{!sequential && message.u.username && <UserAvatar username={message.u.username} size={'x36'} />}
+				{!sequential && message.u.username && !isSelecting && <UserAvatar username={message.u.username} size={'x36'} />}
+				{isSelecting && <CheckBox checked={isSelected} onChange={toggleSelected} />}
 				{sequential && <MessageIndicators message={message} />}
 			</MessageLeftContainer>
 
 			<MessageContainer>
 				{!sequential && <MessageHeader message={message} />}
 
 				{!isMessageIgnored && <MessageContent id={message._id} message={message} subscription={subscription} sequential={sequential} />}
-
 				{isMessageIgnored && (
 					<MessageBody>
 						<MessageContentIgnored onShowMessageIgnored={toggleMessageIgnored} />

client/views/room/MessageList/components/Toolbox/Toolbox.tsx

@@ -8,6 +8,7 @@ import { useSettings } from '../../../../../contexts/SettingsContext';
 import { useTranslation } from '../../../../../contexts/TranslationContext';
 import { useUser, useUserRoom, useUserSubscription } from '../../../../../contexts/UserContext';
 import { getTabBarContext } from '../../../lib/Toolbox/ToolboxContext';
+import { useIsSelecting } from '../../contexts/SelectedMessagesContext';
 import { MessageActionMenu } from './MessageActionMenu';
 
 export const Toolbox: FC<{ message: IMessage }> = ({ message }) => {
@@ -31,6 +32,12 @@ export const Toolbox: FC<{ message: IMessage }> = ({ message }) => {
 
 	const tabbar = getTabBarContext(message.rid);
 
+	const isSelecting = useIsSelecting();
+
+	if (isSelecting) {
+		return null;
+	}
+
 	return (
 		<MessageToolbox>
 			{messageActions.map((action) => (

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

@@ -0,0 +1,60 @@
+import { OffCallbackHandler } from '@rocket.chat/emitter';
+import { createContext, useCallback, useContext, useMemo } from 'react';
+import { useSubscription } from 'use-subscription';
+
+import { selectedMessageStore } from '../../providers/SelectedMessagesProvider';
+
+type SelectMessageContextValue = {
+	selectedMessageStore: typeof selectedMessageStore;
+};
+
+export const SelectedMessageContext = createContext({
+	selectedMessageStore,
+} as SelectMessageContextValue);
+
+export const useIsSelectedMessage = (mid: string): boolean => {
+	const { selectedMessageStore } = useContext(SelectedMessageContext);
+	const subscription = useMemo(
+		() => ({
+			getCurrentValue: (): boolean => selectedMessageStore.isSelected(mid),
+			subscribe: (callback: () => void): OffCallbackHandler => selectedMessageStore.on(mid, callback),
+		}),
+		[mid, selectedMessageStore],
+	);
+	return useSubscription(subscription);
+};
+
+export const useIsSelecting = (): boolean => {
+	const { selectedMessageStore } = useContext(SelectedMessageContext);
+
+	return useSubscription(
+		useMemo(
+			() => ({
+				getCurrentValue: (): boolean => selectedMessageStore.getIsSelecting(),
+				subscribe: (callback: () => void): OffCallbackHandler => selectedMessageStore.on('toggleIsSelecting', callback),
+			}),
+			[selectedMessageStore],
+		),
+	);
+};
+
+export const useToggleSelect = (mid: string): (() => void) => {
+	const { selectedMessageStore } = useContext(SelectedMessageContext);
+	return useCallback(() => {
+		selectedMessageStore.toggle(mid);
+	}, [mid, selectedMessageStore]);
+};
+
+export const useCountSelected = (): number => {
+	const { selectedMessageStore } = useContext(SelectedMessageContext);
+
+	return useSubscription(
+		useMemo(
+			() => ({
+				getCurrentValue: (): number => selectedMessageStore.count(),
+				subscribe: (callback: () => void): OffCallbackHandler => selectedMessageStore.on('change', callback),
+			}),
+			[selectedMessageStore],
+		),
+	);
+};

client/views/room/Room/Room.tsx

@@ -13,6 +13,7 @@ import VerticalBarOldActions from '../components/VerticalBarOldActions';
 import { useRoom } from '../contexts/RoomContext';
 import AppsContextualBar from '../contextualBar/Apps';
 import { useAppsContextualBar } from '../hooks/useAppsContextualBar';
+import { SelectedMessagesProvider } from '../providers/SelectedMessagesProvider';
 import { useTab, useTabBarOpen, useTabBarClose, useTabBarOpenUserInfo } from '../providers/ToolboxProvider';
 import LazyComponent from './LazyComponent';
 
@@ -44,27 +45,31 @@ export const Room: FC<{}> = () => {
 			{tab && (
 				<RoomTemplate.Aside data-qa-tabbar-name={tab.id}>
 					<ErrorBoundary>
-						{typeof tab.template === 'string' && (
-							<VerticalBarOldActions {...tab} name={tab.template} tabBar={tabBar} rid={room._id} _id={room._id} />
-						)}
-						{typeof tab.template !== 'string' && (
-							<LazyComponent template={tab.template} tabBar={tabBar} rid={room._id} teamId={room.teamId} _id={room._id} />
-						)}
+						<SelectedMessagesProvider>
+							{typeof tab.template === 'string' && (
+								<VerticalBarOldActions {...tab} name={tab.template} tabBar={tabBar} rid={room._id} _id={room._id} />
+							)}
+							{typeof tab.template !== 'string' && (
+								<LazyComponent template={tab.template} tabBar={tabBar} rid={room._id} teamId={room.teamId} _id={room._id} />
+							)}
+						</SelectedMessagesProvider>
 					</ErrorBoundary>
 				</RoomTemplate.Aside>
 			)}
 			{appsContextualBarContext && (
-				<RoomTemplate.Aside data-qa-tabbar-name={appsContextualBarContext.viewId}>
-					<ErrorBoundary>
-						<LazyComponent
-							template={AppsContextualBar}
-							viewId={appsContextualBarContext.viewId}
-							roomId={appsContextualBarContext.roomId}
-							payload={appsContextualBarContext.payload}
-							appInfo={appsContextualBarContext.appInfo}
-						/>
-					</ErrorBoundary>
-				</RoomTemplate.Aside>
+				<SelectedMessagesProvider>
+					<RoomTemplate.Aside data-qa-tabbar-name={appsContextualBarContext.viewId}>
+						<ErrorBoundary>
+							<LazyComponent
+								template={AppsContextualBar}
+								viewId={appsContextualBarContext.viewId}
+								roomId={appsContextualBarContext.roomId}
+								payload={appsContextualBarContext.payload}
+								appInfo={appsContextualBarContext.appInfo}
+							/>
+						</ErrorBoundary>
+					</RoomTemplate.Aside>
+				</SelectedMessagesProvider>
 			)}
 		</RoomTemplate>
 	);

client/views/room/contextualBar/ExportMessages/ExportMessages.js → client/views/room/contextualBar/ExportMessages/ExportMessages.tsx

@@ -1,19 +1,23 @@
-import { Field, Select, FieldGroup } from '@rocket.chat/fuselage';
-import React, { useState, useMemo } from 'react';
+import { Field, Select, FieldGroup, SelectOption } from '@rocket.chat/fuselage';
+import React, { useState, useMemo, FC } from 'react';
 
+import { IRoom } from '../../../../../definition/IRoom';
 import VerticalBar from '../../../../components/VerticalBar';
 import { useTranslation } from '../../../../contexts/TranslationContext';
 import { useTabBarClose } from '../../providers/ToolboxProvider';
 import FileExport from './FileExport';
 import MailExportForm from './MailExportForm';
 
-function ExportMessages({ rid }) {
+type ExportMessagesProps = {
+	rid: IRoom['_id'];
+};
+const ExportMessages: FC<ExportMessagesProps> = ({ rid }) => {
 	const t = useTranslation();
 	const close = useTabBarClose();
 
 	const [type, setType] = useState('email');
 
-	const exportOptions = useMemo(
+	const exportOptions = useMemo<SelectOption[]>(
 		() => [
 			['email', t('Send_via_email')],
 			['file', t('Export_as_file')],
@@ -32,7 +36,7 @@ function ExportMessages({ rid }) {
 					<Field>
 						<Field.Label>{t('Method')}</Field.Label>
 						<Field.Row>
-							<Select value={type} onChange={(value) => setType(value)} placeholder={t('Type')} options={exportOptions} />
+							<Select value={type} onChange={(value): void => setType(value)} placeholder={t('Type')} options={exportOptions} />
 						</Field.Row>
 					</Field>
 				</FieldGroup>
@@ -41,6 +45,6 @@ function ExportMessages({ rid }) {
 			</VerticalBar.ScrollableContent>
 		</>
 	);
-}
+};
 
 export default ExportMessages;