From baef3dc15c199b4b5bbb327a5fa6a1e7dd5746c0 Mon Sep 17 00:00:00 2001
From: khizarshah01 <khizar.shah010@gmail.com>
Date: Thu, 22 Jan 2026 17:03:45 +0530
Subject: [PATCH 1/2] fix: align quote message sequence with Rocket.Chat

---
 packages/react/src/views/Message/Message.js   | 24 ++++++++---------
 .../src/views/QuoteMessage/QuoteMessage.js    | 27 +++++++++----------
 .../views/QuoteMessage/QuoteMessage.styles.js |  1 -
 3 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/packages/react/src/views/Message/Message.js b/packages/react/src/views/Message/Message.js
index 355cde9b4a..e545ade21e 100644
--- a/packages/react/src/views/Message/Message.js
+++ b/packages/react/src/views/Message/Message.js
@@ -92,13 +92,13 @@ const Message = ({
   const hoverStyle = hasType
     ? {}
     : {
-        '&:hover': {
-          backgroundColor:
-            mode === 'light'
-              ? darken(theme.theme.colors.background, 0.03)
-              : lighten(theme.theme.colors.background, 1),
-        },
-      };
+      '&:hover': {
+        backgroundColor:
+          mode === 'light'
+            ? darken(theme.theme.colors.background, 0.03)
+            : lighten(theme.theme.colors.background, 1),
+      },
+    };
 
   const bubbleStyles = useBubbleStyles(isMe);
   const pinRoles = new Set(pinPermissions);
@@ -273,16 +273,16 @@ const Message = ({
               >
                 {message.attachments && message.attachments.length > 0 ? (
                   <>
-                    <Markdown
-                      body={message}
-                      md={message.md}
-                      isReaction={false}
-                    />
                     <Attachments
                       attachments={message.attachments}
                       variantStyles={variantStyles}
                       msg={message}
                     />
+                    <Markdown
+                      body={message}
+                      md={message.md}
+                      isReaction={false}
+                    />
                   </>
                 ) : (
                   <Markdown body={message} md={message.md} isReaction={false} />
diff --git a/packages/react/src/views/QuoteMessage/QuoteMessage.js b/packages/react/src/views/QuoteMessage/QuoteMessage.js
index 989c4887a8..2ac466f7db 100644
--- a/packages/react/src/views/QuoteMessage/QuoteMessage.js
+++ b/packages/react/src/views/QuoteMessage/QuoteMessage.js
@@ -59,6 +59,18 @@ const QuoteMessage = ({ className = '', style = {}, message }) => {
         <Box>{format(new Date(message.ts), 'h:mm a')}</Box>
       </Box>
       <Box css={styles.message}>
+        {message.attachments &&
+          message.attachments.length > 0 &&
+          message.msg &&
+          message.msg[0] === '[' &&
+          message.attachments.map((attachment, index) => (
+            <Attachment
+              key={index}
+              attachment={attachment}
+              type={attachment.type}
+              host={instanceHost}
+            />
+          ))}
         {message.file ? (
           message.file.type.startsWith('image/') ? (
             <div>
@@ -101,8 +113,7 @@ const QuoteMessage = ({ className = '', style = {}, message }) => {
               {message.msg ? (
                 <Markdown body={message} md={message.md} isReaction={false} />
               ) : (
-                `${message.file?.name} (${
-                  message.file?.size ? (message.file.size / 1024).toFixed(2) : 0
+                `${message.file?.name} (${message.file?.size ? (message.file.size / 1024).toFixed(2) : 0
                 } kB)`
               )}
             </Box>
@@ -112,18 +123,6 @@ const QuoteMessage = ({ className = '', style = {}, message }) => {
         ) : (
           <Markdown body={message} md={message.md} isReaction={false} />
         )}
-        {message.attachments &&
-          message.attachments.length > 0 &&
-          message.msg &&
-          message.msg[0] === '[' &&
-          message.attachments.map((attachment, index) => (
-            <Attachment
-              key={index}
-              attachment={attachment}
-              type={attachment.type}
-              host={instanceHost}
-            />
-          ))}
       </Box>
     </Box>
   );
diff --git a/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js b/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js
index 61c5c8d05f..e752b8989b 100644
--- a/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js
+++ b/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js
@@ -10,7 +10,6 @@ const getQuoteMessageStyles = (theme) => {
       color: ${theme.colors.foreground};
       padding: 0.5rem;
       z-index: 1200;
-      border: 1px solid ${theme.colors.border};
       border-radius: ${theme.radius};
       max-width: 100%;
       box-sizing: border-box;

From cf84e59cece9bb27fd5e6b2e438285d483b45bb4 Mon Sep 17 00:00:00 2001
From: khizarshah01 <khizar.shah010@gmail.com>
Date: Fri, 13 Mar 2026 16:46:52 +0530
Subject: [PATCH 2/2] chore: resolve merge conflict

---
 .../AttachmentHandler/AudioAttachment.js      |  10 +-
 .../AttachmentHandler/ImageAttachment.js      |  10 +-
 .../views/AttachmentHandler/TextAttachment.js | 179 +++++++++---------
 .../AttachmentHandler/VideoAttachment.js      |  10 +-
 packages/react/src/views/Message/Message.js   |  14 +-
 .../src/views/QuoteMessage/QuoteMessage.js    |   3 +-
 6 files changed, 117 insertions(+), 109 deletions(-)

diff --git a/packages/react/src/views/AttachmentHandler/AudioAttachment.js b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
index 867792b4f7..8489b3d5e1 100644
--- a/packages/react/src/views/AttachmentHandler/AudioAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
@@ -39,7 +39,8 @@ const AudioAttachment = ({
           (type ? variantStyles.pinnedContainer : '') ||
             css`
               ${type === 'file'
-                ? `border: 3px solid ${theme.colors.border};`
+                ? `border-inline-start: 2px solid ${theme.colors.border};
+                   background: ${theme.colors.primaryForeground};`
                 : ''}
             `,
         ]}
@@ -61,7 +62,7 @@ const AudioAttachment = ({
                 alt="avatar"
                 size="1.2em"
               />
-              <Box>@{authorName}</Box>
+              <Box>{authorName}</Box>
             </Box>
           </>
         ) : (
@@ -106,7 +107,8 @@ const AudioAttachment = ({
                     : variantStyles.quoteContainer) ||
                     css`
                       ${nestedAttachment.type === 'file'
-                        ? `border: 3px solid ${theme.colors.border};`
+                        ? `border-inline-start: 2px solid ${theme.colors.border};
+                           background: ${theme.colors.primaryForeground};`
                         : ''}
                     `,
                 ]}
@@ -128,7 +130,7 @@ const AudioAttachment = ({
                         alt="avatar"
                         size="1.2em"
                       />
-                      <Box>@{nestedAttachment.author_name}</Box>
+                      <Box>{nestedAttachment.author_name}</Box>
                     </Box>
                   </>
                 ) : (
diff --git a/packages/react/src/views/AttachmentHandler/ImageAttachment.js b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
index 84516ce65a..231cdde536 100644
--- a/packages/react/src/views/AttachmentHandler/ImageAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
@@ -48,7 +48,8 @@ const ImageAttachment = ({
           (type ? variantStyles.pinnedContainer : '') ||
             css`
               ${type === 'file'
-                ? `border: 2px solid ${theme.colors.border};`
+                ? `border-inline-start: 2px solid ${theme.colors.border};
+                 background: ${theme.colors.primaryForeground};`
                 : ''}
             `,
         ]}
@@ -70,7 +71,7 @@ const ImageAttachment = ({
                 alt="avatar"
                 size="1.2em"
               />
-              <Box>@{authorName}</Box>
+              <Box>{authorName}</Box>
             </Box>
           </>
         ) : (
@@ -123,7 +124,8 @@ const ImageAttachment = ({
                     : variantStyles.quoteContainer) ||
                     css`
                       ${nestedAttachment.attachments[0].type === 'file'
-                        ? `border: 2px solid ${theme.colors.border};`
+                        ? `border-inline-start: 2px solid ${theme.colors.border};
+                         background: ${theme.colors.primaryForeground};`
                         : ''}
                     `,
                 ]}
@@ -145,7 +147,7 @@ const ImageAttachment = ({
                         alt="avatar"
                         size="1.2em"
                       />
-                      <Box>@{nestedAttachment.author_name}</Box>
+                      <Box>{nestedAttachment.author_name}</Box>
                     </Box>
                   </>
                 ) : (
diff --git a/packages/react/src/views/AttachmentHandler/TextAttachment.js b/packages/react/src/views/AttachmentHandler/TextAttachment.js
index 1bdd9b602d..206b62de1f 100644
--- a/packages/react/src/views/AttachmentHandler/TextAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/TextAttachment.js
@@ -102,12 +102,13 @@ const FileAttachment = ({
             border-radius: 4px;
             line-height: 0;
             padding: 0.5rem;
-            background: ${theme.colors.background};
+            background: ${theme.colors.primaryForeground};
+            border-inline-start: 2px solid ${theme.colors.border};
           `,
           (type ? variantStyles.pinnedContainer : '') ||
             css`
               ${type === 'file'
-                ? `border: 2px solid ${theme.colors.border};`
+                ? `border-inline-start: 3px solid ${theme.colors.border};`
                 : ''}
             `,
         ]}
@@ -128,7 +129,7 @@ const FileAttachment = ({
               alt="avatar"
               size="1.2em"
             />
-            <Box>@{attachment?.author_name}</Box>
+            <Box>{attachment?.author_name}</Box>
             {getTimeString(attachment?.ts) && (
               <Box
                 onClick={() => handleQuoteClick(attachment)}
@@ -146,88 +147,6 @@ const FileAttachment = ({
             )}
           </Box>
         )}
-
-        {!attachment?.text && !attachment?.attachments && (
-          <AttachmentMetadata
-            attachment={attachment}
-            url={host + attachment.title_link}
-            variantStyles={variantStyles}
-            msg={msg}
-            onExpandCollapseClick={toggleExpanded}
-            isExpanded={isExpanded}
-          />
-        )}
-        {isExpanded && (attachment?.title_link || attachment?.text) && (
-          <Box
-            css={css`
-              margin-top: 0.5rem;
-              white-space: pre-line;
-              background: ${theme.colors.background};
-              padding: 8px 12px;
-              border-radius: 4px;
-              border: 1px solid ${theme.colors.border};
-              line-height: normal;
-            `}
-          >
-            {attachment?.text ? (
-              attachment.text[0] === '[' ? (
-                attachment.text.match(/\n(.*)/)?.[1] || ''
-              ) : (
-                <Markdown
-                  body={attachment.text}
-                  md={parse(attachment?.text)}
-                  isReaction={false}
-                />
-              )
-            ) : !attachment.attachments ? (
-              <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
-                  css={css`
-                    display: flex;
-                    flex-direction: column;
-                    gap: 2px;
-                    line-height: normal;
-                  `}
-                >
-                  <a
-                    href={host + attachment.title_link}
-                    download={attachment.title_link_download}
-                    css={css`
-                      text-decoration: none;
-                      font-size: 0.875rem;
-                      &:hover {
-                        text-decoration: underline;
-                      }
-                    `}
-                  >
-                    {attachment.title}
-                  </a>
-                  <Box
-                    css={css`
-                      font-size: 0.75rem;
-                    `}
-                  >
-                    {getFileSizeWithFormat(attachment.size, attachment.format)}
-                  </Box>
-                </Box>
-              </Box>
-            ) : (
-              ''
-            )}
-          </Box>
-        )}
         {attachment?.attachments &&
           Array.isArray(attachment.attachments) &&
           attachment.attachments.map((nestedAttachment, index) => (
@@ -240,14 +159,16 @@ const FileAttachment = ({
                   font-size: 0.875rem;
                   font-weight: 400;
                   word-break: break-word;
-                  border-inline-start: 3px solid ${theme.colors.border};
+                  background: ${theme.colors.primaryForeground};
+                  border-inline-start: 2px solid ${theme.colors.border};
                   margin-top: 0.75rem;
+                  margin-inline-start: 1rem;
                   padding: 0.5rem;
                 `,
                 (nestedAttachment?.type ? variantStyles.pinnedContainer : '') ||
                   css`
                     ${!attachment?.type
-                      ? `border: 2px solid ${theme.colors.border};`
+                      ? `border-inline-start: 2px solid ${theme.colors.border};`
                       : ''}
                   `,
                 css`
@@ -276,7 +197,7 @@ const FileAttachment = ({
                       alt="avatar"
                       size="1.2em"
                     />
-                    <Box>@{nestedAttachment?.author_name}</Box>
+                    <Box>{nestedAttachment?.author_name}</Box>
                     {getTimeString(nestedAttachment?.ts) && (
                       <Box
                         onClick={() => handleQuoteClick(nestedAttachment)}
@@ -327,7 +248,7 @@ const FileAttachment = ({
                         display: flex;
                         align-items: center;
                         margin-top: 0.5rem;
-                        background: ${theme.colors.background};
+                        background: ${theme.colors.primaryForeground};
                         padding: 8px 12px;
                         border-radius: 4px;
                         gap: 8px;
@@ -373,6 +294,86 @@ const FileAttachment = ({
               )}
             </Box>
           ))}
+
+        {!attachment?.text && !attachment?.attachments && (
+          <AttachmentMetadata
+            attachment={attachment}
+            url={host + attachment.title_link}
+            variantStyles={variantStyles}
+            msg={msg}
+            onExpandCollapseClick={toggleExpanded}
+            isExpanded={isExpanded}
+          />
+        )}
+        {isExpanded && (attachment?.title_link || attachment?.text) && (
+          <Box
+            css={css`
+              margin-top: 0.5rem;
+              white-space: pre-line;
+              background: ${theme.colors.primaryForeground};
+              padding: 8px 12px;
+              line-height: normal;
+            `}
+          >
+            {attachment?.text ? (
+              attachment.text[0] === '[' ? (
+                attachment.text.match(/\n(.*)/)?.[1] || ''
+              ) : (
+                <Markdown
+                  body={attachment.text}
+                  md={parse(attachment?.text)}
+                  isReaction={false}
+                />
+              )
+            ) : !attachment.attachments ? (
+              <Box
+                css={css`
+                  display: flex;
+                  align-items: center;
+                  margin-top: 0.5rem;
+                  background: ${theme.colors.primaryForeground};
+                  padding: 8px 12px;
+                  border-radius: 4px;
+                  gap: 8px;
+                  border: 1px solid ${theme.colors.border};
+                `}
+              >
+                <Icon name="file" size="40px" />
+                <Box
+                  css={css`
+                    display: flex;
+                    flex-direction: column;
+                    gap: 2px;
+                    line-height: normal;
+                  `}
+                >
+                  <a
+                    href={host + attachment.title_link}
+                    download={attachment.title_link_download}
+                    css={css`
+                      text-decoration: none;
+                      font-size: 0.875rem;
+                      &:hover {
+                        text-decoration: underline;
+                      }
+                    `}
+                  >
+                    {attachment.title}
+                  </a>
+                  <Box
+                    css={css`
+                      font-size: 0.75rem;
+                    `}
+                  >
+                    {getFileSizeWithFormat(attachment.size, attachment.format)}
+                  </Box>
+                </Box>
+              </Box>
+            ) : (
+              ''
+            )}
+          </Box>
+        )}
       </Box>
     </Box>
   );
diff --git a/packages/react/src/views/AttachmentHandler/VideoAttachment.js b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
index 7bad3a90c6..c8493a32f9 100644
--- a/packages/react/src/views/AttachmentHandler/VideoAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
@@ -52,7 +52,8 @@ const VideoAttachment = ({
           (type ? variantStyles.pinnedContainer : '') ||
             css`
               ${type === 'file'
-                ? `border: 3px solid ${theme.colors.border};`
+                ? `border-inline-start: 2px solid ${theme.colors.border};
+                 background: ${theme.colors.primaryForeground};`
                 : ''}
             `,
         ]}
@@ -84,7 +85,7 @@ const VideoAttachment = ({
                   }
                 `}
               >
-                @{authorName}
+                {authorName}
               </Box>
             </Box>
           </>
@@ -141,7 +142,8 @@ const VideoAttachment = ({
                     : variantStyles.quoteContainer) ||
                     css`
                       ${type === 'file'
-                        ? `border: 3px solid ${theme.colors.border};`
+                        ? `border-inline-start: 2px solid ${theme.colors.border};
+                           background: ${theme.colors.primaryForeground};`
                         : ''}
                     `,
                 ]}
@@ -167,7 +169,7 @@ const VideoAttachment = ({
                         alt="avatar"
                         size="1.2em"
                       />
-                      <Box>@{authorName}</Box>
+                      <Box>{authorName}</Box>
                     </Box>
                   </>
                 ) : (
diff --git a/packages/react/src/views/Message/Message.js b/packages/react/src/views/Message/Message.js
index e545ade21e..b1e5b5c71c 100644
--- a/packages/react/src/views/Message/Message.js
+++ b/packages/react/src/views/Message/Message.js
@@ -92,13 +92,13 @@ const Message = ({
   const hoverStyle = hasType
     ? {}
     : {
-      '&:hover': {
-        backgroundColor:
-          mode === 'light'
-            ? darken(theme.theme.colors.background, 0.03)
-            : lighten(theme.theme.colors.background, 1),
-      },
-    };
+        '&:hover': {
+          backgroundColor:
+            mode === 'light'
+              ? darken(theme.theme.colors.background, 0.03)
+              : lighten(theme.theme.colors.background, 1),
+        },
+      };
 
   const bubbleStyles = useBubbleStyles(isMe);
   const pinRoles = new Set(pinPermissions);
diff --git a/packages/react/src/views/QuoteMessage/QuoteMessage.js b/packages/react/src/views/QuoteMessage/QuoteMessage.js
index 2ac466f7db..9bdb988c0b 100644
--- a/packages/react/src/views/QuoteMessage/QuoteMessage.js
+++ b/packages/react/src/views/QuoteMessage/QuoteMessage.js
@@ -113,7 +113,8 @@ const QuoteMessage = ({ className = '', style = {}, message }) => {
               {message.msg ? (
                 <Markdown body={message} md={message.md} isReaction={false} />
               ) : (
-                `${message.file?.name} (${message.file?.size ? (message.file.size / 1024).toFixed(2) : 0
+                `${message.file?.name} (${
+                  message.file?.size ? (message.file.size / 1024).toFixed(2) : 0
                 } kB)`
               )}
             </Box>