[NEW] Attachment Files Redesign

apps/meteor/app/file-upload/server/lib/FileUpload.js

@@ -337,7 +337,7 @@ export const FileUpload = {
 	},
 
 	uploadsOnValidate(file) {
-		if (!/^image\/((x-windows-)?bmp|p?jpeg|png|gif)$/.test(file.type)) {
+		if (!/^image\/((x-windows-)?bmp|p?jpeg|png|gif|webp)$/.test(file.type)) {
 			return;
 		}
 

apps/meteor/app/file-upload/server/methods/sendFileMessage.ts

@@ -8,6 +8,7 @@ import { FileUpload } from '../lib/FileUpload';
 import { canAccessRoom } from '../../../authorization/server/functions/canAccessRoom';
 import { SystemLogger } from '../../../../server/lib/logger/system';
 import { omit } from '../../../../lib/utils/omit';
+import { getFileExtension } from '../../../../lib/utils/getFileExtension';
 
 function validateFileRequiredFields(file: Partial<IUpload>): asserts file is AtLeast<IUpload, '_id' | 'name' | 'type' | 'size'> {
 	const requiredFields = ['_id', 'name', 'type', 'size'];
@@ -106,9 +107,11 @@ export const parseFileIntoMessageAttachments = async (
 		const attachment = {
 			title: file.name,
 			type: 'file',
+			format: getFileExtension(file.name),
 			description: file.description,
 			title_link: fileUrl,
 			title_link_download: true,
+			size: file.size as number,
 		};
 		attachments.push(attachment);
 	}

apps/meteor/client/components/message/MessageCollapsible.tsx

@@ -0,0 +1,28 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+
+import AttachmentDownload from './content/attachments/structure/AttachmentDownload';
+import AttachmentSize from './content/attachments/structure/AttachmentSize';
+import { useCollapse } from './hooks/useCollapse';
+
+type MessageCollapsibleProps = { children?: ReactNode; title?: string; hasDownload?: boolean; link?: string; size?: number };
+
+const MessageCollapsible = ({ children, title, hasDownload, link, size }: MessageCollapsibleProps): ReactElement => {
+	const [collapsed, collapse] = useCollapse(false);
+
+	return (
+		<>
+			<Box display='flex' flexDirection='row' color='hint' fontScale='c1' alignItems='center'>
+				<Box withTruncatedText title={title}>
+					{title}
+				</Box>
+				{size && <AttachmentSize size={size} />} {collapse}
+				{hasDownload && link && <AttachmentDownload title={title} href={link} />}
+			</Box>
+			{!collapsed && children}
+		</>
+	);
+};
+
+export default MessageCollapsible;

apps/meteor/client/components/message/content/attachments/FileAttachment.tsx

@@ -4,7 +4,6 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { AudioAttachment } from './file/AudioAttachment';
-import type { GenericFileAttachmentProps } from './file/GenericFileAttachment';
 import { GenericFileAttachment } from './file/GenericFileAttachment';
 import { ImageAttachment } from './file/ImageAttachment';
 import { VideoAttachment } from './file/VideoAttachment';
@@ -19,9 +18,8 @@ export const FileAttachment: FC<FileAttachmentProps> = (attachment) => {
 	if (isFileVideoAttachment(attachment)) {
 		return <VideoAttachment {...attachment} />;
 	}
-	// if (isFilePDFAttachment(attachment)) { return <PDFAttachment {...attachment} />; }
 
-	return <GenericFileAttachment {...(attachment as GenericFileAttachmentProps)} />;
+	return <GenericFileAttachment {...attachment} />;
 };
 
 export { GenericFileAttachment, ImageAttachment, VideoAttachment };

apps/meteor/client/components/message/content/attachments/file/AudioAttachment.tsx

@@ -4,47 +4,28 @@ import type { FC } from 'react';
 import React from 'react';
 
 import MarkdownText from '../../../../MarkdownText';
+import MessageCollapsible from '../../../MessageCollapsible';
 import MessageContentBody from '../../../MessageContentBody';
-import { useCollapse } from '../../../hooks/useCollapse';
-import Attachment from '../structure/Attachment';
-import AttachmentContent from '../structure/AttachmentContent';
-import AttachmentDescription from '../structure/AttachmentDescription';
-import AttachmentDownload from '../structure/AttachmentDownload';
-import AttachmentRow from '../structure/AttachmentRow';
-import AttachmentSize from '../structure/AttachmentSize';
-import AttachmentTitle from '../structure/AttachmentTitle';
 
 export const AudioAttachment: FC<AudioAttachmentProps> = ({
 	title,
 	audio_url: url,
 	audio_type: type,
-	collapsed: collapsedDefault = false,
 	audio_size: size,
 	description,
+	descriptionMd,
 	title_link: link,
 	title_link_download: hasDownload,
-	md,
 }) => {
-	const [collapsed, collapse] = useCollapse(collapsedDefault);
 	const getURL = useMediaUrl();
 	return (
-		<Attachment>
-			<AttachmentDescription>
-				{md ? <MessageContentBody md={md} /> : <MarkdownText parseEmoji variant='inline' content={description} />}
-			</AttachmentDescription>
-			<AttachmentRow>
-				<AttachmentTitle>{title}</AttachmentTitle>
-				{size && <AttachmentSize size={size} />}
-				{collapse}
-				{hasDownload && link && <AttachmentDownload title={title} href={getURL(link)} />}
-			</AttachmentRow>
-			{!collapsed && (
-				<AttachmentContent border='none'>
-					<audio controls preload='metadata'>
-						<source src={getURL(url)} type={type} />
-					</audio>
-				</AttachmentContent>
-			)}
-		</Attachment>
+		<>
+			{descriptionMd ? <MessageContentBody md={descriptionMd} /> : <MarkdownText parseEmoji content={description} />}
+			<MessageCollapsible title={title} hasDownload={hasDownload} link={getURL(link || url)} size={size}>
+				<audio controls preload='metadata'>
+					<source src={getURL(url)} type={type} />
+				</audio>
+			</MessageCollapsible>
+		</>
 	);
 };

apps/meteor/client/components/message/content/attachments/file/GenericFileAttachment.tsx

@@ -1,50 +1,51 @@
-import type { FileProp, MessageAttachmentBase } from '@rocket.chat/core-typings';
+import type { MessageAttachmentBase } from '@rocket.chat/core-typings';
+import {
+	MessageGenericPreview,
+	MessageGenericPreviewContent,
+	MessageGenericPreviewIcon,
+	MessageGenericPreviewTitle,
+	MessageGenericPreviewDescription,
+} from '@rocket.chat/fuselage';
 import { useMediaUrl } from '@rocket.chat/ui-contexts';
 import type { FC } from 'react';
 import React from 'react';
 
+import { getFileExtension } from '../../../../../../lib/utils/getFileExtension';
 import MarkdownText from '../../../../MarkdownText';
+import MessageCollapsible from '../../../MessageCollapsible';
 import MessageContentBody from '../../../MessageContentBody';
-import Attachment from '../structure/Attachment';
-import AttachmentDescription from '../structure/AttachmentDescription';
-import AttachmentDownload from '../structure/AttachmentDownload';
-import AttachmentRow from '../structure/AttachmentRow';
 import AttachmentSize from '../structure/AttachmentSize';
-import AttachmentTitle from '../structure/AttachmentTitle';
-import AttachmentTitleLink from '../structure/AttachmentTitleLink';
 
-export type GenericFileAttachmentProps = {
-	file?: FileProp;
-} & MessageAttachmentBase;
-
-export const GenericFileAttachment: FC<GenericFileAttachmentProps> = ({
+export const GenericFileAttachment: FC<MessageAttachmentBase> = ({
 	title,
-	// collapsed: collapsedDefault = false,
 	description,
+	descriptionMd,
 	title_link: link,
 	title_link_download: hasDownload,
-	file: {
-		size,
-		// format,
-		// name,
-	} = {},
-	md,
+	size,
+	format,
 }) => {
-	// const [collapsed, collapse] = useCollapse(collapsedDefault);
 	const getURL = useMediaUrl();
-	return (
-		<Attachment>
-			{description && (
-				<AttachmentDescription>
-					{md ? <MessageContentBody md={md} /> : <MarkdownText parseEmoji variant='inline' content={description} />}
-				</AttachmentDescription>
-			)}
-			<AttachmentRow>
-				{hasDownload && link ? <AttachmentTitleLink link={getURL(link)} title={title} /> : <AttachmentTitle>{title}</AttachmentTitle>}
-				{size && <AttachmentSize size={size} />}
 
-				{hasDownload && link && <AttachmentDownload title={title} href={getURL(link)} />}
-			</AttachmentRow>
-		</Attachment>
+	return (
+		<>
+			{descriptionMd ? <MessageContentBody md={descriptionMd} /> : <MarkdownText parseEmoji content={description} />}
+			<MessageCollapsible title={title} hasDownload={hasDownload} link={link}>
+				<MessageGenericPreview style={{ maxWidth: 368, width: '100%' }}>
+					<MessageGenericPreviewContent
+						thumb={<MessageGenericPreviewIcon name='attachment-file' type={format || getFileExtension(title)} />}
+					>
+						<MessageGenericPreviewTitle externalUrl={hasDownload && link ? getURL(link) : undefined} data-qa-type='attachment-title-link'>
+							{title}
+						</MessageGenericPreviewTitle>
+						{size && (
+							<MessageGenericPreviewDescription>
+								<AttachmentSize size={size} wrapper={false} />
+							</MessageGenericPreviewDescription>
+						)}
+					</MessageGenericPreviewContent>
+				</MessageGenericPreview>
+			</MessageCollapsible>
+		</>
 	);
 };

apps/meteor/client/components/message/content/attachments/file/ImageAttachment.tsx

@@ -4,50 +4,34 @@ import type { FC } from 'react';
 import React from 'react';
 
 import MarkdownText from '../../../../MarkdownText';
+import MessageCollapsible from '../../../MessageCollapsible';
 import MessageContentBody from '../../../MessageContentBody';
-import { useCollapse } from '../../../hooks/useCollapse';
 import Attachment from '../structure/Attachment';
 import AttachmentContent from '../structure/AttachmentContent';
-import AttachmentDescription from '../structure/AttachmentDescription';
-import AttachmentDownload from '../structure/AttachmentDownload';
 import AttachmentImage from '../structure/AttachmentImage';
-import AttachmentRow from '../structure/AttachmentRow';
-import AttachmentSize from '../structure/AttachmentSize';
-import AttachmentTitle from '../structure/AttachmentTitle';
 import { useLoadImage } from './hooks/useLoadImage';
 
 export const ImageAttachment: FC<ImageAttachmentProps> = ({
 	title,
 	image_url: url,
 	image_preview: imagePreview,
-	collapsed: collapsedDefault = false,
 	image_size: size,
 	image_dimensions: imageDimensions = {
-		height: 360,
-		width: 480,
+		width: 368,
+		height: 368,
 	},
 	description,
+	descriptionMd,
 	title_link: link,
 	title_link_download: hasDownload,
-	md,
 }) => {
 	const [loadImage, setLoadImage] = useLoadImage();
-	const [collapsed, collapse] = useCollapse(collapsedDefault);
 	const getURL = useMediaUrl();
+
 	return (
 		<Attachment>
-			{description && (
-				<AttachmentDescription>
-					{md ? <MessageContentBody md={md} /> : <MarkdownText parseEmoji variant='inline' content={description} />}
-				</AttachmentDescription>
-			)}
-			<AttachmentRow>
-				<AttachmentTitle>{title}</AttachmentTitle>
-				{size && <AttachmentSize size={size} />}
-				{collapse}
-				{hasDownload && link && <AttachmentDownload title={title} href={getURL(link)} />}
-			</AttachmentRow>
-			{!collapsed && (
+			{descriptionMd ? <MessageContentBody md={descriptionMd} /> : <MarkdownText parseEmoji content={description} />}
+			<MessageCollapsible title={title} hasDownload={hasDownload} link={getURL(link || url)} size={size}>
 				<AttachmentContent>
 					<AttachmentImage
 						{...imageDimensions}
@@ -58,7 +42,7 @@ export const ImageAttachment: FC<ImageAttachmentProps> = ({
 						previewUrl={`data:image/png;base64,${imagePreview}`}
 					/>
 				</AttachmentContent>
-			)}
+			</MessageCollapsible>
 		</Attachment>
 	);
 };

apps/meteor/client/components/message/content/attachments/file/VideoAttachment.tsx

@@ -1,63 +1,36 @@
 import type { VideoAttachmentProps } from '@rocket.chat/core-typings';
-import { css } from '@rocket.chat/css-in-js';
-import { Box, Palette } from '@rocket.chat/fuselage';
+import { Box, MessageGenericPreview } from '@rocket.chat/fuselage';
 import { useMediaUrl } from '@rocket.chat/ui-contexts';
 import type { FC } from 'react';
 import React from 'react';
 
 import { userAgentMIMETypeFallback } from '../../../../../lib/utils/userAgentMIMETypeFallback';
 import MarkdownText from '../../../../MarkdownText';
+import MessageCollapsible from '../../../MessageCollapsible';
 import MessageContentBody from '../../../MessageContentBody';
-import { useCollapse } from '../../../hooks/useCollapse';
-import Attachment from '../structure/Attachment';
-import AttachmentContent from '../structure/AttachmentContent';
-import AttachmentDetails from '../structure/AttachmentDetails';
-import AttachmentDownload from '../structure/AttachmentDownload';
-import AttachmentRow from '../structure/AttachmentRow';
-import AttachmentSize from '../structure/AttachmentSize';
-import AttachmentTitle from '../structure/AttachmentTitle';
-
-const videoAttachmentCss = css`
-	border: 1px solid ${Palette.stroke['stroke-extra-light']} !important;
-	border-radius: 2px;
-	display: flex;
-	flex-direction: column;
-`;
 
 export const VideoAttachment: FC<VideoAttachmentProps> = ({
 	title,
 	video_url: url,
 	video_type: type,
-	collapsed: collapsedDefault = false,
 	video_size: size,
 	description,
+	descriptionMd,
 	title_link: link,
 	title_link_download: hasDownload,
-	md,
 }) => {
-	const [collapsed, collapse] = useCollapse(collapsedDefault);
 	const getURL = useMediaUrl();
 
 	return (
-		<Attachment>
-			<AttachmentRow>
-				<AttachmentTitle>{title}</AttachmentTitle>
-				{size && <AttachmentSize size={size} />}
-				{collapse}
-				{hasDownload && link && <AttachmentDownload title={title} href={getURL(link)} />}
-			</AttachmentRow>
-			{!collapsed && (
-				<AttachmentContent width='full' className={videoAttachmentCss}>
-					<Box is='video' width='full' controls preload='metadata'>
+		<>
+			{descriptionMd ? <MessageContentBody md={descriptionMd} /> : <MarkdownText parseEmoji content={description} />}
+			<MessageCollapsible title={title} hasDownload={hasDownload} link={getURL(link || url)} size={size}>
+				<MessageGenericPreview style={{ maxWidth: 368, width: '100%' }}>
+					<Box is='video' controls preload='metadata'>
 						<source src={getURL(url)} type={userAgentMIMETypeFallback(type)} />
 					</Box>
-					{description && (
-						<AttachmentDetails is='figcaption'>
-							{md ? <MessageContentBody md={md} /> : <MarkdownText parseEmoji variant='inline' content={description} />}
-						</AttachmentDetails>
-					)}
-				</AttachmentContent>
-			)}
-		</Attachment>
+				</MessageGenericPreview>
+			</MessageCollapsible>
+		</>
 	);
 };

apps/meteor/client/components/message/content/attachments/structure/AttachmentDownload.tsx

@@ -10,7 +10,7 @@ const AttachmentDownload: FC<AttachmentDownloadProps> = ({ title, href, ...props
 	const t = useTranslation();
 	return (
 		<Action
-			icon='download'
+			icon='cloud-arrow-down'
 			href={`${href}?download`}
 			title={t('Download')}
 			is='a'