feat(chat): implement pull-to-refresh functionality and pagination for chat history

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

@@ -15,13 +15,16 @@
 import {
   lazy,
   Suspense,
+  type CSSProperties,
   useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
 } from "react";
+import { LoaderCircle } from "lucide-react";
 
 import type { UiMessage } from "@/data/dto/chat";
+import { usePullToRefresh } from "@/hooks/use-pull-to-refresh";
 
 import {
   buildChatRenderItems,
@@ -34,6 +37,7 @@ import { MessageBubble } from "./message-bubble";
 import styles from "./chat-area.module.css";
 
 const CHAT_AUTO_SCROLL_BOTTOM_THRESHOLD = 96;
+const CHAT_PULL_LOADING_OFFSET = 46;
 const ReplyingAnimation = lazy(() =>
   import("./lottie-message-bubble").then((module) => ({
     default: module.LottieMessageBubble,
@@ -44,30 +48,69 @@ export interface ChatAreaProps {
   messages: readonly UiMessage[];
   isReplyingAI: boolean;
   initialScrollReady?: boolean;
+  canLoadMoreHistory?: boolean;
+  isLoadingMoreHistory?: boolean;
   isUnlockingMessage?: boolean;
   unlockingMessageId?: string | null;
   onUnlockPrivateMessage?: (messageId: string) => void;
   onUnlockVoiceMessage?: (messageId: string) => void;
   onUnlockImageMessage?: (messageId: string) => void;
   onOpenImage?: (messageId: string) => void;
+  onLoadMoreHistory?: () => void;
 }
 
 export function ChatArea({
   messages,
   isReplyingAI,
   initialScrollReady = true,
+  canLoadMoreHistory = false,
+  isLoadingMoreHistory = false,
   isUnlockingMessage,
   unlockingMessageId,
   onUnlockPrivateMessage,
   onUnlockVoiceMessage,
   onUnlockImageMessage,
   onOpenImage,
+  onLoadMoreHistory,
 }: ChatAreaProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
   const initialScrollSettledRef = useRef(false);
   const shouldStickToBottomRef = useRef(true);
+  const loadMoreAnchorRef = useRef<{
+    scrollHeight: number;
+    scrollTop: number;
+  } | null>(null);
   const getMessageKey = useMemo(() => createChatMessageKeyResolver(), []);
+  const {
+    isPulling,
+    isRefreshing,
+    isReleaseReady,
+    pullDistance,
+    touchHandlers,
+  } = usePullToRefresh(
+    (scrollNode) => {
+      if (!onLoadMoreHistory) return;
+      loadMoreAnchorRef.current = {
+        scrollHeight: scrollNode.scrollHeight,
+        scrollTop: scrollNode.scrollTop,
+      };
+      shouldStickToBottomRef.current = false;
+      onLoadMoreHistory();
+    },
+    {
+      disabled:
+        !initialScrollReady || !canLoadMoreHistory || !onLoadMoreHistory,
+      refreshing: isLoadingMoreHistory,
+    },
+  );
+  const pullOffset = isRefreshing
+    ? CHAT_PULL_LOADING_OFFSET
+    : pullDistance;
+  const pullStyle = {
+    "--chat-pull-offset": `${pullOffset}px`,
+  } as CSSProperties;
+  const showPullIndicator = pullOffset > 0;
 
   useLayoutEffect(() => {
     if (!initialScrollReady) {
@@ -78,6 +121,16 @@ export function ChatArea({
     const scrollNode = scrollRef.current;
     if (!scrollNode) return;
 
+    if (loadMoreAnchorRef.current && !isLoadingMoreHistory) {
+      const anchor = loadMoreAnchorRef.current;
+      loadMoreAnchorRef.current = null;
+      scrollNode.scrollTop = Math.max(
+        0,
+        anchor.scrollTop + scrollNode.scrollHeight - anchor.scrollHeight,
+      );
+      return;
+    }
+
     if (!initialScrollSettledRef.current) {
       initialScrollSettledRef.current = true;
       shouldStickToBottomRef.current = true;
@@ -96,7 +149,7 @@ export function ChatArea({
     });
 
     return () => cancelAnimationFrame(frameId);
-  }, [initialScrollReady, isReplyingAI, messages]);
+  }, [initialScrollReady, isLoadingMoreHistory, isReplyingAI, messages]);
 
   useEffect(() => {
     const scrollNode = scrollRef.current;
@@ -124,10 +177,30 @@ export function ChatArea({
       ref={scrollRef}
       className={styles.area}
       aria-label="Chat messages"
+      data-pulling={isPulling ? "true" : "false"}
+      style={pullStyle}
+      {...touchHandlers}
       onScroll={(event) => {
         shouldStickToBottomRef.current = isNearBottom(event.currentTarget);
       }}
     >
+      <div
+        className={styles.pullIndicator}
+        aria-hidden={!showPullIndicator}
+      >
+        <LoaderCircle
+          size={17}
+          aria-hidden="true"
+          data-spinning={isRefreshing ? "true" : "false"}
+        />
+        <span>
+          {isRefreshing
+            ? "Loading earlier messages..."
+            : isReleaseReady
+              ? "Release to load earlier messages"
+              : "Pull down for earlier messages"}
+        </span>
+      </div>
       <div ref={contentRef} className={styles.content}>
         <AiDisclosureBanner />