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 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 { useDispatch } from 'umi';
9
  import {
10
  useGetPaginationWithRouter,
11
  useHandleSearchChange,
12
  } from './logic-hooks';
13
- import { useGetKnowledgeSearchParams } from './route-hook';
14
-
15
- export const useFetchChunkList = () => {
16
- const dispatch = useDispatch();
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: boolean;
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 { useDeleteChunkByIds } from '@/hooks/knowledge-hooks';
2
- import { useOneNamespaceEffectsLoading } from '@/hooks/store-hooks';
3
  import { DeleteOutlined } from '@ant-design/icons';
4
  import { Checkbox, Divider, Form, Input, Modal, Space } from 'antd';
5
- import React, { useCallback, useEffect, useState } from 'react';
6
  import { useTranslation } from 'react-i18next';
7
- import { useDispatch, useSelector } from 'umi';
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> = ({ doc_id, chunkId }) => {
19
- const dispatch = useDispatch();
 
 
 
 
 
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
- const handleCancel = () => {
31
- dispatch({
32
- type: 'chunkModel/setIsShowCreateModal',
33
- payload: false,
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
- }, [chunkId, isShowCreateModal, dispatch, form]);
59
-
60
- useEffect(() => {
61
- getChunk();
62
- }, [getChunk]);
63
 
64
  const handleOk = async () => {
65
  try {
66
  const values = await form.validateFields();
67
- dispatch({
68
- type: 'chunkModel/create_chunk',
69
- payload: {
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={isShowCreateModal}
94
  onOk={handleOk}
95
- onCancel={handleCancel}
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 { useSelectChunkList } from '@/hooks/chunk-hooks';
2
- import { useOneNamespaceEffectsLoading } from '@/hooks/store-hooks';
 
 
 
 
 
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, useEffect, useState } from 'react';
7
- import { useDispatch, useSearchParams } from 'umi';
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 handleEditChunk = useCallback(
45
- (chunk_id?: string) => {
46
- setChunkId(chunk_id);
47
-
48
- dispatch({
49
- type: 'chunkModel/setIsShowCreateModal',
50
- payload: true,
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 switchChunk = useCallback(
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 dispatch<any>({
115
- type: 'chunkModel/switch_chunk',
116
- payload: {
117
- chunk_ids: ids,
118
- available_int: available,
119
- doc_id: documentId,
120
- },
121
  });
122
  if (!chunkIds && resCode === 0) {
123
  // getChunkList();
124
  }
125
  },
126
  [
127
- dispatch,
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={handleEditChunk}
153
  removeChunk={handleRemoveChunk}
154
  checked={selectedChunkIds.length === data.length}
155
- switchChunk={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={handleEditChunk}
182
  checked={selectedChunkIds.some(
183
  (x) => x === item.chunk_id,
184
  )}
185
  handleCheckboxClick={handleSingleCheckboxClick}
186
- switchChunk={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
- <CreatingModal doc_id={documentId} chunkId={chunkId} />
 
 
 
 
 
 
 
 
 
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 {