From 38f0cc016ff39a05340057964565623213ab6105 Mon Sep 17 00:00:00 2001 From: balibabu Date: Mon, 29 Apr 2024 15:45:19 +0800 Subject: [PATCH] fix: #567 use modal to upload files in the knowledge base (#601) ### What problem does this PR solve? fix: #567 use modal to upload files in the knowledge base ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue) --- .../components/file-upload-modal/index.less | 8 ++ .../components/file-upload-modal/index.tsx | 135 ++++++++++++++++++ web/src/hooks/documentHooks.ts | 4 +- web/src/hooks/llmHooks.ts | 14 +- .../knowledge-file/document-toolbar.tsx | 11 +- .../components/knowledge-file/hooks.ts | 43 +++++- .../components/knowledge-file/index.tsx | 16 +++ .../components/knowledge-file/model.ts | 8 +- web/src/pages/file-manager/model.ts | 2 - .../user-setting/setting-model/index.less | 4 + .../user-setting/setting-model/index.tsx | 6 +- web/src/utils/commonUtil.ts | 27 ++++ web/src/utils/documentUtils.ts | 4 + 13 files changed, 262 insertions(+), 20 deletions(-) create mode 100644 web/src/components/file-upload-modal/index.less create mode 100644 web/src/components/file-upload-modal/index.tsx diff --git a/web/src/components/file-upload-modal/index.less b/web/src/components/file-upload-modal/index.less new file mode 100644 index 000000000..a840e8aed --- /dev/null +++ b/web/src/components/file-upload-modal/index.less @@ -0,0 +1,8 @@ +.uploader { + :global { + .ant-upload-list { + max-height: 40vh; + overflow-y: auto; + } + } +} diff --git a/web/src/components/file-upload-modal/index.tsx b/web/src/components/file-upload-modal/index.tsx new file mode 100644 index 000000000..68e6655a4 --- /dev/null +++ b/web/src/components/file-upload-modal/index.tsx @@ -0,0 +1,135 @@ +import { useTranslate } from '@/hooks/commonHooks'; +import { IModalProps } from '@/interfaces/common'; +import { InboxOutlined } from '@ant-design/icons'; +import { + Flex, + Modal, + Segmented, + Tabs, + TabsProps, + Upload, + UploadFile, + UploadProps, +} from 'antd'; +import { Dispatch, SetStateAction, useState } from 'react'; + +import styles from './index.less'; + +const { Dragger } = Upload; + +const FileUpload = ({ + directory, + fileList, + setFileList, +}: { + directory: boolean; + fileList: UploadFile[]; + setFileList: Dispatch>; +}) => { + const { t } = useTranslate('fileManager'); + const props: UploadProps = { + multiple: true, + onRemove: (file) => { + const index = fileList.indexOf(file); + const newFileList = fileList.slice(); + newFileList.splice(index, 1); + setFileList(newFileList); + }, + beforeUpload: (file) => { + setFileList((pre) => { + return [...pre, file]; + }); + + return false; + }, + directory, + fileList, + }; + + return ( + +

+ +

+

{t('uploadTitle')}

+

{t('uploadDescription')}

+ + ); +}; + +const FileUploadModal = ({ + visible, + hideModal, + loading, + onOk: onFileUploadOk, +}: IModalProps) => { + const { t } = useTranslate('fileManager'); + const [value, setValue] = useState('local'); + const [fileList, setFileList] = useState([]); + const [directoryFileList, setDirectoryFileList] = useState([]); + + const onOk = async () => { + const ret = await onFileUploadOk?.([...fileList, ...directoryFileList]); + if (ret !== undefined && ret === 0) { + setFileList([]); + setDirectoryFileList([]); + } + return ret; + }; + + const items: TabsProps['items'] = [ + { + key: '1', + label: t('file'), + children: ( + + ), + }, + { + key: '2', + label: t('directory'), + children: ( + + ), + }, + ]; + + return ( + <> + + + + {value === 'local' ? ( + + ) : ( + t('comingSoon', { keyPrefix: 'common' }) + )} + + + + ); +}; + +export default FileUploadModal; diff --git a/web/src/hooks/documentHooks.ts b/web/src/hooks/documentHooks.ts index 0d753ded1..9f78a0044 100644 --- a/web/src/hooks/documentHooks.ts +++ b/web/src/hooks/documentHooks.ts @@ -184,12 +184,12 @@ export const useUploadDocument = () => { const { knowledgeId } = useGetKnowledgeSearchParams(); const uploadDocument = useCallback( - (file: UploadFile) => { + (fileList: UploadFile[]) => { try { return dispatch({ type: 'kFModel/upload_document', payload: { - file, + fileList, kb_id: knowledgeId, }, }); diff --git a/web/src/hooks/llmHooks.ts b/web/src/hooks/llmHooks.ts index 9068ebd43..54f950995 100644 --- a/web/src/hooks/llmHooks.ts +++ b/web/src/hooks/llmHooks.ts @@ -5,6 +5,7 @@ import { IThirdOAIModelCollection, } from '@/interfaces/database/llm'; import { IAddLlmRequestBody } from '@/interfaces/request/llm'; +import { sortLLmFactoryListBySpecifiedOrder } from '@/utils/commonUtil'; import { useCallback, useEffect, useMemo } from 'react'; import { useDispatch, useSelector } from 'umi'; @@ -110,13 +111,12 @@ export const useFetchLlmFactoryListOnMount = () => { const factoryList = useSelectLlmFactoryList(); const myLlmList = useSelectMyLlmList(); - const list = useMemo( - () => - factoryList.filter((x) => - Object.keys(myLlmList).every((y) => y !== x.name), - ), - [factoryList, myLlmList], - ); + const list = useMemo(() => { + const currentList = factoryList.filter((x) => + Object.keys(myLlmList).every((y) => y !== x.name), + ); + return sortLLmFactoryListBySpecifiedOrder(currentList); + }, [factoryList, myLlmList]); const fetchLlmFactoryList = useCallback(() => { dispatch({ diff --git a/web/src/pages/add-knowledge/components/knowledge-file/document-toolbar.tsx b/web/src/pages/add-knowledge/components/knowledge-file/document-toolbar.tsx index e0564c2c0..b3e0e1aa9 100644 --- a/web/src/pages/add-knowledge/components/knowledge-file/document-toolbar.tsx +++ b/web/src/pages/add-knowledge/components/knowledge-file/document-toolbar.tsx @@ -30,9 +30,14 @@ import styles from './index.less'; interface IProps { selectedRowKeys: string[]; showCreateModal(): void; + showDocumentUploadModal(): void; } -const DocumentToolbar = ({ selectedRowKeys, showCreateModal }: IProps) => { +const DocumentToolbar = ({ + selectedRowKeys, + showCreateModal, + showDocumentUploadModal, +}: IProps) => { const { t } = useTranslate('knowledgeDetails'); const { fetchDocumentList } = useFetchDocumentListOnMount(); const { setPagination, searchString } = useGetPagination(fetchDocumentList); @@ -48,7 +53,7 @@ const DocumentToolbar = ({ selectedRowKeys, showCreateModal }: IProps) => { return [ { key: '1', - onClick: linkToUploadPage, + onClick: showDocumentUploadModal, label: (