refactor(chat): show images in page overlay

src/app/chat/components/chat-area.tsx

@@ -16,12 +16,6 @@ import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
 
 import type { UiMessage } from "@/data/dto/chat";
 
-import {
-  consumeChatScrollSnapshot,
-  getChatScrollRestoreTop,
-  listenChatScrollSnapshotSave,
-  saveChatScrollSnapshot,
-} from "../chat-scroll-session";
 import {
   buildChatRenderItems,
   createChatMessageKeyResolver,
@@ -35,8 +29,6 @@ import styles from "./chat-area.module.css";
 
 const CHAT_AUTO_SCROLL_BOTTOM_THRESHOLD = 96;
 
-type RestoreState = "idle" | "checking" | "restoring" | "settlingBottom" | "done";
-
 export interface ChatAreaProps {
   messages: readonly UiMessage[];
   isReplyingAI: boolean;
@@ -44,6 +36,7 @@ export interface ChatAreaProps {
   unlockingMessageId?: string | null;
   onUnlockPrivateMessage?: (messageId: string) => void;
   onUnlockVoiceMessage?: (messageId: string) => void;
+  onOpenImage?: (messageId: string) => void;
 }
 
 export function ChatArea({
@@ -53,30 +46,31 @@ export function ChatArea({
   unlockingMessageId,
   onUnlockPrivateMessage,
   onUnlockVoiceMessage,
+  onOpenImage,
 }: ChatAreaProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const prevLengthRef = useRef(messages.length);
-  const restoredScrollRef = useRef(false);
-  const restoreStateRef = useRef<RestoreState>("idle");
+  const initialScrollSettledRef = useRef(false);
   const wasNearBottomRef = useRef(true);
   const getMessageKey = useMemo(() => createChatMessageKeyResolver(), []);
 
-  const saveCurrentScrollSnapshotNow = (anchorMessageId: string) => {
+  useLayoutEffect(() => {
+    if (initialScrollSettledRef.current || messages.length === 0) return;
     const scrollNode = scrollRef.current;
     if (!scrollNode) return;
-    saveChatScrollSnapshot(scrollNode, { anchorMessageId });
-  };
+
+    initialScrollSettledRef.current = true;
+    prevLengthRef.current = messages.length;
+    scrollNode.scrollTop = scrollNode.scrollHeight;
+    wasNearBottomRef.current = true;
+  }, [messages.length]);
 
   // 新消息 → 滚到底部
   useEffect(() => {
     if (messages.length !== prevLengthRef.current) {
       const scrollNode = scrollRef.current;
-      const shouldSkipAutoScroll =
-        restoreStateRef.current === "checking" ||
-        restoreStateRef.current === "restoring" ||
-        restoreStateRef.current === "settlingBottom";
 
-      if (scrollNode && !shouldSkipAutoScroll && wasNearBottomRef.current) {
+      if (scrollNode && wasNearBottomRef.current) {
         scrollNode.scrollTo({
           top: scrollNode.scrollHeight,
           behavior: "smooth",
@@ -86,72 +80,6 @@ export function ChatArea({
     }
   }, [messages.length]);
 
-  useLayoutEffect(() => {
-    if (restoredScrollRef.current || messages.length === 0) return;
-
-    const scrollNode = scrollRef.current;
-    if (!scrollNode) return;
-
-    let cancelled = false;
-    let stopStableScrollTask: (() => void) | null = null;
-
-    restoreStateRef.current = "checking";
-
-    const restore = async () => {
-      const snapshot = await consumeChatScrollSnapshot();
-      if (cancelled) return;
-
-      if (snapshot === null) {
-        restoredScrollRef.current = true;
-        restoreStateRef.current = "settlingBottom";
-        prevLengthRef.current = messages.length;
-        stopStableScrollTask = startStableScrollTask({
-          scrollNode,
-          applyScroll: () => {
-            scrollNode.scrollTop = scrollNode.scrollHeight;
-          },
-          onFinish: () => {
-            restoreStateRef.current = "done";
-            wasNearBottomRef.current = true;
-          },
-        });
-        return;
-      }
-
-      restoredScrollRef.current = true;
-      restoreStateRef.current = "restoring";
-      prevLengthRef.current = messages.length;
-
-      stopStableScrollTask = startStableScrollTask({
-        scrollNode,
-        applyScroll: () => {
-          scrollNode.scrollTop = getChatScrollRestoreTop(scrollNode, snapshot);
-        },
-        onFinish: () => {
-          restoreStateRef.current = "done";
-          wasNearBottomRef.current = isNearBottom(scrollNode);
-        },
-      });
-    };
-
-    void restore();
-
-    return () => {
-      cancelled = true;
-      stopStableScrollTask?.();
-    };
-  }, [messages.length]);
-
-  useEffect(() => {
-    const stopListening = listenChatScrollSnapshotSave(({ anchorMessageId }) => {
-      saveCurrentScrollSnapshotNow(anchorMessageId);
-    });
-
-    return () => {
-      stopListening();
-    };
-  }, []);
-
   return (
     <main
       ref={scrollRef}
@@ -170,6 +98,7 @@ export function ChatArea({
         unlockingMessageId,
         onUnlockPrivateMessage,
         onUnlockVoiceMessage,
+        onOpenImage,
       )}
 
       {isReplyingAI && <LottieMessageBubble />}
@@ -183,47 +112,6 @@ function isNearBottom(scrollNode: HTMLElement): boolean {
   return distanceFromBottom <= CHAT_AUTO_SCROLL_BOTTOM_THRESHOLD;
 }
 
-function startStableScrollTask({
-  applyScroll,
-  onFinish,
-  scrollNode,
-}: {
-  applyScroll: () => void;
-  onFinish: () => void;
-  scrollNode: HTMLElement;
-}): () => void {
-  let frame: number | null = null;
-  let earlyTimer: number | null = null;
-  let lateTimer: number | null = null;
-  let observerTimer: number | null = null;
-  let finishTimer: number | null = null;
-  const resizeObserver =
-    typeof ResizeObserver === "undefined"
-      ? null
-      : new ResizeObserver(applyScroll);
-
-  applyScroll();
-  frame = window.requestAnimationFrame(applyScroll);
-  earlyTimer = window.setTimeout(applyScroll, 120);
-  lateTimer = window.setTimeout(applyScroll, 600);
-  Array.from(scrollNode.children).forEach((child) => {
-    resizeObserver?.observe(child);
-  });
-  observerTimer = window.setTimeout(() => {
-    resizeObserver?.disconnect();
-  }, 800);
-  finishTimer = window.setTimeout(onFinish, 850);
-
-  return () => {
-    if (frame !== null) window.cancelAnimationFrame(frame);
-    if (earlyTimer !== null) window.clearTimeout(earlyTimer);
-    if (lateTimer !== null) window.clearTimeout(lateTimer);
-    if (observerTimer !== null) window.clearTimeout(observerTimer);
-    if (finishTimer !== null) window.clearTimeout(finishTimer);
-    resizeObserver?.disconnect();
-  };
-}
-
 /** 渲染消息列表（按日期分组插入分隔条） */
 function renderMessagesWithDateHeaders(
   messages: readonly UiMessage[],
@@ -232,6 +120,7 @@ function renderMessagesWithDateHeaders(
   unlockingMessageId?: string | null,
   onUnlockPrivateMessage?: (messageId: string) => void,
   onUnlockVoiceMessage?: (messageId: string) => void,
+  onOpenImage?: (messageId: string) => void,
 ) {
   return buildChatRenderItems(messages, getMessageKey).map((item) =>
     item.type === "date" ? (
@@ -255,6 +144,7 @@ function renderMessagesWithDateHeaders(
         }
         onUnlockPrivateMessage={onUnlockPrivateMessage}
         onUnlockVoiceMessage={onUnlockVoiceMessage}
+        onOpenImage={onOpenImage}
       />
     ),
   );