Feat: Add DatasetCreatingDialog #3221 (#4313)

### What problem does this PR solve?

Feat: Add DatasetCreatingDialog #3221

### Type of change


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

web/src/pages/datasets/index.tsx

@@ -2,6 +2,8 @@ import ListFilterBar from '@/components/list-filter-bar';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { ChevronRight, MoreHorizontal, Plus } from 'lucide-react';
+import { DatasetCreatingDialog } from './dataset-creating-dialog';
+import { useSaveKnowledge } from './hooks';
 
 const datasets = [
   {
@@ -79,9 +81,16 @@ const datasets = [
 ];
 
 export default function Datasets() {
+  const {
+    visible,
+    hideModal,
+    showModal,
+    onCreateOk,
+    loading: creatingLoading,
+  } = useSaveKnowledge();
   return (
     <section className="p-8 text-foreground">
-      <ListFilterBar title="Datasets">
+      <ListFilterBar title="Datasets" showDialog={showModal}>
         <Plus className="mr-2 h-4 w-4" />
         Create dataset
       </ListFilterBar>
@@ -121,6 +130,13 @@ export default function Datasets() {
           </Card>
         ))}
       </div>
+      {visible && (
+        <DatasetCreatingDialog
+          hideModal={hideModal}
+          onOk={onCreateOk}
+          loading={creatingLoading}
+        ></DatasetCreatingDialog>
+      )}
     </section>
   );
 }