chatwoot/app/javascript/dashboard/api/specs
Gabriel Jablonski 37eed5de1e
feat(whatsapp): Add support for voice messages (#14606)
> Reopened from #13613, now from a personal fork
(`gabrieljablonski/chatwoot`) so maintainers can push edits —
organization-owned forks don't support "Allow edits from maintainers".
The previous PR is closed in favor of this one; same commits, same diff.

## Description

This PR adds support for sending voice messages (voice notes) through
the WhatsApp Cloud API. When agents record audio in Chatwoot, it is now
transcoded in the browser from WebM/Opus to OGG/Opus and sent with the
`voice: true` flag, so it appears as a native voice note bubble on
WhatsApp — not as a file/document attachment.

Closes #13283

**Key Changes:**
- Added `webmOpusToOgg.js` — a pure JS EBML parser + OGG page builder
that remuxes browser-recorded WebM/Opus audio into OGG/Opus entirely
client-side, with no server-side dependencies.
- Updated `AudioRecorder.vue` to use an explicit `mimeType` hint, proper
resource cleanup, and an `AUDIO_EXTENSION_MAP` for correct file
extensions.
- Renamed `mp3ConversionUtils.js` → `audioConversionUtils.js` and added
OGG conversion support via the new remuxer.
- Updated `ReplyBox.vue` to request OGG format for WhatsApp channels,
pass `isVoiceMessage` per-attachment, and handle recording errors with a
user-facing alert.
- Updated `MessageBuilder` to read the `is_voice_message` param and
persist it in attachment metadata.
- Updated `WhatsappCloudService` to:
- Normalize `audio/opus` → `audio/ogg` content type on ActiveStorage
blobs (works around Marcel gem re-detection).
- Send the `voice: true` flag when the attachment is a voice message
with `audio/ogg` content type.
  - Use WhatsApp Cloud API `v24.0` for the attachment endpoint.
- Added `AUDIO_CONVERSION_FAILED` i18n key.

**How it works:**
1. The browser records audio as WebM/Opus (Chrome/Firefox default).
2. `audioConversionUtils.js` remuxes it to OGG/Opus using the pure-JS
`webmOpusToOgg` remuxer — no server transcoding needed.
3. The OGG file is uploaded with `is_voice_message: true` in the form
payload.
4. `MessageBuilder` persists `is_voice_message` in the attachment's
`meta` hash.
5. `WhatsappCloudService` normalizes the blob content type if needed,
then sends the attachment with `voice: true` so WhatsApp renders it as a
voice note.

## Type of change

- [X] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

1. Record a voice message in a WhatsApp Cloud conversation.
2. Verify the audio is transcoded to OGG (check file extension in the
attachment preview).
3. Verify the message arrives on WhatsApp as a voice note bubble (not a
document/file).
4. Send an image or document attachment and verify it still works as
before (no `voice` flag).
5. Send a regular (non-voice) audio file and verify it arrives without
the voice flag.

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Muhsin <12408980+muhsin-k@users.noreply.github.com>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-02 15:33:32 +04:00
..
channel feat: Use vitest instead of jest, run all the specs anywhere in app/ folder in the CI (#9722) 2024-07-10 08:32:16 -07:00
helpCenter feat(help-center): enable drag-and-drop category reordering (#13706) 2026-03-05 12:53:38 +05:30
inbox feat(whatsapp): Add support for voice messages (#14606) 2026-06-02 15:33:32 +04:00
integrations feat: Add activity messages for linear actions (#11654) 2025-06-13 11:57:11 +05:30
account.spec.js feat: Use vitest instead of jest, run all the specs anywhere in app/ folder in the CI (#9722) 2024-07-10 08:32:16 -07:00
accountActions.spec.js feat: Use vitest instead of jest, run all the specs anywhere in app/ folder in the CI (#9722) 2024-07-10 08:32:16 -07:00
agentBots.spec.js feat: Ability to reset api_access_token (#11565) 2025-05-29 14:42:13 +05:30
agentCapacityPolicies.spec.js feat: Agent capacity policy index page with CRUD actions (#12409) 2025-09-12 16:22:42 +05:30
agents.spec.js feat: Use vitest instead of jest, run all the specs anywhere in app/ folder in the CI (#9722) 2024-07-10 08:32:16 -07:00
article.spec.js feat: bulk change category for articles (#14443) 2026-05-26 17:32:58 +05:30
assignableAgents.spec.js feat: Use vitest instead of jest, run all the specs anywhere in app/ folder in the CI (#9722) 2024-07-10 08:32:16 -07:00
assignmentPolicies.spec.js feat: Agent assignment policy index page with CRUD actions (#12373) 2025-09-10 12:07:21 +05:30
automation.spec.js feat: Clone automation rules (#3893) 2022-02-03 09:14:22 +05:30
bulkAction.spec.js feat: Add Bulk actions to conversations (#4647) 2022-06-03 11:12:22 +05:30
campaign.spec.js chore: Add inbox id in get campaigns API (#2278) 2021-05-17 21:38:12 +05:30
companies.spec.js feat(companies): add company detail page (#14054) 2026-05-06 20:50:27 +05:30
contacts.spec.js feat(voice): WhatsApp Cloud Calling — UI [6] (#14346) 2026-05-22 18:42:39 +05:30
conversations.spec.js feat: Unread Count: Frontend changes for showing unread count badges (3/3)[CW-6851] (#14372) 2026-05-20 19:21:25 +05:30
csatReports.spec.js feat: Use vitest instead of jest, run all the specs anywhere in app/ folder in the CI (#9722) 2024-07-10 08:32:16 -07:00
dashboardApps.spec.js feat: Allow users to create dashboard apps to give agents more context (#4761) 2022-06-01 11:13:10 +05:30
endPoints.spec.js chore: Add missing frontend specs (#2329) 2021-05-25 01:30:21 -07:00
inboxes.spec.js feat: Add manual WhatsApp templates sync with UI (#12007) 2025-07-23 12:22:51 +04:00
integrations.spec.js feat: Use vitest instead of jest, run all the specs anywhere in app/ folder in the CI (#9722) 2024-07-10 08:32:16 -07:00
labels.spec.js Feature: Improve label experience (#975) 2020-06-25 21:04:03 +05:30
macros.spec.js feat: Add API module and Vuex store for Macros (#5603) 2022-10-11 22:54:17 -07:00
notifications.spec.js feat: Use vitest instead of jest, run all the specs anywhere in app/ folder in the CI (#9722) 2024-07-10 08:32:16 -07:00
portals.spec.js feat: Portals store integration (#5185) 2022-08-08 15:47:32 +05:30
reports.spec.js feat: Use vitest instead of jest, run all the specs anywhere in app/ folder in the CI (#9722) 2024-07-10 08:32:16 -07:00
search.spec.js feat: Advanced Search Backend (#12917) 2026-01-07 15:30:49 +05:30
slaReports.spec.js feat: Use vitest instead of jest, run all the specs anywhere in app/ folder in the CI (#9722) 2024-07-10 08:32:16 -07:00
teams.spec.js feat: Use vitest instead of jest, run all the specs anywhere in app/ folder in the CI (#9722) 2024-07-10 08:32:16 -07:00
tiktokClient.spec.js feat: TikTok channel (#12741) 2025-12-17 07:54:50 -08:00
userNotificationSettings.spec.js Feature: Add UI to update email notification preferences (#579) 2020-03-01 17:47:08 +05:30
webhook.spec.js chore: Add missing frontend specs (#2329) 2021-05-25 01:30:21 -07:00