balibabu
commited on
Commit
·
81364e6
1
Parent(s):
4eabbf5
fix: delete chunk by @tanstack/react-query #1306 (#1749)
Browse files### What problem does this PR solve?
fix: delete chunk by @tanstack/react-query #1306
### Type of change
- [x] Bug Fix (non-breaking change which fixes an issue)
- web/src/hooks/chunk-hooks.ts +100 -22
- web/src/hooks/knowledge-hooks.ts +0 -31
- web/src/interfaces/common.ts +1 -1
- web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-creating-modal/index.tsx +25 -53
- web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-toolbar/index.tsx +0 -9
- web/src/pages/add-knowledge/components/knowledge-chunk/hooks.ts +77 -17
- web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx +36 -46
- web/src/pages/add-knowledge/components/knowledge-chunk/model.ts +0 -160
- web/typings.d.ts +0 -2
web/src/hooks/chunk-hooks.ts
CHANGED
@@ -1,32 +1,19 @@
|
|
1 |
-
import { ResponseGetType } from '@/interfaces/database/base';
|
2 |
import { IChunk, IKnowledgeFile } from '@/interfaces/database/knowledge';
|
3 |
import kbService from '@/services/knowledge-service';
|
4 |
-
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
5 |
import { useDebounce } from 'ahooks';
|
6 |
-
import { PaginationProps } from 'antd';
|
7 |
import { useCallback, useState } from 'react';
|
8 |
-
import {
|
9 |
import {
|
10 |
useGetPaginationWithRouter,
|
11 |
useHandleSearchChange,
|
12 |
} from './logic-hooks';
|
13 |
-
import {
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
const { documentId } = useGetKnowledgeSearchParams();
|
18 |
-
|
19 |
-
const fetchChunkList = useCallback(() => {
|
20 |
-
dispatch({
|
21 |
-
type: 'chunkModel/chunk_list',
|
22 |
-
payload: {
|
23 |
-
doc_id: documentId,
|
24 |
-
},
|
25 |
-
});
|
26 |
-
}, [dispatch, documentId]);
|
27 |
-
|
28 |
-
return fetchChunkList;
|
29 |
-
};
|
30 |
|
31 |
export interface IChunkListResult {
|
32 |
searchString?: string;
|
@@ -125,6 +112,97 @@ export const useSelectChunkList = () => {
|
|
125 |
documentInfo: IKnowledgeFile;
|
126 |
}>({ queryKey: ['fetchChunkList'] });
|
127 |
|
128 |
-
// console.log('🚀 ~ useSelectChunkList ~ data:', data);
|
129 |
return data?.at(-1)?.[1];
|
130 |
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import { ResponseGetType, ResponseType } from '@/interfaces/database/base';
|
2 |
import { IChunk, IKnowledgeFile } from '@/interfaces/database/knowledge';
|
3 |
import kbService from '@/services/knowledge-service';
|
4 |
+
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
5 |
import { useDebounce } from 'ahooks';
|
6 |
+
import { PaginationProps, message } from 'antd';
|
7 |
import { useCallback, useState } from 'react';
|
8 |
+
import { useTranslation } from 'react-i18next';
|
9 |
import {
|
10 |
useGetPaginationWithRouter,
|
11 |
useHandleSearchChange,
|
12 |
} from './logic-hooks';
|
13 |
+
import {
|
14 |
+
useGetKnowledgeSearchParams,
|
15 |
+
useSetPaginationParams,
|
16 |
+
} from './route-hook';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
17 |
|
18 |
export interface IChunkListResult {
|
19 |
searchString?: string;
|
|
|
112 |
documentInfo: IKnowledgeFile;
|
113 |
}>({ queryKey: ['fetchChunkList'] });
|
114 |
|
|
|
115 |
return data?.at(-1)?.[1];
|
116 |
};
|
117 |
+
|
118 |
+
export const useDeleteChunk = () => {
|
119 |
+
const queryClient = useQueryClient();
|
120 |
+
const { setPaginationParams } = useSetPaginationParams();
|
121 |
+
const {
|
122 |
+
data,
|
123 |
+
isPending: loading,
|
124 |
+
mutateAsync,
|
125 |
+
} = useMutation({
|
126 |
+
mutationKey: ['deleteChunk'],
|
127 |
+
mutationFn: async (params: { chunkIds: string[]; documentId: string }) => {
|
128 |
+
const { data } = await kbService.rm_chunk(params);
|
129 |
+
if (data.retcode === 0) {
|
130 |
+
setPaginationParams(1);
|
131 |
+
queryClient.invalidateQueries({ queryKey: ['fetchChunkList'] });
|
132 |
+
}
|
133 |
+
return data?.retcode;
|
134 |
+
},
|
135 |
+
});
|
136 |
+
|
137 |
+
return { data, loading, deleteChunk: mutateAsync };
|
138 |
+
};
|
139 |
+
|
140 |
+
export const useSwitchChunk = () => {
|
141 |
+
const { t } = useTranslation();
|
142 |
+
const queryClient = useQueryClient();
|
143 |
+
const {
|
144 |
+
data,
|
145 |
+
isPending: loading,
|
146 |
+
mutateAsync,
|
147 |
+
} = useMutation({
|
148 |
+
mutationKey: ['switchChunk'],
|
149 |
+
mutationFn: async (params: {
|
150 |
+
chunk_ids?: string[];
|
151 |
+
available_int?: number;
|
152 |
+
doc_id: string;
|
153 |
+
}) => {
|
154 |
+
const { data } = await kbService.switch_chunk(params);
|
155 |
+
if (data.retcode === 0) {
|
156 |
+
message.success(t('message.modified'));
|
157 |
+
queryClient.invalidateQueries({ queryKey: ['fetchChunkList'] });
|
158 |
+
}
|
159 |
+
return data?.retcode;
|
160 |
+
},
|
161 |
+
});
|
162 |
+
|
163 |
+
return { data, loading, switchChunk: mutateAsync };
|
164 |
+
};
|
165 |
+
|
166 |
+
export const useCreateChunk = () => {
|
167 |
+
const { t } = useTranslation();
|
168 |
+
const queryClient = useQueryClient();
|
169 |
+
|
170 |
+
const {
|
171 |
+
data,
|
172 |
+
isPending: loading,
|
173 |
+
mutateAsync,
|
174 |
+
} = useMutation({
|
175 |
+
mutationKey: ['createChunk'],
|
176 |
+
mutationFn: async (payload: any) => {
|
177 |
+
let service = kbService.create_chunk;
|
178 |
+
if (payload.chunk_id) {
|
179 |
+
service = kbService.set_chunk;
|
180 |
+
}
|
181 |
+
const { data } = await service(payload);
|
182 |
+
if (data.retcode === 0) {
|
183 |
+
message.success(t('message.created'));
|
184 |
+
queryClient.invalidateQueries({ queryKey: ['fetchChunkList'] });
|
185 |
+
}
|
186 |
+
return data?.retcode;
|
187 |
+
},
|
188 |
+
});
|
189 |
+
|
190 |
+
return { data, loading, createChunk: mutateAsync };
|
191 |
+
};
|
192 |
+
|
193 |
+
export const useFetchChunk = (chunkId?: string): ResponseType<any> => {
|
194 |
+
const { data } = useQuery({
|
195 |
+
queryKey: ['fetchChunk'],
|
196 |
+
enabled: !!chunkId,
|
197 |
+
initialData: {},
|
198 |
+
queryFn: async () => {
|
199 |
+
const data = await kbService.get_chunk({
|
200 |
+
chunk_id: chunkId,
|
201 |
+
});
|
202 |
+
|
203 |
+
return data;
|
204 |
+
},
|
205 |
+
});
|
206 |
+
|
207 |
+
return data;
|
208 |
+
};
|
web/src/hooks/knowledge-hooks.ts
CHANGED
@@ -48,37 +48,6 @@ export const useDeleteDocumentById = (): {
|
|
48 |
};
|
49 |
};
|
50 |
|
51 |
-
export const useDeleteChunkByIds = (): {
|
52 |
-
removeChunk: (chunkIds: string[], documentId: string) => Promise<number>;
|
53 |
-
} => {
|
54 |
-
const dispatch = useDispatch();
|
55 |
-
const showDeleteConfirm = useShowDeleteConfirm();
|
56 |
-
|
57 |
-
const removeChunk = useCallback(
|
58 |
-
(chunkIds: string[], documentId: string) => () => {
|
59 |
-
return dispatch({
|
60 |
-
type: 'chunkModel/rm_chunk',
|
61 |
-
payload: {
|
62 |
-
chunk_ids: chunkIds,
|
63 |
-
doc_id: documentId,
|
64 |
-
},
|
65 |
-
});
|
66 |
-
},
|
67 |
-
[dispatch],
|
68 |
-
);
|
69 |
-
|
70 |
-
const onRemoveChunk = useCallback(
|
71 |
-
(chunkIds: string[], documentId: string): Promise<number> => {
|
72 |
-
return showDeleteConfirm({ onOk: removeChunk(chunkIds, documentId) });
|
73 |
-
},
|
74 |
-
[removeChunk, showDeleteConfirm],
|
75 |
-
);
|
76 |
-
|
77 |
-
return {
|
78 |
-
removeChunk: onRemoveChunk,
|
79 |
-
};
|
80 |
-
};
|
81 |
-
|
82 |
export const useFetchKnowledgeBaseConfiguration = () => {
|
83 |
const knowledgeBaseId = useKnowledgeBaseId();
|
84 |
|
|
|
48 |
};
|
49 |
};
|
50 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
51 |
export const useFetchKnowledgeBaseConfiguration = () => {
|
52 |
const knowledgeBaseId = useKnowledgeBaseId();
|
53 |
|
web/src/interfaces/common.ts
CHANGED
@@ -12,7 +12,7 @@ export interface BaseState {
|
|
12 |
export interface IModalProps<T> {
|
13 |
showModal?(): void;
|
14 |
hideModal(): void;
|
15 |
-
visible
|
16 |
loading?: boolean;
|
17 |
onOk?(payload?: T): Promise<any> | void;
|
18 |
}
|
|
|
12 |
export interface IModalProps<T> {
|
13 |
showModal?(): void;
|
14 |
hideModal(): void;
|
15 |
+
visible?: boolean;
|
16 |
loading?: boolean;
|
17 |
onOk?(payload?: T): Promise<any> | void;
|
18 |
}
|
web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-creating-modal/index.tsx
CHANGED
@@ -1,10 +1,10 @@
|
|
1 |
-
import {
|
2 |
-
import {
|
3 |
import { DeleteOutlined } from '@ant-design/icons';
|
4 |
import { Checkbox, Divider, Form, Input, Modal, Space } from 'antd';
|
5 |
-
import React, {
|
6 |
import { useTranslation } from 'react-i18next';
|
7 |
-
import {
|
8 |
import EditTag from '../edit-tag';
|
9 |
|
10 |
type FieldType = {
|
@@ -15,63 +15,39 @@ interface kFProps {
|
|
15 |
chunkId: string | undefined;
|
16 |
}
|
17 |
|
18 |
-
const ChunkCreatingModal: React.FC<kFProps> = ({
|
19 |
-
|
|
|
|
|
|
|
|
|
|
|
20 |
const [form] = Form.useForm();
|
21 |
-
const isShowCreateModal: boolean = useSelector(
|
22 |
-
(state: any) => state.chunkModel.isShowCreateModal,
|
23 |
-
);
|
24 |
const [checked, setChecked] = useState(false);
|
25 |
const [keywords, setKeywords] = useState<string[]>([]);
|
26 |
-
const loading = useOneNamespaceEffectsLoading('chunkModel', ['create_chunk']);
|
27 |
const { removeChunk } = useDeleteChunkByIds();
|
|
|
28 |
const { t } = useTranslation();
|
29 |
|
30 |
-
|
31 |
-
|
32 |
-
|
33 |
-
|
34 |
-
|
35 |
-
};
|
36 |
-
|
37 |
-
const getChunk = useCallback(async () => {
|
38 |
-
console.info(chunkId);
|
39 |
-
if (chunkId && isShowCreateModal) {
|
40 |
-
const data = await dispatch<any>({
|
41 |
-
type: 'chunkModel/get_chunk',
|
42 |
-
payload: {
|
43 |
-
chunk_id: chunkId,
|
44 |
-
},
|
45 |
-
});
|
46 |
-
|
47 |
-
if (data?.retcode === 0) {
|
48 |
-
const { content_with_weight, important_kwd = [] } = data.data;
|
49 |
-
form.setFieldsValue({ content: content_with_weight });
|
50 |
-
setKeywords(important_kwd);
|
51 |
-
}
|
52 |
}
|
53 |
|
54 |
if (!chunkId) {
|
55 |
setKeywords([]);
|
56 |
form.setFieldsValue({ content: undefined });
|
57 |
}
|
58 |
-
}, [
|
59 |
-
|
60 |
-
useEffect(() => {
|
61 |
-
getChunk();
|
62 |
-
}, [getChunk]);
|
63 |
|
64 |
const handleOk = async () => {
|
65 |
try {
|
66 |
const values = await form.validateFields();
|
67 |
-
|
68 |
-
|
69 |
-
|
70 |
-
content_with_weight: values.content,
|
71 |
-
doc_id,
|
72 |
-
chunk_id: chunkId,
|
73 |
-
important_kwd: keywords, // keywords
|
74 |
-
},
|
75 |
});
|
76 |
} catch (errorInfo) {
|
77 |
console.log('Failed:', errorInfo);
|
@@ -90,17 +66,13 @@ const ChunkCreatingModal: React.FC<kFProps> = ({ doc_id, chunkId }) => {
|
|
90 |
return (
|
91 |
<Modal
|
92 |
title={`${chunkId ? t('common.edit') : t('common.create')} ${t('chunk.chunk')}`}
|
93 |
-
open={
|
94 |
onOk={handleOk}
|
95 |
-
onCancel={
|
96 |
okButtonProps={{ loading }}
|
|
|
97 |
>
|
98 |
-
<Form
|
99 |
-
form={form}
|
100 |
-
// name="validateOnly"
|
101 |
-
autoComplete="off"
|
102 |
-
layout={'vertical'}
|
103 |
-
>
|
104 |
<Form.Item<FieldType>
|
105 |
label={t('chunk.chunk')}
|
106 |
name="content"
|
|
|
1 |
+
import { useFetchChunk } from '@/hooks/chunk-hooks';
|
2 |
+
import { IModalProps } from '@/interfaces/common';
|
3 |
import { DeleteOutlined } from '@ant-design/icons';
|
4 |
import { Checkbox, Divider, Form, Input, Modal, Space } from 'antd';
|
5 |
+
import React, { useEffect, useState } from 'react';
|
6 |
import { useTranslation } from 'react-i18next';
|
7 |
+
import { useDeleteChunkByIds } from '../../hooks';
|
8 |
import EditTag from '../edit-tag';
|
9 |
|
10 |
type FieldType = {
|
|
|
15 |
chunkId: string | undefined;
|
16 |
}
|
17 |
|
18 |
+
const ChunkCreatingModal: React.FC<IModalProps<any> & kFProps> = ({
|
19 |
+
doc_id,
|
20 |
+
chunkId,
|
21 |
+
hideModal,
|
22 |
+
onOk,
|
23 |
+
loading,
|
24 |
+
}) => {
|
25 |
const [form] = Form.useForm();
|
|
|
|
|
|
|
26 |
const [checked, setChecked] = useState(false);
|
27 |
const [keywords, setKeywords] = useState<string[]>([]);
|
|
|
28 |
const { removeChunk } = useDeleteChunkByIds();
|
29 |
+
const { data } = useFetchChunk(chunkId);
|
30 |
const { t } = useTranslation();
|
31 |
|
32 |
+
useEffect(() => {
|
33 |
+
if (data?.retcode === 0) {
|
34 |
+
const { content_with_weight, important_kwd = [] } = data.data;
|
35 |
+
form.setFieldsValue({ content: content_with_weight });
|
36 |
+
setKeywords(important_kwd);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
37 |
}
|
38 |
|
39 |
if (!chunkId) {
|
40 |
setKeywords([]);
|
41 |
form.setFieldsValue({ content: undefined });
|
42 |
}
|
43 |
+
}, [data, form, chunkId]);
|
|
|
|
|
|
|
|
|
44 |
|
45 |
const handleOk = async () => {
|
46 |
try {
|
47 |
const values = await form.validateFields();
|
48 |
+
onOk?.({
|
49 |
+
content: values.content,
|
50 |
+
keywords, // keywords
|
|
|
|
|
|
|
|
|
|
|
51 |
});
|
52 |
} catch (errorInfo) {
|
53 |
console.log('Failed:', errorInfo);
|
|
|
66 |
return (
|
67 |
<Modal
|
68 |
title={`${chunkId ? t('common.edit') : t('common.create')} ${t('chunk.chunk')}`}
|
69 |
+
open={true}
|
70 |
onOk={handleOk}
|
71 |
+
onCancel={hideModal}
|
72 |
okButtonProps={{ loading }}
|
73 |
+
destroyOnClose
|
74 |
>
|
75 |
+
<Form form={form} autoComplete="off" layout={'vertical'}>
|
|
|
|
|
|
|
|
|
|
|
76 |
<Form.Item<FieldType>
|
77 |
label={t('chunk.chunk')}
|
78 |
name="content"
|
web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-toolbar/index.tsx
CHANGED
@@ -76,15 +76,6 @@ const ChunkToolBar = ({
|
|
76 |
setIsShowSearchBox(true);
|
77 |
};
|
78 |
|
79 |
-
// const handleSearchChange: ChangeEventHandler<HTMLInputElement> = (e) => {
|
80 |
-
// const val = e.target.value;
|
81 |
-
// dispatch({ type: 'chunkModel/setSearchString', payload: val });
|
82 |
-
// dispatch({
|
83 |
-
// type: 'chunkModel/throttledGetChunkList',
|
84 |
-
// payload: documentInfo.id,
|
85 |
-
// });
|
86 |
-
// };
|
87 |
-
|
88 |
const handleSearchBlur = () => {
|
89 |
if (!searchString?.trim()) {
|
90 |
setIsShowSearchBox(false);
|
|
|
76 |
setIsShowSearchBox(true);
|
77 |
};
|
78 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
79 |
const handleSearchBlur = () => {
|
80 |
if (!searchString?.trim()) {
|
81 |
setIsShowSearchBox(false);
|
web/src/pages/add-knowledge/components/knowledge-chunk/hooks.ts
CHANGED
@@ -1,18 +1,16 @@
|
|
1 |
-
import {
|
2 |
-
|
|
|
|
|
|
|
|
|
|
|
3 |
import { IChunk } from '@/interfaces/database/knowledge';
|
4 |
import { buildChunkHighlights } from '@/utils/document-util';
|
5 |
import { useCallback, useMemo, useState } from 'react';
|
6 |
import { IHighlight } from 'react-pdf-highlighter';
|
7 |
import { ChunkTextMode } from './constant';
|
8 |
|
9 |
-
// export const useSelectChunkList = () => {
|
10 |
-
// const chunkList: IChunk[] = useSelector(
|
11 |
-
// (state: any) => state.chunkModel.data,
|
12 |
-
// );
|
13 |
-
// return chunkList;
|
14 |
-
// };
|
15 |
-
|
16 |
export const useHandleChunkCardClick = () => {
|
17 |
const [selectedChunkId, setSelectedChunkId] = useState<string>('');
|
18 |
|
@@ -50,14 +48,6 @@ export const useGetChunkHighlights = (selectedChunkId: string) => {
|
|
50 |
return { highlights, setWidthAndHeight };
|
51 |
};
|
52 |
|
53 |
-
export const useSelectChunkListLoading = () => {
|
54 |
-
return useOneNamespaceEffectsLoading('chunkModel', [
|
55 |
-
'create_hunk',
|
56 |
-
'chunk_list',
|
57 |
-
'switch_chunk',
|
58 |
-
]);
|
59 |
-
};
|
60 |
-
|
61 |
// Switch chunk text to be fully displayed or ellipse
|
62 |
export const useChangeChunkTextMode = () => {
|
63 |
const [textMode, setTextMode] = useState<ChunkTextMode>(ChunkTextMode.Full);
|
@@ -68,3 +58,73 @@ export const useChangeChunkTextMode = () => {
|
|
68 |
|
69 |
return { textMode, changeChunkTextMode };
|
70 |
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import {
|
2 |
+
useCreateChunk,
|
3 |
+
useDeleteChunk,
|
4 |
+
useSelectChunkList,
|
5 |
+
} from '@/hooks/chunk-hooks';
|
6 |
+
import { useSetModalState, useShowDeleteConfirm } from '@/hooks/common-hooks';
|
7 |
+
import { useGetKnowledgeSearchParams } from '@/hooks/route-hook';
|
8 |
import { IChunk } from '@/interfaces/database/knowledge';
|
9 |
import { buildChunkHighlights } from '@/utils/document-util';
|
10 |
import { useCallback, useMemo, useState } from 'react';
|
11 |
import { IHighlight } from 'react-pdf-highlighter';
|
12 |
import { ChunkTextMode } from './constant';
|
13 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
14 |
export const useHandleChunkCardClick = () => {
|
15 |
const [selectedChunkId, setSelectedChunkId] = useState<string>('');
|
16 |
|
|
|
48 |
return { highlights, setWidthAndHeight };
|
49 |
};
|
50 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
51 |
// Switch chunk text to be fully displayed or ellipse
|
52 |
export const useChangeChunkTextMode = () => {
|
53 |
const [textMode, setTextMode] = useState<ChunkTextMode>(ChunkTextMode.Full);
|
|
|
58 |
|
59 |
return { textMode, changeChunkTextMode };
|
60 |
};
|
61 |
+
|
62 |
+
export const useDeleteChunkByIds = (): {
|
63 |
+
removeChunk: (chunkIds: string[], documentId: string) => Promise<number>;
|
64 |
+
} => {
|
65 |
+
const { deleteChunk } = useDeleteChunk();
|
66 |
+
const showDeleteConfirm = useShowDeleteConfirm();
|
67 |
+
|
68 |
+
const removeChunk = useCallback(
|
69 |
+
(chunkIds: string[], documentId: string) => () => {
|
70 |
+
return deleteChunk({ chunkIds, documentId });
|
71 |
+
},
|
72 |
+
[deleteChunk],
|
73 |
+
);
|
74 |
+
|
75 |
+
const onRemoveChunk = useCallback(
|
76 |
+
(chunkIds: string[], documentId: string): Promise<number> => {
|
77 |
+
return showDeleteConfirm({ onOk: removeChunk(chunkIds, documentId) });
|
78 |
+
},
|
79 |
+
[removeChunk, showDeleteConfirm],
|
80 |
+
);
|
81 |
+
|
82 |
+
return {
|
83 |
+
removeChunk: onRemoveChunk,
|
84 |
+
};
|
85 |
+
};
|
86 |
+
|
87 |
+
export const useUpdateChunk = () => {
|
88 |
+
const [chunkId, setChunkId] = useState<string | undefined>('');
|
89 |
+
const {
|
90 |
+
visible: chunkUpdatingVisible,
|
91 |
+
hideModal: hideChunkUpdatingModal,
|
92 |
+
showModal,
|
93 |
+
} = useSetModalState();
|
94 |
+
const { createChunk, loading } = useCreateChunk();
|
95 |
+
const { documentId } = useGetKnowledgeSearchParams();
|
96 |
+
|
97 |
+
const onChunkUpdatingOk = useCallback(
|
98 |
+
async ({ content, keywords }: { content: string; keywords: string }) => {
|
99 |
+
const retcode = await createChunk({
|
100 |
+
content_with_weight: content,
|
101 |
+
doc_id: documentId,
|
102 |
+
chunk_id: chunkId,
|
103 |
+
important_kwd: keywords, // keywords
|
104 |
+
});
|
105 |
+
|
106 |
+
if (retcode === 0) {
|
107 |
+
hideChunkUpdatingModal();
|
108 |
+
}
|
109 |
+
},
|
110 |
+
[createChunk, hideChunkUpdatingModal, chunkId, documentId],
|
111 |
+
);
|
112 |
+
|
113 |
+
const handleShowChunkUpdatingModal = useCallback(
|
114 |
+
async (id?: string) => {
|
115 |
+
setChunkId(id);
|
116 |
+
showModal();
|
117 |
+
},
|
118 |
+
[showModal],
|
119 |
+
);
|
120 |
+
|
121 |
+
return {
|
122 |
+
chunkUpdatingLoading: loading,
|
123 |
+
onChunkUpdatingOk,
|
124 |
+
chunkUpdatingVisible,
|
125 |
+
hideChunkUpdatingModal,
|
126 |
+
showChunkUpdatingModal: handleShowChunkUpdatingModal,
|
127 |
+
chunkId,
|
128 |
+
documentId,
|
129 |
+
};
|
130 |
+
};
|
web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx
CHANGED
@@ -1,31 +1,25 @@
|
|
1 |
-
import { useFetchNextChunkList } from '@/hooks/chunk-hooks';
|
2 |
-
import { useDeleteChunkByIds } from '@/hooks/knowledge-hooks';
|
3 |
import type { PaginationProps } from 'antd';
|
4 |
import { Divider, Flex, Pagination, Space, Spin, message } from 'antd';
|
5 |
import classNames from 'classnames';
|
6 |
-
import { useCallback,
|
7 |
-
import {
|
8 |
import ChunkCard from './components/chunk-card';
|
9 |
import CreatingModal from './components/chunk-creating-modal';
|
10 |
import ChunkToolBar from './components/chunk-toolbar';
|
11 |
import DocumentPreview from './components/document-preview/preview';
|
12 |
import {
|
13 |
useChangeChunkTextMode,
|
|
|
14 |
useGetChunkHighlights,
|
15 |
useHandleChunkCardClick,
|
|
|
16 |
} from './hooks';
|
17 |
|
18 |
-
import { useTranslation } from 'react-i18next';
|
19 |
import styles from './index.less';
|
20 |
|
21 |
const Chunk = () => {
|
22 |
-
const dispatch = useDispatch();
|
23 |
-
|
24 |
const [selectedChunkIds, setSelectedChunkIds] = useState<string[]>([]);
|
25 |
-
const [searchParams] = useSearchParams();
|
26 |
-
// const loading = useSelectChunkListLoading();
|
27 |
-
const documentId: string = searchParams.get('doc_id') || '';
|
28 |
-
const [chunkId, setChunkId] = useState<string | undefined>();
|
29 |
const { removeChunk } = useDeleteChunkByIds();
|
30 |
const {
|
31 |
data: { documentInfo, data = [], total },
|
@@ -38,20 +32,19 @@ const Chunk = () => {
|
|
38 |
} = useFetchNextChunkList();
|
39 |
const { handleChunkCardClick, selectedChunkId } = useHandleChunkCardClick();
|
40 |
const isPdf = documentInfo?.type === 'pdf';
|
|
|
41 |
const { t } = useTranslation();
|
42 |
const { changeChunkTextMode, textMode } = useChangeChunkTextMode();
|
43 |
-
|
44 |
-
const
|
45 |
-
|
46 |
-
|
47 |
-
|
48 |
-
|
49 |
-
|
50 |
-
|
51 |
-
|
52 |
-
|
53 |
-
[dispatch],
|
54 |
-
);
|
55 |
|
56 |
const onPaginationChange: PaginationProps['onShowSizeChange'] = (
|
57 |
page,
|
@@ -100,7 +93,7 @@ const Chunk = () => {
|
|
100 |
}
|
101 |
}, [selectedChunkIds, documentId, removeChunk, showSelectedChunkWarning]);
|
102 |
|
103 |
-
const
|
104 |
async (available?: number, chunkIds?: string[]) => {
|
105 |
let ids = chunkIds;
|
106 |
if (!chunkIds) {
|
@@ -111,20 +104,17 @@ const Chunk = () => {
|
|
111 |
}
|
112 |
}
|
113 |
|
114 |
-
const resCode: number = await
|
115 |
-
|
116 |
-
|
117 |
-
|
118 |
-
available_int: available,
|
119 |
-
doc_id: documentId,
|
120 |
-
},
|
121 |
});
|
122 |
if (!chunkIds && resCode === 0) {
|
123 |
// getChunkList();
|
124 |
}
|
125 |
},
|
126 |
[
|
127 |
-
|
128 |
documentId,
|
129 |
// getChunkList,
|
130 |
selectedChunkIds,
|
@@ -135,24 +125,15 @@ const Chunk = () => {
|
|
135 |
const { highlights, setWidthAndHeight } =
|
136 |
useGetChunkHighlights(selectedChunkId);
|
137 |
|
138 |
-
useEffect(() => {
|
139 |
-
// getChunkList();
|
140 |
-
return () => {
|
141 |
-
dispatch({
|
142 |
-
type: 'chunkModel/resetFilter', // TODO: need to reset state uniformly
|
143 |
-
});
|
144 |
-
};
|
145 |
-
}, [dispatch]);
|
146 |
-
|
147 |
return (
|
148 |
<>
|
149 |
<div className={styles.chunkPage}>
|
150 |
<ChunkToolBar
|
151 |
selectAllChunk={selectAllChunk}
|
152 |
-
createChunk={
|
153 |
removeChunk={handleRemoveChunk}
|
154 |
checked={selectedChunkIds.length === data.length}
|
155 |
-
switchChunk={
|
156 |
changeChunkTextMode={changeChunkTextMode}
|
157 |
searchString={searchString}
|
158 |
handleInputChange={handleInputChange}
|
@@ -178,12 +159,12 @@ const Chunk = () => {
|
|
178 |
<ChunkCard
|
179 |
item={item}
|
180 |
key={item.chunk_id}
|
181 |
-
editChunk={
|
182 |
checked={selectedChunkIds.some(
|
183 |
(x) => x === item.chunk_id,
|
184 |
)}
|
185 |
handleCheckboxClick={handleSingleCheckboxClick}
|
186 |
-
switchChunk={
|
187 |
clickChunkCard={handleChunkCardClick}
|
188 |
selected={item.chunk_id === selectedChunkId}
|
189 |
textMode={textMode}
|
@@ -212,7 +193,16 @@ const Chunk = () => {
|
|
212 |
}
|
213 |
</Flex>
|
214 |
</div>
|
215 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
216 |
</>
|
217 |
);
|
218 |
};
|
|
|
1 |
+
import { useFetchNextChunkList, useSwitchChunk } from '@/hooks/chunk-hooks';
|
|
|
2 |
import type { PaginationProps } from 'antd';
|
3 |
import { Divider, Flex, Pagination, Space, Spin, message } from 'antd';
|
4 |
import classNames from 'classnames';
|
5 |
+
import { useCallback, useState } from 'react';
|
6 |
+
import { useTranslation } from 'react-i18next';
|
7 |
import ChunkCard from './components/chunk-card';
|
8 |
import CreatingModal from './components/chunk-creating-modal';
|
9 |
import ChunkToolBar from './components/chunk-toolbar';
|
10 |
import DocumentPreview from './components/document-preview/preview';
|
11 |
import {
|
12 |
useChangeChunkTextMode,
|
13 |
+
useDeleteChunkByIds,
|
14 |
useGetChunkHighlights,
|
15 |
useHandleChunkCardClick,
|
16 |
+
useUpdateChunk,
|
17 |
} from './hooks';
|
18 |
|
|
|
19 |
import styles from './index.less';
|
20 |
|
21 |
const Chunk = () => {
|
|
|
|
|
22 |
const [selectedChunkIds, setSelectedChunkIds] = useState<string[]>([]);
|
|
|
|
|
|
|
|
|
23 |
const { removeChunk } = useDeleteChunkByIds();
|
24 |
const {
|
25 |
data: { documentInfo, data = [], total },
|
|
|
32 |
} = useFetchNextChunkList();
|
33 |
const { handleChunkCardClick, selectedChunkId } = useHandleChunkCardClick();
|
34 |
const isPdf = documentInfo?.type === 'pdf';
|
35 |
+
|
36 |
const { t } = useTranslation();
|
37 |
const { changeChunkTextMode, textMode } = useChangeChunkTextMode();
|
38 |
+
const { switchChunk } = useSwitchChunk();
|
39 |
+
const {
|
40 |
+
chunkUpdatingLoading,
|
41 |
+
onChunkUpdatingOk,
|
42 |
+
showChunkUpdatingModal,
|
43 |
+
hideChunkUpdatingModal,
|
44 |
+
chunkId,
|
45 |
+
chunkUpdatingVisible,
|
46 |
+
documentId,
|
47 |
+
} = useUpdateChunk();
|
|
|
|
|
48 |
|
49 |
const onPaginationChange: PaginationProps['onShowSizeChange'] = (
|
50 |
page,
|
|
|
93 |
}
|
94 |
}, [selectedChunkIds, documentId, removeChunk, showSelectedChunkWarning]);
|
95 |
|
96 |
+
const handleSwitchChunk = useCallback(
|
97 |
async (available?: number, chunkIds?: string[]) => {
|
98 |
let ids = chunkIds;
|
99 |
if (!chunkIds) {
|
|
|
104 |
}
|
105 |
}
|
106 |
|
107 |
+
const resCode: number = await switchChunk({
|
108 |
+
chunk_ids: ids,
|
109 |
+
available_int: available,
|
110 |
+
doc_id: documentId,
|
|
|
|
|
|
|
111 |
});
|
112 |
if (!chunkIds && resCode === 0) {
|
113 |
// getChunkList();
|
114 |
}
|
115 |
},
|
116 |
[
|
117 |
+
switchChunk,
|
118 |
documentId,
|
119 |
// getChunkList,
|
120 |
selectedChunkIds,
|
|
|
125 |
const { highlights, setWidthAndHeight } =
|
126 |
useGetChunkHighlights(selectedChunkId);
|
127 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
128 |
return (
|
129 |
<>
|
130 |
<div className={styles.chunkPage}>
|
131 |
<ChunkToolBar
|
132 |
selectAllChunk={selectAllChunk}
|
133 |
+
createChunk={showChunkUpdatingModal}
|
134 |
removeChunk={handleRemoveChunk}
|
135 |
checked={selectedChunkIds.length === data.length}
|
136 |
+
switchChunk={handleSwitchChunk}
|
137 |
changeChunkTextMode={changeChunkTextMode}
|
138 |
searchString={searchString}
|
139 |
handleInputChange={handleInputChange}
|
|
|
159 |
<ChunkCard
|
160 |
item={item}
|
161 |
key={item.chunk_id}
|
162 |
+
editChunk={showChunkUpdatingModal}
|
163 |
checked={selectedChunkIds.some(
|
164 |
(x) => x === item.chunk_id,
|
165 |
)}
|
166 |
handleCheckboxClick={handleSingleCheckboxClick}
|
167 |
+
switchChunk={handleSwitchChunk}
|
168 |
clickChunkCard={handleChunkCardClick}
|
169 |
selected={item.chunk_id === selectedChunkId}
|
170 |
textMode={textMode}
|
|
|
193 |
}
|
194 |
</Flex>
|
195 |
</div>
|
196 |
+
{chunkUpdatingVisible && (
|
197 |
+
<CreatingModal
|
198 |
+
doc_id={documentId}
|
199 |
+
chunkId={chunkId}
|
200 |
+
hideModal={hideChunkUpdatingModal}
|
201 |
+
visible={chunkUpdatingVisible}
|
202 |
+
loading={chunkUpdatingLoading}
|
203 |
+
onOk={onChunkUpdatingOk}
|
204 |
+
/>
|
205 |
+
)}
|
206 |
</>
|
207 |
);
|
208 |
};
|
web/src/pages/add-knowledge/components/knowledge-chunk/model.ts
DELETED
@@ -1,160 +0,0 @@
|
|
1 |
-
import { BaseState } from '@/interfaces/common';
|
2 |
-
import { IChunk, IKnowledgeFile } from '@/interfaces/database/knowledge';
|
3 |
-
import kbService from '@/services/knowledge-service';
|
4 |
-
import { message } from 'antd';
|
5 |
-
import { pick } from 'lodash';
|
6 |
-
// import { delay } from '@/utils/store-util';
|
7 |
-
import i18n from '@/locales/config';
|
8 |
-
import { DvaModel } from 'umi';
|
9 |
-
|
10 |
-
export interface ChunkModelState extends BaseState {
|
11 |
-
data: IChunk[];
|
12 |
-
total: number;
|
13 |
-
isShowCreateModal: boolean;
|
14 |
-
chunk_id: string;
|
15 |
-
doc_id: string;
|
16 |
-
chunkInfo: any;
|
17 |
-
documentInfo: IKnowledgeFile;
|
18 |
-
available?: number;
|
19 |
-
}
|
20 |
-
|
21 |
-
const model: DvaModel<ChunkModelState> = {
|
22 |
-
namespace: 'chunkModel',
|
23 |
-
state: {
|
24 |
-
data: [],
|
25 |
-
total: 0,
|
26 |
-
isShowCreateModal: false,
|
27 |
-
chunk_id: '',
|
28 |
-
doc_id: '',
|
29 |
-
chunkInfo: {},
|
30 |
-
documentInfo: {} as IKnowledgeFile,
|
31 |
-
pagination: {
|
32 |
-
total: 0,
|
33 |
-
current: 1,
|
34 |
-
pageSize: 10,
|
35 |
-
},
|
36 |
-
searchString: '',
|
37 |
-
available: undefined, // set to undefined to select all
|
38 |
-
},
|
39 |
-
reducers: {
|
40 |
-
updateState(state, { payload }) {
|
41 |
-
return {
|
42 |
-
...state,
|
43 |
-
...payload,
|
44 |
-
};
|
45 |
-
},
|
46 |
-
setIsShowCreateModal(state, { payload }) {
|
47 |
-
return {
|
48 |
-
...state,
|
49 |
-
isShowCreateModal:
|
50 |
-
typeof payload === 'boolean' ? payload : !state.isShowCreateModal,
|
51 |
-
};
|
52 |
-
},
|
53 |
-
setAvailable(state, { payload }) {
|
54 |
-
return { ...state, available: payload };
|
55 |
-
},
|
56 |
-
setSearchString(state, { payload }) {
|
57 |
-
return {
|
58 |
-
...state,
|
59 |
-
pagination: { ...state.pagination, current: 1 },
|
60 |
-
searchString: payload,
|
61 |
-
};
|
62 |
-
},
|
63 |
-
setPagination(state, { payload }) {
|
64 |
-
return { ...state, pagination: { ...state.pagination, ...payload } };
|
65 |
-
},
|
66 |
-
resetFilter(state, {}) {
|
67 |
-
return {
|
68 |
-
...state,
|
69 |
-
pagination: {
|
70 |
-
current: 1,
|
71 |
-
pageSize: 10,
|
72 |
-
total: 0,
|
73 |
-
},
|
74 |
-
searchString: '',
|
75 |
-
available: undefined,
|
76 |
-
};
|
77 |
-
},
|
78 |
-
},
|
79 |
-
effects: {
|
80 |
-
*chunk_list({ payload = {} }, { call, put, select }) {
|
81 |
-
const { available, searchString, pagination }: ChunkModelState =
|
82 |
-
yield select((state: any) => state.chunkModel);
|
83 |
-
const { data } = yield call(kbService.chunk_list, {
|
84 |
-
...payload,
|
85 |
-
available_int: available,
|
86 |
-
keywords: searchString,
|
87 |
-
page: pagination.current,
|
88 |
-
size: pagination.pageSize,
|
89 |
-
});
|
90 |
-
const { retcode, data: res } = data;
|
91 |
-
if (retcode === 0) {
|
92 |
-
yield put({
|
93 |
-
type: 'updateState',
|
94 |
-
payload: {
|
95 |
-
data: res.chunks,
|
96 |
-
total: res.total,
|
97 |
-
documentInfo: res.doc,
|
98 |
-
},
|
99 |
-
});
|
100 |
-
}
|
101 |
-
},
|
102 |
-
throttledGetChunkList: [
|
103 |
-
function* ({ payload }, { put }) {
|
104 |
-
yield put({ type: 'chunk_list', payload: { doc_id: payload } });
|
105 |
-
},
|
106 |
-
{ type: 'throttle', ms: 1000 }, // TODO: Provide type support for this effect
|
107 |
-
],
|
108 |
-
*switch_chunk({ payload = {} }, { call }) {
|
109 |
-
const { data } = yield call(kbService.switch_chunk, payload);
|
110 |
-
const { retcode } = data;
|
111 |
-
if (retcode === 0) {
|
112 |
-
message.success(i18n.t('message.modified'));
|
113 |
-
}
|
114 |
-
return retcode;
|
115 |
-
},
|
116 |
-
*rm_chunk({ payload = {} }, { call, put }) {
|
117 |
-
const { data } = yield call(kbService.rm_chunk, payload);
|
118 |
-
const { retcode } = data;
|
119 |
-
if (retcode === 0) {
|
120 |
-
yield put({
|
121 |
-
type: 'setIsShowCreateModal',
|
122 |
-
payload: false,
|
123 |
-
});
|
124 |
-
yield put({ type: 'setPagination', payload: { current: 1 } });
|
125 |
-
yield put({ type: 'chunk_list', payload: pick(payload, ['doc_id']) });
|
126 |
-
}
|
127 |
-
return retcode;
|
128 |
-
},
|
129 |
-
*get_chunk({ payload = {} }, { call, put }) {
|
130 |
-
const { data } = yield call(kbService.get_chunk, payload);
|
131 |
-
const { retcode, data: res } = data;
|
132 |
-
if (retcode === 0) {
|
133 |
-
yield put({
|
134 |
-
type: 'updateState',
|
135 |
-
payload: {
|
136 |
-
chunkInfo: res,
|
137 |
-
},
|
138 |
-
});
|
139 |
-
}
|
140 |
-
return data;
|
141 |
-
},
|
142 |
-
*create_chunk({ payload = {} }, { call, put }) {
|
143 |
-
let service = kbService.create_chunk;
|
144 |
-
if (payload.chunk_id) {
|
145 |
-
service = kbService.set_chunk;
|
146 |
-
}
|
147 |
-
const { data } = yield call(service, payload);
|
148 |
-
const { retcode } = data;
|
149 |
-
if (retcode === 0) {
|
150 |
-
yield put({
|
151 |
-
type: 'setIsShowCreateModal',
|
152 |
-
payload: false,
|
153 |
-
});
|
154 |
-
|
155 |
-
yield put({ type: 'chunk_list', payload: pick(payload, ['doc_id']) });
|
156 |
-
}
|
157 |
-
},
|
158 |
-
},
|
159 |
-
};
|
160 |
-
export default model;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
web/typings.d.ts
CHANGED
@@ -1,4 +1,3 @@
|
|
1 |
-
import { ChunkModelState } from '@/pages/add-knowledge/components/knowledge-chunk/model';
|
2 |
import { KFModelState } from '@/pages/add-knowledge/components/knowledge-file/model';
|
3 |
import { ChatModelState } from '@/pages/chat/model';
|
4 |
|
@@ -12,7 +11,6 @@ function useSelector<TState = RootState, TSelected = unknown>(
|
|
12 |
export interface RootState {
|
13 |
chatModel: ChatModelState;
|
14 |
kFModel: KFModelState;
|
15 |
-
chunkModel: ChunkModelState;
|
16 |
}
|
17 |
|
18 |
declare global {
|
|
|
|
|
1 |
import { KFModelState } from '@/pages/add-knowledge/components/knowledge-file/model';
|
2 |
import { ChatModelState } from '@/pages/chat/model';
|
3 |
|
|
|
11 |
export interface RootState {
|
12 |
chatModel: ChatModelState;
|
13 |
kFModel: KFModelState;
|
|
|
14 |
}
|
15 |
|
16 |
declare global {
|