snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/room/modals/DeleteMessageConfirmModal/DeleteMessageConfirmModal.tsx

@@ -0,0 +1,68 @@
+import type { IMessage, IRoom } from '@rocket.chat/core-typings';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useMutation } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import type { ChatAPI } from '../../../../lib/chats/ChatAPI';
+
+const DeleteMessageConfirmModal = ({
+	room,
+	chat,
+	resolve,
+	reject,
+	onCancel,
+	message,
+}: {
+	room?: IRoom;
+	chat: ChatAPI;
+	resolve: () => void;
+	reject: (reason?: any) => void;
+	message: IMessage;
+	onCancel: () => void;
+}) => {
+	const { t } = useTranslation();
+	const mid = chat.currentEditingMessage.getMID();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const deleteMessageMutation = useMutation({
+		mutationFn: async () => {
+			if (!(await chat.data.canDeleteMessage(message))) {
+				throw new Error(t('Message_deleting_blocked'));
+			}
+
+			await chat.data.deleteMessage(message);
+		},
+		onSuccess: () => {
+			if (mid === message._id) {
+				chat.currentEditingMessage.stop();
+			}
+			chat.composer?.focus();
+
+			dispatchToastMessage({ type: 'success', message: t('Your_entry_has_been_deleted') });
+			resolve();
+		},
+		onError: (error) => {
+			dispatchToastMessage({ type: 'error', message: error });
+			reject(error);
+		},
+		onSettled: () => {
+			onCancel();
+		},
+	});
+
+	return (
+		<GenericModal
+			variant='danger'
+			title={t('Are_you_sure')}
+			confirmText={t('Yes_delete_it')}
+			onConfirm={deleteMessageMutation.mutate}
+			onCancel={onCancel}
+			confirmDisabled={deleteMessageMutation.isPending}
+		>
+			{room ? t('The_message_is_a_discussion_you_will_not_be_able_to_recover') : t('You_will_not_be_able_to_recover')}
+		</GenericModal>
+	);
+};
+
+export default DeleteMessageConfirmModal;

apps/meteor/client/views/room/modals/DeleteMessageConfirmModal/index.ts

@@ -0,0 +1 @@
+export { default } from './DeleteMessageConfirmModal';

apps/meteor/client/views/room/modals/E2EEModals/BaseDisableE2EEModal.tsx

@@ -0,0 +1,42 @@
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { useState } from 'react';
+
+import DisableE2EEModal from './DisableE2EEModal';
+import ResetKeysE2EEModal from './ResetKeysE2EEModal';
+
+const STEPS = {
+	DISABLE_E2EE: 'DISABLE_E2EE',
+	RESET_ROOM_KEY: 'RESET_ROOM_KEY',
+};
+
+export type BaseDisableE2EEModalProps = {
+	onConfirm: () => void;
+	onClose: () => void;
+	roomType: string;
+	roomId: string;
+	canResetRoomKey: boolean;
+};
+
+const BaseDisableE2EEModal = ({ onConfirm, onClose, roomType, roomId, canResetRoomKey }: BaseDisableE2EEModalProps) => {
+	const [step, setStep] = useState(STEPS.DISABLE_E2EE);
+
+	const onResetRoomKey = useStableCallback(() => {
+		setStep(STEPS.RESET_ROOM_KEY);
+	});
+
+	if (step === STEPS.RESET_ROOM_KEY && canResetRoomKey) {
+		return <ResetKeysE2EEModal roomType={roomType} roomId={roomId} onCancel={onClose} />;
+	}
+
+	return (
+		<DisableE2EEModal
+			onConfirm={onConfirm}
+			onCancel={onClose}
+			roomType={roomType}
+			canResetRoomKey={canResetRoomKey}
+			onResetRoomKey={onResetRoomKey}
+		/>
+	);
+};
+
+export default BaseDisableE2EEModal;

apps/meteor/client/views/room/modals/E2EEModals/DisableE2EEModal.tsx

@@ -0,0 +1,52 @@
+import { Accordion, AccordionItem, Box, Button } from '@rocket.chat/fuselage';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { Trans, useTranslation } from 'react-i18next';
+
+export type DisableE2EEModalProps = {
+	onConfirm: () => void;
+	onCancel: () => void;
+	roomType: string;
+	canResetRoomKey: boolean;
+	onResetRoomKey: () => void;
+};
+
+const DisableE2EEModal = ({ onConfirm, onCancel, roomType, canResetRoomKey, onResetRoomKey }: DisableE2EEModalProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<GenericModal
+			icon='key'
+			title={t('E2E_disable_encryption')}
+			variant='warning'
+			confirmText={t('E2E_disable_encryption')}
+			onConfirm={onConfirm}
+			onCancel={onCancel}
+			onDismiss={() => undefined}
+			annotation={t('Proceed_with_caution')}
+		>
+			<Box marginBlockEnd={16} is='p'>
+				<Trans i18nKey='E2E_disable_encryption_description' tOptions={{ roomType }} />
+			</Box>
+
+			{canResetRoomKey && (
+				<>
+					<Box marginBlockEnd={16} is='p'>
+						{t('E2E_disable_encryption_reset_keys_description')}
+					</Box>
+					<Accordion>
+						<AccordionItem title={t('E2E_reset_encryption_keys')}>
+							<Box marginBlockEnd={16} is='p'>
+								{t('E2E_reset_encryption_keys_description')}
+							</Box>
+							<Button secondary danger small onClick={onResetRoomKey}>
+								{t('E2E_reset_encryption_keys_button', { roomType })}
+							</Button>
+						</AccordionItem>
+					</Accordion>
+				</>
+			)}
+		</GenericModal>
+	);
+};
+
+export default DisableE2EEModal;

apps/meteor/client/views/room/modals/E2EEModals/EnableE2EEModal.tsx

@@ -0,0 +1,30 @@
+import { Box } from '@rocket.chat/fuselage';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+export type EnableE2EEModalProps = {
+	onConfirm: () => void;
+	onClose: () => void;
+	roomType: string;
+};
+
+const EnableE2EEModal = ({ onConfirm, onClose, roomType }: EnableE2EEModalProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<GenericModal
+			icon='key'
+			title={t('E2E_enable_encryption')}
+			variant='warning'
+			confirmText={t('E2E_enable_encryption')}
+			onConfirm={onConfirm}
+			onCancel={onClose}
+		>
+			<Box marginBlockEnd={16} is='p'>
+				{t('E2E_enable_encryption_description', { roomType })}
+			</Box>
+		</GenericModal>
+	);
+};
+
+export default EnableE2EEModal;

apps/meteor/client/views/room/modals/E2EEModals/ResetKeysE2EEModal.tsx

@@ -0,0 +1,62 @@
+import { Box, ModalFooterAnnotation, ModalIcon } from '@rocket.chat/fuselage';
+import { ExternalLink, GenericModal } from '@rocket.chat/ui-client';
+import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { Trans, useTranslation } from 'react-i18next';
+
+import { links } from '../../../../lib/links';
+import { useE2EEResetRoomKey } from '../../hooks/useE2EEResetRoomKey';
+
+const E2EE_RESET_KEY_LINK = links.go.e2eeGuide;
+
+export type ResetKeysE2EEModalProps = {
+	roomType: string;
+	roomId: string;
+	onCancel: () => void;
+};
+
+const ResetKeysE2EEModal = ({ roomType, roomId, onCancel }: ResetKeysE2EEModalProps) => {
+	const { t } = useTranslation();
+	const resetRoomKeyMutation = useE2EEResetRoomKey();
+
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const handleResetRoomKey = () => {
+		resetRoomKeyMutation.mutate(
+			{ roomId },
+			{
+				onSuccess: () => {
+					dispatchToastMessage({ type: 'success', message: t('E2E_reset_encryption_keys_success') });
+				},
+				onError: () => {
+					dispatchToastMessage({ type: 'error', message: t('E2E_reset_encryption_keys_error') });
+				},
+				onSettled: () => {
+					onCancel();
+				},
+			},
+		);
+	};
+
+	return (
+		<GenericModal
+			icon={<ModalIcon color='danger' name='key' />}
+			title={t('E2E_reset_encryption_keys')}
+			variant='danger'
+			confirmText={t('E2E_reset_encryption_keys')}
+			dontAskAgain={<ModalFooterAnnotation>{t('This_action_cannot_be_undone')}</ModalFooterAnnotation>}
+			onCancel={onCancel}
+			onConfirm={handleResetRoomKey}
+			onDismiss={() => undefined}
+		>
+			<Box marginBlockEnd={16} is='p'>
+				<Trans i18nKey='E2E_reset_encryption_keys_modal_description' tOptions={{ roomType }}>
+					Resetting E2EE keys is only recommend if no {roomType} member has a valid key to regain access to the previously encrypted
+					content. All members may lose access to previously encrypted content.
+					<ExternalLink to={E2EE_RESET_KEY_LINK}>Learn more</ExternalLink> about resetting encryption keys. Proceed with caution.
+				</Trans>
+			</Box>
+		</GenericModal>
+	);
+};
+
+export default ResetKeysE2EEModal;

apps/meteor/client/views/room/modals/FileUploadModal/FilePreview.tsx

@@ -0,0 +1,55 @@
+import GenericPreview from './GenericPreview';
+import MediaPreview from './MediaPreview';
+import { MAX_FILE_SIZE_PREVIEW } from '../../../../lib/constants';
+import { isIE11 } from '../../../../lib/utils/isIE11';
+
+export enum FilePreviewType {
+	IMAGE = 'image',
+	AUDIO = 'audio',
+	VIDEO = 'video',
+}
+
+const getFileType = (fileType: File['type']): FilePreviewType | undefined => {
+	if (!fileType) {
+		return;
+	}
+	for (const type of Object.values(FilePreviewType)) {
+		if (fileType.indexOf(type) > -1) {
+			return type;
+		}
+	}
+};
+
+const shouldShowMediaPreview = (file: File, fileType: FilePreviewType | undefined): boolean => {
+	if (!fileType) {
+		return false;
+	}
+	if (isIE11) {
+		return false;
+	}
+	// Avoid preview if file size bigger than 10mb
+	if (file.size > MAX_FILE_SIZE_PREVIEW) {
+		return false;
+	}
+	if (!Object.values(FilePreviewType).includes(fileType)) {
+		return false;
+	}
+	return true;
+};
+
+export type FilePreviewProps = {
+	file: File;
+	altText?: string;
+};
+
+const FilePreview = ({ file, altText }: FilePreviewProps) => {
+	const fileType = getFileType(file.type);
+
+	if (shouldShowMediaPreview(file, fileType)) {
+		return <MediaPreview file={file} fileType={fileType as FilePreviewType} altText={altText} />;
+	}
+
+	return <GenericPreview file={file} />;
+};
+
+export default FilePreview;

apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.spec.tsx

@@ -0,0 +1,49 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+
+import FileUploadModal from './FileUploadModal';
+import * as stories from './FileUploadModal.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+const defaultProps = {
+	onClose: () => undefined,
+	file: new File([], 'testing.png', { type: 'image/png' }),
+	fileName: 'testing.png',
+	onSubmit: () => undefined,
+};
+
+const defaultWrapper = mockAppRoot().withTranslations('en', 'core', {
+	Update: 'Update',
+	Upload_file_name: 'File name',
+	FileUpload_MediaType_NotAccepted__type__: 'Media type not accepted: {{type}}',
+});
+
+test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+	const { baseElement } = render(<Story />);
+	expect(baseElement).toMatchSnapshot();
+});
+
+test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
+	const { container } = render(<Story />);
+
+	const results = await axe(container);
+	expect(results).toHaveNoViolations();
+});
+
+it('should not send a renamed file with not allowed mime-type', async () => {
+	render(<FileUploadModal {...defaultProps} />, {
+		wrapper: defaultWrapper.withSetting('FileUpload_MediaTypeBlackList', 'image/svg+xml').build(),
+	});
+
+	const input = await screen.findByRole('textbox', { name: 'File name' });
+	await userEvent.type(input, 'testing.svg');
+
+	const button = await screen.findByRole('button', { name: 'Update' });
+	await userEvent.click(button);
+
+	expect(screen.getByText('Media type not accepted: image/svg+xml')).toBeInTheDocument();
+});

apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.stories.tsx

@@ -0,0 +1,19 @@
+import type { StoryObj, Meta } from '@storybook/react';
+
+import FileUploadModal from '.';
+
+export default {
+	component: FileUploadModal,
+	parameters: {
+		layout: 'fullscreen',
+		actions: { argTypesRegex: '^on.*' },
+	},
+	args: {
+		file: new File(['The lazy brown fox jumped over the lazy brown fox.'], 'test.txt', { type: 'text/plain' }),
+		fileName: 'test.txt',
+	},
+} satisfies Meta<typeof FileUploadModal>;
+
+export const Default: StoryObj<typeof FileUploadModal> = {
+	name: 'FileUploadModal',
+};

apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.tsx

@@ -0,0 +1,120 @@
+import {
+	Modal,
+	Box,
+	Button,
+	ModalHeader,
+	ModalTitle,
+	ModalClose,
+	ModalContent,
+	ModalFooter,
+	ModalFooterControllers,
+} from '@rocket.chat/fuselage';
+import {
+	TextInput,
+	TextAreaInput,
+	Field,
+	FieldError,
+	FieldRow,
+	FieldLabel,
+	FieldGroup,
+	FieldDescription,
+} from '@rocket.chat/fuselage-forms';
+import type { ComponentProps } from 'react';
+import { memo, useCallback, useId } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import FilePreview from './FilePreview';
+import { getMimeTypeFromFileName } from '../../../../../app/utils/lib/mimeTypes';
+import { fileUploadIsValidContentType } from '../../../../lib/utils/restrictions';
+
+export type FileUploadModalProps = {
+	onClose: () => void;
+	onSubmit: (name: string, altText?: string) => void;
+	file: File;
+	fileName: string;
+	fileAltText?: string;
+};
+
+const FileUploadModal = ({ onClose, file, fileName, fileAltText = '', onSubmit }: FileUploadModalProps) => {
+	const { t } = useTranslation();
+	const fileUploadFormId = useId();
+	const isImage = file.type.startsWith('image/');
+
+	const {
+		control,
+		handleSubmit,
+		formState: { errors, isDirty, isSubmitting },
+	} = useForm({ mode: 'onBlur', defaultValues: { name: fileName, altText: fileAltText } });
+
+	const validateFileName = useCallback(
+		(fieldValue: string) => {
+			const type = getMimeTypeFromFileName(fieldValue);
+			if (fileUploadIsValidContentType(type)) {
+				return undefined;
+			}
+
+			return t('FileUpload_MediaType_NotAccepted__type__', { type });
+		},
+		[t],
+	);
+
+	return (
+		<Modal
+			aria-labelledby={`${fileUploadFormId}-title`}
+			wrapperFunction={(props: ComponentProps<typeof Box>) => (
+				<Box is='form' id={fileUploadFormId} onSubmit={handleSubmit(({ name, altText }) => onSubmit(name, altText?.trim()))} {...props} />
+			)}
+		>
+			<Box display='flex' flexDirection='column' height='100%'>
+				<ModalHeader>
+					<ModalTitle id={`${fileUploadFormId}-title`}>{t('FileUpload')}</ModalTitle>
+					<ModalClose tabIndex={-1} onClick={onClose} />
+				</ModalHeader>
+				<ModalContent>
+					<Box display='flex' maxHeight='x360' width='full' justifyContent='center' alignContent='center' marginBlockEnd={16}>
+						<FilePreview file={file} altText={fileAltText} />
+					</Box>
+					<FieldGroup>
+						<Field>
+							<FieldLabel>{t('Upload_file_name')}</FieldLabel>
+							<FieldRow>
+								<Controller
+									name='name'
+									control={control}
+									rules={{
+										required: t('error-the-field-is-required', { field: t('Upload_file_name') }),
+										validate: validateFileName,
+									}}
+									render={({ field }) => <TextInput {...field} error={errors.name?.message} aria-required='true' />}
+								/>
+							</FieldRow>
+							{errors.name && <FieldError>{errors.name.message}</FieldError>}
+						</Field>
+						{isImage && (
+							<Field>
+								<FieldLabel>{t('Alternative_text')}</FieldLabel>
+								<FieldDescription>{t('Alt_text_description')}</FieldDescription>
+								<FieldRow>
+									<Controller name='altText' control={control} render={({ field }) => <TextAreaInput {...field} />} />
+								</FieldRow>
+							</Field>
+						)}
+					</FieldGroup>
+				</ModalContent>
+				<ModalFooter>
+					<ModalFooterControllers>
+						<Button secondary onClick={onClose}>
+							{t('Cancel')}
+						</Button>
+						<Button primary type='submit' disabled={!isDirty} loading={isSubmitting}>
+							{t('Update')}
+						</Button>
+					</ModalFooterControllers>
+				</ModalFooter>
+			</Box>
+		</Modal>
+	);
+};
+
+export default memo(FileUploadModal);

apps/meteor/client/views/room/modals/FileUploadModal/GenericPreview.tsx

@@ -0,0 +1,14 @@
+import { Box, Icon } from '@rocket.chat/fuselage';
+
+import { formatBytes } from '../../../../lib/utils/formatBytes';
+
+export type GenericPreviewProps = { file: File };
+
+const GenericPreview = ({ file }: GenericPreviewProps) => (
+	<Box display='flex' alignItems='center' width='full' fontScale='h4'>
+		<Icon name='file' size='x24' marginInlineStart={-2} marginInlineEnd={4} />
+		{`${file.name} - ${formatBytes(file.size, 2)}`}
+	</Box>
+);
+
+export default GenericPreview;

apps/meteor/client/views/room/modals/FileUploadModal/ImagePreview.tsx

@@ -0,0 +1,44 @@
+import { Box } from '@rocket.chat/fuselage';
+import { useState } from 'react';
+
+import GenericPreview from './GenericPreview';
+import PreviewSkeleton from './PreviewSkeleton';
+
+export type ImagePreviewProps = {
+	url: string;
+	file: File;
+	altText?: string;
+};
+
+const ImagePreview = ({ url, file, altText = '' }: ImagePreviewProps) => {
+	const [error, setError] = useState(false);
+	const [loading, setLoading] = useState(true);
+
+	const handleLoad = (): void => setLoading(false);
+	const handleError = (): void => {
+		setLoading(false);
+		setError(true);
+	};
+
+	if (error) {
+		return <GenericPreview file={file} />;
+	}
+
+	return (
+		<>
+			{loading && <PreviewSkeleton />}
+			<Box
+				is='img'
+				src={url}
+				alt={altText}
+				maxWidth='full'
+				objectFit='contain'
+				onLoad={handleLoad}
+				onError={handleError}
+				display={loading ? 'none' : 'initial'}
+			/>
+		</>
+	);
+};
+
+export default ImagePreview;

apps/meteor/client/views/room/modals/FileUploadModal/MediaPreview.tsx

@@ -0,0 +1,54 @@
+import { AudioPlayer, Box, Icon } from '@rocket.chat/fuselage';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { FilePreviewType } from './FilePreview';
+import ImagePreview from './ImagePreview';
+import PreviewSkeleton from './PreviewSkeleton';
+import { userAgentMIMETypeFallback } from '../../../../lib/utils/userAgentMIMETypeFallback';
+import { useFileAsDataURL } from '../../hooks/useFileAsDataURL';
+
+export type MediaPreviewProps = {
+	file: File;
+	fileType: FilePreviewType;
+	altText?: string;
+};
+
+const MediaPreview = ({ file, fileType, altText }: MediaPreviewProps) => {
+	const [loaded, url] = useFileAsDataURL(file);
+	const { t } = useTranslation();
+
+	if (!loaded) {
+		return <PreviewSkeleton />;
+	}
+
+	if (typeof url !== 'string') {
+		return (
+			<Box display='flex' alignItems='center' width='full'>
+				<Icon name='image' size='x24' marginInlineEnd={4} />
+				{t('FileUpload_Cannot_preview_file')}
+			</Box>
+		);
+	}
+
+	if (fileType === FilePreviewType.IMAGE) {
+		return <ImagePreview url={url} file={file} altText={altText} />;
+	}
+
+	if (fileType === FilePreviewType.VIDEO) {
+		return (
+			<Box is='video' width='full' controls>
+				<source src={url} type={userAgentMIMETypeFallback(file.type)} />
+				{t('Browser_does_not_support_video_element')}
+			</Box>
+		);
+	}
+
+	if (fileType === FilePreviewType.AUDIO) {
+		return <AudioPlayer src={url} />;
+	}
+
+	throw new Error('Wrong props provided for MediaPreview');
+};
+
+export default memo(MediaPreview);

apps/meteor/client/views/room/modals/FileUploadModal/PreviewSkeleton.tsx

@@ -0,0 +1,5 @@
+import { Skeleton } from '@rocket.chat/fuselage';
+
+const PreviewSkeleton = () => <Skeleton variant='rect' width='full' height='x200' />;
+
+export default PreviewSkeleton;

apps/meteor/client/views/room/modals/FileUploadModal/__snapshots__/FileUploadModal.spec.tsx.snap

@@ -0,0 +1,134 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`renders Default without crashing 1`] = `
+<body>
+  <div>
+    <dialog
+      aria-labelledby="_r_0_-title"
+      aria-modal="true"
+      class="rcx-box rcx-box--full rcx-modal"
+      open=""
+    >
+      <form
+        class="rcx-box rcx-box--full rcx-modal__inner rcx-css-qtwduz"
+        id="_r_0_"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-css-ogq2n4"
+        >
+          <header
+            class="rcx-box rcx-box--full rcx-modal__header"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-modal__header-inner"
+            >
+              <h2
+                class="rcx-box rcx-box--full rcx-modal__title rcx-css-trljwa rcx-css-lma364"
+                id="_r_0_-title"
+              >
+                FileUpload
+              </h2>
+              <button
+                aria-label="Close"
+                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-trljwa rcx-css-lma364"
+                tabindex="-1"
+                type="button"
+              >
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+                >
+                  
+                </i>
+              </button>
+            </div>
+          </header>
+          <div
+            class="rcx-box rcx-box--full rcx-modal__content rcx-css-1vw7itl"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-modal__content-wrapper rcx-css-56vo9k"
+            >
+              <div
+                class="rcx-box rcx-box--full rcx-css-t4oqeh"
+              >
+                <div
+                  class="rcx-box rcx-box--full rcx-css-cifyzt"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-file rcx-icon rcx-css-1c958sc"
+                  >
+                    ⦕
+                  </i>
+                  test.txt - 50 Bytes
+                </div>
+              </div>
+              <fieldset
+                class="rcx-box rcx-box--full rcx-field-group"
+                role="group"
+              >
+                <div
+                  class="rcx-box rcx-box--full rcx-field rcx-field-group__item"
+                >
+                  <label
+                    class="rcx-box rcx-box--full rcx-field__label rcx-label"
+                    for="react-aria-_r_1_-label"
+                  >
+                    Upload_file_name
+                  </label>
+                  <span
+                    class="rcx-box rcx-box--full rcx-field__row"
+                  >
+                    <input
+                      aria-describedby=""
+                      aria-invalid="false"
+                      aria-required="true"
+                      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+                      id="react-aria-_r_1_-label"
+                      name="name"
+                      size="1"
+                      type="text"
+                      value="test.txt"
+                    />
+                  </span>
+                </div>
+              </fieldset>
+            </div>
+          </div>
+          <div
+            class="rcx-box rcx-box--full rcx-modal__footer rcx-css-17mu816"
+          >
+            <div
+              class="rcx-button-group rcx-button-group--align-end"
+              role="group"
+            >
+              <button
+                class="rcx-box rcx-box--full rcx-button--secondary rcx-button"
+                type="button"
+              >
+                <span
+                  class="rcx-button--content"
+                >
+                  Cancel
+                </span>
+              </button>
+              <button
+                class="rcx-box rcx-box--full rcx-button--primary rcx-button"
+                disabled=""
+                type="submit"
+              >
+                <span
+                  class="rcx-button--content"
+                >
+                  Update
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </form>
+    </dialog>
+  </div>
+</body>
+`;

apps/meteor/client/views/room/modals/FileUploadModal/index.ts

@@ -0,0 +1 @@
+export { default } from './FileUploadModal';

apps/meteor/client/views/room/modals/ForwardMessageModal/ForwardMessageModal.tsx

@@ -0,0 +1,141 @@
+import type { IMessage, MessageQuoteAttachment } from '@rocket.chat/core-typings';
+import {
+	Modal,
+	Field,
+	FieldGroup,
+	FieldLabel,
+	FieldRow,
+	FieldHint,
+	ButtonGroup,
+	Button,
+	ModalHeader,
+	ModalTitle,
+	ModalClose,
+	ModalContent,
+	ModalFooter,
+} from '@rocket.chat/fuselage';
+import { useClipboard } from '@rocket.chat/fuselage-hooks';
+import { useUserDisplayName } from '@rocket.chat/ui-client';
+import { useTranslation, useEndpoint, useToastMessageDispatch, useUserAvatarPath } from '@rocket.chat/ui-contexts';
+import { useMutation } from '@tanstack/react-query';
+import { memo, useId } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+
+import UserAndRoomAutoCompleteMultiple from '../../../../components/UserAndRoomAutoCompleteMultiple';
+import { QuoteAttachment } from '../../../../components/message/content/attachments/QuoteAttachment';
+import { prependReplies } from '../../../../lib/utils/prependReplies';
+
+type ForwardMessageProps = {
+	onClose: () => void;
+	permalink: string;
+	message: IMessage;
+};
+
+const ForwardMessageModal = ({ onClose, permalink, message }: ForwardMessageProps) => {
+	const t = useTranslation();
+	const getUserAvatarPath = useUserAvatarPath();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const { copy, hasCopied } = useClipboard(permalink);
+	const usersAndRoomsField = useId();
+
+	const { control, watch } = useForm({
+		defaultValues: {
+			rooms: [],
+		},
+	});
+
+	const rooms = watch('rooms');
+	const sendMessage = useEndpoint('POST', '/v1/chat.postMessage');
+
+	const sendMessageMutation = useMutation({
+		mutationFn: async () => {
+			const optionalMessage = '';
+			const curMsg = await prependReplies(optionalMessage, [message]);
+			const sendPayload = {
+				roomId: rooms,
+				text: curMsg,
+			};
+
+			return sendMessage(sendPayload);
+		},
+		onSuccess: () => {
+			dispatchToastMessage({ type: 'success', message: t('Message_has_been_forwarded') });
+		},
+		onError: (error: any) => {
+			dispatchToastMessage({ type: 'error', message: error });
+		},
+		onSettled: () => {
+			onClose();
+		},
+	});
+
+	const avatarUrl = getUserAvatarPath(message.u.username);
+
+	const displayName = useUserDisplayName(message.u);
+
+	const attachment = {
+		author_name: String(displayName),
+		author_link: '',
+		author_icon: avatarUrl,
+		message_link: '',
+		text: message.msg,
+		attachments: message.attachments as MessageQuoteAttachment[],
+		md: message.md,
+	};
+
+	const handleCopy = (): void => {
+		if (!hasCopied) {
+			copy();
+		}
+	};
+
+	return (
+		<Modal>
+			<ModalHeader>
+				<ModalTitle>{t('Forward_message')}</ModalTitle>
+				<ModalClose onClick={onClose} title={t('Close')} />
+			</ModalHeader>
+			<ModalContent>
+				<FieldGroup>
+					<Field>
+						<FieldLabel htmlFor={usersAndRoomsField}>{t('Person_Or_Channel')}</FieldLabel>
+						<FieldRow>
+							<Controller
+								name='rooms'
+								control={control}
+								render={({ field: { name, value, onChange } }) => (
+									<UserAndRoomAutoCompleteMultiple
+										id={usersAndRoomsField}
+										aria-describedby={`${usersAndRoomsField}-hint`}
+										name={name}
+										value={value}
+										limit={25}
+										onChange={onChange}
+									/>
+								)}
+							/>
+						</FieldRow>
+						{!rooms.length && (
+							<FieldHint id={`${usersAndRoomsField}-hint`}>{t('Select_atleast_one_channel_to_forward_the_messsage_to')}</FieldHint>
+						)}
+					</Field>
+					<Field>
+						<QuoteAttachment attachment={attachment} />
+					</Field>
+				</FieldGroup>
+			</ModalContent>
+			<ModalFooter>
+				<ButtonGroup>
+					<Button onClick={handleCopy} disabled={hasCopied}>
+						{hasCopied ? t('Copied') : t('Copy_Link')}
+					</Button>
+					<Button disabled={!rooms.length} loading={sendMessageMutation.isPending} onClick={() => sendMessageMutation.mutate()} primary>
+						{t('Forward')}
+					</Button>
+				</ButtonGroup>
+			</ModalFooter>
+		</Modal>
+	);
+};
+
+export default memo(ForwardMessageModal);

apps/meteor/client/views/room/modals/ForwardMessageModal/index.ts

@@ -0,0 +1 @@
+export { default } from './ForwardMessageModal';

apps/meteor/client/views/room/modals/PinMessageModal/PinMessageModal.tsx

@@ -0,0 +1,46 @@
+import type { MessageQuoteAttachment, IMessage } from '@rocket.chat/core-typings';
+import { Box } from '@rocket.chat/fuselage';
+import { useUserDisplayName, GenericModal } from '@rocket.chat/ui-client';
+import { useTranslation, useUserAvatarPath } from '@rocket.chat/ui-contexts';
+import type { ComponentProps } from 'react';
+
+import { QuoteAttachment } from '../../../../components/message/content/attachments/QuoteAttachment';
+import AttachmentProvider from '../../../../providers/AttachmentProvider';
+
+export type PinMessageModalProps = { message: IMessage } & ComponentProps<typeof GenericModal>;
+
+const PinMessageModal = ({ message, ...props }: PinMessageModalProps) => {
+	const t = useTranslation();
+	const getUserAvatarPath = useUserAvatarPath();
+	const displayName = useUserDisplayName(message.u);
+	const avatarUrl = getUserAvatarPath(message.u.username);
+
+	const attachment = {
+		author_name: String(displayName),
+		author_link: '',
+		author_icon: avatarUrl,
+		message_link: '',
+		text: message.msg,
+		attachments: message.attachments as MessageQuoteAttachment[],
+		md: message.md,
+	};
+
+	return (
+		<GenericModal icon='pin' title={t('Pin_Message')} variant='warning' confirmText={t('Yes_pin_message')} {...props}>
+			<Box marginBlockEnd={16} is='p'>
+				{t('Are_you_sure_you_want_to_pin_this_message')}
+			</Box>
+			<AttachmentProvider>
+				<QuoteAttachment attachment={attachment} />
+			</AttachmentProvider>
+			<Box is='p' fontScale='c1' marginBlockStart={16}>
+				{t('Pinned_messages_are_visible_to_everyone')}
+			</Box>
+			<Box is='p' fontScale='c1'>
+				{t('Starred_messages_are_only_visible_to_you')}
+			</Box>
+		</GenericModal>
+	);
+};
+
+export default PinMessageModal;

apps/meteor/client/views/room/modals/PinMessageModal/index.ts

@@ -0,0 +1 @@
+export { default } from './PinMessageModal';

apps/meteor/client/views/room/modals/ReactionListModal/ReactionListModal.tsx

@@ -0,0 +1,22 @@
+import type { IMessage } from '@rocket.chat/core-typings';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+import Reactions from './Reactions';
+
+export type ReactionListModalProps = {
+	reactions: Required<IMessage>['reactions'];
+	onClose: () => void;
+};
+
+const ReactionListModal = ({ reactions, onClose }: ReactionListModalProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<GenericModal variant='info' title={t('Users_reacted')} onClose={onClose} onConfirm={onClose} confirmText={t('Close')}>
+			<Reactions reactions={reactions} />
+		</GenericModal>
+	);
+};
+
+export default ReactionListModal;

apps/meteor/client/views/room/modals/ReactionListModal/ReactionUserTag.tsx

@@ -0,0 +1,11 @@
+import { Box, Tag } from '@rocket.chat/fuselage';
+
+export type ReactionUserTagProps = { displayName: string };
+
+const ReactionUserTag = ({ displayName }: ReactionUserTagProps) => (
+	<Box marginInlineEnd={4} marginBlockEnd={4}>
+		<Tag variant='primary'>{displayName}</Tag>
+	</Box>
+);
+
+export default ReactionUserTag;

apps/meteor/client/views/room/modals/ReactionListModal/Reactions.tsx

@@ -0,0 +1,29 @@
+import type { IMessage } from '@rocket.chat/core-typings';
+import { Box } from '@rocket.chat/fuselage';
+import { useSetting } from '@rocket.chat/ui-contexts';
+
+import ReactionUserTag from './ReactionUserTag';
+import Emoji from '../../../../components/Emoji';
+
+export type ReactionsProps = { reactions: Required<IMessage>['reactions'] };
+
+const Reactions = ({ reactions }: ReactionsProps) => {
+	const useRealName = useSetting('UI_Use_Real_Name');
+
+	return (
+		<Box display='flex' flexDirection='column'>
+			{Object.entries(reactions).map(([reaction, { names = [], usernames }]) => (
+				<Box key={reaction} display='flex' alignItems='center' flexDirection='row' overflowX='hidden' marginBlock={8}>
+					<Emoji emojiHandle={reaction} />
+					<Box display='flex' flexWrap='wrap' paddingBlock={4} marginInlineStart={4}>
+						{usernames.map((username, i: number) => (
+							<ReactionUserTag key={username} displayName={useRealName ? names[i] || username : username} />
+						))}
+					</Box>
+				</Box>
+			))}
+		</Box>
+	);
+};
+
+export default Reactions;

apps/meteor/client/views/room/modals/ReactionListModal/index.ts

@@ -0,0 +1 @@
+export { default } from './ReactionListModal';

apps/meteor/client/views/room/modals/ReadReceiptsModal/ReadReceiptRow.tsx

@@ -0,0 +1,27 @@
+import type { IReadReceiptWithUser } from '@rocket.chat/core-typings';
+import { Box } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useUserDisplayName } from '@rocket.chat/ui-client';
+
+import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';
+
+const ReadReceiptRow = ({ user, ts }: IReadReceiptWithUser) => {
+	const displayName = useUserDisplayName(user || {});
+	const formatDateAndTime = useFormatDateAndTime({ withSeconds: true });
+
+	return (
+		<Box role='listitem' display='flex' flexDirection='row' justifyContent='space-between' alignItems='center' marginBlockEnd={8}>
+			<Box display='flex' flexDirection='row' alignItems='center'>
+				<UserAvatar username={user?.username || ''} size='x24' />
+				<Box is='span' marginInlineStart={8}>
+					{displayName}
+				</Box>
+			</Box>
+			<Box is='span' fontScale='c1' color='hint'>
+				{formatDateAndTime(ts)}
+			</Box>
+		</Box>
+	);
+};
+
+export default ReadReceiptRow;

apps/meteor/client/views/room/modals/ReadReceiptsModal/ReadReceiptsModal.spec.tsx

@@ -0,0 +1,20 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { composeStories } from '@storybook/react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import * as stories from './ReadReceiptsModal.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+	const { baseElement } = render(<Story />, { wrapper: mockAppRoot().build() });
+	expect(baseElement).toMatchSnapshot();
+});
+
+test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
+	const { container } = render(<Story />, { wrapper: mockAppRoot().build() });
+
+	const results = await axe(container);
+	expect(results).toHaveNoViolations();
+});

apps/meteor/client/views/room/modals/ReadReceiptsModal/ReadReceiptsModal.stories.tsx

@@ -0,0 +1,79 @@
+import type { IReadReceiptWithUser } from '@rocket.chat/core-typings';
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from 'storybook/actions';
+
+import ReadReceiptsModal from './ReadReceiptsModal';
+
+const readReceipts: IReadReceiptWithUser[] = [
+	{
+		_id: 'read-receipt-1',
+		messageId: 'message-id',
+		roomId: 'room-id',
+		userId: 'user-1',
+		ts: new Date('2024-01-01T10:00:00.000Z'),
+		_updatedAt: new Date('2024-01-01T10:00:00.000Z'),
+		user: { _id: 'user-1', name: 'John Doe', username: 'john.doe' },
+	},
+	{
+		_id: 'read-receipt-2',
+		messageId: 'message-id',
+		roomId: 'room-id',
+		userId: 'user-2',
+		ts: new Date('2024-01-01T10:05:23.000Z'),
+		_updatedAt: new Date('2024-01-01T10:05:23.000Z'),
+		user: { _id: 'user-2', name: 'Jane Smith', username: 'jane.smith' },
+	},
+	{
+		_id: 'read-receipt-3',
+		messageId: 'message-id',
+		roomId: 'room-id',
+		userId: 'user-3',
+		ts: new Date('2024-01-01T11:30:45.000Z'),
+		_updatedAt: new Date('2024-01-01T11:30:45.000Z'),
+		user: { _id: 'user-3', name: 'Alice Johnson', username: 'alice.johnson' },
+	},
+];
+
+export default {
+	component: ReadReceiptsModal,
+	parameters: {
+		layout: 'fullscreen',
+		actions: { argTypesRegex: '^on.*' },
+	},
+	decorators: [
+		mockAppRoot()
+			.withTranslations('en', 'core', {
+				Read_by: 'Read by',
+				No_results_found: 'No results found',
+			})
+			.buildStoryDecorator(),
+	],
+	args: {
+		onClose: action('onClose'),
+	},
+} satisfies Meta<typeof ReadReceiptsModal>;
+
+export const Default: StoryObj<typeof ReadReceiptsModal> = {
+	decorators: [
+		mockAppRoot()
+			.withMethod('getReadReceipts', () => readReceipts)
+			.buildStoryDecorator(),
+	],
+};
+
+export const Loading: StoryObj<typeof ReadReceiptsModal> = {
+	decorators: [
+		mockAppRoot()
+			.withMethod('getReadReceipts', () => new Promise<IReadReceiptWithUser[]>(() => undefined) as unknown as IReadReceiptWithUser[])
+			.buildStoryDecorator(),
+	],
+};
+
+export const Empty: StoryObj<typeof ReadReceiptsModal> = {
+	decorators: [
+		mockAppRoot()
+			.withMethod('getReadReceipts', () => [])
+			.buildStoryDecorator(),
+	],
+};

apps/meteor/client/views/room/modals/ReadReceiptsModal/ReadReceiptsModal.tsx

@@ -0,0 +1,69 @@
+import type { IMessage, IRoom } from '@rocket.chat/core-typings';
+import { GenericModal, GenericModalSkeleton } from '@rocket.chat/ui-client';
+import { useEndpoint, useStream, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import type { ReactElement } from 'react';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ReadReceiptRow from './ReadReceiptRow';
+import { mapReadReceiptFromApi } from '../../../../lib/utils/mapReadReceiptFromApi';
+
+type ReadReceiptsModalProps = {
+	messageId: IMessage['_id'];
+	rid?: IRoom['_id'];
+	onClose: () => void;
+};
+
+const readReceiptsQueryKey = (messageId: IMessage['_id']) => ['read-receipts', messageId] as const;
+
+const ReadReceiptsModal = ({ messageId, rid, onClose }: ReadReceiptsModalProps): ReactElement => {
+	const { t } = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const queryClient = useQueryClient();
+	const subscribeToNotifyRoom = useStream('notify-room');
+
+	const getReadReceipts = useEndpoint('GET', '/v1/chat.getMessageReadReceipts');
+
+	const readReceiptsResult = useQuery({
+		queryKey: readReceiptsQueryKey(messageId),
+		queryFn: async () => (await getReadReceipts({ messageId })).receipts.map(mapReadReceiptFromApi),
+	});
+
+	useEffect(() => {
+		if (!rid) {
+			return;
+		}
+		return subscribeToNotifyRoom(`${rid}/messagesRead`, () => {
+			queryClient.invalidateQueries({ queryKey: readReceiptsQueryKey(messageId) });
+		});
+	}, [rid, messageId, queryClient, subscribeToNotifyRoom]);
+
+	useEffect(() => {
+		if (readReceiptsResult.isError) {
+			dispatchToastMessage({ type: 'error', message: readReceiptsResult.error });
+			onClose();
+		}
+	}, [dispatchToastMessage, t, onClose, readReceiptsResult.isError, readReceiptsResult.error]);
+
+	if (readReceiptsResult.isLoading || readReceiptsResult.isError) {
+		return <GenericModalSkeleton />;
+	}
+
+	const readReceipts = readReceiptsResult?.data;
+
+	return (
+		<GenericModal title={t('Read_by')} onConfirm={onClose} onClose={onClose}>
+			{readReceipts && readReceipts.length < 1 && t('No_results_found')}
+			{readReceipts && readReceipts.length > 0 && (
+				<div role='list'>
+					{readReceipts.map((receipt) => (
+						<ReadReceiptRow key={receipt._id} {...receipt} />
+					))}
+				</div>
+			)}
+		</GenericModal>
+	);
+};
+
+export default ReadReceiptsModal;

apps/meteor/client/views/room/modals/ReadReceiptsModal/__snapshots__/ReadReceiptsModal.spec.tsx.snap

@@ -0,0 +1,172 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`renders Default without crashing 1`] = `
+<body>
+  <div>
+    <dialog
+      aria-labelledby="_r_0_-title"
+      aria-modal="true"
+      class="rcx-box rcx-box--full rcx-modal"
+      open=""
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-modal__inner rcx-css-qtwduz"
+      >
+        <header
+          class="rcx-box rcx-box--full rcx-modal__header"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__header-inner"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-modal__header-text rcx-css-trljwa rcx-css-lma364"
+            >
+              <h2
+                class="rcx-box rcx-box--full rcx-modal__title"
+                id="_r_0_-title"
+              >
+                <span
+                  class="rcx-skeleton rcx-skeleton--text rcx-css-n9jnxq"
+                />
+              </h2>
+            </div>
+          </div>
+        </header>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__content rcx-css-1vw7itl"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__content-wrapper rcx-css-r1bpeb"
+          >
+            <span
+              class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+            />
+          </div>
+        </div>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__footer rcx-css-17mu816"
+        >
+          <div
+            class="rcx-button-group rcx-button-group--align-end"
+            role="group"
+          />
+        </div>
+      </div>
+    </dialog>
+  </div>
+</body>
+`;
+
+exports[`renders Empty without crashing 1`] = `
+<body>
+  <div>
+    <dialog
+      aria-labelledby="_r_1_-title"
+      aria-modal="true"
+      class="rcx-box rcx-box--full rcx-modal"
+      open=""
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-modal__inner rcx-css-qtwduz"
+      >
+        <header
+          class="rcx-box rcx-box--full rcx-modal__header"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__header-inner"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-modal__header-text rcx-css-trljwa rcx-css-lma364"
+            >
+              <h2
+                class="rcx-box rcx-box--full rcx-modal__title"
+                id="_r_1_-title"
+              >
+                <span
+                  class="rcx-skeleton rcx-skeleton--text rcx-css-n9jnxq"
+                />
+              </h2>
+            </div>
+          </div>
+        </header>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__content rcx-css-1vw7itl"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__content-wrapper rcx-css-r1bpeb"
+          >
+            <span
+              class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+            />
+          </div>
+        </div>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__footer rcx-css-17mu816"
+        >
+          <div
+            class="rcx-button-group rcx-button-group--align-end"
+            role="group"
+          />
+        </div>
+      </div>
+    </dialog>
+  </div>
+</body>
+`;
+
+exports[`renders Loading without crashing 1`] = `
+<body>
+  <div>
+    <dialog
+      aria-labelledby="_r_2_-title"
+      aria-modal="true"
+      class="rcx-box rcx-box--full rcx-modal"
+      open=""
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-modal__inner rcx-css-qtwduz"
+      >
+        <header
+          class="rcx-box rcx-box--full rcx-modal__header"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__header-inner"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-modal__header-text rcx-css-trljwa rcx-css-lma364"
+            >
+              <h2
+                class="rcx-box rcx-box--full rcx-modal__title"
+                id="_r_2_-title"
+              >
+                <span
+                  class="rcx-skeleton rcx-skeleton--text rcx-css-n9jnxq"
+                />
+              </h2>
+            </div>
+          </div>
+        </header>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__content rcx-css-1vw7itl"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__content-wrapper rcx-css-r1bpeb"
+          >
+            <span
+              class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+            />
+          </div>
+        </div>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__footer rcx-css-17mu816"
+        >
+          <div
+            class="rcx-button-group rcx-button-group--align-end"
+            role="group"
+          />
+        </div>
+      </div>
+    </dialog>
+  </div>
+</body>
+`;

apps/meteor/client/views/room/modals/ReadReceiptsModal/index.ts

@@ -0,0 +1 @@
+export { default } from './ReadReceiptsModal';

apps/meteor/client/views/room/modals/ReportMessageModal/ReportMessageModal.tsx

@@ -0,0 +1,101 @@
+import type { IMessage } from '@rocket.chat/core-typings';
+import { css } from '@rocket.chat/css-in-js';
+import { TextAreaInput, FieldGroup, Field, FieldRow, FieldError, FieldLabel, FieldDescription, Box } from '@rocket.chat/fuselage';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useId } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import MarkdownText from '../../../../components/MarkdownText';
+import MessageContentBody from '../../../../components/message/MessageContentBody';
+import { getMarkdownParserLimit } from '../../../../lib/getMarkdownParserLimit';
+import { toPlainTextRoot } from '../../../../lib/toPlainTextRoot';
+
+type ReportMessageModalsFields = {
+	description: string;
+};
+
+export type ReportMessageModalProps = {
+	onClose: () => void;
+	message: IMessage;
+};
+
+const wordBreak = css`
+	word-break: break-word;
+`;
+
+const ReportMessageModal = ({ message, onClose }: ReportMessageModalProps) => {
+	const { t } = useTranslation();
+	const reasonForReportId = useId();
+	const {
+		control,
+		formState: { errors },
+		handleSubmit,
+	} = useForm<ReportMessageModalsFields>({
+		defaultValues: {
+			description: '',
+		},
+	});
+	const dispatchToastMessage = useToastMessageDispatch();
+	const reportMessage = useEndpoint('POST', '/v1/chat.reportMessage');
+
+	const { _id } = message;
+
+	const md = message.md ?? (message.msg.length > getMarkdownParserLimit() ? toPlainTextRoot(message.msg) : undefined);
+
+	const handleReportMessage = async ({ description }: ReportMessageModalsFields): Promise<void> => {
+		try {
+			await reportMessage({ messageId: _id, description });
+			dispatchToastMessage({ type: 'success', message: t('Report_has_been_sent') });
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		} finally {
+			onClose();
+		}
+	};
+
+	return (
+		<GenericModal
+			wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(handleReportMessage)} {...props} />}
+			variant='danger'
+			title={t('Report_message')}
+			onCancel={onClose}
+			confirmText={t('Report')}
+		>
+			<Box marginBlockEnd={24} className={wordBreak}>
+				{md ? <MessageContentBody md={md} /> : <MarkdownText variant='inline' parseEmoji content={message.msg} />}
+			</Box>
+			<FieldGroup>
+				<Field>
+					<FieldLabel htmlFor={reasonForReportId}>{t('Report_reason')}</FieldLabel>
+					<FieldDescription id={`${reasonForReportId}-description`}>{t('Let_moderators_know_what_the_issue_is')}</FieldDescription>
+					<FieldRow>
+						<Controller
+							rules={{ required: t('Required_field', { field: t('Report_reason') }) }}
+							name='description'
+							control={control}
+							render={({ field }) => (
+								<TextAreaInput
+									{...field}
+									id={reasonForReportId}
+									rows={3}
+									aria-required='true'
+									aria-invalid={!!errors.description}
+									aria-describedby={`${reasonForReportId}-description ${reasonForReportId}-error`}
+								/>
+							)}
+						/>
+					</FieldRow>
+					{errors.description && (
+						<FieldError role='alert' id={`${reasonForReportId}-error`}>
+							{errors.description.message}
+						</FieldError>
+					)}
+				</Field>
+			</FieldGroup>
+		</GenericModal>
+	);
+};
+
+export default ReportMessageModal;

apps/meteor/client/views/room/modals/ReportMessageModal/index.ts

@@ -0,0 +1 @@
+export { default } from './ReportMessageModal';