3eed8905cc
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>
38 lines
990 B
Vue
38 lines
990 B
Vue
<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>
|