fix: Update the reply box to handle play, pause callbacks from WaveSurfer (#10223)

- Implemented custom @play, @pause methods to update the state of the recording. Once the recording is finished the button icon changes from stop button to play/pause button.
- Removes the console error undefined hasAudio

Fixes https://linear.app/chatwoot/issue/CW-3609/audio-recorder-issue

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

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

@@ -13,7 +13,12 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['recorderProgressChanged', 'finishRecord']);
+const emit = defineEmits([
+  'recorderProgressChanged',
+  'finishRecord',
+  'pause',
+  'play',
+]);
 
 const waveformContainer = ref(null);
 const wavesurfer = ref(null);
@@ -47,6 +52,9 @@ const initWaveSurfer = () => {
     ],
   });
 
+  wavesurfer.value.on('pause', () => emit('pause'));
+  wavesurfer.value.on('play', () => emit('play'));
+
   record.value = wavesurfer.value.plugins[0];
 
   wavesurfer.value.on('finish', () => {
@@ -106,11 +114,9 @@ onUnmounted(() => {
   }
 });
 
-defineExpose({ playPause, stopRecording });
+defineExpose({ playPause, stopRecording, record });
 </script>
 
 <template>
-  <div class="w-full">
-    <div ref="waveformContainer" />
-  </div>
+  <div ref="waveformContainer" class="w-full p-1" />
 </template>

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

@@ -35,7 +35,7 @@ export default {
     },
     recordingAudioDurationText: {
       type: String,
-      default: '',
+      default: '00:00',
     },
     // inbox prop is used in /mixins/inboxMixin,
     // remove this props when refactoring to composable if not needed
@@ -259,7 +259,6 @@ export default {
         v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
         :title="$t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
         icon="emoji"
-        emoji="😊"
         color-scheme="secondary"
         variant="smooth"
         size="small"
@@ -285,7 +284,6 @@ export default {
           class-names="button--upload"
           :title="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
           icon="attach"
-          emoji="📎"
           color-scheme="secondary"
           variant="smooth"
           size="small"
@@ -295,7 +293,6 @@ export default {
         v-if="showAudioRecorderButton"
         v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_ICON')"
         :icon="!isRecordingAudio ? 'microphone' : 'microphone-off'"
-        emoji="🎤"
         :color-scheme="!isRecordingAudio ? 'secondary' : 'alert'"
         variant="smooth"
         size="small"
@@ -305,7 +302,6 @@ export default {
         v-if="showEditorToggle"
         v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_FORMAT_ICON')"
         icon="quote"
-        emoji="🖊️"
         color-scheme="secondary"
         variant="smooth"
         size="small"
@@ -314,7 +310,6 @@ export default {
       <woot-button
         v-if="showAudioPlayStopButton"
         :icon="audioRecorderPlayStopIcon"
-        emoji="🎤"
         color-scheme="secondary"
         variant="smooth"
         size="small"