diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
index e538299aa..5cc3caa27 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ b/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;
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 34ad5f59f..8eb03137b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -29,8 +29,19 @@
:message-type="data.message_type"
:parent-has-attachments="hasAttachments"
/>
+
+
+ {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE_INSTAGRAM') }}
+
+
+ {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE_FACEBOOK') }}
+
+
+ {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE') }}
+
+
.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;
}
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index d9e255c6d..62eb6d739 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/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 =
diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json
index 19012abed..227c802d6 100644
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/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",