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

apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.spec.tsx

@@ -0,0 +1,87 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import * as stories from './ThreadMessagePreviewBody.stories';
+
+const { Default } = composeStories(stories);
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+jest.mock('../../../../lib/utils/fireGlobalEvent', () => ({
+	fireGlobalEvent: jest.fn(),
+}));
+
+jest.mock('../../../../views/room/hooks/useGoToRoom', () => ({
+	useGoToRoom: jest.fn(),
+}));
+
+test.each(testCases)(`renders ThreadMessagePreviewBody without crashing`, async (_storyname, Story) => {
+	const view = render(<Story />, { wrapper: mockAppRoot().build() });
+
+	expect(view.baseElement).toMatchSnapshot();
+});
+
+test.each(testCases)('ThreadMessagePreviewBody should have no a11y violations', async (_storyname, Story) => {
+	const { container } = render(<Story />, { wrapper: mockAppRoot().build() });
+
+	const results = await axe(container);
+
+	expect(results).toHaveNoViolations();
+});
+
+it('should not show an empty thread preview', async () => {
+	const { container } = render(
+		<Default
+			message={{
+				_id: 'message-id',
+				ts: new Date(),
+				msg: 'http://localhost:3000/group/ds?msg=ZoX9pDowqNb4BiWxf',
+				md: [
+					{
+						type: 'PARAGRAPH',
+						value: [
+							{
+								type: 'PLAIN_TEXT',
+								value: 'message attachment text quote',
+							},
+						],
+					},
+				],
+				attachments: [
+					{
+						text: 'message attachment text quote',
+						md: [
+							{
+								type: 'PARAGRAPH',
+								value: [
+									{
+										type: 'PLAIN_TEXT',
+										value: 'message attachment text quote',
+									},
+								],
+							},
+						],
+						message_link: 'http://localhost:3000/group/ds?msg=ZoX9pDowqNb4BiWxf',
+						author_name: 'b',
+						author_icon: '/avatar/b',
+						attachments: [],
+						ts: new Date('2025-07-24T18:05:45.339Z'),
+					},
+				],
+				u: {
+					_id: 'user-id',
+					username: 'username',
+				},
+				rid: 'room-id',
+				_updatedAt: new Date(),
+			}}
+		/>,
+		{ wrapper: mockAppRoot().build() },
+	);
+	expect(container).toMatchSnapshot();
+	const text = screen.getByText('http://localhost:3000/group/ds?msg=ZoX9pDowqNb4BiWxf');
+
+	expect(text).toBeInTheDocument;
+});

apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.stories.tsx

@@ -0,0 +1,28 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import type { StoryObj, Meta } from '@storybook/react';
+import type { ComponentProps } from 'react';
+
+import ThreadMessagePreviewBody from './ThreadMessagePreviewBody';
+
+export default {
+	component: ThreadMessagePreviewBody,
+	parameters: {
+		layout: 'fullscreen',
+	},
+	decorators: [mockAppRoot().withSetting('UI_Use_Real_Name', true).withJohnDoe().buildStoryDecorator()],
+	args: {
+		message: {
+			_id: 'message-id',
+			ts: new Date(),
+			msg: 'This is a message',
+			u: {
+				_id: 'user-id',
+				username: 'username',
+			},
+			rid: 'room-id',
+			_updatedAt: new Date(),
+		},
+	},
+} satisfies Meta<typeof ThreadMessagePreviewBody>;
+
+export const Default: StoryObj<ComponentProps<typeof ThreadMessagePreviewBody>> = {};

apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.tsx

@@ -0,0 +1,60 @@
+import type { IMessage } from '@rocket.chat/core-typings';
+import { isQuoteAttachment, isE2EEMessage } from '@rocket.chat/core-typings';
+import { PreviewMarkup } from '@rocket.chat/gazzodown';
+import type { Root } from '@rocket.chat/message-parser';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { toPlainTextRoot } from '../../../../lib/toPlainTextRoot';
+import GazzodownText from '../../../GazzodownText';
+
+export type ThreadMessagePreviewBodyProps = {
+	message: IMessage;
+};
+
+function getMdTokens(message: IMessage): Root | undefined {
+	if (message.md) {
+		return [...message.md];
+	}
+
+	if (message.msg) {
+		return toPlainTextRoot(message.msg);
+	}
+}
+
+const ThreadMessagePreviewBody = ({ message }: ThreadMessagePreviewBodyProps) => {
+	const { t } = useTranslation();
+	const isEncryptedMessage = isE2EEMessage(message);
+
+	const getMessage = () => {
+		const mdTokens = getMdTokens(message);
+		if (
+			message.attachments &&
+			Array.isArray(message.attachments) &&
+			message.attachments.length > 0 &&
+			isQuoteAttachment(message.attachments[0])
+		) {
+			mdTokens?.shift();
+		}
+		if (message.attachments && message.msg === '') {
+			return <>{t('Message_with_attachment')}</>;
+		}
+		if (!isEncryptedMessage || message.e2e === 'done') {
+			return mdTokens?.length ? (
+				<GazzodownText>
+					<PreviewMarkup tokens={mdTokens} />
+				</GazzodownText>
+			) : (
+				<>{message.msg}</>
+			);
+		}
+		if (isEncryptedMessage && message.e2e === 'pending') {
+			return <>{t('E2E_message_encrypted_placeholder')}</>;
+		}
+		return <>{message.msg}</>;
+	};
+
+	return getMessage();
+};
+
+export default memo(ThreadMessagePreviewBody);

apps/meteor/client/components/message/variants/threadPreview/__snapshots__/ThreadMessagePreviewBody.spec.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`renders ThreadMessagePreviewBody without crashing 1`] = `
+<body>
+  <div>
+    This is a message
+  </div>
+</body>
+`;
+
+exports[`should not show an empty thread preview 1`] = `
+<div>
+  http://localhost:3000/group/ds?msg=ZoX9pDowqNb4BiWxf
+</div>
+`;