From a208524e1c1b26bc056649a6976a964a26595687 Mon Sep 17 00:00:00 2001
From: khizarshah01 <khizar.shah010@gmail.com>
Date: Fri, 16 Jan 2026 19:45:11 +0530
Subject: [PATCH 1/2] fix: correctly render nested media attachments in quotes

---
 .../AttachmentHandler/AttachmentMetadata.js   |  28 +-
 .../views/AttachmentHandler/TextAttachment.js | 303 +++++++++++-------
 2 files changed, 209 insertions(+), 122 deletions(-)

diff --git a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
index 0c4eda27a..a3a4076f3 100644
--- a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
+++ b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
@@ -41,13 +41,15 @@ const AttachmentMetadata = ({
     } else if (attachment?.size) {
       sizeInBytes = attachment.size;
     } else {
-      sizeInBytes = 0;
+      return null;
     }
 
     const sizeInKB = (sizeInBytes / 1024).toFixed(2);
     return `${sizeInKB} kB`;
   };
 
+  const fileSize = getFormattedFileSize();
+
   return (
     <Box
       css={[
@@ -116,17 +118,19 @@ const AttachmentMetadata = ({
                 : attachment?.title}
             </p>
           </Tooltip>
-          <Box
-            css={css`
-              font-size: 12px;
-              opacity: 0.7;
-              @media (max-width: 420px) {
-                margin-left: 0;
-              }
-            `}
-          >
-            ({getFormattedFileSize()})
-          </Box>
+          {fileSize && (
+            <Box
+              css={css`
+                font-size: 12px;
+                opacity: 0.7;
+                @media (max-width: 420px) {
+                  margin-left: 0;
+                }
+              `}
+            >
+              ({fileSize})
+            </Box>
+          )}
         </Box>
 
         <Box
diff --git a/packages/react/src/views/AttachmentHandler/TextAttachment.js b/packages/react/src/views/AttachmentHandler/TextAttachment.js
index 73387c741..90cd4293f 100644
--- a/packages/react/src/views/AttachmentHandler/TextAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/TextAttachment.js
@@ -6,6 +6,9 @@ import { parse } from '@rocket.chat/message-parser';
 import AttachmentMetadata from './AttachmentMetadata';
 import RCContext from '../../context/RCInstance';
 import { Markdown } from '../Markdown';
+import AudioAttachment from './AudioAttachment';
+import VideoAttachment from './VideoAttachment';
+import ImageAttachment from './ImageAttachment';
 
 const FileAttachment = ({
   attachment,
@@ -60,10 +63,10 @@ const FileAttachment = ({
             background: ${theme.colors.background};
           `,
           (type ? variantStyles.pinnedContainer : '') ||
-            css`
+          css`
               ${type === 'file'
-                ? `border: 2px solid ${theme.colors.border};`
-                : ''}
+              ? `border: 2px solid ${theme.colors.border};`
+              : ''}
             `,
         ]}
       >
@@ -170,134 +173,214 @@ const FileAttachment = ({
         )}
         {attachment?.attachments &&
           Array.isArray(attachment.attachments) &&
-          attachment.attachments.map((nestedAttachment, index) => (
-            <Box
-              css={[
-                css`
-                  display: flex;
-                  flex-direction: column;
-                  letter-spacing: 0rem;
-                  font-size: 0.875rem;
-                  font-weight: 400;
-                  word-break: break-word;
-                  border-inline-start: 3px solid ${theme.colors.border};
-                  margin-top: 0.75rem;
-                  padding: 0.5rem;
-                `,
-                (nestedAttachment?.type ? variantStyles.pinnedContainer : '') ||
-                  css`
-                    ${!attachment?.type
-                      ? `border: 2px solid ${theme.colors.border};`
-                      : ''}
-                  `,
-                css`
-                  ${variantStyles.name !== undefined &&
-                  variantStyles.name.includes('bubble')
-                    ? `border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem`
-                    : ''}
-                `,
-              ]}
-              key={index}
-            >
+          attachment.attachments.map((nestedAttachment, index) => {
+            if (nestedAttachment?.audio_url) {
+              return (
+                <AudioAttachment
+                  attachment={nestedAttachment}
+                  host={host}
+                  author={author}
+                  variantStyles={variantStyles}
+                  msg={msg}
+                  key={index}
+                />
+              );
+            }
+            if (nestedAttachment?.video_url) {
+              return (
+                <VideoAttachment
+                  attachment={nestedAttachment}
+                  host={host}
+                  author={author}
+                  variantStyles={variantStyles}
+                  msg={msg}
+                  key={index}
+                />
+              );
+            }
+            if (nestedAttachment?.image_url) {
+              return (
+                <ImageAttachment
+                  attachment={nestedAttachment}
+                  host={host}
+                  author={author}
+                  variantStyles={variantStyles}
+                  msg={msg}
+                  key={index}
+                />
+              );
+            }
+            // Check for wrapped attachments (mirroring Attachment.js logic)
+            if (nestedAttachment?.attachments?.[0]?.audio_url) {
+              return (
+                <AudioAttachment
+                  attachment={nestedAttachment.attachments[0]}
+                  host={host}
+                  author={author}
+                  variantStyles={variantStyles}
+                  msg={msg}
+                  key={index}
+                />
+              );
+            }
+            if (nestedAttachment?.attachments?.[0]?.video_url) {
+              return (
+                <VideoAttachment
+                  attachment={nestedAttachment.attachments[0]}
+                  host={host}
+                  author={author}
+                  variantStyles={variantStyles}
+                  msg={msg}
+                  key={index}
+                />
+              );
+            }
+            if (nestedAttachment?.attachments?.[0]?.image_url) {
+              return (
+                <ImageAttachment
+                  attachment={nestedAttachment.attachments[0]}
+                  host={host}
+                  author={author}
+                  variantStyles={variantStyles}
+                  msg={msg}
+                  key={index}
+                />
+              );
+            }
+
+            return (
               <Box
                 css={[
                   css`
                     display: flex;
-                    gap: 0.3rem;
-                    align-items: center;
+                    flex-direction: column;
+                    letter-spacing: 0rem;
+                    font-size: 0.875rem;
+                    font-weight: 400;
+                    word-break: break-word;
+                    border-inline-start: 3px solid ${theme.colors.border};
+                    margin-top: 0.75rem;
+                    padding: 0.5rem;
+                  `,
+                  (nestedAttachment?.type
+                    ? variantStyles.pinnedContainer
+                    : '') ||
+                  css`
+                      ${!attachment?.type
+                      ? `border: 2px solid ${theme.colors.border};`
+                      : ''}
+                    `,
+                  css`
+                    ${variantStyles.name !== undefined &&
+                      variantStyles.name.includes('bubble')
+                      ? `border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem`
+                      : ''}
                   `,
-                  variantStyles.textUserInfo,
                 ]}
+                key={index}
               >
-                {nestedAttachment?.author_name && (
-                  <>
-                    <Avatar
-                      url={getUserAvatarUrl(nestedAttachment?.author_icon)}
-                      alt="avatar"
-                      size="1.2em"
-                    />
-                    <Box>@{nestedAttachment?.author_name}</Box>
-                  </>
-                )}
-              </Box>
-
-              <AttachmentMetadata
-                attachment={nestedAttachment}
-                url={host + (nestedAttachment?.title_link || '')}
-                variantStyles={variantStyles}
-                onExpandCollapseClick={toggleExpanded}
-                isExpanded={isExpanded}
-              />
-
-              {isExpanded && (
                 <Box
-                  css={css`
-                    margin-top: 0.5rem;
-                    white-space: pre-line;
-                  `}
+                  css={[
+                    css`
+                      display: flex;
+                      gap: 0.3rem;
+                      align-items: center;
+                    `,
+                    variantStyles.textUserInfo,
+                  ]}
                 >
-                  {nestedAttachment?.text ? (
-                    nestedAttachment.text[0] === '[' ? (
-                      nestedAttachment.text.match(/\n(.*)/)?.[1] || ''
-                    ) : (
-                      <Markdown
-                        body={nestedAttachment.text}
-                        md={nestedAttachment.md}
-                        isReaction={false}
+                  {nestedAttachment?.author_name && (
+                    <>
+                      <Avatar
+                        url={getUserAvatarUrl(nestedAttachment?.author_icon)}
+                        alt="avatar"
+                        size="1.2em"
                       />
-                    )
-                  ) : (
-                    <Box
-                      css={css`
-                        display: flex;
-                        align-items: center;
-                        margin-top: 0.5rem;
-                        background: ${theme.colors.background};
-                        padding: 8px 12px;
-                        border-radius: 4px;
-                        gap: 8px;
-                        border: 1px solid ${theme.colors.border};
-                      `}
-                    >
-                      <Icon name="file" size="40px" />
+                      <Box>@{nestedAttachment?.author_name}</Box>
+                    </>
+                  )}
+                </Box>
+
+                {!nestedAttachment?.text && !nestedAttachment?.attachments && (
+                  <AttachmentMetadata
+                    attachment={nestedAttachment}
+                    url={host + (nestedAttachment?.title_link || '')}
+                    variantStyles={variantStyles}
+                    onExpandCollapseClick={toggleExpanded}
+                    isExpanded={isExpanded}
+                  />
+                )}
+
+                {isExpanded && (
+                  <Box
+                    css={css`
+                      margin-top: 0.5rem;
+                      white-space: pre-line;
+                    `}
+                  >
+                    {nestedAttachment?.text ? (
+                      nestedAttachment.text[0] === '[' ? (
+                        nestedAttachment.text.match(/\n(.*)/)?.[1] || ''
+                      ) : (
+                        <Markdown
+                          body={nestedAttachment.text}
+                          md={nestedAttachment.md}
+                          isReaction={false}
+                        />
+                      )
+                    ) : (
                       <Box
                         css={css`
                           display: flex;
-                          flex-direction: column;
-                          gap: 2px;
-                          line-height: normal;
+                          align-items: center;
+                          margin-top: 0.5rem;
+                          background: ${theme.colors.background};
+                          padding: 8px 12px;
+                          border-radius: 4px;
+                          gap: 8px;
+                          border: 1px solid ${theme.colors.border};
                         `}
                       >
-                        <a
-                          href={host + (nestedAttachment?.title_link || ' ')}
-                          download={nestedAttachment?.title_link_download}
-                          css={css`
-                            text-decoration: none;
-                            font-size: 0.875rem;
-                            &:hover {
-                              text-decoration: underline;
-                            }
-                          `}
-                        >
-                          {nestedAttachment?.title}
-                        </a>
+                        <Icon name="file" size="40px" />
                         <Box
                           css={css`
-                            font-size: 0.75rem;
+                            display: flex;
+                            flex-direction: column;
+                            gap: 2px;
+                            line-height: normal;
                           `}
                         >
-                          {getFileSizeWithFormat(
-                            nestedAttachment?.size,
-                            nestedAttachment?.format
-                          )}
+                          <a
+                            href={host + (nestedAttachment?.title_link || ' ')}
+                            download={nestedAttachment?.title_link_download}
+                            css={css`
+                              text-decoration: none;
+                              font-size: 0.875rem;
+                              &:hover {
+                                text-decoration: underline;
+                              }
+                            `}
+                          >
+                            {nestedAttachment?.title}
+                          </a>
+                          <Box
+                            css={css`
+                              font-size: 0.75rem;
+                            `}
+                          >
+                            {getFileSizeWithFormat(
+                              nestedAttachment?.size,
+                              nestedAttachment?.format
+                            )}
+                          </Box>
                         </Box>
                       </Box>
-                    </Box>
-                  )}
-                </Box>
-              )}
-            </Box>
-          ))}
+                    )}
+                  </Box>
+                )}
+              </Box>
+            );
+          })}
       </Box>
     </Box>
   );

From 4d44d0e06fcd82ed3c6652d4b5061294b1cd675c Mon Sep 17 00:00:00 2001
From: khizarshah01 <khizar.shah010@gmail.com>
Date: Fri, 16 Jan 2026 20:45:09 +0530
Subject: [PATCH 2/2] chore: fix formatting in TextAttachment

---
 .../src/views/AttachmentHandler/TextAttachment.js  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/views/AttachmentHandler/TextAttachment.js b/packages/react/src/views/AttachmentHandler/TextAttachment.js
index 90cd4293f..e8fd3fba1 100644
--- a/packages/react/src/views/AttachmentHandler/TextAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/TextAttachment.js
@@ -63,10 +63,10 @@ const FileAttachment = ({
             background: ${theme.colors.background};
           `,
           (type ? variantStyles.pinnedContainer : '') ||
-          css`
+            css`
               ${type === 'file'
-              ? `border: 2px solid ${theme.colors.border};`
-              : ''}
+                ? `border: 2px solid ${theme.colors.border};`
+                : ''}
             `,
         ]}
       >
@@ -265,14 +265,14 @@ const FileAttachment = ({
                   (nestedAttachment?.type
                     ? variantStyles.pinnedContainer
                     : '') ||
-                  css`
+                    css`
                       ${!attachment?.type
-                      ? `border: 2px solid ${theme.colors.border};`
-                      : ''}
+                        ? `border: 2px solid ${theme.colors.border};`
+                        : ''}
                     `,
                   css`
                     ${variantStyles.name !== undefined &&
-                      variantStyles.name.includes('bubble')
+                    variantStyles.name.includes('bubble')
                       ? `border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem`
                       : ''}
                   `,