56e30102eb
In WhatsApp coexistence setups (Business App + Cloud API on the same
number), some inbound customer messages arrive from Meta as `type:
unsupported` with error `131060` ("This message is unavailable") and no
content — typically the first message of a Click-to-WhatsApp /
Instagram-ad conversation, or a message synced from a companion device.
Chatwoot was dropping these webhooks entirely, so no contact,
conversation, or message was created. The conversation only surfaced
once an agent replied (via an `smb_message_echoes` event), starting
"headless" with zero customer context.
This change persists a placeholder message for these events so the
contact and conversation are created, and renders it with the dedicated
unsupported-message bubble that points agents to the WhatsApp app —
where the original message is still visible.
Fixes
https://linear.app/chatwoot/issue/CW-7166/whatsapp-coexistence-inbound-messages-are-silently-dropped
and https://github.com/chatwoot/chatwoot/issues/13464
<img width="3448" height="1604" alt="CleanShot 2026-05-22 at 17 49
35@2x"
src="https://github.com/user-attachments/assets/0a90ec84-9085-4cba-883d-08d9de33fa3c"
/>
## How to reproduce
1. Connect a WhatsApp Cloud (coexistence) inbox.
2. Receive an inbound message that Meta delivers as `type: unsupported`
with error `131060` (e.g. a Click-to-WhatsApp ad message, or a message
handled on a companion/primary device that fails to sync to the API).
3. **Before:** nothing is created — the conversation only appears after
an agent replies, with no record of the customer's first message.
4. **After:** the contact and conversation are created with an incoming
placeholder message rendered as the amber "unsupported" bubble: _"This
message is unsupported. You can view this message on the WhatsApp app."
---------
Co-authored-by: Muhsin <12408980+muhsin-k@users.noreply.github.com>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-authored-by: Sojan Jose <sojan@pepalo.com>
33 lines
961 B
Vue
33 lines
961 B
Vue
<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,
|
|
isAWhatsAppChannel,
|
|
} = 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';
|
|
if (isAWhatsAppChannel.value)
|
|
return 'CONVERSATION.UNSUPPORTED_MESSAGE_WHATSAPP';
|
|
return 'CONVERSATION.UNSUPPORTED_MESSAGE';
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<BaseBubble class="px-4 py-3 text-sm" data-bubble-name="unsupported">
|
|
{{ $t(unsupportedMessageKey) }}
|
|
</BaseBubble>
|
|
</template>
|