From 30f23fa70fa75809133dc0396e7dd4edd852f9e7 Mon Sep 17 00:00:00 2001
From: Muhsin <muhsinkeramam@gmail.com>
Date: Fri, 27 Feb 2026 14:52:12 +0400
Subject: [PATCH] fix: Retry loading audio attachments

---
 .../components-next/message/bubbles/Audio.vue | 21 ++++++++++++++++++-
 .../dashboard/composables/loadWithRetry.js    | 21 ++++++++++++-------
 .../dashboard/i18n/locale/en/settings.json    |  1 +
 3 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/app/javascript/dashboard/components-next/message/bubbles/Audio.vue b/app/javascript/dashboard/components-next/message/bubbles/Audio.vue
index f50597fee..79d866c09 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Audio.vue
+++ b/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"
     />
diff --git a/app/javascript/dashboard/composables/loadWithRetry.js b/app/javascript/dashboard/composables/loadWithRetry.js
index 0246c1e44..d83000efd 100644
--- a/app/javascript/dashboard/composables/loadWithRetry.js
+++ b/app/javascript/dashboard/composables/loadWithRetry.js
@@ -3,6 +3,7 @@ import { ref } from 'vue';
 export const useLoadWithRetry = (config = {}) => {
   const maxRetry = config.max_retry || 3;
   const backoff = config.backoff || 1000;
+  const mediaType = config.mediaType || 'image';
 
   const isLoaded = ref(false);
   const hasError = ref(false);
@@ -10,19 +11,23 @@ export const useLoadWithRetry = (config = {}) => {
   const loadWithRetry = async url => {
     const attemptLoad = () => {
       return new Promise((resolve, reject) => {
-        const img = new Image();
-
-        img.onload = () => {
+        const onSuccess = () => {
           isLoaded.value = true;
           hasError.value = false;
           resolve();
         };
 
-        img.onerror = () => {
-          reject(new Error('Failed to load image'));
-        };
-
-        img.src = url;
+        let element;
+        if (mediaType === 'audio') {
+          element = new Audio();
+          element.preload = 'metadata';
+          element.onloadedmetadata = onSuccess;
+        } else {
+          element = new Image();
+          element.onload = onSuccess;
+        }
+        element.onerror = () => reject(new Error('Failed to load resource'));
+        element.src = url;
       });
     };
 
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index d885cf8ce..a999a320d 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -284,6 +284,7 @@
     },
     "MEDIA": {
       "IMAGE_UNAVAILABLE": "This image is no longer available.",
+      "AUDIO_UNAVAILABLE": "This audio is no longer available.",
       "LOADING_FAILED": "Loading failed"
     }
   },