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

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