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/AgentMessage.vue

@@ -17,8 +17,13 @@
         :message-type="messageType"
         :message="message.content"
       />
-      <div v-if="hasImage" class="chat-bubble has-attachment agent">
+      <div v-if="hasAttachment" class="chat-bubble has-attachment agent">
+        <file-bubble
+          v-if="message.attachment && message.attachment.file_type !== 'image'"
+          :url="message.attachment.data_url"
+        />
         <image-bubble
+          v-else
           :url="message.attachment.data_url"
           :thumb="message.attachment.thumb_url"
           :readable-time="readableTime"
@@ -35,6 +40,7 @@
 import AgentMessageBubble from 'widget/components/AgentMessageBubble';
 import timeMixin from 'dashboard/mixins/time';
 import ImageBubble from 'widget/components/ImageBubble';
+import FileBubble from 'widget/components/FileBubble';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail';
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
 
@@ -44,6 +50,7 @@ export default {
     AgentMessageBubble,
     Thumbnail,
     ImageBubble,
+    FileBubble,
   },
   mixins: [timeMixin],
   props: {
@@ -53,10 +60,8 @@ export default {
     },
   },
   computed: {
-    hasImage() {
-      const { attachment = {} } = this.message;
-      const { file_type: fileType } = attachment;
-      return fileType === 'image';
+    hasAttachment() {
+      return !!this.message.attachment;
     },
     showTextBubble() {
       const { message } = this;