fix: Retry loading audio attachments

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

@@ -1,7 +1,9 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, onMounted } from 'vue';
 import BaseBubble from './Base.vue';
 import AudioChip from 'next/message/chips/Audio.vue';
+import Icon from 'next/icon/Icon.vue';
+import { useLoadWithRetry } from 'dashboard/composables/loadWithRetry';
 import { useMessageContext } from '../provider.js';
 
 const { attachments } = useMessageContext();
@@ -9,11 +11,28 @@ const { attachments } = useMessageContext();
 const attachment = computed(() => {
   return attachments.value[0];
 });
+
+const { isLoaded, hasError, loadWithRetry } = useLoadWithRetry({
+  mediaType: 'audio',
+});
+
+onMounted(() => {
+  if (attachment.value?.dataUrl) {
+    loadWithRetry(attachment.value.dataUrl);
+  }
+});
 </script>
 
 <template>
   <BaseBubble class="bg-transparent" data-bubble-name="audio">
+    <div v-if="hasError" class="flex items-center gap-1 text-center rounded-lg">
+      <Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
+      <p class="mb-0 text-n-slate-11">
+        {{ $t('COMPONENTS.MEDIA.AUDIO_UNAVAILABLE') }}
+      </p>
+    </div>
     <AudioChip
+      v-else-if="isLoaded"
       :attachment="attachment"
       class="p-2 text-n-slate-12 skip-context-menu"
     />