External dataset (#1485)

* fix: revert version

* feat: external collection

* import context

* external ui

* doc

* fix: ts

* clear invalid data

* feat: rename sub name

* fix: node if else edge remove

* fix: init

* api size

* fix: if else node refresh

projects/app/src/pages/dataset/detail/components/CollectionCard/Context.tsx

@@ -0,0 +1,158 @@
+import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
+import { Dispatch, ReactNode, SetStateAction, useEffect, useState } from 'react';
+import { useTranslation } from 'next-i18next';
+import { createContext, useContextSelector } from 'use-context-selector';
+import { DatasetStatusEnum, DatasetTypeEnum } from '@fastgpt/global/core/dataset/constants';
+import { useRequest } from '@fastgpt/web/hooks/useRequest';
+import { DatasetSchemaType } from '@fastgpt/global/core/dataset/type';
+import { useDisclosure } from '@chakra-ui/react';
+import { checkTeamWebSyncLimit } from '@/web/support/user/team/api';
+import { postCreateTrainingUsage } from '@/web/support/wallet/usage/api';
+import { getDatasetCollections, postWebsiteSync } from '@/web/core/dataset/api';
+import dynamic from 'next/dynamic';
+import { usePagination } from '@fastgpt/web/hooks/usePagination';
+import { DatasetCollectionsListItemType } from '@/global/core/dataset/type';
+import { useRouter } from 'next/router';
+import { DatasetPageContext } from '@/web/core/dataset/context/datasetPageContext';
+
+const WebSiteConfigModal = dynamic(() => import('./WebsiteConfig'));
+
+type CollectionPageContextType = {
+  openWebSyncConfirm: () => void;
+  onOpenWebsiteModal: () => void;
+  collections: DatasetCollectionsListItemType[];
+  Pagination: () => JSX.Element;
+  total: number;
+  getData: (e: number) => void;
+  isGetting: boolean;
+  pageNum: number;
+  pageSize: number;
+  searchText: string;
+  setSearchText: Dispatch<SetStateAction<string>>;
+};
+
+export const CollectionPageContext = createContext<CollectionPageContextType>({
+  openWebSyncConfirm: function (): () => void {
+    throw new Error('Function not implemented.');
+  },
+  onOpenWebsiteModal: function (): void {
+    throw new Error('Function not implemented.');
+  },
+  collections: [],
+  Pagination: function (): JSX.Element {
+    throw new Error('Function not implemented.');
+  },
+  total: 0,
+  getData: function (e: number): void {
+    throw new Error('Function not implemented.');
+  },
+  isGetting: false,
+  pageNum: 0,
+  pageSize: 0,
+  searchText: '',
+  setSearchText: function (value: SetStateAction<string>): void {
+    throw new Error('Function not implemented.');
+  }
+});
+
+const CollectionPageContextProvider = ({ children }: { children: ReactNode }) => {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const { parentId = '' } = router.query as { parentId: string };
+
+  const { datasetDetail, datasetId, updateDataset } = useContextSelector(
+    DatasetPageContext,
+    (v) => v
+  );
+
+  // website config
+  const { openConfirm: openWebSyncConfirm, ConfirmModal: ConfirmWebSyncModal } = useConfirm({
+    content: t('core.dataset.collection.Start Sync Tip')
+  });
+  const {
+    isOpen: isOpenWebsiteModal,
+    onOpen: onOpenWebsiteModal,
+    onClose: onCloseWebsiteModal
+  } = useDisclosure();
+  const { mutate: onUpdateDatasetWebsiteConfig } = useRequest({
+    mutationFn: async (websiteConfig: DatasetSchemaType['websiteConfig']) => {
+      onCloseWebsiteModal();
+      await checkTeamWebSyncLimit();
+      const billId = await postCreateTrainingUsage({
+        name: t('core.dataset.training.Website Sync'),
+        datasetId: datasetId
+      });
+      await postWebsiteSync({ datasetId: datasetId, billId });
+
+      await updateDataset({
+        id: datasetId,
+        websiteConfig,
+        status: DatasetStatusEnum.syncing
+      });
+
+      return;
+    },
+    errorToast: t('common.Update Failed')
+  });
+
+  // collection list
+  const [searchText, setSearchText] = useState('');
+  const {
+    data: collections,
+    Pagination,
+    total,
+    getData,
+    isLoading: isGetting,
+    pageNum,
+    pageSize
+  } = usePagination<DatasetCollectionsListItemType>({
+    api: getDatasetCollections,
+    pageSize: 20,
+    params: {
+      datasetId,
+      parentId,
+      searchText
+    },
+    defaultRequest: false
+  });
+  useEffect(() => {
+    getData(1);
+  }, [parentId]);
+
+  const contextValue: CollectionPageContextType = {
+    openWebSyncConfirm: openWebSyncConfirm(onUpdateDatasetWebsiteConfig),
+    onOpenWebsiteModal,
+
+    searchText,
+    setSearchText,
+    collections,
+    Pagination,
+    total,
+    getData,
+    isGetting,
+    pageNum,
+    pageSize
+  };
+
+  return (
+    <CollectionPageContext.Provider value={contextValue}>
+      {children}
+      {datasetDetail.type === DatasetTypeEnum.websiteDataset && (
+        <>
+          {isOpenWebsiteModal && (
+            <WebSiteConfigModal
+              onClose={onCloseWebsiteModal}
+              onSuccess={onUpdateDatasetWebsiteConfig}
+              defaultValue={{
+                url: datasetDetail?.websiteConfig?.url,
+                selector: datasetDetail?.websiteConfig?.selector
+              }}
+            />
+          )}
+          <ConfirmWebSyncModal />
+        </>
+      )}
+    </CollectionPageContext.Provider>
+  );
+};
+export default CollectionPageContextProvider;

projects/app/src/pages/dataset/detail/components/CollectionCard/EmptyCollectionTip.tsx

@@ -0,0 +1,55 @@
+import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
+import React from 'react';
+import { useTranslation } from 'next-i18next';
+import { DatasetStatusEnum, DatasetTypeEnum } from '@fastgpt/global/core/dataset/constants';
+import { Box, Flex } from '@chakra-ui/react';
+import { useContextSelector } from 'use-context-selector';
+import { CollectionPageContext } from './Context';
+import { DatasetPageContext } from '@/web/core/dataset/context/datasetPageContext';
+
+const EmptyCollectionTip = () => {
+  const { t } = useTranslation();
+  const onOpenWebsiteModal = useContextSelector(CollectionPageContext, (v) => v.onOpenWebsiteModal);
+  const datasetDetail = useContextSelector(DatasetPageContext, (v) => v.datasetDetail);
+
+  return (
+    <>
+      {(datasetDetail.type === DatasetTypeEnum.dataset ||
+        datasetDetail.type === DatasetTypeEnum.externalFile) && (
+        <EmptyTip text={t('core.dataset.collection.Empty Tip')} />
+      )}
+      {datasetDetail.type === DatasetTypeEnum.websiteDataset && (
+        <EmptyTip
+          text={
+            <Flex>
+              {datasetDetail.status === DatasetStatusEnum.syncing && (
+                <>{t('core.dataset.status.syncing')}</>
+              )}
+              {datasetDetail.status === DatasetStatusEnum.active && (
+                <>
+                  {!datasetDetail?.websiteConfig?.url ? (
+                    <>
+                      {t('core.dataset.collection.Website Empty Tip')}
+                      {', '}
+                      <Box
+                        textDecoration={'underline'}
+                        cursor={'pointer'}
+                        onClick={onOpenWebsiteModal}
+                      >
+                        {t('core.dataset.collection.Click top config website')}
+                      </Box>
+                    </>
+                  ) : (
+                    <>{t('core.dataset.website.UnValid Website Tip')}</>
+                  )}
+                </>
+              )}
+            </Flex>
+          }
+        />
+      )}
+    </>
+  );
+};
+
+export default EmptyCollectionTip;

projects/app/src/pages/dataset/detail/components/CollectionCard/Header.tsx

@@ -0,0 +1,399 @@
+import React, { useCallback, useRef } from 'react';
+import { Box, Flex, MenuButton, Button, Link, useTheme, useDisclosure } from '@chakra-ui/react';
+import {
+  getDatasetCollectionPathById,
+  postDatasetCollection,
+  putDatasetCollectionById
+} from '@/web/core/dataset/api';
+import { useQuery } from '@tanstack/react-query';
+import { debounce } from 'lodash';
+import { useTranslation } from 'next-i18next';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import MyInput from '@/components/MyInput';
+import { useRequest } from '@fastgpt/web/hooks/useRequest';
+import { useRouter } from 'next/router';
+import { useSystemStore } from '@/web/common/system/useSystemStore';
+import MyMenu from '@fastgpt/web/components/common/MyMenu';
+import { useEditTitle } from '@/web/common/hooks/useEditTitle';
+import {
+  DatasetCollectionTypeEnum,
+  TrainingModeEnum,
+  DatasetTypeEnum,
+  DatasetTypeMap,
+  DatasetStatusEnum
+} from '@fastgpt/global/core/dataset/constants';
+import EditFolderModal, { useEditFolder } from '../../../component/EditFolderModal';
+import { TabEnum } from '../../index';
+import ParentPath from '@/components/common/ParentPaths';
+import dynamic from 'next/dynamic';
+import { useUserStore } from '@/web/support/user/useUserStore';
+import { TeamMemberRoleEnum } from '@fastgpt/global/support/user/team/constant';
+
+import { ImportDataSourceEnum } from '@fastgpt/global/core/dataset/constants';
+import { useContextSelector } from 'use-context-selector';
+import { CollectionPageContext } from './Context';
+import { DatasetPageContext } from '@/web/core/dataset/context/datasetPageContext';
+
+const FileSourceSelector = dynamic(() => import('../Import/components/FileSourceSelector'));
+
+const Header = ({}: {}) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const { setLoading } = useSystemStore();
+  const { userInfo } = useUserStore();
+  const datasetDetail = useContextSelector(DatasetPageContext, (v) => v.datasetDetail);
+
+  const router = useRouter();
+  const { parentId = '' } = router.query as { parentId: string; datasetId: string };
+  const { isPc } = useSystemStore();
+
+  const lastSearch = useRef('');
+  const { searchText, setSearchText, total, getData, pageNum, onOpenWebsiteModal } =
+    useContextSelector(CollectionPageContext, (v) => v);
+
+  // change search
+  const debounceRefetch = useCallback(
+    debounce(() => {
+      getData(1);
+      lastSearch.current = searchText;
+    }, 300),
+    []
+  );
+
+  const { data: paths = [] } = useQuery(['getDatasetCollectionPathById', parentId], () =>
+    getDatasetCollectionPathById(parentId)
+  );
+
+  const { editFolderData, setEditFolderData } = useEditFolder();
+  const { onOpenModal: onOpenCreateVirtualFileModal, EditModal: EditCreateVirtualFileModal } =
+    useEditTitle({
+      title: t('dataset.Create manual collection'),
+      tip: t('dataset.Manual collection Tip'),
+      canEmpty: false
+    });
+  const {
+    isOpen: isOpenFileSourceSelector,
+    onOpen: onOpenFileSourceSelector,
+    onClose: onCloseFileSourceSelector
+  } = useDisclosure();
+  const { mutate: onCreateCollection } = useRequest({
+    mutationFn: async ({
+      name,
+      type,
+      callback,
+      ...props
+    }: {
+      name: string;
+      type: `${DatasetCollectionTypeEnum}`;
+      callback?: (id: string) => void;
+      trainingType?: TrainingModeEnum;
+      rawLink?: string;
+      chunkSize?: number;
+    }) => {
+      setLoading(true);
+      const id = await postDatasetCollection({
+        parentId,
+        datasetId: datasetDetail._id,
+        name,
+        type,
+        ...props
+      });
+      callback?.(id);
+      return id;
+    },
+    onSuccess() {
+      getData(pageNum);
+    },
+    onSettled() {
+      setLoading(false);
+    },
+
+    successToast: t('common.Create Success'),
+    errorToast: t('common.Create Failed')
+  });
+
+  return (
+    <Flex px={[2, 6]} alignItems={'flex-start'} h={'35px'}>
+      <Box flex={1}>
+        <ParentPath
+          paths={paths.map((path, i) => ({
+            parentId: path.parentId,
+            parentName: i === paths.length - 1 ? `${path.parentName}` : path.parentName
+          }))}
+          FirstPathDom={
+            <>
+              <Box fontWeight={'bold'} fontSize={['sm', 'lg']}>
+                {t(DatasetTypeMap[datasetDetail?.type]?.collectionLabel)}({total})
+              </Box>
+              {datasetDetail?.websiteConfig?.url && (
+                <Flex fontSize={'sm'}>
+                  {t('core.dataset.website.Base Url')}:
+                  <Link
+                    href={datasetDetail.websiteConfig.url}
+                    target="_blank"
+                    mr={2}
+                    textDecoration={'underline'}
+                    color={'primary.600'}
+                  >
+                    {datasetDetail.websiteConfig.url}
+                  </Link>
+                </Flex>
+              )}
+            </>
+          }
+          onClick={(e) => {
+            router.replace({
+              query: {
+                ...router.query,
+                parentId: e
+              }
+            });
+          }}
+        />
+      </Box>
+
+      {/* search input */}
+      {isPc && (
+        <Flex alignItems={'center'} mr={4}>
+          <MyInput
+            bg={'myGray.50'}
+            w={['100%', '250px']}
+            size={'sm'}
+            h={'36px'}
+            placeholder={t('common.Search') || ''}
+            value={searchText}
+            leftIcon={
+              <MyIcon
+                name="common/searchLight"
+                position={'absolute'}
+                w={'16px'}
+                color={'myGray.500'}
+              />
+            }
+            onChange={(e) => {
+              setSearchText(e.target.value);
+              debounceRefetch();
+            }}
+            onBlur={() => {
+              if (searchText === lastSearch.current) return;
+              getData(1);
+            }}
+            onKeyDown={(e) => {
+              if (searchText === lastSearch.current) return;
+              if (e.key === 'Enter') {
+                getData(1);
+              }
+            }}
+          />
+        </Flex>
+      )}
+
+      {/* diff collection button */}
+      {userInfo?.team?.role !== TeamMemberRoleEnum.visitor && (
+        <>
+          {datasetDetail?.type === DatasetTypeEnum.dataset && (
+            <MyMenu
+              offset={[0, 5]}
+              Button={
+                <MenuButton
+                  _hover={{
+                    color: 'primary.500'
+                  }}
+                  fontSize={['sm', 'md']}
+                >
+                  <Flex
+                    alignItems={'center'}
+                    px={5}
+                    py={2}
+                    borderRadius={'md'}
+                    cursor={'pointer'}
+                    bg={'primary.500'}
+                    overflow={'hidden'}
+                    color={'white'}
+                    h={['28px', '35px']}
+                  >
+                    <MyIcon name={'common/importLight'} mr={2} w={'14px'} />
+                    <Box>{t('dataset.collections.Create And Import')}</Box>
+                  </Flex>
+                </MenuButton>
+              }
+              menuList={[
+                {
+                  label: (
+                    <Flex>
+                      <MyIcon name={'common/folderFill'} w={'20px'} mr={2} />
+                      {t('Folder')}
+                    </Flex>
+                  ),
+                  onClick: () => setEditFolderData({})
+                },
+                {
+                  label: (
+                    <Flex>
+                      <MyIcon name={'core/dataset/manualCollection'} mr={2} w={'20px'} />
+                      {t('core.dataset.Manual collection')}
+                    </Flex>
+                  ),
+                  onClick: () => {
+                    onOpenCreateVirtualFileModal({
+                      defaultVal: '',
+                      onSuccess: (name) => {
+                        onCreateCollection({ name, type: DatasetCollectionTypeEnum.virtual });
+                      }
+                    });
+                  }
+                },
+                {
+                  label: (
+                    <Flex>
+                      <MyIcon name={'core/dataset/fileCollection'} mr={2} w={'20px'} />
+                      {t('core.dataset.Text collection')}
+                    </Flex>
+                  ),
+                  onClick: onOpenFileSourceSelector
+                },
+                {
+                  label: (
+                    <Flex>
+                      <MyIcon name={'core/dataset/tableCollection'} mr={2} w={'20px'} />
+                      {t('core.dataset.Table collection')}
+                    </Flex>
+                  ),
+                  onClick: () =>
+                    router.replace({
+                      query: {
+                        ...router.query,
+                        currentTab: TabEnum.import,
+                        source: ImportDataSourceEnum.csvTable
+                      }
+                    })
+                }
+              ]}
+            />
+          )}
+          {datasetDetail?.type === DatasetTypeEnum.websiteDataset && (
+            <>
+              {datasetDetail?.websiteConfig?.url ? (
+                <Flex alignItems={'center'}>
+                  {datasetDetail.status === DatasetStatusEnum.active && (
+                    <Button onClick={onOpenWebsiteModal}>{t('common.Config')}</Button>
+                  )}
+                  {datasetDetail.status === DatasetStatusEnum.syncing && (
+                    <Flex
+                      ml={3}
+                      alignItems={'center'}
+                      px={3}
+                      py={1}
+                      borderRadius="md"
+                      border={theme.borders.base}
+                    >
+                      <Box
+                        animation={'zoomStopIcon 0.5s infinite alternate'}
+                        bg={'myGray.700'}
+                        w="8px"
+                        h="8px"
+                        borderRadius={'50%'}
+                        mt={'1px'}
+                      ></Box>
+                      <Box ml={2} color={'myGray.600'}>
+                        {t('core.dataset.status.syncing')}
+                      </Box>
+                    </Flex>
+                  )}
+                </Flex>
+              ) : (
+                <Button onClick={onOpenWebsiteModal}>{t('core.dataset.Set Website Config')}</Button>
+              )}
+            </>
+          )}
+          {datasetDetail?.type === DatasetTypeEnum.externalFile && (
+            <MyMenu
+              offset={[0, 5]}
+              Button={
+                <MenuButton
+                  _hover={{
+                    color: 'primary.500'
+                  }}
+                  fontSize={['sm', 'md']}
+                >
+                  <Flex
+                    alignItems={'center'}
+                    px={5}
+                    py={2}
+                    borderRadius={'md'}
+                    cursor={'pointer'}
+                    bg={'primary.500'}
+                    overflow={'hidden'}
+                    color={'white'}
+                    h={['28px', '35px']}
+                  >
+                    <MyIcon name={'common/importLight'} mr={2} w={'14px'} />
+                    <Box>{t('dataset.collections.Create And Import')}</Box>
+                  </Flex>
+                </MenuButton>
+              }
+              menuList={[
+                {
+                  label: (
+                    <Flex>
+                      <MyIcon name={'common/folderFill'} w={'20px'} mr={2} />
+                      {t('Folder')}
+                    </Flex>
+                  ),
+                  onClick: () => setEditFolderData({})
+                },
+                {
+                  label: (
+                    <Flex>
+                      <MyIcon name={'core/dataset/fileCollection'} mr={2} w={'20px'} />
+                      {t('core.dataset.Text collection')}
+                    </Flex>
+                  ),
+                  onClick: () =>
+                    router.replace({
+                      query: {
+                        ...router.query,
+                        currentTab: TabEnum.import,
+                        source: ImportDataSourceEnum.externalFile
+                      }
+                    })
+                }
+              ]}
+            />
+          )}
+        </>
+      )}
+
+      {/* modal */}
+      {!!editFolderData && (
+        <EditFolderModal
+          onClose={() => setEditFolderData(undefined)}
+          editCallback={async (name) => {
+            try {
+              if (editFolderData.id) {
+                await putDatasetCollectionById({
+                  id: editFolderData.id,
+                  name
+                });
+                getData(pageNum);
+              } else {
+                onCreateCollection({
+                  name,
+                  type: DatasetCollectionTypeEnum.folder
+                });
+              }
+            } catch (error) {
+              return Promise.reject(error);
+            }
+          }}
+          isEdit={!!editFolderData.id}
+          name={editFolderData.name}
+        />
+      )}
+      <EditCreateVirtualFileModal iconSrc={'modal/manualDataset'} closeBtnText={''} />
+      {isOpenFileSourceSelector && <FileSourceSelector onClose={onCloseFileSourceSelector} />}
+    </Flex>
+  );
+};
+
+export default Header;

projects/app/src/pages/dataset/detail/components/CollectionCard/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useRef, useMemo, useEffect } from 'react';
+import React, { useState, useRef, useMemo } from 'react';
 import {
   Box,
   Flex,
@@ -9,47 +9,29 @@ import {
   Th,
   Td,
   Tbody,
-  Image,
-  MenuButton,
-  useDisclosure,
-  Button,
-  Link,
-  useTheme
+  MenuButton
 } from '@chakra-ui/react';
 import {
-  getDatasetCollections,
   delDatasetCollectionById,
   putDatasetCollectionById,
-  postDatasetCollection,
-  getDatasetCollectionPathById,
   postLinkCollectionSync
 } from '@/web/core/dataset/api';
 import { useQuery } from '@tanstack/react-query';
-import { debounce } from 'lodash';
 import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
 import { useTranslation } from 'next-i18next';
 import MyIcon from '@fastgpt/web/components/common/Icon';
-import MyInput from '@/components/MyInput';
 import dayjs from 'dayjs';
 import { useRequest } from '@fastgpt/web/hooks/useRequest';
 import { useRouter } from 'next/router';
-import { useSystemStore } from '@/web/common/system/useSystemStore';
 import MyMenu from '@fastgpt/web/components/common/MyMenu';
 import { useEditTitle } from '@/web/common/hooks/useEditTitle';
-import type { DatasetCollectionsListItemType } from '@/global/core/dataset/type.d';
-import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
 import {
   DatasetCollectionTypeEnum,
-  TrainingModeEnum,
-  DatasetTypeEnum,
-  DatasetTypeMap,
   DatasetStatusEnum,
   DatasetCollectionSyncResultMap
 } from '@fastgpt/global/core/dataset/constants';
 import { getCollectionIcon } from '@fastgpt/global/core/dataset/utils';
-import EditFolderModal, { useEditFolder } from '../../component/EditFolderModal';
-import { TabEnum } from '..';
-import ParentPath from '@/components/common/ParentPaths';
+import { TabEnum } from '../../index';
 import dynamic from 'next/dynamic';
 import { useDrag } from '@/web/common/hooks/useDrag';
 import SelectCollections from '@/web/core/dataset/components/SelectCollections';
@@ -58,27 +40,22 @@ import MyTooltip from '@/components/MyTooltip';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { TeamMemberRoleEnum } from '@fastgpt/global/support/user/team/constant';
 import { useDatasetStore } from '@/web/core/dataset/store/dataset';
-import { DatasetSchemaType } from '@fastgpt/global/core/dataset/type';
 import { DatasetCollectionSyncResultEnum } from '@fastgpt/global/core/dataset/constants';
 import MyBox from '@fastgpt/web/components/common/MyBox';
-import { usePagination } from '@fastgpt/web/hooks/usePagination';
-import { ImportDataSourceEnum } from '@fastgpt/global/core/dataset/constants';
+import { useContextSelector } from 'use-context-selector';
+import { CollectionPageContext } from './Context';
+import { DatasetPageContext } from '@/web/core/dataset/context/datasetPageContext';
 
-const WebSiteConfigModal = dynamic(() => import('./Import/WebsiteConfig'), {});
-const FileSourceSelector = dynamic(() => import('./Import/components/FileSourceSelector'), {});
+const Header = dynamic(() => import('./Header'));
+const EmptyCollectionTip = dynamic(() => import('./EmptyCollectionTip'));
 
 const CollectionCard = () => {
   const BoxRef = useRef<HTMLDivElement>(null);
-  const lastSearch = useRef('');
   const router = useRouter();
-  const theme = useTheme();
   const { toast } = useToast();
-  const { parentId = '', datasetId } = router.query as { parentId: string; datasetId: string };
   const { t } = useTranslation();
-  const { isPc } = useSystemStore();
   const { userInfo } = useUserStore();
-  const [searchText, setSearchText] = useState('');
-  const { datasetDetail, updateDataset, startWebsiteSync, loadDatasetDetail } = useDatasetStore();
+  const { datasetDetail, loadDatasetDetail } = useContextSelector(DatasetPageContext, (v) => v);
 
   const { openConfirm: openDeleteConfirm, ConfirmModal: ConfirmDeleteModal } = useConfirm({
     content: t('dataset.Confirm to delete the file'),
@@ -88,66 +65,18 @@ const CollectionCard = () => {
     content: t('core.dataset.collection.Start Sync Tip')
   });
 
-  const {
-    isOpen: isOpenFileSourceSelector,
-    onOpen: onOpenFileSourceSelector,
-    onClose: onCloseFileSourceSelector
-  } = useDisclosure();
-  const {
-    isOpen: isOpenWebsiteModal,
-    onOpen: onOpenWebsiteModal,
-    onClose: onCloseWebsiteModal
-  } = useDisclosure();
-  const { onOpenModal: onOpenCreateVirtualFileModal, EditModal: EditCreateVirtualFileModal } =
-    useEditTitle({
-      title: t('dataset.Create manual collection'),
-      tip: t('dataset.Manual collection Tip'),
-      canEmpty: false
-    });
-
   const { onOpenModal: onOpenEditTitleModal, EditModal: EditTitleModal } = useEditTitle({
     title: t('Rename')
   });
 
-  const { editFolderData, setEditFolderData } = useEditFolder();
   const [moveCollectionData, setMoveCollectionData] = useState<{ collectionId: string }>();
 
-  const {
-    data: collections,
-    Pagination,
-    total,
-    getData,
-    isLoading: isGetting,
-    pageNum,
-    pageSize
-  } = usePagination<DatasetCollectionsListItemType>({
-    api: getDatasetCollections,
-    pageSize: 20,
-    params: {
-      datasetId,
-      parentId,
-      searchText
-    },
-    defaultRequest: false,
-    onChange() {
-      if (BoxRef.current) {
-        BoxRef.current.scrollTop = 0;
-      }
-    }
-  });
+  const { collections, Pagination, total, getData, isGetting, pageNum, pageSize } =
+    useContextSelector(CollectionPageContext, (v) => v);
 
   const { dragStartId, setDragStartId, dragTargetId, setDragTargetId } = useDrag();
 
-  // change search
-  const debounceRefetch = useCallback(
-    debounce(() => {
-      getData(1);
-      lastSearch.current = searchText;
-    }, 300),
-    []
-  );
-
-  // add file icon
+  // Ad file status icon
   const formatCollections = useMemo(
     () =>
       collections.map((collection) => {
@@ -180,37 +109,6 @@ const CollectionCard = () => {
     [collections, t]
   );
 
-  const { mutate: onCreateCollection, isLoading: isCreating } = useRequest({
-    mutationFn: async ({
-      name,
-      type,
-      callback,
-      ...props
-    }: {
-      name: string;
-      type: `${DatasetCollectionTypeEnum}`;
-      callback?: (id: string) => void;
-      trainingType?: `${TrainingModeEnum}`;
-      rawLink?: string;
-      chunkSize?: number;
-    }) => {
-      const id = await postDatasetCollection({
-        parentId,
-        datasetId,
-        name,
-        type,
-        ...props
-      });
-      callback?.(id);
-      return id;
-    },
-    onSuccess() {
-      getData(pageNum);
-    },
-
-    successToast: t('common.Create Success'),
-    errorToast: t('common.Create Failed')
-  });
   const { mutate: onUpdateCollectionName } = useRequest({
     mutationFn: ({ collectionId, name }: { collectionId: string; name: string }) => {
       return putDatasetCollectionById({
@@ -237,17 +135,7 @@ const CollectionCard = () => {
     successToast: t('common.Delete Success'),
     errorToast: t('common.Delete Failed')
   });
-  const { mutate: onUpdateDatasetWebsiteConfig, isLoading: isUpdating } = useRequest({
-    mutationFn: async (websiteConfig: DatasetSchemaType['websiteConfig']) => {
-      onCloseWebsiteModal();
-      await updateDataset({
-        id: datasetDetail._id,
-        websiteConfig
-      });
-      return startWebsiteSync();
-    },
-    errorToast: t('common.Update Failed')
-  });
+
   const { mutate: onclickStartSync, isLoading: isSyncing } = useRequest({
     mutationFn: (collectionId: string) => {
       return postLinkCollectionSync(collectionId);
@@ -262,22 +150,13 @@ const CollectionCard = () => {
     errorToast: t('core.dataset.error.Start Sync Failed')
   });
 
-  const { data: paths = [] } = useQuery(['getDatasetCollectionPathById', parentId], () =>
-    getDatasetCollectionPathById(parentId)
-  );
-
   const hasTrainingData = useMemo(
     () => !!formatCollections.find((item) => item.trainingAmount > 0),
     [formatCollections]
   );
   const isLoading = useMemo(
-    () =>
-      isCreating ||
-      isDeleting ||
-      isUpdating ||
-      isSyncing ||
-      (isGetting && collections.length === 0),
-    [collections.length, isCreating, isDeleting, isGetting, isSyncing, isUpdating]
+    () => isDeleting || isSyncing || (isGetting && collections.length === 0),
+    [collections.length, isDeleting, isGetting, isSyncing]
   );
 
   useQuery(
@@ -285,7 +164,7 @@ const CollectionCard = () => {
     () => {
       getData(1);
       if (datasetDetail.status === DatasetStatusEnum.syncing) {
-        loadDatasetDetail(datasetId, true);
+        loadDatasetDetail(datasetDetail._id);
       }
       return null;
     },
@@ -295,207 +174,11 @@ const CollectionCard = () => {
     }
   );
 
-  useEffect(() => {
-    getData(1);
-  }, [parentId]);
-
   return (
     <MyBox isLoading={isLoading} h={'100%'} py={[2, 4]}>
       <Flex ref={BoxRef} flexDirection={'column'} py={[1, 3]} h={'100%'}>
         {/* header */}
-        <Flex px={[2, 6]} alignItems={'flex-start'} h={'35px'}>
-          <Box flex={1}>
-            <ParentPath
-              paths={paths.map((path, i) => ({
-                parentId: path.parentId,
-                parentName: i === paths.length - 1 ? `${path.parentName}` : path.parentName
-              }))}
-              FirstPathDom={
-                <>
-                  <Box fontWeight={'bold'} fontSize={['sm', 'lg']}>
-                    {t(DatasetTypeMap[datasetDetail?.type]?.collectionLabel)}({total})
-                  </Box>
-                  {datasetDetail?.websiteConfig?.url && (
-                    <Flex fontSize={'sm'}>
-                      {t('core.dataset.website.Base Url')}:
-                      <Link
-                        href={datasetDetail.websiteConfig.url}
-                        target="_blank"
-                        mr={2}
-                        textDecoration={'underline'}
-                        color={'primary.600'}
-                      >
-                        {datasetDetail.websiteConfig.url}
-                      </Link>
-                    </Flex>
-                  )}
-                </>
-              }
-              onClick={(e) => {
-                router.replace({
-                  query: {
-                    ...router.query,
-                    parentId: e
-                  }
-                });
-              }}
-            />
-          </Box>
-
-          {isPc && (
-            <Flex alignItems={'center'} mr={4}>
-              <MyInput
-                bg={'myGray.50'}
-                w={['100%', '250px']}
-                size={'sm'}
-                h={'36px'}
-                placeholder={t('common.Search') || ''}
-                value={searchText}
-                leftIcon={
-                  <MyIcon
-                    name="common/searchLight"
-                    position={'absolute'}
-                    w={'16px'}
-                    color={'myGray.500'}
-                  />
-                }
-                onChange={(e) => {
-                  setSearchText(e.target.value);
-                  debounceRefetch();
-                }}
-                onBlur={() => {
-                  if (searchText === lastSearch.current) return;
-                  getData(1);
-                }}
-                onKeyDown={(e) => {
-                  if (searchText === lastSearch.current) return;
-                  if (e.key === 'Enter') {
-                    getData(1);
-                  }
-                }}
-              />
-            </Flex>
-          )}
-          {datasetDetail?.type === DatasetTypeEnum.dataset && (
-            <>
-              {userInfo?.team?.role !== TeamMemberRoleEnum.visitor && (
-                <MyMenu
-                  offset={[0, 5]}
-                  Button={
-                    <MenuButton
-                      _hover={{
-                        color: 'primary.500'
-                      }}
-                      fontSize={['sm', 'md']}
-                    >
-                      <Flex
-                        alignItems={'center'}
-                        px={5}
-                        py={2}
-                        borderRadius={'md'}
-                        cursor={'pointer'}
-                        bg={'primary.500'}
-                        overflow={'hidden'}
-                        color={'white'}
-                        h={['28px', '35px']}
-                      >
-                        <MyIcon name={'common/importLight'} mr={2} w={'14px'} />
-                        <Box>{t('dataset.collections.Create And Import')}</Box>
-                      </Flex>
-                    </MenuButton>
-                  }
-                  menuList={[
-                    {
-                      label: (
-                        <Flex>
-                          <MyIcon name={'common/folderFill'} w={'20px'} mr={2} />
-                          {t('Folder')}
-                        </Flex>
-                      ),
-                      onClick: () => setEditFolderData({})
-                    },
-                    {
-                      label: (
-                        <Flex>
-                          <MyIcon name={'core/dataset/manualCollection'} mr={2} w={'20px'} />
-                          {t('core.dataset.Manual collection')}
-                        </Flex>
-                      ),
-                      onClick: () => {
-                        onOpenCreateVirtualFileModal({
-                          defaultVal: '',
-                          onSuccess: (name) => {
-                            onCreateCollection({ name, type: DatasetCollectionTypeEnum.virtual });
-                          }
-                        });
-                      }
-                    },
-                    {
-                      label: (
-                        <Flex>
-                          <MyIcon name={'core/dataset/fileCollection'} mr={2} w={'20px'} />
-                          {t('core.dataset.Text collection')}
-                        </Flex>
-                      ),
-                      onClick: onOpenFileSourceSelector
-                    },
-                    {
-                      label: (
-                        <Flex>
-                          <MyIcon name={'core/dataset/tableCollection'} mr={2} w={'20px'} />
-                          {t('core.dataset.Table collection')}
-                        </Flex>
-                      ),
-                      onClick: () =>
-                        router.replace({
-                          query: {
-                            ...router.query,
-                            currentTab: TabEnum.import,
-                            source: ImportDataSourceEnum.csvTable
-                          }
-                        })
-                    }
-                  ]}
-                />
-              )}
-            </>
-          )}
-          {datasetDetail?.type === DatasetTypeEnum.websiteDataset && (
-            <>
-              {datasetDetail?.websiteConfig?.url ? (
-                <Flex alignItems={'center'}>
-                  {datasetDetail.status === DatasetStatusEnum.active && (
-                    <Button onClick={onOpenWebsiteModal}>{t('common.Config')}</Button>
-                  )}
-                  {datasetDetail.status === DatasetStatusEnum.syncing && (
-                    <Flex
-                      ml={3}
-                      alignItems={'center'}
-                      px={3}
-                      py={1}
-                      borderRadius="md"
-                      border={theme.borders.base}
-                    >
-                      <Box
-                        animation={'zoomStopIcon 0.5s infinite alternate'}
-                        bg={'myGray.700'}
-                        w="8px"
-                        h="8px"
-                        borderRadius={'50%'}
-                        mt={'1px'}
-                      ></Box>
-                      <Box ml={2} color={'myGray.600'}>
-                        {t('core.dataset.status.syncing')}
-                      </Box>
-                    </Flex>
-                  )}
-                </Flex>
-              ) : (
-                <Button onClick={onOpenWebsiteModal}>{t('core.dataset.Set Website Config')}</Button>
-              )}
-            </>
-          )}
-        </Flex>
+        <Header />
 
         {/* collection table */}
         <TableContainer
@@ -731,86 +414,16 @@ const CollectionCard = () => {
               <Pagination />
             </Flex>
           )}
-          {total === 0 && (
-            <EmptyTip
-              text={
-                datasetDetail.type === DatasetTypeEnum.dataset ? (
-                  t('core.dataset.collection.Empty Tip')
-                ) : (
-                  <Flex>
-                    {datasetDetail.status === DatasetStatusEnum.syncing && (
-                      <>{t('core.dataset.status.syncing')}</>
-                    )}
-                    {datasetDetail.status === DatasetStatusEnum.active && (
-                      <>
-                        {!datasetDetail?.websiteConfig?.url ? (
-                          <>
-                            {t('core.dataset.collection.Website Empty Tip')}
-                            {', '}
-                            <Box
-                              textDecoration={'underline'}
-                              cursor={'pointer'}
-                              onClick={onOpenWebsiteModal}
-                            >
-                              {t('core.dataset.collection.Click top config website')}
-                            </Box>
-                          </>
-                        ) : (
-                          <>{t('core.dataset.website.UnValid Website Tip')}</>
-                        )}
-                      </>
-                    )}
-                  </Flex>
-                )
-              }
-            />
-          )}
+          {total === 0 && <EmptyCollectionTip />}
         </TableContainer>
 
         <ConfirmDeleteModal />
         <ConfirmSyncModal />
         <EditTitleModal />
-        <EditCreateVirtualFileModal iconSrc={'modal/manualDataset'} closeBtnText={''} />
-        {/* {isOpenFileImportModal && (
-          <FileImportModal
-            datasetId={datasetId}
-            parentId={parentId}
-            uploadSuccess={() => {
-              getData(1);
-              onCloseFileImportModal();
-            }}
-            onClose={onCloseFileImportModal}
-          />
-        )} */}
-        {isOpenFileSourceSelector && <FileSourceSelector onClose={onCloseFileSourceSelector} />}
-        {!!editFolderData && (
-          <EditFolderModal
-            onClose={() => setEditFolderData(undefined)}
-            editCallback={async (name) => {
-              try {
-                if (editFolderData.id) {
-                  await putDatasetCollectionById({
-                    id: editFolderData.id,
-                    name
-                  });
-                  getData(pageNum);
-                } else {
-                  onCreateCollection({
-                    name,
-                    type: DatasetCollectionTypeEnum.folder
-                  });
-                }
-              } catch (error) {
-                return Promise.reject(error);
-              }
-            }}
-            isEdit={!!editFolderData.id}
-            name={editFolderData.name}
-          />
-        )}
+
         {!!moveCollectionData && (
           <SelectCollections
-            datasetId={datasetId}
+            datasetId={datasetDetail._id}
             type="folder"
             defaultSelectedId={[moveCollectionData.collectionId]}
             onClose={() => setMoveCollectionData(undefined)}
@@ -828,16 +441,6 @@ const CollectionCard = () => {
             }}
           />
         )}
-        {isOpenWebsiteModal && (
-          <WebSiteConfigModal
-            onClose={onCloseWebsiteModal}
-            onSuccess={onUpdateDatasetWebsiteConfig}
-            defaultValue={{
-              url: datasetDetail?.websiteConfig?.url,
-              selector: datasetDetail?.websiteConfig?.selector
-            }}
-          />
-        )}
       </Flex>
     </MyBox>
   );

projects/app/src/pages/dataset/detail/components/Import/Context.tsx

@@ -0,0 +1,302 @@
+import { useRouter } from 'next/router';
+import { SetStateAction, useState } from 'react';
+import { useTranslation } from 'next-i18next';
+import { createContext, useContextSelector } from 'use-context-selector';
+import { ImportDataSourceEnum, TrainingModeEnum } from '@fastgpt/global/core/dataset/constants';
+import { useMyStep } from '@fastgpt/web/hooks/useStep';
+import { Box, Button, Flex, IconButton } from '@chakra-ui/react';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import { TabEnum } from '../Slider';
+import { ImportProcessWayEnum } from '@/web/core/dataset/constants';
+import { UseFormReturn, useForm } from 'react-hook-form';
+import { ImportSourceItemType } from '@/web/core/dataset/type';
+import { Prompt_AgentQA } from '@fastgpt/global/core/ai/prompt/agent';
+import { DatasetPageContext } from '@/web/core/dataset/context/datasetPageContext';
+
+type TrainingFiledType = {
+  chunkOverlapRatio: number;
+  maxChunkSize: number;
+  minChunkSize: number;
+  autoChunkSize: number;
+  chunkSize: number;
+  showChunkInput: boolean;
+  showPromptInput: boolean;
+  charsPointsPrice: number;
+  priceTip: string;
+  uploadRate: number;
+  chunkSizeField?: ChunkSizeFieldType;
+};
+type DatasetImportContextType = {
+  importSource: ImportDataSourceEnum;
+  parentId: string | undefined;
+  activeStep: number;
+  goToNext: () => void;
+
+  processParamsForm: UseFormReturn<ImportFormType, any>;
+  sources: ImportSourceItemType[];
+  setSources: React.Dispatch<React.SetStateAction<ImportSourceItemType[]>>;
+} & TrainingFiledType;
+
+type ChunkSizeFieldType = 'embeddingChunkSize';
+export type ImportFormType = {
+  mode: TrainingModeEnum;
+  way: ImportProcessWayEnum;
+  embeddingChunkSize: number;
+  customSplitChar: string;
+  qaPrompt: string;
+  webSelector: string;
+};
+
+export const DatasetImportContext = createContext<DatasetImportContextType>({
+  importSource: ImportDataSourceEnum.fileLocal,
+  goToNext: function (): void {
+    throw new Error('Function not implemented.');
+  },
+  activeStep: 0,
+  parentId: undefined,
+
+  maxChunkSize: 0,
+  minChunkSize: 0,
+  showChunkInput: false,
+  showPromptInput: false,
+  sources: [],
+  setSources: function (value: SetStateAction<ImportSourceItemType[]>): void {
+    throw new Error('Function not implemented.');
+  },
+  chunkSize: 0,
+  chunkOverlapRatio: 0,
+  uploadRate: 0,
+  //@ts-ignore
+  processParamsForm: undefined,
+  autoChunkSize: 0,
+  charsPointsPrice: 0,
+  priceTip: ''
+});
+
+const DatasetImportContextProvider = ({ children }: { children: React.ReactNode }) => {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const { source = ImportDataSourceEnum.fileLocal, parentId } = (router.query || {}) as {
+    source: ImportDataSourceEnum;
+    parentId?: string;
+  };
+
+  const datasetDetail = useContextSelector(DatasetPageContext, (v) => v.datasetDetail);
+
+  // step
+  const modeSteps: Record<ImportDataSourceEnum, { title: string }[]> = {
+    [ImportDataSourceEnum.fileLocal]: [
+      {
+        title: t('core.dataset.import.Select file')
+      },
+      {
+        title: t('core.dataset.import.Data Preprocessing')
+      },
+      {
+        title: t('core.dataset.import.Upload data')
+      }
+    ],
+    [ImportDataSourceEnum.fileLink]: [
+      {
+        title: t('core.dataset.import.Select file')
+      },
+      {
+        title: t('core.dataset.import.Data Preprocessing')
+      },
+      {
+        title: t('core.dataset.import.Upload data')
+      }
+    ],
+    [ImportDataSourceEnum.fileCustom]: [
+      {
+        title: t('core.dataset.import.Select file')
+      },
+      {
+        title: t('core.dataset.import.Data Preprocessing')
+      },
+      {
+        title: t('core.dataset.import.Upload data')
+      }
+    ],
+    [ImportDataSourceEnum.csvTable]: [
+      {
+        title: t('core.dataset.import.Select file')
+      },
+      {
+        title: t('core.dataset.import.Data Preprocessing')
+      },
+      {
+        title: t('core.dataset.import.Upload data')
+      }
+    ],
+    [ImportDataSourceEnum.externalFile]: [
+      {
+        title: t('core.dataset.import.Select file')
+      },
+      {
+        title: t('core.dataset.import.Data Preprocessing')
+      },
+      {
+        title: t('core.dataset.import.Upload data')
+      }
+    ]
+  };
+  const steps = modeSteps[source];
+  const { activeStep, goToNext, goToPrevious, MyStep } = useMyStep({
+    defaultStep: 0,
+    steps
+  });
+
+  // -----
+  const vectorModel = datasetDetail.vectorModel;
+  const agentModel = datasetDetail.agentModel;
+
+  const processParamsForm = useForm<ImportFormType>({
+    defaultValues: {
+      mode: TrainingModeEnum.chunk,
+      way: ImportProcessWayEnum.auto,
+      embeddingChunkSize: vectorModel?.defaultToken || 512,
+      customSplitChar: '',
+      qaPrompt: Prompt_AgentQA.description,
+      webSelector: ''
+    }
+  });
+
+  const [sources, setSources] = useState<ImportSourceItemType[]>([]);
+
+  // watch form
+  const mode = processParamsForm.watch('mode');
+  const way = processParamsForm.watch('way');
+  const embeddingChunkSize = processParamsForm.watch('embeddingChunkSize');
+  const customSplitChar = processParamsForm.watch('customSplitChar');
+
+  const modeStaticParams: Record<TrainingModeEnum, TrainingFiledType> = {
+    [TrainingModeEnum.auto]: {
+      chunkOverlapRatio: 0.2,
+      maxChunkSize: 2048,
+      minChunkSize: 100,
+      autoChunkSize: vectorModel?.defaultToken ? vectorModel?.defaultToken * 2 : 1024,
+      chunkSize: vectorModel?.defaultToken ? vectorModel?.defaultToken * 2 : 1024,
+      showChunkInput: false,
+      showPromptInput: false,
+      charsPointsPrice: agentModel.charsPointsPrice,
+      priceTip: t('core.dataset.import.Auto mode Estimated Price Tips', {
+        price: agentModel.charsPointsPrice
+      }),
+      uploadRate: 100
+    },
+    [TrainingModeEnum.chunk]: {
+      chunkSizeField: 'embeddingChunkSize' as ChunkSizeFieldType,
+      chunkOverlapRatio: 0.2,
+      maxChunkSize: vectorModel?.maxToken || 512,
+      minChunkSize: 100,
+      autoChunkSize: vectorModel?.defaultToken || 512,
+      chunkSize: embeddingChunkSize,
+      showChunkInput: true,
+      showPromptInput: false,
+      charsPointsPrice: vectorModel.charsPointsPrice,
+      priceTip: t('core.dataset.import.Embedding Estimated Price Tips', {
+        price: vectorModel.charsPointsPrice
+      }),
+      uploadRate: 150
+    },
+    [TrainingModeEnum.qa]: {
+      chunkOverlapRatio: 0,
+      maxChunkSize: 8000,
+      minChunkSize: 3000,
+      autoChunkSize: agentModel.maxContext * 0.55 || 6000,
+      chunkSize: agentModel.maxContext * 0.55 || 6000,
+      showChunkInput: false,
+      showPromptInput: true,
+      charsPointsPrice: agentModel.charsPointsPrice,
+      priceTip: t('core.dataset.import.QA Estimated Price Tips', {
+        price: agentModel?.charsPointsPrice
+      }),
+      uploadRate: 30
+    }
+  };
+  const selectModelStaticParam = modeStaticParams[mode];
+
+  const wayStaticPrams = {
+    [ImportProcessWayEnum.auto]: {
+      chunkSize: selectModelStaticParam.autoChunkSize,
+      customSplitChar: ''
+    },
+    [ImportProcessWayEnum.custom]: {
+      chunkSize: modeStaticParams[mode].chunkSize,
+      customSplitChar
+    }
+  };
+
+  const chunkSize = wayStaticPrams[way].chunkSize;
+
+  const contextValue = {
+    importSource: source,
+    parentId,
+    activeStep,
+    goToNext,
+
+    processParamsForm,
+    ...selectModelStaticParam,
+    sources,
+    setSources,
+    chunkSize
+  };
+
+  return (
+    <DatasetImportContext.Provider value={contextValue}>
+      <Flex>
+        {activeStep === 0 ? (
+          <Flex alignItems={'center'}>
+            <IconButton
+              icon={<MyIcon name={'common/backFill'} w={'14px'} />}
+              aria-label={''}
+              size={'smSquare'}
+              w={'26px'}
+              h={'26px'}
+              borderRadius={'50%'}
+              variant={'whiteBase'}
+              mr={2}
+              onClick={() =>
+                router.replace({
+                  query: {
+                    ...router.query,
+                    currentTab: TabEnum.collectionCard
+                  }
+                })
+              }
+            />
+            {t('common.Exit')}
+          </Flex>
+        ) : (
+          <Button
+            variant={'whiteBase'}
+            leftIcon={<MyIcon name={'common/backFill'} w={'14px'} />}
+            onClick={goToPrevious}
+          >
+            {t('common.Last Step')}
+          </Button>
+        )}
+        <Box flex={1} />
+      </Flex>
+      {/* step */}
+      <Box
+        mt={4}
+        mb={5}
+        px={3}
+        py={[2, 4]}
+        bg={'myGray.50'}
+        borderWidth={'1px'}
+        borderColor={'borderColor.low'}
+        borderRadius={'md'}
+      >
+        <Box maxW={['100%', '900px']} mx={'auto'}>
+          <MyStep />
+        </Box>
+      </Box>
+      {children}
+    </DatasetImportContext.Provider>
+  );
+};
+
+export default DatasetImportContextProvider;

projects/app/src/pages/dataset/detail/components/Import/Provider.tsx

@@ -1,165 +0,0 @@
-import React, { useContext, createContext, useState, useMemo, useEffect } from 'react';
-
-import { TrainingModeEnum } from '@fastgpt/global/core/dataset/constants';
-import { useTranslation } from 'next-i18next';
-import { DatasetItemType } from '@fastgpt/global/core/dataset/type';
-import { Prompt_AgentQA } from '@fastgpt/global/core/ai/prompt/agent';
-import { UseFormReturn, useForm } from 'react-hook-form';
-import { ImportProcessWayEnum } from '@/web/core/dataset/constants';
-import { ImportSourceItemType } from '@/web/core/dataset/type';
-import { ImportDataSourceEnum } from '@fastgpt/global/core/dataset/constants';
-
-type ChunkSizeFieldType = 'embeddingChunkSize';
-export type FormType = {
-  mode: `${TrainingModeEnum}`;
-  way: `${ImportProcessWayEnum}`;
-  embeddingChunkSize: number;
-  customSplitChar: string;
-  qaPrompt: string;
-  webSelector: string;
-};
-
-type useImportStoreType = {
-  parentId?: string;
-  processParamsForm: UseFormReturn<FormType, any>;
-  chunkSizeField?: ChunkSizeFieldType;
-  maxChunkSize: number;
-  minChunkSize: number;
-  showChunkInput: boolean;
-  showPromptInput: boolean;
-  sources: ImportSourceItemType[];
-  setSources: React.Dispatch<React.SetStateAction<ImportSourceItemType[]>>;
-  chunkSize: number;
-  chunkOverlapRatio: number;
-  priceTip: string;
-  uploadRate: number;
-  importSource: `${ImportDataSourceEnum}`;
-};
-const StateContext = createContext<useImportStoreType>({
-  processParamsForm: {} as any,
-  sources: [],
-  setSources: function (value: React.SetStateAction<ImportSourceItemType[]>): void {
-    throw new Error('Function not implemented.');
-  },
-  maxChunkSize: 0,
-  minChunkSize: 0,
-  showChunkInput: false,
-  showPromptInput: false,
-  chunkSizeField: 'embeddingChunkSize',
-  chunkSize: 0,
-  chunkOverlapRatio: 0,
-  priceTip: '',
-  uploadRate: 50,
-  importSource: ImportDataSourceEnum.fileLocal
-});
-
-export const useImportStore = () => useContext(StateContext);
-
-const Provider = ({
-  importSource,
-  dataset,
-  parentId,
-  children
-}: {
-  importSource: `${ImportDataSourceEnum}`;
-  dataset: DatasetItemType;
-  parentId?: string;
-  children: React.ReactNode;
-}) => {
-  const vectorModel = dataset.vectorModel;
-  const agentModel = dataset.agentModel;
-
-  const processParamsForm = useForm<FormType>({
-    defaultValues: {
-      mode: TrainingModeEnum.chunk,
-      way: ImportProcessWayEnum.auto,
-      embeddingChunkSize: vectorModel?.defaultToken || 512,
-      customSplitChar: '',
-      qaPrompt: Prompt_AgentQA.description,
-      webSelector: ''
-    }
-  });
-
-  const { t } = useTranslation();
-  const [sources, setSources] = useState<ImportSourceItemType[]>([]);
-
-  // watch form
-  const mode = processParamsForm.watch('mode');
-  const way = processParamsForm.watch('way');
-  const embeddingChunkSize = processParamsForm.watch('embeddingChunkSize');
-  const customSplitChar = processParamsForm.watch('customSplitChar');
-
-  const modeStaticParams = {
-    [TrainingModeEnum.auto]: {
-      chunkOverlapRatio: 0.2,
-      maxChunkSize: 2048,
-      minChunkSize: 100,
-      autoChunkSize: vectorModel?.defaultToken ? vectorModel?.defaultToken * 2 : 1024,
-      chunkSize: vectorModel?.defaultToken ? vectorModel?.defaultToken * 2 : 1024,
-      showChunkInput: false,
-      showPromptInput: false,
-      charsPointsPrice: agentModel.charsPointsPrice,
-      priceTip: t('core.dataset.import.Auto mode Estimated Price Tips', {
-        price: agentModel.charsPointsPrice
-      }),
-      uploadRate: 100
-    },
-    [TrainingModeEnum.chunk]: {
-      chunkSizeField: 'embeddingChunkSize' as ChunkSizeFieldType,
-      chunkOverlapRatio: 0.2,
-      maxChunkSize: vectorModel?.maxToken || 512,
-      minChunkSize: 100,
-      autoChunkSize: vectorModel?.defaultToken || 512,
-      chunkSize: embeddingChunkSize,
-      showChunkInput: true,
-      showPromptInput: false,
-      charsPointsPrice: vectorModel.charsPointsPrice,
-      priceTip: t('core.dataset.import.Embedding Estimated Price Tips', {
-        price: vectorModel.charsPointsPrice
-      }),
-      uploadRate: 150
-    },
-    [TrainingModeEnum.qa]: {
-      chunkOverlapRatio: 0,
-      maxChunkSize: 8000,
-      minChunkSize: 3000,
-      autoChunkSize: agentModel.maxContext * 0.55 || 6000,
-      chunkSize: agentModel.maxContext * 0.55 || 6000,
-      showChunkInput: false,
-      showPromptInput: true,
-      charsPointsPrice: agentModel.charsPointsPrice,
-      priceTip: t('core.dataset.import.QA Estimated Price Tips', {
-        price: agentModel?.charsPointsPrice
-      }),
-      uploadRate: 30
-    }
-  };
-  const selectModelStaticParam = useMemo(() => modeStaticParams[mode], [mode]);
-
-  const wayStaticPrams = {
-    [ImportProcessWayEnum.auto]: {
-      chunkSize: selectModelStaticParam.autoChunkSize,
-      customSplitChar: ''
-    },
-    [ImportProcessWayEnum.custom]: {
-      chunkSize: modeStaticParams[mode].chunkSize,
-      customSplitChar
-    }
-  };
-
-  const chunkSize = wayStaticPrams[way].chunkSize;
-
-  const value: useImportStoreType = {
-    parentId,
-    processParamsForm,
-    ...selectModelStaticParam,
-    sources,
-    setSources,
-    chunkSize,
-
-    importSource
-  };
-  return <StateContext.Provider value={value}>{children}</StateContext.Provider>;
-};
-
-export default React.memo(Provider);

projects/app/src/pages/dataset/detail/components/Import/commonProgress/DataProcess.tsx

@@ -20,23 +20,20 @@ import LeftRadio from '@fastgpt/web/components/common/Radio/LeftRadio';
 import { TrainingTypeMap } from '@fastgpt/global/core/dataset/constants';
 import { ImportProcessWayEnum } from '@/web/core/dataset/constants';
 import MyTooltip from '@/components/MyTooltip';
-import { useImportStore } from '../Provider';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import MyModal from '@fastgpt/web/components/common/MyModal';
 import { Prompt_AgentQA } from '@fastgpt/global/core/ai/prompt/agent';
 import Preview from '../components/Preview';
 import Tag from '@fastgpt/web/components/common/Tag/index';
+import { useContextSelector } from 'use-context-selector';
+import { DatasetImportContext } from '../Context';
 
-function DataProcess({
-  showPreviewChunks = true,
-  goToNext
-}: {
-  showPreviewChunks: boolean;
-  goToNext: () => void;
-}) {
+function DataProcess({ showPreviewChunks = true }: { showPreviewChunks: boolean }) {
   const { t } = useTranslation();
   const { feConfigs } = useSystemStore();
+
   const {
+    goToNext,
     processParamsForm,
     chunkSizeField,
     minChunkSize,
@@ -44,7 +41,7 @@ function DataProcess({
     showPromptInput,
     maxChunkSize,
     priceTip
-  } = useImportStore();
+  } = useContextSelector(DatasetImportContext, (v) => v);
   const { getValues, setValue, register } = processParamsForm;
   const [refresh, setRefresh] = useState(false);
 

projects/app/src/pages/dataset/detail/components/Import/commonProgress/PreviewData.tsx

@@ -2,15 +2,12 @@ import React from 'react';
 import Preview from '../components/Preview';
 import { Box, Button, Flex } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
+import { useContextSelector } from 'use-context-selector';
+import { DatasetImportContext } from '../Context';
 
-const PreviewData = ({
-  showPreviewChunks,
-  goToNext
-}: {
-  showPreviewChunks: boolean;
-  goToNext: () => void;
-}) => {
+const PreviewData = ({ showPreviewChunks }: { showPreviewChunks: boolean }) => {
   const { t } = useTranslation();
+  const goToNext = useContextSelector(DatasetImportContext, (v) => v.goToNext);
 
   return (
     <Flex flexDirection={'column'} h={'100%'}>

projects/app/src/pages/dataset/detail/components/Import/commonProgress/Upload.tsx

@@ -11,7 +11,6 @@ import {
   Flex,
   Button
 } from '@chakra-ui/react';
-import { useImportStore, type FormType } from '../Provider';
 import { ImportDataSourceEnum } from '@fastgpt/global/core/dataset/constants';
 import { useTranslation } from 'next-i18next';
 import MyIcon from '@fastgpt/web/components/common/Icon';
@@ -28,20 +27,23 @@ import {
 } from '@/web/core/dataset/api';
 import Tag from '@fastgpt/web/components/common/Tag/index';
 import { useI18n } from '@/web/context/I18n';
+import { useContextSelector } from 'use-context-selector';
+import { DatasetPageContext } from '@/web/core/dataset/context/datasetPageContext';
+import { DatasetImportContext, type ImportFormType } from '../Context';
 
 const Upload = () => {
   const { t } = useTranslation();
   const { fileT } = useI18n();
   const { toast } = useToast();
   const router = useRouter();
-  const { datasetDetail } = useDatasetStore();
+  const datasetDetail = useContextSelector(DatasetPageContext, (v) => v.datasetDetail);
   const { importSource, parentId, sources, setSources, processParamsForm, chunkSize } =
-    useImportStore();
+    useContextSelector(DatasetImportContext, (v) => v);
 
   const { handleSubmit } = processParamsForm;
 
   const { mutate: startUpload, isLoading } = useRequest({
-    mutationFn: async ({ mode, customSplitChar, qaPrompt, webSelector }: FormType) => {
+    mutationFn: async ({ mode, customSplitChar, qaPrompt, webSelector }: ImportFormType) => {
       if (sources.length === 0) return;
       const filterWaitingSources = sources.filter((item) => item.createStatus === 'waiting');
 

projects/app/src/pages/dataset/detail/components/Import/components/FileSourceSelector.tsx

@@ -10,7 +10,7 @@ import { ImportDataSourceEnum } from '@fastgpt/global/core/dataset/constants';
 const FileModeSelector = ({ onClose }: { onClose: () => void }) => {
   const { t } = useTranslation();
   const router = useRouter();
-  const [value, setValue] = useState<`${ImportDataSourceEnum}`>(ImportDataSourceEnum.fileLocal);
+  const [value, setValue] = useState<ImportDataSourceEnum>(ImportDataSourceEnum.fileLocal);
 
   return (
     <MyModal

projects/app/src/pages/dataset/detail/components/Import/components/Preview.tsx

@@ -3,17 +3,18 @@ import { Box, Flex, IconButton } from '@chakra-ui/react';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useTranslation } from 'next-i18next';
 
-import { useImportStore } from '../Provider';
 import MyMenu from '@fastgpt/web/components/common/MyMenu';
 import { ImportSourceItemType } from '@/web/core/dataset/type';
 import dynamic from 'next/dynamic';
+import { useContextSelector } from 'use-context-selector';
+import { DatasetImportContext } from '../Context';
 const PreviewRawText = dynamic(() => import('./PreviewRawText'));
 const PreviewChunks = dynamic(() => import('./PreviewChunks'));
 
 const Preview = ({ showPreviewChunks }: { showPreviewChunks: boolean }) => {
   const { t } = useTranslation();
 
-  const { sources } = useImportStore();
+  const { sources } = useContextSelector(DatasetImportContext, (v) => v);
   const [previewRawTextSource, setPreviewRawTextSource] = useState<ImportSourceItemType>();
   const [previewChunkSource, setPreviewChunkSource] = useState<ImportSourceItemType>();
 

projects/app/src/pages/dataset/detail/components/Import/components/PreviewChunks.tsx

@@ -4,11 +4,12 @@ import { ImportSourceItemType } from '@/web/core/dataset/type';
 import { useQuery } from '@tanstack/react-query';
 import MyRightDrawer from '@fastgpt/web/components/common/MyDrawer/MyRightDrawer';
 import { getPreviewChunks } from '@/web/core/dataset/api';
-import { useImportStore } from '../Provider';
 import { ImportDataSourceEnum } from '@fastgpt/global/core/dataset/constants';
 import { splitText2Chunks } from '@fastgpt/global/common/string/textSplitter';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import { getErrText } from '@fastgpt/global/common/error/utils';
+import { useContextSelector } from 'use-context-selector';
+import { DatasetImportContext } from '../Context';
 
 const PreviewChunks = ({
   previewSource,
@@ -18,7 +19,10 @@ const PreviewChunks = ({
   onClose: () => void;
 }) => {
   const { toast } = useToast();
-  const { importSource, chunkSize, chunkOverlapRatio, processParamsForm } = useImportStore();
+  const { importSource, chunkSize, chunkOverlapRatio, processParamsForm } = useContextSelector(
+    DatasetImportContext,
+    (v) => v
+  );
 
   const { data = [], isLoading } = useQuery(
     ['previewSource'],

projects/app/src/pages/dataset/detail/components/Import/components/PreviewRawText.tsx

@@ -4,10 +4,11 @@ import { ImportSourceItemType } from '@/web/core/dataset/type';
 import { useQuery } from '@tanstack/react-query';
 import { getPreviewFileContent } from '@/web/common/file/api';
 import MyRightDrawer from '@fastgpt/web/components/common/MyDrawer/MyRightDrawer';
-import { useImportStore } from '../Provider';
 import { ImportDataSourceEnum } from '@fastgpt/global/core/dataset/constants';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import { getErrText } from '@fastgpt/global/common/error/utils';
+import { useContextSelector } from 'use-context-selector';
+import { DatasetImportContext } from '../Context';
 
 const PreviewRawText = ({
   previewSource,
@@ -17,7 +18,7 @@ const PreviewRawText = ({
   onClose: () => void;
 }) => {
   const { toast } = useToast();
-  const { importSource } = useImportStore();
+  const { importSource } = useContextSelector(DatasetImportContext, (v) => v);
 
   const { data, isLoading } = useQuery(
     ['previewSource', previewSource?.dbFileId],

projects/app/src/pages/dataset/detail/components/Import/diffSource/ExternalFile.tsx

@@ -0,0 +1,188 @@
+import React, { useEffect } from 'react';
+import dynamic from 'next/dynamic';
+import { useTranslation } from 'next-i18next';
+import { useFieldArray, useForm } from 'react-hook-form';
+import {
+  Box,
+  Button,
+  Flex,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TableContainer,
+  Input
+} from '@chakra-ui/react';
+import { getNanoid } from '@fastgpt/global/common/string/tools';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import Loading from '@fastgpt/web/components/common/MyLoading';
+import { useContextSelector } from 'use-context-selector';
+import { DatasetImportContext } from '../Context';
+import { getFileIcon } from '@fastgpt/global/common/file/icon';
+import { useI18n } from '@/web/context/I18n';
+import { SmallAddIcon } from '@chakra-ui/icons';
+
+const DataProcess = dynamic(() => import('../commonProgress/DataProcess'), {
+  loading: () => <Loading fixed={false} />
+});
+const Upload = dynamic(() => import('../commonProgress/Upload'));
+
+const ExternalFileCollection = () => {
+  const activeStep = useContextSelector(DatasetImportContext, (v) => v.activeStep);
+
+  return (
+    <>
+      {activeStep === 0 && <CustomLinkInput />}
+      {activeStep === 1 && <DataProcess showPreviewChunks={true} />}
+      {activeStep === 2 && <Upload />}
+    </>
+  );
+};
+
+export default React.memo(ExternalFileCollection);
+
+const CustomLinkInput = () => {
+  const { t } = useTranslation();
+  const { datasetT, commonT } = useI18n();
+  const { goToNext, sources, setSources } = useContextSelector(DatasetImportContext, (v) => v);
+  const { register, reset, handleSubmit, control } = useForm<{
+    list: {
+      sourceName: string;
+      sourceUrl: string;
+      externalId: string;
+    }[];
+  }>({
+    defaultValues: {
+      list: [
+        {
+          sourceName: '',
+          sourceUrl: '',
+          externalId: ''
+        }
+      ]
+    }
+  });
+
+  const {
+    fields: list,
+    append,
+    remove,
+    update
+  } = useFieldArray({
+    control,
+    name: 'list'
+  });
+
+  useEffect(() => {
+    if (sources.length > 0) {
+      reset({
+        list: sources.map((item) => ({
+          sourceName: item.sourceName,
+          sourceUrl: item.sourceUrl || '',
+          externalId: item.externalId || ''
+        }))
+      });
+    }
+  }, []);
+
+  return (
+    <Box>
+      <TableContainer>
+        <Table bg={'white'}>
+          <Thead>
+            <Tr bg={'myGray.50'}>
+              <Th>{datasetT('External url')}</Th>
+              <Th>{datasetT('External id')}</Th>
+              <Th>{datasetT('filename')}</Th>
+              <Th></Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {list.map((item, index) => (
+              <Tr key={item.id}>
+                <Td>
+                  <Input
+                    {...register(`list.${index}.sourceUrl`, {
+                      required: index !== list.length - 1,
+                      onBlur(e) {
+                        const val = (e.target.value || '') as string;
+                        if (val.includes('.') && !list[index]?.sourceName) {
+                          const sourceName = val.split('/').pop() || '';
+                          update(index, {
+                            ...list[index],
+                            sourceUrl: val,
+                            sourceName: decodeURIComponent(sourceName)
+                          });
+                        }
+                        if (val && index === list.length - 1) {
+                          append({
+                            sourceName: '',
+                            sourceUrl: '',
+                            externalId: ''
+                          });
+                        }
+                      }
+                    })}
+                  />
+                </Td>
+                <Td>
+                  <Input {...register(`list.${index}.externalId`)} />
+                </Td>
+                <Td>
+                  <Input {...register(`list.${index}.sourceName`)} />
+                </Td>
+                <Td>
+                  <MyIcon
+                    name={'delete'}
+                    w={'16px'}
+                    cursor={'pointer'}
+                    _hover={{ color: 'red.600' }}
+                    onClick={() => remove(index)}
+                  />
+                </Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </TableContainer>
+      <Flex mt={5} justifyContent={'space-between'}>
+        <Button
+          variant={'whitePrimary'}
+          leftIcon={<SmallAddIcon />}
+          onClick={() => {
+            append({
+              sourceName: '',
+              sourceUrl: '',
+              externalId: ''
+            });
+          }}
+        >
+          {commonT('Add new')}
+        </Button>
+        <Button
+          isDisabled={list.length === 0}
+          onClick={handleSubmit((data) => {
+            setSources(
+              data.list
+                .filter((item) => !!item.sourceUrl)
+                .map((item) => ({
+                  id: getNanoid(32),
+                  createStatus: 'waiting',
+                  sourceName: item.sourceName || item.sourceUrl,
+                  icon: getFileIcon(item.sourceUrl),
+                  externalId: item.externalId,
+                  sourceUrl: item.sourceUrl
+                }))
+            );
+
+            goToNext();
+          })}
+        >
+          {t('common.Next Step')}
+        </Button>
+      </Flex>
+    </Box>
+  );
+};

projects/app/src/pages/dataset/detail/components/Import/diffSource/FileCustomText.tsx

@@ -1,24 +1,25 @@
 import React, { useCallback, useEffect } from 'react';
-import { ImportDataComponentProps } from '@/web/core/dataset/type.d';
 
 import dynamic from 'next/dynamic';
-import { useImportStore } from '../Provider';
 import { useTranslation } from 'next-i18next';
 import { useForm } from 'react-hook-form';
 import { Box, Button, Flex, Input, Textarea } from '@chakra-ui/react';
 import { getNanoid } from '@fastgpt/global/common/string/tools';
 import Loading from '@fastgpt/web/components/common/MyLoading';
+import { useContextSelector } from 'use-context-selector';
+import { DatasetImportContext } from '../Context';
 
 const DataProcess = dynamic(() => import('../commonProgress/DataProcess'), {
   loading: () => <Loading fixed={false} />
 });
 const Upload = dynamic(() => import('../commonProgress/Upload'));
 
-const CustomTet = ({ activeStep, goToNext }: ImportDataComponentProps) => {
+const CustomTet = () => {
+  const activeStep = useContextSelector(DatasetImportContext, (v) => v.activeStep);
   return (
     <>
-      {activeStep === 0 && <CustomTextInput goToNext={goToNext} />}
-      {activeStep === 1 && <DataProcess showPreviewChunks goToNext={goToNext} />}
+      {activeStep === 0 && <CustomTextInput />}
+      {activeStep === 1 && <DataProcess showPreviewChunks />}
       {activeStep === 2 && <Upload />}
     </>
   );
@@ -26,9 +27,9 @@ const CustomTet = ({ activeStep, goToNext }: ImportDataComponentProps) => {
 
 export default React.memo(CustomTet);
 
-const CustomTextInput = ({ goToNext }: { goToNext: () => void }) => {
+const CustomTextInput = () => {
   const { t } = useTranslation();
-  const { sources, setSources } = useImportStore();
+  const { sources, goToNext, setSources } = useContextSelector(DatasetImportContext, (v) => v);
   const { register, reset, handleSubmit } = useForm({
     defaultValues: {
       name: '',

projects/app/src/pages/dataset/detail/components/Import/diffSource/FileLink.tsx

@@ -1,8 +1,5 @@
 import React, { useEffect } from 'react';
-import { ImportDataComponentProps } from '@/web/core/dataset/type.d';
-
 import dynamic from 'next/dynamic';
-import { useImportStore } from '../Provider';
 import { useTranslation } from 'next-i18next';
 import { useForm } from 'react-hook-form';
 import { Box, Button, Flex, Input, Link, Textarea } from '@chakra-ui/react';
@@ -12,17 +9,21 @@ import { LinkCollectionIcon } from '@fastgpt/global/core/dataset/constants';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { getDocPath } from '@/web/common/system/doc';
 import Loading from '@fastgpt/web/components/common/MyLoading';
+import { useContextSelector } from 'use-context-selector';
+import { DatasetImportContext } from '../Context';
 
 const DataProcess = dynamic(() => import('../commonProgress/DataProcess'), {
   loading: () => <Loading fixed={false} />
 });
 const Upload = dynamic(() => import('../commonProgress/Upload'));
 
-const LinkCollection = ({ activeStep, goToNext }: ImportDataComponentProps) => {
+const LinkCollection = () => {
+  const activeStep = useContextSelector(DatasetImportContext, (v) => v.activeStep);
+
   return (
     <>
-      {activeStep === 0 && <CustomLinkImport goToNext={goToNext} />}
-      {activeStep === 1 && <DataProcess showPreviewChunks={false} goToNext={goToNext} />}
+      {activeStep === 0 && <CustomLinkImport />}
+      {activeStep === 1 && <DataProcess showPreviewChunks={false} />}
       {activeStep === 2 && <Upload />}
     </>
   );
@@ -30,10 +31,13 @@ const LinkCollection = ({ activeStep, goToNext }: ImportDataComponentProps) => {
 
 export default React.memo(LinkCollection);
 
-const CustomLinkImport = ({ goToNext }: { goToNext: () => void }) => {
+const CustomLinkImport = () => {
   const { t } = useTranslation();
   const { feConfigs } = useSystemStore();
-  const { sources, setSources, processParamsForm } = useImportStore();
+  const { goToNext, sources, setSources, processParamsForm } = useContextSelector(
+    DatasetImportContext,
+    (v) => v
+  );
   const { register, reset, handleSubmit, watch } = useForm({
     defaultValues: {
       link: ''

projects/app/src/pages/dataset/detail/components/Import/diffSource/FileLocal.tsx

@@ -1,13 +1,14 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { ImportDataComponentProps, ImportSourceItemType } from '@/web/core/dataset/type.d';
+import { ImportSourceItemType } from '@/web/core/dataset/type.d';
 import { Box, Button } from '@chakra-ui/react';
 import FileSelector from '../components/FileSelector';
 import { useTranslation } from 'next-i18next';
-import { useImportStore } from '../Provider';
 
 import dynamic from 'next/dynamic';
 import Loading from '@fastgpt/web/components/common/MyLoading';
 import { RenderUploadFiles } from '../components/RenderFiles';
+import { useContextSelector } from 'use-context-selector';
+import { DatasetImportContext } from '../Context';
 
 const DataProcess = dynamic(() => import('../commonProgress/DataProcess'), {
   loading: () => <Loading fixed={false} />
@@ -16,11 +17,13 @@ const Upload = dynamic(() => import('../commonProgress/Upload'));
 
 const fileType = '.txt, .docx, .csv, .xlsx, .pdf, .md, .html, .pptx';
 
-const FileLocal = ({ activeStep, goToNext }: ImportDataComponentProps) => {
+const FileLocal = () => {
+  const activeStep = useContextSelector(DatasetImportContext, (v) => v.activeStep);
+
   return (
     <>
-      {activeStep === 0 && <SelectFile goToNext={goToNext} />}
-      {activeStep === 1 && <DataProcess showPreviewChunks goToNext={goToNext} />}
+      {activeStep === 0 && <SelectFile />}
+      {activeStep === 1 && <DataProcess showPreviewChunks />}
       {activeStep === 2 && <Upload />}
     </>
   );
@@ -28,9 +31,9 @@ const FileLocal = ({ activeStep, goToNext }: ImportDataComponentProps) => {
 
 export default React.memo(FileLocal);
 
-const SelectFile = React.memo(function SelectFile({ goToNext }: { goToNext: () => void }) {
+const SelectFile = React.memo(function SelectFile() {
   const { t } = useTranslation();
-  const { sources, setSources } = useImportStore();
+  const { goToNext, sources, setSources } = useContextSelector(DatasetImportContext, (v) => v);
   const [selectFiles, setSelectFiles] = useState<ImportSourceItemType[]>(
     sources.map((source) => ({
       isUploading: false,

projects/app/src/pages/dataset/detail/components/Import/diffSource/TableLocal.tsx

@@ -1,24 +1,27 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { ImportDataComponentProps, ImportSourceItemType } from '@/web/core/dataset/type.d';
+import { ImportSourceItemType } from '@/web/core/dataset/type.d';
 import { Box, Button } from '@chakra-ui/react';
 import FileSelector from '../components/FileSelector';
 import { useTranslation } from 'next-i18next';
-import { useImportStore } from '../Provider';
 
 import dynamic from 'next/dynamic';
 import { fileDownload } from '@/web/common/file/utils';
 import { RenderUploadFiles } from '../components/RenderFiles';
+import { useContextSelector } from 'use-context-selector';
+import { DatasetImportContext } from '../Context';
 
 const PreviewData = dynamic(() => import('../commonProgress/PreviewData'));
 const Upload = dynamic(() => import('../commonProgress/Upload'));
 
 const fileType = '.csv';
 
-const FileLocal = ({ activeStep, goToNext }: ImportDataComponentProps) => {
+const FileLocal = () => {
+  const activeStep = useContextSelector(DatasetImportContext, (v) => v.activeStep);
+
   return (
     <>
-      {activeStep === 0 && <SelectFile goToNext={goToNext} />}
-      {activeStep === 1 && <PreviewData showPreviewChunks goToNext={goToNext} />}
+      {activeStep === 0 && <SelectFile />}
+      {activeStep === 1 && <PreviewData showPreviewChunks />}
       {activeStep === 2 && <Upload />}
     </>
   );
@@ -32,9 +35,9 @@ const csvTemplate = `"第一列内容","第二列内容"
 "结合人工智能的演进历程,AIGC的发展大致可以分为三个阶段，即:早期萌芽阶段(20世纪50年代至90年代中期)、沉淀积累阶段(20世纪90年代中期至21世纪10年代中期),以及快速发展展阶段(21世纪10年代中期至今)。",""
 "AIGC发展分为几个阶段？","早期萌芽阶段(20世纪50年代至90年代中期)、沉淀积累阶段(20世纪90年代中期至21世纪10年代中期)、快速发展展阶段(21世纪10年代中期至今)"`;
 
-const SelectFile = React.memo(function SelectFile({ goToNext }: { goToNext: () => void }) {
+const SelectFile = React.memo(function SelectFile() {
   const { t } = useTranslation();
-  const { sources, setSources } = useImportStore();
+  const { goToNext, sources, setSources } = useContextSelector(DatasetImportContext, (v) => v);
   const [selectFiles, setSelectFiles] = useState<ImportSourceItemType[]>(
     sources.map((source) => ({
       isUploading: false,

projects/app/src/pages/dataset/detail/components/Import/index.tsx

@@ -1,147 +1,42 @@
 import React, { useMemo } from 'react';
-import { Box, Button, Flex, IconButton } from '@chakra-ui/react';
-import MyIcon from '@fastgpt/web/components/common/Icon';
-import { useTranslation } from 'next-i18next';
-import { useRouter } from 'next/router';
-import { TabEnum } from '../../index';
-import { useMyStep } from '@fastgpt/web/hooks/useStep';
+import { Box, Flex } from '@chakra-ui/react';
 import dynamic from 'next/dynamic';
-import { useDatasetStore } from '@/web/core/dataset/store/dataset';
 import { ImportDataSourceEnum } from '@fastgpt/global/core/dataset/constants';
-import Provider from './Provider';
+import { useContextSelector } from 'use-context-selector';
+import DatasetImportContextProvider, { DatasetImportContext } from './Context';
 
 const FileLocal = dynamic(() => import('./diffSource/FileLocal'));
 const FileLink = dynamic(() => import('./diffSource/FileLink'));
 const FileCustomText = dynamic(() => import('./diffSource/FileCustomText'));
 const TableLocal = dynamic(() => import('./diffSource/TableLocal'));
+const ExternalFileCollection = dynamic(() => import('./diffSource/ExternalFile'));
 
 const ImportDataset = () => {
-  const { t } = useTranslation();
-  const router = useRouter();
-  const { datasetDetail } = useDatasetStore();
-  const { source = ImportDataSourceEnum.fileLocal, parentId } = (router.query || {}) as {
-    source: `${ImportDataSourceEnum}`;
-    parentId?: string;
-  };
-
-  const modeSteps: Record<`${ImportDataSourceEnum}`, { title: string }[]> = {
-    [ImportDataSourceEnum.fileLocal]: [
-      {
-        title: t('core.dataset.import.Select file')
-      },
-      {
-        title: t('core.dataset.import.Data Preprocessing')
-      },
-      {
-        title: t('core.dataset.import.Upload data')
-      }
-    ],
-    [ImportDataSourceEnum.fileLink]: [
-      {
-        title: t('core.dataset.import.Select file')
-      },
-      {
-        title: t('core.dataset.import.Data Preprocessing')
-      },
-      {
-        title: t('core.dataset.import.Upload data')
-      }
-    ],
-    [ImportDataSourceEnum.fileCustom]: [
-      {
-        title: t('core.dataset.import.Select file')
-      },
-      {
-        title: t('core.dataset.import.Data Preprocessing')
-      },
-      {
-        title: t('core.dataset.import.Upload data')
-      }
-    ],
-    [ImportDataSourceEnum.csvTable]: [
-      {
-        title: t('core.dataset.import.Select file')
-      },
-      {
-        title: t('core.dataset.import.Data Preprocessing')
-      },
-      {
-        title: t('core.dataset.import.Upload data')
-      }
-    ]
-  };
-  const steps = modeSteps[source];
-
-  const { activeStep, goToNext, goToPrevious, MyStep } = useMyStep({
-    defaultStep: 0,
-    steps
-  });
+  const importSource = useContextSelector(DatasetImportContext, (v) => v.importSource);
 
   const ImportComponent = useMemo(() => {
-    if (source === ImportDataSourceEnum.fileLocal) return FileLocal;
-    if (source === ImportDataSourceEnum.fileLink) return FileLink;
-    if (source === ImportDataSourceEnum.fileCustom) return FileCustomText;
-    if (source === ImportDataSourceEnum.csvTable) return TableLocal;
-  }, [source]);
+    if (importSource === ImportDataSourceEnum.fileLocal) return FileLocal;
+    if (importSource === ImportDataSourceEnum.fileLink) return FileLink;
+    if (importSource === ImportDataSourceEnum.fileCustom) return FileCustomText;
+    if (importSource === ImportDataSourceEnum.csvTable) return TableLocal;
+    if (importSource === ImportDataSourceEnum.externalFile) return ExternalFileCollection;
+  }, [importSource]);
 
   return ImportComponent ? (
-    <Flex flexDirection={'column'} bg={'white'} h={'100%'} px={[2, 9]} py={[2, 5]}>
-      <Flex>
-        {activeStep === 0 ? (
-          <Flex alignItems={'center'}>
-            <IconButton
-              icon={<MyIcon name={'common/backFill'} w={'14px'} />}
-              aria-label={''}
-              size={'smSquare'}
-              w={'26px'}
-              h={'26px'}
-              borderRadius={'50%'}
-              variant={'whiteBase'}
-              mr={2}
-              onClick={() =>
-                router.replace({
-                  query: {
-                    ...router.query,
-                    currentTab: TabEnum.collectionCard
-                  }
-                })
-              }
-            />
-            {t('common.Exit')}
-          </Flex>
-        ) : (
-          <Button
-            variant={'whiteBase'}
-            leftIcon={<MyIcon name={'common/backFill'} w={'14px'} />}
-            onClick={goToPrevious}
-          >
-            {t('common.Last Step')}
-          </Button>
-        )}
-        <Box flex={1} />
-      </Flex>
-      {/* step */}
-      <Box
-        mt={4}
-        mb={5}
-        px={3}
-        py={[2, 4]}
-        bg={'myGray.50'}
-        borderWidth={'1px'}
-        borderColor={'borderColor.low'}
-        borderRadius={'md'}
-      >
-        <Box maxW={['100%', '900px']} mx={'auto'}>
-          <MyStep />
-        </Box>
-      </Box>
-      <Provider dataset={datasetDetail} parentId={parentId} importSource={source}>
-        <Box flex={'1 0 0'} overflow={'auto'} position={'relative'}>
-          <ImportComponent activeStep={activeStep} goToNext={goToNext} />
-        </Box>
-      </Provider>
-    </Flex>
+    <Box flex={'1 0 0'} overflow={'auto'} position={'relative'}>
+      <ImportComponent />
+    </Box>
   ) : null;
 };
 
-export default React.memo(ImportDataset);
+const Render = () => {
+  return (
+    <Flex flexDirection={'column'} bg={'white'} h={'100%'} px={[2, 9]} py={[2, 5]}>
+      <DatasetImportContextProvider>
+        <ImportDataset />
+      </DatasetImportContextProvider>
+    </Flex>
+  );
+};
+
+export default React.memo(Render);

projects/app/src/pages/dataset/detail/components/Info.tsx

@@ -23,13 +23,14 @@ import type { VectorModelItemType } from '@fastgpt/global/core/ai/model.d';
 import { useContextSelector } from 'use-context-selector';
 import { DatasetPageContext } from '@/web/core/dataset/context/datasetPageContext';
 import MyDivider from '@fastgpt/web/components/common/MyDivider/index';
+import { DatasetTypeEnum } from '@fastgpt/global/core/dataset/constants';
 
 const Info = ({ datasetId }: { datasetId: string }) => {
   const { t } = useTranslation();
   const { datasetT } = useI18n();
-  const { datasetDetail, loadDatasetDetail, loadDatasets, updateDataset } = useDatasetStore();
-  const rebuildingCount = useContextSelector(DatasetPageContext, (v) => v.rebuildingCount);
-  const trainingCount = useContextSelector(DatasetPageContext, (v) => v.trainingCount);
+  const { datasetDetail, loadDatasetDetail, updateDataset, rebuildingCount, trainingCount } =
+    useContextSelector(DatasetPageContext, (v) => v);
+
   const refetchDatasetTraining = useContextSelector(
     DatasetPageContext,
     (v) => v.refetchDatasetTraining
@@ -82,9 +83,6 @@ const Info = ({ datasetId }: { datasetId: string }) => {
         ...data
       });
     },
-    onSuccess() {
-      loadDatasets();
-    },
     successToast: t('common.Update Success'),
     errorToast: t('common.Update Failed')
   });
@@ -117,7 +115,7 @@ const Info = ({ datasetId }: { datasetId: string }) => {
     },
     onSuccess() {
       refetchDatasetTraining();
-      loadDatasetDetail(datasetId, true);
+      loadDatasetDetail(datasetId);
     },
     successToast: datasetT('Rebuild embedding start tip'),
     errorToast: t('common.Update Failed')
@@ -128,16 +126,16 @@ const Info = ({ datasetId }: { datasetId: string }) => {
   return (
     <Box py={5} px={[5, 10]}>
       <Flex mt={5} w={'100%'} alignItems={'center'}>
-        <Box flex={['0 0 90px', '0 0 160px']} w={0}>
+        <Box fontSize={['sm', 'md']} flex={['0 0 90px', '0 0 160px']} w={0}>
           {t('core.dataset.Dataset ID')}
         </Box>
         <Box flex={1}>{datasetDetail._id}</Box>
       </Flex>
       <Flex mt={8} w={'100%'} alignItems={'center'} flexWrap={'wrap'}>
-        <Box flex={['0 0 90px', '0 0 160px']} w={0}>
+        <Box fontSize={['sm', 'md']} flex={['0 0 90px', '0 0 160px']} w={0}>
           {t('core.ai.model.Vector Model')}
         </Box>
-        <Box flex={[1, '0 0 300px']}>
+        <Box flex={[1, '0 0 320px']}>
           <AIModelSelector
             w={'100%'}
             value={vectorModel.model}
@@ -162,16 +160,16 @@ const Info = ({ datasetId }: { datasetId: string }) => {
         </Box>
       </Flex>
       <Flex mt={8} w={'100%'} alignItems={'center'}>
-        <Box flex={['0 0 90px', '0 0 160px']} w={0}>
+        <Box fontSize={['sm', 'md']} flex={['0 0 90px', '0 0 160px']} w={0}>
           {t('core.Max Token')}
         </Box>
-        <Box flex={[1, '0 0 300px']}>{vectorModel.maxToken}</Box>
+        <Box flex={[1, '0 0 320px']}>{vectorModel.maxToken}</Box>
       </Flex>
       <Flex mt={6} alignItems={'center'} flexWrap={'wrap'}>
-        <Box flex={['0 0 90px', '0 0 160px']} w={0}>
+        <Box fontSize={['sm', 'md']} flex={['0 0 90px', '0 0 160px']} w={0}>
           {t('core.ai.model.Dataset Agent Model')}
         </Box>
-        <Box flex={[1, '0 0 300px']}>
+        <Box flex={[1, '0 0 320px']}>
           <AIModelSelector
             w={'100%'}
             value={agentModel.model}
@@ -188,13 +186,29 @@ const Info = ({ datasetId }: { datasetId: string }) => {
         </Box>
       </Flex>
 
-      <MyDivider my={4} h={'2px'} maxW={'500px'} />
+      <MyDivider my={6} h={'2px'} maxW={'500px'} />
+
+      {datasetDetail.type === DatasetTypeEnum.externalFile && (
+        <>
+          <Flex w={'100%'} alignItems={'center'}>
+            <Box fontSize={['sm', 'md']} flex={['0 0 90px', '0 0 160px']} w={0}>
+              {datasetT('External read url')}
+            </Box>
+            <Input
+              flex={[1, '0 0 320px']}
+              placeholder="https://test.com/read?fileId={{fileId}}"
+              {...register('externalReadUrl')}
+            />
+          </Flex>
+          <MyDivider my={6} h={'2px'} maxW={'500px'} />
+        </>
+      )}
 
       <Flex mt={5} w={'100%'} alignItems={'center'}>
-        <Box flex={['0 0 90px', '0 0 160px']} w={0}>
+        <Box fontSize={['sm', 'md']} flex={['0 0 90px', '0 0 160px']} w={0}>
           {t('core.dataset.Avatar')}
         </Box>
-        <Box flex={[1, '0 0 300px']}>
+        <Box flex={[1, '0 0 320px']}>
           <MyTooltip label={t('common.avatar.Select Avatar')}>
             <Avatar
               m={'auto'}
@@ -208,18 +222,20 @@ const Info = ({ datasetId }: { datasetId: string }) => {
         </Box>
       </Flex>
       <Flex mt={8} w={'100%'} alignItems={'center'}>
-        <Box flex={['0 0 90px', '0 0 160px']} w={0}>
+        <Box fontSize={['sm', 'md']} flex={['0 0 90px', '0 0 160px']} w={0}>
           {t('core.dataset.Name')}
         </Box>
-        <Input flex={[1, '0 0 300px']} maxLength={30} {...register('name')} />
+        <Input flex={[1, '0 0 320px']} maxLength={30} {...register('name')} />
       </Flex>
       <Flex mt={8} alignItems={'center'} w={'100%'}>
-        <Box flex={['0 0 90px', '0 0 160px']}>{t('common.Intro')}</Box>
-        <Textarea flex={[1, '0 0 300px']} {...register('intro')} placeholder={t('common.Intro')} />
+        <Box fontSize={['sm', 'md']} flex={['0 0 90px', '0 0 160px']}>
+          {t('common.Intro')}
+        </Box>
+        <Textarea flex={[1, '0 0 320px']} {...register('intro')} placeholder={t('common.Intro')} />
       </Flex>
       {datasetDetail.isOwner && (
         <Flex mt={5} alignItems={'center'} w={'100%'} flexWrap={'wrap'}>
-          <Box flex={['0 0 90px', '0 0 160px']} w={0}>
+          <Box fontSize={['sm', 'md']} flex={['0 0 90px', '0 0 160px']} w={0}>
             {t('user.Permission')}
           </Box>
           <Box>
@@ -234,7 +250,7 @@ const Info = ({ datasetId }: { datasetId: string }) => {
       )}
 
       <Flex mt={5} w={'100%'} alignItems={'flex-end'}>
-        <Box flex={['0 0 90px', '0 0 160px']} w={0}></Box>
+        <Box fontSize={['sm', 'md']} flex={['0 0 90px', '0 0 160px']} w={0}></Box>
         <Button
           isLoading={btnLoading}
           mr={4}

projects/app/src/pages/dataset/detail/components/Slider.tsx

@@ -5,17 +5,10 @@ import { useUserStore } from '@/web/support/user/useUserStore';
 import { Box, Flex, IconButton, useTheme, Progress } from '@chakra-ui/react';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import Avatar from '@/components/Avatar';
-import {
-  DatasetStatusEnum,
-  DatasetTypeEnum,
-  DatasetTypeMap
-} from '@fastgpt/global/core/dataset/constants';
+import { DatasetTypeMap } from '@fastgpt/global/core/dataset/constants';
 import DatasetTypeTag from '@/components/core/dataset/DatasetTypeTag';
-import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import MyIcon from '@fastgpt/web/components/common/Icon';
-import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
 import SideTabs from '@/components/SideTabs';
-import { useRequest } from '@fastgpt/web/hooks/useRequest';
 import { useRouter } from 'next/router';
 import Tabs from '@/components/Tabs';
 import { useContextSelector } from 'use-context-selector';
@@ -36,12 +29,10 @@ const Slider = ({ currentTab }: { currentTab: TabEnum }) => {
   const { datasetT } = useI18n();
   const router = useRouter();
   const query = router.query;
-  const { datasetDetail, startWebsiteSync } = useDatasetStore();
   const { userInfo } = useUserStore();
-  const { isPc, setLoading } = useSystemStore();
-  const vectorTrainingMap = useContextSelector(DatasetPageContext, (v) => v.vectorTrainingMap);
-  const agentTrainingMap = useContextSelector(DatasetPageContext, (v) => v.agentTrainingMap);
-  const rebuildingCount = useContextSelector(DatasetPageContext, (v) => v.rebuildingCount);
+  const { isPc } = useSystemStore();
+  const { datasetDetail, vectorTrainingMap, agentTrainingMap, rebuildingCount } =
+    useContextSelector(DatasetPageContext, (v) => v);
 
   const tabList = [
     {
@@ -67,20 +58,6 @@ const Slider = ({ currentTab }: { currentTab: TabEnum }) => {
     [query, router]
   );
 
-  const { ConfirmModal: ConfirmSyncModal, openConfirm: openConfirmSync } = useConfirm({
-    type: 'common'
-  });
-  const { mutate: onUpdateDatasetWebsiteConfig } = useRequest({
-    mutationFn: () => {
-      setLoading(true);
-      return startWebsiteSync();
-    },
-    onSettled() {
-      setLoading(false);
-    },
-    errorToast: t('common.Update Failed')
-  });
-
   return (
     <>
       {isPc ? (
@@ -101,25 +78,6 @@ const Slider = ({ currentTab }: { currentTab: TabEnum }) => {
             {DatasetTypeMap[datasetDetail.type] && (
               <Flex alignItems={'center'} pl={2} justifyContent={'space-between'}>
                 <DatasetTypeTag type={datasetDetail.type} />
-                {datasetDetail.type === DatasetTypeEnum.websiteDataset &&
-                  datasetDetail.status === DatasetStatusEnum.active && (
-                    <MyTooltip label={t('core.dataset.website.Start Sync')}>
-                      <MyIcon
-                        mt={1}
-                        name={'common/refreshLight'}
-                        w={'12px'}
-                        color={'myGray.500'}
-                        cursor={'pointer'}
-                        onClick={() =>
-                          openConfirmSync(
-                            onUpdateDatasetWebsiteConfig,
-                            undefined,
-                            t('core.dataset.website.Confirm Create Tips')
-                          )()
-                        }
-                      />
-                    </MyTooltip>
-                  )}
               </Flex>
             )}
           </Box>
@@ -206,8 +164,6 @@ const Slider = ({ currentTab }: { currentTab: TabEnum }) => {
           />
         </Box>
       )}
-
-      <ConfirmSyncModal />
     </>
   );
 };

projects/app/src/pages/dataset/detail/components/Test.tsx

@@ -25,6 +25,8 @@ import { fileDownload } from '@/web/common/file/utils';
 import QuoteItem from '@/components/core/dataset/QuoteItem';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import SearchParamsTip from '@/components/core/dataset/SearchParamsTip';
+import { useContextSelector } from 'use-context-selector';
+import { DatasetPageContext } from '@/web/core/dataset/context/datasetPageContext';
 
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 12);
 
@@ -48,7 +50,7 @@ const Test = ({ datasetId }: { datasetId: string }) => {
   const theme = useTheme();
   const { toast } = useToast();
   const { llmModelList } = useSystemStore();
-  const { datasetDetail } = useDatasetStore();
+  const datasetDetail = useContextSelector(DatasetPageContext, (v) => v.datasetDetail);
   const { pushDatasetTestItem } = useSearchTestStore();
   const [inputType, setInputType] = useState<'text' | 'file'>('text');
   const [datasetTestItem, setDatasetTestItem] = useState<SearchTestStoreItemType>();

projects/app/src/pages/dataset/detail/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React from 'react';
 import { useRouter } from 'next/router';
 import { Box } from '@chakra-ui/react';
 import { useToast } from '@fastgpt/web/hooks/useToast';
@@ -9,15 +9,17 @@ import PageContainer from '@/components/PageContainer';
 import { serviceSideProps } from '@/web/common/utils/i18n';
 import { useTranslation } from 'next-i18next';
 
-import CollectionCard from './components/CollectionCard';
-import { useDatasetStore } from '@/web/core/dataset/store/dataset';
-
-import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
-import Head from 'next/head';
 import Slider from './components/Slider';
 import MyBox from '@fastgpt/web/components/common/MyBox';
-import { DatasetPageContextProvider } from '@/web/core/dataset/context/datasetPageContext';
+import {
+  DatasetPageContext,
+  DatasetPageContextProvider
+} from '@/web/core/dataset/context/datasetPageContext';
+import CollectionPageContextProvider from './components/CollectionCard/Context';
+import { useContextSelector } from 'use-context-selector';
+import NextHead from '@/components/common/NextHead';
 
+const CollectionCard = dynamic(() => import('./components/CollectionCard/index'));
 const DataCard = dynamic(() => import('./components/DataCard'));
 const Test = dynamic(() => import('./components/Test'));
 const Info = dynamic(() => import('./components/Info'));
@@ -30,16 +32,14 @@ export enum TabEnum {
   info = 'info',
   import = 'import'
 }
+type Props = { datasetId: string; currentTab: TabEnum };
 
-const Detail = ({ datasetId, currentTab }: { datasetId: string; currentTab: TabEnum }) => {
+const Detail = ({ datasetId, currentTab }: Props) => {
   const { t } = useTranslation();
   const { toast } = useToast();
   const router = useRouter();
-  const { datasetDetail, loadDatasetDetail } = useDatasetStore();
-
-  const { ConfirmModal: ConfirmSyncModal, openConfirm: openConfirmSync } = useConfirm({
-    type: 'common'
-  });
+  const datasetDetail = useContextSelector(DatasetPageContext, (v) => v.datasetDetail);
+  const loadDatasetDetail = useContextSelector(DatasetPageContext, (v) => v.loadDatasetDetail);
 
   useQuery([datasetId], () => loadDatasetDetail(datasetId), {
     onError(err: any) {
@@ -53,36 +53,37 @@ const Detail = ({ datasetId, currentTab }: { datasetId: string; currentTab: TabE
 
   return (
     <>
-      <Head>
-        <title>{datasetDetail?.name}</title>
-      </Head>
-      <DatasetPageContextProvider
-        value={{
-          datasetId
-        }}
-      >
-        <PageContainer>
-          <MyBox display={'flex'} flexDirection={['column', 'row']} h={'100%'} pt={[4, 0]}>
-            <Slider currentTab={currentTab} />
+      <NextHead title={datasetDetail?.name} icon={datasetDetail?.avatar} />
+      <PageContainer>
+        <MyBox display={'flex'} flexDirection={['column', 'row']} h={'100%'} pt={[4, 0]}>
+          <Slider currentTab={currentTab} />
 
-            {!!datasetDetail._id && (
-              <Box flex={'1 0 0'} pb={0}>
-                {currentTab === TabEnum.collectionCard && <CollectionCard />}
-                {currentTab === TabEnum.dataCard && <DataCard />}
-                {currentTab === TabEnum.test && <Test datasetId={datasetId} />}
-                {currentTab === TabEnum.info && <Info datasetId={datasetId} />}
-                {currentTab === TabEnum.import && <Import />}
-              </Box>
-            )}
-          </MyBox>
-        </PageContainer>
-      </DatasetPageContextProvider>
-
-      <ConfirmSyncModal />
+          {!!datasetDetail._id && (
+            <Box flex={'1 0 0'} pb={0}>
+              {currentTab === TabEnum.collectionCard && (
+                <CollectionPageContextProvider>
+                  <CollectionCard />
+                </CollectionPageContextProvider>
+              )}
+              {currentTab === TabEnum.dataCard && <DataCard />}
+              {currentTab === TabEnum.test && <Test datasetId={datasetId} />}
+              {currentTab === TabEnum.info && <Info datasetId={datasetId} />}
+              {currentTab === TabEnum.import && <Import />}
+            </Box>
+          )}
+        </MyBox>
+      </PageContainer>
     </>
   );
 };
 
+const Render = (data: Props) => (
+  <DatasetPageContextProvider datasetId={data.datasetId}>
+    <Detail {...data} />
+  </DatasetPageContextProvider>
+);
+export default Render;
+
 export async function getServerSideProps(context: any) {
   const currentTab = context?.query?.currentTab || TabEnum.collectionCard;
   const datasetId = context?.query?.datasetId;
@@ -91,5 +92,3 @@ export async function getServerSideProps(context: any) {
     props: { currentTab, datasetId, ...(await serviceSideProps(context, ['dataset', 'file'])) }
   };
 }
-
-export default React.memo(Detail);

projects/app/src/pages/dataset/list/component/CreateModal.tsx

@@ -20,9 +20,11 @@ import { MongoImageTypeEnum } from '@fastgpt/global/common/file/image/constants'
 import { QuestionOutlineIcon } from '@chakra-ui/icons';
 import MySelect from '@fastgpt/web/components/common/MySelect';
 import AIModelSelector from '@/components/Select/AIModelSelector';
+import { useI18n } from '@/web/context/I18n';
 
 const CreateModal = ({ onClose, parentId }: { onClose: () => void; parentId?: string }) => {
   const { t } = useTranslation();
+  const { datasetT } = useI18n();
   const [refresh, setRefresh] = useState(false);
   const { toast } = useToast();
   const router = useRouter();
@@ -102,25 +104,31 @@ const CreateModal = ({ onClose, parentId }: { onClose: () => void; parentId?: st
             gridTemplateColumns={'repeat(1,1fr)'}
             list={[
               {
-                title: t('core.dataset.Common Dataset'),
+                title: datasetT('Common Dataset'),
                 value: DatasetTypeEnum.dataset,
                 icon: 'core/dataset/commonDataset',
-                desc: t('core.dataset.Common Dataset Desc')
+                desc: datasetT('Common Dataset Desc')
               },
               ...(feConfigs.isPlus
                 ? [
                     {
-                      title: t('core.dataset.Website Dataset'),
+                      title: datasetT('Website Dataset'),
                       value: DatasetTypeEnum.websiteDataset,
                       icon: 'core/dataset/websiteDataset',
-                      desc: t('core.dataset.Website Dataset Desc')
+                      desc: datasetT('Website Dataset Desc')
                     }
+                    // {
+                    //   title: datasetT('External File'),
+                    //   value: DatasetTypeEnum.externalFile,
+                    //   icon: 'core/dataset/websiteDataset',
+                    //   desc: datasetT('External file Dataset Desc')
+                    // }
                   ]
                 : [])
             ]}
             value={getValues('type')}
             onChange={(e) => {
-              setValue('type', e as `${DatasetTypeEnum}`);
+              setValue('type', e as DatasetTypeEnum);
               setRefresh(!refresh);
             }}
           />

projects/app/src/pages/dataset/list/component/MoveModal.tsx

@@ -35,7 +35,10 @@ const MoveModal = ({
   const [parentId, setParentId] = useState<string>('');
 
   const { data } = useQuery(['getDatasets', parentId], () => {
-    return Promise.all([getDatasets({ parentId, type: 'folder' }), getDatasetPaths(parentId)]);
+    return Promise.all([
+      getDatasets({ parentId, type: DatasetTypeEnum.folder }),
+      getDatasetPaths(parentId)
+    ]);
   });
   const paths = useMemo(
     () => [

projects/app/src/pages/dataset/list/index.tsx

@@ -1,7 +1,6 @@
-import React, { useMemo, useRef } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { Box, Flex, Grid, useDisclosure, Image, Button } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
-import { useDatasetStore } from '@/web/core/dataset/store/dataset';
 import PageContainer from '@/components/PageContainer';
 import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
 import { AddIcon } from '@chakra-ui/icons';
@@ -35,28 +34,30 @@ import DatasetTypeTag from '@/components/core/dataset/DatasetTypeTag';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import { getErrText } from '@fastgpt/global/common/error/utils';
 import { xmlDownloadFetch } from '@/web/common/api/xmlFetch';
+import { useDatasetStore } from '@/web/core/dataset/store/dataset';
 
 const CreateModal = dynamic(() => import('./component/CreateModal'), { ssr: false });
 const MoveModal = dynamic(() => import('./component/MoveModal'), { ssr: false });
 
-const Kb = () => {
+const Dataset = () => {
   const { t } = useTranslation();
   const { toast } = useToast();
   const router = useRouter();
   const { parentId } = router.query as { parentId: string };
   const { setLoading } = useSystemStore();
   const { userInfo } = useUserStore();
+  const { myDatasets, loadMyDatasets, setMyDatasets } = useDatasetStore();
 
   const DeleteTipsMap = useRef({
     [DatasetTypeEnum.folder]: t('dataset.deleteFolderTips'),
     [DatasetTypeEnum.dataset]: t('core.dataset.Delete Confirm'),
-    [DatasetTypeEnum.websiteDataset]: t('core.dataset.Delete Confirm')
+    [DatasetTypeEnum.websiteDataset]: t('core.dataset.Delete Confirm'),
+    [DatasetTypeEnum.externalFile]: t('core.dataset.Delete Confirm')
   });
 
   const { openConfirm, ConfirmModal } = useConfirm({
     type: 'delete'
   });
-  const { myDatasets, loadDatasets, setDatasets, updateDataset } = useDatasetStore();
   const { onOpenModal: onOpenTitleModal, EditModal: EditTitleModal } = useEditTitle({
     title: t('Rename')
   });
@@ -78,7 +79,7 @@ const Kb = () => {
       return id;
     },
     onSuccess(id: string) {
-      setDatasets(myDatasets.filter((item) => item._id !== id));
+      setMyDatasets(myDatasets.filter((item) => item._id !== id));
     },
     onSettled() {
       setLoading(false);
@@ -112,7 +113,7 @@ const Kb = () => {
   const { data, refetch, isFetching } = useQuery(
     ['loadDataset', parentId],
     () => {
-      return Promise.all([loadDatasets(parentId), getDatasetPaths(parentId)]);
+      return Promise.all([loadMyDatasets(parentId), getDatasetPaths(parentId)]);
     },
     {
       onError(err) {
@@ -139,7 +140,10 @@ const Kb = () => {
   );
 
   return (
-    <PageContainer isLoading={isFetching} insertProps={{ px: [5, '48px'] }}>
+    <PageContainer
+      isLoading={myDatasets.length === 0 && isFetching}
+      insertProps={{ px: [5, '48px'] }}
+    >
       <Flex pt={[4, '30px']} alignItems={'center'} justifyContent={'space-between'}>
         {/* url path */}
         <ParentPaths
@@ -317,7 +321,10 @@ const Kb = () => {
                           defaultVal: dataset.name,
                           onSuccess: (val) => {
                             if (val === dataset.name || !val) return;
-                            updateDataset({ id: dataset._id, name: val });
+                            putDatasetById({
+                              id: dataset._id,
+                              name: val
+                            });
                           }
                         })
                     },
@@ -351,7 +358,7 @@ const Kb = () => {
                               </Flex>
                             ),
                             onClick: () => {
-                              updateDataset({
+                              putDatasetById({
                                 id: dataset._id,
                                 permission: PermissionTypeEnum.public
                               });
@@ -371,7 +378,7 @@ const Kb = () => {
                               </Flex>
                             ),
                             onClick: () => {
-                              updateDataset({
+                              putDatasetById({
                                 id: dataset._id,
                                 permission: PermissionTypeEnum.private
                               });
@@ -476,9 +483,9 @@ const Kb = () => {
 export async function getServerSideProps(content: any) {
   return {
     props: {
-      ...(await serviceSideProps(content))
+      ...(await serviceSideProps(content, ['dataset']))
     }
   };
 }
 
-export default Kb;
+export default Dataset;