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/components/chunk-method-modal/index.tsx

@@ -22,6 +22,7 @@ import React, { useEffect, useMemo } from 'react';
 import { useFetchParserListOnMount } from './hooks';
 
 import { useTranslate } from '@/hooks/common-hooks';
+import EntityTypesForm from '../entity-types-form';
 import LayoutRecognize from '../layout-recognize';
 import ParseConfiguration, {
   showRaptorParseConfiguration,
@@ -41,7 +42,14 @@ interface IProps extends Omit<IModalManagerChildrenProps, 'showModal'> {
   documentId: string;
 }
 
-const hidePagesChunkMethods = ['qa', 'table', 'picture', 'resume', 'one'];
+const hidePagesChunkMethods = [
+  'qa',
+  'table',
+  'picture',
+  'resume',
+  'one',
+  'knowledge_graph',
+];
 
 const ChunkMethodModal: React.FC<IProps> = ({
   documentId,
@@ -80,7 +88,7 @@ const ChunkMethodModal: React.FC<IProps> = ({
     return (
       isPdf &&
       hidePagesChunkMethods
-        .filter((x) => x !== 'one')
+        .filter((x) => x !== 'one' && x !== 'knowledge_graph')
         .every((x) => x !== selectedTag)
     );
   }, [selectedTag, isPdf]);
@@ -91,6 +99,8 @@ const ChunkMethodModal: React.FC<IProps> = ({
     (x) => x === false,
   );
 
+  const showEntityTypes = selectedTag === 'knowledge_graph';
+
   const afterClose = () => {
     form.resetFields();
   };
@@ -262,6 +272,7 @@ const ChunkMethodModal: React.FC<IProps> = ({
         {showRaptorParseConfiguration(selectedTag) && (
           <ParseConfiguration></ParseConfiguration>
         )}
+        {showEntityTypes && <EntityTypesForm></EntityTypesForm>}
       </Form>
     </Modal>
   );

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

@@ -7,8 +7,8 @@ import React, { useEffect, useRef, useState } from 'react';
 import styles from './index.less';
 
 interface EditTagsProps {
-  tags: string[];
-  setTags: (tags: string[]) => void;
+  tags?: string[];
+  setTags?: (tags: string[]) => void;
 }
 
 const EditTag = ({ tags, setTags }: EditTagsProps) => {
@@ -24,9 +24,8 @@ const EditTag = ({ tags, setTags }: EditTagsProps) => {
   }, [inputVisible]);
 
   const handleClose = (removedTag: string) => {
-    const newTags = tags.filter((tag) => tag !== removedTag);
-    console.log(newTags);
-    setTags(newTags);
+    const newTags = tags?.filter((tag) => tag !== removedTag);
+    setTags?.(newTags ?? []);
   };
 
   const showInput = () => {
@@ -38,8 +37,8 @@ const EditTag = ({ tags, setTags }: EditTagsProps) => {
   };
 
   const handleInputConfirm = () => {
-    if (inputValue && tags.indexOf(inputValue) === -1) {
-      setTags([...tags, inputValue]);
+    if (inputValue && tags?.indexOf(inputValue) === -1) {
+      setTags?.([...tags, inputValue]);
     }
     setInputVisible(false);
     setInputValue('');
@@ -64,7 +63,7 @@ const EditTag = ({ tags, setTags }: EditTagsProps) => {
     );
   };
 
-  const tagChild = tags.map(forMap);
+  const tagChild = tags?.map(forMap);
 
   const tagPlusStyle: React.CSSProperties = {
     background: token.colorBgContainer,

web/src/components/entity-types-form.tsx

@@ -0,0 +1,29 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { Form } from 'antd';
+import EditTag from './edit-tag';
+
+const initialEntityTypes = [
+  'organization',
+  'person',
+  'location',
+  'event',
+  'time',
+];
+
+const EntityTypesForm = () => {
+  const { t } = useTranslate('knowledgeConfiguration');
+  return (
+    <Form.Item
+      name={['parser_config', 'entity_types']}
+      label={t('entityTypes')}
+      rules={[{ required: true }]}
+      initialValue={initialEntityTypes}
+      valuePropName="tags"
+      trigger="setTags"
+    >
+      <EditTag></EditTag>
+    </Form.Item>
+  );
+};
+
+export default EntityTypesForm;

web/src/components/parse-configuration/index.tsx

@@ -12,7 +12,13 @@ import {
 } from 'antd';
 import random from 'lodash/random';
 
-export const excludedParseMethods = ['table', 'resume', 'one', 'picture'];
+export const excludedParseMethods = [
+  'table',
+  'resume',
+  'one',
+  'picture',
+  'knowledge_graph',
+];
 
 export const showRaptorParseConfiguration = (parserId: string) => {
   return !excludedParseMethods.includes(parserId);

web/src/locales/en.ts

@@ -289,6 +289,7 @@ The above is the content you need to summarize.`,
       maxClusterMessage: 'Max cluster is required',
       randomSeed: 'Random seed',
       randomSeedMessage: 'Random seed is required',
+      entityTypes: 'Entity types',
     },
     chunk: {
       chunk: 'Chunk',

web/src/locales/zh-traditional.ts

@@ -261,6 +261,7 @@ export default {
       maxTokenTip: '用於匯總的最大token數。',
       thresholdTip: '閾值越大，聚類越少。',
       maxClusterTip: '最大聚類數。',
+      entityTypes: '實體類型',
     },
     chunk: {
       chunk: '解析塊',

web/src/locales/zh.ts

@@ -278,6 +278,7 @@ export default {
       maxTokenTip: '用于汇总的最大token数。',
       thresholdTip: '阈值越大，聚类越少。',
       maxClusterTip: '最大聚类数。',
+      entityTypes: '实体类型',
     },
     chunk: {
       chunk: '解析块',

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-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');