Perf input guide (#1557)

* perf: input guide code

* perf: input guide ui

* Chat input guide api

* Update app chat config store

* perf: app chat config field

* perf: app context

* perf: params

* fix: ts

* perf: filter private config

* perf: filter private config

* perf: import workflow

* perf: limit max tip amount

packages/web/hooks/useRequest.tsx

@@ -3,6 +3,7 @@ import { useMutation } from '@tanstack/react-query';
 import type { UseMutationOptions } from '@tanstack/react-query';
 import { getErrText } from '@fastgpt/global/common/error/utils';
 import { useTranslation } from 'next-i18next';
+import { useRequest as ahooksUseRequest } from 'ahooks';
 
 interface Props extends UseMutationOptions<any, any, any, any> {
   successToast?: string | null;
@@ -39,3 +40,50 @@ export const useRequest = ({ successToast, errorToast, onSuccess, onError, ...pr
 
   return mutation;
 };
+
+type UseRequestFunProps<TData, TParams extends any[]> = Parameters<
+  typeof ahooksUseRequest<TData, TParams>
+>;
+export const useRequest2 = <TData, TParams extends any[]>(
+  server: UseRequestFunProps<TData, TParams>[0],
+  options: UseRequestFunProps<TData, TParams>[1] & {
+    errorToast?: string;
+    successToast?: string;
+  } = {},
+  plugin?: UseRequestFunProps<TData, TParams>[2]
+) => {
+  const { t } = useTranslation();
+  const { errorToast, successToast, ...rest } = options || {};
+  const { toast } = useToast();
+
+  const res = ahooksUseRequest<TData, TParams>(
+    server,
+    {
+      ...rest,
+      onError: (err, params) => {
+        rest?.onError?.(err, params);
+        if (errorToast !== undefined) {
+          const errText = t(getErrText(err, errorToast || ''));
+          if (errText) {
+            toast({
+              title: errText,
+              status: 'error'
+            });
+          }
+        }
+      },
+      onSuccess: (res, params) => {
+        rest?.onSuccess?.(res, params);
+        if (successToast) {
+          toast({
+            title: successToast,
+            status: 'success'
+          });
+        }
+      }
+    },
+    plugin
+  );
+
+  return res;
+};

packages/web/hooks/useScrollPagination.tsx

@@ -1,9 +1,17 @@
-import { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { Box, BoxProps } from '@chakra-ui/react';
 import { useToast } from './useToast';
 import { getErrText } from '@fastgpt/global/common/error/utils';
 import { PaginationProps, PaginationResponse } from '../common/fetch/type';
-import { useBoolean, useLockFn, useMemoizedFn, useMount, useScroll, useVirtualList } from 'ahooks';
+import {
+  useBoolean,
+  useLockFn,
+  useMemoizedFn,
+  useMount,
+  useScroll,
+  useVirtualList,
+  useRequest
+} from 'ahooks';
 import MyBox from '../components/common/MyBox';
 import { useTranslation } from 'next-i18next';
 
@@ -13,12 +21,19 @@ export function useScrollPagination<
 >(
   api: (data: TParams) => Promise<TData>,
   {
+    debounceWait,
+    throttleWait,
+    refreshDeps,
     itemHeight = 50,
     overscan = 10,
 
     pageSize = 10,
     defaultParams = {}
   }: {
+    debounceWait?: number;
+    throttleWait?: number;
+    refreshDeps?: any[];
+
     itemHeight: number;
     overscan?: number;
 
@@ -45,7 +60,7 @@ export function useScrollPagination<
   });
 
   const loadData = useLockFn(async (num: number = current) => {
-    if (noMore.current) return;
+    if (noMore.current && num !== 1) return;
 
     setTrue();
 
@@ -59,7 +74,7 @@ export function useScrollPagination<
       setCurrent(num);
 
       if (num === 1) {
-        // reload
+        // init or reload
         setData(res.list);
         noMore.current = res.list.length >= res.total;
       } else {
@@ -78,34 +93,48 @@ export function useScrollPagination<
     setFalse();
   });
 
+  const scroll2Top = () => {
+    if (containerRef.current) {
+      containerRef.current.scrollTop = 0;
+    }
+  };
+
   const ScrollList = useMemoizedFn(
     ({
       children,
+      EmptyChildren,
       isLoading,
       ...props
-    }: { children: React.ReactNode; isLoading?: boolean } & BoxProps) => {
+    }: {
+      children: React.ReactNode;
+      EmptyChildren?: React.ReactNode;
+      isLoading?: boolean;
+    } & BoxProps) => {
       return (
         <>
           <MyBox isLoading={isLoading} ref={containerRef} overflow={'overlay'} {...props}>
             <Box ref={wrapperRef}>{children}</Box>
+            {noMore.current && list.length > 0 && (
+              <Box py={4} textAlign={'center'} color={'myGray.600'} fontSize={'sm'}>
+                {t('common.No more data')}
+              </Box>
+            )}
+            {list.length === 0 && !isLoading && EmptyChildren && <>{EmptyChildren}</>}
           </MyBox>
-          {noMore.current && (
-            <Box pb={2} textAlign={'center'} color={'myGray.600'} fontSize={'sm'}>
-              {t('common.No more data')}
-            </Box>
-          )}
         </>
       );
     }
   );
 
-  useMount(() => {
-    loadData(1);
+  useRequest(() => loadData(1), {
+    refreshDeps,
+    debounceWait: data.length === 0 ? 0 : debounceWait,
+    throttleWait
   });
 
   const scroll = useScroll(containerRef);
   useEffect(() => {
-    if (!containerRef.current) return;
+    if (!containerRef.current || list.length === 0) return;
 
     const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
 
@@ -118,8 +147,10 @@ export function useScrollPagination<
     containerRef,
     list,
     data,
+    setData,
     isLoading,
     ScrollList,
-    fetchData: loadData
+    fetchData: loadData,
+    scroll2Top
   };
 }