refactor: RAG Refactor (#985)

Co-authored-by: Aralhi <xiaoping0501@gmail.com>
Co-authored-by: csunny <cfqsunny@163.com>

web/components/chat/doc-upload.tsx

@@ -1,5 +1,5 @@
 import { ChatContext } from '@/app/chat-context';
-import { apiInterceptors, syncDocument, uploadDocument } from '@/client/api';
+import { apiInterceptors, uploadDocument } from '@/client/api';
 
 import useSummary from '@/hooks/use-summary';
 import { PaperClipOutlined } from '@ant-design/icons';
@@ -15,12 +15,8 @@ export default function DocUpload(props: IProps) {
   const { dbParam, setDocId } = useContext(ChatContext);
   const { onUploadFinish, handleFinish } = props;
   const summary = useSummary();
-
   const [loading, setLoading] = useState<boolean>(false);
 
-  const handleSync = async (knowledgeName: string, id: number) => {
-    await apiInterceptors(syncDocument(knowledgeName, { doc_ids: [id] }));
-  };
   const handleUpload = async (data: any) => {
     setLoading(true);
     const formData = new FormData();
@@ -36,7 +32,6 @@ export default function DocUpload(props: IProps) {
     }
     setDocId(res[1]);
     onUploadFinish();
-    await handleSync(dbParam || 'default', res?.[1] as number);
     setLoading(false);
     handleFinish?.(true);
     await summary(res[1]);

web/components/common/completion-input.tsx

@@ -41,9 +41,9 @@ function CompletionInput({ children, loading, onSubmit, handleFinish, ...props }
     setDocuments(data?.data!);
   }
 
-  const onUploadFinish = () => {
+  const onUploadFinish = async () => {
     uploadCountRef.current += 1;
-    fetchDocuments();
+    await fetchDocuments();
   };
 
   return (

web/components/icons/done-icon.tsx

@@ -0,0 +1,21 @@
+export default function DoneIcon() {
+  return (
+    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3205" width="1.5em" height="1.5em">
+      <path
+        d="M688 312v-48c0-4.4-3.6-8-8-8H296c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8zM296 400c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H296zM672 516c-119.3 0-216 96.7-216 216s96.7 216 216 216 216-96.7 216-216-96.7-216-216-216z m107.5 323.5C750.8 868.2 712.6 884 672 884s-78.8-15.8-107.5-44.5C535.8 810.8 520 772.6 520 732s15.8-78.8 44.5-107.5C593.2 595.8 631.4 580 672 580s78.8 15.8 107.5 44.5C808.2 653.2 824 691.4 824 732s-15.8 78.8-44.5 107.5z"
+        p-id="3206"
+        fill="#1afa29"
+      ></path>
+      <path
+        d="M761 656h-44.3c-2.6 0-5 1.2-6.5 3.3l-63.5 87.8-23.1-31.9c-1.5-2.1-3.9-3.3-6.5-3.3H573c-6.5 0-10.3 7.4-6.5 12.7l73.8 102.1c3.2 4.4 9.7 4.4 12.9 0l114.2-158c3.9-5.3 0.1-12.7-6.4-12.7z"
+        p-id="3207"
+        fill="#1afa29"
+      ></path>
+      <path
+        d="M440 852H208V148h560v344c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V108c0-17.7-14.3-32-32-32H168c-17.7 0-32 14.3-32 32v784c0 17.7 14.3 32 32 32h272c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"
+        p-id="3208"
+        fill="#1afa29"
+      ></path>
+    </svg>
+  );
+}

web/components/icons/index.tsx

@@ -12,6 +12,10 @@ import SunnySvg from './sunny-svg';
 import Knowledge from './knowledge';
 import FileDone from './file-done';
 import FileSync from './file-sync';
+import PendingIcon from './pending-icon';
+import SyncIcon from './sync-icon';
+import DoneIcon from './done-icon';
+import FileError from './file-error';
 
 export {
   ColorfulDashboard,
@@ -28,4 +32,8 @@ export {
   Knowledge,
   FileDone,
   FileSync,
+  PendingIcon,
+  SyncIcon,
+  DoneIcon,
+  FileError,
 };

web/components/icons/pending-icon.tsx

@@ -0,0 +1,13 @@
+export default function PendingIcon() {
+  return (
+    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4260" width="1.5em" height="1.5em">
+      <path d="M114.5856 951.04h298.24v-71.68H186.2656v-747.52h593.92v271.36h71.68v-343.04h-737.28v890.88z" fill="#747690" p-id="4261"></path>
+      <path
+        d="M662.4256 311.04h-358.4v-71.68h358.4v71.68zM508.8256 490.24h-204.8v-71.68h204.8v71.68zM668.8256 554.24a168.96 168.96 0 1 0 0 337.92 168.96 168.96 0 0 0 0-337.92z m-240.64 168.96a240.64 240.64 0 1 1 481.28 0 240.64 240.64 0 0 1-481.28 0z"
+        fill="#747690"
+        p-id="4262"
+      ></path>
+      <path d="M629.76 588.8h71.68v131.4304l82.5856 41.3184-32.0512 64.1024-122.2144-61.0816V588.8z" fill="#747690" p-id="4263"></path>
+    </svg>
+  );
+}

web/components/icons/sync-icon.tsx

@@ -0,0 +1,11 @@
+export default function SyncIcon() {
+  return (
+    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9211" width="1.5em" height="1.5em">
+      <path
+        d="M151.5 586.2c-5-24.2-7.5-49.2-7.5-74.2s2.5-50 7.5-74.2c4.8-23.6 12-46.8 21.4-69 9.2-21.8 20.6-42.8 33.9-62.5 13.2-19.5 28.3-37.8 45-54.5s35-31.8 54.5-45c19.7-13.3 40.7-24.7 62.5-33.9 22.2-9.4 45.4-16.6 69-21.4 48.5-9.9 99.9-9.9 148.4 0 23.6 4.8 46.8 12 69 21.4 21.8 9.2 42.8 20.6 62.5 33.9 19.5 13.2 37.8 28.3 54.5 45 1.4 1.4 2.8 2.8 4.1 4.2H688c-17.7 0-32 14.3-32 32s14.3 32 32 32h160c17.7 0 32-14.3 32-32V128c0-17.7-14.3-32-32-32s-32 14.3-32 32v77.1c-19.2-19-40.1-36.2-62.4-51.3-23.1-15.6-47.8-29-73.4-39.8-26.1-11-53.4-19.5-81.1-25.2-56.9-11.6-117.1-11.6-174.1 0-27.8 5.7-55.1 14.2-81.1 25.2-25.6 10.8-50.3 24.2-73.4 39.8-22.9 15.4-44.4 33.2-63.9 52.7s-37.3 41-52.7 63.9c-15.6 23.1-29 47.8-39.8 73.4-11 26.1-19.5 53.4-25.2 81.1C83 453.4 80 482.7 80 512s3 58.6 8.8 87c3.1 15.2 16.4 25.6 31.3 25.6 2.1 0 4.3-0.2 6.4-0.7 17.4-3.5 28.5-20.4 25-37.7zM935.2 425c-3.5-17.3-20.5-28.5-37.8-24.9-17.3 3.5-28.5 20.5-24.9 37.8 5 24.2 7.5 49.2 7.5 74.2s-2.5 50-7.5 74.2c-4.8 23.6-12 46.8-21.4 69-9.2 21.8-20.6 42.8-33.9 62.5-13.2 19.5-28.3 37.8-45 54.5s-35 31.8-54.5 45C698 830.6 677 842 655.2 851.2c-22.2 9.4-45.4 16.6-69 21.4-48.5 9.9-99.9 9.9-148.4 0-23.6-4.8-46.8-12-69-21.4-21.8-9.2-42.8-20.6-62.5-33.9-19.5-13.2-37.8-28.3-54.5-45-1.4-1.4-2.8-2.8-4.1-4.2H336c17.7 0 32-14.3 32-32s-14.3-32-32-32H176c-17.7 0-32 14.3-32 32v160c0 17.7 14.3 32 32 32s32-14.3 32-32V819c19.2 19 40.1 36.2 62.4 51.3 23.1 15.6 47.8 29 73.4 39.8 26.1 11 53.4 19.5 81.1 25.2 28.5 5.8 57.7 8.8 87 8.8s58.6-3 87-8.8c27.8-5.7 55-14.2 81.1-25.2 25.6-10.8 50.3-24.2 73.4-39.8 22.9-15.5 44.4-33.2 63.9-52.7s37.3-41 52.7-63.9c15.6-23.1 29-47.8 39.8-73.4 11-26.1 19.5-53.4 25.2-81.1 5.8-28.5 8.8-57.7 8.8-87 0.2-29.5-2.8-58.8-8.6-87.2z"
+        fill="#1875F0"
+        p-id="9212"
+      ></path>
+    </svg>
+  );
+}

web/components/knowledge/doc-panel.tsx

@@ -56,7 +56,7 @@ export default function DocPanel(props: IProps) {
       }),
     );
     setDocuments(data?.data);
-    setTotal(data?.total);
+    setTotal(data?.total || 0);
     setIsLoading(false);
   }
 
@@ -175,7 +175,7 @@ export default function DocPanel(props: IProps) {
                 >
                   <p className="mt-2 font-semibold ">{t('Size')}:</p>
                   <p>{document.chunk_size} chunks</p>
-                  <p className="mt-2 font-semibold ">{t('Last_Synch')}:</p>
+                  <p className="mt-2 font-semibold ">{t('Last_Sync')}:</p>
                   <p>{moment(document.last_sync).format('YYYY-MM-DD HH:MM:SS')}</p>
                   <p className="mt-2 mb-2">{renderResultTag(document.status, document.result)}</p>
                 </Card>

web/components/knowledge/doc-type-form.tsx

@@ -12,19 +12,19 @@ export default function DocTypeForm(props: IProps) {
   const { handleStepChange } = props;
   const docTypeList = [
     {
-      type: 'text',
+      type: 'TEXT',
       title: t('Text'),
       subTitle: t('Fill your raw text'),
       iconType: 'TEXT',
     },
     {
-      type: 'webPage',
+      type: 'URL',
       title: t('URL'),
       subTitle: t('Fetch_the_content_of_a_URL'),
       iconType: 'WEBPAGE',
     },
     {
-      type: 'file',
+      type: 'DOCUMENT',
       title: t('Document'),
       subTitle: t('Upload_a_document'),
       iconType: 'DOCUMENT',

web/components/knowledge/doc-upload-form.tsx

@@ -1,10 +1,12 @@
-import { Button, Form, Input, Switch, Upload, message, Spin } from 'antd';
+import { Button, Form, Input, Upload, Spin, message } from 'antd';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { InboxOutlined } from '@ant-design/icons';
-import { apiInterceptors, addDocument, uploadDocument, syncDocument } from '@/client/api';
+import { apiInterceptors, addDocument, uploadDocument } from '@/client/api';
 import { RcFile, UploadChangeParam } from 'antd/es/upload';
-import { StepChangeParams } from '@/types/knowledge';
+import { File, StepChangeParams } from '@/types/knowledge';
+import { UploadRequestOption as RcCustomRequestOptions } from 'rc-upload/lib/interface';
+import classNames from 'classnames';
 
 type FileParams = {
   file: RcFile;
@@ -12,13 +14,13 @@ type FileParams = {
 };
 
 type IProps = {
+  className: string;
   handleStepChange: (params: StepChangeParams) => void;
   spaceName: string;
   docType: string;
 };
 
 type FieldType = {
-  synchChecked: boolean;
   docName: string;
   textSource: string;
   originFileObj: FileParams;
@@ -30,18 +32,19 @@ const { Dragger } = Upload;
 const { TextArea } = Input;
 
 export default function DocUploadForm(props: IProps) {
-  const { handleStepChange, spaceName, docType } = props;
+  const { className, handleStepChange, spaceName, docType } = props;
   const { t } = useTranslation();
   const [form] = Form.useForm();
   const [spinning, setSpinning] = useState<boolean>(false);
+  const [files, setFiles] = useState<Array<File>>([]);
 
-  const handleFinish = async (data: FieldType) => {
-    const { synchChecked, docName, textSource, originFileObj, text, webPageUrl } = data;
-    let res;
+  const upload = async (data: FieldType) => {
+    const { docName, textSource, text, webPageUrl } = data;
+    let docId;
     setSpinning(true);
     switch (docType) {
-      case 'webPage':
-        res = await apiInterceptors(
+      case 'URL':
+        [, docId] = await apiInterceptors(
           addDocument(spaceName as string, {
             doc_name: docName,
             content: webPageUrl,
@@ -49,16 +52,8 @@ export default function DocUploadForm(props: IProps) {
           }),
         );
         break;
-      case 'file':
-        const formData = new FormData();
-        formData.append('doc_name', docName || originFileObj.file.name);
-        formData.append('doc_file', originFileObj.file);
-        formData.append('doc_type', 'DOCUMENT');
-
-        res = await apiInterceptors(uploadDocument(spaceName as string, formData));
-        break;
-      default:
-        res = await apiInterceptors(
+      case 'TEXT':
+        [, docId] = await apiInterceptors(
           addDocument(spaceName as string, {
             doc_name: docName,
             source: textSource,
@@ -68,38 +63,60 @@ export default function DocUploadForm(props: IProps) {
         );
         break;
     }
-    synchChecked && handleSync?.(spaceName as string, res?.[1] as number);
     setSpinning(false);
-    handleStepChange({ label: 'finish' });
-  };
-
-  const handleSync = async (knowledgeName: string, id: number) => {
-    await apiInterceptors(syncDocument(knowledgeName, { doc_ids: [id] }));
+    if (docType === 'DOCUMENT' && files.length < 1) {
+      return message.error('Upload failed, please re-upload.');
+    } else if (docType !== 'DOCUMENT' && !docId) {
+      return message.error('Upload failed, please re-upload.');
+    }
+    handleStepChange({
+      label: 'forward',
+      files:
+        docType === 'DOCUMENT'
+          ? files
+          : [
+              {
+                name: docName,
+                doc_id: docId || -1,
+              },
+            ],
+    });
   };
 
   const handleFileChange = ({ file, fileList }: UploadChangeParam) => {
-    if (!form.getFieldsValue().docName) {
-      form.setFieldValue('docName', file.name);
-    }
     if (fileList.length === 0) {
       form.setFieldValue('originFileObj', null);
     }
   };
 
-  const beforeUpload = () => {
-    const curFile = form.getFieldsValue().originFileObj;
-    if (!curFile) {
-      return false;
+  const uploadFile = async (options: RcCustomRequestOptions) => {
+    const { onSuccess, onError, file } = options;
+    const formData = new FormData();
+    const filename = file?.name;
+    formData.append('doc_name', filename);
+    formData.append('doc_file', file);
+    formData.append('doc_type', 'DOCUMENT');
+    const [, docId] = await apiInterceptors(uploadDocument(spaceName, formData));
+    if (Number.isInteger(docId)) {
+      onSuccess && onSuccess(docId || 0);
+      setFiles((files) => {
+        files.push({
+          name: filename,
+          doc_id: docId || -1,
+        });
+        return files;
+      });
+    } else {
+      onError && onError({ name: '', message: '' });
     }
-    message.warning(t('Limit_Upload_File_Count_Tips'));
-    return Upload.LIST_IGNORE;
   };
 
-  const renderChooseType = () => {};
-
   const renderText = () => {
     return (
       <>
+        <Form.Item<FieldType> label={`${t('Name')}:`} name="docName" rules={[{ required: true, message: t('Please_input_the_name') }]}>
+          <Input className="mb-5 h-12" placeholder={t('Please_input_the_name')} />
+        </Form.Item>
         <Form.Item<FieldType>
           label={`${t('Text_Source')}:`}
           name="textSource"
@@ -107,7 +124,6 @@ export default function DocUploadForm(props: IProps) {
         >
           <Input className="mb-5  h-12" placeholder={t('Please_input_the_text_source')} />
         </Form.Item>
-
         <Form.Item<FieldType> label={`${t('Text')}:`} name="text" rules={[{ required: true, message: t('Please_input_the_description') }]}>
           <TextArea rows={4} />
         </Form.Item>
@@ -118,7 +134,14 @@ export default function DocUploadForm(props: IProps) {
   const renderWebPage = () => {
     return (
       <>
-        <Form.Item<FieldType> label={`${t('Web_Page_URL')}:`} name="webPageUrl" rules={[{ required: true, message: t('Please_input_the_owner') }]}>
+        <Form.Item<FieldType> label={`${t('Name')}:`} name="docName" rules={[{ required: true, message: t('Please_input_the_name') }]}>
+          <Input className="mb-5 h-12" placeholder={t('Please_input_the_name')} />
+        </Form.Item>
+        <Form.Item<FieldType>
+          label={`${t('Web_Page_URL')}:`}
+          name="webPageUrl"
+          rules={[{ required: true, message: t('Please_input_the_Web_Page_URL') }]}
+        >
           <Input className="mb-5  h-12" placeholder={t('Please_input_the_Web_Page_URL')} />
         </Form.Item>
       </>
@@ -128,8 +151,14 @@ export default function DocUploadForm(props: IProps) {
   const renderDocument = () => {
     return (
       <>
-        <Form.Item<FieldType> name="originFileObj" rules={[{ required: true, message: t('Please_input_the_owner') }]}>
-          <Dragger onChange={handleFileChange} beforeUpload={beforeUpload} multiple={false} accept=".pdf,.ppt,.pptx,.xls,.xlsx,.doc,.docx,.txt,.md">
+        <Form.Item<FieldType> name="originFileObj" rules={[{ required: true, message: t('Please_select_file') }]}>
+          <Dragger
+            multiple
+            onChange={handleFileChange}
+            maxCount={10}
+            accept=".pdf,.ppt,.pptx,.xls,.xlsx,.doc,.docx,.txt,.md"
+            customRequest={uploadFile}
+          >
             <p className="ant-upload-drag-icon">
               <InboxOutlined />
             </p>
@@ -145,9 +174,9 @@ export default function DocUploadForm(props: IProps) {
 
   const renderFormContainer = () => {
     switch (docType) {
-      case 'webPage':
+      case 'URL':
         return renderWebPage();
-      case 'file':
+      case 'DOCUMENT':
         return renderDocument();
       default:
         return renderText();
@@ -159,20 +188,14 @@ export default function DocUploadForm(props: IProps) {
       <Form
         form={form}
         size="large"
-        className="mt-4"
+        className={classNames('mt-4', className)}
         layout="vertical"
         name="basic"
         initialValues={{ remember: true }}
         autoComplete="off"
-        onFinish={handleFinish}
+        onFinish={upload}
       >
-        <Form.Item<FieldType> label={`${t('Name')}:`} name="docName" rules={[{ required: true, message: t('Please_input_the_name') }]}>
-          <Input className="mb-5 h-12" placeholder={t('Please_input_the_name')} />
-        </Form.Item>
         {renderFormContainer()}
-        <Form.Item<FieldType> label={`${t('Synch')}:`} name="synchChecked" initialValue={true}>
-          <Switch className="bg-slate-400" defaultChecked />
-        </Form.Item>
         <Form.Item>
           <Button
             onClick={() => {
@@ -180,8 +203,8 @@ export default function DocUploadForm(props: IProps) {
             }}
             className="mr-4"
           >{`${t('Back')}`}</Button>
-          <Button type="primary" htmlType="submit">
-            {t('Finish')}
+          <Button type="primary" loading={spinning} htmlType="submit">
+            {t('Next')}
           </Button>
         </Form.Item>
       </Form>

web/components/knowledge/segmentation.tsx

@@ -0,0 +1,185 @@
+import { apiInterceptors, getChunkStrategies, getDocumentList, syncBatchDocument } from '@/client/api';
+import { File, IChunkStrategyResponse, ISyncBatchParameter, StepChangeParams } from '@/types/knowledge';
+import { Alert, Button, Collapse, Form, Spin, message } from 'antd';
+import Icon from '@ant-design/icons';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import StrategyForm from './strategy-form';
+import { DoneIcon, PendingIcon, SyncIcon, FileError } from '@/components/icons';
+
+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);
+    };
+  }, []);
+
+  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',
+            });
+          }
+        }, 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) => {
+      if (!item?.chunk_parameters?.chunk_strategy) {
+        message.error(`Please select chunk strategy for ${item.name}.`);
+        checked = false;
+      }
+    });
+    return checked;
+  }
+
+  async function updateSyncStatus(docIds: Array<number>) {
+    const [, docs] = await apiInterceptors(
+      getDocumentList(spaceName, {
+        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':
+              return fields?.map((field) => (
+                <StrategyForm 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>
+  );
+}

web/components/knowledge/strategy-form.tsx

@@ -0,0 +1,79 @@
+import { IChunkStrategyResponse } from '@/types/knowledge';
+import { Alert, Form, FormListFieldData, Input, InputNumber, Radio, RadioChangeEvent } from 'antd';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const { TextArea } = Input;
+
+type IProps = {
+  strategies: Array<IChunkStrategyResponse>;
+  docType: string;
+  field: FormListFieldData;
+  fileName: string;
+};
+
+/**
+ * render strategies by doc type and file suffix
+ */
+export default function StrategyForm({ strategies, docType, fileName, field }: IProps) {
+  let filleSuffix = '';
+  if (docType === 'DOCUMENT') {
+    // filter strategy by file suffix
+    const arr = fileName.split('.');
+    filleSuffix = arr[arr.length - 1];
+  }
+  const ableStrategies = filleSuffix ? strategies.filter((i) => i.suffix.indexOf(filleSuffix) > -1) : strategies;
+  const [selectedStrategy, setSelectedStrategy] = useState<string>();
+  const { t } = useTranslation();
+  const DEFAULT_STRATEGY = {
+    strategy: t('Automatic'),
+    name: t('Automatic'),
+    desc: t('Automatic_desc'),
+  };
+
+  function radioChange(e: RadioChangeEvent) {
+    setSelectedStrategy(e.target.value);
+  }
+
+  function renderStrategyParamForm() {
+    if (!selectedStrategy) {
+      return null;
+    }
+    if (selectedStrategy === DEFAULT_STRATEGY.name) {
+      return <p className="my-4">{DEFAULT_STRATEGY.desc}</p>;
+    }
+    const parameters = ableStrategies?.filter((i) => i.strategy === selectedStrategy)[0].parameters;
+    if (!parameters || !parameters.length) {
+      return <Alert className="my-2" type="warning" message={t('No_parameter')} />;
+    }
+    return (
+      <div className="mt-2">
+        {parameters?.map((param) => (
+          <Form.Item
+            key={`param_${param.param_name}`}
+            label={`${param.param_name}: ${param.param_type}`}
+            name={[field!.name, 'chunk_parameters', param.param_name]}
+            rules={[{ required: true, message: t('Please_input_the_name') }]}
+            initialValue={param.default_value}
+          >
+            {param.param_type === 'int' ? <InputNumber className="w-full" min={1} /> : <TextArea className="w-full" rows={2} maxLength={6} />}
+          </Form.Item>
+        ))}
+      </div>
+    );
+  }
+  return (
+    <>
+      <Form.Item name={[field!.name, 'chunk_parameters', 'chunk_strategy']} initialValue={DEFAULT_STRATEGY.strategy}>
+        <Radio.Group style={{ marginTop: 16 }} onChange={radioChange}>
+          <Radio value={DEFAULT_STRATEGY.strategy}>{DEFAULT_STRATEGY.name}</Radio>
+          {ableStrategies.map((strategy) => (
+            <Radio key={`strategy_radio_${strategy.strategy}`} value={strategy.strategy}>
+              {strategy.name}
+            </Radio>
+          ))}
+        </Radio.Group>
+      </Form.Item>
+      {renderStrategyParamForm()}
+    </>
+  );
+}