Feat: Support deleting knowledge graph #6747 (#6748)

### What problem does this PR solve?

Feat: Support deleting knowledge graph #6747

### Type of change


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

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

@@ -32,7 +32,8 @@ import LayoutRecognize from '../layout-recognize';
 import ParseConfiguration, {
   showRaptorParseConfiguration,
 } from '../parse-configuration';
-import GraphRagItems, {
+import {
+  UseGraphRagItem,
   showGraphRagItems,
 } from '../parse-configuration/graph-rag-items';
 import styles from './index.less';
@@ -316,7 +317,7 @@ const ChunkMethodModal: React.FC<IProps> = ({
             <ParseConfiguration></ParseConfiguration>
           </DatasetConfigurationContainer>
         )}
-        {showGraphRagItems(selectedTag) && <GraphRagItems></GraphRagItems>}
+        {showGraphRagItems(selectedTag) && <UseGraphRagItem></UseGraphRagItem>}
         {showEntityTypes && <EntityTypesItem></EntityTypesItem>}
       </Form>
     </Modal>

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

@@ -39,6 +39,22 @@ type GraphRagItemsProps = {
   marginBottom?: boolean;
 };
 
+export function UseGraphRagItem() {
+  const { t } = useTranslate('knowledgeConfiguration');
+
+  return (
+    <Form.Item
+      name={['parser_config', 'graphrag', 'use_graphrag']}
+      label={t('useGraphRag')}
+      initialValue={false}
+      valuePropName="checked"
+      tooltip={t('useGraphRagTip')}
+    >
+      <Switch />
+    </Form.Item>
+  );
+}
+
 // The three types "table", "resume" and "one" do not display this configuration.
 const GraphRagItems = ({ marginBottom = false }: GraphRagItemsProps) => {
   const { t } = useTranslate('knowledgeConfiguration');
@@ -62,15 +78,7 @@ const GraphRagItems = ({ marginBottom = false }: GraphRagItemsProps) => {
 
   return (
     <DatasetConfigurationContainer className={cn({ 'mb-4': marginBottom })}>
-      <Form.Item
+      <UseGraphRagItem></UseGraphRagItem>
-        name={['parser_config', 'graphrag', 'use_graphrag']}
-        label={t('useGraphRag')}
-        initialValue={false}
-        valuePropName="checked"
-        tooltip={t('useGraphRagTip')}
-      >
-        <Switch />
-      </Form.Item>
       <Form.Item
         shouldUpdate={(prevValues, curValues) =>
           prevValues.parser_config.graphrag.use_graphrag !==

web/src/hooks/knowledge-hooks.ts

@@ -7,6 +7,7 @@ import {
 } from '@/interfaces/database/knowledge';
 import i18n from '@/locales/config';
 import kbService, {
+  deleteKnowledgeGraph,
   getKnowledgeGraph,
   listTag,
   removeTag,
@@ -392,3 +393,28 @@ export function useFetchKnowledgeGraph() {
 
   return { data, loading };
 }
+
+export const useRemoveKnowledgeGraph = () => {
+  const knowledgeBaseId = useKnowledgeBaseId();
+
+  const queryClient = useQueryClient();
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: ['removeKnowledgeGraph'],
+    mutationFn: async () => {
+      const { data } = await deleteKnowledgeGraph(knowledgeBaseId);
+      if (data.code === 0) {
+        message.success(i18n.t(`message.deleted`));
+        queryClient.invalidateQueries({
+          queryKey: ['fetchKnowledgeGraph'],
+        });
+      }
+      return data?.code;
+    },
+  });
+
+  return { data, loading, removeKnowledgeGraph: mutateAsync };
+};

web/src/pages/add-knowledge/components/knowledge-graph/index.tsx

@@ -1,15 +1,31 @@
+import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
+import { Button } from '@/components/ui/button';
 import { useFetchKnowledgeGraph } from '@/hooks/knowledge-hooks';
+import { Trash2 } from 'lucide-react';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import ForceGraph from './force-graph';
+import { useDeleteKnowledgeGraph } from './use-delete-graph';
 
-const KnowledgeGraphModal: React.FC = () => {
+const KnowledgeGraph: React.FC = () => {
   const { data } = useFetchKnowledgeGraph();
+  const { t } = useTranslation();
+  const { handleDeleteKnowledgeGraph } = useDeleteKnowledgeGraph();
 
   return (
-    <section className={'w-full h-full'}>
+    <section className={'w-full h-full relative'}>
+      <ConfirmDeleteDialog onOk={handleDeleteKnowledgeGraph}>
+        <Button
+          variant="outline"
+          size={'sm'}
+          className="absolute right-0 top-0 z-50"
+        >
+          <Trash2 /> {t('common.delete')}
+        </Button>
+      </ConfirmDeleteDialog>
       <ForceGraph data={data?.graph} show></ForceGraph>
     </section>
   );
 };
 
-export default KnowledgeGraphModal;
+export default KnowledgeGraph;

web/src/pages/add-knowledge/components/knowledge-graph/use-delete-graph.ts

@@ -0,0 +1,21 @@
+import {
+  useKnowledgeBaseId,
+  useRemoveKnowledgeGraph,
+} from '@/hooks/knowledge-hooks';
+import { useCallback } from 'react';
+import { useNavigate } from 'umi';
+
+export function useDeleteKnowledgeGraph() {
+  const { removeKnowledgeGraph, loading } = useRemoveKnowledgeGraph();
+  const navigate = useNavigate();
+  const knowledgeBaseId = useKnowledgeBaseId();
+
+  const handleDeleteKnowledgeGraph = useCallback(async () => {
+    const ret = await removeKnowledgeGraph();
+    if (ret === 0) {
+      navigate(`/knowledge/dataset?id=${knowledgeBaseId}`);
+    }
+  }, [knowledgeBaseId, navigate, removeKnowledgeGraph]);
+
+  return { handleDeleteKnowledgeGraph, loading };
+}

web/src/services/knowledge-service.ts

@@ -169,4 +169,8 @@ export function getKnowledgeGraph(knowledgeId: string) {
   return request.get(api.getKnowledgeGraph(knowledgeId));
 }
 
+export function deleteKnowledgeGraph(knowledgeId: string) {
+  return request.delete(api.getKnowledgeGraph(knowledgeId));
+}
+
 export default kbService;