fix(chat): keep message list anchored to bottom

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

@@ -43,6 +43,7 @@ const ReplyingAnimation = lazy(() =>
 export interface ChatAreaProps {
   messages: readonly UiMessage[];
   isReplyingAI: boolean;
+  initialScrollReady?: boolean;
   isUnlockingMessage?: boolean;
   unlockingMessageId?: string | null;
   onUnlockPrivateMessage?: (messageId: string) => void;
@@ -54,6 +55,7 @@ export interface ChatAreaProps {
 export function ChatArea({
   messages,
   isReplyingAI,
+  initialScrollReady = true,
   isUnlockingMessage,
   unlockingMessageId,
   onUnlockPrivateMessage,
@@ -62,36 +64,60 @@ export function ChatArea({
   onOpenImage,
 }: ChatAreaProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
-  const prevLengthRef = useRef(messages.length);
+  const contentRef = useRef<HTMLDivElement>(null);
   const initialScrollSettledRef = useRef(false);
-  const wasNearBottomRef = useRef(true);
+  const shouldStickToBottomRef = useRef(true);
   const getMessageKey = useMemo(() => createChatMessageKeyResolver(), []);
 
   useLayoutEffect(() => {
-    if (initialScrollSettledRef.current || messages.length === 0) return;
+    if (!initialScrollReady) {
+      initialScrollSettledRef.current = false;
+      return;
+    }
+
     const scrollNode = scrollRef.current;
     if (!scrollNode) return;
 
-    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;
-
-      if (scrollNode && wasNearBottomRef.current) {
-        scrollNode.scrollTo({
-          top: scrollNode.scrollHeight,
-          behavior: "smooth",
-        });
-      }
-      prevLengthRef.current = messages.length;
+    if (!initialScrollSettledRef.current) {
+      initialScrollSettledRef.current = true;
+      shouldStickToBottomRef.current = true;
     }
-  }, [messages.length]);
+
+    if (!shouldStickToBottomRef.current) return;
+
+    scrollToBottom(scrollNode);
+    const frameId = requestAnimationFrame(() => {
+      if (
+        scrollRef.current === scrollNode &&
+        shouldStickToBottomRef.current
+      ) {
+        scrollToBottom(scrollNode);
+      }
+    });
+
+    return () => cancelAnimationFrame(frameId);
+  }, [initialScrollReady, isReplyingAI, messages]);
+
+  useEffect(() => {
+    const scrollNode = scrollRef.current;
+    const contentNode = contentRef.current;
+    if (!scrollNode || !contentNode || typeof ResizeObserver === "undefined") {
+      return;
+    }
+
+    const observer = new ResizeObserver(() => {
+      if (
+        initialScrollSettledRef.current &&
+        shouldStickToBottomRef.current
+      ) {
+        scrollToBottom(scrollNode);
+      }
+    });
+    observer.observe(scrollNode);
+    observer.observe(contentNode);
+
+    return () => observer.disconnect();
+  }, []);
 
   return (
     <main
@@ -99,31 +125,40 @@ export function ChatArea({
       className={styles.area}
       aria-label="Chat messages"
       onScroll={(event) => {
-        wasNearBottomRef.current = isNearBottom(event.currentTarget);
+        shouldStickToBottomRef.current = isNearBottom(event.currentTarget);
       }}
     >
-      <AiDisclosureBanner />
+      <div ref={contentRef} className={styles.content}>
+        <AiDisclosureBanner />
 
-      {renderMessagesWithDateHeaders(
-        messages,
-        getMessageKey,
-        isUnlockingMessage,
-        unlockingMessageId,
-        onUnlockPrivateMessage,
-        onUnlockVoiceMessage,
-        onUnlockImageMessage,
-        onOpenImage,
-      )}
+        {renderMessagesWithDateHeaders(
+          messages,
+          getMessageKey,
+          isUnlockingMessage,
+          unlockingMessageId,
+          onUnlockPrivateMessage,
+          onUnlockVoiceMessage,
+          onUnlockImageMessage,
+          onOpenImage,
+        )}
 
-      {isReplyingAI ? (
-        <Suspense fallback={null}>
-          <ReplyingAnimation />
-        </Suspense>
-      ) : null}
+        {isReplyingAI ? (
+          <Suspense fallback={null}>
+            <ReplyingAnimation />
+          </Suspense>
+        ) : null}
+      </div>
     </main>
   );
 }
 
+function scrollToBottom(scrollNode: HTMLElement): void {
+  scrollNode.scrollTop = Math.max(
+    0,
+    scrollNode.scrollHeight - scrollNode.clientHeight,
+  );
+}
+
 function isNearBottom(scrollNode: HTMLElement): boolean {
   const distanceFromBottom =
     scrollNode.scrollHeight - scrollNode.scrollTop - scrollNode.clientHeight;