Change embedding (#1463)

* rebuild embedding queue

* dataset menu

* feat: rebuild data api

* feat: ui change embedding model

* dataset ui

* feat: rebuild index ui

* rename collection

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

@@ -16,25 +16,47 @@ import PermissionRadio from '@/components/support/permission/Radio';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { useRequest } from '@fastgpt/web/hooks/useRequest';
 import { MongoImageTypeEnum } from '@fastgpt/global/common/file/image/constants';
-import MySelect from '@fastgpt/web/components/common/MySelect';
 import AIModelSelector from '@/components/Select/AIModelSelector';
+import { postRebuildEmbedding } from '@/web/core/dataset/api';
+import { useI18n } from '@/web/context/I18n';
+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';
 
 const Info = ({ datasetId }: { datasetId: string }) => {
   const { t } = useTranslation();
-  const { datasetDetail, loadDatasets, updateDataset } = useDatasetStore();
-  const { getValues, setValue, register, handleSubmit } = useForm<DatasetItemType>({
+  const { datasetT } = useI18n();
+  const { datasetDetail, loadDatasetDetail, loadDatasets, updateDataset } = useDatasetStore();
+  const rebuildingCount = useContextSelector(DatasetPageContext, (v) => v.rebuildingCount);
+  const trainingCount = useContextSelector(DatasetPageContext, (v) => v.trainingCount);
+  const refetchDatasetTraining = useContextSelector(
+    DatasetPageContext,
+    (v) => v.refetchDatasetTraining
+  );
+
+  const { setValue, register, handleSubmit, watch } = useForm<DatasetItemType>({
     defaultValues: datasetDetail
   });
+
+  const avatar = watch('avatar');
+  const vectorModel = watch('vectorModel');
+  const agentModel = watch('agentModel');
+  const permission = watch('permission');
+
   const { datasetModelList, vectorModelList } = useSystemStore();
 
   const router = useRouter();
 
-  const [refresh, setRefresh] = useState(false);
-
-  const { openConfirm, ConfirmModal } = useConfirm({
+  const { openConfirm: onOpenConfirmDel, ConfirmModal: ConfirmDelModal } = useConfirm({
     content: t('core.dataset.Delete Confirm'),
     type: 'delete'
   });
+  const { openConfirm: onOpenConfirmRebuild, ConfirmModal: ConfirmRebuildModal } = useConfirm({
+    title: t('common.confirm.Common Tip'),
+    content: datasetT('Confirm to rebuild embedding tip'),
+    type: 'delete'
+  });
 
   const { File, onOpen: onOpenSelectFile } = useSelectFile({
     fileType: '.jpg,.png',
@@ -81,13 +103,27 @@ const Info = ({ datasetId }: { datasetId: string }) => {
     onSuccess(src: string | null) {
       if (src) {
         setValue('avatar', src);
-        setRefresh((state) => !state);
       }
     },
     errorToast: t('common.avatar.Select Failed')
   });
 
-  const btnLoading = useMemo(() => isDeleting || isSaving, [isDeleting, isSaving]);
+  const { mutate: onRebuilding, isLoading: isRebuilding } = useRequest({
+    mutationFn: (vectorModel: VectorModelItemType) => {
+      return postRebuildEmbedding({
+        datasetId,
+        vectorModel: vectorModel.model
+      });
+    },
+    onSuccess() {
+      refetchDatasetTraining();
+      loadDatasetDetail(datasetId, true);
+    },
+    successToast: datasetT('Rebuild embedding start tip'),
+    errorToast: t('common.Update Failed')
+  });
+
+  const btnLoading = isSelecting || isDeleting || isSaving || isRebuilding;
 
   return (
     <Box py={5} px={[5, 10]}>
@@ -97,6 +133,62 @@ const Info = ({ datasetId }: { datasetId: string }) => {
         </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}>
+          {t('core.ai.model.Vector Model')}
+        </Box>
+        <Box flex={[1, '0 0 300px']}>
+          <AIModelSelector
+            w={'100%'}
+            value={vectorModel.model}
+            disableTip={
+              rebuildingCount > 0 || trainingCount > 0
+                ? datasetT('The knowledge base has indexes that are being trained or being rebuilt')
+                : undefined
+            }
+            list={vectorModelList.map((item) => ({
+              label: item.name,
+              value: item.model
+            }))}
+            onchange={(e) => {
+              const vectorModel = vectorModelList.find((item) => item.model === e);
+              if (!vectorModel) return;
+              onOpenConfirmRebuild(() => {
+                setValue('vectorModel', vectorModel);
+                onRebuilding(vectorModel);
+              })();
+            }}
+          />
+        </Box>
+      </Flex>
+      <Flex mt={8} w={'100%'} alignItems={'center'}>
+        <Box flex={['0 0 90px', '0 0 160px']} w={0}>
+          {t('core.Max Token')}
+        </Box>
+        <Box flex={[1, '0 0 300px']}>{vectorModel.maxToken}</Box>
+      </Flex>
+      <Flex mt={6} alignItems={'center'} flexWrap={'wrap'}>
+        <Box flex={['0 0 90px', '0 0 160px']} w={0}>
+          {t('core.ai.model.Dataset Agent Model')}
+        </Box>
+        <Box flex={[1, '0 0 300px']}>
+          <AIModelSelector
+            w={'100%'}
+            value={agentModel.model}
+            list={datasetModelList.map((item) => ({
+              label: item.name,
+              value: item.model
+            }))}
+            onchange={(e) => {
+              const agentModel = datasetModelList.find((item) => item.model === e);
+              if (!agentModel) return;
+              setValue('agentModel', agentModel);
+            }}
+          />
+        </Box>
+      </Flex>
+
+      <MyDivider my={4} h={'2px'} maxW={'500px'} />
 
       <Flex mt={5} w={'100%'} alignItems={'center'}>
         <Box flex={['0 0 90px', '0 0 160px']} w={0}>
@@ -106,7 +198,7 @@ const Info = ({ datasetId }: { datasetId: string }) => {
           <MyTooltip label={t('common.avatar.Select Avatar')}>
             <Avatar
               m={'auto'}
-              src={getValues('avatar')}
+              src={avatar}
               w={['32px', '40px']}
               h={['32px', '40px']}
               cursor={'pointer'}
@@ -121,40 +213,6 @@ const Info = ({ datasetId }: { datasetId: string }) => {
         </Box>
         <Input flex={[1, '0 0 300px']} maxLength={30} {...register('name')} />
       </Flex>
-      <Flex mt={8} w={'100%'} alignItems={'center'}>
-        <Box flex={['0 0 90px', '0 0 160px']} w={0}>
-          {t('core.ai.model.Vector Model')}
-        </Box>
-        <Box flex={[1, '0 0 300px']}>{getValues('vectorModel').name}</Box>
-      </Flex>
-      <Flex mt={8} w={'100%'} alignItems={'center'}>
-        <Box flex={['0 0 90px', '0 0 160px']} w={0}>
-          {t('core.Max Token')}
-        </Box>
-        <Box flex={[1, '0 0 300px']}>{getValues('vectorModel').maxToken}</Box>
-      </Flex>
-      <Flex mt={6} alignItems={'center'}>
-        <Box flex={['0 0 90px', '0 0 160px']} w={0}>
-          {t('core.ai.model.Dataset Agent Model')}
-        </Box>
-        <Box flex={[1, '0 0 300px']}>
-          <AIModelSelector
-            w={'100%'}
-            value={getValues('agentModel').model}
-            list={datasetModelList.map((item) => ({
-              label: item.name,
-              value: item.model
-            }))}
-            onchange={(e) => {
-              const agentModel = datasetModelList.find((item) => item.model === e);
-              if (!agentModel) return;
-              setValue('agentModel', agentModel);
-              setRefresh((state) => !state);
-            }}
-          />
-        </Box>
-      </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')} />
@@ -166,10 +224,9 @@ const Info = ({ datasetId }: { datasetId: string }) => {
           </Box>
           <Box>
             <PermissionRadio
-              value={getValues('permission')}
+              value={permission}
               onChange={(e) => {
                 setValue('permission', e);
-                setRefresh(!refresh);
               }}
             />
           </Box>
@@ -193,12 +250,14 @@ const Info = ({ datasetId }: { datasetId: string }) => {
             aria-label={''}
             variant={'whiteDanger'}
             size={'smSquare'}
-            onClick={openConfirm(onclickDelete)}
+            onClick={onOpenConfirmDel(onclickDelete)}
           />
         )}
       </Flex>
+
       <File onSelect={onSelectFile} />
-      <ConfirmModal />
+      <ConfirmDelModal />
+      <ConfirmRebuildModal countDown={10} />
     </Box>
   );
 };

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

@@ -0,0 +1,215 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'next-i18next';
+import { useDatasetStore } from '@/web/core/dataset/store/dataset';
+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 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';
+import { DatasetPageContext } from '@/web/core/dataset/context/datasetPageContext';
+import { useI18n } from '@/web/context/I18n';
+
+export enum TabEnum {
+  dataCard = 'dataCard',
+  collectionCard = 'collectionCard',
+  test = 'test',
+  info = 'info',
+  import = 'import'
+}
+
+const Slider = ({ currentTab }: { currentTab: TabEnum }) => {
+  const theme = useTheme();
+  const { t } = useTranslation();
+  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 tabList = [
+    {
+      label: t('core.dataset.Collection'),
+      id: TabEnum.collectionCard,
+      icon: 'common/overviewLight'
+    },
+    { label: t('core.dataset.test.Search Test'), id: TabEnum.test, icon: 'kbTest' },
+    ...(userInfo?.team.canWrite && datasetDetail.isOwner
+      ? [{ label: t('common.Config'), id: TabEnum.info, icon: 'common/settingLight' }]
+      : [])
+  ];
+
+  const setCurrentTab = useCallback(
+    (tab: TabEnum) => {
+      router.replace({
+        query: {
+          ...query,
+          currentTab: tab
+        }
+      });
+    },
+    [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 ? (
+        <Flex
+          flexDirection={'column'}
+          py={4}
+          h={'100%'}
+          flex={'0 0 200px'}
+          borderRight={theme.borders.base}
+        >
+          <Box px={4} borderBottom={'1px'} borderColor={'myGray.200'} pb={4} mb={4}>
+            <Flex mb={4} alignItems={'center'}>
+              <Avatar src={datasetDetail.avatar} w={'34px'} borderRadius={'md'} />
+              <Box ml={2}>
+                <Box fontWeight={'bold'}>{datasetDetail.name}</Box>
+              </Box>
+            </Flex>
+            {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>
+          <SideTabs
+            px={4}
+            flex={1}
+            mx={'auto'}
+            w={'100%'}
+            list={tabList}
+            activeId={currentTab}
+            onChange={(e: any) => {
+              setCurrentTab(e);
+            }}
+          />
+          <Box px={4}>
+            {rebuildingCount > 0 && (
+              <Box mb={3}>
+                <Box fontSize={'sm'}>
+                  {datasetT('Rebuilding index count', { count: rebuildingCount })}
+                </Box>
+              </Box>
+            )}
+            <Box mb={3}>
+              <Box fontSize={'sm'}>
+                {t('core.dataset.training.Agent queue')}({agentTrainingMap.tip})
+              </Box>
+              <Progress
+                value={100}
+                size={'xs'}
+                colorScheme={agentTrainingMap.colorSchema}
+                borderRadius={'10px'}
+                isAnimated
+                hasStripe
+              />
+            </Box>
+            <Box mb={3}>
+              <Box fontSize={'sm'}>
+                {t('core.dataset.training.Vector queue')}({vectorTrainingMap.tip})
+              </Box>
+              <Progress
+                value={100}
+                size={'xs'}
+                colorScheme={vectorTrainingMap.colorSchema}
+                borderRadius={'10px'}
+                isAnimated
+                hasStripe
+              />
+            </Box>
+          </Box>
+
+          <Flex
+            alignItems={'center'}
+            cursor={'pointer'}
+            py={2}
+            px={3}
+            borderRadius={'md'}
+            _hover={{ bg: 'myGray.100' }}
+            onClick={() => router.replace('/dataset/list')}
+          >
+            <IconButton
+              mr={3}
+              icon={<MyIcon name={'common/backFill'} w={'18px'} color={'primary.500'} />}
+              bg={'white'}
+              boxShadow={'1px 1px 9px rgba(0,0,0,0.15)'}
+              size={'smSquare'}
+              borderRadius={'50%'}
+              aria-label={''}
+            />
+            {t('core.dataset.All Dataset')}
+          </Flex>
+        </Flex>
+      ) : (
+        <Box mb={3}>
+          <Tabs
+            m={'auto'}
+            w={'260px'}
+            size={isPc ? 'md' : 'sm'}
+            list={tabList.map((item) => ({
+              id: item.id,
+              label: item.label
+            }))}
+            activeId={currentTab}
+            onChange={(e: any) => setCurrentTab(e)}
+          />
+        </Box>
+      )}
+
+      <ConfirmSyncModal />
+    </>
+  );
+};
+
+export default Slider;

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

@@ -1,33 +1,22 @@
 import React, { useCallback, useMemo } from 'react';
 import { useRouter } from 'next/router';
-import { Box, Flex, IconButton, useTheme, Progress } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import { useQuery } from '@tanstack/react-query';
 import { getErrText } from '@fastgpt/global/common/error/utils';
-import { useSystemStore } from '@/web/common/system/useSystemStore';
-import Tabs from '@/components/Tabs';
 import dynamic from 'next/dynamic';
-import MyIcon from '@fastgpt/web/components/common/Icon';
-import SideTabs from '@/components/SideTabs';
 import PageContainer from '@/components/PageContainer';
-import Avatar from '@/components/Avatar';
 import { serviceSideProps } from '@/web/common/utils/i18n';
 import { useTranslation } from 'next-i18next';
-import { getTrainingQueueLen } from '@/web/core/dataset/api';
-import MyTooltip from '@/components/MyTooltip';
+
 import CollectionCard from './components/CollectionCard';
 import { useDatasetStore } from '@/web/core/dataset/store/dataset';
-import { useUserStore } from '@/web/support/user/useUserStore';
-import {
-  DatasetStatusEnum,
-  DatasetTypeEnum,
-  DatasetTypeMap
-} from '@fastgpt/global/core/dataset/constants';
+
 import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
-import { useRequest } from '@fastgpt/web/hooks/useRequest';
-import DatasetTypeTag from '@/components/core/dataset/DatasetTypeTag';
 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';
 
 const DataCard = dynamic(() => import('./components/DataCard'));
 const Test = dynamic(() => import('./components/Test'));
@@ -42,48 +31,16 @@ export enum TabEnum {
   import = 'import'
 }
 
-const Detail = ({ datasetId, currentTab }: { datasetId: string; currentTab: `${TabEnum}` }) => {
-  const theme = useTheme();
+const Detail = ({ datasetId, currentTab }: { datasetId: string; currentTab: TabEnum }) => {
   const { t } = useTranslation();
   const { toast } = useToast();
   const router = useRouter();
-  const { isPc } = useSystemStore();
-  const { datasetDetail, loadDatasetDetail, startWebsiteSync } = useDatasetStore();
-  const { userInfo } = useUserStore();
-
-  const tabList = [
-    {
-      label: t('core.dataset.Collection'),
-      id: TabEnum.collectionCard,
-      icon: 'common/overviewLight'
-    },
-    { label: t('core.dataset.test.Search Test'), id: TabEnum.test, icon: 'kbTest' },
-    ...(userInfo?.team.canWrite && datasetDetail.isOwner
-      ? [{ label: t('common.Config'), id: TabEnum.info, icon: 'common/settingLight' }]
-      : [])
-  ];
+  const { datasetDetail, loadDatasetDetail } = useDatasetStore();
 
   const { ConfirmModal: ConfirmSyncModal, openConfirm: openConfirmSync } = useConfirm({
     type: 'common'
   });
 
-  const { mutate: onUpdateDatasetWebsiteConfig, isLoading: isUpdating } = useRequest({
-    mutationFn: () => startWebsiteSync(),
-    errorToast: t('common.Update Failed')
-  });
-
-  const setCurrentTab = useCallback(
-    (tab: `${TabEnum}`) => {
-      router.replace({
-        query: {
-          datasetId,
-          currentTab: tab
-        }
-      });
-    },
-    [datasetId, router]
-  );
-
   useQuery([datasetId], () => loadDatasetDetail(datasetId), {
     onError(err: any) {
       router.replace(`/dataset/list`);
@@ -94,197 +51,33 @@ const Detail = ({ datasetId, currentTab }: { datasetId: string; currentTab: `${T
     }
   });
 
-  const { data: { vectorTrainingCount = 0, agentTrainingCount = 0 } = {} } = useQuery(
-    ['getTrainingQueueLen'],
-    () =>
-      getTrainingQueueLen({
-        vectorModel: datasetDetail.vectorModel.model,
-        agentModel: datasetDetail.agentModel.model
-      }),
-    {
-      refetchInterval: 10000
-    }
-  );
-  const { vectorTrainingMap, agentTrainingMap } = useMemo(() => {
-    const vectorTrainingMap = (() => {
-      if (vectorTrainingCount < 1000)
-        return {
-          colorSchema: 'green',
-          tip: t('core.dataset.training.Leisure')
-        };
-      if (vectorTrainingCount < 10000)
-        return {
-          colorSchema: 'yellow',
-          tip: t('core.dataset.training.Waiting')
-        };
-      return {
-        colorSchema: 'red',
-        tip: t('core.dataset.training.Full')
-      };
-    })();
-    const agentTrainingMap = (() => {
-      if (agentTrainingCount < 100)
-        return {
-          colorSchema: 'green',
-          tip: t('core.dataset.training.Leisure')
-        };
-      if (agentTrainingCount < 1000)
-        return {
-          colorSchema: 'yellow',
-          tip: t('core.dataset.training.Waiting')
-        };
-      return {
-        colorSchema: 'red',
-        tip: t('core.dataset.training.Full')
-      };
-    })();
-    return {
-      vectorTrainingMap,
-      agentTrainingMap
-    };
-  }, [agentTrainingCount, t, vectorTrainingCount]);
-
   return (
     <>
       <Head>
         <title>{datasetDetail?.name}</title>
       </Head>
-      <PageContainer>
-        <MyBox
-          isLoading={isUpdating}
-          display={'flex'}
-          flexDirection={['column', 'row']}
-          h={'100%'}
-          pt={[4, 0]}
-        >
-          {isPc ? (
-            <Flex
-              flexDirection={'column'}
-              py={4}
-              h={'100%'}
-              flex={'0 0 200px'}
-              borderRight={theme.borders.base}
-            >
-              <Box px={4} borderBottom={'1px'} borderColor={'myGray.200'} pb={4} mb={4}>
-                <Flex mb={4} alignItems={'center'}>
-                  <Avatar src={datasetDetail.avatar} w={'34px'} borderRadius={'md'} />
-                  <Box ml={2}>
-                    <Box fontWeight={'bold'}>{datasetDetail.name}</Box>
-                  </Box>
-                </Flex>
-                {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>
-              <SideTabs
-                px={4}
-                flex={1}
-                mx={'auto'}
-                w={'100%'}
-                list={tabList}
-                activeId={currentTab}
-                onChange={(e: any) => {
-                  setCurrentTab(e);
-                }}
-              />
-              <Box px={4}>
-                <Box mb={3}>
-                  <Box fontSize={'sm'}>
-                    {t('core.dataset.training.Agent queue')}({agentTrainingMap.tip})
-                  </Box>
-                  <Progress
-                    value={100}
-                    size={'xs'}
-                    colorScheme={agentTrainingMap.colorSchema}
-                    borderRadius={'10px'}
-                    isAnimated
-                    hasStripe
-                  />
-                </Box>
-                <Box mb={3}>
-                  <Box fontSize={'sm'}>
-                    {t('core.dataset.training.Vector queue')}({vectorTrainingMap.tip})
-                  </Box>
-                  <Progress
-                    value={100}
-                    size={'xs'}
-                    colorScheme={vectorTrainingMap.colorSchema}
-                    borderRadius={'10px'}
-                    isAnimated
-                    hasStripe
-                  />
-                </Box>
-              </Box>
+      <DatasetPageContextProvider
+        value={{
+          datasetId
+        }}
+      >
+        <PageContainer>
+          <MyBox display={'flex'} flexDirection={['column', 'row']} h={'100%'} pt={[4, 0]}>
+            <Slider currentTab={currentTab} />
 
-              <Flex
-                alignItems={'center'}
-                cursor={'pointer'}
-                py={2}
-                px={3}
-                borderRadius={'md'}
-                _hover={{ bg: 'myGray.100' }}
-                onClick={() => router.replace('/dataset/list')}
-              >
-                <IconButton
-                  mr={3}
-                  icon={<MyIcon name={'common/backFill'} w={'18px'} color={'primary.500'} />}
-                  bg={'white'}
-                  boxShadow={'1px 1px 9px rgba(0,0,0,0.15)'}
-                  size={'smSquare'}
-                  borderRadius={'50%'}
-                  aria-label={''}
-                />
-                {t('core.dataset.All Dataset')}
-              </Flex>
-            </Flex>
-          ) : (
-            <Box mb={3}>
-              <Tabs
-                m={'auto'}
-                w={'260px'}
-                size={isPc ? 'md' : 'sm'}
-                list={tabList.map((item) => ({
-                  id: item.id,
-                  label: item.label
-                }))}
-                activeId={currentTab}
-                onChange={(e: any) => setCurrentTab(e)}
-              />
-            </Box>
-          )}
+            {!!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>
 
-          {!!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>
       <ConfirmSyncModal />
     </>
   );
@@ -295,7 +88,7 @@ export async function getServerSideProps(context: any) {
   const datasetId = context?.query?.datasetId;
 
   return {
-    props: { currentTab, datasetId, ...(await serviceSideProps(context, ['file'])) }
+    props: { currentTab, datasetId, ...(await serviceSideProps(context, ['dataset', 'file'])) }
   };
 }
 

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

@@ -305,6 +305,42 @@ const Kb = () => {
                     </Box>
                   }
                   menuList={[
+                    {
+                      label: (
+                        <Flex alignItems={'center'}>
+                          <MyIcon name={'edit'} w={'14px'} mr={2} />
+                          {t('Rename')}
+                        </Flex>
+                      ),
+                      onClick: () =>
+                        onOpenTitleModal({
+                          defaultVal: dataset.name,
+                          onSuccess: (val) => {
+                            if (val === dataset.name || !val) return;
+                            updateDataset({ id: dataset._id, name: val });
+                          }
+                        })
+                    },
+                    {
+                      label: (
+                        <Flex alignItems={'center'}>
+                          <MyIcon name={'common/file/move'} w={'14px'} mr={2} />
+                          {t('Move')}
+                        </Flex>
+                      ),
+                      onClick: () => setMoveDataId(dataset._id)
+                    },
+                    {
+                      label: (
+                        <Flex alignItems={'center'}>
+                          <MyIcon name={'export'} w={'14px'} mr={2} />
+                          {t('Export')}
+                        </Flex>
+                      ),
+                      onClick: () => {
+                        exportDataset(dataset);
+                      }
+                    },
                     ...(dataset.permission === PermissionTypeEnum.private
                       ? [
                           {
@@ -342,42 +378,6 @@ const Kb = () => {
                             }
                           }
                         ]),
-                    {
-                      label: (
-                        <Flex alignItems={'center'}>
-                          <MyIcon name={'edit'} w={'14px'} mr={2} />
-                          {t('Rename')}
-                        </Flex>
-                      ),
-                      onClick: () =>
-                        onOpenTitleModal({
-                          defaultVal: dataset.name,
-                          onSuccess: (val) => {
-                            if (val === dataset.name || !val) return;
-                            updateDataset({ id: dataset._id, name: val });
-                          }
-                        })
-                    },
-                    {
-                      label: (
-                        <Flex alignItems={'center'}>
-                          <MyIcon name={'common/file/move'} w={'14px'} mr={2} />
-                          {t('Move')}
-                        </Flex>
-                      ),
-                      onClick: () => setMoveDataId(dataset._id)
-                    },
-                    {
-                      label: (
-                        <Flex alignItems={'center'}>
-                          <MyIcon name={'export'} w={'14px'} mr={2} />
-                          {t('Export')}
-                        </Flex>
-                      ),
-                      onClick: () => {
-                        exportDataset(dataset);
-                      }
-                    },
                     {
                       label: (
                         <Flex alignItems={'center'}>