Skip to content

fix: align quoted message UI order and styling with official Rocket.Chat #1095

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Khizarshah01 wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

fix: align quoted message UI order and styling with official Rocket.Chat #1095

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ce8a430
fix: align quote message sequence with Rocket.Chat
Khizarshah01 Jan 22, 2026
3139106
chore: adjust attachment rendering for quote UI
Khizarshah01 Jan 22, 2026
b95cb62
chore: apply lint fixes
Khizarshah01 Jan 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions packages/react/src/views/AttachmentHandler/AudioAttachment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};`
: ''}
`,
]}
Expand All @@ -61,7 +62,7 @@ const AudioAttachment = ({
alt="avatar"
size="1.2em"
/>
<Box>@{authorName}</Box>
<Box>{authorName}</Box>
</Box>
</>
) : (
Expand Down Expand Up @@ -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};`
: ''}
`,
]}
Expand All @@ -128,7 +130,7 @@ const AudioAttachment = ({
alt="avatar"
size="1.2em"
/>
<Box>@{nestedAttachment.author_name}</Box>
<Box>{nestedAttachment.author_name}</Box>
</Box>
</>
) : (
Expand Down
10 changes: 6 additions & 4 deletions packages/react/src/views/AttachmentHandler/ImageAttachment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};`
: ''}
`,
]}
Expand All @@ -70,7 +71,7 @@ const ImageAttachment = ({
alt="avatar"
size="1.2em"
/>
<Box>@{authorName}</Box>
<Box>{authorName}</Box>
</Box>
</>
) : (
Expand Down Expand Up @@ -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};`
: ''}
`,
]}
Expand All @@ -145,7 +147,7 @@ const ImageAttachment = ({
alt="avatar"
size="1.2em"
/>
<Box>@{nestedAttachment.author_name}</Box>
<Box>{nestedAttachment.author_name}</Box>
</Box>
</>
) : (
Expand Down
179 changes: 90 additions & 89 deletions packages/react/src/views/AttachmentHandler/TextAttachment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,12 +57,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};`
: ''}
`,
]}
Expand All @@ -83,89 +84,7 @@ const FileAttachment = ({
alt="avatar"
size="1.2em"
/>
<Box>@{attachment?.author_name}</Box>
</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?.author_name}</Box>
</Box>
)}
{attachment?.attachments &&
Expand All @@ -180,14 +99,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`
Expand Down Expand Up @@ -216,7 +137,7 @@ const FileAttachment = ({
alt="avatar"
size="1.2em"
/>
<Box>@{nestedAttachment?.author_name}</Box>
<Box>{nestedAttachment?.author_name}</Box>
</>
)}
</Box>
Expand Down Expand Up @@ -252,7 +173,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;
Expand Down Expand Up @@ -298,6 +219,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>
);
Expand Down
10 changes: 6 additions & 4 deletions packages/react/src/views/AttachmentHandler/VideoAttachment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};`
: ''}
`,
]}
Expand Down Expand Up @@ -84,7 +85,7 @@ const VideoAttachment = ({
}
`}
>
@{authorName}
{authorName}
</Box>
</Box>
</>
Expand Down Expand Up @@ -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};`
: ''}
`,
]}
Expand All @@ -167,7 +169,7 @@ const VideoAttachment = ({
alt="avatar"
size="1.2em"
/>
<Box>@{authorName}</Box>
<Box>{authorName}</Box>
</Box>
</>
) : (
Expand Down
10 changes: 5 additions & 5 deletions packages/react/src/views/Message/Message.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
Loading