fix(chat): make cached media load on safari

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

@@ -34,16 +34,26 @@ export function ImageBubble({
   imagePaywalled = false,
 }: ImageBubbleProps) {
   const router = useRouter();
-  const [error, setError] = useState(false);
-  const { mediaUrl } = useCachedChatMediaUrl({
-    messageId,
-    remoteUrl: imageUrl,
-    kind: "image",
-  });
+  const [errorSrc, setErrorSrc] = useState<string | null>(null);
+  const { mediaUrl, isUsingCachedMedia, reportMediaError } =
+    useCachedChatMediaUrl({
+      messageId,
+      remoteUrl: imageUrl,
+      kind: "image",
+    });
 
   const src = normalizeChatImageSource(mediaUrl || imageUrl);
   const canOpen = Boolean(messageId);
   const shouldUseNativeImage = isBrowserLocalChatImageSource(src);
+  const error = errorSrc === src;
+
+  const handleImageError = () => {
+    if (isUsingCachedMedia) {
+      reportMediaError();
+      return;
+    }
+    setErrorSrc(src);
+  };
 
   const openImage = () => {
     if (!messageId) return;
@@ -73,7 +83,7 @@ export function ImageBubble({
           className={styles.image}
           src={src}
           alt=""
-          onError={() => setError(true)}
+          onError={handleImageError}
         />
       ) : (
         <Image
@@ -82,7 +92,7 @@ export function ImageBubble({
           alt=""
           width={240}
           height={240}
-          onError={() => setError(true)}
+          onError={handleImageError}
         />
       )}
       {!error && imagePaywalled ? (