refactor(chat): tighten media cache boundaries

src/app/chat/components/fullscreen-image-viewer.tsx

@@ -14,7 +14,12 @@ import { ChevronLeft } from "lucide-react";
 import Image from "next/image";
 import { useEffect } from "react";
 
-import { useCachedChatMediaUrl } from "../hooks/use-cached-chat-media-url";
+import {
+  isBrowserLocalChatImageSource,
+  normalizeChatImageSource,
+} from "@/lib/chat/chat_media_url";
+import { useCachedChatMediaUrl } from "@/lib/chat/use_cached_chat_media_url";
+
 import styles from "./fullscreen-image-viewer.module.css";
 
 export interface FullscreenImageViewerProps {
@@ -46,13 +51,8 @@ export function FullscreenImageViewer({
     return () => document.removeEventListener("keydown", handleKey);
   }, [onClose]);
 
-  const sourceUrl = mediaUrl || imageUrl;
-  const src = sourceUrl.startsWith("data:") ||
-    sourceUrl.startsWith("http") ||
-    sourceUrl.startsWith("blob:")
-    ? sourceUrl
-    : `data:image/png;base64,${sourceUrl}`;
-  const shouldUseNativeImage = isBrowserLocalImageSrc(src);
+  const src = normalizeChatImageSource(mediaUrl || imageUrl);
+  const shouldUseNativeImage = isBrowserLocalChatImageSource(src);
 
   if (imagePaywalled) {
     return (
@@ -131,7 +131,3 @@ export function FullscreenImageViewer({
     </div>
   );
 }
-
-function isBrowserLocalImageSrc(src: string): boolean {
-  return src.startsWith("blob:") || src.startsWith("data:");
-}

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

@@ -13,8 +13,12 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 import { ROUTE_BUILDERS } from "@/router/routes";
+import {
+  isBrowserLocalChatImageSource,
+  normalizeChatImageSource,
+} from "@/lib/chat/chat_media_url";
+import { useCachedChatMediaUrl } from "@/lib/chat/use_cached_chat_media_url";
 
-import { useCachedChatMediaUrl } from "../hooks/use-cached-chat-media-url";
 import styles from "./image-bubble.module.css";
 
 export interface ImageBubbleProps {
@@ -36,9 +40,9 @@ export function ImageBubble({
     kind: "image",
   });
 
-  const src = decodeBase64Image(mediaUrl || imageUrl);
+  const src = normalizeChatImageSource(mediaUrl || imageUrl);
   const canOpen = Boolean(messageId);
-  const shouldUseNativeImage = isBrowserLocalImageSrc(src);
+  const shouldUseNativeImage = isBrowserLocalChatImageSource(src);
 
   const openImage = () => {
     if (!messageId) return;
@@ -85,17 +89,3 @@ export function ImageBubble({
     </div>
   );
 }
-
-/** 解析 base64 data URI（`data:image/png;base64,...`），否则原样返回 */
-function decodeBase64Image(uri: string): string {
-  // 已是 data URI 或 http(s) URL：直接返回
-  if (uri.startsWith("data:") || uri.startsWith("http")) {
-    return uri;
-  }
-  // 裸 base64 字符串 → 包装成 data URI（PNG 兜底）
-  return `data:image/png;base64,${uri}`;
-}
-
-function isBrowserLocalImageSrc(src: string): boolean {
-  return src.startsWith("blob:") || src.startsWith("data:");
-}

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

@@ -3,7 +3,7 @@
 import { LockKeyhole, Pause, Play } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 
-import { useCachedChatMediaUrl } from "../hooks/use-cached-chat-media-url";
+import { useCachedChatMediaUrl } from "@/lib/chat/use_cached_chat_media_url";
 import styles from "./voice-bubble.module.css";
 
 export interface VoiceBubbleProps {

src/app/chat/hooks/use-cached-chat-media-url.ts

@@ -1,106 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-
-import type { LocalChatMediaKind } from "@/data/storage/chat";
-import { getChatRepository } from "@/data/repositories/chat_repository";
-import { Result } from "@/utils";
-
-export interface UseCachedChatMediaUrlInput {
-  messageId?: string | null;
-  remoteUrl?: string | null;
-  kind: LocalChatMediaKind;
-}
-
-export interface UseCachedChatMediaUrlOutput {
-  mediaUrl: string;
-  isUsingCachedMedia: boolean;
-}
-
-interface CachedMediaUrlState {
-  key: string;
-  objectUrl: string;
-}
-
-export function useCachedChatMediaUrl({
-  messageId,
-  remoteUrl,
-  kind,
-}: UseCachedChatMediaUrlInput): UseCachedChatMediaUrlOutput {
-  const [cachedState, setCachedState] = useState<CachedMediaUrlState | null>(
-    null,
-  );
-  const fallbackUrl = remoteUrl ?? "";
-  const stateKey =
-    messageId && remoteUrl ? `${messageId}:${kind}:${remoteUrl}` : "";
-
-  useEffect(() => {
-    if (!messageId || !remoteUrl || !isCacheableRemoteUrl(remoteUrl)) {
-      return;
-    }
-
-    let cancelled = false;
-    let objectUrl: string | null = null;
-
-    const applyBlob = (blob: Blob) => {
-      const nextObjectUrl = URL.createObjectURL(blob);
-      objectUrl = nextObjectUrl;
-      if (cancelled) {
-        URL.revokeObjectURL(nextObjectUrl);
-        return;
-      }
-      setCachedState((previous) => {
-        if (previous) URL.revokeObjectURL(previous.objectUrl);
-        return {
-          key: stateKey,
-          objectUrl: nextObjectUrl,
-        };
-      });
-    };
-
-    const resolveCachedMedia = async () => {
-      const chatRepo = getChatRepository();
-      const cachedResult = await chatRepo.getCachedMedia({ messageId, kind });
-      if (cancelled) return;
-
-      if (Result.isOk(cachedResult) && cachedResult.data) {
-        applyBlob(cachedResult.data.blob);
-        return;
-      }
-
-      const cacheResult = await chatRepo.cacheRemoteMedia({
-        messageId,
-        kind,
-        remoteUrl,
-      });
-      if (cancelled) return;
-
-      if (Result.isOk(cacheResult)) {
-        applyBlob(cacheResult.data.blob);
-      }
-    };
-
-    void resolveCachedMedia();
-
-    return () => {
-      cancelled = true;
-      if (objectUrl) URL.revokeObjectURL(objectUrl);
-    };
-  }, [kind, messageId, remoteUrl, stateKey]);
-
-  if (cachedState?.key === stateKey) {
-    return {
-      mediaUrl: cachedState.objectUrl,
-      isUsingCachedMedia: true,
-    };
-  }
-
-  return {
-    mediaUrl: fallbackUrl,
-    isUsingCachedMedia: false,
-  };
-}
-
-function isCacheableRemoteUrl(url: string): boolean {
-  return url.startsWith("http://") || url.startsWith("https://");
-}