fix: resolve mention highlighting issue for "application" and "text" file types and improve design

packages/react/src/views/AttachmentHandler/Attachment.js

@@ -1,11 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/react';
-import { Box, Icon } from '@embeddedchat/ui-elements';
 import ImageAttachment from './ImageAttachment';
 import AudioAttachment from './AudioAttachment';
 import VideoAttachment from './VideoAttachment';
-import TextAttachment from './TextAttachment';
+import FileAttachment from './TextAttachment';
 
 const Attachment = ({ attachment, host, type, variantStyles = {}, msg }) => {
   const author = {
@@ -45,16 +43,6 @@ const Attachment = ({ attachment, host, type, variantStyles = {}, msg }) => {
       />
     );
   }
-  if (attachment && attachment.text) {
-    return (
-      <TextAttachment
-        attachment={attachment}
-        type={type}
-        author={author}
-        variantStyles={variantStyles}
-      />
-    );
-  }
   if (
     attachment.attachments &&
     Array.isArray(attachment.attachments) &&
@@ -101,16 +89,14 @@ const Attachment = ({ attachment, host, type, variantStyles = {}, msg }) => {
     );
   }
   return (
-    <Box
-      css={css`
-        display: flex;
-      `}
-    >
-      {attachment?.description}
-
-      <Icon name="file" size="20px" />
-      <a href={`${host}${attachment.title_link}`}>{attachment.title}</a>
-    </Box>
+    <FileAttachment
+      attachment={attachment}
+      type={type}
+      host={host}
+      msg={msg}
+      author={author}
+      variantStyles={variantStyles}
+    />
   );
 };
 

packages/react/src/views/AttachmentHandler/TextAttachment.js

@@ -1,145 +1,156 @@
-import React, { useContext } from 'react';
+import React, { useState, useContext } from 'react';
 import { css } from '@emotion/react';
 import PropTypes from 'prop-types';
-import { Box, Avatar, useTheme } from '@embeddedchat/ui-elements';
+import { Box, Avatar, useTheme, Icon } from '@embeddedchat/ui-elements';
+import AttachmentMetadata from './AttachmentMetadata';
 import RCContext from '../../context/RCInstance';
 
-const TextAttachment = ({ attachment, type, variantStyles = {} }) => {
+const FileAttachment = ({
+  attachment,
+  host,
+  type,
+  author,
+  variantStyles = {},
+  msg,
+}) => {
   const { RCInstance } = useContext(RCContext);
-  const getUserAvatarUrl = (authorIcon) => {
-    const host = RCInstance.getHost();
-    const URL = `${host}${authorIcon}`;
-    return URL;
+  const { theme } = useTheme();
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const getUserAvatarUrl = (icon) => {
+    const instanceHost = RCInstance.getHost();
+    return `${instanceHost}${icon}`;
   };
 
-  const { theme } = useTheme();
+  const { authorIcon, authorName } = author;
+
+  const toggleExpanded = () => {
+    setIsExpanded((prevState) => !prevState);
+  };
+
+  const formatFileSize = (bytes) => {
+    if (!bytes || bytes === 0) return '0 B';
+
+    const units = ['B', 'KB', 'MB', 'GB'];
+    const k = 1024;
+
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    const unitIndex = Math.min(i, units.length - 1);
+
+    const size = bytes / k ** unitIndex;
+    const decimals = unitIndex === 0 ? 0 : unitIndex === 1 ? 1 : 2;
+
+    return `${size.toFixed(decimals)} ${units[unitIndex]}`;
+  };
+
+  const getFileSizeWithFormat = (size, format) => {
+    const formattedSize = formatFileSize(size);
+    return format ? `${formattedSize} - ${format}` : formattedSize;
+  };
 
   return (
-    <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;
-        `,
-        (type ? variantStyles.pinnedContainer : variantStyles.quoteContainer) ||
-          css`
-            ${!type ? `border: 3px solid ${theme.colors.border};` : ''}
-          `,
-      ]}
-    >
+    <Box css={variantStyles.fileAttachmentContainer}>
       <Box
         css={[
           css`
-            display: flex;
-            gap: 0.3rem;
-            align-items: center;
+            border-radius: 4px;
+            line-height: 0;
+            padding: 0.5rem;
+            background: ${theme.colors.background};
           `,
-
-          variantStyles.textUserInfo,
+          (type ? variantStyles.pinnedContainer : '') ||
+            css`
+              ${type === 'file'
+                ? `border: 2px solid ${theme.colors.border};`
+                : ''}
+            `,
         ]}
       >
-        {attachment?.author_name && (
-          <>
+        {type === 'file' && (
+          <Box
+            css={[
+              css`
+                display: flex;
+                gap: 0.3rem;
+                align-items: center;
+              `,
+              variantStyles.textUserInfo,
+            ]}
+          >
             <Avatar
-              url={getUserAvatarUrl(attachment?.author_icon)}
+              url={getUserAvatarUrl(authorIcon)}
               alt="avatar"
               size="1.2em"
             />
-            <Box>@{attachment?.author_name}</Box>
-          </>
+            <Box>@{authorName}</Box>
+          </Box>
         )}
-      </Box>
-      <Box
-        css={css`
-          margin-top: 0.5rem;
-          white-space: pre-line;
-        `}
-      >
-        {attachment?.text
-          ? attachment.text[0] === '['
-            ? attachment.text.match(/\n(.*)/)?.[1] || ''
-            : attachment.text
-          : ''}
-        {attachment?.attachments &&
-          attachment.attachments.map((nestedAttachment, index) => (
+        <AttachmentMetadata
+          attachment={attachment}
+          url={host + attachment.title_link}
+          variantStyles={variantStyles}
+          msg={msg}
+          onExpandCollapseClick={toggleExpanded}
+          isExpanded={isExpanded}
+        />
+        {isExpanded && (
+          <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;
-                  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}
+              css={css`
+                display: flex;
+                flex-direction: column;
+                gap: 2px;
+                line-height: normal;
+              `}
             >
-              <Box
-                css={[
-                  css`
-                    display: flex;
-                    gap: 0.3rem;
-                    align-items: center;
-                  `,
-
-                  variantStyles.textUserInfo,
-                ]}
+              <a
+                href={host + attachment.title_link}
+                download={attachment.title_link_download}
+                css={css`
+                  text-decoration: none;
+                  font-size: 0.875rem;
+                  &:hover {
+                    text-decoration: underline;
+                  }
+                `}
               >
-                {nestedAttachment?.author_name && (
-                  <>
-                    <Avatar
-                      url={getUserAvatarUrl(nestedAttachment?.author_icon)}
-                      alt="avatar"
-                      size="1.2em"
-                    />
-                    <Box>@{nestedAttachment?.author_name}</Box>
-                  </>
-                )}
-              </Box>
+                {attachment.title}
+              </a>
               <Box
                 css={css`
-                  margin-top: 0.5rem;
-                  white-space: pre-line;
+                  font-size: 0.75rem;
                 `}
               >
-                {nestedAttachment?.text
-                  ? nestedAttachment.text[0] === '['
-                    ? nestedAttachment.text.match(/\n(.*)/)?.[1] || ''
-                    : nestedAttachment.text
-                  : ''}
+                {getFileSizeWithFormat(attachment.size, attachment.format)}
               </Box>
             </Box>
-          ))}
+          </Box>
+        )}
       </Box>
     </Box>
   );
 };
 
-export default TextAttachment;
+export default FileAttachment;
 
-TextAttachment.propTypes = {
+FileAttachment.propTypes = {
   attachment: PropTypes.object,
+  host: PropTypes.string,
+  type: PropTypes.string,
+  author: PropTypes.object,
+  variantStyles: PropTypes.object,
+  msg: PropTypes.object,
 };

packages/react/src/views/Message/BubbleVariant/Bubble.styles.js

@@ -93,6 +93,11 @@ export const getBubbleStyles = (theme) => {
       border-radius: inherit;
       overflow: hidden;
     `,
+    fileAttachmentContainer: css`
+      border: 1px solid ${theme.colors.border};
+      border-radius: inherit;
+      overflow: hidden;
+    `,
     pinnedContainer: css`
       max-width: 100%;
     `,