From 9352c030224059a865a7c0da1905e3940824ce86 Mon Sep 17 00:00:00 2001
From: Dhairyashil Shinde <93669429+dhairyashiil@users.noreply.github.com>
Date: Sun, 5 Jan 2025 16:17:56 +0530
Subject: [PATCH 1/2] Feat: Added 'Collapse & Uncollapse' Functionality for
 Audio, Video Messages & Image attachment (#772)

* BUG: Fix extra top space for audio and video messages to improve UI consistency

* Fix: Add padding for audio and video messages in nested attachments and quotes

* added conditional CSS handling the description present or absent case

* Same logic for conditional CSS but written in better way

* Feat: Add 'Collapse & Uncollapse' functionality for Audio and Video messages

* Feat: Add 'Collapse & Uncollapse' functionality

* Feat: Add 'Collapse & Uncollapse' functionality

* Added Collapse & Uncollapse Functionality for Image Attachment

* Using chevron-down, chevron-left instead of arrow-down, arrow-right
---
 .../AttachmentHandler/AttachmentMetadata.js   | 19 +++++++++-
 .../AttachmentHandler/AudioAttachment.js      | 14 ++++++-
 .../AttachmentHandler/ImageAttachment.js      | 30 ++++++++++-----
 .../AttachmentHandler/VideoAttachment.js      | 38 ++++++++++++-------
 4 files changed, 74 insertions(+), 27 deletions(-)

diff --git a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
index 5bd249ce5..390cab7b7 100644
--- a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
+++ b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
@@ -3,7 +3,14 @@ import { css } from '@emotion/react';
 import { ActionButton, Box } from '@embeddedchat/ui-elements';
 import { Markdown } from '../Markdown';
 
-const AttachmentMetadata = ({ attachment, url, variantStyles = {}, msg }) => {
+const AttachmentMetadata = ({
+  attachment,
+  url,
+  variantStyles = {},
+  msg,
+  onExpandCollapseClick,
+  isExpanded,
+}) => {
   const handleDownload = async () => {
     try {
       const response = await fetch(url);
@@ -78,6 +85,16 @@ const AttachmentMetadata = ({ attachment, url, variantStyles = {}, msg }) => {
         >
           {attachment.title}
         </p>
+        <ActionButton
+          ghost
+          icon={isExpanded ? 'chevron-down' : 'chevron-left'}
+          size="small"
+          onClick={onExpandCollapseClick}
+          css={css`
+            margin-left: 10px;
+            margin-top: ${attachment.description ? '3px' : '13px'};
+          `}
+        />
         <ActionButton
           ghost
           icon="download"
diff --git a/packages/react/src/views/AttachmentHandler/AudioAttachment.js b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
index b88d0a41d..8e3ce527a 100644
--- a/packages/react/src/views/AttachmentHandler/AudioAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import { Box, Avatar, useTheme } from '@embeddedchat/ui-elements';
@@ -21,6 +21,12 @@ const AudioAttachment = ({
     return URL;
   };
   const { authorIcon, authorName } = author;
+
+  const [isExpanded, setIsExpanded] = useState(true);
+  const toggleExpanded = () => {
+    setIsExpanded((prevState) => !prevState);
+  };
+
   return (
     <Box>
       <Box
@@ -66,8 +72,12 @@ const AudioAttachment = ({
           url={host + (attachment.title_url || attachment.audio_url)}
           variantStyles={variantStyles}
           msg={msg}
+          onExpandCollapseClick={toggleExpanded}
+          isExpanded={isExpanded}
         />
-        <audio src={host + attachment.audio_url} width="100%" controls />
+        {isExpanded && (
+          <audio src={host + attachment.audio_url} width="100%" controls />
+        )}
 
         {attachment.attachments &&
           attachment.attachments.map((nestedAttachment, index) => (
diff --git a/packages/react/src/views/AttachmentHandler/ImageAttachment.js b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
index 04a2addc4..5f95829df 100644
--- a/packages/react/src/views/AttachmentHandler/ImageAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
@@ -30,10 +30,14 @@ const ImageAttachment = ({
 
   const { authorIcon, authorName } = author;
 
+  const [isExpanded, setIsExpanded] = useState(true);
+  const toggleExpanded = () => {
+    setIsExpanded((prevState) => !prevState);
+  };
+
   return (
     <Box css={variantStyles.imageAttachmentContainer}>
       <Box
-        onClick={() => setShowGallery(true)}
         css={[
           css`
             cursor: pointer;
@@ -77,16 +81,22 @@ const ImageAttachment = ({
           url={host + (attachment.title_link || attachment.image_url)}
           variantStyles={variantStyles}
           msg={msg}
+          onExpandCollapseClick={toggleExpanded}
+          isExpanded={isExpanded}
         />
-        <img
-          src={host + attachment.image_url}
-          style={{
-            maxWidth: '100%',
-            objectFit: 'contain',
-            borderBottomLeftRadius: 'inherit',
-            borderBottomRightRadius: 'inherit',
-          }}
-        />
+        {isExpanded && (
+          <Box onClick={() => setShowGallery(true)}>
+            <img
+              src={host + attachment.image_url}
+              style={{
+                maxWidth: '100%',
+                objectFit: 'contain',
+                borderBottomLeftRadius: 'inherit',
+                borderBottomRightRadius: 'inherit',
+              }}
+            />
+          </Box>
+        )}
         {attachment.attachments &&
           attachment.attachments.map((nestedAttachment, index) => (
             <Box css={variantStyles.imageAttachmentContainer} key={index}>
diff --git a/packages/react/src/views/AttachmentHandler/VideoAttachment.js b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
index 0b364b1a2..4407481ee 100644
--- a/packages/react/src/views/AttachmentHandler/VideoAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import { Box, Avatar, useTheme } from '@embeddedchat/ui-elements';
@@ -31,6 +31,12 @@ const VideoAttachment = ({
     return URL;
   };
   const { authorIcon, authorName } = author;
+
+  const [isExpanded, setIsExpanded] = useState(true);
+  const toggleExpanded = () => {
+    setIsExpanded((prevState) => !prevState);
+  };
+
   return (
     <Box css={variantStyles.videoAttachmentContainer}>
       <Box
@@ -76,20 +82,24 @@ const VideoAttachment = ({
           url={host + (attachment.title_url || attachment.video_url)}
           variantStyles={variantStyles}
           msg={msg}
+          onExpandCollapseClick={toggleExpanded}
+          isExpanded={isExpanded}
         />
-        <video
-          width={300}
-          controls
-          style={{
-            borderBottomLeftRadius: 'inherit',
-            borderBottomRightRadius: 'inherit',
-          }}
-        >
-          <source
-            src={host + attachment.video_url}
-            type={userAgentMIMETypeFallback(attachment.video_type)}
-          />
-        </video>
+        {isExpanded && (
+          <video
+            width={300}
+            controls
+            style={{
+              borderBottomLeftRadius: 'inherit',
+              borderBottomRightRadius: 'inherit',
+            }}
+          >
+            <source
+              src={host + attachment.video_url}
+              type={userAgentMIMETypeFallback(attachment.video_type)}
+            />
+          </video>
+        )}
         {attachment.attachments &&
           attachment.attachments.map((nestedAttachment, index) => (
             <Box css={variantStyles.videoAttachmentContainer} key={index}>

From ad7fefd70556d6f7d97dda26d24d45bb733b3a5a Mon Sep 17 00:00:00 2001
From: Smriti Doneria <smritidoneria@gmail.com>
Date: Sun, 5 Jan 2025 16:25:06 +0530
Subject: [PATCH 2/2] fix (#704)

---
 packages/react/src/views/Message/MessageToolbox.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/views/Message/MessageToolbox.js b/packages/react/src/views/Message/MessageToolbox.js
index 710be2b5a..f276ef82c 100644
--- a/packages/react/src/views/Message/MessageToolbox.js
+++ b/packages/react/src/views/Message/MessageToolbox.js
@@ -129,7 +129,7 @@ export const MessageToolbox = ({
         id: 'pin',
         onClick: () => handlePinMessage(message),
         iconName: message.pinned ? 'pin-filled' : 'pin',
-        visible: !isThreadMessage && isAllowedToPin,
+        visible: isAllowedToPin,
       },
       edit: {
         label: 'Edit',