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

apps/meteor/client/views/admin/moderation/helpers/ContextMessage.tsx

@@ -0,0 +1,124 @@
+import type { IMessage, MessageReport, MessageAttachment } from '@rocket.chat/core-typings';
+import { isE2EEMessage, isQuoteAttachment } from '@rocket.chat/core-typings';
+import {
+	Message,
+	MessageDivider,
+	MessageLeftContainer,
+	MessageContainer,
+	MessageHeader,
+	MessageTimestamp,
+	MessageRole,
+	MessageBody,
+	MessageName,
+	MessageToolbar,
+	MessageToolbarItem,
+	MessageToolbarWrapper,
+	MessageUsername,
+} from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useUserDisplayName } from '@rocket.chat/ui-client';
+import { useSetting } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import ReportReasonCollapsible from './ReportReasonCollapsible';
+import MessageContentBody from '../../../../components/message/MessageContentBody';
+import Attachments from '../../../../components/message/content/Attachments';
+import UiKitMessageBlock from '../../../../components/message/uikit/UiKitMessageBlock';
+import { useFormatDate } from '../../../../hooks/useFormatDate';
+import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';
+import { useFormatTime } from '../../../../hooks/useFormatTime';
+import { toPlainTextRoot } from '../../../../lib/toPlainTextRoot';
+import MessageReportInfo from '../MessageReportInfo';
+import useDeleteMessage from '../hooks/useDeleteMessage';
+import { useDismissMessageAction } from '../hooks/useDismissMessageAction';
+
+const ContextMessage = ({
+	message,
+	room,
+	deleted,
+	onRedirect,
+	onChange,
+}: {
+	message: any;
+	room: MessageReport['room'];
+	deleted: boolean;
+	onRedirect: (id: IMessage['_id']) => void;
+	onChange: () => void;
+}) => {
+	const { t } = useTranslation();
+
+	const isEncryptedMessage = isE2EEMessage(message);
+
+	const deleteMessage = useDeleteMessage(message._id, message.rid, onChange);
+	const dismissMsgReport = useDismissMessageAction(message._id);
+
+	const formatDateAndTime = useFormatDateAndTime();
+	const formatTime = useFormatTime();
+	const formatDate = useFormatDate();
+	const useRealName = useSetting('UI_Use_Real_Name', false);
+
+	const name = message.u.name || '';
+	const username = message.u.username || '';
+
+	const displayName = useUserDisplayName({ name, username });
+
+	const quotes = message?.attachments?.filter(isQuoteAttachment) || [];
+
+	const attachments = message?.attachments?.filter((attachment: MessageAttachment) => !isQuoteAttachment(attachment)) || [];
+
+	return (
+		<>
+			<MessageDivider>{formatDate(message._updatedAt)}</MessageDivider>
+			<Message>
+				<MessageLeftContainer>
+					<UserAvatar username={message.u.username} />
+				</MessageLeftContainer>
+				<MessageContainer>
+					<MessageHeader>
+						<MessageName>{displayName}</MessageName>
+						<>{useRealName && <MessageUsername>&nbsp;{`@${message.u.username}`}</MessageUsername>}</>
+						<MessageTimestamp title={formatDateAndTime(message._updatedAt)}>
+							{formatTime(message._updatedAt !== message.ts ? message._updatedAt : message.ts)}
+							{message._updatedAt !== message.ts && ` (${t('edited')})`}
+						</MessageTimestamp>
+						<MessageRole>{room.name || room.fname || 'DM'}</MessageRole>
+					</MessageHeader>
+					<MessageBody>
+						{!!quotes?.length && <Attachments attachments={quotes} />}
+						{!message.blocks?.length && !!message.md?.length ? (
+							<>
+								{(!isEncryptedMessage || message.e2e === 'done') && (
+									<MessageContentBody md={message.md} mentions={message.mentions} channels={message.channels} />
+								)}
+								{message.e2e === 'pending' && t('E2E_message_encrypted_placeholder')}
+							</>
+						) : (
+							!!message.msg && (
+								<MessageContentBody md={toPlainTextRoot(message.msg)} mentions={message.mentions} channels={message.channels} />
+							)
+						)}
+
+						{!!attachments && <Attachments id={message.files?.[0]?._id} attachments={attachments} />}
+						{message.blocks && <UiKitMessageBlock rid={message.rid} mid={message._id} blocks={message.blocks} />}
+					</MessageBody>
+					<ReportReasonCollapsible>
+						<MessageReportInfo msgId={message._id} />
+					</ReportReasonCollapsible>
+				</MessageContainer>
+				<MessageToolbarWrapper>
+					<MessageToolbar>
+						<MessageToolbarItem
+							icon='checkmark-circled'
+							title={t('Moderation_Dismiss_reports')}
+							onClick={() => dismissMsgReport.action()}
+						/>
+						<MessageToolbarItem icon='arrow-forward' title={t('Moderation_Go_to_message')} onClick={() => onRedirect(message._id)} />
+						<MessageToolbarItem disabled={deleted} icon='trash' title={t('Moderation_Delete_message')} onClick={() => deleteMessage()} />
+					</MessageToolbar>
+				</MessageToolbarWrapper>
+			</Message>
+		</>
+	);
+};
+
+export default ContextMessage;

apps/meteor/client/views/admin/moderation/helpers/DateRangePicker.tsx

@@ -0,0 +1,90 @@
+import { Select, Box, type SelectOption } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { subDays, subMonths, startOfMonth, endOfMonth, format } from 'date-fns';
+import type { Key } from 'react';
+import { useMemo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export type DateRangePickerProps = {
+	onChange(range: { start: string; end: string }): void;
+	defaultSelectedKey?: 'today' | 'yesterday' | 'thisWeek' | 'previousWeek' | 'thisMonth' | 'alldates';
+};
+
+const formatToDateInput = (date: Date) => format(date, 'yyyy-MM-dd');
+
+const getMonthRange = (monthsToSubtractFromToday: number) => {
+	const now = new Date();
+	const startDate = monthsToSubtractFromToday === 0 ? startOfMonth(now) : startOfMonth(subMonths(now, monthsToSubtractFromToday));
+	const endDate = monthsToSubtractFromToday === 0 ? now : endOfMonth(subMonths(now, monthsToSubtractFromToday));
+	return {
+		start: formatToDateInput(startDate),
+		end: formatToDateInput(endDate),
+	};
+};
+
+const getWeekRange = (daysToSubtractFromStart: number, daysToSubtractFromEnd: number) => {
+	const now = new Date();
+	return {
+		start: formatToDateInput(subDays(now, daysToSubtractFromStart)),
+		end: formatToDateInput(subDays(now, daysToSubtractFromEnd)),
+	};
+};
+
+const DateRangePicker = ({ onChange, defaultSelectedKey = 'alldates' }: DateRangePickerProps) => {
+	const { t } = useTranslation();
+
+	const handleRange = useStableCallback((range: { start: string; end: string }) => {
+		onChange(range);
+	});
+
+	const timeOptions = useMemo<SelectOption[]>(() => {
+		return [
+			['today', t('Today')],
+			['yesterday', t('Yesterday')],
+			['thisWeek', t('This_week')],
+			['previousWeek', t('Previous_week')],
+			['thisMonth', t('This_month')],
+			['alldates', t('All')],
+		].map(([value, label]) => [value, label] as SelectOption);
+	}, [t]);
+
+	const handleOptionClick = useStableCallback((action: Key) => {
+		switch (action) {
+			case 'today':
+				handleRange(getWeekRange(0, 0));
+				break;
+			case 'yesterday':
+				handleRange(getWeekRange(1, 1));
+				break;
+			case 'thisWeek':
+				handleRange(getWeekRange(7, 0));
+				break;
+			case 'previousWeek':
+				handleRange(getWeekRange(14, 7));
+				break;
+			case 'thisMonth':
+				handleRange(getMonthRange(0));
+				break;
+			case 'alldates':
+				handleRange({
+					start: '',
+					end: '',
+				});
+				break;
+			default:
+				break;
+		}
+	});
+
+	useEffect(() => {
+		handleOptionClick(defaultSelectedKey);
+	}, []);
+
+	return (
+		<Box flexGrow={0}>
+			<Select defaultSelectedKey={defaultSelectedKey} width='100%' options={timeOptions} onChange={handleOptionClick} />
+		</Box>
+	);
+};
+
+export default DateRangePicker;

apps/meteor/client/views/admin/moderation/helpers/ModerationFilter.tsx

@@ -0,0 +1,18 @@
+import DateRangePicker from './DateRangePicker';
+import FilterByText from '../../../../components/FilterByText';
+
+export type ModerationFilterProps = {
+	text: string;
+	setText: (text: string) => void;
+	setDateRange: (dateRange: { start: string; end: string }) => void;
+};
+
+const ModerationFilter = ({ text, setText, setDateRange }: ModerationFilterProps) => {
+	return (
+		<FilterByText shouldAutoFocus value={text} onChange={(event) => setText(event.target.value)}>
+			<DateRangePicker onChange={setDateRange} />
+		</FilterByText>
+	);
+};
+
+export default ModerationFilter;

apps/meteor/client/views/admin/moderation/helpers/ReportReason.tsx

@@ -0,0 +1,27 @@
+import { Box, Tag } from '@rocket.chat/fuselage';
+
+import { useFormatDate } from '../../../../hooks/useFormatDate';
+
+export type ReportReasonProps = { ind: number; uinfo: string | undefined; msg: string; ts: Date };
+
+const ReportReason = ({ ind, uinfo, msg, ts }: ReportReasonProps) => {
+	const formatDate = useFormatDate();
+	return (
+		<Box display='flex' flexDirection='column' alignItems='flex-start' marginBlock={10}>
+			<Tag variant='danger'>Report #{ind}</Tag>
+			<Box wordBreak='break-word' marginBlock={5} fontSize='p2b'>
+				{msg}
+			</Box>
+			<Box>
+				<Box is='span' fontWeight='700' color='font-info' fontSize='micro'>
+					@{uinfo || 'rocket.cat'}
+				</Box>{' '}
+				<Box is='span' fontWeight='700' color='font-annotation' fontSize='micro'>
+					{formatDate(ts)}
+				</Box>
+			</Box>
+		</Box>
+	);
+};
+
+export default ReportReason;

apps/meteor/client/views/admin/moderation/helpers/ReportReasonCollapsible.tsx

@@ -0,0 +1,26 @@
+import { Box, Button } from '@rocket.chat/fuselage';
+import { useToggle } from '@rocket.chat/fuselage-hooks';
+import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export type ReportReasonCollapsibleProps = { children: ReactNode };
+
+const ReportReasonCollapsible = ({ children }: ReportReasonCollapsibleProps) => {
+	const [isOpen, setIsOpen] = useToggle(false);
+	const { t } = useTranslation();
+
+	const toggle = () => setIsOpen((prev) => !prev);
+
+	return (
+		<>
+			<Box display='flex' flexDirection='row' justifyContent='space-between' alignItems='center'>
+				<Button small onClick={toggle} aria-expanded={isOpen} aria-controls='report-reasons'>
+					{isOpen ? t('Moderation_Hide_reports') : t('Moderation_Show_reports')}
+				</Button>
+			</Box>
+			{isOpen && children}
+		</>
+	);
+};
+
+export default ReportReasonCollapsible;

apps/meteor/client/views/admin/moderation/helpers/UserColumn.tsx

@@ -0,0 +1,42 @@
+import { Box } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import type { ComponentProps } from 'react';
+
+export type UserColumnProps = {
+	name?: string;
+	username?: string;
+	isDesktopOrLarger?: boolean;
+	isProfile?: boolean;
+	size: ComponentProps<typeof UserAvatar>['size'];
+	fontSize?: string;
+};
+
+const UserColumn = ({ name, username, fontSize, size }: UserColumnProps) => {
+	return (
+		<Box display='flex' alignItems='center'>
+			{username && (
+				<Box>
+					<UserAvatar size={size} username={username} />
+				</Box>
+			)}
+			<Box display='flex' marginInline={8} withTruncatedText>
+				<Box display='flex' flexDirection='column' alignSelf='center' withTruncatedText>
+					<Box fontScale='p2m' color='default' withTruncatedText>
+						{name && username ? (
+							<>
+								{name}{' '}
+								<Box display='inline-flex' fontWeight={300} fontSize={fontSize}>
+									(@{username})
+								</Box>
+							</>
+						) : (
+							name || username
+						)}{' '}
+					</Box>
+				</Box>
+			</Box>
+		</Box>
+	);
+};
+
+export default UserColumn;