feat: Add EntityTypesForm #162 (#1777)

### What problem does this PR solve?
feat: Add EntityTypesForm #162

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-creating-modal/index.tsx

@@ -1,3 +1,4 @@
+import EditTag from '@/components/edit-tag';
 import { useFetchChunk } from '@/hooks/chunk-hooks';
 import { IModalProps } from '@/interfaces/common';
 import { DeleteOutlined } from '@ant-design/icons';
@@ -5,7 +6,6 @@ import { Checkbox, Divider, Form, Input, Modal, Space } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDeleteChunkByIds } from '../../hooks';
-import EditTag from '../edit-tag';
 
 type FieldType = {
   content?: string;

web/src/pages/add-knowledge/components/knowledge-chunk/components/edit-tag/index.less

@@ -1,3 +0,0 @@
-.tweenGroup {
-  display: inline-block;
-}

web/src/pages/add-knowledge/components/knowledge-chunk/components/edit-tag/index.tsx

@@ -1,116 +0,0 @@
-import { PlusOutlined } from '@ant-design/icons';
-import type { InputRef } from 'antd';
-import { Input, Tag, theme } from 'antd';
-import { TweenOneGroup } from 'rc-tween-one';
-import React, { useEffect, useRef, useState } from 'react';
-
-import styles from './index.less';
-
-interface EditTagsProps {
-  tags: string[];
-  setTags: (tags: string[]) => void;
-}
-
-const EditTag = ({ tags, setTags }: EditTagsProps) => {
-  const { token } = theme.useToken();
-  const [inputVisible, setInputVisible] = useState(false);
-  const [inputValue, setInputValue] = useState('');
-  const inputRef = useRef<InputRef>(null);
-
-  useEffect(() => {
-    if (inputVisible) {
-      inputRef.current?.focus();
-    }
-  }, [inputVisible]);
-
-  const handleClose = (removedTag: string) => {
-    const newTags = tags.filter((tag) => tag !== removedTag);
-    console.log(newTags);
-    setTags(newTags);
-  };
-
-  const showInput = () => {
-    setInputVisible(true);
-  };
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value);
-  };
-
-  const handleInputConfirm = () => {
-    if (inputValue && tags.indexOf(inputValue) === -1) {
-      setTags([...tags, inputValue]);
-    }
-    setInputVisible(false);
-    setInputValue('');
-  };
-
-  const forMap = (tag: string) => {
-    const tagElem = (
-      <Tag
-        closable
-        onClose={(e) => {
-          e.preventDefault();
-          handleClose(tag);
-        }}
-      >
-        {tag}
-      </Tag>
-    );
-    return (
-      <span key={tag} style={{ display: 'inline-block' }}>
-        {tagElem}
-      </span>
-    );
-  };
-
-  const tagChild = tags.map(forMap);
-
-  const tagPlusStyle: React.CSSProperties = {
-    background: token.colorBgContainer,
-    borderStyle: 'dashed',
-  };
-
-  return (
-    <>
-      <span>
-        <TweenOneGroup
-          className={styles.tweenGroup}
-          enter={{
-            scale: 0.8,
-            opacity: 0,
-            type: 'from',
-            duration: 100,
-          }}
-          onEnd={(e) => {
-            if (e.type === 'appear' || e.type === 'enter') {
-              (e.target as any).style = 'display: inline-block';
-            }
-          }}
-          leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
-          appear={false}
-        >
-          {tagChild}
-        </TweenOneGroup>
-      </span>
-      {inputVisible ? (
-        <Input
-          ref={inputRef}
-          type="text"
-          size="small"
-          style={{ width: 78 }}
-          value={inputValue}
-          onChange={handleInputChange}
-          onBlur={handleInputConfirm}
-          onPressEnter={handleInputConfirm}
-        />
-      ) : (
-        <Tag onClick={showInput} style={tagPlusStyle}>
-          <PlusOutlined />
-        </Tag>
-      )}
-    </>
-  );
-};
-
-export default EditTag;

web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx

@@ -6,6 +6,7 @@ import {
   useSubmitKnowledgeConfiguration,
 } from './hooks';
 
+import EntityTypesForm from '@/components/entity-types-form';
 import LayoutRecognize from '@/components/layout-recognize';
 import MaxTokenNumber from '@/components/max-token-number';
 import ParseConfiguration, {
@@ -98,6 +99,7 @@ const ConfigurationForm = ({ form }: { form: FormInstance }) => {
           ))}
         </Select>
       </Form.Item>
+      <EntityTypesForm></EntityTypesForm>
       <Form.Item noStyle dependencies={['parser_id']}>
         {({ getFieldValue }) => {
           const parserId = getFieldValue('parser_id');