fix: forwarding a message twice does not render the attachment (#6960)

* fix: collapsible attachment with text duplicating the content

* fix: nested attachment does not render

* chore: storybook nested reply

* fix: update snapshot test

* chore: format code and fix lint issues [skip ci]

* code improvements

* fix: forward message between channels not rendering image

* update snapshot test

* fix: collapsible attachment with text duplicating the content

* fix: snapshot test

---------

Co-authored-by: OtavioStasiak <OtavioStasiak@users.noreply.github.com>

Author: OtavioStasiak

app/containers/message/Components/Attachments/Attachments.tsx

@@ -7,13 +7,19 @@ import Audio from './Audio';
 import Video from './Video';
 import CollapsibleQuote from './CollapsibleQuote';
 import AttachedActions from './AttachedActions';
+import Reply from './Reply';
 import MessageContext from '../../Context';
 import { type IMessageAttachments } from '../../interfaces';
 import { type IAttachment } from '../../../../definitions';
 import { getMessageFromAttachment } from '../../utils';
 
 const removeQuote = (file?: IAttachment) =>
-	file?.image_url || file?.audio_url || file?.video_url || (file?.actions?.length || 0) > 0 || file?.collapsed;
+	file?.image_url ||
+	file?.audio_url ||
+	file?.video_url ||
+	file?.collapsed ||
+	(file?.actions?.length || 0) > 0 ||
+	(file?.attachments?.length || 0) > 0;
 
 const Attachments: React.FC<IMessageAttachments> = React.memo(
 	({ attachments, timeFormat, showAttachment, getCustomEmoji, author }: IMessageAttachments) => {
@@ -68,6 +74,19 @@ const Attachments: React.FC<IMessageAttachments> = React.memo(
 				return <CollapsibleQuote key={index} attachment={file} timeFormat={timeFormat} getCustomEmoji={getCustomEmoji} />;
 			}
 
+			if (file.attachments?.length) {
+				return (
+					<Reply
+						key={index}
+						attachment={file}
+						timeFormat={timeFormat}
+						getCustomEmoji={getCustomEmoji}
+						showAttachment={showAttachment}
+						msg={msg}
+					/>
+				);
+			}
+
 			return null;
 		});
 		return <View style={{ gap: 4 }}>{attachmentsElements}</View>;

app/containers/message/Components/Attachments/Quote.tsx

@@ -11,6 +11,13 @@ import { getMessageFromAttachment } from '../../utils';
 const isQuoteAttachment = (file?: IAttachment): boolean => {
 	if (!file) return false;
 
+	if (file.collapsed) return false;
+
+	// Attachments with nested attachments (e.g. message link + quoted image) are rendered only by Attachments as Reply
+	if (file.attachments?.length) {
+		return false;
+	}
+
 	if (!file.color && !file.text && (file.image_url || file.audio_url || file.video_url || file.collapsed)) {
 		return false;
 	}

app/containers/message/Message.stories.tsx

@@ -1245,6 +1245,53 @@ export const MessageWithReplyLargeFont = () => (
 	</>
 );
 
+export const MessageWithNestedReplyAndFile = () => (
+	<>
+		<Message
+			msg='Forwarded message with file inside'
+			attachments={[
+				{
+					author_name: 'rocket.cat',
+					message_link: 'https://open.rocket.chat/group/msg-id',
+					ts: date,
+					timeFormat: 'LT',
+					text: '',
+					attachments: [
+						{
+							author_name: 'user',
+							ts: date,
+							timeFormat: 'LT',
+							type: 'file',
+							title: 'document.pdf',
+							title_link: '/file-upload/abc/document.pdf'
+						}
+					]
+				}
+			]}
+		/>
+		<Message
+			msg='Forwarded message with nested image'
+			attachments={[
+				{
+					author_name: 'rocket.cat',
+					ts: date,
+					timeFormat: 'LT',
+					text: '',
+					attachments: [
+						{
+							author_name: 'user',
+							ts: date,
+							timeFormat: 'LT',
+							description: 'Nested image from forwarded message',
+							image_url: 'https://octodex.github.com/images/yaktocat.png'
+						}
+					]
+				}
+			]}
+		/>
+	</>
+);
+
 export const MessageWithReplyAndFileLargeFont = () => (
 	<>
 		<MessageLargeFont
@@ -2191,6 +2238,20 @@ const collapsedAttachments = {
 		}
 	]
 };
+
+const collapsibleAttachmentWithText = {
+	collapsed: true,
+	title: 'Collapsed attachment block',
+	text: 'This attachment text should NOT appear as plain text above the message or duplicate before the block.',
+	description: 'Attachment description that might also leak as duplicate plain text.',
+	color: '#2c3e50',
+	fields: [
+		{ title: 'Field 1', value: 'Value 1', short: true },
+		{ title: 'Field 2', value: 'Value 2', short: true },
+		{ title: 'Long field', value: 'This field value could also contribute to duplicate text when expanded.', short: false }
+	]
+};
+
 export const CollapsedAttachments = () => (
 	<>
 		<Message msg='Message' attachments={[collapsedAttachments]} />
@@ -2207,6 +2268,23 @@ export const CollapsedAttachmentsLargeFont = () => (
 	</>
 );
 
+export const CollapsibleAttachmentWithText = () => (
+	<>
+		<Message msg='This is the main message body.' attachments={[collapsibleAttachmentWithText]} />
+		<Message msg='This is the main message body.' attachments={[{ ...collapsibleAttachmentWithText, collapsed: false }]} />
+	</>
+);
+
+export const CollapsibleAttachmentWithTextLargeFont = () => (
+	<>
+		<MessageLargeFont msg='This is the main message body.' attachments={[collapsibleAttachmentWithText]} />
+		<MessageLargeFont
+			msg='This is the main message body.'
+			attachments={[{ ...collapsibleAttachmentWithText, collapsed: false }]}
+		/>
+	</>
+);
+
 const attachmentWithTextAndLink = [
 	{
 		title: 'Rocket.Chat',