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/components/list-filter-bar.tsx

@@ -4,11 +4,13 @@ import { Button } from './ui/button';
 
 interface IProps {
   title: string;
+  showDialog?: () => void;
 }
 
 export default function ListFilterBar({
   title,
   children,
+  showDialog,
 }: PropsWithChildren<IProps>) {
   return (
     <div className="flex justify-between mb-6">
@@ -16,7 +18,7 @@ export default function ListFilterBar({
       <div className="flex gap-4 items-center">
         <Filter className="size-5" />
         <Search className="size-5" />
-        <Button variant={'tertiary'} size={'sm'}>
+        <Button variant={'tertiary'} size={'sm'} onClick={showDialog}>
           {children}
         </Button>
       </div>

web/src/components/rename-dialog/index.tsx

@@ -0,0 +1,55 @@
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+export function DialogDemo() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Edit Profile</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Edit profile</DialogTitle>
+          <DialogDescription>
+            Make changes to your profile here. Click save when you're done.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="name" className="text-right">
+              Name
+            </Label>
+            <Input
+              id="name"
+              defaultValue="Pedro Duarte"
+              className="col-span-3"
+            />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="username" className="text-right">
+              Username
+            </Label>
+            <Input
+              id="username"
+              defaultValue="@peduarte"
+              className="col-span-3"
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button type="submit">Save changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

web/src/components/ui/dialog.tsx

@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-colors-background-neutral-standard p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
         className,
       )}
       {...props}

web/src/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-10 w-full rounded-md border border-input bg-colors-background-inverse-weak px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
         ref={ref}

web/src/components/ui/select.tsx

@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-colors-background-inverse-weak px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className,
     )}
     {...props}

web/src/components/ui/textarea.tsx

@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<
   return (
     <textarea
       className={cn(
-        'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'flex min-h-[80px] w-full rounded-md border border-input bg-colors-background-inverse-weak px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
         className,
       )}
       ref={ref}

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>

web/tailwind.config.js

@@ -19,7 +19,7 @@ module.exports = {
     },
     extend: {
       colors: {
-        border: 'hsl(var(--border))',
+        border: 'var(--colors-outline-neutral-strong)',
         input: 'hsl(var(--input))',
         ring: 'hsl(var(--ring))',
         background: 'var(--background)',

web/tailwind.css

@@ -40,6 +40,7 @@
     --colors-background-inverse-standard: rgba(29, 26, 44, 0.1);
     --colors-background-inverse-strong: rgba(11, 10, 18, 0.8);
     --colors-background-inverse-weak: rgba(17, 16, 23, 0.1);
+    --colors-background-neutral-standard: white;
 
     --button-blue-text: rgb(22, 119, 255);