123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220 |
- import { apiInterceptors, getChunkStrategies, getDocumentList, syncBatchDocument } from '@/client/api';
- import { DoneIcon, FileError, PendingIcon, SyncIcon } from '@/components/icons';
- import { File, IChunkStrategyResponse, ISyncBatchParameter, StepChangeParams } from '@/types/knowledge';
- import Icon from '@ant-design/icons';
- import { Alert, Button, Collapse, Form, Spin, message } from 'antd';
- import { useEffect, useState } from 'react';
- import { useTranslation } from 'react-i18next';
- import StrategyForm from './strategy-form';
- type IProps = {
- spaceName: string;
- docType: string;
- handleStepChange: (params: StepChangeParams) => void;
- uploadFiles: Array<File>;
- };
- type FieldType = {
- fileStrategies: Array<ISyncBatchParameter>;
- };
- let intervalId: string | number | NodeJS.Timeout | undefined;
- export default function Segmentation(props: IProps) {
- const { spaceName, docType, uploadFiles, handleStepChange } = props;
- const { t } = useTranslation();
- const [form] = Form.useForm();
- const [files, setFiles] = useState(uploadFiles);
- const [loading, setLoading] = useState<boolean>();
- const [strategies, setStrategies] = useState<Array<IChunkStrategyResponse>>([]);
- const [syncStatus, setSyncStatus] = useState<string>('');
- async function getStrategies() {
- setLoading(true);
- const [, allStrategies] = await apiInterceptors(getChunkStrategies());
- setLoading(false);
- setStrategies((allStrategies || [])?.filter(i => i.type.indexOf(docType) > -1));
- }
- useEffect(() => {
- getStrategies();
- return () => {
- intervalId && clearInterval(intervalId);
- };
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
- const handleFinish = async (data: FieldType) => {
- if (checkParameter(data)) {
- setLoading(true);
- const [, result] = await apiInterceptors(syncBatchDocument(spaceName, data.fileStrategies));
- setLoading(false);
- if (result?.tasks && result?.tasks?.length > 0) {
- message.success(`Segemation task start successfully. task id: ${result?.tasks.join(',')}`);
- setSyncStatus('RUNNING');
- const docIds = data.fileStrategies.map(i => i.doc_id);
- intervalId = setInterval(async () => {
- const status = await updateSyncStatus(docIds);
- if (status === 'FINISHED') {
- clearInterval(intervalId);
- setSyncStatus('FINISHED');
- message.success('Congratulation, All files sync successfully.');
- handleStepChange({
- label: 'finish',
- });
- } else if (status === 'FAILED') {
- clearInterval(intervalId);
- handleStepChange({
- label: 'finish',
- });
- }
- }, 3000);
- }
- }
- };
- function checkParameter(data: FieldType) {
- let checked = true;
- if (syncStatus === 'RUNNING') {
- checked = false;
- message.warning('The task is still running, do not submit it again.');
- }
- const { fileStrategies } = data;
- fileStrategies.map(item => {
- const name = item?.chunk_parameters?.chunk_strategy || 'Automatic';
- if (!name) {
- message.error(`Please select chunk strategy for ${item.name}.`);
- checked = false;
- }
- const strategy = strategies.filter(item => item.strategy === name)[0];
- const newParam: any = {
- chunk_strategy: item?.chunk_parameters?.chunk_strategy || 'Automatic',
- };
- if (strategy && strategy.parameters) {
- // remove unused parameter, otherwise api will failed.
- strategy.parameters.forEach(param => {
- const paramName = param.param_name;
- newParam[paramName] = (item?.chunk_parameters as any)[paramName];
- });
- }
- item.chunk_parameters = newParam;
- });
- return checked;
- }
- async function updateSyncStatus(docIds: Array<number>) {
- const [, docs] = await apiInterceptors(
- getDocumentList(spaceName as any, {
- doc_ids: docIds,
- }),
- );
- if (docs?.data && docs?.data.length > 0) {
- const copy = [...files!];
- // set file status one by one
- docs?.data.map(doc => {
- const file = copy?.filter(file => file.doc_id === doc.id)?.[0];
- if (file) {
- file.status = doc.status;
- }
- });
- setFiles(copy);
- // all doc sync finished
- if (docs?.data.every(item => item.status === 'FINISHED' || item.status === 'FAILED')) {
- return 'FINISHED';
- }
- }
- }
- function renderStrategy() {
- if (!strategies || !strategies.length) {
- return <Alert message={`Cannot find one strategy for ${docType} type knowledge.`} type='warning' />;
- }
- return (
- <Form.List name='fileStrategies'>
- {fields => {
- switch (docType) {
- case 'TEXT':
- case 'URL':
- case 'YUQUEURL':
- return fields?.map(field => (
- <StrategyForm
- key={field.key}
- strategies={strategies}
- docType={docType}
- fileName={files![field.name].name}
- field={field}
- />
- ));
- case 'DOCUMENT':
- return (
- <Collapse defaultActiveKey={0} size={files.length > 5 ? 'small' : 'middle'}>
- {fields?.map(field => (
- // field [{name: 0, key: 0, isListField: true, fieldKey: 0}, {name: 1, key: 1, isListField: true, fieldKey: 1}]
- <Collapse.Panel
- header={`${field.name + 1}. ${files![field.name].name}`}
- key={field.key}
- extra={renderSyncStatus(field.name)}
- >
- <StrategyForm
- strategies={strategies}
- docType={docType}
- fileName={files![field.name].name}
- field={field}
- />
- </Collapse.Panel>
- ))}
- </Collapse>
- );
- }
- }}
- </Form.List>
- );
- }
- function renderSyncStatus(index: number) {
- const status = files![index].status;
- switch (status) {
- case 'FINISHED':
- return <Icon component={DoneIcon} />;
- case 'RUNNING':
- return <Icon className='animate-spin animate-infinite' component={SyncIcon} />;
- case 'FAILED':
- return <Icon component={FileError} />;
- default:
- return <Icon component={PendingIcon} />;
- }
- }
- return (
- <Spin spinning={loading}>
- <Form
- labelCol={{ span: 6 }}
- wrapperCol={{ span: 18 }}
- labelAlign='right'
- form={form}
- size='large'
- className='mt-4'
- layout='horizontal'
- name='basic'
- autoComplete='off'
- initialValues={{
- fileStrategies: files,
- }}
- onFinish={handleFinish}
- >
- {renderStrategy()}
- <Form.Item className='mt-4'>
- <Button
- onClick={() => {
- handleStepChange({ label: 'back' });
- }}
- className='mr-4'
- >{`${t('Back')}`}</Button>
- <Button type='primary' htmlType='submit' loading={loading || syncStatus === 'RUNNING'}>
- {t('Process')}
- </Button>
- </Form.Item>
- </Form>
- </Spin>
- );
- }
|