[FIX] Attachments and OEmbed margins (#25713)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code. 
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->

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

@@ -0,0 +1,8 @@
+import { ActionButton } from '@rocket.chat/fuselage';
+import React, { ComponentProps, FC } from 'react';
+
+const AttachmentAction: FC<ComponentProps<typeof ActionButton> & { icon: string }> = (props) => (
+	<ActionButton mi='x2' mini ghost {...props} />
+);
+
+export default AttachmentAction;

apps/meteor/client/components/message/Attachments/Attachment/Author.tsx → apps/meteor/client/components/message/Attachments/Attachment/AttachmentAuthor.tsx

@@ -1,8 +1,8 @@
 import { Box } from '@rocket.chat/fuselage';
 import React, { ComponentProps, FC } from 'react';
 
-const Author: FC<ComponentProps<typeof Box>> = (props) => (
+const AttachmentAuthor: FC<ComponentProps<typeof Box>> = (props) => (
 	<Box display='flex' flexDirection='row' alignItems='center' mbe='x4' {...props} />
 );
 
-export default Author;
+export default AttachmentAuthor;

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

@@ -0,0 +1,7 @@
+import React, { ReactElement } from 'react';
+
+import BaseAvatar from '../../../avatar/BaseAvatar';
+
+const AttachmentAuthorAvatar = ({ url }: { url: string }): ReactElement => <BaseAvatar url={url} size='x24' />;
+
+export default AttachmentAuthorAvatar;

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

@@ -0,0 +1,6 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ComponentProps, FC } from 'react';
+
+const AttachmentAuthorName: FC<ComponentProps<typeof Box>> = (props) => <Box withTruncatedText fontScale='p2m' mi='x8' {...props} />;
+
+export default AttachmentAuthorName;

apps/meteor/client/components/message/Attachments/Attachment/Block.tsx → apps/meteor/client/components/message/Attachments/Attachment/AttachmentBlock.tsx

@@ -3,7 +3,11 @@ import React, { FC } from 'react';
 
 import Attachment from './Attachment';
 
-const Block: FC<{ pre?: JSX.Element | string | undefined; color?: string | undefined }> = ({ pre, color = 'neutral-600', children }) => (
+const AttachmentBlock: FC<{ pre?: JSX.Element | string | undefined; color?: string | undefined }> = ({
+	pre,
+	color = 'neutral-600',
+	children,
+}) => (
 	<Attachment>
 		{pre}
 		<Box
@@ -19,4 +23,4 @@ const Block: FC<{ pre?: JSX.Element | string | undefined; color?: string | undef
 	</Attachment>
 );
 
-export default Block;
+export default AttachmentBlock;

apps/meteor/client/components/message/Attachments/Attachment/Collapse.tsx → apps/meteor/client/components/message/Attachments/Attachment/AttachmentCollapse.tsx

@@ -1,11 +1,11 @@
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ComponentProps, FC } from 'react';
 
-import Action from './Action';
+import Action from './AttachmentAction';
 
-const Collapse: FC<Omit<ComponentProps<typeof Action>, 'icon'> & { collapsed?: boolean }> = ({ collapsed = false, ...props }) => {
+const AttachmentCollapse: FC<Omit<ComponentProps<typeof Action>, 'icon'> & { collapsed?: boolean }> = ({ collapsed = false, ...props }) => {
 	const t = useTranslation();
 	return <Action title={collapsed ? t('Uncollapse') : t('Collapse')} icon={!collapsed ? 'chevron-down' : 'chevron-left'} {...props} />;
 };
 
-export default Collapse;
+export default AttachmentCollapse;

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

@@ -0,0 +1,6 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ComponentProps, FC } from 'react';
+
+const AttachmentContent: FC<ComponentProps<typeof Box>> = ({ ...props }) => <Box rcx-attachment__content width='full' mb='x4' {...props} />;
+
+export default AttachmentContent;

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

@@ -0,0 +1,8 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ComponentProps, ReactElement } from 'react';
+
+const AttachmentDescription = ({ ...props }: ComponentProps<typeof Box>): ReactElement => (
+	<Box rcx-attachment__description mbe='x4' {...props} />
+);
+
+export default AttachmentDescription;

apps/meteor/client/components/message/Attachments/Attachment/Details.tsx → apps/meteor/client/components/message/Attachments/Attachment/AttachmentDetails.tsx

@@ -1,8 +1,8 @@
 import { Box } from '@rocket.chat/fuselage';
 import React, { FC, ComponentProps } from 'react';
 
-const Details: FC<ComponentProps<typeof Box>> = ({ ...props }) => (
+const AttachmentDetails: FC<ComponentProps<typeof Box>> = ({ ...props }) => (
 	<Box rcx-attachment__details fontScale='p2' color='info' bg='neutral-100' pi='x16' pb='x16' {...props} />
 );
 
-export default Details;
+export default AttachmentDetails;

apps/meteor/client/components/message/Attachments/Attachment/Download.tsx → apps/meteor/client/components/message/Attachments/Attachment/AttachmentDownload.tsx

@@ -1,9 +1,9 @@
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ComponentProps, FC } from 'react';
 
-import Action from './Action';
+import Action from './AttachmentAction';
 
-const Download: FC<Omit<ComponentProps<typeof Action>, 'icon'> & { title?: string | undefined; href: string }> = ({
+const AttachmentDownload: FC<Omit<ComponentProps<typeof Action>, 'icon'> & { title?: string | undefined; href: string }> = ({
 	title,
 	href,
 	...props
@@ -23,4 +23,4 @@ const Download: FC<Omit<ComponentProps<typeof Action>, 'icon'> & { title?: strin
 	);
 };
 
-export default Download;
+export default AttachmentDownload;

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

@@ -0,0 +1,6 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ComponentProps, FC } from 'react';
+
+const AttachmentInner: FC<ComponentProps<typeof Box>> = ({ ...props }) => <Box {...props} />;
+
+export default AttachmentInner;

apps/meteor/client/components/message/Attachments/Attachment/Row.tsx → apps/meteor/client/components/message/Attachments/Attachment/AttachmentRow.tsx

@@ -1,8 +1,8 @@
 import { Box } from '@rocket.chat/fuselage';
 import React, { FC, ComponentProps } from 'react';
 
-const Row: FC<ComponentProps<typeof Box>> = (props) => (
+const AttachmentRow: FC<ComponentProps<typeof Box>> = (props) => (
 	<Box mi='neg-x2' mbe='x2' rcx-message-attachment display='flex' alignItems='center' {...props} />
 );
 
-export default Row;
+export default AttachmentRow;

apps/meteor/client/components/message/Attachments/Attachment/Size.tsx → apps/meteor/client/components/message/Attachments/Attachment/AttachmentSize.tsx

@@ -2,9 +2,9 @@ import { Box } from '@rocket.chat/fuselage';
 import React, { ComponentProps, FC } from 'react';
 
 import { useFormatMemorySize } from '../../../../hooks/useFormatMemorySize';
-import Title from './Title';
+import Title from './AttachmentTitle';
 
-const Size: FC<ComponentProps<typeof Box> & { size: number }> = ({ size, ...props }) => {
+const AttachmentSize: FC<ComponentProps<typeof Box> & { size: number }> = ({ size, ...props }) => {
 	const format = useFormatMemorySize();
 	return (
 		<Title flexShrink={0} {...props}>
@@ -13,4 +13,4 @@ const Size: FC<ComponentProps<typeof Box> & { size: number }> = ({ size, ...prop
 	);
 };
 
-export default Size;
+export default AttachmentSize;

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

@@ -0,0 +1,6 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ComponentProps, FC } from 'react';
+
+const AttachmentText: FC<ComponentProps<typeof Box>> = (props) => <Box mbe='x4' mi='x2' fontScale='p2' color='default' {...props}></Box>;
+
+export default AttachmentText;

apps/meteor/client/components/message/Attachments/Attachment/Thumb.tsx → apps/meteor/client/components/message/Attachments/Attachment/AttachmentThumb.tsx

@@ -1,10 +1,10 @@
 import { Box, Avatar } from '@rocket.chat/fuselage';
 import React, { FC, memo } from 'react';
 
-const Thumb: FC<{ url: string }> = ({ url }) => (
+const AttachmentThumb: FC<{ url: string }> = ({ url }) => (
 	<Box mis='x8'>
 		<Avatar {...({ url, size: 'x48' } as any)} />
 	</Box>
 );
 
-export default memo(Thumb);
+export default memo(AttachmentThumb);

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

@@ -0,0 +1,8 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ComponentProps, FC } from 'react';
+
+const AttachmentTitle: FC<ComponentProps<typeof Box>> = (props) => (
+	<Box withTruncatedText mi='x2' fontScale='c1' color='hint' {...props}></Box>
+);
+
+export default AttachmentTitle;

apps/meteor/client/components/message/Attachments/Attachment/TitleLink.tsx → apps/meteor/client/components/message/Attachments/Attachment/AttachmentTitleLink.tsx

@@ -1,11 +1,11 @@
 import React, { FC } from 'react';
 
-import Title from './Title';
+import Title from './AttachmentTitle';
 
-const TitleLink: FC<{ link: string; title?: string | undefined }> = ({ link, title }) => (
+const AttachmentTitleLink: FC<{ link: string; title?: string | undefined }> = ({ link, title }) => (
 	<Title is='a' href={`${link}?download`} color={undefined} target='_blank' download={title} rel='noopener noreferrer'>
 		{title}
 	</Title>
 );
 
-export default TitleLink;
+export default AttachmentTitleLink;

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

@@ -1,36 +1,3 @@
-import Image from '../components/Image';
 import Attachment from './Attachment';
-import Author from './Author';
-import AuthorAvatar from './AuthorAvatar';
-import AuthorName from './AuthorName';
-import Block from './Block';
-import Collapse from './Collapse';
-import Content from './Content';
-import Details from './Details';
-import Download from './Download';
-import Inner from './Inner';
-import Row from './Row';
-import Size from './Size';
-import Text from './Text';
-import Thumb from './Thumb';
-import Title from './Title';
-import TitleLink from './TitleLink';
 
-export default Object.assign(Attachment, {
-	Image,
-	Row,
-	Title,
-	Text,
-	TitleLink,
-	Size,
-	Thumb,
-	Collapse,
-	Download,
-	Content,
-	Details,
-	Inner,
-	Block,
-	Author,
-	AuthorAvatar,
-	AuthorName,
-});
+export default Attachment;

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

@@ -3,8 +3,17 @@ import React, { FC, ReactNode, ComponentProps } from 'react';
 
 import MarkdownText from '../../MarkdownText';
 import { ActionAttachment } from './ActionAttachtment';
-import Attachment from './Attachment';
+import AttachmentAuthor from './Attachment/AttachmentAuthor';
+import AttachmentAuthorAvatar from './Attachment/AttachmentAuthorAvatar';
+import AttachmentAuthorName from './Attachment/AttachmentAuthorName';
+import AttachmentBlock from './Attachment/AttachmentBlock';
+import AttachmentContent from './Attachment/AttachmentContent';
+import AttachmentRow from './Attachment/AttachmentRow';
+import AttachmentText from './Attachment/AttachmentText';
+import AttachmentThumb from './Attachment/AttachmentThumb';
+import AttachmentTitle from './Attachment/AttachmentTitle';
 import FieldsAttachment from './FieldsAttachment';
+import AttachmentImage from './components/Image';
 import { useCollapse } from './hooks/useCollapse';
 
 const applyMarkdownIfRequires = (
@@ -18,19 +27,19 @@ const DefaultAttachment: FC<MessageAttachmentDefault> = (attachment) => {
 	const [collapsed, collapse] = useCollapse(!!attachment.collapsed);
 
 	return (
-		<Attachment.Block
+		<AttachmentBlock
 			color={attachment.color}
 			pre={
 				attachment.pretext && (
-					<Attachment.Text>{applyMarkdownIfRequires(attachment.mrkdwn_in, 'pretext', attachment.pretext)}</Attachment.Text>
+					<AttachmentText>{applyMarkdownIfRequires(attachment.mrkdwn_in, 'pretext', attachment.pretext)}</AttachmentText>
 				)
 			}
 		>
-			<Attachment.Content>
+			<AttachmentContent>
 				{attachment.author_name && (
-					<Attachment.Author>
-						{attachment.author_icon && <Attachment.AuthorAvatar url={attachment.author_icon} />}
-						<Attachment.AuthorName
+					<AttachmentAuthor>
+						{attachment.author_icon && <AttachmentAuthorAvatar url={attachment.author_icon} />}
+						<AttachmentAuthorName
 							{...(attachment.author_link && {
 								is: 'a',
 								href: attachment.author_link,
@@ -39,12 +48,12 @@ const DefaultAttachment: FC<MessageAttachmentDefault> = (attachment) => {
 							})}
 						>
 							{attachment.author_name}
-						</Attachment.AuthorName>
-					</Attachment.Author>
+						</AttachmentAuthorName>
+					</AttachmentAuthor>
 				)}
 				{attachment.title && (
-					<Attachment.Row>
-						<Attachment.Title
+					<AttachmentRow>
+						<AttachmentTitle
 							{...(attachment.title_link && {
 								is: 'a',
 								href: attachment.title_link,
@@ -53,14 +62,14 @@ const DefaultAttachment: FC<MessageAttachmentDefault> = (attachment) => {
 							})}
 						>
 							{attachment.title}
-						</Attachment.Title>{' '}
+						</AttachmentTitle>{' '}
 						{collapse}
-					</Attachment.Row>
+					</AttachmentRow>
 				)}
 				{!collapsed && (
 					<>
 						{attachment.text && (
-							<Attachment.Text>{applyMarkdownIfRequires(attachment.mrkdwn_in, 'text', attachment.text, 'document')}</Attachment.Text>
+							<AttachmentText>{applyMarkdownIfRequires(attachment.mrkdwn_in, 'text', attachment.text, '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 && (
@@ -80,14 +89,14 @@ const DefaultAttachment: FC<MessageAttachmentDefault> = (attachment) => {
 								})}
 							/>
 						)}
-						{attachment.image_url && <Attachment.Image {...(attachment.image_dimensions as any)} src={attachment.image_url} />}
+						{attachment.image_url && <AttachmentImage {...(attachment.image_dimensions as any)} src={attachment.image_url} />}
 						{/* DEPRECATED */}
 						{isActionAttachment(attachment) && <ActionAttachment {...attachment} />}
 					</>
 				)}
-			</Attachment.Content>
-			{attachment.thumb_url && <Attachment.Thumb url={attachment.thumb_url} />}
-		</Attachment.Block>
+			</AttachmentContent>
+			{attachment.thumb_url && <AttachmentThumb url={attachment.thumb_url} />}
+		</AttachmentBlock>
 	);
 };