feat: UI for unsupported message (#8660)

Display an unsupported message in UI when handling unsupported messages from channels like facebook, Instagram etc.

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
Co-authored-by: Sojan Jose <sojan@pepalo.com>

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -76,7 +76,11 @@
 
   &.left {
     .bubble {
-      @apply border border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-700 text-black-900 dark:text-slate-50 rounded-r-lg rounded-l mr-auto break-words;
+      @apply rounded-r-lg rounded-l mr-auto break-words;
+
+      &:not(.is-unsupported) {
+        @apply border border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-700 text-black-900 dark:text-slate-50
+      }
 
       &.is-image {
         @apply rounded-lg;

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

@@ -29,8 +29,19 @@
           :message-type="data.message_type"
           :parent-has-attachments="hasAttachments"
         />
+        <div v-if="isUnsupported">
+          <template v-if="isAFacebookInbox && isInstagram">
+            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE_INSTAGRAM') }}
+          </template>
+          <template v-else-if="isAFacebookInbox">
+            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE_FACEBOOK') }}
+          </template>
+          <template v-else>
+            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE') }}
+          </template>
+        </div>
         <bubble-text
-          v-if="data.content"
+          v-else-if="data.content"
           :message="message"
           :is-email="isEmailContentType"
           :display-quoted-button="displayQuotedButton"
@@ -176,6 +187,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    isAFacebookInbox: {
+      type: Boolean,
+      default: false,
+    },
+    isInstagram: {
+      type: Boolean,
+      default: false,
+    },
     isAWhatsAppChannel: {
       type: Boolean,
       default: false,
@@ -219,6 +238,7 @@ export default {
         this.hasAttachments ||
         this.data.content ||
         this.isEmailContentType ||
+        this.isUnsupported ||
         this.isAnIntegrationMessage
       );
     },
@@ -407,6 +427,7 @@ export default {
       return {
         bubble: this.isBubble,
         'is-private': this.data.private,
+        'is-unsupported': this.isUnsupported,
         'is-image': this.hasMediaAttachment('image'),
         'is-video': this.hasMediaAttachment('video'),
         'is-text': this.hasText,
@@ -415,6 +436,9 @@ export default {
         'is-email': this.isEmailContentType,
       };
     },
+    isUnsupported() {
+      return this.contentAttributes.is_unsupported ?? false;
+    },
     isPending() {
       return this.data.status === MESSAGE_STATUS.PROGRESS;
     },
@@ -426,11 +450,7 @@ export default {
       return !this.sender.type || this.sender.type === 'agent_bot';
     },
     shouldShowContextMenu() {
-      return !(this.isFailed || this.isPending);
+      return !(this.isFailed || this.isPending || this.isUnsupported);
-    },
-    errorMessage() {
-      const { meta } = this.data;
-      return meta ? meta.error : '';
     },
     showAvatar() {
       if (this.isOutgoing || this.isTemplate) {
@@ -532,6 +552,14 @@ export default {
   > .bubble {
     @apply min-w-[128px];
 
+    &.is-unsupported {
+      @apply text-xs max-w-[300px] border-dashed border border-slate-200 text-slate-600 dark:text-slate-200 bg-slate-50 dark:bg-slate-700 dark:border-slate-500;
+
+      .message-text--metadata .time {
+        @apply text-slate-400 dark:text-slate-300;
+      }
+    }
+
     &.is-image,
     &.is-video {
       @apply p-0 overflow-hidden;
@@ -544,10 +572,12 @@ export default {
         > video {
           @apply rounded-lg;
         }
+
         > video {
           @apply h-full w-full object-cover;
         }
       }
+
       .video {
         @apply h-[11.25rem];
       }
@@ -562,9 +592,11 @@ export default {
       .file--icon {
         @apply text-woot-400 dark:text-woot-400;
       }
+
       .text-block-title {
         @apply text-slate-700 dark:text-slate-700;
       }
+
       .download.button {
         @apply text-woot-400 dark:text-woot-400;
       }
@@ -573,6 +605,7 @@ export default {
     &.is-private.is-text > .message-text__wrap .link {
       @apply text-woot-600 dark:text-woot-200;
     }
+
     &.is-private.is-text > .message-text__wrap .prosemirror-mention-node {
       @apply font-bold bg-none rounded-sm p-0 bg-yellow-100 dark:bg-yellow-700 text-slate-700 dark:text-slate-25 underline;
     }
@@ -583,6 +616,7 @@ export default {
       .message-text--metadata .time {
         @apply text-violet-50 dark:text-violet-50;
       }
+
       &.is-private .message-text--metadata .time {
         @apply text-slate-400 dark:text-slate-400;
       }

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

@@ -32,6 +32,8 @@
         :is-a-tweet="isATweet"
         :is-a-whatsapp-channel="isAWhatsAppChannel"
         :is-web-widget-inbox="isAWebWidgetInbox"
+        :is-a-facebook-inbox="isAFacebookInbox"
+        :is-instagram="isInstagramDM"
         :inbox-supports-reply-to="inboxSupportsReplyTo"
         :in-reply-to="getInReplyToMessage(message)"
       />
@@ -54,6 +56,8 @@
         :is-a-tweet="isATweet"
         :is-a-whatsapp-channel="isAWhatsAppChannel"
         :is-web-widget-inbox="isAWebWidgetInbox"
+        :is-a-facebook-inbox="isAFacebookInbox"
+        :is-instagram-dm="isInstagramDM"
         :inbox-supports-reply-to="inboxSupportsReplyTo"
         :in-reply-to="getInReplyToMessage(message)"
       />
@@ -283,6 +287,9 @@ export default {
     unreadMessageCount() {
       return this.currentChat.unread_count || 0;
     },
+    isInstagramDM() {
+      return this.conversationType === 'instagram_direct_message';
+    },
     inboxSupportsReplyTo() {
       const incoming = this.inboxHasFeature(INBOX_FEATURES.REPLY_TO);
       const outgoing =

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -41,6 +41,9 @@
     "SAVE_CONTACT": "Save",
     "UPLOADING_ATTACHMENTS": "Uploading attachments...",
     "REPLIED_TO_STORY": "Replied to your story",
+    "UNSUPPORTED_MESSAGE": "This message is unsupported.",
+    "UNSUPPORTED_MESSAGE_FACEBOOK": "This message is unsupported. You can view this message on the Facebook Messenger app.",
+    "UNSUPPORTED_MESSAGE_INSTAGRAM": "This message is unsupported. You can view this message on the Instagram app.",
     "SUCCESS_DELETE_MESSAGE": "Message deleted successfully",
     "FAIL_DELETE_MESSSAGE": "Couldn't delete message! Try again",
     "NO_RESPONSE": "No response",