feat: add the support for call recordings

app/javascript/dashboard/components-next/message/bubbles/VoiceCall.spec.js

@@ -35,6 +35,11 @@ const mountComponent = () =>
           template: '<div><slot /></div>',
         },
         Icon: true,
+        AudioChip: {
+          props: ['attachment'],
+          template:
+            '<div data-test-id="audio-chip">{{ attachment.dataUrl }}</div>',
+        },
       },
       mocks: {
         $t: key => key,
@@ -51,6 +56,7 @@ describe('VoiceCall.vue', () => {
           meta: {},
         },
       }),
+      attachments: ref([]),
       currentUserId: ref(1),
       messageType: ref(MESSAGE_TYPES.INCOMING),
     };
@@ -88,4 +94,19 @@ describe('VoiceCall.vue', () => {
     expect(wrapper.text()).toContain('Call ended');
     expect(wrapper.text()).toContain('02:13');
   });
+
+  it('renders the recording attachment on the voice call message', () => {
+    messageContext.attachments.value = [
+      {
+        id: 1,
+        fileType: 'audio',
+        dataUrl: 'https://example.com/recording.mp3',
+      },
+    ];
+
+    const wrapper = mountComponent();
+
+    expect(wrapper.find('[data-test-id="audio-chip"]').exists()).toBe(true);
+    expect(wrapper.text()).toContain('https://example.com/recording.mp3');
+  });
 });

app/javascript/dashboard/components-next/message/bubbles/VoiceCall.vue

@@ -2,11 +2,16 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useMessageContext } from '../provider.js';
-import { MESSAGE_TYPES, VOICE_CALL_STATUS } from '../constants';
+import {
+  ATTACHMENT_TYPES,
+  MESSAGE_TYPES,
+  VOICE_CALL_STATUS,
+} from '../constants';
 import { formatDuration } from 'shared/helpers/timeHelper';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import BaseBubble from 'next/message/bubbles/Base.vue';
+import AudioChip from 'next/message/chips/Audio.vue';
 
 const ICON_MAP = {
   [VOICE_CALL_STATUS.IN_PROGRESS]: 'i-ph-phone-call',
@@ -23,7 +28,8 @@ const BG_COLOR_MAP = {
 };
 
 const { t } = useI18n();
-const { contentAttributes, currentUserId, messageType } = useMessageContext();
+const { attachments, contentAttributes, currentUserId, messageType } =
+  useMessageContext();
 
 const data = computed(() => contentAttributes.value?.data);
 const status = computed(() => data.value?.status?.toString());
@@ -33,6 +39,11 @@ const joinedBy = computed(() => {
 const callDuration = computed(() => {
   return data.value?.meta?.duration;
 });
+const recordingAttachment = computed(() => {
+  return attachments.value?.find(
+    attachment => attachment.fileType === ATTACHMENT_TYPES.AUDIO
+  );
+});
 
 const isOutbound = computed(() => messageType.value === MESSAGE_TYPES.OUTGOING);
 const isFailed = computed(() =>
@@ -103,7 +114,7 @@ const bgColor = computed(() => BG_COLOR_MAP[status.value] || 'bg-n-teal-9');
 
 <template>
   <BaseBubble class="p-0 border-none" hide-meta>
-    <div class="flex overflow-hidden flex-col w-full max-w-xs">
+    <div class="flex overflow-hidden flex-col w-full max-w-sm">
       <div class="flex gap-3 items-center p-3 w-full">
         <div
           class="flex justify-center items-center rounded-full size-10 shrink-0"
@@ -128,6 +139,9 @@ const bgColor = computed(() => BG_COLOR_MAP[status.value] || 'bg-n-teal-9');
           </span>
         </div>
       </div>
+      <div v-if="recordingAttachment" class="px-3 pb-3">
+        <AudioChip class="text-n-slate-12" :attachment="recordingAttachment" />
+      </div>
     </div>
   </BaseBubble>
 </template>