From eb381963b3eb2ce81fc21c960a8ea8f0d4703d2f Mon Sep 17 00:00:00 2001 From: balibabu Date: Mon, 5 Feb 2024 19:26:03 +0800 Subject: [PATCH] feat: confirm before deleting knowledge base and add ChunkToolBar (#56) * feat: confirm before deleting knowledge base * feat: add ChunkToolBar --- web/src/components/modal-manager.tsx | 11 +- web/src/hooks/storeHooks.ts | 2 +- .../components/chunk-toolbar/index.tsx | 106 ++++++++++++++++++ .../components/knowledge-chunk/index.tsx | 4 +- .../knowledge-upload-file/index.tsx | 27 ++++- .../components/knowledge-file/index.tsx | 30 +++-- .../components/knowledge-file/model.ts | 12 +- .../parsing-status-cell/index.tsx | 3 +- .../components/knowledge-setting/index.tsx | 3 +- .../components/knowledge-setting/model.ts | 2 +- web/src/pages/knowledge/index.tsx | 56 +++++---- .../pages/knowledge/knowledge-card/index.tsx | 48 ++++---- .../knowledge-creating-modal/index.tsx | 81 +++++++++++++ web/src/services/kbService.ts | 5 + web/src/utils/api.ts | 1 + web/src/utils/{stroreUtil.ts => storeUtil.ts} | 0 16 files changed, 311 insertions(+), 80 deletions(-) create mode 100644 web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-toolbar/index.tsx create mode 100644 web/src/pages/knowledge/knowledge-creating-modal/index.tsx rename web/src/utils/{stroreUtil.ts => storeUtil.ts} (100%) diff --git a/web/src/components/modal-manager.tsx b/web/src/components/modal-manager.tsx index 14aec0718..a3d16d121 100644 --- a/web/src/components/modal-manager.tsx +++ b/web/src/components/modal-manager.tsx @@ -1,11 +1,12 @@ import { useState } from 'react'; +export interface IModalManagerChildrenProps { + showModal(): void; + hideModal(): void; + visible: boolean; +} interface IProps { - children: (props: { - showModal(): void; - hideModal(): void; - visible: boolean; - }) => React.ReactNode; + children: (props: IModalManagerChildrenProps) => React.ReactNode; } const ModalManager = ({ children }: IProps) => { diff --git a/web/src/hooks/storeHooks.ts b/web/src/hooks/storeHooks.ts index 3f69ce766..6670bea7b 100644 --- a/web/src/hooks/storeHooks.ts +++ b/web/src/hooks/storeHooks.ts @@ -1,4 +1,4 @@ -import { getOneNamespaceEffectsLoading } from '@/utils/stroreUtil'; +import { getOneNamespaceEffectsLoading } from '@/utils/storeUtil'; import { useSelector } from 'umi'; // Get the loading status of given effects under a certain namespace diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-toolbar/index.tsx b/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-toolbar/index.tsx new file mode 100644 index 000000000..d812c8e3e --- /dev/null +++ b/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-toolbar/index.tsx @@ -0,0 +1,106 @@ +import { ReactComponent as FilterIcon } from '@/assets/filter.svg'; +import { + ArrowLeftOutlined, + CheckCircleOutlined, + CloseCircleOutlined, + DeleteOutlined, + DownOutlined, + FilePdfOutlined, + PlusOutlined, + SearchOutlined, +} from '@ant-design/icons'; +import { Button, Checkbox, Flex, Menu, MenuProps, Popover, Space } from 'antd'; +import { useMemo } from 'react'; + +const ChunkToolBar = () => { + const items: MenuProps['items'] = useMemo(() => { + return [ + { + key: '1', + label: ( + <> + + Select All + + + ), + }, + { type: 'divider' }, + { + key: '2', + label: ( + + + Enabled Selected + + ), + }, + { + key: '3', + label: ( + + + Disabled Selected + + ), + }, + { type: 'divider' }, + { + key: '4', + label: ( + + + Delete Selected + + ), + }, + ]; + }, []); + + const content = ( + + ); + + return ( + + + + + xxx.pdf + + + {/* */} + + + + ), }, + { type: 'divider' }, { key: '2', label: (
), // disabled: true, }, ]; - }, [knowledgeBaseId]); + }, []); const chunkItems: MenuProps['items'] = [ { key: '1', @@ -191,7 +203,7 @@ const KnowledgeFile = () => {
), diff --git a/web/src/pages/add-knowledge/components/knowledge-file/model.ts b/web/src/pages/add-knowledge/components/knowledge-file/model.ts index bc24bda4b..875665b71 100644 --- a/web/src/pages/add-knowledge/components/knowledge-file/model.ts +++ b/web/src/pages/add-knowledge/components/knowledge-file/model.ts @@ -168,8 +168,8 @@ const model: DvaModel = { return retcode; }, *document_create({ payload = {} }, { call, put }) { - const { data, response } = yield call(kbService.document_create, payload); - const { retcode, data: res, retmsg } = data; + const { data } = yield call(kbService.document_create, payload); + const { retcode, data: res } = data; if (retcode === 0) { put({ type: 'kFModel/updateState', @@ -181,6 +181,14 @@ const model: DvaModel = { } return retcode; }, + *document_run({ payload = {} }, { call, put }) { + const { data } = yield call(kbService.document_run, payload); + const { retcode } = data; + if (retcode === 0) { + message.success('Run successfully ！'); + } + return retcode; + }, *document_change_parser({ payload = {} }, { call, put }) { const { data, response } = yield call( kbService.document_change_parser, diff --git a/web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.tsx b/web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.tsx index 55a450aad..7c2784ca2 100644 --- a/web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.tsx +++ b/web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.tsx @@ -55,7 +55,8 @@ export const ParsingStatusCell = ({ record }: IProps) => { {isRunning ? ( - `${runningStatus.label}${record.progress * 100}%` + {runningStatus.label} + {record.progress * 100}% ) : ( runningStatus.label diff --git a/web/src/pages/add-knowledge/components/knowledge-setting/index.tsx b/web/src/pages/add-knowledge/components/knowledge-setting/index.tsx index 47dd4aaeb..1926acb2a 100644 --- a/web/src/pages/add-knowledge/components/knowledge-setting/index.tsx +++ b/web/src/pages/add-knowledge/components/knowledge-setting/index.tsx @@ -19,7 +19,8 @@ const KnowledgeSetting = () => { const settingModel = useSelector((state: any) => state.settingModel); let navigate = useNavigate(); const { tenantIfo = {} } = settingModel; - const { parser_ids = '', embd_id = '' } = tenantIfo; + const parser_ids = tenantIfo?.parser_ids ?? ''; + const embd_id = tenantIfo?.embd_id ?? ''; const [form] = Form.useForm(); const [selectedTag, setSelectedTag] = useState(''); const values = Form.useWatch([], form); diff --git a/web/src/pages/add-knowledge/components/knowledge-setting/model.ts b/web/src/pages/add-knowledge/components/knowledge-setting/model.ts index 188477130..0cd548827 100644 --- a/web/src/pages/add-knowledge/components/knowledge-setting/model.ts +++ b/web/src/pages/add-knowledge/components/knowledge-setting/model.ts @@ -35,7 +35,7 @@ const model: DvaModel = { if (retcode === 0) { message.success('创建知识库成功！'); } - return retcode; + return data; }, *updateKb({ payload = {} }, { call, put }) { const { data } = yield call(kbService.updateKb, payload); diff --git a/web/src/pages/knowledge/index.tsx b/web/src/pages/knowledge/index.tsx index d15cca1d7..97a8f4235 100644 --- a/web/src/pages/knowledge/index.tsx +++ b/web/src/pages/knowledge/index.tsx @@ -1,11 +1,13 @@ import { ReactComponent as FilterIcon } from '@/assets/filter.svg'; -import { KnowledgeRouteKey } from '@/constants/knowledge'; +import ModalManager from '@/components/modal-manager'; import { PlusOutlined } from '@ant-design/icons'; import { Button, Flex, Space } from 'antd'; import { useCallback, useEffect } from 'react'; import { useDispatch, useNavigate, useSelector } from 'umi'; -import styles from './index.less'; import KnowledgeCard from './knowledge-card'; +import KnowledgeCreatingModal from './knowledge-creating-modal'; + +import styles from './index.less'; const Knowledge = () => { const dispatch = useDispatch(); @@ -20,9 +22,9 @@ const Knowledge = () => { }); }, []); - const handleAddKnowledge = () => { - navigate(`/knowledge/${KnowledgeRouteKey.Configuration}`); - }; + // const handleAddKnowledge = () => { + // navigate(`/knowledge/${KnowledgeRouteKey.Configuration}`); + // }; useEffect(() => { fetchList(); @@ -41,32 +43,28 @@ const Knowledge = () => { - + + {({ visible, hideModal, showModal }) => ( + <> + + + + )} + - {/* - {data.map((item: any) => { - return ( - - - - ); - })} - */} {data.map((item: any) => { return ; diff --git a/web/src/pages/knowledge/knowledge-card/index.tsx b/web/src/pages/knowledge/knowledge-card/index.tsx index 31aaa3ca1..07d1616f6 100644 --- a/web/src/pages/knowledge/knowledge-card/index.tsx +++ b/web/src/pages/knowledge/knowledge-card/index.tsx @@ -1,5 +1,6 @@ import { ReactComponent as MoreIcon } from '@/assets/svg/more.svg'; import { KnowledgeRouteKey } from '@/constants/knowledge'; +import { IKnowledge } from '@/interfaces/database/knowledge'; import { formatDate } from '@/utils/date'; import { CalendarOutlined, @@ -11,18 +12,19 @@ import { Avatar, Card, Dropdown, MenuProps, Space } from 'antd'; import { MouseEvent } from 'react'; import { useDispatch, useNavigate } from 'umi'; +import showDeleteConfirm from '@/components/deleting-confirm'; import styles from './index.less'; interface IProps { - item: any; + item: IKnowledge; } const KnowledgeCard = ({ item }: IProps) => { const navigate = useNavigate(); const dispatch = useDispatch(); - const handleDelete = (e: MouseEvent) => { - e.stopPropagation(); + const handleDelete = () => { + showDeleteConfirm({ onOk: removeKnowledge }); }; const items: MenuProps['items'] = [ @@ -30,32 +32,34 @@ const KnowledgeCard = ({ item }: IProps) => { key: '1', label: ( - 删除 - + Delete + ), }, ]; - const confirm = (id: string) => { - dispatch({ + const handleDropdownMenuClick: MenuProps['onClick'] = ({ domEvent, key }) => { + domEvent.preventDefault(); + domEvent.stopPropagation(); + if (key === '1') { + handleDelete(); + } + }; + + const removeKnowledge = () => { + return dispatch({ type: 'knowledgeModel/rmKb', payload: { - kb_id: id, + kb_id: item.id, }, }); }; - const handleCardClick = () => { + const handleCardClick = (e: MouseEvent) => { navigate(`/knowledge/${KnowledgeRouteKey.Dataset}?id=${item.id}`); }; - const onConfirmDelete = (e?: MouseEvent) => { - e?.stopPropagation(); - e?.nativeEvent.stopImmediatePropagation(); - confirm(item.id); - }; - return (
@@ -63,16 +67,12 @@ const KnowledgeCard = ({ item }: IProps) => { } /> - {/* - - */} - diff --git a/web/src/pages/knowledge/knowledge-creating-modal/index.tsx b/web/src/pages/knowledge/knowledge-creating-modal/index.tsx new file mode 100644 index 000000000..abb9c25f7 --- /dev/null +++ b/web/src/pages/knowledge/knowledge-creating-modal/index.tsx @@ -0,0 +1,81 @@ +import { IModalManagerChildrenProps } from '@/components/modal-manager'; +import { KnowledgeRouteKey } from '@/constants/knowledge'; +import { Form, Input, Modal } from 'antd'; +import { useDispatch, useNavigate, useSelector } from 'umi'; + +type FieldType = { + name?: string; +}; + +const KnowledgeCreatingModal = ({ + visible, + hideModal, +}: Omit) => { + const [form] = Form.useForm(); + const dispatch = useDispatch(); + const loading = useSelector( + (state: any) => state.loading.effects['kSModel/createKb'], + ); + const navigate = useNavigate(); + + const handleOk = async () => { + const ret = await form.validateFields(); + + const data = await dispatch({ + type: 'kSModel/createKb', + payload: { + name: ret.name, + }, + }); + + if (data.retcode === 0) { + navigate( + `/knowledge/${KnowledgeRouteKey.Configuration}?id=${data.data.kb_id}`, + ); + hideModal(); + } + }; + + const handleCancel = () => { + hideModal(); + }; + + const onFinish = (values: any) => { + console.log('Success:', values); + }; + + const onFinishFailed = (errorInfo: any) => { + console.log('Failed:', errorInfo); + }; + + return ( + +
+ + label="Name" + name="name" + rules={[{ required: true, message: 'Please input name!' }]} + > + + + +
+ ); +}; + +export default KnowledgeCreatingModal; diff --git a/web/src/services/kbService.ts b/web/src/services/kbService.ts index d0d6c9141..ca25bc44f 100644 --- a/web/src/services/kbService.ts +++ b/web/src/services/kbService.ts @@ -21,6 +21,7 @@ const { rm_chunk, retrieval_test, document_rename, + document_run, } = api; const methods = { @@ -66,6 +67,10 @@ const methods = { url: document_create, method: 'post', }, + document_run: { + url: document_run, + method: 'post', + }, document_change_parser: { url: document_change_parser, method: 'post', diff --git a/web/src/utils/api.ts b/web/src/utils/api.ts index fb5adcbf9..d7634efa0 100644 --- a/web/src/utils/api.ts +++ b/web/src/utils/api.ts @@ -40,5 +40,6 @@ export default { document_rm: `${api_host}/document/rm`, document_rename: `${api_host}/document/rename`, document_create: `${api_host}/document/create`, + document_run: `${api_host}/document/run`, document_change_parser: `${api_host}/document/change_parser`, }; diff --git a/web/src/utils/stroreUtil.ts b/web/src/utils/storeUtil.ts similarity index 100% rename from web/src/utils/stroreUtil.ts rename to web/src/utils/storeUtil.ts