new framwork

client/src/pages/kb/components/DataCard.tsx

@@ -0,0 +1,313 @@
+import React, { useCallback, useState, useRef, useEffect } from 'react';
+import {
+  Box,
+  TableContainer,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  IconButton,
+  Flex,
+  Button,
+  useDisclosure,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  Input,
+  Tooltip
+} from '@chakra-ui/react';
+import { QuestionOutlineIcon } from '@chakra-ui/icons';
+import type { BoxProps } from '@chakra-ui/react';
+import type { KbDataItemType } from '@/types/plugin';
+import { usePagination } from '@/hooks/usePagination';
+import {
+  getKbDataList,
+  getExportDataList,
+  delOneKbDataByDataId,
+  getTrainingData
+} from '@/api/plugins/kb';
+import { DeleteIcon, RepeatIcon, EditIcon } from '@chakra-ui/icons';
+import { useLoading } from '@/hooks/useLoading';
+import { fileDownload } from '@/utils/file';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { useToast } from '@/hooks/useToast';
+import Papa from 'papaparse';
+import dynamic from 'next/dynamic';
+import InputModal, { FormData as InputDataType } from './InputDataModal';
+
+const SelectFileModal = dynamic(() => import('./SelectFileModal'));
+const SelectCsvModal = dynamic(() => import('./SelectCsvModal'));
+
+const DataCard = ({ kbId }: { kbId: string }) => {
+  const lastSearch = useRef('');
+  const tdStyles = useRef<BoxProps>({
+    fontSize: 'xs',
+    minW: '150px',
+    maxW: '500px',
+    maxH: '250px',
+    whiteSpace: 'pre-wrap',
+    overflowY: 'auto'
+  });
+  const [searchText, setSearchText] = useState('');
+  const { Loading, setIsLoading } = useLoading();
+  const { toast } = useToast();
+
+  const {
+    data: kbDataList,
+    isLoading,
+    Pagination,
+    total,
+    getData,
+    pageNum
+  } = usePagination<KbDataItemType>({
+    api: getKbDataList,
+    pageSize: 10,
+    params: {
+      kbId,
+      searchText
+    },
+    defaultRequest: false
+  });
+
+  const [editInputData, setEditInputData] = useState<InputDataType>();
+
+  const {
+    isOpen: isOpenSelectFileModal,
+    onOpen: onOpenSelectFileModal,
+    onClose: onCloseSelectFileModal
+  } = useDisclosure();
+  const {
+    isOpen: isOpenSelectCsvModal,
+    onOpen: onOpenSelectCsvModal,
+    onClose: onCloseSelectCsvModal
+  } = useDisclosure();
+
+  const { data: { qaListLen = 0, vectorListLen = 0 } = {}, refetch } = useQuery(
+    ['getModelSplitDataList', kbId],
+    () => getTrainingData({ kbId, init: false }),
+    {
+      onError(err) {
+        console.log(err);
+      }
+    }
+  );
+
+  const refetchData = useCallback(
+    (num = pageNum) => {
+      getData(num);
+      refetch();
+      return null;
+    },
+    [getData, pageNum, refetch]
+  );
+
+  // get al data and export csv
+  const { mutate: onclickExport, isLoading: isLoadingExport = false } = useMutation({
+    mutationFn: () => getExportDataList(kbId),
+    onSuccess(res) {
+      try {
+        setIsLoading(true);
+        const text = Papa.unparse({
+          fields: ['question', 'answer'],
+          data: res
+        });
+        fileDownload({
+          text,
+          type: 'text/csv',
+          filename: 'data.csv'
+        });
+        toast({
+          title: '导出成功，下次导出需要半小时后',
+          status: 'success'
+        });
+      } catch (error) {
+        error;
+      }
+      setIsLoading(false);
+    },
+    onError(err: any) {
+      toast({
+        title: typeof err === 'string' ? err : err?.message || '导出异常',
+        status: 'error'
+      });
+      console.log(err);
+    }
+  });
+
+  // interval get data
+  useQuery(['refetchData'], () => refetchData(1), {
+    refetchInterval: 5000,
+    enabled: qaListLen > 0 || vectorListLen > 0
+  });
+  useQuery(['getKbData', kbId], () => {
+    setSearchText('');
+    getData(1);
+    return null;
+  });
+
+  return (
+    <Box position={'relative'}>
+      <Flex>
+        <Box fontWeight={'bold'} fontSize={'lg'} flex={1} mr={2}>
+          知识库数据: {total}组
+        </Box>
+        <IconButton
+          icon={<RepeatIcon />}
+          aria-label={'refresh'}
+          variant={'outline'}
+          mr={[2, 4]}
+          size={'sm'}
+          onClick={() => {
+            refetchData(pageNum);
+            getTrainingData({ kbId, init: true });
+          }}
+        />
+        <Button
+          variant={'outline'}
+          mr={2}
+          size={'sm'}
+          isLoading={isLoadingExport}
+          title={'半小时仅能导出1次'}
+          onClick={() => onclickExport()}
+        >
+          导出csv
+        </Button>
+        <Menu autoSelect={false}>
+          <MenuButton as={Button} size={'sm'}>
+            导入
+          </MenuButton>
+          <MenuList>
+            <MenuItem
+              onClick={() =>
+                setEditInputData({
+                  a: '',
+                  q: ''
+                })
+              }
+            >
+              手动输入
+            </MenuItem>
+            <MenuItem onClick={onOpenSelectFileModal}>文本/文件拆分</MenuItem>
+            <MenuItem onClick={onOpenSelectCsvModal}>csv 问答对导入</MenuItem>
+          </MenuList>
+        </Menu>
+      </Flex>
+      <Flex mt={4}>
+        {(qaListLen > 0 || vectorListLen > 0) && (
+          <Box fontSize={'xs'}>
+            {qaListLen > 0 ? `${qaListLen}条数据正在拆分，` : ''}
+            {vectorListLen > 0 ? `${vectorListLen}条数据正在生成索引，` : ''}
+            请耐心等待...
+          </Box>
+        )}
+        <Box flex={1} />
+        <Input
+          maxW={['90%', '300px']}
+          size={'sm'}
+          value={searchText}
+          placeholder="搜索匹配知识，补充知识和来源，回车确认"
+          onChange={(e) => setSearchText(e.target.value)}
+          onBlur={() => {
+            if (searchText === lastSearch.current) return;
+            getData(1);
+            lastSearch.current = searchText;
+          }}
+          onKeyDown={(e) => {
+            if (searchText === lastSearch.current) return;
+            if (e.key === 'Enter') {
+              getData(1);
+              lastSearch.current = searchText;
+            }
+          }}
+        />
+      </Flex>
+      <TableContainer mt={4} minH={'200px'}>
+        <Table>
+          <Thead>
+            <Tr>
+              <Th>
+                匹配的知识点
+                <Tooltip
+                  label={
+                    '对话时，会将用户的问题和知识库的 "匹配知识点" 进行比较，找到最相似的前 n 条记录，将这些记录的 "匹配知识点"+"补充知识点" 作为 chatgpt 的系统提示词。'
+                  }
+                >
+                  <QuestionOutlineIcon ml={1} />
+                </Tooltip>
+              </Th>
+              <Th>补充知识</Th>
+              <Th>来源</Th>
+              <Th>操作</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {kbDataList.map((item) => (
+              <Tr key={item.id} fontSize={'sm'}>
+                <Td>
+                  <Box {...tdStyles.current}>{item.q}</Box>
+                </Td>
+                <Td>
+                  <Box {...tdStyles.current}>{item.a || '-'}</Box>
+                </Td>
+                <Td maxW={'15%'} whiteSpace={'pre-wrap'} userSelect={'all'}>
+                  {item.source?.trim() || '-'}
+                </Td>
+                <Td>
+                  <IconButton
+                    mr={5}
+                    icon={<EditIcon />}
+                    variant={'outline'}
+                    aria-label={'delete'}
+                    size={'sm'}
+                    onClick={() =>
+                      setEditInputData({
+                        dataId: item.id,
+                        q: item.q,
+                        a: item.a
+                      })
+                    }
+                  />
+                  <IconButton
+                    icon={<DeleteIcon />}
+                    variant={'outline'}
+                    colorScheme={'gray'}
+                    aria-label={'delete'}
+                    size={'sm'}
+                    onClick={async () => {
+                      await delOneKbDataByDataId(item.id);
+                      refetchData(pageNum);
+                    }}
+                  />
+                </Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </TableContainer>
+      <Flex mt={2} justifyContent={'flex-end'}>
+        <Pagination />
+      </Flex>
+
+      <Loading loading={isLoading} fixed={false} />
+      {editInputData !== undefined && (
+        <InputModal
+          kbId={kbId}
+          defaultValues={editInputData}
+          onClose={() => setEditInputData(undefined)}
+          onSuccess={refetchData}
+        />
+      )}
+      {isOpenSelectFileModal && (
+        <SelectFileModal kbId={kbId} onClose={onCloseSelectFileModal} onSuccess={refetchData} />
+      )}
+      {isOpenSelectCsvModal && (
+        <SelectCsvModal kbId={kbId} onClose={onCloseSelectCsvModal} onSuccess={refetchData} />
+      )}
+    </Box>
+  );
+};
+
+export default DataCard;

client/src/pages/kb/components/Detail.tsx

@@ -0,0 +1,243 @@
+import React, { useCallback, useState, useRef } from 'react';
+import { useRouter } from 'next/router';
+import {
+  Card,
+  Box,
+  Flex,
+  Button,
+  Tooltip,
+  FormControl,
+  Input,
+  Tag,
+  IconButton
+} from '@chakra-ui/react';
+import { QuestionOutlineIcon, DeleteIcon } from '@chakra-ui/icons';
+import { useToast } from '@/hooks/useToast';
+import { useForm } from 'react-hook-form';
+import { useQuery } from '@tanstack/react-query';
+import { useUserStore } from '@/store/user';
+import { delKbById, putKbById } from '@/api/plugins/kb';
+import { KbItemType } from '@/types/plugin';
+import { useSelectFile } from '@/hooks/useSelectFile';
+import { useConfirm } from '@/hooks/useConfirm';
+import { compressImg } from '@/utils/file';
+import DataCard from './DataCard';
+import { getErrText } from '@/utils/tools';
+import Avatar from '@/components/Avatar';
+
+const Detail = ({ kbId }: { kbId: string }) => {
+  const { toast } = useToast();
+  const router = useRouter();
+  const InputRef = useRef<HTMLInputElement>(null);
+  const { setLastKbId, kbDetail, getKbDetail, loadKbList, myKbList } = useUserStore();
+  const [btnLoading, setBtnLoading] = useState(false);
+  const [refresh, setRefresh] = useState(false);
+
+  const { getValues, formState, setValue, reset, register, handleSubmit } = useForm<KbItemType>({
+    defaultValues: kbDetail
+  });
+  const { openConfirm, ConfirmChild } = useConfirm({
+    content: '确认删除该知识库？数据将无法恢复，请确认！'
+  });
+
+  const { File, onOpen: onOpenSelectFile } = useSelectFile({
+    fileType: '.jpg,.png',
+    multiple: false
+  });
+
+  useQuery([kbId, myKbList], () => getKbDetail(kbId), {
+    onSuccess(res) {
+      kbId && setLastKbId(kbId);
+      if (res) {
+        reset(res);
+        if (InputRef.current) {
+          InputRef.current.value = res.tags;
+        }
+      }
+    },
+    onError(err: any) {
+      loadKbList(true);
+      setLastKbId('');
+      router.replace(`/kb`);
+      toast({
+        title: getErrText(err, '获取知识库异常'),
+        status: 'error'
+      });
+    }
+  });
+
+  /* 点击删除 */
+  const onclickDelKb = useCallback(async () => {
+    setBtnLoading(true);
+    try {
+      await delKbById(kbId);
+      toast({
+        title: '删除成功',
+        status: 'success'
+      });
+      router.replace(`/kb?kbId=${myKbList.find((item) => item._id !== kbId)?._id || ''}`);
+      await loadKbList(true);
+    } catch (err: any) {
+      toast({
+        title: err?.message || '删除失败',
+        status: 'error'
+      });
+    }
+    setBtnLoading(false);
+  }, [setBtnLoading, kbId, toast, router, myKbList, loadKbList]);
+
+  const saveSubmitSuccess = useCallback(
+    async (data: KbItemType) => {
+      setBtnLoading(true);
+      try {
+        await putKbById({
+          id: kbId,
+          ...data
+        });
+        await getKbDetail(kbId, true);
+        toast({
+          title: '更新成功',
+          status: 'success'
+        });
+        loadKbList(true);
+      } catch (err: any) {
+        toast({
+          title: err?.message || '更新失败',
+          status: 'error'
+        });
+      }
+      setBtnLoading(false);
+    },
+    [getKbDetail, kbId, loadKbList, toast]
+  );
+  const saveSubmitError = useCallback(() => {
+    // deep search message
+    const deepSearch = (obj: any): string => {
+      if (!obj) return '提交表单错误';
+      if (!!obj.message) {
+        return obj.message;
+      }
+      return deepSearch(Object.values(obj)[0]);
+    };
+    toast({
+      title: deepSearch(formState.errors),
+      status: 'error',
+      duration: 4000,
+      isClosable: true
+    });
+  }, [formState.errors, toast]);
+
+  const onSelectFile = useCallback(
+    async (e: File[]) => {
+      const file = e[0];
+      if (!file) return;
+      try {
+        const base64 = await compressImg({
+          file,
+          maxW: 100,
+          maxH: 100
+        });
+        setValue('avatar', base64);
+        setRefresh((state) => !state);
+      } catch (err: any) {
+        toast({
+          title: typeof err === 'string' ? err : '头像选择异常',
+          status: 'warning'
+        });
+      }
+    },
+    [setRefresh, setValue, toast]
+  );
+
+  return (
+    <Box h={'100%'} p={5} overflow={'overlay'} position={'relative'}>
+      <Card p={6}>
+        <Flex>
+          <Box fontWeight={'bold'} fontSize={'2xl'} flex={1}>
+            知识库信息
+          </Box>
+          {kbDetail._id && (
+            <>
+              <Button
+                isLoading={btnLoading}
+                mr={3}
+                onClick={handleSubmit(saveSubmitSuccess, saveSubmitError)}
+              >
+                保存
+              </Button>
+              <IconButton
+                isLoading={btnLoading}
+                icon={<DeleteIcon />}
+                aria-label={''}
+                variant={'solid'}
+                colorScheme={'red'}
+                onClick={openConfirm(onclickDelKb)}
+              />
+            </>
+          )}
+        </Flex>
+        <Flex mt={5} alignItems={'center'}>
+          <Box flex={'0 0 60px'} w={0}>
+            头像
+          </Box>
+          <Avatar
+            src={getValues('avatar')}
+            w={['28px', '36px']}
+            h={['28px', '36px']}
+            cursor={'pointer'}
+            title={'点击切换头像'}
+            onClick={onOpenSelectFile}
+          />
+        </Flex>
+        <FormControl mt={5}>
+          <Flex alignItems={'center'} maxW={'350px'}>
+            <Box flex={'0 0 60px'} w={0}>
+              名称
+            </Box>
+            <Input
+              {...register('name', {
+                required: '知识库名称不能为空'
+              })}
+            />
+          </Flex>
+        </FormControl>
+        <Box>
+          <Flex mt={5} alignItems={'center'} maxW={'350px'} flexWrap={'wrap'}>
+            <Box flex={'0 0 60px'} w={0}>
+              标签
+              <Tooltip label={'仅用于记忆，用空格隔开多个标签'}>
+                <QuestionOutlineIcon ml={1} />
+              </Tooltip>
+            </Box>
+            <Input
+              flex={1}
+              ref={InputRef}
+              placeholder={'标签,使用空格分割。'}
+              onChange={(e) => {
+                setValue('tags', e.target.value);
+                setRefresh(!refresh);
+              }}
+            />
+            <Box pl={'60px'} mt={2} w="100%">
+              {getValues('tags')
+                .split(' ')
+                .filter((item) => item)
+                .map((item, i) => (
+                  <Tag mr={2} mb={2} key={i} variant={'outline'} colorScheme={'blue'}>
+                    {item}
+                  </Tag>
+                ))}
+            </Box>
+          </Flex>
+        </Box>
+      </Card>
+      <Card p={6} mt={5}>
+        <DataCard kbId={kbId} />
+      </Card>
+      <File onSelect={onSelectFile} />
+      <ConfirmChild />
+    </Box>
+  );
+};
+
+export default Detail;

client/src/pages/kb/components/InputDataModal.tsx

@@ -0,0 +1,189 @@
+import React, { useState, useCallback } from 'react';
+import {
+  Box,
+  Flex,
+  Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  Textarea
+} from '@chakra-ui/react';
+import { useForm } from 'react-hook-form';
+import { postKbDataFromList, putKbDataById } from '@/api/plugins/kb';
+import { useToast } from '@/hooks/useToast';
+import { TrainingModeEnum } from '@/constants/plugin';
+import { getErrText } from '@/utils/tools';
+
+export type FormData = { dataId?: string; a: string; q: string };
+
+const InputDataModal = ({
+  onClose,
+  onSuccess,
+  kbId,
+  defaultValues = {
+    a: '',
+    q: ''
+  }
+}: {
+  onClose: () => void;
+  onSuccess: () => void;
+  kbId: string;
+  defaultValues?: FormData;
+}) => {
+  const [loading, setLoading] = useState(false);
+  const { toast } = useToast();
+
+  const { register, handleSubmit, reset } = useForm<FormData>({
+    defaultValues
+  });
+
+  /**
+   * 确认导入新数据
+   */
+  const sureImportData = useCallback(
+    async (e: FormData) => {
+      if (e.a.length + e.q.length >= 3000) {
+        toast({
+          title: '总长度超长了',
+          status: 'warning'
+        });
+        return;
+      }
+      setLoading(true);
+
+      try {
+        const { insertLen } = await postKbDataFromList({
+          kbId,
+          mode: TrainingModeEnum.index,
+          data: [
+            {
+              a: e.a,
+              q: e.q,
+              source: '手动录入'
+            }
+          ]
+        });
+
+        if (insertLen === 0) {
+          toast({
+            title: '已存在完全一致的数据',
+            status: 'warning'
+          });
+        } else {
+          toast({
+            title: '导入数据成功,需要一段时间训练',
+            status: 'success'
+          });
+          reset({
+            a: '',
+            q: ''
+          });
+        }
+
+        onSuccess();
+      } catch (err: any) {
+        toast({
+          title: getErrText(err, '出现了点意外~'),
+          status: 'error'
+        });
+      }
+      setLoading(false);
+    },
+    [kbId, onSuccess, reset, toast]
+  );
+
+  const updateData = useCallback(
+    async (e: FormData) => {
+      if (!e.dataId) return;
+
+      if (e.a !== defaultValues.a || e.q !== defaultValues.q) {
+        setLoading(true);
+        try {
+          await putKbDataById({
+            dataId: e.dataId,
+            a: e.a,
+            q: e.q === defaultValues.q ? '' : e.q
+          });
+          onSuccess();
+        } catch (error) {}
+        setLoading(false);
+      }
+
+      toast({
+        title: '修改数据成功',
+        status: 'success'
+      });
+      onClose();
+    },
+    [defaultValues, onClose, onSuccess, toast]
+  );
+
+  return (
+    <Modal isOpen={true} onClose={onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent
+        m={0}
+        display={'flex'}
+        flexDirection={'column'}
+        h={'90vh'}
+        maxW={'90vw'}
+        position={'relative'}
+      >
+        <ModalHeader>{defaultValues.dataId ? '变更数据' : '手动导入数据'}</ModalHeader>
+        <ModalCloseButton />
+
+        <Box
+          display={'flex'}
+          flexDirection={['column', 'row']}
+          flex={'1 0 0'}
+          h={['100%', 0]}
+          overflow={'overlay'}
+          px={6}
+          pb={2}
+        >
+          <Box flex={1} mr={[0, 4]} mb={[4, 0]} h={['50%', '100%']}>
+            <Box h={'30px'}>{'匹配的知识点'}</Box>
+            <Textarea
+              placeholder={'匹配的知识点。这部分内容会被搜索，请把控内容的质量。总和最多 3000 字。'}
+              maxLength={3000}
+              resize={'none'}
+              h={'calc(100% - 30px)'}
+              {...register(`q`, {
+                required: true
+              })}
+            />
+          </Box>
+          <Box flex={1} h={['50%', '100%']}>
+            <Box h={'30px'}>补充知识</Box>
+            <Textarea
+              placeholder={
+                '补充知识。这部分内容不会被搜索，但会作为"匹配的知识点"的内容补充，你可以讲一些细节的内容填写在这里。总和最多 3000 字。'
+              }
+              maxLength={3000}
+              resize={'none'}
+              h={'calc(100% - 30px)'}
+              {...register('a')}
+            />
+          </Box>
+        </Box>
+
+        <Flex px={6} pt={2} pb={4}>
+          <Box flex={1}></Box>
+          <Button variant={'outline'} mr={3} onClick={onClose}>
+            取消
+          </Button>
+          <Button
+            isLoading={loading}
+            onClick={handleSubmit(defaultValues.dataId ? updateData : sureImportData)}
+          >
+            {defaultValues.dataId ? '确认变更' : '确认导入'}
+          </Button>
+        </Flex>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default InputDataModal;

client/src/pages/kb/components/KbList.tsx

@@ -0,0 +1,150 @@
+import React, { useCallback, useState, useMemo } from 'react';
+import { Box, Flex, useTheme, Input, IconButton, Tooltip, Tag } from '@chakra-ui/react';
+import { AddIcon } from '@chakra-ui/icons';
+import { useRouter } from 'next/router';
+import { postCreateKb } from '@/api/plugins/kb';
+import { useLoading } from '@/hooks/useLoading';
+import { useToast } from '@/hooks/useToast';
+import { useQuery } from '@tanstack/react-query';
+import { useUserStore } from '@/store/user';
+import MyIcon from '@/components/Icon';
+import Avatar from '@/components/Avatar';
+
+const KbList = ({ kbId }: { kbId: string }) => {
+  const theme = useTheme();
+  const router = useRouter();
+  const { toast } = useToast();
+  const { Loading, setIsLoading } = useLoading();
+  const { myKbList, loadKbList } = useUserStore();
+  const [searchText, setSearchText] = useState('');
+
+  const kbs = useMemo(
+    () => myKbList.filter((item) => new RegExp(searchText, 'ig').test(item.name + item.tags)),
+    [myKbList, searchText]
+  );
+
+  /* 加载模型 */
+  const { isFetching } = useQuery(['loadModels'], () => loadKbList(false));
+
+  const handleCreateModel = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const name = `知识库${myKbList.length + 1}`;
+      const id = await postCreateKb({ name });
+      await loadKbList(true);
+      toast({
+        title: '创建成功',
+        status: 'success'
+      });
+      router.replace(`/kb?kbId=${id}`);
+    } catch (err: any) {
+      toast({
+        title: typeof err === 'string' ? err : err.message || '出现了意外',
+        status: 'error'
+      });
+    }
+    setIsLoading(false);
+  }, [loadKbList, myKbList.length, router, setIsLoading, toast]);
+
+  return (
+    <Flex
+      position={'relative'}
+      flexDirection={'column'}
+      w={'100%'}
+      h={'100%'}
+      bg={'white'}
+      borderRight={['', theme.borders.base]}
+    >
+      <Flex w={'90%'} my={5} mx={'auto'}>
+        <Flex flex={1} mr={2} position={'relative'} alignItems={'center'}>
+          <Input
+            h={'32px'}
+            placeholder="搜索知识库"
+            value={searchText}
+            onChange={(e) => setSearchText(e.target.value)}
+          />
+          {searchText && (
+            <MyIcon
+              zIndex={10}
+              position={'absolute'}
+              right={3}
+              name={'closeSolid'}
+              w={'16px'}
+              h={'16px'}
+              color={'myGray.500'}
+              cursor={'pointer'}
+              onClick={() => setSearchText('')}
+            />
+          )}
+        </Flex>
+        <Tooltip label={'新建一个知识库'}>
+          <IconButton
+            h={'32px'}
+            icon={<AddIcon />}
+            aria-label={''}
+            variant={'outline'}
+            onClick={handleCreateModel}
+          />
+        </Tooltip>
+      </Flex>
+      <Box flex={'1 0 0'} h={0} overflow={'overlay'}>
+        {kbs.map((item) => (
+          <Flex
+            key={item._id}
+            position={'relative'}
+            alignItems={['flex-start', 'center']}
+            p={3}
+            mb={[2, 0]}
+            cursor={'pointer'}
+            transition={'background-color .2s ease-in'}
+            borderLeft={['', '5px solid transparent']}
+            _hover={{
+              backgroundColor: ['', '#dee0e3']
+            }}
+            {...(kbId === item._id
+              ? {
+                  backgroundColor: '#eff0f1',
+                  borderLeftColor: 'myBlue.600 !important'
+                }
+              : {})}
+            onClick={() => {
+              if (item._id === kbId) return;
+              router.push(`/kb?kbId=${item._id}`);
+            }}
+          >
+            <Avatar src={item.avatar} w={'34px'} h={'34px'} />
+            <Box flex={'1 0 0'} w={0} ml={3}>
+              <Box className="textEllipsis" color={'myGray.1000'}>
+                {item.name}
+              </Box>
+              {/* tags */}
+              <Box className="textEllipsis" color={'myGray.400'} mt={1} fontSize={'sm'}>
+                {!item.tags ? (
+                  <>{item.tags || '你还没设置标签~'}</>
+                ) : (
+                  item.tags.split(' ').map((item, i) => (
+                    <Tag key={i} mr={2} mb={2} variant={'outline'} colorScheme={'blue'} size={'sm'}>
+                      {item}
+                    </Tag>
+                  ))
+                )}
+              </Box>
+            </Box>
+          </Flex>
+        ))}
+
+        {!isFetching && myKbList.length === 0 && (
+          <Flex h={'100%'} flexDirection={'column'} alignItems={'center'} pt={'30vh'}>
+            <MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
+            <Box mt={2} color={'myGray.500'}>
+              知识库空空如也~
+            </Box>
+          </Flex>
+        )}
+      </Box>
+      <Loading loading={isFetching} fixed={false} />
+    </Flex>
+  );
+};
+
+export default KbList;

client/src/pages/kb/components/SelectCsvModal.tsx

@@ -0,0 +1,180 @@
+import React, { useState, useCallback } from 'react';
+import {
+  Box,
+  Flex,
+  Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody
+} from '@chakra-ui/react';
+import { useToast } from '@/hooks/useToast';
+import { useSelectFile } from '@/hooks/useSelectFile';
+import { useConfirm } from '@/hooks/useConfirm';
+import { readCsvContent } from '@/utils/file';
+import { useMutation } from '@tanstack/react-query';
+import { postKbDataFromList } from '@/api/plugins/kb';
+import Markdown from '@/components/Markdown';
+import { useMarkdown } from '@/hooks/useMarkdown';
+import { fileDownload } from '@/utils/file';
+import { TrainingModeEnum } from '@/constants/plugin';
+import { getErrText } from '@/utils/tools';
+
+const csvTemplate = `question,answer\n"什么是 laf","laf 是一个云函数开发平台……"\n"什么是 sealos","Sealos 是以 kubernetes 为内核的云操作系统发行版,可以……"`;
+
+const SelectJsonModal = ({
+  onClose,
+  onSuccess,
+  kbId
+}: {
+  onClose: () => void;
+  onSuccess: () => void;
+  kbId: string;
+}) => {
+  const [selecting, setSelecting] = useState(false);
+  const { toast } = useToast();
+  const { File, onOpen } = useSelectFile({ fileType: '.csv', multiple: false });
+  const [fileData, setFileData] = useState<{ q: string; a: string }[]>([]);
+  const [fileName, setFileName] = useState('');
+  const [successData, setSuccessData] = useState(0);
+  const { openConfirm, ConfirmChild } = useConfirm({
+    content: '确认导入该数据集?'
+  });
+
+  const onSelectFile = useCallback(
+    async (e: File[]) => {
+      const file = e[0];
+      setSelecting(true);
+      setFileName(file.name);
+      try {
+        const { header, data } = await readCsvContent(file);
+        if (header[0] !== 'question' || header[1] !== 'answer') {
+          throw new Error('csv 文件格式有误');
+        }
+        setFileData(
+          data.map((item) => ({
+            q: item[0] || '',
+            a: item[1] || ''
+          }))
+        );
+      } catch (error: any) {
+        toast({
+          title: getErrText(error, 'csv 文件格式有误'),
+          status: 'error'
+        });
+      }
+      setSelecting(false);
+    },
+    [setSelecting, toast]
+  );
+
+  const { mutate, isLoading: uploading } = useMutation({
+    mutationFn: async () => {
+      if (!fileData || fileData.length === 0) return;
+
+      let success = 0;
+
+      // subsection import
+      const step = 100;
+      for (let i = 0; i < fileData.length; i += step) {
+        const { insertLen } = await postKbDataFromList({
+          kbId,
+          data: fileData.slice(i, i + step).map((item) => ({
+            ...item,
+            source: fileName
+          })),
+          mode: TrainingModeEnum.index
+        });
+        success += insertLen || 0;
+        setSuccessData((state) => state + step);
+      }
+
+      toast({
+        title: `导入数据成功，最终导入: ${success} 条数据。需要一段时间训练`,
+        status: 'success',
+        duration: 4000
+      });
+      onClose();
+      onSuccess();
+    },
+    onError(err) {
+      toast({
+        title: getErrText(err, '导入文件失败'),
+        status: 'error'
+      });
+    }
+  });
+
+  const { data: intro } = useMarkdown({ url: '/csvSelect.md' });
+
+  return (
+    <Modal isOpen={true} onClose={onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent maxW={'90vw'} position={'relative'} m={0} h={'90vh'}>
+        <ModalHeader>csv 问答对导入</ModalHeader>
+        <ModalCloseButton />
+
+        <ModalBody h={'100%'} display={['block', 'flex']} fontSize={'sm'} overflowY={'auto'}>
+          <Box flex={'2 0 0'} w={['100%', 0]} mr={[0, 4]} mb={[4, 0]}>
+            <Markdown source={intro} />
+            <Box
+              my={3}
+              cursor={'pointer'}
+              textDecoration={'underline'}
+              color={'myBlue.600'}
+              onClick={() =>
+                fileDownload({
+                  text: csvTemplate,
+                  type: 'text/csv',
+                  filename: 'template.csv'
+                })
+              }
+            >
+              点击下载csv模板
+            </Box>
+            <Box>
+              <Button isLoading={selecting} isDisabled={uploading} onClick={onOpen}>
+                选择 csv 问答对
+              </Button>
+              <Box mt={4}>
+                【{fileName}】一共有 {fileData.length} 组数据（下面最多展示100组）
+              </Box>
+            </Box>
+          </Box>
+          <Box flex={'3 0 0'} h={'100%'} overflow={'auto'} p={2} backgroundColor={'blackAlpha.50'}>
+            {fileData.slice(0, 100).map((item, index) => (
+              <Box key={index}>
+                <Box>
+                  Q{index + 1}. {item.q}
+                </Box>
+                <Box>
+                  A{index + 1}. {item.a}
+                </Box>
+              </Box>
+            ))}
+          </Box>
+        </ModalBody>
+
+        <Flex px={6} pt={2} pb={4}>
+          <Box flex={1}></Box>
+          <Button variant={'outline'} isLoading={uploading} mr={3} onClick={onClose}>
+            取消
+          </Button>
+          <Button isDisabled={fileData.length === 0 || uploading} onClick={openConfirm(mutate)}>
+            {uploading ? (
+              <Box>{Math.round((successData / fileData.length) * 100)}%</Box>
+            ) : (
+              '确认导入'
+            )}
+          </Button>
+        </Flex>
+      </ModalContent>
+      <ConfirmChild />
+      <File onSelect={onSelectFile} />
+    </Modal>
+  );
+};
+
+export default SelectJsonModal;

client/src/pages/kb/components/SelectFileModal.tsx

@@ -0,0 +1,316 @@
+import React, { useState, useCallback } from 'react';
+import {
+  Box,
+  Flex,
+  Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  Input,
+  Textarea
+} from '@chakra-ui/react';
+import { useToast } from '@/hooks/useToast';
+import { useSelectFile } from '@/hooks/useSelectFile';
+import { useConfirm } from '@/hooks/useConfirm';
+import { readTxtContent, readPdfContent, readDocContent } from '@/utils/file';
+import { useMutation } from '@tanstack/react-query';
+import { postKbDataFromList } from '@/api/plugins/kb';
+import Radio from '@/components/Radio';
+import { splitText_token } from '@/utils/file';
+import { TrainingModeEnum } from '@/constants/plugin';
+import { getErrText } from '@/utils/tools';
+import { ChatModelMap, OpenAiChatEnum, embeddingPrice } from '@/constants/model';
+import { formatPrice } from '@/utils/user';
+
+const fileExtension = '.txt,.doc,.docx,.pdf,.md';
+
+const modeMap = {
+  [TrainingModeEnum.qa]: {
+    maxLen: 2600,
+    slideLen: 700,
+    price: ChatModelMap[OpenAiChatEnum.GPT35].price,
+    isPrompt: true
+  },
+  [TrainingModeEnum.index]: {
+    maxLen: 700,
+    slideLen: 300,
+    price: embeddingPrice,
+    isPrompt: false
+  }
+};
+
+const SelectFileModal = ({
+  onClose,
+  onSuccess,
+  kbId
+}: {
+  onClose: () => void;
+  onSuccess: () => void;
+  kbId: string;
+}) => {
+  const [btnLoading, setBtnLoading] = useState(false);
+  const { toast } = useToast();
+  const [prompt, setPrompt] = useState('');
+  const { File, onOpen } = useSelectFile({
+    fileType: fileExtension,
+    multiple: true
+  });
+  const [mode, setMode] = useState<`${TrainingModeEnum}`>(TrainingModeEnum.index);
+  const [files, setFiles] = useState<{ filename: string; text: string }[]>([
+    { filename: '文本1', text: '' }
+  ]);
+  const [splitRes, setSplitRes] = useState<{
+    price: number;
+    chunks: { filename: string; value: string }[];
+    successChunks: number;
+  }>({
+    price: 0,
+    successChunks: 0,
+    chunks: []
+  });
+  const { openConfirm, ConfirmChild } = useConfirm({
+    content: `确认导入该文件，需要一定时间进行拆解，该任务无法终止！如果余额不足，未完成的任务会被暂停。一共 ${
+      splitRes.chunks.length
+    } 组。${splitRes.price ? `大约 ${splitRes.price} 元。` : ''}`
+  });
+
+  const onSelectFile = useCallback(
+    async (files: File[]) => {
+      setBtnLoading(true);
+      try {
+        let promise = Promise.resolve();
+        files.forEach((file) => {
+          promise = promise.then(async () => {
+            const extension = file?.name?.split('.')?.pop()?.toLowerCase();
+            const text = await (async () => {
+              switch (extension) {
+                case 'txt':
+                case 'md':
+                  return readTxtContent(file);
+                case 'pdf':
+                  return readPdfContent(file);
+                case 'doc':
+                case 'docx':
+                  return readDocContent(file);
+              }
+              return '';
+            })();
+
+            text && setFiles((state) => [{ filename: file.name, text }].concat(state));
+            return;
+          });
+        });
+        await promise;
+      } catch (error: any) {
+        console.log(error);
+        toast({
+          title: typeof error === 'string' ? error : '解析文件失败',
+          status: 'error'
+        });
+      }
+      setBtnLoading(false);
+    },
+    [toast]
+  );
+
+  const { mutate, isLoading: uploading } = useMutation({
+    mutationFn: async () => {
+      if (splitRes.chunks.length === 0) return;
+
+      // subsection import
+      let success = 0;
+      const step = 100;
+      for (let i = 0; i < splitRes.chunks.length; i += step) {
+        const { insertLen } = await postKbDataFromList({
+          kbId,
+          data: splitRes.chunks
+            .slice(i, i + step)
+            .map((item) => ({ q: item.value, a: '', source: item.filename })),
+          prompt: `下面是"${prompt || '一段长文本'}"`,
+          mode
+        });
+
+        success += insertLen;
+        setSplitRes((state) => ({
+          ...state,
+          successChunks: state.successChunks + step
+        }));
+      }
+
+      toast({
+        title: `去重后共导入 ${success} 条数据,需要一段拆解和训练.`,
+        status: 'success'
+      });
+      onClose();
+      onSuccess();
+    },
+    onError(err) {
+      toast({
+        title: getErrText(err, '导入文件失败'),
+        status: 'error'
+      });
+    }
+  });
+
+  const onclickImport = useCallback(async () => {
+    setBtnLoading(true);
+    try {
+      const splitRes = files
+        .map((item) =>
+          splitText_token({
+            text: item.text,
+            ...modeMap[mode]
+          })
+        )
+        .map((item, i) => ({
+          ...item,
+          filename: files[i].filename
+        }))
+        .filter((item) => item.tokens > 0);
+
+      let price = formatPrice(
+        splitRes.reduce((sum, item) => sum + item.tokens, 0) * modeMap[mode].price
+      );
+
+      if (mode === 'qa') {
+        price *= 1.2;
+      }
+
+      setSplitRes({
+        price,
+        chunks: splitRes
+          .map((item) =>
+            item.chunks.map((chunk) => ({
+              filename: item.filename,
+              value: chunk
+            }))
+          )
+          .flat(),
+        successChunks: 0
+      });
+
+      openConfirm(mutate)();
+    } catch (error) {
+      toast({
+        status: 'warning',
+        title: getErrText(error, '拆分文本异常')
+      });
+    }
+    setBtnLoading(false);
+  }, [files, mode, mutate, openConfirm, toast]);
+
+  return (
+    <Modal isOpen={true} onClose={onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent
+        display={'flex'}
+        maxW={'min(1000px, 90vw)'}
+        m={0}
+        position={'relative'}
+        h={'90vh'}
+      >
+        <ModalHeader>文件导入</ModalHeader>
+        <ModalCloseButton />
+
+        <ModalBody
+          flex={1}
+          h={0}
+          display={'flex'}
+          flexDirection={'column'}
+          p={0}
+          alignItems={'center'}
+          justifyContent={'center'}
+          fontSize={'sm'}
+        >
+          <Box mt={2} px={5} maxW={['100%', '70%']} textAlign={'justify'} color={'blackAlpha.600'}>
+            支持 {fileExtension} 文件。Gpt会自动对文本进行 QA 拆分，需要较长训练时间，拆分需要消耗
+            tokens，账号余额不足时，未拆分的数据会被删除。一个{files.length}
+            个文本。
+          </Box>
+          {/* 拆分模式 */}
+          <Flex w={'100%'} px={5} alignItems={'center'} mt={4}>
+            <Box flex={'0 0 70px'}>分段模式:</Box>
+            <Radio
+              ml={3}
+              list={[
+                { label: '直接分段', value: 'index' },
+                { label: 'QA拆分', value: 'qa' }
+              ]}
+              value={mode}
+              onChange={(e) => setMode(e as 'index' | 'qa')}
+            />
+          </Flex>
+          {/* 内容介绍 */}
+          {modeMap[mode].isPrompt && (
+            <Flex w={'100%'} px={5} alignItems={'center'} mt={4}>
+              <Box flex={'0 0 70px'} mr={2}>
+                下面是
+              </Box>
+              <Input
+                placeholder="提示词，例如: Laf的介绍/关于gpt4的论文/一段长文本"
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                size={'sm'}
+              />
+            </Flex>
+          )}
+          {/* 文本内容 */}
+          <Box flex={'1 0 0'} px={5} h={0} w={'100%'} overflowY={'auto'} mt={4}>
+            {files.slice(0, 100).map((item, i) => (
+              <Box key={i} mb={5}>
+                <Box mb={1}>{item.filename}</Box>
+                <Textarea
+                  placeholder="文件内容,空内容会自动忽略"
+                  maxLength={-1}
+                  rows={10}
+                  fontSize={'xs'}
+                  whiteSpace={'pre-wrap'}
+                  value={item.text}
+                  onChange={(e) => {
+                    setFiles([
+                      ...files.slice(0, i),
+                      { ...item, text: e.target.value },
+                      ...files.slice(i + 1)
+                    ]);
+                  }}
+                  onBlur={(e) => {
+                    if (files.length > 1 && e.target.value === '') {
+                      setFiles((state) => [...state.slice(0, i), ...state.slice(i + 1)]);
+                    }
+                  }}
+                />
+              </Box>
+            ))}
+          </Box>
+        </ModalBody>
+
+        <Flex px={6} pt={2} pb={4}>
+          <Button isLoading={btnLoading} isDisabled={uploading} onClick={onOpen}>
+            选择文件
+          </Button>
+          <Box flex={1}></Box>
+          <Button variant={'outline'} isLoading={uploading} mr={3} onClick={onClose}>
+            取消
+          </Button>
+          <Button
+            isDisabled={uploading || btnLoading || files[0]?.text === ''}
+            onClick={onclickImport}
+          >
+            {uploading ? (
+              <Box>{Math.round((splitRes.successChunks / splitRes.chunks.length) * 100)}%</Box>
+            ) : (
+              '确认导入'
+            )}
+          </Button>
+        </Flex>
+      </ModalContent>
+      <ConfirmChild />
+      <File onSelect={onSelectFile} />
+    </Modal>
+  );
+};
+
+export default SelectFileModal;

client/src/pages/kb/index.tsx

@@ -0,0 +1,43 @@
+import React, { useEffect } from 'react';
+import { Box, Flex } from '@chakra-ui/react';
+import { useGlobalStore } from '@/store/global';
+import { useRouter } from 'next/router';
+import { useUserStore } from '@/store/user';
+import SideBar from '@/components/SideBar';
+import KbList from './components/KbList';
+import KbDetail from './components/Detail';
+
+const Kb = ({ kbId }: { kbId: string }) => {
+  const router = useRouter();
+  const { isPc } = useGlobalStore();
+  const { lastKbId } = useUserStore();
+
+  // redirect
+  useEffect(() => {
+    if (isPc && !kbId && lastKbId) {
+      router.replace(`/kb?kbId=${lastKbId}`);
+    }
+  }, [isPc, kbId, lastKbId, router]);
+
+  return (
+    <Flex h={'100%'} position={'relative'} overflow={'hidden'}>
+      {/* 模型列表 */}
+      {(isPc || !kbId) && (
+        <SideBar w={['100%', '0 0 250px', '0 0 270px', '0 0 290px']}>
+          <KbList kbId={kbId} />
+        </SideBar>
+      )}
+      <Box flex={'1 0 0'} w={0} h={'100%'} position={'relative'}>
+        {kbId && <KbDetail kbId={kbId} />}
+      </Box>
+    </Flex>
+  );
+};
+
+export default Kb;
+
+Kb.getInitialProps = ({ query, req }: any) => {
+  return {
+    kbId: query?.kbId || ''
+  };
+};