Record scroll test (#2783)

* perf: history add scrollList (#2696)

* perf: chatHistorySlider add virtualList

* perf: chat records add scrollList

* delete console

* perf: ScrollData add ref props

* 优化代码

* optimize code && add line breaks

* add total records display

* finish test

* perf: ScrollComponent load data

* perf: Scroll components load

* perf: scroll code

---------

Co-authored-by: papapatrick <109422393+Patrickill@users.noreply.github.com>

packages/web/hooks/useScrollPagination.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { ReactNode, RefObject, useMemo, useRef, useState } from 'react';
 import { Box, BoxProps } from '@chakra-ui/react';
 import { useToast } from './useToast';
 import { getErrText } from '@fastgpt/global/common/error/utils';
@@ -16,6 +16,7 @@ import MyBox from '../components/common/MyBox';
 import { useTranslation } from 'next-i18next';
 
 type ItemHeight<T> = (index: number, data: T) => number;
+const thresholdVal = 200;
 
 export type ScrollListType = ({
   children,
@@ -28,7 +29,7 @@ export type ScrollListType = ({
   isLoading?: boolean;
 } & BoxProps) => React.JSX.Element;
 
-export function useScrollPagination<
+export function useVirtualScrollPagination<
   TParams extends PaginationProps,
   TData extends PaginationResponse
 >(
@@ -53,15 +54,14 @@ export function useScrollPagination<
   const { t } = useTranslation();
   const containerRef = useRef<HTMLDivElement>(null);
   const wrapperRef = useRef(null);
-
-  const noMore = useRef(false);
-
   const { toast } = useToast();
-  const [current, setCurrent] = useState(1);
+
   const [data, setData] = useState<TData['list']>([]);
   const [total, setTotal] = useState(0);
   const [isLoading, { setTrue, setFalse }] = useBoolean(false);
 
+  const noMore = data.length >= total;
+
   const [list] = useVirtualList<TData['list'][0]>(data, {
     containerTarget: containerRef,
     wrapperTarget: wrapperRef,
@@ -69,28 +69,26 @@ export function useScrollPagination<
     overscan
   });
 
-  const loadData = useLockFn(async (num: number = current) => {
-    if (noMore.current && num !== 1) return;
+  const loadData = useLockFn(async (init = false) => {
+    if (noMore && !init) return;
+
+    const offset = init ? 0 : data.length;
 
     setTrue();
 
     try {
       const res = await api({
-        current: num,
+        offset,
         pageSize,
         ...defaultParams
       } as TParams);
 
       setTotal(res.total);
-      setCurrent(num);
 
-      if (num === 1) {
+      if (offset === 0) {
         // init or reload
         setData(res.list);
-        noMore.current = res.list.length >= res.total;
       } else {
-        const totalLength = data.length + res.list.length;
-        noMore.current = totalLength >= res.total;
         setData((prev) => [...prev, ...res.list]);
       }
     } catch (error: any) {
@@ -125,7 +123,7 @@ export function useScrollPagination<
         <MyBox isLoading={isLoading} ref={containerRef} overflow={'overlay'} {...props}>
           <Box ref={wrapperRef}>
             {children}
-            {noMore.current && list.length > 0 && (
+            {noMore && list.length > 0 && (
               <Box py={4} textAlign={'center'} color={'myGray.600'} fontSize={'xs'}>
                 {t('common:common.No more data')}
               </Box>
@@ -141,7 +139,7 @@ export function useScrollPagination<
   // Reload data
   useRequest(
     async () => {
-      loadData(1);
+      loadData(true);
     },
     {
       manual: false,
@@ -155,9 +153,9 @@ export function useScrollPagination<
     () => {
       if (!containerRef.current || list.length === 0) return;
       const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
-      console.log('=======', 111111);
-      if (scrollTop + clientHeight >= scrollHeight - 100) {
-        loadData(current + 1);
+
+      if (scrollTop + clientHeight >= scrollHeight - thresholdVal) {
+        loadData(false);
       }
     },
     [scroll],
@@ -178,3 +176,178 @@ export function useScrollPagination<
     scroll2Top
   };
 }
+
+export function useScrollPagination<
+  TParams extends PaginationProps,
+  TData extends PaginationResponse
+>(
+  api: (data: TParams) => Promise<TData>,
+  {
+    refreshDeps,
+    scrollLoadType = 'bottom',
+
+    pageSize = 10,
+    params = {},
+    EmptyTip
+  }: {
+    refreshDeps?: any[];
+    scrollLoadType?: 'top' | 'bottom';
+
+    pageSize?: number;
+    params?: Record<string, any>;
+    EmptyTip?: React.JSX.Element;
+  }
+) {
+  const { t } = useTranslation();
+  const { toast } = useToast();
+
+  const [data, setData] = useState<TData['list']>([]);
+  const [total, setTotal] = useState(0);
+  const [isLoading, { setTrue, setFalse }] = useBoolean(false);
+  const isEmpty = total === 0 && !isLoading;
+
+  const noMore = data.length >= total;
+
+  const loadData = useLockFn(
+    async (init = false, ScrollContainerRef?: RefObject<HTMLDivElement>) => {
+      if (noMore && !init) return;
+
+      const offset = init ? 0 : data.length;
+
+      setTrue();
+
+      try {
+        const res = await api({
+          offset,
+          pageSize,
+          ...params
+        } as TParams);
+
+        setTotal(res.total);
+
+        if (scrollLoadType === 'top') {
+          const prevHeight = ScrollContainerRef?.current?.scrollHeight || 0;
+          const prevScrollTop = ScrollContainerRef?.current?.scrollTop || 0;
+          // 使用 requestAnimationFrame 来调整滚动位置
+          function adjustScrollPosition() {
+            requestAnimationFrame(
+              ScrollContainerRef?.current
+                ? () => {
+                    if (ScrollContainerRef?.current) {
+                      const newHeight = ScrollContainerRef.current.scrollHeight;
+                      const heightDiff = newHeight - prevHeight;
+                      ScrollContainerRef.current.scrollTop = prevScrollTop + heightDiff;
+                    }
+                  }
+                : adjustScrollPosition
+            );
+          }
+
+          setData((prevData) => (offset === 0 ? res.list : [...res.list, ...prevData]));
+          adjustScrollPosition();
+        } else {
+          setData((prevData) => (offset === 0 ? res.list : [...prevData, ...res.list]));
+        }
+      } catch (error: any) {
+        toast({
+          title: getErrText(error, t('common:core.chat.error.data_error')),
+          status: 'error'
+        });
+        console.log(error);
+      }
+
+      setFalse();
+    }
+  );
+
+  let ScrollRef = useRef<HTMLDivElement>(null);
+  const ScrollData = useMemoizedFn(
+    ({
+      children,
+      ScrollContainerRef,
+      ...props
+    }: {
+      children: ReactNode;
+      ScrollContainerRef?: RefObject<HTMLDivElement>;
+    } & BoxProps) => {
+      const ref = ScrollContainerRef || ScrollRef;
+      const loadText = useMemo(() => {
+        if (isLoading) return t('common:common.is_requesting');
+        if (noMore) return t('common:common.request_end');
+        return t('common:common.request_more');
+      }, [isLoading, noMore]);
+
+      const scroll = useScroll(ref);
+
+      // Watch scroll position
+      useThrottleEffect(
+        () => {
+          if (!ref?.current || noMore) return;
+          const { scrollTop, scrollHeight, clientHeight } = ref.current;
+
+          if (
+            (scrollLoadType === 'bottom' &&
+              scrollTop + clientHeight >= scrollHeight - thresholdVal) ||
+            (scrollLoadType === 'top' && scrollTop < thresholdVal)
+          ) {
+            loadData(false, ref);
+          }
+        },
+        [scroll],
+        { wait: 50 }
+      );
+
+      return (
+        <Box {...props} ref={ref} overflow={'overlay'}>
+          {scrollLoadType === 'top' && total > 0 && isLoading && (
+            <Box mt={2} fontSize={'xs'} color={'blackAlpha.500'} textAlign={'center'}>
+              {t('common:common.is_requesting')}
+            </Box>
+          )}
+          {children}
+          {scrollLoadType === 'bottom' && !isEmpty && (
+            <Box
+              mt={2}
+              fontSize={'xs'}
+              color={'blackAlpha.500'}
+              textAlign={'center'}
+              cursor={loadText === t('common:common.request_more') ? 'pointer' : 'default'}
+              onClick={() => {
+                if (loadText !== t('common:common.request_more')) return;
+                loadData(false);
+              }}
+            >
+              {loadText}
+            </Box>
+          )}
+          {isEmpty && EmptyTip}
+        </Box>
+      );
+    }
+  );
+
+  // Reload data
+  useRequest(
+    async () => {
+      loadData(true);
+    },
+    {
+      manual: false,
+      refreshDeps
+    }
+  );
+
+  const refreshList = useMemoizedFn(() => {
+    loadData(true);
+  });
+
+  return {
+    ScrollData,
+    isLoading,
+    total: Math.max(total, data.length),
+    data,
+    setData,
+    fetchData: loadData,
+    refreshList
+  };
+}