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/widget/components/UserMessage.vue

@@ -6,8 +6,14 @@
         :message="message.content"
         :status="message.status"
       />
-      <div v-if="hasImage" class="chat-bubble has-attachment user">
+      <div v-if="hasAttachment" class="chat-bubble has-attachment user">
+        <file-bubble
+          v-if="message.attachment && message.attachment.file_type !== 'image'"
+          :url="message.attachment.data_url"
+          :is-in-progress="isInProgress"
+        />
         <image-bubble
+          v-else
           :url="message.attachment.data_url"
           :thumb="message.attachment.thumb_url"
           :readable-time="readableTime"
@@ -20,6 +26,7 @@
 <script>
 import UserMessageBubble from 'widget/components/UserMessageBubble';
 import ImageBubble from 'widget/components/ImageBubble';
+import FileBubble from 'widget/components/FileBubble';
 import timeMixin from 'dashboard/mixins/time';
 
 export default {
@@ -27,6 +34,7 @@ export default {
   components: {
     UserMessageBubble,
     ImageBubble,
+    FileBubble,
   },
   mixins: [timeMixin],
   props: {
@@ -40,11 +48,8 @@ export default {
       const { status = '' } = this.message;
       return status === 'in_progress';
     },
-    hasImage() {
-      const { attachment = {} } = this.message;
-      const { file_type: fileType } = attachment;
-
-      return fileType === 'image';
+    hasAttachment() {
+      return !!this.message.attachment;
     },
     showTextBubble() {
       const { message } = this;
@@ -94,5 +99,14 @@ export default {
     padding: 0;
     overflow: hidden;
   }
+  .user.has-attachment {
+    .icon-wrap {
+      color: $color-white;
+    }
+
+    .download {
+      opacity: 0.8;
+    }
+  }
 }
 </style>