fix: Hide deleted messages on widget side (#2614)

app/javascript/widget/components/AgentMessage.vue

@@ -65,6 +65,7 @@ import FileBubble from 'widget/components/FileBubble';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail';
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
 import configMixin from '../mixins/configMixin';
+import messageMixin from '../mixins/messageMixin';
 import { isASubmittedFormMessage } from 'shared/helpers/MessageTypeHelper';
 export default {
   name: 'AgentMessage',
@@ -75,7 +76,7 @@ export default {
     UserMessage,
     FileBubble,
   },
-  mixins: [timeMixin, configMixin],
+  mixins: [timeMixin, configMixin, messageMixin],
   props: {
     message: {
       type: Object,
@@ -94,11 +95,6 @@ export default {
       if (!this.message.content) return false;
       return true;
     },
-    hasAttachments() {
-      return !!(
-        this.message.attachments && this.message.attachments.length > 0
-      );
-    },
     readableTime() {
       const { created_at: createdAt = '' } = this.message;
       return this.messageStamp(createdAt, 'LLL d yyyy, h:mm a');
@@ -111,10 +107,6 @@ export default {
       const { content_type: type = '' } = this.message;
       return type;
     },
-    messageContentAttributes() {
-      const { content_attributes: attribute = {} } = this.message;
-      return attribute;
-    },
     agentName() {
       if (this.message.message_type === MESSAGE_TYPE.TEMPLATE) {
         return 'Bot';
@@ -153,9 +145,8 @@ export default {
 
       if (this.messageContentAttributes.submitted_values) {
         if (this.contentType === 'input_select') {
-          const [
-            selectionOption = {},
-          ] = this.messageContentAttributes.submitted_values;
+          const [selectionOption = {}] =
+            this.messageContentAttributes.submitted_values;
           return { content: selectionOption.title || selectionOption.value };
         }
       }

app/javascript/widget/components/UserMessage.vue

@@ -37,6 +37,7 @@ import UserMessageBubble from 'widget/components/UserMessageBubble';
 import ImageBubble from 'widget/components/ImageBubble';
 import FileBubble from 'widget/components/FileBubble';
 import timeMixin from 'dashboard/mixins/time';
+import messageMixin from '../mixins/messageMixin';
 import { mapGetters } from 'vuex';
 
 export default {
@@ -46,7 +47,7 @@ export default {
     ImageBubble,
     FileBubble,
   },
-  mixins: [timeMixin],
+  mixins: [timeMixin, messageMixin],
   props: {
     message: {
       type: Object,
@@ -62,11 +63,6 @@ export default {
       const { status = '' } = this.message;
       return status === 'in_progress';
     },
-    hasAttachments() {
-      return !!(
-        this.message.attachments && this.message.attachments.length > 0
-      );
-    },
     showTextBubble() {
       const { message } = this;
       return !!message.content;