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/dataset/setting/advanced-setting-form.tsx

@@ -99,7 +99,7 @@ export default function AdvancedSettingForm() {
               <FormLabel>Username</FormLabel>
               <Select onValueChange={field.onChange} defaultValue={field.value}>
                 <FormControl>
-                  <SelectTrigger className="bg-colors-background-inverse-weak">
+                  <SelectTrigger>
                     <SelectValue placeholder="Select a verified email to display" />
                   </SelectTrigger>
                 </FormControl>
@@ -139,10 +139,7 @@ export default function AdvancedSettingForm() {
             <FormItem className="w-2/5">
               <FormLabel>Username</FormLabel>
               <FormControl>
-                <Textarea
-                  {...field}
-                  className="bg-colors-background-inverse-weak"
-                ></Textarea>
+                <Textarea {...field}></Textarea>
               </FormControl>
               <FormDescription>
                 This is your public display name.

web/src/pages/dataset/setting/basic-setting-form.tsx

@@ -78,10 +78,7 @@ export default function BasicSettingForm() {
             <FormItem>
               <FormLabel>{t('name')}</FormLabel>
               <FormControl>
-                <Input
-                  {...field}
-                  className="bg-colors-background-inverse-weak"
-                ></Input>
+                <Input {...field}></Input>
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -94,10 +91,7 @@ export default function BasicSettingForm() {
             <FormItem>
               <FormLabel>Username</FormLabel>
               <FormControl>
-                <Input
-                  {...field}
-                  className="bg-colors-background-inverse-weak"
-                ></Input>
+                <Input {...field}></Input>
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -111,7 +105,7 @@ export default function BasicSettingForm() {
               <FormLabel>{t('language')}</FormLabel>
               <Select onValueChange={field.onChange} defaultValue={field.value}>
                 <FormControl>
-                  <SelectTrigger className="bg-colors-background-inverse-weak">
+                  <SelectTrigger>
                     <SelectValue placeholder="Select a verified email to display" />
                   </SelectTrigger>
                 </FormControl>

web/src/pages/datasets/dataset-creating-dialog.tsx

@@ -0,0 +1,95 @@
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { IModalProps } from '@/interfaces/common';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+
+const FormId = 'dataset-creating-form';
+
+export function InputForm() {
+  const { t } = useTranslation();
+
+  const FormSchema = z.object({
+    name: z
+      .string()
+      .min(1, {
+        message: t('knowledgeList.namePlaceholder'),
+      })
+      .trim(),
+  });
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      name: '',
+    },
+  });
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    console.log('🚀 ~ onSubmit ~ data:', data);
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="w-2/3 space-y-6"
+        id={FormId}
+      >
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('knowledgeList.name')}</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder={t('knowledgeList.namePlaceholder')}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
+  );
+}
+
+export function DatasetCreatingDialog({ hideModal }: IModalProps<any>) {
+  const { t } = useTranslation();
+
+  return (
+    <Dialog open onOpenChange={hideModal}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>{t('knowledgeList.createKnowledgeBase')}</DialogTitle>
+        </DialogHeader>
+        <InputForm></InputForm>
+        <DialogFooter>
+          <Button type="submit" variant={'tertiary'} size={'sm'} form={FormId}>
+            {t('common.save')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

web/src/pages/datasets/hooks.ts

@@ -0,0 +1,47 @@
+import { KnowledgeRouteKey } from '@/constants/knowledge';
+import { useSetModalState } from '@/hooks/common-hooks';
+import { useCreateKnowledge } from '@/hooks/knowledge-hooks';
+import { useCallback, useState } from 'react';
+import { useNavigate } from 'umi';
+
+export const useSearchKnowledge = () => {
+  const [searchString, setSearchString] = useState<string>('');
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchString(e.target.value);
+  };
+  return {
+    searchString,
+    handleInputChange,
+  };
+};
+
+export const useSaveKnowledge = () => {
+  const { visible: visible, hideModal, showModal } = useSetModalState();
+  const { loading, createKnowledge } = useCreateKnowledge();
+  const navigate = useNavigate();
+
+  const onCreateOk = useCallback(
+    async (name: string) => {
+      const ret = await createKnowledge({
+        name,
+      });
+
+      if (ret?.code === 0) {
+        hideModal();
+        navigate(
+          `/knowledge/${KnowledgeRouteKey.Configuration}?id=${ret.data.kb_id}`,
+        );
+      }
+    },
+    [createKnowledge, hideModal, navigate],
+  );
+
+  return {
+    loading,
+    onCreateOk,
+    visible,
+    hideModal,
+    showModal,
+  };
+};

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>
   );
 }

web/src/pages/profile-setting/model/model-card.tsx

@@ -62,7 +62,7 @@ export function SystemModelSetting() {
             </div>
             <div className="flex-1">
               <Select defaultValue="english">
-                <SelectTrigger className="bg-colors-background-inverse-weak">
+                <SelectTrigger>
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>

web/src/pages/profile-setting/profile/index.tsx

@@ -26,24 +26,18 @@ export default function Profile() {
       <div className="space-y-6 max-w-[600px]">
         <div className="space-y-2">
           <label className="text-sm text-muted-foreground">User name</label>
-          <Input
-            defaultValue="yifanwu92"
-            className="bg-colors-background-inverse-weak"
-          />
+          <Input defaultValue="yifanwu92" />
         </div>
 
         <div className="space-y-2">
           <label className="text-sm text-muted-foreground">Email</label>
-          <Input
-            defaultValue="yifanwu92@gmail.com"
-            className="bg-colors-background-inverse-weak"
-          />
+          <Input defaultValue="yifanwu92@gmail.com" />
         </div>
 
         <div className="space-y-2">
           <label className="text-sm text-muted-foreground">Language</label>
           <Select defaultValue="english">
-            <SelectTrigger className="bg-colors-background-inverse-weak">
+            <SelectTrigger>
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -55,7 +49,7 @@ export default function Profile() {
         <div className="space-y-2">
           <label className="text-sm text-muted-foreground">Timezone</label>
           <Select defaultValue="utc9">
-            <SelectTrigger className="bg-colors-background-inverse-weak">
+            <SelectTrigger>
               <SelectValue />
             </SelectTrigger>
             <SelectContent>