Add download function and file name to messages attachments (#489)

* Add download function and file name to messages attachments

* Fix linting errors

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,10 +1,14 @@
 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>
+    <AttachmentMetadata
+      attachment={attachment}
+      url={host + attachment.audio_url}
+    />
     <audio src={host + attachment.audio_url} width="100%" controls />
   </Box>
 );

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

@@ -1,10 +1,14 @@
 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>
+    <AttachmentMetadata
+      attachment={attachment}
+      url={host + attachment.image_url}
+    />
     <img
       src={host + attachment.image_url}
       style={{ maxWidth: '100%', objectFit: 'contain' }}

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

@@ -1,10 +1,14 @@
 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>
+    <AttachmentMetadata
+      attachment={attachment}
+      url={host + attachment.video_url}
+    />
     <video width={300} controls>
       <source src={host + attachment.video_url} type={attachment.video_type} />
     </video>

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';
 import At from './At';
 
 const icons = {
@@ -83,6 +84,7 @@ const icons = {
   'arrow-down': ArrowDown,
   'pin-filled': PinFilled,
   clipboard: Clipboard,
+  download: Download,
   at: At,
 };