fix: Update the voice note format to MP3 to fix the delivery issues (#9448)

Use MP3 as the default format to send voice notes recorded from
Chatwoot. This change was made to fix the issue of Telegram voice notes
not working with the error `WEBPAGE_CURL_FAILED` .

Telegram treats the mp3 recordings as audio attachments. Once we can
identify a fix for the original issue, we will revisit the `ogg`
implementation.

---------

Co-authored-by: Sojan Jose <sojan@pepalo.com>

app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue

@@ -33,6 +33,21 @@ import { convertWavToMp3 } from './utils/mp3ConversionUtils';
 
 WaveSurfer.microphone = MicrophonePlugin;
 
+const RECORDER_CONFIG = {
+  [AUDIO_FORMATS.WAV]: {
+    audioMimeType: 'audio/wav',
+    audioWorkerURL: waveWorker,
+  },
+  [AUDIO_FORMATS.MP3]: {
+    audioMimeType: 'audio/wav',
+    audioWorkerURL: waveWorker,
+  },
+  [AUDIO_FORMATS.OGG]: {
+    audioMimeType: 'audio/ogg',
+    audioWorkerURL: encoderWorker,
+  },
+};
+
 export default {
   name: 'WootAudioRecorder',
   mixins: [alertMixin],
@@ -94,14 +109,7 @@ export default {
             audioSampleRate: 48000,
             audioBitRate: 128,
             audioEngine: 'opus-recorder',
-            ...(this.audioRecordFormat === AUDIO_FORMATS.WAV && {
-              audioMimeType: 'audio/wav',
-              audioWorkerURL: waveWorker,
-            }),
-            ...(this.audioRecordFormat === AUDIO_FORMATS.OGG && {
-              audioMimeType: 'audio/ogg',
-              audioWorkerURL: encoderWorker,
-            }),
+            ...RECORDER_CONFIG[this.audioRecordFormat],
           },
         },
       },
@@ -139,7 +147,11 @@ export default {
   methods: {
     deviceReady() {
       if (this.player.record().engine instanceof OpusRecorderEngine) {
-        if (this.audioRecordFormat === AUDIO_FORMATS.WAV) {
+        if (
+          [AUDIO_FORMATS.WAV, AUDIO_FORMATS.MP3].includes(
+            this.audioRecordFormat
+          )
+        ) {
           this.player.record().engine.audioType = 'audio/wav';
         }
       }
@@ -154,13 +166,12 @@ export default {
     async finishRecord() {
       let recordedContent = this.player.recordedData;
       let fileName = this.player.recordedData.name;
-      if (this.isAWhatsAppChannel) {
+      let type = this.player.recordedData.type;
+      if (this.audioRecordFormat === AUDIO_FORMATS.MP3) {
         recordedContent = await convertWavToMp3(this.player.recordedData);
         fileName = `${getUuid()}.mp3`;
+        type = AUDIO_FORMATS.MP3;
       }
-      const type = !this.isAWhatsAppChannel
-        ? this.player.recordedData.type
-        : 'audio/mp3';
       const file = new File([recordedContent], fileName, { type });
       this.fireRecorderBlob(file);
     },

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -53,7 +53,6 @@
         v-if="showAudioRecorderEditor"
         ref="audioRecorderInput"
         :audio-record-format="audioRecordFormat"
-        :is-a-whats-app-channel="isAWhatsAppChannel"
         @state-recorder-progress-changed="onStateProgressRecorderChanged"
         @state-recorder-changed="onStateRecorderChanged"
         @finish-record="onFinishRecorder"
@@ -502,7 +501,10 @@ export default {
       return `draft-${this.conversationIdByRoute}-${this.replyType}`;
     },
     audioRecordFormat() {
-      if (this.isAPIInbox || this.isATelegramChannel) {
+      if (this.isAWhatsAppChannel || this.isATelegramChannel) {
+        return AUDIO_FORMATS.MP3;
+      }
+      if (this.isAPIInbox) {
         return AUDIO_FORMATS.OGG;
       }
       return AUDIO_FORMATS.WAV;
@@ -1250,6 +1252,7 @@ export default {
     }
   }
 }
+
 .send-button {
   @apply mb-0;
 }
@@ -1274,6 +1277,7 @@ export default {
 
 .emoji-dialog--rtl {
   @apply left-[unset] -right-80;
+
   &::before {
     transform: rotate(90deg);
     filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.08));

app/javascript/shared/constants/messages.js

@@ -98,6 +98,7 @@ export const CSAT_RATINGS = [
 export const AUDIO_FORMATS = {
   WEBM: 'audio/webm',
   OGG: 'audio/ogg',
+  MP3: 'audio/mp3',
   WAV: 'audio/wav',
 };