[IMPROVE] Pinned Messages in E2E rooms

apps/meteor/app/message-pin/server/pinMessage.js

@@ -113,6 +113,7 @@ Meteor.methods({
 					author_icon: getUserAvatarURL(originalMessage.u.username),
 					ts: originalMessage.ts,
 					attachments: recursiveRemove(attachments),
+					t: originalMessage.t,
 				},
 			],
 		});

apps/meteor/app/ui-message/client/message.html

@@ -132,7 +132,7 @@
 				{{/each}}
 			{{/if}}
 			{{#if hasAttachments}}
-				{{> reactAttachments attachments=msg.attachments file=msg.file }}
+				{{> reactAttachments attachments=msg.attachments file=msg.file rid=msg.rid }}
 			{{/if}}
 
 

apps/meteor/client/components/message/Attachments/Attachments.stories.tsx

@@ -90,16 +90,16 @@ const message = {
 	attachments: [field, image],
 };
 
-export const Default: ComponentStory<typeof Attachments> = () => <Attachments attachments={message.attachments} />;
+export const Default: ComponentStory<typeof Attachments> = () => <Attachments attachments={message.attachments} rid='GENERAL' />;
 
-export const Fields: ComponentStory<typeof Attachments> = () => <Attachments attachments={[field]} />;
+export const Fields: ComponentStory<typeof Attachments> = () => <Attachments attachments={[field]} rid='GENERAL' />;
 
 export const FailingImage: ComponentStory<typeof Attachments> = () => (
-	<Attachments attachments={[{ ...image, image_url: 'invalid.url' } as FileAttachmentProps]} />
+	<Attachments attachments={[{ ...image, image_url: 'invalid.url' } as FileAttachmentProps]} rid='GENERAL' />
 );
 
-export const Image: ComponentStory<typeof Attachments> = () => <Attachments attachments={[image]} />;
+export const Image: ComponentStory<typeof Attachments> = () => <Attachments attachments={[image]} rid='GENERAL' />;
 
-export const Video: ComponentStory<typeof Attachments> = () => <Attachments attachments={[video]} file={{} as FileProp} />;
+export const Video: ComponentStory<typeof Attachments> = () => <Attachments attachments={[video]} file={{} as FileProp} rid='GENERAL' />;
 
-export const Audio: ComponentStory<typeof Attachments> = () => <Attachments attachments={[audio]} file={{} as FileProp} />;
+export const Audio: ComponentStory<typeof Attachments> = () => <Attachments attachments={[audio]} file={{} as FileProp} rid='GENERAL' />;

apps/meteor/client/components/message/Attachments/Attachments.tsx

@@ -4,13 +4,17 @@ import React, { FC } from 'react';
 import { useBlockRendered } from '../hooks/useBlockRendered';
 import Item from './Item';
 
-const Attachments: FC<{ attachments: Array<MessageAttachmentBase>; file?: FileProp }> = ({ attachments = null, file }): any => {
+const Attachments: FC<{ attachments: Array<MessageAttachmentBase>; file?: FileProp; rid: string }> = ({
+	attachments = null,
+	file,
+	rid,
+}): any => {
 	const { className, ref } = useBlockRendered<HTMLDivElement>();
 	return (
 		<>
 			<div className={className} ref={ref} />
 			{attachments?.map((attachment, index) => (
-				<Item key={index} file={file} attachment={attachment} />
+				<Item key={index} file={file} attachment={attachment} rid={rid} />
 			))}
 		</>
 	);

apps/meteor/client/components/message/Attachments/DefaultAttachment.tsx

@@ -1,6 +1,7 @@
-import { isActionAttachment, MarkdownFields, MessageAttachmentDefault } from '@rocket.chat/core-typings';
+import { IMessage, isActionAttachment, MarkdownFields, MessageAttachmentDefault } from '@rocket.chat/core-typings';
 import React, { FC, ReactNode, ComponentProps } from 'react';
 
+import { useDecryptedMessage } from '../../../hooks/useDecryptedMessage';
 import MarkdownText from '../../MarkdownText';
 import { ActionAttachment } from './ActionAttachtment';
 import AttachmentAuthor from './Attachment/AttachmentAuthor';
@@ -23,9 +24,11 @@ const applyMarkdownIfRequires = (
 	variant: ComponentProps<typeof MarkdownText>['variant'] = 'inline',
 ): ReactNode => (list?.includes(key) ? <MarkdownText parseEmoji variant={variant} content={text} /> : text);
 
-const DefaultAttachment: FC<MessageAttachmentDefault> = (attachment) => {
+const DefaultAttachment: FC<MessageAttachmentDefault & { rid: string }> = (attachment) => {
 	const [collapsed, collapse] = useCollapse(!!attachment.collapsed);
 
+	const decryptedAttachmentText = useDecryptedMessage({ ...attachment, msg: attachment.text } as IMessage);
+
 	return (
 		<AttachmentBlock
 			color={attachment.color}
@@ -68,8 +71,8 @@ const DefaultAttachment: FC<MessageAttachmentDefault> = (attachment) => {
 				)}
 				{!collapsed && (
 					<>
-						{attachment.text && (
-							<AttachmentText>{applyMarkdownIfRequires(attachment.mrkdwn_in, 'text', attachment.text, 'document')}</AttachmentText>
+						{decryptedAttachmentText && (
+							<AttachmentText>{applyMarkdownIfRequires(attachment.mrkdwn_in, 'text', decryptedAttachmentText, 'document')}</AttachmentText>
 						)}
 						{/* {attachment.fields && <FieldsAttachment fields={attachment.mrkdwn_in?.includes('fields') ? attachment.fields.map(({ value, ...rest }) => ({ ...rest, value: <MarkdownText withRichContent={null} content={value} /> })) : attachment.fields} />} */}
 						{attachment.fields && (

apps/meteor/client/components/message/Attachments/Item.tsx

@@ -5,16 +5,16 @@ import DefaultAttachment from './DefaultAttachment';
 import { FileAttachment } from './Files';
 import { QuoteAttachment } from './QuoteAttachment';
 
-const Item: FC<{ attachment: MessageAttachmentBase; file?: FileProp | undefined }> = ({ attachment, file }) => {
+const Item: FC<{ attachment: MessageAttachmentBase; file?: FileProp | undefined; rid: string }> = ({ attachment, file, rid }) => {
 	if (isFileAttachment(attachment) && file) {
 		return <FileAttachment {...attachment} file={file} />;
 	}
 
 	if (isQuoteAttachment(attachment)) {
-		return <QuoteAttachment {...attachment} />;
+		return <QuoteAttachment {...attachment} rid={rid} />;
 	}
 
-	return <DefaultAttachment {...(attachment as any)} />;
+	return <DefaultAttachment {...(attachment as any)} rid={rid} />;
 };
 
 export default memo(Item);

apps/meteor/client/components/message/Attachments/QuoteAttachment.tsx

@@ -25,14 +25,15 @@ const hover = css`
 	}
 `;
 
-export const QuoteAttachment: FC<MessageQuoteAttachment> = ({
+export const QuoteAttachment: FC<MessageQuoteAttachment & { rid: string }> = ({
 	author_icon: url,
 	author_name: name,
 	author_link: authorLink,
 	message_link: messageLink,
 	ts,
 	text,
 	attachments,
+	rid,
 }) => {
 	const format = useTimeAgo();
 	return (
@@ -60,7 +61,7 @@ export const QuoteAttachment: FC<MessageQuoteAttachment> = ({
 					<MarkdownText parseEmoji variant='document' content={text} />
 					{attachments && (
 						<AttachmentInner>
-							<Attachments attachments={attachments} />
+							<Attachments attachments={attachments} rid={rid} />
 						</AttachmentInner>
 					)}
 				</AttachmentDetails>

apps/meteor/client/views/room/MessageList/components/MessageContent.tsx

@@ -60,7 +60,7 @@ const MessageContent: FC<{ message: IMessage; sequential: boolean; subscription?
 					<MessageBlockUiKit mid={message._id} blocks={message.blocks} appId rid={message.rid} />
 				</MessageBlock>
 			)}
-			{messageAttachments && <Attachments attachments={messageAttachments} file={message.file} />}
+			{messageAttachments && <Attachments attachments={messageAttachments} file={message.file} rid={message.rid} />}
 
 			{oembedIsEnabled && !!message.urls?.length && <PreviewList urls={message.urls} />}
 

apps/meteor/client/views/room/MessageList/components/MessageSystem.tsx

@@ -82,7 +82,7 @@ export const MessageSystem: FC<{ message: IMessage }> = ({ message }) => {
 				</MessageSystemBlock>
 				{message.attachments && (
 					<MessageSystemBlock>
-						<Attachments attachments={message.attachments} file={message.file} />
+						<Attachments attachments={message.attachments} file={message.file} rid={message.rid} />
 					</MessageSystemBlock>
 				)}
 				{message.actionLinks?.length && (

packages/core-typings/src/IMessage/MessageAttachment/MessageAttachmentDefault.ts

@@ -1,3 +1,4 @@
+import type { IMessage } from '../IMessage';
 import type { FieldProps } from './FieldProps';
 import type { Dimensions } from './Files/Dimensions';
 import type { MessageAttachmentBase } from './MessageAttachmentBase';
@@ -25,6 +26,7 @@ export type MessageAttachmentDefault = {
 
 	color?: string;
 
+	t?: IMessage['t'];
 	translations?: {
 		[language: string]: string;
 	};