Add download function and file name to messages attachments

packages/react/src/components/Attachments/AttachmentMetadata.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { ActionButton } from '../ActionButton';
+import { Box } from '../Box';
+
+const AttachmentMetadata = ({ attachment, url }) => {
+  const handleDownload = () => {
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = attachment.title;
+
+    document.body.appendChild(anchor);
+    anchor.click();
+    document.body.removeChild(anchor);
+  };
+
+  return (
+    <>
+      <p style={{ margin: 0 }}>{attachment.description}</p>
+      <Box
+        style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}
+      >
+        <p style={{ margin: 0, color: 'grey' }}>{attachment.title}</p>
+        <ActionButton
+          ghost
+          icon="download"
+          size="small"
+          onClick={handleDownload}
+          style={{
+            marginLeft: '10px',
+            marginTop: '5px',
+            color: 'grey',
+          }}
+        />
+      </Box>
+    </>
+  );
+};
+
+export default AttachmentMetadata;

packages/react/src/components/Attachments/AudioAttachment.js

@@ -1,13 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '../Box';
+import AttachmentMetadata from './AttachmentMetadata';
 
-const AudioAttachment = ({ attachment, host }) => (
-  <Box>
-    <p>{attachment?.description}</p>
-    <audio src={host + attachment.audio_url} width="100%" controls />
-  </Box>
-);
+const AudioAttachment = ({ attachment, host }) => {
+  return (
+    <Box>
+      <AttachmentMetadata
+        attachment={attachment}
+        url={host + attachment.audio_url}
+      />
+      <audio src={host + attachment.audio_url} width="100%" controls />
+    </Box>
+  );
+};
 
 export default AudioAttachment;
 

packages/react/src/components/Attachments/ImageAttachment.js

@@ -1,16 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '../Box';
+import AttachmentMetadata from './AttachmentMetadata';
 
-const ImageAttachment = ({ attachment, host }) => (
-  <Box>
-    <p>{attachment?.description}</p>
-    <img
-      src={host + attachment.image_url}
-      style={{ maxWidth: '100%', objectFit: 'contain' }}
-    />
-  </Box>
-);
+const ImageAttachment = ({ attachment, host }) => {
+  return (
+    <Box>
+      <AttachmentMetadata
+        attachment={attachment}
+        url={host + attachment.image_url}
+      />
+      <img
+        src={host + attachment.image_url}
+        style={{ maxWidth: '100%', objectFit: 'contain' }}
+      />
+    </Box>
+  );
+};
 
 export default ImageAttachment;
 

packages/react/src/components/Attachments/VideoAttachment.js

@@ -1,15 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '../Box';
+import AttachmentMetadata from './AttachmentMetadata';
 
-const VideoAttachment = ({ attachment, host }) => (
-  <Box>
-    <p>{attachment?.description}</p>
-    <video width={300} controls>
-      <source src={host + attachment.video_url} type={attachment.video_type} />
-    </video>
-  </Box>
-);
+const VideoAttachment = ({ attachment, host }) => {
+  return (
+    <Box>
+      <AttachmentMetadata
+        attachment={attachment}
+        url={host + attachment.video_url}
+      />
+      <video width={300} controls>
+        <source
+          src={host + attachment.video_url}
+          type={attachment.video_type}
+        />
+      </video>
+    </Box>
+  );
+};
 
 export default VideoAttachment;
 

packages/react/src/components/Icon/icons/index.js

@@ -39,6 +39,7 @@ import PinFilled from './PinFilled';
 import VideoRecorder from './VideoRecoder';
 import DisabledRecorder from './DisableRecorder';
 import Clipboard from './Clipboard';
+import Download from './Download';
 
 const icons = {
   file: File,
@@ -82,6 +83,7 @@ const icons = {
   'arrow-down': ArrowDown,
   'pin-filled': PinFilled,
   clipboard: Clipboard,
+  download: Download,
 };
 
 export default icons;