From a9d701c276cbc234992d21d5abddc3ab6ddc574b Mon Sep 17 00:00:00 2001
From: AyushKumar123456789 <ayushjitendra28@gmail.com>
Date: Mon, 3 Feb 2025 06:46:52 +0000
Subject: [PATCH 1/3] fix:File attachement UI

---
 packages/react/src/views/AttachmentHandler/Attachment.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/src/views/AttachmentHandler/Attachment.js b/packages/react/src/views/AttachmentHandler/Attachment.js
index ec752e9bcd..267dfe72e0 100644
--- a/packages/react/src/views/AttachmentHandler/Attachment.js
+++ b/packages/react/src/views/AttachmentHandler/Attachment.js
@@ -104,6 +104,7 @@ const Attachment = ({ attachment, host, type, variantStyles = {}, msg }) => {
     <Box
       css={css`
         display: flex;
+        flex-direction: column;
       `}
     >
       {attachment?.description}

From 9fe44599434ef40364ba9532bed255d154e4a674 Mon Sep 17 00:00:00 2001
From: AyushKumar123456789 <ayushjitendra28@gmail.com>
Date: Mon, 3 Feb 2025 10:28:33 +0000
Subject: [PATCH 2/3] fix(attachments): add collapse button and fix multi-line
 description overlap for file/audio attachments

---
 .../src/views/AttachmentHandler/Attachment.js |  22 +-
 .../AttachmentHandler/AudioAttachment.js      |   2 -
 .../views/AttachmentHandler/FileAttachment.js | 194 ++++++++++++++++++
 .../AttachmentHandler/ImageAttachment.js      |   2 -
 .../AttachmentHandler/VideoAttachment.js      |   2 -
 5 files changed, 203 insertions(+), 19 deletions(-)
 create mode 100644 packages/react/src/views/AttachmentHandler/FileAttachment.js

diff --git a/packages/react/src/views/AttachmentHandler/Attachment.js b/packages/react/src/views/AttachmentHandler/Attachment.js
index 267dfe72e0..545ca4a721 100644
--- a/packages/react/src/views/AttachmentHandler/Attachment.js
+++ b/packages/react/src/views/AttachmentHandler/Attachment.js
@@ -1,11 +1,10 @@
 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 './FileAttachment';
 
 const Attachment = ({ attachment, host, type, variantStyles = {}, msg }) => {
   const author = {
@@ -101,17 +100,14 @@ const Attachment = ({ attachment, host, type, variantStyles = {}, msg }) => {
     );
   }
   return (
-    <Box
-      css={css`
-        display: flex;
-        flex-direction: column;
-      `}
-    >
-      {attachment?.description}
-
-      <Icon name="file" size="20px" />
-      <a href={`${host}${attachment.title_link}`}>{attachment.title}</a>
-    </Box>
+    <FileAttachment
+      attachment={attachment}
+      host={host}
+      type="file"
+      author={author}
+      variantStyles={variantStyles}
+      msg={msg}
+    />
   );
 };
 
diff --git a/packages/react/src/views/AttachmentHandler/AudioAttachment.js b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
index 5caf16e760..57612fac2f 100644
--- a/packages/react/src/views/AttachmentHandler/AudioAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
@@ -32,7 +32,6 @@ const AudioAttachment = ({
       <Box
         css={[
           css`
-            line-height: 0;
             border-radius: inherit;
             padding: 0.5rem;
           `,
@@ -89,7 +88,6 @@ const AudioAttachment = ({
               <Box
                 css={[
                   css`
-                    line-height: 0;
                     border-radius: inherit;
                     padding: 0.5rem;
                   `,
diff --git a/packages/react/src/views/AttachmentHandler/FileAttachment.js b/packages/react/src/views/AttachmentHandler/FileAttachment.js
new file mode 100644
index 0000000000..e99463a0be
--- /dev/null
+++ b/packages/react/src/views/AttachmentHandler/FileAttachment.js
@@ -0,0 +1,194 @@
+import React, { useState, useContext } from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/react';
+import { Box, Avatar, Icon, useTheme } from '@embeddedchat/ui-elements';
+import AttachmentMetadata from './AttachmentMetadata';
+import RCContext from '../../context/RCInstance';
+
+const FileAttachment = ({
+  attachment,
+  host,
+  type,
+  author,
+  variantStyles = {},
+  msg,
+}) => {
+  const { RCInstance } = useContext(RCContext);
+  const { theme } = useTheme();
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const { authorIcon, authorName } = author || {};
+
+  const getUserAvatarUrl = (icon) => {
+    const instanceHost = RCInstance.getHost();
+    return `${instanceHost}${icon}`;
+  };
+
+  const toggleExpanded = () => {
+    setIsExpanded((prev) => !prev);
+  };
+
+  const fileUrl = host + attachment.title_link;
+
+  return (
+    <Box css={variantStyles.fileAttachmentContainer}>
+      <Box
+        css={[
+          css`
+            border-radius: inherit;
+            padding: 0.5rem;
+          `,
+          type === 'file'
+            ? css`
+                border-radius: inherit;
+                padding: 0.5rem;
+              `
+            : null,
+        ]}
+      >
+        {type === 'file' && (
+          <Box
+            css={[
+              css`
+                display: flex;
+                gap: 0.3rem;
+                align-items: center;
+                margin-bottom: 4px;
+              `,
+              variantStyles.textUserInfo,
+            ]}
+          >
+            {authorIcon && (
+              <Avatar
+                url={getUserAvatarUrl(authorIcon)}
+                alt="avatar"
+                size="1.2em"
+              />
+            )}
+            {authorName && <Box>@{authorName}</Box>}
+          </Box>
+        )}
+
+        <AttachmentMetadata
+          attachment={attachment}
+          url={fileUrl}
+          variantStyles={variantStyles}
+          msg={msg}
+          onExpandCollapseClick={toggleExpanded}
+          isExpanded={isExpanded}
+        />
+
+        {isExpanded && (
+          <Box
+            css={css`
+              display: flex;
+              align-items: center;
+              margin-top: 6px;
+              border: 1px solid ${theme.colors.border};
+              border-radius: ${theme.radius};
+              padding: 0.5rem;
+              gap: 0.5rem;
+            `}
+          >
+            <Icon name="file" size="20px" />
+            <a
+              href={fileUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              css={css`
+                margin-left: 6px;
+                text-decoration: underline;
+              `}
+            >
+              {attachment.title}
+            </a>
+          </Box>
+        )}
+
+        {attachment.attachments &&
+          attachment.attachments.map((nestedAttachment, index) => {
+            const nestedFileUrl = host + nestedAttachment.title_link;
+
+            return (
+              <Box
+                key={index}
+                css={[
+                  css`
+                    margin-top: 1rem;
+                    border-radius: inherit;
+                    padding: 0.5rem;
+                  `,
+                  nestedAttachment.type === 'file'
+                    ? css`
+                        border: 2px solid ${theme.colors.border};
+                      `
+                    : null,
+                ]}
+              >
+                {nestedAttachment.author_icon && (
+                  <Box
+                    css={[
+                      css`
+                        display: flex;
+                        gap: 0.3rem;
+                        align-items: center;
+                        margin-bottom: 4px;
+                      `,
+                      variantStyles.textUserInfo,
+                    ]}
+                  >
+                    <Avatar
+                      url={getUserAvatarUrl(nestedAttachment.author_icon)}
+                      alt="avatar"
+                      size="1.2em"
+                    />
+                    <Box>@{nestedAttachment.author_name}</Box>
+                  </Box>
+                )}
+
+                <AttachmentMetadata
+                  attachment={nestedAttachment}
+                  url={nestedFileUrl}
+                  variantStyles={variantStyles}
+                />
+                <Box
+                  css={css`
+                    display: flex;
+                    align-items: center;
+                    margin-top: 6px;
+                  `}
+                >
+                  <Icon name="file" size="20px" />
+                  <a
+                    href={nestedFileUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    css={css`
+                      margin-left: 6px;
+                      text-decoration: underline;
+                    `}
+                  >
+                    {nestedAttachment.title}
+                  </a>
+                </Box>
+              </Box>
+            );
+          })}
+      </Box>
+    </Box>
+  );
+};
+
+FileAttachment.propTypes = {
+  attachment: PropTypes.object,
+  host: PropTypes.string,
+  type: PropTypes.string,
+  author: PropTypes.shape({
+    authorIcon: PropTypes.string,
+    authorName: PropTypes.string,
+  }),
+  variantStyles: PropTypes.object,
+  msg: PropTypes.object,
+};
+
+export default FileAttachment;
diff --git a/packages/react/src/views/AttachmentHandler/ImageAttachment.js b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
index 5f95829df0..a05677a5ec 100644
--- a/packages/react/src/views/AttachmentHandler/ImageAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
@@ -42,7 +42,6 @@ const ImageAttachment = ({
           css`
             cursor: pointer;
             border-radius: inherit;
-            line-height: 0;
             padding: 0.5rem;
           `,
           (type ? variantStyles.pinnedContainer : '') ||
@@ -106,7 +105,6 @@ const ImageAttachment = ({
                   css`
                     cursor: pointer;
                     border-radius: inherit;
-                    line-height: 0;
                     padding: 0.5rem;
                   `,
                   (nestedAttachment.attachments[0].type
diff --git a/packages/react/src/views/AttachmentHandler/VideoAttachment.js b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
index 5c29bc507b..3df18d0d1f 100644
--- a/packages/react/src/views/AttachmentHandler/VideoAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
@@ -42,7 +42,6 @@ const VideoAttachment = ({
       <Box
         css={[
           css`
-            line-height: 0;
             border-radius: inherit;
             padding: 0.5rem;
           `,
@@ -107,7 +106,6 @@ const VideoAttachment = ({
               <Box
                 css={[
                   css`
-                    line-height: 0;
                     border-radius: inherit;
                     padding: 0.5rem;
                   `,

From ddf4a5713e45ceeedc3439dd976f069ccfd9aae6 Mon Sep 17 00:00:00 2001
From: AyushKumar123456789 <ayushjitendra28@gmail.com>
Date: Sun, 9 Feb 2025 17:28:54 +0000
Subject: [PATCH 3/3] Remove file attachment part updation

---
 .../src/views/AttachmentHandler/Attachment.js |  21 +-
 .../views/AttachmentHandler/FileAttachment.js | 194 ------------------
 2 files changed, 12 insertions(+), 203 deletions(-)
 delete mode 100644 packages/react/src/views/AttachmentHandler/FileAttachment.js

diff --git a/packages/react/src/views/AttachmentHandler/Attachment.js b/packages/react/src/views/AttachmentHandler/Attachment.js
index 545ca4a721..ec752e9bcd 100644
--- a/packages/react/src/views/AttachmentHandler/Attachment.js
+++ b/packages/react/src/views/AttachmentHandler/Attachment.js
@@ -1,10 +1,11 @@
 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 './FileAttachment';
 
 const Attachment = ({ attachment, host, type, variantStyles = {}, msg }) => {
   const author = {
@@ -100,14 +101,16 @@ const Attachment = ({ attachment, host, type, variantStyles = {}, msg }) => {
     );
   }
   return (
-    <FileAttachment
-      attachment={attachment}
-      host={host}
-      type="file"
-      author={author}
-      variantStyles={variantStyles}
-      msg={msg}
-    />
+    <Box
+      css={css`
+        display: flex;
+      `}
+    >
+      {attachment?.description}
+
+      <Icon name="file" size="20px" />
+      <a href={`${host}${attachment.title_link}`}>{attachment.title}</a>
+    </Box>
   );
 };
 
diff --git a/packages/react/src/views/AttachmentHandler/FileAttachment.js b/packages/react/src/views/AttachmentHandler/FileAttachment.js
deleted file mode 100644
index e99463a0be..0000000000
--- a/packages/react/src/views/AttachmentHandler/FileAttachment.js
+++ /dev/null
@@ -1,194 +0,0 @@
-import React, { useState, useContext } from 'react';
-import PropTypes from 'prop-types';
-import { css } from '@emotion/react';
-import { Box, Avatar, Icon, useTheme } from '@embeddedchat/ui-elements';
-import AttachmentMetadata from './AttachmentMetadata';
-import RCContext from '../../context/RCInstance';
-
-const FileAttachment = ({
-  attachment,
-  host,
-  type,
-  author,
-  variantStyles = {},
-  msg,
-}) => {
-  const { RCInstance } = useContext(RCContext);
-  const { theme } = useTheme();
-  const [isExpanded, setIsExpanded] = useState(true);
-
-  const { authorIcon, authorName } = author || {};
-
-  const getUserAvatarUrl = (icon) => {
-    const instanceHost = RCInstance.getHost();
-    return `${instanceHost}${icon}`;
-  };
-
-  const toggleExpanded = () => {
-    setIsExpanded((prev) => !prev);
-  };
-
-  const fileUrl = host + attachment.title_link;
-
-  return (
-    <Box css={variantStyles.fileAttachmentContainer}>
-      <Box
-        css={[
-          css`
-            border-radius: inherit;
-            padding: 0.5rem;
-          `,
-          type === 'file'
-            ? css`
-                border-radius: inherit;
-                padding: 0.5rem;
-              `
-            : null,
-        ]}
-      >
-        {type === 'file' && (
-          <Box
-            css={[
-              css`
-                display: flex;
-                gap: 0.3rem;
-                align-items: center;
-                margin-bottom: 4px;
-              `,
-              variantStyles.textUserInfo,
-            ]}
-          >
-            {authorIcon && (
-              <Avatar
-                url={getUserAvatarUrl(authorIcon)}
-                alt="avatar"
-                size="1.2em"
-              />
-            )}
-            {authorName && <Box>@{authorName}</Box>}
-          </Box>
-        )}
-
-        <AttachmentMetadata
-          attachment={attachment}
-          url={fileUrl}
-          variantStyles={variantStyles}
-          msg={msg}
-          onExpandCollapseClick={toggleExpanded}
-          isExpanded={isExpanded}
-        />
-
-        {isExpanded && (
-          <Box
-            css={css`
-              display: flex;
-              align-items: center;
-              margin-top: 6px;
-              border: 1px solid ${theme.colors.border};
-              border-radius: ${theme.radius};
-              padding: 0.5rem;
-              gap: 0.5rem;
-            `}
-          >
-            <Icon name="file" size="20px" />
-            <a
-              href={fileUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              css={css`
-                margin-left: 6px;
-                text-decoration: underline;
-              `}
-            >
-              {attachment.title}
-            </a>
-          </Box>
-        )}
-
-        {attachment.attachments &&
-          attachment.attachments.map((nestedAttachment, index) => {
-            const nestedFileUrl = host + nestedAttachment.title_link;
-
-            return (
-              <Box
-                key={index}
-                css={[
-                  css`
-                    margin-top: 1rem;
-                    border-radius: inherit;
-                    padding: 0.5rem;
-                  `,
-                  nestedAttachment.type === 'file'
-                    ? css`
-                        border: 2px solid ${theme.colors.border};
-                      `
-                    : null,
-                ]}
-              >
-                {nestedAttachment.author_icon && (
-                  <Box
-                    css={[
-                      css`
-                        display: flex;
-                        gap: 0.3rem;
-                        align-items: center;
-                        margin-bottom: 4px;
-                      `,
-                      variantStyles.textUserInfo,
-                    ]}
-                  >
-                    <Avatar
-                      url={getUserAvatarUrl(nestedAttachment.author_icon)}
-                      alt="avatar"
-                      size="1.2em"
-                    />
-                    <Box>@{nestedAttachment.author_name}</Box>
-                  </Box>
-                )}
-
-                <AttachmentMetadata
-                  attachment={nestedAttachment}
-                  url={nestedFileUrl}
-                  variantStyles={variantStyles}
-                />
-                <Box
-                  css={css`
-                    display: flex;
-                    align-items: center;
-                    margin-top: 6px;
-                  `}
-                >
-                  <Icon name="file" size="20px" />
-                  <a
-                    href={nestedFileUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    css={css`
-                      margin-left: 6px;
-                      text-decoration: underline;
-                    `}
-                  >
-                    {nestedAttachment.title}
-                  </a>
-                </Box>
-              </Box>
-            );
-          })}
-      </Box>
-    </Box>
-  );
-};
-
-FileAttachment.propTypes = {
-  attachment: PropTypes.object,
-  host: PropTypes.string,
-  type: PropTypes.string,
-  author: PropTypes.shape({
-    authorIcon: PropTypes.string,
-    authorName: PropTypes.string,
-  }),
-  variantStyles: PropTypes.object,
-  msg: PropTypes.object,
-};
-
-export default FileAttachment;