Dataset folder manager (#274)

* feat: retry send

* perf: qa default value

* feat: dataset folder

* feat: kb folder delete and path

* fix: ts

* perf: script load

* feat: fileCard and dataCard

* feat: search file

* feat: max token

* feat: select dataset

* fix: preview chunk

* perf: source update

* export data limit file_id

* docs

* fix: export limit

client/src/pages/kb/list/index.tsx

@@ -1,77 +1,184 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import {
   Box,
-  Card,
   Flex,
   Grid,
   useTheme,
-  Button,
+  useDisclosure,
+  Card,
   IconButton,
-  useDisclosure
+  MenuButton,
+  Image
 } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
-import { useUserStore } from '@/store/user';
+import { useDatasetStore } from '@/store/dataset';
 import PageContainer from '@/components/PageContainer';
 import { useConfirm } from '@/hooks/useConfirm';
 import { AddIcon } from '@chakra-ui/icons';
 import { useQuery } from '@tanstack/react-query';
 import { useToast } from '@/hooks/useToast';
-import { delKbById } from '@/api/plugins/kb';
+import { delKbById, getKbPaths } from '@/api/plugins/kb';
+import { useTranslation } from 'react-i18next';
 import Avatar from '@/components/Avatar';
 import MyIcon from '@/components/Icon';
-import Tag from '@/components/Tag';
 import { serviceSideProps } from '@/utils/i18n';
 import dynamic from 'next/dynamic';
+import { FolderAvatarSrc, KbTypeEnum } from '@/constants/kb';
+import Tag from '@/components/Tag';
+import MyMenu from '@/components/MyMenu';
+import { useRequest } from '@/hooks/useRequest';
+import { useGlobalStore } from '@/store/global';
 
 const CreateModal = dynamic(() => import('./component/CreateModal'), { ssr: false });
+const EditFolderModal = dynamic(() => import('./component/EditFolderModal'), { ssr: false });
 
 const Kb = () => {
+  const { t } = useTranslation();
   const theme = useTheme();
   const router = useRouter();
+  const { parentId } = router.query as { parentId: string };
   const { toast } = useToast();
-  const { openConfirm, ConfirmModal } = useConfirm({
-    title: '删除提示',
-    content: '确认删除该知识库？知识库相关的文件、记录将永久删除，无法恢复！'
+  const { setLoading } = useGlobalStore();
+
+  const DeleteTipsMap = useRef({
+    [KbTypeEnum.folder]: t('kb.deleteFolderTips'),
+    [KbTypeEnum.dataset]: t('kb.deleteDatasetTips')
   });
-  const { myKbList, loadKbList, setKbList } = useUserStore();
+
+  const { openConfirm, ConfirmModal } = useConfirm({
+    title: t('common.Delete Warning'),
+    content: ''
+  });
+  const { myKbList, loadKbList, setKbList } = useDatasetStore();
 
   const {
     isOpen: isOpenCreateModal,
     onOpen: onOpenCreateModal,
     onClose: onCloseCreateModal
   } = useDisclosure();
-
-  const { refetch } = useQuery(['loadKbList'], () => loadKbList());
+  const [editFolderData, setEditFolderData] = useState<{
+    id?: string;
+    name?: string;
+  }>();
 
   /* 点击删除 */
-  const onclickDelKb = useCallback(
-    async (id: string) => {
-      try {
-        delKbById(id);
-        toast({
-          title: '删除成功',
-          status: 'success'
-        });
-        setKbList(myKbList.filter((item) => item._id !== id));
-      } catch (err: any) {
-        toast({
-          title: err?.message || '删除失败',
-          status: 'error'
-        });
-      }
+  const { mutate: onclickDelKb } = useRequest({
+    mutationFn: async (id: string) => {
+      setLoading(true);
+      await delKbById(id);
+      return id;
     },
-    [toast, setKbList, myKbList]
+    onSuccess(id: string) {
+      setKbList(myKbList.filter((item) => item._id !== id));
+    },
+    onSettled() {
+      setLoading(false);
+    },
+    successToast: t('common.Delete Success'),
+    errorToast: t('kb.Delete Dataset Error')
+  });
+
+  const { data, refetch } = useQuery(['loadKbList', parentId], () => {
+    return Promise.all([loadKbList(parentId), getKbPaths(parentId)]);
+  });
+
+  const paths = useMemo(
+    () => [
+      {
+        parentId: '',
+        parentName: t('kb.My Dataset')
+      },
+      ...(data?.[1] || [])
+    ],
+    [data, t]
   );
 
   return (
     <PageContainer>
       <Flex pt={3} px={5} alignItems={'center'}>
-        <Box flex={1} className="textlg" letterSpacing={1} fontSize={'24px'} fontWeight={'bold'}>
-          我的知识库
-        </Box>
-        <Button leftIcon={<AddIcon />} variant={'base'} onClick={onOpenCreateModal}>
-          新建
-        </Button>
+        {/* url path */}
+        {!!parentId ? (
+          <Flex flex={1}>
+            {paths.map((item, i) => (
+              <Flex key={item.parentId} mr={2} alignItems={'center'}>
+                <Box
+                  fontSize={'lg'}
+                  px={2}
+                  py={1}
+                  borderRadius={'md'}
+                  {...(i === paths.length - 1
+                    ? {
+                        cursor: 'default'
+                      }
+                    : {
+                        cursor: 'pointer',
+                        _hover: {
+                          bg: 'myGray.100'
+                        },
+                        onClick: () => {
+                          router.push({
+                            query: {
+                              parentId: item.parentId
+                            }
+                          });
+                        }
+                      })}
+                >
+                  {item.parentName}
+                </Box>
+                {i !== paths.length - 1 && <MyIcon name={'rightArrowLight'} color={'myGray.500'} />}
+              </Flex>
+            ))}
+          </Flex>
+        ) : (
+          <Box flex={1} className="textlg" letterSpacing={1} fontSize={'24px'} fontWeight={'bold'}>
+            我的知识库
+          </Box>
+        )}
+
+        <MyMenu
+          offset={[-30, 10]}
+          width={120}
+          Button={
+            <MenuButton
+              _hover={{
+                color: 'myBlue.600'
+              }}
+            >
+              <Flex
+                alignItems={'center'}
+                border={theme.borders.base}
+                px={5}
+                py={2}
+                borderRadius={'md'}
+                cursor={'pointer'}
+              >
+                <AddIcon mr={2} />
+                <Box>{t('Create New')}</Box>
+              </Flex>
+            </MenuButton>
+          }
+          menuList={[
+            {
+              child: (
+                <Flex>
+                  <Image src={FolderAvatarSrc} alt={''} w={'20px'} mr={1} />
+                  {t('Folder')}
+                </Flex>
+              ),
+              onClick: () => setEditFolderData({})
+            },
+            {
+              child: (
+                <Flex>
+                  <Image src={'/imgs/module/db.png'} alt={''} w={'20px'} mr={1} />
+                  {t('Dataset')}
+                </Flex>
+              ),
+              onClick: onOpenCreateModal
+            }
+          ]}
+        />
       </Flex>
       <Grid
         p={5}
@@ -86,7 +193,7 @@ const Kb = () => {
             py={4}
             px={5}
             cursor={'pointer'}
-            h={'140px'}
+            h={'130px'}
             border={theme.borders.md}
             boxShadow={'none'}
             userSelect={'none'}
@@ -98,18 +205,28 @@ const Kb = () => {
                 display: 'block'
               }
             }}
-            onClick={() =>
-              router.push({
-                pathname: '/kb/detail',
-                query: {
-                  kbId: kb._id
-                }
-              })
-            }
+            onClick={() => {
+              if (kb.type === KbTypeEnum.folder) {
+                router.push({
+                  pathname: '/kb/list',
+                  query: {
+                    parentId: kb._id
+                  }
+                });
+              } else if (kb.type === KbTypeEnum.dataset) {
+                router.push({
+                  pathname: '/kb/detail',
+                  query: {
+                    kbId: kb._id
+                  }
+                });
+              }
+            }}
           >
             <Flex alignItems={'center'} h={'38px'}>
               <Avatar src={kb.avatar} borderRadius={'lg'} w={'28px'} />
               <Box ml={3}>{kb.name}</Box>
+
               <IconButton
                 className="delete"
                 position={'absolute'}
@@ -126,7 +243,11 @@ const Kb = () => {
                 }}
                 onClick={(e) => {
                   e.stopPropagation();
-                  openConfirm(() => onclickDelKb(kb._id))();
+                  openConfirm(
+                    () => onclickDelKb(kb._id),
+                    undefined,
+                    DeleteTipsMap.current[kb.type]
+                  )();
                 }}
               />
             </Flex>
@@ -140,8 +261,14 @@ const Kb = () => {
               </Flex>
             </Box>
             <Flex justifyContent={'flex-end'} alignItems={'center'} fontSize={'sm'}>
-              <MyIcon mr={1} name="kbTest" w={'12px'} />
-              <Box color={'myGray.500'}>{kb.vectorModel.name}</Box>
+              {kb.type === KbTypeEnum.folder ? (
+                <Box color={'myGray.500'}>{t('Folder')}</Box>
+              ) : (
+                <>
+                  <MyIcon mr={1} name="kbTest" w={'12px'} />
+                  <Box color={'myGray.500'}>{kb.vectorModel.name}</Box>
+                </>
+              )}
             </Flex>
           </Card>
         ))}
@@ -155,7 +282,15 @@ const Kb = () => {
         </Flex>
       )}
       <ConfirmModal />
-      {isOpenCreateModal && <CreateModal onClose={onCloseCreateModal} />}
+      {isOpenCreateModal && <CreateModal onClose={onCloseCreateModal} parentId={parentId} />}
+      {!!editFolderData && (
+        <EditFolderModal
+          onClose={() => setEditFolderData(undefined)}
+          onSuccess={refetch}
+          parentId={parentId}
+          {...editFolderData}
+        />
+      )}
     </PageContainer>
   );
 };