Merge branch 'develop' into feat/ui-lib

app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue

@@ -1,5 +1,23 @@
 <script setup>
+import { computed } from 'vue';
+import { useMessageContext } from '../provider.js';
+import { useInbox } from 'dashboard/composables/useInbox';
 import BaseBubble from './Base.vue';
+
+const { inboxId } = useMessageContext();
+
+const { isAFacebookInbox, isAnInstagramChannel, isATiktokChannel } = useInbox(
+  inboxId.value
+);
+
+const unsupportedMessageKey = computed(() => {
+  if (isAFacebookInbox.value)
+    return 'CONVERSATION.UNSUPPORTED_MESSAGE_FACEBOOK';
+  if (isAnInstagramChannel.value)
+    return 'CONVERSATION.UNSUPPORTED_MESSAGE_INSTAGRAM';
+  if (isATiktokChannel.value) return 'CONVERSATION.UNSUPPORTED_MESSAGE_TIKTOK';
+  return 'CONVERSATION.UNSUPPORTED_MESSAGE';
+});
 </script>
 
 <template>
@@ -7,6 +25,6 @@ import BaseBubble from './Base.vue';
     class="px-[var(--bubble-padding-x)] py-[var(--bubble-padding-y)] text-sm"
     data-bubble-name="unsupported"
   >
-    {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE') }}
+    {{ $t(unsupportedMessageKey) }}
   </BaseBubble>
 </template>