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/hooks/chunk-hooks.ts

@@ -206,23 +206,3 @@ export const useFetchChunk = (chunkId?: string): ResponseType<any> => {
 
   return data;
 };
-
-export const useFetchKnowledgeGraph = (
-  documentId: string,
-): ResponseType<any> => {
-  const { data } = useQuery({
-    queryKey: ['fetchKnowledgeGraph', documentId],
-    initialData: true,
-    enabled: !!documentId,
-    gcTime: 0,
-    queryFn: async () => {
-      const data = await kbService.knowledge_graph({
-        doc_id: documentId,
-      });
-
-      return data;
-    },
-  });
-
-  return data;
-};

web/src/hooks/common-hooks.tsx

@@ -1,7 +1,7 @@
 import { ExclamationCircleFilled } from '@ant-design/icons';
 import { App } from 'antd';
 import isEqual from 'lodash/isEqual';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export const useSetModalState = () => {
@@ -78,6 +78,7 @@ export function useDynamicSVGImport(
 
 interface IProps {
   title?: string;
+  content?: ReactNode;
   onOk?: (...args: any[]) => any;
   onCancel?: (...args: any[]) => any;
 }
@@ -87,12 +88,12 @@ export const useShowDeleteConfirm = () => {
   const { t } = useTranslation();
 
   const showDeleteConfirm = useCallback(
-    ({ title, onOk, onCancel }: IProps): Promise<number> => {
+    ({ title, content, onOk, onCancel }: IProps): Promise<number> => {
       return new Promise((resolve, reject) => {
         modal.confirm({
           title: title ?? t('common.deleteModalTitle'),
           icon: <ExclamationCircleFilled />,
-          // content: 'Some descriptions',
+          content,
           okText: t('common.ok'),
           okType: 'danger',
           cancelText: t('common.cancel'),

web/src/hooks/knowledge-hooks.ts

@@ -1,11 +1,13 @@
 import { ResponsePostType } from '@/interfaces/database/base';
 import {
   IKnowledge,
+  IKnowledgeGraph,
   IRenameTag,
   ITestingResult,
 } from '@/interfaces/database/knowledge';
 import i18n from '@/locales/config';
 import kbService, {
+  getKnowledgeGraph,
   listTag,
   removeTag,
   renameTag,
@@ -373,3 +375,20 @@ export const useFetchTagListByKnowledgeIds = () => {
 };
 
 //#endregion
+
+export function useFetchKnowledgeGraph() {
+  const knowledgeBaseId = useKnowledgeBaseId();
+
+  const { data, isFetching: loading } = useQuery<IKnowledgeGraph>({
+    queryKey: ['fetchKnowledgeGraph', knowledgeBaseId],
+    initialData: { graph: {}, mind_map: {} } as IKnowledgeGraph,
+    enabled: !!knowledgeBaseId,
+    gcTime: 0,
+    queryFn: async () => {
+      const { data } = await getKnowledgeGraph(knowledgeBaseId);
+      return data?.data;
+    },
+  });
+
+  return { data, loading };
+}