feat(media): implement caching for chat media and update components to use cached media

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

@@ -3,9 +3,11 @@
 import { LockKeyhole, Pause, Play } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 
+import { useCachedChatMediaUrl } from "../hooks/use-cached-chat-media-url";
 import styles from "./voice-bubble.module.css";
 
 export interface VoiceBubbleProps {
+  messageId?: string;
   audioUrl: string;
   isFromAI: boolean;
   locked?: boolean;
@@ -15,6 +17,7 @@ export interface VoiceBubbleProps {
 }
 
 export function VoiceBubble({
+  messageId,
   audioUrl,
   isFromAI,
   locked = false,
@@ -25,6 +28,11 @@ export function VoiceBubble({
   const audioRef = useRef<HTMLAudioElement>(null);
   const [isPlaying, setIsPlaying] = useState(false);
   const [hasError, setHasError] = useState(false);
+  const { mediaUrl } = useCachedChatMediaUrl({
+    messageId,
+    remoteUrl: audioUrl,
+    kind: "audio",
+  });
 
   useEffect(() => {
     const audio = audioRef.current;
@@ -117,7 +125,7 @@ export function VoiceBubble({
           </>
         ) : null}
       </div>
-      {!locked ? <audio ref={audioRef} src={audioUrl} preload="metadata" /> : null}
+      {!locked ? <audio ref={audioRef} src={mediaUrl} preload="metadata" /> : null}
     </div>
   );
 }