fix(chat): make cached media load on safari

src/app/chat/components/voice-bubble.tsx

@@ -27,12 +27,13 @@ export function VoiceBubble({
 }: VoiceBubbleProps) {
   const audioRef = useRef<HTMLAudioElement>(null);
   const [isPlaying, setIsPlaying] = useState(false);
-  const [hasError, setHasError] = useState(false);
-  const { mediaUrl } = useCachedChatMediaUrl({
-    messageId,
-    remoteUrl: audioUrl,
-    kind: "audio",
-  });
+  const [errorMediaUrl, setErrorMediaUrl] = useState<string | null>(null);
+  const { mediaUrl, isUsingCachedMedia, reportMediaError } =
+    useCachedChatMediaUrl({
+      messageId,
+      remoteUrl: audioUrl,
+      kind: "audio",
+    });
 
   useEffect(() => {
     const audio = audioRef.current;
@@ -42,7 +43,11 @@ export function VoiceBubble({
     const handlePause = () => setIsPlaying(false);
     const handlePlay = () => setIsPlaying(true);
     const handleError = () => {
-      setHasError(true);
+      if (isUsingCachedMedia) {
+        reportMediaError();
+        return;
+      }
+      setErrorMediaUrl(mediaUrl);
       setIsPlaying(false);
     };
 
@@ -56,7 +61,9 @@ export function VoiceBubble({
       audio.removeEventListener("play", handlePlay);
       audio.removeEventListener("error", handleError);
     };
-  }, []);
+  }, [isUsingCachedMedia, mediaUrl, reportMediaError]);
+
+  const hasError = errorMediaUrl === mediaUrl;
 
   const handleToggle = () => {
     if (locked) return;
@@ -70,7 +77,7 @@ export function VoiceBubble({
     }
 
     void audio.play().catch(() => {
-      setHasError(true);
+      setErrorMediaUrl(mediaUrl);
       setIsPlaying(false);
     });
   };
@@ -125,7 +132,9 @@ export function VoiceBubble({
           </>
         ) : null}
       </div>
-      {!locked ? <audio ref={audioRef} src={mediaUrl} preload="metadata" /> : null}
+      {!locked ? (
+        <audio ref={audioRef} src={mediaUrl} preload="metadata" />
+      ) : null}
     </div>
   );
 }