chore: clean up voice message components

app/javascript/dashboard/components-next/message/Message.vue

@@ -36,6 +36,7 @@ import DyteBubble from './bubbles/Dyte.vue';
 import LocationBubble from './bubbles/Location.vue';
 import CSATBubble from './bubbles/CSAT.vue';
 import FormBubble from './bubbles/Form.vue';
+import VoiceCallBubble from './bubbles/VoiceCall.vue';
 
 import MessageError from './MessageError.vue';
 import ContextMenu from 'dashboard/modules/conversations/components/MessageContextMenu.vue';
@@ -288,6 +289,15 @@ const componentToRender = computed(() => {
     return InstagramStoryBubble;
   }
 
+  // Handle voice call bubble
+  if (
+    props.contentType === 'voice_call' ||
+    props.contentAttributes?.type === 'voice_call' ||
+    props.contentAttributes?.data?.callType === 'voice_call'
+  ) {
+    return VoiceCallBubble;
+  }
+
   if (Array.isArray(props.attachments) && props.attachments.length === 1) {
     const fileType = props.attachments[0].fileType;
 
@@ -487,10 +497,11 @@ provideMessageContext({
         :class="{
           'ltr:pl-9 rtl:pl-0 justify-end': orientation === ORIENTATION.RIGHT,
           'min-w-0': variant === MESSAGE_VARIANTS.EMAIL,
+          'min-w-0 max-w-full': componentToRender === VoiceCallBubble,
         }"
         @contextmenu="openContextMenu($event)"
       >
-        <Component :is="componentToRender" />
+        <Component :is="componentToRender" :message="props" />
       </div>
       <MessageError
         v-if="contentAttributes.externalError"