Feature: Support file type messages on widget and dashboard (#659)

- Adds support for file upload

Co-authored-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>
Co-authored-by: Sojan <sojan@pepalo.com>

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -7,18 +7,11 @@
           :url="data.attachment.data_url"
           :readable-time="readableTime"
         />
-        <bubble-audio
-          v-if="data.attachment && data.attachment.file_type === 'audio'"
+        <bubble-file
+          v-if="data.attachment && data.attachment.file_type !== 'image'"
           :url="data.attachment.data_url"
           :readable-time="readableTime"
         />
-        <bubble-map
-          v-if="data.attachment && data.attachment.file_type === 'location'"
-          :lat="data.attachment.coordinates_lat"
-          :lng="data.attachment.coordinates_long"
-          :label="data.attachment.fallback_title"
-          :readable-time="readableTime"
-        />
         <bubble-text
           v-if="data.content"
           :message="message"
@@ -33,25 +26,25 @@
         />
       </p>
     </div>
-    <!-- <img v-if="showSenderData" src="https://chatwoot-staging.s3-us-west-2.amazonaws.com/uploads/avatar/contact/3415/thumb_10418362_10201264050880840_6087258728802054624_n.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=AKIAI3KBM2ES3VRHQHPQ%2F20170422%2Fus-west-2%2Fs3%2Faws4_request&amp;X-Amz-Date=20170422T075421Z&amp;X-Amz-Expires=604800&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=8d5ff60e41415515f59ff682b9a4e4c0574d9d9aabfeff1dc5a51087a9b49e03" class="sender--thumbnail"> -->
+    <!-- <img
+      src="https://randomuser.me/api/portraits/women/94.jpg"
+      class="sender--thumbnail"
+    /> -->
   </li>
 </template>
 <script>
-/* eslint-disable no-named-as-default */
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import getEmojiSVG from '../emoji/utils';
 import timeMixin from '../../../mixins/time';
 import BubbleText from './bubble/Text';
 import BubbleImage from './bubble/Image';
-import BubbleMap from './bubble/Map';
-import BubbleAudio from './bubble/Audio';
+import BubbleFile from './bubble/File';
 
 export default {
   components: {
     BubbleText,
     BubbleImage,
-    BubbleMap,
-    BubbleAudio,
+    BubbleFile,
   },
   mixins: [timeMixin, messageFormatterMixin],
   props: {

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -24,8 +24,8 @@
         @blur="onBlur()"
       />
       <file-upload
-        v-if="!showFileUpload"
-        accept="image/*"
+        v-if="showFileUpload"
+        :size="4096 * 4096"
         @input-file="onFileUpload"
       >
         <i
@@ -105,7 +105,6 @@ export default {
       message: '',
       isPrivate: false,
       showEmojiPicker: false,
-      showFileUpload: false,
       showCannedResponsesList: false,
       isUploading: {
         audio: false,
@@ -142,6 +141,9 @@ export default {
       }
       return 10000;
     },
+    showFileUpload() {
+      return this.channelType === 'Channel::WebWidget';
+    },
     replyButtonLabel() {
       if (this.isPrivate) {
         return this.$t('CONVERSATION.REPLYBOX.CREATE');
@@ -295,13 +297,7 @@ export default {
     onFileUpload(file) {
       this.isUploading.image = true;
       this.$store
-        .dispatch('sendAttachment', [
-          this.currentChat.id,
-          {
-            file_type: file.type,
-            file: file.file,
-          },
-        ])
+        .dispatch('sendAttachment', [this.currentChat.id, { file: file.file }])
         .then(() => {
           this.isUploading.image = false;
           this.$emit('scrollToMessage');

app/javascript/dashboard/components/widgets/conversation/bubble/File.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="file message-text__wrap" @click="openLink">
+    <div class="icon-wrap">
+      <i class="ion-document-text"></i>
+    </div>
+    <div class="meta">
+      <h5 class="text-block-title">
+        {{ decodeURI(fileName) }}
+      </h5>
+      <a
+        class="download clear button small"
+        rel="noreferrer noopener nofollow"
+        target="_blank"
+        :href="url"
+      >
+        {{ $t('CONVERSATION.DOWNLOAD') }}
+      </a>
+    </div>
+    <span class="time">{{ readableTime }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['url', 'readableTime'],
+  computed: {
+    fileName() {
+      const filename = this.url.substring(this.url.lastIndexOf('/') + 1);
+      return filename;
+    },
+  },
+  methods: {
+    openLink() {
+      const win = window.open(this.url, '_blank');
+      win.focus();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~dashboard/assets/scss/variables';
+
+.file {
+  display: flex;
+  flex-direction: row;
+  padding: $space-normal;
+  cursor: pointer;
+
+  .icon-wrap {
+    font-size: $font-size-giga;
+    color: $color-woot;
+    line-height: 1;
+    margin-left: $space-smaller;
+    margin-right: $space-slab;
+  }
+
+  .text-block-title {
+    margin: 0;
+  }
+
+  .button {
+    padding: 0;
+    margin: 0;
+  }
+
+  .meta {
+    padding-right: $space-two;
+  }
+}
+</style>