update knowledge_kb (#34)
* update typescript * add chunk api * remove useless code
This commit is contained in:
yqj123
@@ -0,0 +1,99 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { connect, Dispatch } from 'umi';
|
||||
import i18n from 'i18next';
|
||||
import { useTranslation, Trans } from 'react-i18next'
|
||||
import { Input, Modal, Form } from 'antd'
|
||||
import styles from './index.less';
|
||||
import type { chunkModelState } from './model'
|
||||
import EditTag from './editTag'
|
||||
|
||||
type FieldType = {
|
||||
content_ltks?: string;
|
||||
};
|
||||
interface kFProps {
|
||||
dispatch: Dispatch;
|
||||
chunkModel: chunkModelState;
|
||||
getChunkList: () => void;
|
||||
doc_id: string
|
||||
}
|
||||
const Index: React.FC<kFProps> = ({ chunkModel, dispatch, getChunkList, doc_id }) => {
|
||||
const { isShowCreateModal, chunk_id, chunkInfo } = chunkModel
|
||||
const [important_kwd, setImportantKwd] = useState(['Unremovable', 'Tag 2', 'Tag 3']);
|
||||
const { t } = useTranslation()
|
||||
const handleCancel = () => {
|
||||
dispatch({
|
||||
type: 'chunkModel/updateState',
|
||||
payload: {
|
||||
isShowCreateModal: false
|
||||
}
|
||||
});
|
||||
};
|
||||
useEffect(() => {
|
||||
if (chunk_id && isShowCreateModal) {
|
||||
dispatch({
|
||||
type: 'chunkModel/get_chunk',
|
||||
payload: {
|
||||
chunk_id
|
||||
},
|
||||
callback(info: any) {
|
||||
console.log(info)
|
||||
const { content_ltks, important_kwd = [] } = info
|
||||
form.setFieldsValue({ content_ltks })
|
||||
setImportantKwd(important_kwd)
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [chunk_id, isShowCreateModal])
|
||||
const [form] = Form.useForm()
|
||||
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 name!' }]}
|
||||
>
|
||||
<Input.TextArea />
|
||||
</Form.Item>
|
||||
<EditTag tags={important_kwd} setTags={setImportantKwd} />
|
||||
</Form>
|
||||
</Modal >
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
export default connect(({ chunkModel, loading }) => ({ chunkModel, loading }))(Index);
|
||||
@@ -0,0 +1,142 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import type { InputRef } from 'antd';
|
||||
import { Input, Space, Tag, theme, Tooltip } from 'antd';
|
||||
interface editTagsProps {
|
||||
tags: any[],
|
||||
setTags: (tags: any[]) => void
|
||||
}
|
||||
const App: React.FC<editTagsProps> = ({ tags, setTags }) => {
|
||||
const { token } = theme.useToken();
|
||||
|
||||
const [inputVisible, setInputVisible] = useState(false);
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
const [editInputIndex, setEditInputIndex] = useState(-1);
|
||||
const [editInputValue, setEditInputValue] = useState('');
|
||||
const inputRef = useRef<InputRef>(null);
|
||||
const editInputRef = useRef<InputRef>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (inputVisible) {
|
||||
inputRef.current?.focus();
|
||||
}
|
||||
}, [inputVisible]);
|
||||
|
||||
useEffect(() => {
|
||||
editInputRef.current?.focus();
|
||||
}, [editInputValue]);
|
||||
|
||||
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.includes(inputValue)) {
|
||||
setTags([...tags, inputValue]);
|
||||
}
|
||||
setInputVisible(false);
|
||||
setInputValue('');
|
||||
};
|
||||
|
||||
const handleEditInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setEditInputValue(e.target.value);
|
||||
};
|
||||
|
||||
const handleEditInputConfirm = () => {
|
||||
const newTags = [...tags];
|
||||
newTags[editInputIndex] = editInputValue;
|
||||
setTags(newTags);
|
||||
setEditInputIndex(-1);
|
||||
setEditInputValue('');
|
||||
};
|
||||
|
||||
const tagInputStyle: React.CSSProperties = {
|
||||
width: 64,
|
||||
height: 22,
|
||||
marginInlineEnd: 8,
|
||||
verticalAlign: 'top',
|
||||
};
|
||||
|
||||
const tagPlusStyle: React.CSSProperties = {
|
||||
height: 22,
|
||||
background: token.colorBgContainer,
|
||||
borderStyle: 'dashed',
|
||||
};
|
||||
|
||||
return (
|
||||
<Space size={[0, 8]} wrap>
|
||||
{tags.map((tag, index) => {
|
||||
if (editInputIndex === index) {
|
||||
return (
|
||||
<Input
|
||||
ref={editInputRef}
|
||||
key={tag}
|
||||
size="small"
|
||||
style={tagInputStyle}
|
||||
value={editInputValue}
|
||||
onChange={handleEditInputChange}
|
||||
onBlur={handleEditInputConfirm}
|
||||
onPressEnter={handleEditInputConfirm}
|
||||
/>
|
||||
);
|
||||
}
|
||||
const isLongTag = tag.length > 20;
|
||||
const tagElem = (
|
||||
<Tag
|
||||
key={tag}
|
||||
closable={index !== 0}
|
||||
style={{ userSelect: 'none' }}
|
||||
onClose={() => handleClose(tag)}
|
||||
>
|
||||
<span
|
||||
onDoubleClick={(e) => {
|
||||
if (index !== 0) {
|
||||
setEditInputIndex(index);
|
||||
setEditInputValue(tag);
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{isLongTag ? `${tag.slice(0, 20)}...` : tag}
|
||||
</span>
|
||||
</Tag>
|
||||
);
|
||||
return isLongTag ? (
|
||||
<Tooltip title={tag} key={tag}>
|
||||
{tagElem}
|
||||
</Tooltip>
|
||||
) : (
|
||||
tagElem
|
||||
);
|
||||
})}
|
||||
{inputVisible ? (
|
||||
<Input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
size="small"
|
||||
style={tagInputStyle}
|
||||
value={inputValue}
|
||||
onChange={handleInputChange}
|
||||
onBlur={handleInputConfirm}
|
||||
onPressEnter={handleInputConfirm}
|
||||
/>
|
||||
) : (
|
||||
<Tag style={tagPlusStyle} onClick={showInput}>
|
||||
添加关键词
|
||||
</Tag>
|
||||
)}
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,70 @@
|
||||
.chunkPage {
|
||||
padding: 24px;
|
||||
|
||||
display: flex;
|
||||
height: calc(100vh - 112px);
|
||||
flex-direction: column;
|
||||
|
||||
.filter {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
height: 32px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.pageContent {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
padding-right: 12px;
|
||||
overflow-y: auto;
|
||||
|
||||
.spin {
|
||||
min-height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.pageFooter {
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.context {
|
||||
flex: 1;
|
||||
// width: 207px;
|
||||
height: 88px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 20px;
|
||||
|
||||
.text {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
:global {
|
||||
.ant-card-body {
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
224
web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx
Normal file
224
web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx
Normal file
@@ -0,0 +1,224 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import { useNavigate, connect, Dispatch } from 'umi'
|
||||
import { Card, Row, Col, Input, Select, Switch, Pagination, Spin, Button, Popconfirm } from 'antd';
|
||||
import { MinusSquareOutlined, DeleteOutlined, } from '@ant-design/icons';
|
||||
import type { PaginationProps } from 'antd';
|
||||
import { api_host } from '@/utils/api'
|
||||
import CreateModal from './createModal'
|
||||
|
||||
|
||||
import styles from './index.less'
|
||||
import { debounce } from 'lodash';
|
||||
import type { chunkModelState } from './model'
|
||||
interface chunkProps {
|
||||
dispatch: Dispatch;
|
||||
chunkModel: chunkModelState;
|
||||
doc_id: string
|
||||
}
|
||||
const Index: React.FC<chunkProps> = ({ chunkModel, dispatch, doc_id }) => {
|
||||
const [keywords, SetKeywords] = useState('')
|
||||
const [available_int, setAvailableInt] = useState(-1)
|
||||
const navigate = useNavigate()
|
||||
const [pagination, setPagination] = useState({ page: 1, size: 30 })
|
||||
// const [datas, setDatas] = useState(data)
|
||||
const { data = [], total, loading } = chunkModel
|
||||
console.log(chunkModel)
|
||||
const getChunkList = (value?: string) => {
|
||||
dispatch({
|
||||
type: 'chunkModel/updateState',
|
||||
payload: {
|
||||
loading: true
|
||||
}
|
||||
});
|
||||
interface payloadType {
|
||||
doc_id: string;
|
||||
keywords?: string;
|
||||
available_int?: number
|
||||
}
|
||||
const payload: payloadType = {
|
||||
doc_id,
|
||||
keywords: value || keywords,
|
||||
available_int
|
||||
}
|
||||
if (payload.available_int === -1) {
|
||||
delete payload.available_int
|
||||
}
|
||||
dispatch({
|
||||
type: 'chunkModel/chunk_list',
|
||||
payload: {
|
||||
...payload,
|
||||
...pagination
|
||||
}
|
||||
});
|
||||
}
|
||||
const confirm = (id: string) => {
|
||||
console.log(id)
|
||||
dispatch({
|
||||
type: 'chunkModel/rm_chunk',
|
||||
payload: {
|
||||
chunk_ids: [id]
|
||||
},
|
||||
callback: getChunkList
|
||||
});
|
||||
};
|
||||
const handleEditchunk = (chunk_id?: string) => {
|
||||
dispatch({
|
||||
type: 'chunkModel/updateState',
|
||||
payload: {
|
||||
isShowCreateModal: true,
|
||||
chunk_id
|
||||
},
|
||||
callback: getChunkList
|
||||
});
|
||||
}
|
||||
const onShowSizeChange: PaginationProps['onShowSizeChange'] = (page, size) => {
|
||||
setPagination({ page, size })
|
||||
};
|
||||
const switchChunk = (id: string, available_int: boolean) => {
|
||||
dispatch({
|
||||
type: 'chunkModel/updateState',
|
||||
payload: {
|
||||
loading: true
|
||||
}
|
||||
});
|
||||
dispatch({
|
||||
type: 'chunkModel/switch_chunk',
|
||||
payload: {
|
||||
chunk_ids: [id],
|
||||
available_int: Number(available_int),
|
||||
doc_id
|
||||
},
|
||||
callback: getChunkList
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getChunkList()
|
||||
}, [doc_id, available_int, pagination])
|
||||
const debounceChange = debounce(getChunkList, 300)
|
||||
const debounceCallback = useCallback((value: string) => debounceChange(value), [])
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const value = e.target.value
|
||||
SetKeywords(value)
|
||||
debounceCallback(value)
|
||||
}
|
||||
const handleSelectChange = (value: number) => {
|
||||
setAvailableInt(value)
|
||||
}
|
||||
console.log('loading', loading)
|
||||
return (<>
|
||||
<div className={styles.chunkPage}>
|
||||
<div className={styles.filter}>
|
||||
<div>
|
||||
<Input placeholder="搜索" style={{ width: 220 }} value={keywords} allowClear onChange={handleInputChange} />
|
||||
<Select
|
||||
showSearch
|
||||
placeholder="是否启用"
|
||||
optionFilterProp="children"
|
||||
value={available_int}
|
||||
onChange={handleSelectChange}
|
||||
style={{ width: 220 }}
|
||||
options={[
|
||||
{
|
||||
value: -1,
|
||||
label: '全部',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '启用',
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
label: '未启用',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
</div>
|
||||
<Button onClick={() => { handleEditchunk() }} type='link'>添加分段</Button>
|
||||
</div>
|
||||
<div className={styles.pageContent}>
|
||||
<Spin spinning={loading} className={styles.spin} size='large'>
|
||||
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24 }} >
|
||||
{
|
||||
data.map((item: any) => {
|
||||
return (<Col className="gutter-row" key={item.chunk_id} xs={24} sm={12} md={12} lg={8}>
|
||||
<Card className={styles.card}
|
||||
onClick={() => { handleEditchunk(item.chunk_id) }}
|
||||
>
|
||||
<img style={{ width: '50px' }} src={`${api_host}/document/image/${item.img_id}`} alt="" />
|
||||
<div className={styles.container}>
|
||||
<div className={styles.content}>
|
||||
<span className={styles.context}>
|
||||
{item.content_ltks}
|
||||
</span>
|
||||
<span className={styles.delete}>
|
||||
<Switch size="small" defaultValue={item.available_int == '1'} onChange={(checked: boolean, e: any) => {
|
||||
e.stopPropagation();
|
||||
e.nativeEvent.stopImmediatePropagation(); switchChunk(item.chunk_id, checked)
|
||||
}} />
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.footer}>
|
||||
<span className={styles.text}>
|
||||
<MinusSquareOutlined />{item.doc_num}文档
|
||||
</span>
|
||||
<span className={styles.text}>
|
||||
<MinusSquareOutlined />{item.chunk_num}个
|
||||
</span>
|
||||
<span className={styles.text}>
|
||||
<MinusSquareOutlined />{item.token_num}千字符
|
||||
</span>
|
||||
<span style={{ float: 'right' }}>
|
||||
<Popconfirm
|
||||
title="Delete the task"
|
||||
description="Are you sure to delete this task?"
|
||||
onConfirm={(e: any) => {
|
||||
e.stopPropagation();
|
||||
e.nativeEvent.stopImmediatePropagation()
|
||||
console.log(confirm)
|
||||
confirm(item.chunk_id)
|
||||
|
||||
}}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
<DeleteOutlined onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
e.nativeEvent.stopImmediatePropagation()
|
||||
}} />
|
||||
</Popconfirm>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Card>
|
||||
</Col>)
|
||||
})
|
||||
}
|
||||
</Row>
|
||||
</Spin>
|
||||
|
||||
</div>
|
||||
<div className={styles.pageFooter}>
|
||||
<Pagination
|
||||
responsive
|
||||
showLessItems
|
||||
showQuickJumper
|
||||
showSizeChanger
|
||||
onChange={onShowSizeChange}
|
||||
defaultPageSize={30}
|
||||
pageSizeOptions={[30, 60, 90]}
|
||||
defaultCurrent={pagination.page}
|
||||
total={total}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div >
|
||||
<CreateModal doc_id={doc_id} getChunkList={getChunkList} />
|
||||
</>
|
||||
)
|
||||
};
|
||||
|
||||
export default connect(({ chunkModel, loading }) => ({ chunkModel, loading }))(Index);
|
||||
134
web/src/pages/add-knowledge/components/knowledge-chunk/model.ts
Normal file
134
web/src/pages/add-knowledge/components/knowledge-chunk/model.ts
Normal file
@@ -0,0 +1,134 @@
|
||||
import { Effect, Reducer, Subscription } from 'umi'
|
||||
import { message } from 'antd';
|
||||
import kbService from '@/services/kbService';
|
||||
|
||||
export interface chunkModelState {
|
||||
loading: boolean;
|
||||
data: any[];
|
||||
total: number;
|
||||
isShowCreateModal: boolean;
|
||||
chunk_id: string;
|
||||
chunkInfo: any
|
||||
}
|
||||
export interface chunkgModelType {
|
||||
namespace: 'chunkModel';
|
||||
state: chunkModelState;
|
||||
effects: {
|
||||
chunk_list: Effect;
|
||||
get_chunk: Effect;
|
||||
create_hunk: Effect;
|
||||
switch_chunk: Effect;
|
||||
rm_chunk: Effect;
|
||||
};
|
||||
reducers: {
|
||||
updateState: Reducer<chunkModelState>;
|
||||
};
|
||||
subscriptions: { setup: Subscription };
|
||||
}
|
||||
const Model: chunkgModelType = {
|
||||
namespace: 'chunkModel',
|
||||
state: {
|
||||
loading: false,
|
||||
data: [],
|
||||
total: 0,
|
||||
isShowCreateModal: false,
|
||||
chunk_id: '',
|
||||
chunkInfo: {}
|
||||
},
|
||||
subscriptions: {
|
||||
setup({ dispatch, history }) {
|
||||
history.listen(location => {
|
||||
console.log(location)
|
||||
});
|
||||
}
|
||||
},
|
||||
effects: {
|
||||
* chunk_list({ payload = {}, callback }, { call, put }) {
|
||||
const { data, response } = yield call(kbService.chunk_list, payload);
|
||||
|
||||
const { retcode, data: res, retmsg } = data
|
||||
if (retcode === 0) {
|
||||
console.log(res)
|
||||
yield put({
|
||||
type: 'updateState',
|
||||
payload: {
|
||||
data: res.chunks,
|
||||
total: res.total,
|
||||
loading: false
|
||||
}
|
||||
});
|
||||
callback && callback()
|
||||
|
||||
}
|
||||
},
|
||||
*switch_chunk({ payload = {}, callback }, { call, put }) {
|
||||
const { data, response } = yield call(kbService.switch_chunk, payload);
|
||||
const { retcode, data: res, retmsg } = data
|
||||
if (retcode === 0) {
|
||||
callback && callback()
|
||||
|
||||
}
|
||||
},
|
||||
*rm_chunk({ payload = {}, callback }, { call, put }) {
|
||||
console.log('shanchu')
|
||||
const { data, response } = yield call(kbService.rm_chunk, payload);
|
||||
const { retcode, data: res, retmsg } = data
|
||||
if (retcode === 0) {
|
||||
callback && callback()
|
||||
|
||||
}
|
||||
},
|
||||
* get_chunk({ payload = {}, callback }, { call, put }) {
|
||||
const { data, response } = yield call(kbService.get_chunk, payload);
|
||||
const { retcode, data: res, retmsg } = data
|
||||
if (retcode === 0) {
|
||||
|
||||
yield put({
|
||||
type: 'updateState',
|
||||
payload: {
|
||||
chunkInfo: res
|
||||
}
|
||||
});
|
||||
callback && callback(res)
|
||||
|
||||
}
|
||||
},
|
||||
*create_hunk({ payload = {} }, { call, put }) {
|
||||
yield put({
|
||||
type: 'updateState',
|
||||
payload: {
|
||||
loading: true
|
||||
}
|
||||
});
|
||||
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
|
||||
yield put({
|
||||
type: 'updateState',
|
||||
payload: {
|
||||
loading: false
|
||||
}
|
||||
});
|
||||
if (retcode === 0) {
|
||||
yield put({
|
||||
type: 'updateState',
|
||||
payload: {
|
||||
isShowCreateModal: false
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
reducers: {
|
||||
updateState(state, { payload }) {
|
||||
return {
|
||||
...state,
|
||||
...payload
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
export default Model;
|
||||
Reference in New Issue
Block a user