Feat: Display the knowledge graph on the knowledge base page #4543 (#4587)

### What problem does this PR solve?

Feat: Display the knowledge graph on the knowledge base page #4543

### Type of change


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

web/src/components/chunk-method-modal/index.tsx

@@ -30,6 +30,9 @@ import LayoutRecognize from '../layout-recognize';
 import ParseConfiguration, {
   showRaptorParseConfiguration,
 } from '../parse-configuration';
+import GraphRagItems, {
+  showGraphRagItems,
+} from '../parse-configuration/graph-rag-items';
 import styles from './index.less';
 
 interface IProps extends Omit<IModalManagerChildrenProps, 'showModal'> {
@@ -296,6 +299,7 @@ const ChunkMethodModal: React.FC<IProps> = ({
         {showRaptorParseConfiguration(selectedTag) && (
           <ParseConfiguration></ParseConfiguration>
         )}
+        {showGraphRagItems(selectedTag) && <GraphRagItems></GraphRagItems>}
         {showEntityTypes && <EntityTypesItem></EntityTypesItem>}
       </Form>
     </Modal>

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

@@ -5,16 +5,22 @@ import EditTag from './edit-tag';
 const initialEntityTypes = [
   'organization',
   'person',
-  'location',
+  'geo',
   'event',
-  'time',
+  'category',
 ];
 
-const EntityTypesItem = () => {
+type IProps = {
+  field?: string[];
+};
+
+const EntityTypesItem = ({
+  field = ['parser_config', 'entity_types'],
+}: IProps) => {
   const { t } = useTranslate('knowledgeConfiguration');
   return (
     <Form.Item
-      name={['parser_config', 'entity_types']}
+      name={field}
       label={t('entityTypes')}
       rules={[{ required: true }]}
       initialValue={initialEntityTypes}

web/src/components/indented-tree/modal.tsx

@@ -1,16 +1,15 @@
-import { useFetchKnowledgeGraph } from '@/hooks/chunk-hooks';
-import { Modal } from 'antd';
 import { useTranslation } from 'react-i18next';
 import IndentedTree from './indented-tree';
 
+import { useFetchKnowledgeGraph } from '@/hooks/knowledge-hooks';
 import { IModalProps } from '@/interfaces/common';
+import { Modal } from 'antd';
 
 const IndentedTreeModal = ({
-  documentId,
   visible,
   hideModal,
 }: IModalProps<any> & { documentId: string }) => {
-  const { data } = useFetchKnowledgeGraph(documentId);
+  const { data } = useFetchKnowledgeGraph();
   const { t } = useTranslation();
 
   return (
@@ -22,7 +21,7 @@ const IndentedTreeModal = ({
       footer={null}
     >
       <section>
-        <IndentedTree data={data?.data?.mind_map} show></IndentedTree>
+        <IndentedTree data={data?.mind_map} show></IndentedTree>
       </section>
     </Modal>
   );

web/src/components/layout-recognize.tsx

@@ -1,17 +1,35 @@
+import { LlmModelType } from '@/constants/knowledge';
 import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Switch } from 'antd';
+import { useSelectLlmOptionsByModelType } from '@/hooks/llm-hooks';
+import { Form, Select } from 'antd';
+import { useMemo } from 'react';
+
+const enum DocumentType {
+  DeepDOC = 'DeepDOC',
+  PlainText = 'Plain Text',
+}
 
 const LayoutRecognize = () => {
   const { t } = useTranslate('knowledgeDetails');
+  const allOptions = useSelectLlmOptionsByModelType();
+
+  const options = useMemo(() => {
+    const list = [DocumentType.DeepDOC, DocumentType.PlainText].map((x) => ({
+      label: x,
+      value: x,
+    }));
+
+    return [...list, ...allOptions[LlmModelType.Image2text]];
+  }, [allOptions]);
+
   return (
     <Form.Item
       name={['parser_config', 'layout_recognize']}
       label={t('layoutRecognize')}
-      initialValue={true}
-      valuePropName="checked"
+      initialValue={DocumentType.DeepDOC}
       tooltip={t('layoutRecognizeTip')}
     >
-      <Switch />
+      <Select options={options} />
     </Form.Item>
   );
 };

web/src/components/parse-configuration/graph-rag-items.tsx

@@ -0,0 +1,120 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { Divider, Form, Select, Switch } from 'antd';
+import { upperFirst } from 'lodash';
+import { useCallback, useMemo } from 'react';
+import EntityTypesItem from '../entity-types-item';
+
+const excludedTagParseMethods = ['table', 'knowledge_graph', 'tag'];
+
+export const showTagItems = (parserId: string) => {
+  return !excludedTagParseMethods.includes(parserId);
+};
+
+const enum MethodValue {
+  General = 'general',
+  Light = 'light',
+}
+
+export const excludedParseMethods = [
+  'table',
+  'resume',
+  'picture',
+  'knowledge_graph',
+  'qa',
+  'tag',
+];
+
+export const showGraphRagItems = (parserId: string) => {
+  return !excludedParseMethods.includes(parserId);
+};
+
+// The three types "table", "resume" and "one" do not display this configuration.
+const GraphRagItems = () => {
+  const { t } = useTranslate('knowledgeConfiguration');
+
+  const methodOptions = useMemo(() => {
+    return [MethodValue.Light, MethodValue.General].map((x) => ({
+      value: x,
+      label: upperFirst(x),
+    }));
+  }, []);
+
+  const renderWideTooltip = useCallback(
+    (title: React.ReactNode | string) => {
+      return {
+        title: typeof title === 'string' ? t(title) : title,
+        overlayInnerStyle: { width: '50vw' },
+      };
+    },
+    [t],
+  );
+
+  return (
+    <>
+      <Divider></Divider>
+      <Form.Item
+        name={['parser_config', 'graphrag', 'use_graphrag']}
+        label={t('useGraphRag')}
+        initialValue={false}
+        valuePropName="checked"
+        tooltip={renderWideTooltip('useGraphRagTip')}
+      >
+        <Switch />
+      </Form.Item>
+      <Form.Item
+        shouldUpdate={(prevValues, curValues) =>
+          prevValues.parser_config.graphrag.use_graphrag !==
+          curValues.parser_config.graphrag.use_graphrag
+        }
+      >
+        {({ getFieldValue }) => {
+          const useRaptor = getFieldValue([
+            'parser_config',
+            'graphrag',
+            'use_graphrag',
+          ]);
+
+          return (
+            useRaptor && (
+              <>
+                <EntityTypesItem
+                  field={['parser_config', 'graphrag', 'entity_types']}
+                ></EntityTypesItem>
+                <Form.Item
+                  name={['parser_config', 'graphrag', 'method']}
+                  label={t('graphRagMethod')}
+                  tooltip={renderWideTooltip(
+                    <div
+                      dangerouslySetInnerHTML={{
+                        __html: t('graphRagMethodTip'),
+                      }}
+                    ></div>,
+                  )}
+                  initialValue={MethodValue.Light}
+                >
+                  <Select options={methodOptions} />
+                </Form.Item>
+                <Form.Item
+                  name={['parser_config', 'graphrag', 'resolution']}
+                  label={t('resolution')}
+                  tooltip={renderWideTooltip('resolutionTip')}
+                >
+                  <Switch />
+                </Form.Item>
+                <Form.Item
+                  name={['parser_config', 'graphrag', 'community']}
+                  label={t('community')}
+                  tooltip={renderWideTooltip('communityTip')}
+                >
+                  <Switch />
+                </Form.Item>
+              </>
+            )
+          );
+        }}
+      </Form.Item>
+    </>
+  );
+};
+
+export default GraphRagItems;

web/src/components/use-knowledge-graph-item.tsx

@@ -0,0 +1,21 @@
+import { Form, Switch } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+type IProps = {
+  filedName: string[];
+};
+
+export function UseKnowledgeGraphItem({ filedName }: IProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Form.Item
+      label={t('chat.useKnowledgeGraph')}
+      tooltip={t('chat.useKnowledgeGraphTip')}
+      name={filedName}
+      initialValue={false}
+    >
+      <Switch></Switch>
+    </Form.Item>
+  );
+}