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

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';