fix(facebook): render shared links as fallback attachments (#14554)

Fixes Facebook fallback and shared-post attachments so they render as
clickable links in conversations.

Closes:
- https://github.com/chatwoot/chatwoot/issues/4767
- https://github.com/chatwoot/chatwoot/issues/5327

Why:
Facebook can send shared links as `fallback` attachments with a
top-level `url`, and shared posts as `share` attachments with the URL
under `payload.url`. The current flow either misses the nested URL or
treats `share` as downloadable media, so these messages do not render
correctly.

What changed:
- Store Facebook fallback URLs from either `attachment.url` or
`attachment.payload.url`.
- Treat Facebook `share` attachments as fallback link attachments
instead of downloading them as files.
- Render fallback attachments in the next message bubble UI as clickable
links.

How to test:
1. Connect a Facebook inbox.
2. Send a shared link to the page.
3. Send/share a Facebook post to the page.
4. Open the conversation in Chatwoot.
5. Confirm both messages appear as clickable link bubbles.

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/components-next/message/Message.vue

@@ -31,6 +31,7 @@ import FileBubble from './bubbles/File.vue';
 import AudioBubble from './bubbles/Audio.vue';
 import VideoBubble from './bubbles/Video.vue';
 import EmbedBubble from './bubbles/Embed.vue';
+import FallbackBubble from './bubbles/Fallback.vue';
 import InstagramStoryBubble from './bubbles/InstagramStory.vue';
 import EmailBubble from './bubbles/Email/Index.vue';
 import UnsupportedBubble from './bubbles/Unsupported.vue';
@@ -328,6 +329,8 @@ const componentToRender = computed(() => {
   if (Array.isArray(props.attachments) && props.attachments.length === 1) {
     const fileType = props.attachments[0].fileType;
 
+    if (fileType === ATTACHMENT_TYPES.FALLBACK) return FallbackBubble;
+
     if (!props.content) {
       if (fileType === ATTACHMENT_TYPES.IMAGE) return ImageBubble;
       if (fileType === ATTACHMENT_TYPES.FILE) return FileBubble;

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

@@ -0,0 +1,37 @@
+<script setup>
+import { computed } from 'vue';
+import BaseBubble from './Base.vue';
+import FormattedContent from './Text/FormattedContent.vue';
+import { useMessageContext } from '../provider.js';
+
+const { attachments, content } = useMessageContext();
+
+const attachment = computed(() => attachments.value?.[0] || {});
+const url = computed(
+  () => attachment.value.dataUrl || attachment.value.data_url
+);
+const title = computed(
+  () =>
+    attachment.value.fallbackTitle ||
+    attachment.value.fallback_title ||
+    url.value
+);
+</script>
+
+<template>
+  <BaseBubble class="p-3" data-bubble-name="fallback">
+    <FormattedContent v-if="content" :content="content" class="mb-2" />
+    <a
+      v-if="url"
+      :href="url"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="block max-w-[320px] truncate text-sm text-n-brand underline"
+    >
+      {{ title }}
+    </a>
+    <span v-else class="text-sm text-n-slate-11">
+      {{ title }}
+    </span>
+  </BaseBubble>
+</template>