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>
2025-07-30 18:48:55 +00:00 · 2024-09-24 17:13:32 +08:00
parent 8e0edaace1
commit 5f9479e889
46 changed files with 827 additions and 422 deletions
--- a/projects/app/src/pages/api/core/app/version/detail.ts
+++ b/projects/app/src/pages/api/core/app/version/detail.ts
@@ -1,7 +1,6 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 import { NextAPI } from '@/service/middleware/entry';
 import { MongoAppVersion } from '@fastgpt/service/core/app/version/schema';
-import { PaginationProps, PaginationResponse } from '@fastgpt/web/common/fetch/type';
 import { authApp } from '@fastgpt/service/support/permission/app/auth';
 import { ReadPermissionVal } from '@fastgpt/global/support/permission/constant';

--- a/projects/app/src/pages/api/core/app/version/list.ts
+++ b/projects/app/src/pages/api/core/app/version/list.ts
@@ -3,6 +3,7 @@ import { NextAPI } from '@/service/middleware/entry';
 import { MongoAppVersion } from '@fastgpt/service/core/app/version/schema';
 import { PaginationProps, PaginationResponse } from '@fastgpt/web/common/fetch/type';
 import { AppVersionSchemaType } from '@fastgpt/global/core/app/version';
+import { ApiRequestProps } from '@fastgpt/service/type/next';

 type Props = PaginationProps<{
  appId: string;
@@ -10,8 +11,8 @@ type Props = PaginationProps<{

 type Response = PaginationResponse<AppVersionSchemaType>;

-async function handler(req: NextApiRequest, res: NextApiResponse<any>): Promise<Response> {
-  const { current, pageSize, appId } = req.body as Props;
+async function handler(req: ApiRequestProps<Props>, res: NextApiResponse<any>): Promise<Response> {
+  const { offset, pageSize, appId } = req.body;

  const [result, total] = await Promise.all([
    MongoAppVersion.find({
@@ -20,7 +21,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse<any>): Promise<
      .sort({
        time: -1
      })
-      .skip((current - 1) * pageSize)
+      .skip(offset)
      .limit(pageSize),
    MongoAppVersion.countDocuments({ appId })
  ]);
--- a/projects/app/src/pages/api/core/app/version/listWorkflow.tsx
+++ b/projects/app/src/pages/api/core/app/version/listWorkflow.tsx
@@ -2,6 +2,7 @@ import type { NextApiRequest, NextApiResponse } from 'next';
 import { NextAPI } from '@/service/middleware/entry';
 import { MongoAppVersion } from '@fastgpt/service/core/app/version/schema';
 import { PaginationProps, PaginationResponse } from '@fastgpt/web/common/fetch/type';
+import { ApiRequestProps } from '@fastgpt/service/type/next';

 type Props = PaginationProps<{
  appId: string;
@@ -18,8 +19,8 @@ export type versionListResponse = {

 type Response = PaginationResponse<versionListResponse>;

-async function handler(req: NextApiRequest, res: NextApiResponse<any>): Promise<Response> {
-  const { current, pageSize, appId } = req.body as Props;
+async function handler(req: ApiRequestProps<Props>, res: NextApiResponse<any>): Promise<Response> {
+  const { offset, pageSize, appId } = req.body;

  const [result, total] = await Promise.all([
    MongoAppVersion.find(
@@ -31,7 +32,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse<any>): Promise<
      .sort({
        time: -1
      })
-      .skip((current - 1) * pageSize)
+      .skip(offset)
      .limit(pageSize),
    MongoAppVersion.countDocuments({ appId })
  ]);
--- a/projects/app/src/pages/api/core/chat/getHistories.ts
+++ b/projects/app/src/pages/api/core/chat/getHistories.ts
@@ -1,4 +1,3 @@
-import { connectToDatabase } from '@/service/mongo';
 import { MongoChat } from '@fastgpt/service/core/chat/chatSchema';
 import { ChatSourceEnum } from '@fastgpt/global/core/chat/constants';
 import { authOutLink } from '@/service/support/permission/auth/outLink';
@@ -18,7 +17,7 @@ async function handler(
  req: ApiRequestProps<getHistoriesBody, getHistoriesQuery>,
  res: ApiResponseType<any>
 ): Promise<PaginationResponse<getHistoriesResponse>> {
-  const { appId, shareId, outLinkUid, teamId, teamToken, current, pageSize } =
+  const { appId, shareId, outLinkUid, teamId, teamToken, offset, pageSize } =
    req.body as getHistoriesBody;

  const match = await (async () => {
@@ -63,7 +62,7 @@ async function handler(
  const [data, total] = await Promise.all([
    await MongoChat.find(match, 'chatId title top customTitle appId updateTime')
      .sort({ top: -1, updateTime: -1 })
-      .skip((current - 1) * pageSize)
+      .skip(offset)
      .limit(pageSize),
    MongoChat.countDocuments(match)
  ]);
--- a/projects/app/src/pages/api/core/chat/getPaginationRecords.ts
+++ b/projects/app/src/pages/api/core/chat/getPaginationRecords.ts
@@ -0,0 +1,93 @@
+import type { ApiRequestProps, ApiResponseType } from '@fastgpt/service/type/next';
+import { NextAPI } from '@/service/middleware/entry';
+import { GetChatRecordsProps } from '@/global/core/chat/api';
+import { ReadPermissionVal } from '@fastgpt/global/support/permission/constant';
+import { DispatchNodeResponseKeyEnum } from '@fastgpt/global/core/workflow/runtime/constants';
+import { transformPreviewHistories } from '@/global/core/chat/utils';
+import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
+import { getChatItems } from '@fastgpt/service/core/chat/controller';
+import { authChatCrud } from '@/service/support/permission/auth/chat';
+import { MongoApp } from '@fastgpt/service/core/app/schema';
+import { AppErrEnum } from '@fastgpt/global/common/error/code/app';
+import { ChatRoleEnum } from '@fastgpt/global/core/chat/constants';
+import { filterPublicNodeResponseData } from '@fastgpt/global/core/chat/utils';
+import { authOutLink } from '@/service/support/permission/auth/outLink';
+import { GetChatTypeEnum } from '@/global/core/chat/constants';
+import { PaginationProps, PaginationResponse } from '@fastgpt/web/common/fetch/type';
+import { ChatItemType } from '@fastgpt/global/core/chat/type';
+
+export type getPaginationRecordsQuery = {};
+
+export type getPaginationRecordsBody = PaginationProps & GetChatRecordsProps;
+
+export type getPaginationRecordsResponse = PaginationResponse<ChatItemType>;
+
+async function handler(
+  req: ApiRequestProps<getPaginationRecordsBody, getPaginationRecordsQuery>,
+  res: ApiResponseType<any>
+): Promise<getPaginationRecordsResponse> {
+  const { chatId, appId, offset, pageSize = 10, loadCustomFeedbacks, type } = req.body;
+
+  if (!appId || !chatId) {
+    return {
+      list: [],
+      total: 0
+    };
+  }
+
+  const [app] = await Promise.all([
+    MongoApp.findById(appId, 'type').lean(),
+    authChatCrud({
+      req,
+      authToken: true,
+      ...req.body,
+      per: ReadPermissionVal
+    })
+  ]);
+  if (!app) {
+    return Promise.reject(AppErrEnum.unExist);
+  }
+  const isPlugin = app.type === AppTypeEnum.plugin;
+
+  const shareChat = await (async () => {
+    if (type === GetChatTypeEnum.outLink)
+      return await authOutLink({
+        shareId: req.body.shareId,
+        outLinkUid: req.body.outLinkUid
+      }).then((result) => result.shareChat);
+  })();
+
+  const fieldMap = {
+    [GetChatTypeEnum.normal]: `dataId obj value adminFeedback userBadFeedback userGoodFeedback ${
+      DispatchNodeResponseKeyEnum.nodeResponse
+    } ${loadCustomFeedbacks ? 'customFeedbacks' : ''}`,
+    [GetChatTypeEnum.outLink]: `dataId obj value userGoodFeedback userBadFeedback adminFeedback ${
+      shareChat?.responseDetail || isPlugin ? `${DispatchNodeResponseKeyEnum.nodeResponse}` : ''
+    } `,
+    [GetChatTypeEnum.team]: `dataId obj value userGoodFeedback userBadFeedback adminFeedback ${DispatchNodeResponseKeyEnum.nodeResponse}`
+  };
+
+  const { total, histories } = await getChatItems({
+    appId,
+    chatId,
+    field: fieldMap[type],
+    offset,
+    limit: pageSize
+  });
+
+  // Remove important information
+  if (type === 'outLink' && app.type !== AppTypeEnum.plugin) {
+    histories.forEach((item) => {
+      if (item.obj === ChatRoleEnum.AI) {
+        item.responseData = filterPublicNodeResponseData({ flowResponses: item.responseData });
+      }
+    });
+  }
+
+  return {
+    list: isPlugin ? histories : transformPreviewHistories(histories),
+    total
+  };
+}
+
+export default NextAPI(handler);
--- a/projects/app/src/pages/api/core/chat/init.ts
+++ b/projects/app/src/pages/api/core/chat/init.ts
@@ -5,15 +5,11 @@ import { getGuideModule, getAppChatConfig } from '@fastgpt/global/core/workflow/
 import { getChatModelNameListByModules } from '@/service/core/app/workflow';
 import type { InitChatProps, InitChatResponse } from '@/global/core/chat/api.d';
 import { MongoChat } from '@fastgpt/service/core/chat/chatSchema';
-import { getChatItems } from '@fastgpt/service/core/chat/controller';
 import { ChatErrEnum } from '@fastgpt/global/common/error/code/chat';
-import { DispatchNodeResponseKeyEnum } from '@fastgpt/global/core/workflow/runtime/constants';
 import { getAppLatestVersion } from '@fastgpt/service/core/app/controller';
 import { NextAPI } from '@/service/middleware/entry';
 import { ReadPermissionVal } from '@fastgpt/global/support/permission/constant';
 import { FlowNodeTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
-import { transformPreviewHistories } from '@/global/core/chat/utils';
-import { AppTypeEnum } from '@fastgpt/global/core/app/constants';

 async function handler(
  req: NextApiRequest,
@@ -45,17 +41,8 @@ async function handler(
  }

  // get app and history
-  const [{ histories }, { nodes, chatConfig }] = await Promise.all([
-    getChatItems({
-      appId,
-      chatId,
-      limit: 30,
-      field: `dataId obj value adminFeedback userBadFeedback userGoodFeedback ${
-        DispatchNodeResponseKeyEnum.nodeResponse
-      } ${loadCustomFeedbacks ? 'customFeedbacks' : ''}`
-    }),
-    getAppLatestVersion(app._id, app)
-  ]);
+  const { nodes, chatConfig } = await getAppLatestVersion(app._id, app);
+
  const pluginInputs =
    app?.modules?.find((node) => node.flowNodeType === FlowNodeTypeEnum.pluginInput)?.inputs ?? [];

@@ -65,7 +52,6 @@ async function handler(
    title: chat?.title,
    userAvatar: undefined,
    variables: chat?.variables || {},
-    history: app.type === AppTypeEnum.plugin ? histories : transformPreviewHistories(histories),
    app: {
      chatConfig: getAppChatConfig({
        chatConfig,
--- a/projects/app/src/pages/api/core/chat/inputGuide/list.ts
+++ b/projects/app/src/pages/api/core/chat/inputGuide/list.ts
@@ -14,10 +14,10 @@ export type ChatInputGuideProps = PaginationProps<{
 export type ChatInputGuideResponse = PaginationResponse<ChatInputGuideSchemaType>;

 async function handler(
-  req: ApiRequestProps<{}, ChatInputGuideProps>,
+  req: ApiRequestProps<ChatInputGuideProps>,
  res: NextApiResponse<any>
 ): Promise<ChatInputGuideResponse> {
-  const { appId, pageSize, current, searchKey } = req.query;
+  const { appId, pageSize, offset, searchKey } = req.body;

  await authApp({ req, appId, authToken: true, per: ReadPermissionVal });

@@ -27,10 +27,7 @@ async function handler(
  };

  const [result, total] = await Promise.all([
-    MongoChatInputGuide.find(params)
-      .sort({ _id: -1 })
-      .skip(pageSize * (current - 1))
-      .limit(pageSize),
+    MongoChatInputGuide.find(params).sort({ _id: -1 }).skip(offset).limit(pageSize),
    MongoChatInputGuide.countDocuments(params)
  ]);

--- a/projects/app/src/pages/api/core/chat/outLink/init.ts
+++ b/projects/app/src/pages/api/core/chat/outLink/init.ts
@@ -3,8 +3,6 @@ import { jsonRes } from '@fastgpt/service/common/response';
 import type { InitChatResponse, InitOutLinkChatProps } from '@/global/core/chat/api.d';
 import { getGuideModule, getAppChatConfig } from '@fastgpt/global/core/workflow/utils';
 import { getChatModelNameListByModules } from '@/service/core/app/workflow';
-import { DispatchNodeResponseKeyEnum } from '@fastgpt/global/core/workflow/runtime/constants';
-import { getChatItems } from '@fastgpt/service/core/chat/controller';
 import { MongoTeamMember } from '@fastgpt/service/support/user/team/teamMemberSchema';
 import { authOutLink } from '@/service/support/permission/auth/outLink';
 import { MongoApp } from '@fastgpt/service/core/app/schema';
@@ -13,8 +11,6 @@ import { MongoChat } from '@fastgpt/service/core/chat/chatSchema';
 import { ChatErrEnum } from '@fastgpt/global/common/error/code/chat';
 import { getAppLatestVersion } from '@fastgpt/service/core/app/controller';
 import { FlowNodeTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
-import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
-import { transformPreviewHistories } from '@/global/core/chat/utils';
 import { NextAPI } from '@/service/middleware/entry';

 async function handler(req: NextApiRequest, res: NextApiResponse) {
@@ -39,19 +35,8 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
    throw new Error(ChatErrEnum.unAuthChat);
  }

-  const [{ histories }, { nodes, chatConfig }] = await Promise.all([
-    getChatItems({
-      appId: app._id,
-      chatId,
-      limit: 30,
-      field: `dataId obj value userGoodFeedback userBadFeedback ${
-        shareChat.responseDetail || app.type === AppTypeEnum.plugin
-          ? `adminFeedback ${DispatchNodeResponseKeyEnum.nodeResponse}`
-          : ''
-      } `
-    }),
-    getAppLatestVersion(app._id, app)
-  ]);
+  const { nodes, chatConfig } = await getAppLatestVersion(app._id, app);
+  // pick share response field

  jsonRes<InitChatResponse>(res, {
    data: {
@@ -61,7 +46,6 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
      //@ts-ignore
      userAvatar: tmb?.userId?.avatar,
      variables: chat?.variables || {},
-      history: app.type === AppTypeEnum.plugin ? histories : transformPreviewHistories(histories),
      app: {
        chatConfig: getAppChatConfig({
          chatConfig,
--- a/projects/app/src/pages/api/core/chat/team/init.ts
+++ b/projects/app/src/pages/api/core/chat/team/init.ts
@@ -2,19 +2,15 @@ import type { NextApiRequest, NextApiResponse } from 'next';
 import { jsonRes } from '@fastgpt/service/common/response';
 import { getGuideModule, getAppChatConfig } from '@fastgpt/global/core/workflow/utils';
 import { getChatModelNameListByModules } from '@/service/core/app/workflow';
-import { DispatchNodeResponseKeyEnum } from '@fastgpt/global/core/workflow/runtime/constants';
 import type { InitChatResponse, InitTeamChatProps } from '@/global/core/chat/api.d';
 import { MongoChat } from '@fastgpt/service/core/chat/chatSchema';
 import { MongoApp } from '@fastgpt/service/core/app/schema';
-import { getChatItems } from '@fastgpt/service/core/chat/controller';
 import { AppErrEnum } from '@fastgpt/global/common/error/code/app';
 import { authTeamSpaceToken } from '@/service/support/permission/auth/team';
 import { MongoTeam } from '@fastgpt/service/support/user/team/teamSchema';
 import { ChatErrEnum } from '@fastgpt/global/common/error/code/chat';
 import { getAppLatestVersion } from '@fastgpt/service/core/app/controller';
 import { FlowNodeTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
-import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
-import { transformPreviewHistories } from '@/global/core/chat/utils';
 import { NextAPI } from '@/service/middleware/entry';

 async function handler(req: NextApiRequest, res: NextApiResponse) {
@@ -45,15 +41,9 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
  }

  // get app and history
-  const [{ histories }, { nodes, chatConfig }] = await Promise.all([
-    getChatItems({
-      appId,
-      chatId,
-      limit: 30,
-      field: `dataId obj value userGoodFeedback userBadFeedback adminFeedback ${DispatchNodeResponseKeyEnum.nodeResponse}`
-    }),
-    getAppLatestVersion(app._id, app)
-  ]);
+  const { nodes, chatConfig } = await getAppLatestVersion(app._id, app);
+
+  // pick share response field

  jsonRes<InitChatResponse>(res, {
    data: {
@@ -62,7 +52,6 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
      title: chat?.title,
      userAvatar: team?.avatar,
      variables: chat?.variables || {},
-      history: app.type === AppTypeEnum.plugin ? histories : transformPreviewHistories(histories),
      app: {
        chatConfig: getAppChatConfig({
          chatConfig,
--- a/projects/app/src/pages/api/core/dataset/collection/scrollList.ts
+++ b/projects/app/src/pages/api/core/dataset/collection/scrollList.ts
@@ -22,21 +22,22 @@ export type GetScrollCollectionsProps = PaginationProps<{
 }>;

 async function handler(
-  req: ApiRequestProps<{}, GetScrollCollectionsProps>
+  req: ApiRequestProps<GetScrollCollectionsProps, {}>
 ): Promise<PaginationResponse<DatasetCollectionsListItemType>> {
  let {
    datasetId,
    pageSize = 10,
-    current = 1,
+    offset,
    parentId = null,
    searchText = '',
    selectFolder = false,
    filterTags = [],
    simple = false
-  } = req.query;
+  } = req.body;
  if (!datasetId) {
    return Promise.reject(CommonErrEnum.missingParams);
  }
+
  searchText = searchText?.replace(/'/g, '');
  pageSize = Math.min(pageSize, 30);

@@ -84,7 +85,7 @@ async function handler(
      .sort({
        updateTime: -1
      })
-      .skip(pageSize * (current - 1))
+      .skip(offset)
      .limit(pageSize)
      .lean();

@@ -110,7 +111,7 @@ async function handler(
        $sort: { updateTime: -1 }
      },
      {
-        $skip: (current - 1) * pageSize
+        $skip: offset
      },
      {
        $limit: pageSize
--- a/projects/app/src/pages/api/core/dataset/data/list.ts
+++ b/projects/app/src/pages/api/core/dataset/data/list.ts
@@ -3,19 +3,20 @@ import { MongoDatasetData } from '@fastgpt/service/core/dataset/data/schema';
 import { replaceRegChars } from '@fastgpt/global/common/string/tools';
 import { NextAPI } from '@/service/middleware/entry';
 import { ReadPermissionVal } from '@fastgpt/global/support/permission/constant';
-import { PagingData, RequestPaging } from '@/types';
 import { ApiRequestProps } from '@fastgpt/service/type/next';
 import { DatasetDataListItemType } from '@/global/core/dataset/type';
+import { PaginationProps, PaginationResponse } from '@fastgpt/web/common/fetch/type';

-export type GetDatasetDataListProps = RequestPaging & {
+export type GetDatasetDataListProps = PaginationProps & {
  searchText?: string;
  collectionId: string;
 };
+export type GetDatasetDataListRes = PaginationResponse<DatasetDataListItemType>;

 async function handler(
  req: ApiRequestProps<GetDatasetDataListProps>
-): Promise<PagingData<DatasetDataListItemType>> {
-  let { pageNum = 1, pageSize = 10, searchText = '', collectionId } = req.body;
+): Promise<GetDatasetDataListRes> {
+  let { offset, pageSize = 10, searchText = '', collectionId } = req.body;

  pageSize = Math.min(pageSize, 30);

@@ -40,19 +41,17 @@ async function handler(
      : {})
  };

-  const [data, total] = await Promise.all([
+  const [list, total] = await Promise.all([
    MongoDatasetData.find(match, '_id datasetId collectionId q a chunkIndex')
      .sort({ chunkIndex: 1, updateTime: -1 })
-      .skip((pageNum - 1) * pageSize)
+      .skip(offset)
      .limit(pageSize)
      .lean(),
    MongoDatasetData.countDocuments(match)
  ]);

  return {
-    pageNum,
-    pageSize,
-    data,
+    list,
    total
  };
 }
--- a/projects/app/src/pages/api/v1/chat/completions.ts
+++ b/projects/app/src/pages/api/v1/chat/completions.ts
@@ -208,6 +208,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
      getChatItems({
        appId: app._id,
        chatId,
+        offset: 0,
        limit,
        field: `dataId obj value nodeOutputs`
      }),
@@ -555,6 +556,7 @@ const authHeaderRequest = async ({
      };
    } else {
      // token_auth
+
      if (!appId) {
        return Promise.reject('appId is empty');
      }
--- a/projects/app/src/pages/app/detail/components/Logs/DetailLogsModal.tsx
+++ b/projects/app/src/pages/app/detail/components/Logs/DetailLogsModal.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Flex, Box, useTheme } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
 import { HUMAN_ICON } from '@fastgpt/global/common/system/constants';
@@ -16,6 +16,7 @@ import ChatBox from '@/components/core/chat/ChatContainer/ChatBox';
 import { useSystem } from '@fastgpt/web/hooks/useSystem';
 import { useQuery } from '@tanstack/react-query';
 import { PcHeader } from '@/pages/chat/components/ChatHeader';
+import { GetChatTypeEnum } from '@/global/core/chat/constants';

 const PluginRunBox = dynamic(() => import('@/components/core/chat/ChatContainer/PluginRunBox'));

@@ -31,29 +32,36 @@ const DetailLogsModal = ({
  const { t } = useTranslation();
  const { isPc } = useSystem();
  const theme = useTheme();
+
+  const params = useMemo(() => {
+    return {
+      chatId,
+      appId,
+      loadCustomFeedbacks: true,
+      type: GetChatTypeEnum.normal
+    };
+  }, [appId, chatId]);
  const {
    ChatBoxRef,
-    chatRecords,
-    setChatRecords,
    variablesForm,
    pluginRunTab,
    setPluginRunTab,
-    resetChatRecords
+    resetVariables,
+    useChatScrollData
  } = useChat();
+  const {
+    data: chatRecords,
+    ScrollData,
+    setData: setChatRecords,
+    total: totalRecordsCount
+  } = useChatScrollData(params);

  const { data: chat, isFetching } = useQuery(
    ['getChatDetail', chatId],
    () => getInitChatInfo({ appId, chatId, loadCustomFeedbacks: true }),
    {
      onSuccess(res) {
-        const history = res.history.map((item) => ({
-          ...item,
-          dataId: item.dataId || getNanoid(),
-          status: 'finish' as any
-        }));
-
-        resetChatRecords({
-          records: history,
+        resetVariables({
          variables: res.variables
        });
      }
@@ -63,11 +71,12 @@ const DetailLogsModal = ({
  const title = chat?.title;
  const chatModels = chat?.app?.chatModels;
  const isPlugin = chat?.app.type === AppTypeEnum.plugin;
+  const loading = isFetching;

  return (
    <>
      <MyBox
-        isLoading={isFetching}
+        isLoading={loading}
        display={'flex'}
        flexDirection={'column'}
        zIndex={3}
@@ -124,7 +133,11 @@ const DetailLogsModal = ({
          >
            {isPc ? (
              <>
-                <PcHeader title={title || ''} history={chatRecords} chatModels={chatModels} />
+                <PcHeader
+                  totalRecordsCount={totalRecordsCount}
+                  title={title || ''}
+                  chatModels={chatModels}
+                />
                <Box flex={1} />
              </>
            ) : (
@@ -157,6 +170,7 @@ const DetailLogsModal = ({
            </Box>
          ) : (
            <ChatBox
+              ScrollData={ScrollData}
              ref={ChatBoxRef}
              chatHistories={chatRecords}
              setChatHistories={setChatRecords}
--- a/projects/app/src/pages/app/detail/components/PublishHistoriesSlider.tsx
+++ b/projects/app/src/pages/app/detail/components/PublishHistoriesSlider.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { getPublishList, postRevertVersion } from '@/web/core/app/api/version';
-import { useScrollPagination } from '@fastgpt/web/hooks/useScrollPagination';
+import { useVirtualScrollPagination } from '@fastgpt/web/hooks/useScrollPagination';
 import CustomRightDrawer from '@fastgpt/web/components/common/MyDrawer/CustomRightDrawer';
 import { useTranslation } from 'next-i18next';
 import { Box, Button, Flex } from '@chakra-ui/react';
@@ -41,7 +41,7 @@ const PublishHistoriesSlider = ({

  const [selectedHistoryId, setSelectedHistoryId] = useState<string>();

-  const { scrollDataList, ScrollList, isLoading } = useScrollPagination(getPublishList, {
+  const { scrollDataList, ScrollList, isLoading } = useVirtualScrollPagination(getPublishList, {
    itemHeight: 49,
    overscan: 20,

--- a/projects/app/src/pages/app/detail/components/WorkflowPublishHistoriesSlider.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowPublishHistoriesSlider.tsx
@@ -4,7 +4,7 @@ import {
  getWorkflowVersionList,
  updateAppVersion
 } from '@/web/core/app/api/version';
-import { useScrollPagination } from '@fastgpt/web/hooks/useScrollPagination';
+import { useVirtualScrollPagination } from '@fastgpt/web/hooks/useScrollPagination';
 import CustomRightDrawer from '@fastgpt/web/components/common/MyDrawer/CustomRightDrawer';
 import { useTranslation } from 'next-i18next';
 import { Box, Button, Flex, Input } from '@chakra-ui/react';
@@ -180,7 +180,7 @@ const TeamCloud = () => {
  const { loadAndGetTeamMembers } = useUserStore();
  const { feConfigs } = useSystemStore();

-  const { scrollDataList, ScrollList, isLoading, fetchData } = useScrollPagination(
+  const { scrollDataList, ScrollList, isLoading, fetchData } = useVirtualScrollPagination(
    getWorkflowVersionList,
    {
      itemHeight: 40,
--- a/projects/app/src/pages/app/detail/components/useChatTest.tsx
+++ b/projects/app/src/pages/app/detail/components/useChatTest.tsx
@@ -1,5 +1,5 @@
 import { useUserStore } from '@/web/support/user/useUserStore';
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import type { StartChatFnProps } from '@/components/core/chat/ChatContainer/type';
 import { streamFetch } from '@/web/common/api/fetch';
 import { getMaxHistoryLimitFromNodes } from '@fastgpt/global/core/workflow/runtime/utils';
@@ -12,9 +12,10 @@ import { FlowNodeTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
 import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
 import dynamic from 'next/dynamic';
 import { useChat } from '@/components/core/chat/ChatContainer/useChat';
-import { Box } from '@chakra-ui/react';
+import { Box, BoxProps } from '@chakra-ui/react';
 import { AppChatConfigType } from '@fastgpt/global/core/app/type';
 import ChatBox from '@/components/core/chat/ChatContainer/ChatBox';
+import { ChatSiteItemType } from '@fastgpt/global/core/chat/type';

 const PluginRunBox = dynamic(() => import('@/components/core/chat/ChatContainer/PluginRunBox'));

@@ -29,6 +30,7 @@ export const useChatTest = ({
 }) => {
  const { userInfo } = useUserStore();
  const { appDetail } = useContextSelector(AppContext, (v) => v);
+  const [chatRecords, setChatRecords] = useState<ChatSiteItemType[]>([]);

  const startChat = useMemoizedFn(
    async ({ messages, controller, generatingMessage, variables }: StartChatFnProps) => {
@@ -60,15 +62,26 @@ export const useChatTest = ({
    return nodes.find((node) => node.flowNodeType === FlowNodeTypeEnum.pluginInput)?.inputs || [];
  }, [nodes]);

-  const {
-    ChatBoxRef,
-    chatRecords,
-    setChatRecords,
-    variablesForm,
-    pluginRunTab,
-    setPluginRunTab,
-    clearChatRecords
-  } = useChat();
+  const { ChatBoxRef, variablesForm, pluginRunTab, setPluginRunTab, clearChatRecords } = useChat();
+
+  // Mock ScrollData
+  const ScrollData = useCallback(
+    ({
+      children,
+      ScrollContainerRef,
+      ...props
+    }: {
+      ScrollContainerRef?: React.RefObject<HTMLDivElement>;
+      children: React.ReactNode;
+    } & BoxProps) => {
+      return (
+        <Box ref={ScrollContainerRef} {...props} overflow={'overlay'}>
+          {children}
+        </Box>
+      );
+    },
+    []
+  );

  const CustomChatContainer = useMemoizedFn(() =>
    appDetail.type === AppTypeEnum.plugin ? (
@@ -82,13 +95,17 @@ export const useChatTest = ({
          chatConfig={appDetail.chatConfig}
          tab={pluginRunTab}
          setTab={setPluginRunTab}
-          onNewChat={clearChatRecords}
+          onNewChat={() => {
+            clearChatRecords();
+            setChatRecords([]);
+          }}
          onStartChat={startChat}
        />
      </Box>
    ) : (
      <ChatBox
        ref={ChatBoxRef}
+        ScrollData={ScrollData}
        chatHistories={chatRecords}
        setChatHistories={setChatRecords}
        variablesForm={variablesForm}
--- a/projects/app/src/pages/chat/components/ChatHeader.tsx
+++ b/projects/app/src/pages/chat/components/ChatHeader.tsx
@@ -28,13 +28,15 @@ const ChatHeader = ({
  history,
  showHistory,
  apps,
-  onRouteToAppDetail
+  onRouteToAppDetail,
+  totalRecordsCount
 }: {
  history: ChatItemType[];
  showHistory?: boolean;
  chatData: InitChatResponse;
  apps?: AppListItemType[];
  onRouteToAppDetail?: () => void;
+  totalRecordsCount: number;
 }) => {
  const { t } = useTranslation();
  const isPlugin = chatData.app.type === AppTypeEnum.plugin;
@@ -52,9 +54,9 @@ const ChatHeader = ({
      {isPc ? (
        <>
          <PcHeader
+            totalRecordsCount={totalRecordsCount}
            title={chatData.title || t('common:core.chat.New Chat')}
            chatModels={chatData.app.chatModels}
-            history={history}
          />
          <Box flex={1} />
        </>
@@ -91,6 +93,7 @@ const MobileDrawer = ({
  const router = useRouter();
  const isTeamChat = router.pathname === '/chat/team';
  const [currentTab, setCurrentTab] = useState<TabEnum>(TabEnum.recently);
+
  const getAppList = useCallback(async ({ parentId }: GetResourceFolderListProps) => {
    return getMyApps({ parentId }).then((res) =>
      res.map<GetResourceListItemResponse>((item) => ({
@@ -102,6 +105,7 @@ const MobileDrawer = ({
    );
  }, []);
  const { onChangeAppId } = useContextSelector(ChatContext, (v) => v);
+
  const onclickApp = (id: string) => {
    onChangeAppId(id);
    onCloseDrawer();
@@ -251,13 +255,14 @@ const MobileHeader = ({
 export const PcHeader = ({
  title,
  chatModels,
-  history
+  totalRecordsCount
 }: {
  title: string;
  chatModels?: string[];
-  history: ChatItemType[];
+  totalRecordsCount: number;
 }) => {
  const { t } = useTranslation();
+
  return (
    <>
      <Box mr={3} maxW={'200px'} className="textEllipsis" color={'myGray.1000'}>
@@ -266,9 +271,9 @@ export const PcHeader = ({
      <MyTag>
        <MyIcon name={'history'} w={'14px'} />
        <Box ml={1}>
-          {history.length === 0
+          {totalRecordsCount === 0
            ? t('common:core.chat.New Chat')
-            : t('common:core.chat.History Amount', { amount: history.length })}
+            : t('common:core.chat.History Amount', { amount: totalRecordsCount })}
        </Box>
      </MyTag>
      {!!chatModels && chatModels.length > 0 && (
--- a/projects/app/src/pages/chat/index.tsx
+++ b/projects/app/src/pages/chat/index.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import NextHead from '@/components/common/NextHead';
 import { useRouter } from 'next/router';
-import { delChatRecordById, getChatHistories, getInitChatInfo } from '@/web/core/chat/api';
+import { delChatRecordById, getInitChatInfo } from '@/web/core/chat/api';
 import { Box, Flex, Drawer, DrawerOverlay, DrawerContent, useTheme } from '@chakra-ui/react';
 import { streamFetch } from '@/web/common/api/fetch';
 import { useChatStore } from '@/web/core/chat/context/storeChat';
@@ -16,17 +16,15 @@ import SliderApps from './components/SliderApps';
 import ChatHeader from './components/ChatHeader';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { serviceSideProps } from '@/web/common/utils/i18n';
-import { checkChatSupportSelectFileByChatModels } from '@/web/core/chat/utils';
 import { getChatTitleFromChatMessage } from '@fastgpt/global/core/chat/utils';
-import { ChatStatusEnum } from '@fastgpt/global/core/chat/constants';
 import { GPTMessages2Chats } from '@fastgpt/global/core/chat/adapt';
 import { getMyApps } from '@/web/core/app/api';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';

-import { useMount } from 'ahooks';
+import { useCreation, useMount } from 'ahooks';
 import { getNanoid } from '@fastgpt/global/common/string/tools';
-import { InitChatResponse } from '@/global/core/chat/api';
-import { defaultChatData } from '@/global/core/chat/constants';
+
+import { defaultChatData, GetChatTypeEnum } from '@/global/core/chat/constants';
 import ChatContextProvider, { ChatContext } from '@/web/core/chat/context/chatContext';
 import { AppListItemType } from '@fastgpt/global/core/app/type';
 import { useContextSelector } from 'use-context-selector';
@@ -35,6 +33,7 @@ import dynamic from 'next/dynamic';
 import { useChat } from '@/components/core/chat/ChatContainer/useChat';
 import ChatBox from '@/components/core/chat/ChatContainer/ChatBox';
 import { useSystem } from '@fastgpt/web/hooks/useSystem';
+import { InitChatResponse } from '@/global/core/chat/api';

 const CustomPluginRunBox = dynamic(() => import('./components/CustomPluginRunBox'));

@@ -50,12 +49,11 @@ const Chat = ({
  const router = useRouter();
  const theme = useTheme();
  const { t } = useTranslation();
-
+  const { userInfo } = useUserStore();
+  const { isPc } = useSystem();
  const { setLastChatAppId } = useChatStore();
+
  const {
-    setHistories: setRecordHistories,
-    loadHistories: loadRecordHistories,
-    histories: recordHistories,
    onUpdateHistory,
    onClearHistories,
    onDelHistory,
@@ -65,39 +63,43 @@ const Chat = ({
    onChangeChatId,
    onUpdateHistoryTitle
  } = useContextSelector(ChatContext, (v) => v);
+
+  const params = useCreation(() => {
+    return {
+      chatId,
+      appId,
+      type: GetChatTypeEnum.normal
+    };
+  }, [appId, chatId]);
  const {
    ChatBoxRef,
-    chatRecords,
-    setChatRecords,
    variablesForm,
    pluginRunTab,
    setPluginRunTab,
-    resetChatRecords
+    resetVariables,
+    useChatScrollData
  } = useChat();
-
-  const { userInfo } = useUserStore();
-  const { isPc } = useSystem();
+  const {
+    data: chatRecords,
+    ScrollData,
+    setData: setChatRecords,
+    total: totalRecordsCount
+  } = useChatScrollData(params);

  // get chat app info
  const [chatData, setChatData] = useState<InitChatResponse>(defaultChatData);
  const isPlugin = chatData.app.type === AppTypeEnum.plugin;

-  const { loading } = useRequest2(
+  // Load chat init data
+  const { loading: isLoading } = useRequest2(
    async () => {
      if (!appId || forbidLoadChat.current) return;

      const res = await getInitChatInfo({ appId, chatId });
+
      setChatData(res);
-
-      const history = res.history.map((item) => ({
-        ...item,
-        dataId: item.dataId || getNanoid(),
-        status: ChatStatusEnum.finish
-      }));
-
-      // reset chat records
-      resetChatRecords({
-        records: history,
+      // reset chat variables
+      resetVariables({
        variables: res.variables
      });

@@ -162,6 +164,7 @@ const Chat = ({
    },
    [chatId, appId, onUpdateHistoryTitle, forbidLoadChat, onChangeChatId]
  );
+  const loading = isLoading;

  return (
    <Flex h={'100%'}>
@@ -223,6 +226,7 @@ const Chat = ({
          >
            {/* header */}
            <ChatHeader
+              totalRecordsCount={totalRecordsCount}
              apps={myApps}
              chatData={chatData}
              history={chatRecords}
@@ -247,6 +251,7 @@ const Chat = ({
                />
              ) : (
                <ChatBox
+                  ScrollData={ScrollData}
                  ref={ChatBoxRef}
                  chatHistories={chatRecords}
                  setChatHistories={setChatRecords}
--- a/projects/app/src/pages/chat/share.tsx
+++ b/projects/app/src/pages/chat/share.tsx
@@ -28,7 +28,7 @@ import NextHead from '@/components/common/NextHead';
 import { useContextSelector } from 'use-context-selector';
 import ChatContextProvider, { ChatContext } from '@/web/core/chat/context/chatContext';
 import { InitChatResponse } from '@/global/core/chat/api';
-import { defaultChatData } from '@/global/core/chat/constants';
+import { defaultChatData, GetChatTypeEnum } from '@/global/core/chat/constants';
 import { useMount } from 'ahooks';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
@@ -92,13 +92,27 @@ const OutLink = ({

  const {
    ChatBoxRef,
-    chatRecords,
-    setChatRecords,
    variablesForm,
    pluginRunTab,
    setPluginRunTab,
-    resetChatRecords
+    resetVariables,
+    useChatScrollData
  } = useChat();
+  const params = useMemo(() => {
+    return {
+      chatId,
+      shareId,
+      outLinkUid,
+      appId: chatData.appId,
+      type: GetChatTypeEnum.outLink
+    };
+  }, [chatData.appId, chatId, outLinkUid, shareId]);
+  const {
+    data: chatRecords,
+    ScrollData,
+    setData: setChatRecords,
+    total: totalRecordsCount
+  } = useChatScrollData(params);

  const startChat = useCallback(
    async ({
@@ -179,7 +193,7 @@ const OutLink = ({
    ]
  );

-  const { loading } = useRequest2(
+  const { loading: isLoading } = useRequest2(
    async () => {
      if (!shareId || !outLinkUid || forbidLoadChat.current) return;

@@ -190,14 +204,7 @@ const OutLink = ({
      });
      setChatData(res);

-      const history = res.history.map((item) => ({
-        ...item,
-        dataId: item.dataId || nanoid(),
-        status: ChatStatusEnum.finish
-      }));
-
-      resetChatRecords({
-        records: history,
+      resetVariables({
        variables: res.variables
      });
    },
@@ -229,6 +236,7 @@ const OutLink = ({
  useMount(() => {
    setIdEmbed(window !== top);
  });
+  const loading = isLoading;

  return (
    <>
@@ -303,6 +311,7 @@ const OutLink = ({
              <ChatHeader
                chatData={chatData}
                history={chatRecords}
+                totalRecordsCount={totalRecordsCount}
                showHistory={showHistory === '1'}
              />
            ) : null}
@@ -322,6 +331,7 @@ const OutLink = ({
                />
              ) : (
                <ChatBox
+                  ScrollData={ScrollData}
                  ref={ChatBoxRef}
                  chatHistories={chatRecords}
                  setChatHistories={setChatRecords}
--- a/projects/app/src/pages/chat/team.tsx
+++ b/projects/app/src/pages/chat/team.tsx
@@ -26,7 +26,7 @@ import ChatContextProvider, { ChatContext } from '@/web/core/chat/context/chatCo
 import { AppListItemType } from '@fastgpt/global/core/app/type';
 import { useContextSelector } from 'use-context-selector';
 import { InitChatResponse } from '@/global/core/chat/api';
-import { defaultChatData } from '@/global/core/chat/constants';
+import { defaultChatData, GetChatTypeEnum } from '@/global/core/chat/constants';
 import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
 import { getNanoid } from '@fastgpt/global/common/string/tools';
 import { useChat } from '@/components/core/chat/ChatContainer/useChat';
@@ -58,7 +58,6 @@ const Chat = ({ myApps }: { myApps: AppListItemType[] }) => {

  const {
    onUpdateHistoryTitle,
-    loadHistories,
    onUpdateHistory,
    onClearHistories,
    onDelHistory,
@@ -70,13 +69,27 @@ const Chat = ({ myApps }: { myApps: AppListItemType[] }) => {

  const {
    ChatBoxRef,
-    chatRecords,
-    setChatRecords,
    variablesForm,
    pluginRunTab,
    setPluginRunTab,
-    resetChatRecords
+    resetVariables,
+    useChatScrollData
  } = useChat();
+  const params = useMemo(() => {
+    return {
+      appId,
+      chatId,
+      teamId,
+      teamToken,
+      type: GetChatTypeEnum.team
+    };
+  }, [appId, chatId, teamId, teamToken]);
+  const {
+    data: chatRecords,
+    ScrollData,
+    setData: setChatRecords,
+    total: totalRecordsCount
+  } = useChatScrollData(params);

  const startChat = useCallback(
    async ({
@@ -138,22 +151,15 @@ const Chat = ({ myApps }: { myApps: AppListItemType[] }) => {
  );

  // get chat app info
-  const { loading } = useRequest2(
+  const { loading: isLoading } = useRequest2(
    async () => {
      if (!appId || forbidLoadChat.current) return;

      const res = await getTeamChatInfo({ teamId, appId, chatId, teamToken });
      setChatData(res);

-      const history = res.history.map((item) => ({
-        ...item,
-        dataId: item.dataId || nanoid(),
-        status: ChatStatusEnum.finish
-      }));
-
      // reset chat records
-      resetChatRecords({
-        records: history,
+      resetVariables({
        variables: res.variables
      });
    },
@@ -175,6 +181,8 @@ const Chat = ({ myApps }: { myApps: AppListItemType[] }) => {
    }
  );

+  const loading = isLoading;
+
  return (
    <Flex h={'100%'}>
      <NextHead title={chatData.app.name} icon={chatData.app.avatar}></NextHead>
@@ -235,7 +243,13 @@ const Chat = ({ myApps }: { myApps: AppListItemType[] }) => {
            flexDirection={'column'}
          >
            {/* header */}
-            <ChatHeader apps={myApps} chatData={chatData} history={chatRecords} showHistory />
+            <ChatHeader
+              totalRecordsCount={totalRecordsCount}
+              apps={myApps}
+              chatData={chatData}
+              history={chatRecords}
+              showHistory
+            />
            {/* chat box */}
            <Box flex={1}>
              {chatData.app.type === AppTypeEnum.plugin ? (
@@ -253,6 +267,7 @@ const Chat = ({ myApps }: { myApps: AppListItemType[] }) => {
              ) : (
                <ChatBox
                  ref={ChatBoxRef}
+                  ScrollData={ScrollData}
                  chatHistories={chatRecords}
                  setChatHistories={setChatRecords}
                  variablesForm={variablesForm}
--- a/projects/app/src/pages/dataset/detail/components/CollectionCard/TagManageModal.tsx
+++ b/projects/app/src/pages/dataset/detail/components/CollectionCard/TagManageModal.tsx
@@ -18,7 +18,7 @@ import {
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import MyInput from '@/components/MyInput';
 import { DatasetTagType } from '@fastgpt/global/core/dataset/type';
-import { ScrollListType, useScrollPagination } from '@fastgpt/web/hooks/useScrollPagination';
+import { ScrollListType, useVirtualScrollPagination } from '@fastgpt/web/hooks/useScrollPagination';
 import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
 import PopoverConfirm from '@fastgpt/web/components/common/MyPopover/PopoverConfirm';
 import { DatasetCollectionsListItemType } from '@/global/core/dataset/type';
@@ -127,7 +127,7 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
    isLoading: isRequesting,
    fetchData,
    total: tagsTotal
-  } = useScrollPagination(getDatasetCollectionTags, {
+  } = useVirtualScrollPagination(getDatasetCollectionTags, {
    refreshDeps: [''],
    // debounceWait: 300,

@@ -146,7 +146,7 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
    scrollDataList: collectionsList,
    ScrollList: ScrollListCollections,
    isLoading: collectionsListLoading
-  } = useScrollPagination(getScrollCollectionList, {
+  } = useVirtualScrollPagination(getScrollCollectionList, {
    refreshDeps: [searchText],
    // debounceWait: 300,

--- a/projects/app/src/pages/dataset/detail/components/DataCard.tsx
+++ b/projects/app/src/pages/dataset/detail/components/DataCard.tsx
@@ -15,7 +15,6 @@ import MyIcon from '@fastgpt/web/components/common/Icon';
 import MyInput from '@/components/MyInput';
 import InputDataModal from '../components/InputDataModal';
 import RawSourceBox from '@/components/core/dataset/RawSourceBox';
-import { usePagination } from '@fastgpt/web/hooks/usePagination';
 import { getCollectionSourceData } from '@fastgpt/global/core/dataset/collection/utils';
 import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
 import { DatasetPageContext } from '@/web/core/dataset/context/datasetPageContext';
@@ -27,7 +26,8 @@ import TagsPopOver from './CollectionCard/TagsPopOver';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import MyDivider from '@fastgpt/web/components/common/MyDivider';
 import Markdown from '@/components/Markdown';
-import { DatasetDataListItemType } from '@/global/core/dataset/type';
+import { useMemoizedFn } from 'ahooks';
+import { useScrollPagination } from '@fastgpt/web/hooks/useScrollPagination';

 const DataCard = () => {
  const theme = useTheme();
@@ -43,10 +43,6 @@ const DataCard = () => {
  const { t } = useTranslation();
  const [searchText, setSearchText] = useState('');
  const { toast } = useToast();
-  const { openConfirm, ConfirmModal } = useConfirm({
-    content: t('common:dataset.Confirm to delete the data'),
-    type: 'delete'
-  });

  const scrollParams = useMemo(
    () => ({
@@ -55,19 +51,21 @@ const DataCard = () => {
    }),
    [collectionId, searchText]
  );
+  const EmptyTipDom = useMemo(
+    () => <EmptyTip text={t('common:core.dataset.data.Empty Tip')} />,
+    [t]
+  );
  const {
    data: datasetDataList,
    ScrollData,
    total,
-    isLoading,
-    refresh,
+    refreshList,
    setData: setDatasetDataList
-  } = usePagination<DatasetDataListItemType>({
-    api: getDatasetDataList,
-    pageSize: 10,
-    type: 'scroll',
+  } = useScrollPagination(getDatasetDataList, {
+    pageSize: 15,
    params: scrollParams,
-    refreshDeps: [searchText, collectionId]
+    refreshDeps: [searchText, collectionId],
+    EmptyTip: EmptyTipDom
  });

  const [editDataId, setEditDataId] = useState<string>();
@@ -89,8 +87,32 @@ const DataCard = () => {

  const canWrite = useMemo(() => datasetDetail.permission.hasWritePer, [datasetDetail]);

+  const { openConfirm, ConfirmModal } = useConfirm({
+    content: t('common:dataset.Confirm to delete the data'),
+    type: 'delete'
+  });
+  const onDeleteOneData = useMemoizedFn((dataId: string) => {
+    openConfirm(async () => {
+      try {
+        await delOneDatasetDataById(dataId);
+        setDatasetDataList((prev) => {
+          return prev.filter((data) => data._id !== dataId);
+        });
+        toast({
+          title: t('common:common.Delete Success'),
+          status: 'success'
+        });
+      } catch (error) {
+        toast({
+          title: getErrText(error),
+          status: 'error'
+        });
+      }
+    })();
+  });
+
  return (
-    <MyBox position={'relative'} py={[1, 0]} h={'100%'}>
+    <MyBox py={[1, 0]} h={'100%'}>
      <Flex flexDirection={'column'} h={'100%'}>
        {/* Header */}
        <Flex alignItems={'center'} px={6}>
@@ -163,7 +185,7 @@ const DataCard = () => {
          />
        </Flex>
        {/* data */}
-        <ScrollData flex={'1 0 0'} px={5} pb={5}>
+        <ScrollData px={5} pb={5}>
          <Flex flexDir={'column'} gap={2}>
            {datasetDataList.map((item, index) => (
              <Card
@@ -185,7 +207,6 @@ const DataCard = () => {
                }}
                onClick={(e) => {
                  e.stopPropagation();
-                  if (!collection) return;
                  setEditDataId(item._id);
                }}
              >
@@ -277,23 +298,7 @@ const DataCard = () => {
                      size={'xsSquare'}
                      onClick={(e) => {
                        e.stopPropagation();
-                        openConfirm(async () => {
-                          try {
-                            await delOneDatasetDataById(item._id);
-                            setDatasetDataList((prev) => {
-                              return prev.filter((data) => data._id !== item._id);
-                            });
-                            toast({
-                              title: t('common:common.Delete Success'),
-                              status: 'success'
-                            });
-                          } catch (error) {
-                            toast({
-                              title: getErrText(error),
-                              status: 'error'
-                            });
-                          }
-                        })();
+                        onDeleteOneData(item._id);
                      }}
                      aria-label={''}
                    />
@@ -303,9 +308,6 @@ const DataCard = () => {
            ))}
          </Flex>
        </ScrollData>
-        {total === 0 && !isLoading && (
-          <EmptyTip text={t('common:core.dataset.data.Empty Tip')}></EmptyTip>
-        )}
      </Flex>

      {editDataId !== undefined && collection && (
@@ -315,7 +317,7 @@ const DataCard = () => {
          onClose={() => setEditDataId(undefined)}
          onSuccess={(data) => {
            if (editDataId === '') {
-              refresh();
+              refreshList();
              return;
            }
            setDatasetDataList((prev) => {