mirror of
https://github.com/infiniflow/ragflow.git
synced 2025-12-08 20:42:30 +08:00
feat: create chunk and edit chunk and delete chunk (#58)
* feat: create chunk and edit chunk * feat: delete chunk * feat: search chunks * feat: delete chunks in batches * feat: set whether chunks are available in batches
This commit is contained in:
balibabu
@ -1,5 +1,6 @@
|
||||
import showDeleteConfirm from '@/components/deleting-confirm';
|
||||
import { IKnowledge } from '@/interfaces/database/knowledge';
|
||||
import { useCallback } from 'react';
|
||||
import { useDispatch, useSearchParams, useSelector } from 'umi';
|
||||
|
||||
export const useKnowledgeBaseId = (): string => {
|
||||
@ -46,3 +47,33 @@ export const useGetDocumentDefaultParser = (knowledgeBaseId: string) => {
|
||||
parserConfig: item?.parser_config ?? '',
|
||||
};
|
||||
};
|
||||
|
||||
export const useDeleteChunkByIds = (): {
|
||||
removeChunk: (chunkIds: string[], documentId: string) => Promise<number>;
|
||||
} => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const removeChunk = useCallback(
|
||||
(chunkIds: string[], documentId: string) => () => {
|
||||
return dispatch({
|
||||
type: 'chunkModel/rm_chunk',
|
||||
payload: {
|
||||
chunk_ids: chunkIds,
|
||||
doc_id: documentId,
|
||||
},
|
||||
});
|
||||
},
|
||||
[dispatch],
|
||||
);
|
||||
|
||||
const onRemoveChunk = useCallback(
|
||||
(chunkIds: string[], documentId: string): Promise<number> => {
|
||||
return showDeleteConfirm({ onOk: removeChunk(chunkIds, documentId) });
|
||||
},
|
||||
[removeChunk],
|
||||
);
|
||||
|
||||
return {
|
||||
removeChunk: onRemoveChunk,
|
||||
};
|
||||
};
|
||||
|
||||
@ -6,3 +6,11 @@
|
||||
.imagePreview {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
em {
|
||||
color: red;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { IChunk } from '@/interfaces/database/knowledge';
|
||||
import { api_host } from '@/utils/api';
|
||||
import { Card, Checkbox, CheckboxProps, Flex, Popover, Switch } from 'antd';
|
||||
import { useDispatch } from 'umi';
|
||||
|
||||
import { useState } from 'react';
|
||||
import styles from './index.less';
|
||||
@ -9,6 +8,8 @@ import styles from './index.less';
|
||||
interface IProps {
|
||||
item: IChunk;
|
||||
checked: boolean;
|
||||
switchChunk: (available?: number, chunkIds?: string[]) => void;
|
||||
editChunk: (chunkId: string) => void;
|
||||
handleCheckboxClick: (chunkId: string, checked: boolean) => void;
|
||||
}
|
||||
|
||||
@ -28,32 +29,29 @@ const Image = ({ id, className, ...props }: IImage) => {
|
||||
);
|
||||
};
|
||||
|
||||
const ChunkCard = ({ item, checked, handleCheckboxClick }: IProps) => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const ChunkCard = ({
|
||||
item,
|
||||
checked,
|
||||
handleCheckboxClick,
|
||||
editChunk,
|
||||
switchChunk,
|
||||
}: IProps) => {
|
||||
const available = Number(item.available_int);
|
||||
const [enabled, setEnabled] = useState(available === 1);
|
||||
|
||||
const switchChunk = () => {
|
||||
dispatch({
|
||||
type: 'chunkModel/switch_chunk',
|
||||
payload: {
|
||||
chunk_ids: [item.chunk_id],
|
||||
available_int: available === 0 ? 1 : 0,
|
||||
doc_id: item.doc_id,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const onChange = (checked: boolean) => {
|
||||
setEnabled(checked);
|
||||
switchChunk();
|
||||
switchChunk(available === 0 ? 1 : 0, [item.chunk_id]);
|
||||
};
|
||||
|
||||
const handleCheck: CheckboxProps['onChange'] = (e) => {
|
||||
handleCheckboxClick(item.chunk_id, e.target.checked);
|
||||
};
|
||||
|
||||
const handleContentClick = () => {
|
||||
editChunk(item.chunk_id);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card>
|
||||
@ -75,7 +73,13 @@ const ChunkCard = ({ item, checked, handleCheckboxClick }: IProps) => {
|
||||
</Popover>
|
||||
)}
|
||||
|
||||
<section>{item.content_with_weight}</section>
|
||||
<section
|
||||
onDoubleClick={handleContentClick}
|
||||
className={styles.content}
|
||||
dangerouslySetInnerHTML={{ __html: item.content_with_weight }}
|
||||
>
|
||||
{/* {item.content_with_weight} */}
|
||||
</section>
|
||||
<div>
|
||||
<Switch checked={enabled} onChange={onChange} />
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,131 @@
|
||||
import { useDeleteChunkByIds } from '@/hooks/knowledgeHook';
|
||||
import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
|
||||
import { DeleteOutlined } from '@ant-design/icons';
|
||||
import { Checkbox, Form, Input, Modal, Space } from 'antd';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { useDispatch, useSelector } from 'umi';
|
||||
import EditTag from '../edit-tag';
|
||||
|
||||
type FieldType = {
|
||||
content?: string;
|
||||
};
|
||||
interface kFProps {
|
||||
doc_id: string;
|
||||
chunkId: string | undefined;
|
||||
}
|
||||
|
||||
const ChunkCreatingModal: React.FC<kFProps> = ({ doc_id, chunkId }) => {
|
||||
const dispatch = useDispatch();
|
||||
const [form] = Form.useForm();
|
||||
const isShowCreateModal: boolean = useSelector(
|
||||
(state: any) => state.chunkModel.isShowCreateModal,
|
||||
);
|
||||
const [checked, setChecked] = useState(false);
|
||||
const [keywords, setKeywords] = useState<string[]>([]);
|
||||
const loading = useOneNamespaceEffectsLoading('chunkModel', ['create_chunk']);
|
||||
const { removeChunk } = useDeleteChunkByIds();
|
||||
|
||||
const handleCancel = () => {
|
||||
dispatch({
|
||||
type: 'chunkModel/setIsShowCreateModal',
|
||||
payload: false,
|
||||
});
|
||||
};
|
||||
|
||||
const getChunk = useCallback(async () => {
|
||||
console.info(chunkId);
|
||||
if (chunkId && isShowCreateModal) {
|
||||
const data = await dispatch<any>({
|
||||
type: 'chunkModel/get_chunk',
|
||||
payload: {
|
||||
chunk_id: chunkId,
|
||||
},
|
||||
});
|
||||
|
||||
if (data?.retcode === 0) {
|
||||
const { content_with_weight, important_kwd = [] } = data.data;
|
||||
form.setFieldsValue({ content: content_with_weight });
|
||||
setKeywords(important_kwd);
|
||||
}
|
||||
}
|
||||
|
||||
if (!chunkId) {
|
||||
setKeywords([]);
|
||||
form.setFieldsValue({ content: undefined });
|
||||
}
|
||||
}, [chunkId, isShowCreateModal, dispatch, form]);
|
||||
|
||||
useEffect(() => {
|
||||
getChunk();
|
||||
}, [getChunk]);
|
||||
|
||||
const handleOk = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
dispatch({
|
||||
type: 'chunkModel/create_chunk',
|
||||
payload: {
|
||||
content_with_weight: values.content,
|
||||
doc_id,
|
||||
chunk_id: chunkId,
|
||||
important_kwd: keywords, // keywords
|
||||
},
|
||||
});
|
||||
} catch (errorInfo) {
|
||||
console.log('Failed:', errorInfo);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemove = () => {
|
||||
if (chunkId) {
|
||||
return removeChunk([chunkId], doc_id);
|
||||
}
|
||||
};
|
||||
const handleCheck = () => {
|
||||
setChecked(!checked);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={`${chunkId ? 'Edit' : 'Create'} Chunk`}
|
||||
open={isShowCreateModal}
|
||||
onOk={handleOk}
|
||||
onCancel={handleCancel}
|
||||
okButtonProps={{ loading }}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
// name="validateOnly"
|
||||
autoComplete="off"
|
||||
layout={'vertical'}
|
||||
>
|
||||
<Form.Item<FieldType>
|
||||
label="Chunk"
|
||||
name="content"
|
||||
rules={[{ required: true, message: 'Please input value!' }]}
|
||||
>
|
||||
<Input.TextArea autoSize={{ minRows: 4, maxRows: 10 }} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<section>
|
||||
<p>Keyword*</p>
|
||||
<EditTag tags={keywords} setTags={setKeywords} />
|
||||
</section>
|
||||
{chunkId && (
|
||||
<section>
|
||||
<p>Function*</p>
|
||||
<Space size={'large'}>
|
||||
<Checkbox onChange={handleCheck} checked={checked}>
|
||||
Enabled
|
||||
</Checkbox>
|
||||
|
||||
<span onClick={handleRemove}>
|
||||
<DeleteOutlined /> Delete
|
||||
</span>
|
||||
</Space>
|
||||
</section>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
export default ChunkCreatingModal;
|
||||
@ -15,6 +15,7 @@ import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Flex,
|
||||
Input,
|
||||
Menu,
|
||||
MenuProps,
|
||||
Popover,
|
||||
@ -22,7 +23,7 @@ import {
|
||||
RadioChangeEvent,
|
||||
Space,
|
||||
} from 'antd';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { ChangeEventHandler, useCallback, useMemo, useState } from 'react';
|
||||
import { Link, useDispatch, useSelector } from 'umi';
|
||||
import { ChunkModelState } from '../../model';
|
||||
|
||||
@ -30,24 +31,62 @@ interface IProps {
|
||||
checked: boolean;
|
||||
getChunkList: () => void;
|
||||
selectAllChunk: (checked: boolean) => void;
|
||||
createChunk: () => void;
|
||||
removeChunk: () => void;
|
||||
switchChunk: (available: number) => void;
|
||||
}
|
||||
|
||||
const ChunkToolBar = ({ getChunkList, selectAllChunk, checked }: IProps) => {
|
||||
const { documentInfo, available }: ChunkModelState = useSelector(
|
||||
(state: any) => state.chunkModel,
|
||||
);
|
||||
const ChunkToolBar = ({
|
||||
getChunkList,
|
||||
selectAllChunk,
|
||||
checked,
|
||||
createChunk,
|
||||
removeChunk,
|
||||
switchChunk,
|
||||
}: IProps) => {
|
||||
const { documentInfo, available, searchString }: ChunkModelState =
|
||||
useSelector((state: any) => state.chunkModel);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const knowledgeBaseId = useKnowledgeBaseId();
|
||||
const [isShowSearchBox, setIsShowSearchBox] = useState(false);
|
||||
|
||||
const handleSelectAllCheck = useCallback(
|
||||
(e: any) => {
|
||||
// console.info(e.target.checked);
|
||||
selectAllChunk(e.target.checked);
|
||||
},
|
||||
[selectAllChunk],
|
||||
);
|
||||
|
||||
const handleSearchIconClick = () => {
|
||||
setIsShowSearchBox(true);
|
||||
};
|
||||
|
||||
const handleSearchChange: ChangeEventHandler<HTMLInputElement> = (e) => {
|
||||
const val = e.target.value;
|
||||
dispatch({ type: 'chunkModel/setSearchString', payload: val });
|
||||
dispatch({
|
||||
type: 'chunkModel/throttledGetChunkList',
|
||||
payload: documentInfo.id,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSearchBlur = () => {
|
||||
if (!searchString.trim()) {
|
||||
setIsShowSearchBox(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = useCallback(() => {
|
||||
removeChunk();
|
||||
}, [removeChunk]);
|
||||
|
||||
const handleEnabledClick = () => {
|
||||
switchChunk(1);
|
||||
};
|
||||
const handleDisabledClick = () => {
|
||||
switchChunk(0);
|
||||
};
|
||||
|
||||
const items: MenuProps['items'] = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
@ -64,7 +103,7 @@ const ChunkToolBar = ({ getChunkList, selectAllChunk, checked }: IProps) => {
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<Space>
|
||||
<Space onClick={handleEnabledClick}>
|
||||
<CheckCircleOutlined />
|
||||
<b>Enabled Selected</b>
|
||||
</Space>
|
||||
@ -73,7 +112,7 @@ const ChunkToolBar = ({ getChunkList, selectAllChunk, checked }: IProps) => {
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<Space>
|
||||
<Space onClick={handleDisabledClick}>
|
||||
<CloseCircleOutlined />
|
||||
<b>Disabled Selected</b>
|
||||
</Space>
|
||||
@ -83,20 +122,21 @@ const ChunkToolBar = ({ getChunkList, selectAllChunk, checked }: IProps) => {
|
||||
{
|
||||
key: '4',
|
||||
label: (
|
||||
<Space>
|
||||
<Space onClick={handleDelete}>
|
||||
<DeleteOutlined />
|
||||
<b>Delete Selected</b>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
}, [checked, handleSelectAllCheck]);
|
||||
}, [checked, handleSelectAllCheck, handleDelete]);
|
||||
|
||||
const content = (
|
||||
<Menu style={{ width: 200 }} items={items} selectable={false} />
|
||||
);
|
||||
|
||||
const handleFilterChange = (e: RadioChangeEvent) => {
|
||||
selectAllChunk(false);
|
||||
dispatch({ type: 'chunkModel/setAvailable', payload: e.target.value });
|
||||
getChunkList();
|
||||
};
|
||||
@ -129,12 +169,28 @@ const ChunkToolBar = ({ getChunkList, selectAllChunk, checked }: IProps) => {
|
||||
<DownOutlined />
|
||||
</Button>
|
||||
</Popover>
|
||||
<Button icon={<SearchOutlined />} />
|
||||
{isShowSearchBox ? (
|
||||
<Input
|
||||
size="middle"
|
||||
placeholder="Search"
|
||||
prefix={<SearchOutlined />}
|
||||
allowClear
|
||||
onChange={handleSearchChange}
|
||||
onBlur={handleSearchBlur}
|
||||
value={searchString}
|
||||
/>
|
||||
) : (
|
||||
<Button icon={<SearchOutlined />} onClick={handleSearchIconClick} />
|
||||
)}
|
||||
|
||||
<Popover content={filterContent} placement="bottom" arrow={false}>
|
||||
<Button icon={<FilterIcon />} />
|
||||
</Popover>
|
||||
<Button icon={<DeleteOutlined />} />
|
||||
<Button icon={<PlusOutlined />} type="primary" />
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
type="primary"
|
||||
onClick={() => createChunk()}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
@ -1,116 +0,0 @@
|
||||
import { Form, Input, Modal } from 'antd';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useDispatch } from 'umi';
|
||||
import EditTag from './editTag';
|
||||
|
||||
type FieldType = {
|
||||
content_ltks?: string;
|
||||
};
|
||||
interface kFProps {
|
||||
getChunkList: () => void;
|
||||
isShowCreateModal: boolean;
|
||||
doc_id: string;
|
||||
chunk_id: string;
|
||||
}
|
||||
|
||||
const Index: React.FC<kFProps> = ({
|
||||
getChunkList,
|
||||
doc_id,
|
||||
isShowCreateModal,
|
||||
chunk_id,
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
const [form] = Form.useForm();
|
||||
|
||||
// const { , chunkInfo } = chunkModel
|
||||
const [important_kwd, setImportantKwd] = useState([
|
||||
'Unremovable',
|
||||
'Tag 2',
|
||||
'Tag 3',
|
||||
]);
|
||||
const { t } = useTranslation();
|
||||
const handleCancel = () => {
|
||||
dispatch({
|
||||
type: 'chunkModel/updateState',
|
||||
payload: {
|
||||
isShowCreateModal: false,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const getChunk = useCallback(async () => {
|
||||
if (chunk_id && isShowCreateModal) {
|
||||
const data = await dispatch<any>({
|
||||
type: 'chunkModel/get_chunk',
|
||||
payload: {
|
||||
chunk_id,
|
||||
},
|
||||
});
|
||||
|
||||
if (data?.retcode === 0) {
|
||||
const { content_ltks, important_kwd = [] } = data.data;
|
||||
form.setFieldsValue({ content_ltks });
|
||||
setImportantKwd(important_kwd);
|
||||
}
|
||||
}
|
||||
}, [chunk_id, isShowCreateModal]);
|
||||
|
||||
useEffect(() => {
|
||||
getChunk();
|
||||
}, [getChunk]);
|
||||
|
||||
const handleOk = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
dispatch({
|
||||
type: 'chunkModel/create_hunk',
|
||||
payload: {
|
||||
content_ltks: values.content_ltks,
|
||||
doc_id,
|
||||
chunk_id,
|
||||
important_kwd,
|
||||
},
|
||||
// callback: () => {
|
||||
// dispatch({
|
||||
// type: 'chunkModel/updateState',
|
||||
// payload: {
|
||||
// isShowCreateModal: false,
|
||||
// },
|
||||
// });
|
||||
// getChunkList && getChunkList();
|
||||
// },
|
||||
});
|
||||
} catch (errorInfo) {
|
||||
console.log('Failed:', errorInfo);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title="Basic Modal"
|
||||
open={isShowCreateModal}
|
||||
onOk={handleOk}
|
||||
onCancel={handleCancel}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
name="validateOnly"
|
||||
labelCol={{ span: 5 }}
|
||||
wrapperCol={{ span: 19 }}
|
||||
style={{ maxWidth: 600 }}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.Item<FieldType>
|
||||
label="chunk 内容"
|
||||
name="content_ltks"
|
||||
rules={[{ required: true, message: 'Please input value!' }]}
|
||||
>
|
||||
<Input.TextArea />
|
||||
</Form.Item>
|
||||
<EditTag tags={important_kwd} setTags={setImportantKwd} />
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
export default Index;
|
||||
@ -0,0 +1,3 @@
|
||||
.tweenGroup {
|
||||
display: inline-block;
|
||||
}
|
||||
@ -0,0 +1,116 @@
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import type { InputRef } from 'antd';
|
||||
import { Input, Tag, theme } from 'antd';
|
||||
import { TweenOneGroup } from 'rc-tween-one';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
|
||||
import styles from './index.less';
|
||||
|
||||
interface EditTagsProps {
|
||||
tags: string[];
|
||||
setTags: (tags: string[]) => void;
|
||||
}
|
||||
|
||||
const EditTag = ({ tags, setTags }: EditTagsProps) => {
|
||||
const { token } = theme.useToken();
|
||||
const [inputVisible, setInputVisible] = useState(false);
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
const inputRef = useRef<InputRef>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (inputVisible) {
|
||||
inputRef.current?.focus();
|
||||
}
|
||||
}, [inputVisible]);
|
||||
|
||||
const handleClose = (removedTag: string) => {
|
||||
const newTags = tags.filter((tag) => tag !== removedTag);
|
||||
console.log(newTags);
|
||||
setTags(newTags);
|
||||
};
|
||||
|
||||
const showInput = () => {
|
||||
setInputVisible(true);
|
||||
};
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setInputValue(e.target.value);
|
||||
};
|
||||
|
||||
const handleInputConfirm = () => {
|
||||
if (inputValue && tags.indexOf(inputValue) === -1) {
|
||||
setTags([...tags, inputValue]);
|
||||
}
|
||||
setInputVisible(false);
|
||||
setInputValue('');
|
||||
};
|
||||
|
||||
const forMap = (tag: string) => {
|
||||
const tagElem = (
|
||||
<Tag
|
||||
closable
|
||||
onClose={(e) => {
|
||||
e.preventDefault();
|
||||
handleClose(tag);
|
||||
}}
|
||||
>
|
||||
{tag}
|
||||
</Tag>
|
||||
);
|
||||
return (
|
||||
<span key={tag} style={{ display: 'inline-block' }}>
|
||||
{tagElem}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const tagChild = tags.map(forMap);
|
||||
|
||||
const tagPlusStyle: React.CSSProperties = {
|
||||
background: token.colorBgContainer,
|
||||
borderStyle: 'dashed',
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<span>
|
||||
<TweenOneGroup
|
||||
className={styles.tweenGroup}
|
||||
enter={{
|
||||
scale: 0.8,
|
||||
opacity: 0,
|
||||
type: 'from',
|
||||
duration: 100,
|
||||
}}
|
||||
onEnd={(e) => {
|
||||
if (e.type === 'appear' || e.type === 'enter') {
|
||||
(e.target as any).style = 'display: inline-block';
|
||||
}
|
||||
}}
|
||||
leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
|
||||
appear={false}
|
||||
>
|
||||
{tagChild}
|
||||
</TweenOneGroup>
|
||||
</span>
|
||||
{inputVisible ? (
|
||||
<Input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
size="small"
|
||||
style={{ width: 78 }}
|
||||
value={inputValue}
|
||||
onChange={handleInputChange}
|
||||
onBlur={handleInputConfirm}
|
||||
onPressEnter={handleInputConfirm}
|
||||
/>
|
||||
) : (
|
||||
<Tag onClick={showInput} style={tagPlusStyle}>
|
||||
<PlusOutlined />
|
||||
</Tag>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditTag;
|
||||
@ -23,6 +23,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.chunkContainer {
|
||||
height: calc(100vh - 320px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.pageFooter {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import { getOneNamespaceEffectsLoading } from '@/utils/storeUtil';
|
||||
import type { PaginationProps } from 'antd';
|
||||
import { Button, Input, Pagination, Space, Spin } from 'antd';
|
||||
import { debounce } from 'lodash';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { Divider, Pagination, Space, Spin, message } from 'antd';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { useDispatch, useSearchParams, useSelector } from 'umi';
|
||||
import CreateModal from './components/createModal';
|
||||
import CreatingModal from './components/chunk-creating-modal';
|
||||
|
||||
import { useDeleteChunkByIds } from '@/hooks/knowledgeHook';
|
||||
import ChunkCard from './components/chunk-card';
|
||||
import ChunkToolBar from './components/chunk-toolbar';
|
||||
import styles from './index.less';
|
||||
@ -21,16 +21,9 @@ const Chunk = () => {
|
||||
const chunkModel: ChunkModelState = useSelector(
|
||||
(state: any) => state.chunkModel,
|
||||
);
|
||||
const [keywords, SetKeywords] = useState('');
|
||||
const [selectedChunkIds, setSelectedChunkIds] = useState<string[]>([]);
|
||||
const [searchParams] = useSearchParams();
|
||||
const {
|
||||
data = [],
|
||||
total,
|
||||
chunk_id,
|
||||
isShowCreateModal,
|
||||
pagination,
|
||||
} = chunkModel;
|
||||
const { data = [], total, pagination } = chunkModel;
|
||||
const effects = useSelector((state: any) => state.loading.effects);
|
||||
const loading = getOneNamespaceEffectsLoading('chunkModel', effects, [
|
||||
'create_hunk',
|
||||
@ -38,8 +31,10 @@ const Chunk = () => {
|
||||
'switch_chunk',
|
||||
]);
|
||||
const documentId: string = searchParams.get('doc_id') || '';
|
||||
const [chunkId, setChunkId] = useState<string | undefined>();
|
||||
const { removeChunk } = useDeleteChunkByIds();
|
||||
|
||||
const getChunkList = () => {
|
||||
const getChunkList = useCallback(() => {
|
||||
const payload: PayloadType = {
|
||||
doc_id: documentId,
|
||||
};
|
||||
@ -50,30 +45,19 @@ const Chunk = () => {
|
||||
...payload,
|
||||
},
|
||||
});
|
||||
};
|
||||
}, [dispatch, documentId]);
|
||||
|
||||
const confirm = async (id: string) => {
|
||||
const retcode = await dispatch<any>({
|
||||
type: 'chunkModel/rm_chunk',
|
||||
payload: {
|
||||
chunk_ids: [id],
|
||||
},
|
||||
});
|
||||
const handleEditChunk = useCallback(
|
||||
(chunk_id?: string) => {
|
||||
setChunkId(chunk_id);
|
||||
|
||||
retcode === 0 && getChunkList();
|
||||
};
|
||||
|
||||
const handleEditchunk = (chunk_id?: string) => {
|
||||
dispatch({
|
||||
type: 'chunkModel/updateState',
|
||||
payload: {
|
||||
isShowCreateModal: true,
|
||||
chunk_id,
|
||||
doc_id: documentId,
|
||||
},
|
||||
});
|
||||
getChunkList();
|
||||
};
|
||||
dispatch({
|
||||
type: 'chunkModel/setIsShowCreateModal',
|
||||
payload: true,
|
||||
});
|
||||
},
|
||||
[dispatch],
|
||||
);
|
||||
|
||||
const onPaginationChange: PaginationProps['onShowSizeChange'] = (
|
||||
page,
|
||||
@ -93,9 +77,6 @@ const Chunk = () => {
|
||||
const selectAllChunk = useCallback(
|
||||
(checked: boolean) => {
|
||||
setSelectedChunkIds(checked ? data.map((x) => x.chunk_id) : []);
|
||||
// setSelectedChunkIds((previousIds) => {
|
||||
// return checked ? [...previousIds, ...data.map((x) => x.chunk_id)] : [];
|
||||
// });
|
||||
},
|
||||
[data],
|
||||
);
|
||||
@ -115,6 +96,46 @@ const Chunk = () => {
|
||||
},
|
||||
[],
|
||||
);
|
||||
const showSelectedChunkWarning = () => {
|
||||
message.warning('Please select chunk!');
|
||||
};
|
||||
|
||||
const handleRemoveChunk = useCallback(async () => {
|
||||
if (selectedChunkIds.length > 0) {
|
||||
const resCode: number = await removeChunk(selectedChunkIds, documentId);
|
||||
if (resCode === 0) {
|
||||
setSelectedChunkIds([]);
|
||||
}
|
||||
} else {
|
||||
showSelectedChunkWarning();
|
||||
}
|
||||
}, [selectedChunkIds, documentId, removeChunk]);
|
||||
|
||||
const switchChunk = useCallback(
|
||||
async (available?: number, chunkIds?: string[]) => {
|
||||
let ids = chunkIds;
|
||||
if (!chunkIds) {
|
||||
ids = selectedChunkIds;
|
||||
if (selectedChunkIds.length === 0) {
|
||||
showSelectedChunkWarning();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const resCode: number = await dispatch<any>({
|
||||
type: 'chunkModel/switch_chunk',
|
||||
payload: {
|
||||
chunk_ids: ids,
|
||||
available_int: available,
|
||||
doc_id: documentId,
|
||||
},
|
||||
});
|
||||
if (!chunkIds && resCode === 0) {
|
||||
getChunkList();
|
||||
}
|
||||
},
|
||||
[dispatch, documentId, getChunkList, selectedChunkIds],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
getChunkList();
|
||||
@ -123,22 +144,7 @@ const Chunk = () => {
|
||||
type: 'chunkModel/resetFilter', // TODO: need to reset state uniformly
|
||||
});
|
||||
};
|
||||
}, [documentId]);
|
||||
|
||||
const debounceChange = debounce(getChunkList, 300);
|
||||
const debounceCallback = useCallback(
|
||||
(value: string) => debounceChange(value),
|
||||
[],
|
||||
);
|
||||
|
||||
const handleInputChange = (
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
|
||||
) => {
|
||||
setSelectedChunkIds([]);
|
||||
const value = e.target.value;
|
||||
SetKeywords(value);
|
||||
debounceCallback(value);
|
||||
};
|
||||
}, [dispatch, getChunkList]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -146,36 +152,27 @@ const Chunk = () => {
|
||||
<ChunkToolBar
|
||||
getChunkList={getChunkList}
|
||||
selectAllChunk={selectAllChunk}
|
||||
createChunk={handleEditChunk}
|
||||
removeChunk={handleRemoveChunk}
|
||||
checked={selectedChunkIds.length === data.length}
|
||||
switchChunk={switchChunk}
|
||||
></ChunkToolBar>
|
||||
<div className={styles.filter}>
|
||||
<div>
|
||||
<Input
|
||||
placeholder="搜索"
|
||||
style={{ width: 220 }}
|
||||
value={keywords}
|
||||
allowClear
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => {
|
||||
handleEditchunk();
|
||||
}}
|
||||
type="link"
|
||||
>
|
||||
添加分段
|
||||
</Button>
|
||||
</div>
|
||||
<Divider></Divider>
|
||||
<div className={styles.pageContent}>
|
||||
<Spin spinning={loading} className={styles.spin} size="large">
|
||||
<Space direction="vertical" size={'middle'}>
|
||||
<Space
|
||||
direction="vertical"
|
||||
size={'middle'}
|
||||
className={styles.chunkContainer}
|
||||
>
|
||||
{data.map((item) => (
|
||||
<ChunkCard
|
||||
item={item}
|
||||
key={item.chunk_id}
|
||||
editChunk={handleEditChunk}
|
||||
checked={selectedChunkIds.some((x) => x === item.chunk_id)}
|
||||
handleCheckboxClick={handleSingleCheckboxClick}
|
||||
switchChunk={switchChunk}
|
||||
></ChunkCard>
|
||||
))}
|
||||
</Space>
|
||||
@ -188,19 +185,14 @@ const Chunk = () => {
|
||||
showQuickJumper
|
||||
showSizeChanger
|
||||
onChange={onPaginationChange}
|
||||
defaultPageSize={10}
|
||||
pageSize={pagination.pageSize}
|
||||
pageSizeOptions={[10, 30, 60, 90]}
|
||||
defaultCurrent={pagination.current}
|
||||
current={pagination.current}
|
||||
total={total}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<CreateModal
|
||||
doc_id={documentId}
|
||||
isShowCreateModal={isShowCreateModal}
|
||||
chunk_id={chunk_id}
|
||||
getChunkList={getChunkList}
|
||||
/>
|
||||
<CreatingModal doc_id={documentId} chunkId={chunkId} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -2,6 +2,7 @@ import { BaseState } from '@/interfaces/common';
|
||||
import { IKnowledgeFile } from '@/interfaces/database/knowledge';
|
||||
import kbService from '@/services/kbService';
|
||||
import { message } from 'antd';
|
||||
import { pick } from 'lodash';
|
||||
// import { delay } from '@/utils/storeUtil';
|
||||
import { DvaModel } from 'umi';
|
||||
|
||||
@ -40,6 +41,13 @@ const model: DvaModel<ChunkModelState> = {
|
||||
...payload,
|
||||
};
|
||||
},
|
||||
setIsShowCreateModal(state, { payload }) {
|
||||
return {
|
||||
...state,
|
||||
isShowCreateModal:
|
||||
typeof payload === 'boolean' ? payload : !state.isShowCreateModal,
|
||||
};
|
||||
},
|
||||
setAvailable(state, { payload }) {
|
||||
return { ...state, available: payload };
|
||||
},
|
||||
@ -49,7 +57,7 @@ const model: DvaModel<ChunkModelState> = {
|
||||
setPagination(state, { payload }) {
|
||||
return { ...state, pagination: { ...state.pagination, ...payload } };
|
||||
},
|
||||
resetFilter(state, { payload }) {
|
||||
resetFilter(state, {}) {
|
||||
return {
|
||||
...state,
|
||||
pagination: {
|
||||
@ -84,7 +92,13 @@ const model: DvaModel<ChunkModelState> = {
|
||||
});
|
||||
}
|
||||
},
|
||||
*switch_chunk({ payload = {} }, { call, put }) {
|
||||
throttledGetChunkList: [
|
||||
function* ({ payload }, { put }) {
|
||||
yield put({ type: 'chunk_list', payload: { doc_id: payload } });
|
||||
},
|
||||
{ type: 'throttle', ms: 1000 }, // TODO: Provide type support for this effect
|
||||
],
|
||||
*switch_chunk({ payload = {} }, { call }) {
|
||||
const { data } = yield call(kbService.switch_chunk, payload);
|
||||
const { retcode } = data;
|
||||
if (retcode === 0) {
|
||||
@ -93,15 +107,21 @@ const model: DvaModel<ChunkModelState> = {
|
||||
return retcode;
|
||||
},
|
||||
*rm_chunk({ payload = {} }, { call, put }) {
|
||||
console.log('shanchu');
|
||||
const { data, response } = yield call(kbService.rm_chunk, payload);
|
||||
const { retcode, data: res, retmsg } = data;
|
||||
|
||||
const { data } = yield call(kbService.rm_chunk, payload);
|
||||
const { retcode } = data;
|
||||
if (retcode === 0) {
|
||||
yield put({
|
||||
type: 'setIsShowCreateModal',
|
||||
payload: false,
|
||||
});
|
||||
yield put({ type: 'setPagination', payload: { current: 1 } });
|
||||
yield put({ type: 'chunk_list', payload: pick(payload, ['doc_id']) });
|
||||
}
|
||||
return retcode;
|
||||
},
|
||||
*get_chunk({ payload = {} }, { call, put }) {
|
||||
const { data, response } = yield call(kbService.get_chunk, payload);
|
||||
const { retcode, data: res, retmsg } = data;
|
||||
const { data } = yield call(kbService.get_chunk, payload);
|
||||
const { retcode, data: res } = data;
|
||||
if (retcode === 0) {
|
||||
yield put({
|
||||
type: 'updateState',
|
||||
@ -112,20 +132,20 @@ const model: DvaModel<ChunkModelState> = {
|
||||
}
|
||||
return data;
|
||||
},
|
||||
*create_hunk({ payload = {} }, { call, put }) {
|
||||
*create_chunk({ payload = {} }, { call, put }) {
|
||||
let service = kbService.create_chunk;
|
||||
if (payload.chunk_id) {
|
||||
service = kbService.set_chunk;
|
||||
}
|
||||
const { data, response } = yield call(service, payload);
|
||||
const { retcode, data: res, retmsg } = data;
|
||||
const { data } = yield call(service, payload);
|
||||
const { retcode } = data;
|
||||
if (retcode === 0) {
|
||||
yield put({
|
||||
type: 'updateState',
|
||||
payload: {
|
||||
isShowCreateModal: false,
|
||||
},
|
||||
type: 'setIsShowCreateModal',
|
||||
payload: false,
|
||||
});
|
||||
|
||||
yield put({ type: 'chunk_list', payload: pick(payload, ['doc_id']) });
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
@ -17,7 +17,7 @@ import {
|
||||
import { debounce } from 'lodash';
|
||||
import React, { useCallback, useEffect } from 'react';
|
||||
import { useDispatch, useSelector } from 'umi';
|
||||
import CreateModal from '../knowledge-chunk/components/createModal';
|
||||
import CreateModal from '../knowledge-chunk/components/chunk-creating-modal';
|
||||
|
||||
import styles from './index.less';
|
||||
|
||||
@ -265,7 +265,6 @@ const KnowledgeSearching = () => {
|
||||
</div>
|
||||
</div>
|
||||
<CreateModal
|
||||
getChunkList={getChunkList}
|
||||
isShowCreateModal={isShowCreateModal}
|
||||
chunk_id={chunk_id}
|
||||
doc_id={doc_id}
|
||||
|
||||
@ -138,8 +138,8 @@ const model: DvaModel<KSearchModelState> = {
|
||||
if (payload.chunk_id) {
|
||||
service = kbService.set_chunk;
|
||||
}
|
||||
const { data, response } = yield call(service, payload);
|
||||
const { retcode, data: res, retmsg } = data;
|
||||
const { data } = yield call(service, payload);
|
||||
const { retcode } = data;
|
||||
yield put({
|
||||
type: 'updateState',
|
||||
payload: {
|
||||
|
||||
Reference in New Issue
Block a user