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

apps/meteor/client/views/room/contextualBar/Discussions/components/DiscussionsListItem.stories.tsx

@@ -0,0 +1,30 @@
+import DiscussionsListItem from './DiscussionsListItem';
+
+const message = {
+	msg: 'hello world',
+	ts: new Date(0),
+	username: 'guilherme.gazzo',
+	dcount: 5,
+	dlm: new Date(0),
+	formatDate: (date: Date) => date.toISOString(),
+};
+
+const largeText = {
+	...message,
+	msg: 'Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text, Large text',
+};
+
+const noReplies = {
+	...message,
+	dcount: 0,
+};
+
+export default {
+	component: DiscussionsListItem,
+};
+
+export const Basic = () => <DiscussionsListItem {...(message as any)} />;
+
+export const LargeText = () => <DiscussionsListItem {...(largeText as any)} />;
+
+export const NoReplies = () => <DiscussionsListItem {...(noReplies as any)} />;

apps/meteor/client/views/room/contextualBar/Discussions/components/DiscussionsListItem.tsx

@@ -0,0 +1,88 @@
+import type { IDiscussionMessage } from '@rocket.chat/core-typings';
+import {
+	Box,
+	Message,
+	MessageLeftContainer,
+	MessageContainer,
+	MessageHeader,
+	MessageName,
+	MessageTimestamp,
+	MessageBody,
+	MessageBlock,
+	MessageMetrics,
+	MessageMetricsItem,
+	MessageMetricsItemLabel,
+	MessageMetricsItemIcon,
+} from '@rocket.chat/fuselage';
+import { MessageAvatar } from '@rocket.chat/ui-avatar';
+import type { ComponentProps, ReactNode } from 'react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Emoji from '../../../../../components/Emoji';
+import { clickableItem } from '../../../../../lib/clickableItem';
+
+export type DiscussionListItemProps = {
+	_id: IDiscussionMessage['_id'];
+	msg: ReactNode;
+	dcount: number;
+	dlm: Date | undefined;
+	formatDate: (date: Date) => string;
+	username: IDiscussionMessage['u']['username'];
+	name?: IDiscussionMessage['u']['name'];
+	ts: IDiscussionMessage['ts'];
+	emoji: IDiscussionMessage['emoji'];
+} & Omit<ComponentProps<typeof Box>, 'is'>;
+
+const DiscussionListItem = ({
+	_id,
+	msg,
+	username,
+	name = username,
+	ts,
+	dcount,
+	formatDate,
+	dlm,
+	className = [],
+	emoji,
+	...props
+}: DiscussionListItemProps) => {
+	const { t } = useTranslation();
+	return (
+		<Box is={Message} {...props} className={className} paddingBlockStart={16} paddingBlockEnd={8}>
+			<MessageLeftContainer>
+				<MessageAvatar emoji={emoji ? <Emoji emojiHandle={emoji} fillContainer /> : undefined} username={username} size='x36' />
+			</MessageLeftContainer>
+			<MessageContainer>
+				<MessageHeader>
+					<MessageName title={username}>{name}</MessageName>
+					<MessageTimestamp>{formatDate(ts)}</MessageTimestamp>
+				</MessageHeader>
+				<MessageBody clamp={2}>{msg}</MessageBody>
+				<MessageBlock>
+					<MessageMetrics>
+						{!dcount && (
+							<MessageMetricsItem>
+								<MessageMetricsItemLabel>{t('No_messages_yet')}</MessageMetricsItemLabel>
+							</MessageMetricsItem>
+						)}
+						{!!dcount && (
+							<MessageMetricsItem>
+								<MessageMetricsItemIcon name='discussion' />
+								<MessageMetricsItemLabel>{dcount}</MessageMetricsItemLabel>
+							</MessageMetricsItem>
+						)}
+						{!!dcount && (
+							<MessageMetricsItem>
+								<MessageMetricsItemIcon name='clock' />
+								<MessageMetricsItemLabel>{dlm ? formatDate(dlm) : undefined}</MessageMetricsItemLabel>
+							</MessageMetricsItem>
+						)}
+					</MessageMetrics>
+				</MessageBlock>
+			</MessageContainer>
+		</Box>
+	);
+};
+
+export default memo(clickableItem(DiscussionListItem));