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/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 };
+}