Feat: Add AdvancedSettingForm #3221 (#4071)

### What problem does this PR solve?

Feat: Add AdvancedSettingForm #3221

### Type of change


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

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

@@ -0,0 +1,163 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { FormSlider } from '@/components/ui/slider';
+import { Textarea } from '@/components/ui/textarea';
+
+const formSchema = z.object({
+  username: z.number().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+  a: z.number().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+  b: z.string().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+  c: z.number().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+  d: z.string().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+});
+
+export default function AdvancedSettingForm() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      username: 0,
+    },
+  });
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    console.log(values);
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="username"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <FormSlider {...field}></FormSlider>
+              </FormControl>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="a"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <FormSlider {...field}></FormSlider>
+              </FormControl>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="b"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger className="bg-colors-background-inverse-weak">
+                    <SelectValue placeholder="Select a verified email to display" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem value="m@example.com">m@example.com</SelectItem>
+                  <SelectItem value="m@google.com">m@google.com</SelectItem>
+                  <SelectItem value="m@support.com">m@support.com</SelectItem>
+                </SelectContent>
+              </Select>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="c"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <FormSlider {...field}></FormSlider>
+              </FormControl>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="d"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <Textarea
+                  {...field}
+                  className="bg-colors-background-inverse-weak"
+                ></Textarea>
+              </FormControl>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button
+          variant={'tertiary'}
+          size={'sm'}
+          type="submit"
+          className="w-full"
+        >
+          Test
+        </Button>
+      </form>
+    </Form>
+  );
+}

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

@@ -0,0 +1,163 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { FormSlider } from '@/components/ui/slider';
+import { Textarea } from '@/components/ui/textarea';
+
+const formSchema = z.object({
+  username: z.number().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+  a: z.number().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+  b: z.string().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+  c: z.number().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+  d: z.string().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+});
+
+export default function BasicSettingForm() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      username: 0,
+    },
+  });
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    console.log(values);
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="username"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <FormSlider {...field}></FormSlider>
+              </FormControl>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="a"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <FormSlider {...field}></FormSlider>
+              </FormControl>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="b"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger className="bg-colors-background-inverse-weak">
+                    <SelectValue placeholder="Select a verified email to display" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem value="m@example.com">m@example.com</SelectItem>
+                  <SelectItem value="m@google.com">m@google.com</SelectItem>
+                  <SelectItem value="m@support.com">m@support.com</SelectItem>
+                </SelectContent>
+              </Select>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="c"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <FormSlider {...field}></FormSlider>
+              </FormControl>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="d"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <Textarea
+                  {...field}
+                  className="bg-colors-background-inverse-weak"
+                ></Textarea>
+              </FormControl>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button
+          variant={'tertiary'}
+          size={'sm'}
+          type="submit"
+          className="w-full"
+        >
+          Test
+        </Button>
+      </form>
+    </Form>
+  );
+}

web/src/pages/dataset/setting/index.tsx

@@ -0,0 +1,23 @@
+import { Card } from '@/components/ui/card';
+import AdvancedSettingForm from './advanced-setting-form';
+import BasicSettingForm from './basic-setting-form';
+
+export default function DatasetSettings() {
+  return (
+    <section className="flex flex-col p-8 overflow-auto h-[80vh]">
+      <div className="text-3xl font-bold mb-6">Basic settings</div>
+      <Card className="border-0 p-6 mb-8 bg-colors-background-inverse-weak">
+        <div className="w-2/5">
+          <BasicSettingForm></BasicSettingForm>
+        </div>
+      </Card>
+
+      <div className="text-3xl font-bold mb-6">Advanced settings</div>
+      <Card className="border-0 p-6 mb-8 bg-colors-background-inverse-weak">
+        <div className="w-2/5">
+          <AdvancedSettingForm></AdvancedSettingForm>
+        </div>
+      </Card>
+    </section>
+  );
+}

web/src/pages/dataset/settings/index.tsx

@@ -1,8 +0,0 @@
-export default function DatasetSettings() {
-  return (
-    <section>
-      <span className="text-3xl font-bold ">Basic settings</span>
-      <span className="text-3xl font-bold ">Advanced settings</span>
-    </section>
-  );
-}

web/src/pages/dataset/sidebar/hooks.tsx

@@ -1,4 +1,4 @@
-import { DatasetBaseKey, KnowledgeRouteKey } from '@/constants/knowledge';
+import { Routes } from '@/routes';
 import { useCallback } from 'react';
 import { useNavigate } from 'umi';
 
@@ -6,8 +6,8 @@ export const useHandleMenuClick = () => {
   const navigate = useNavigate();
 
   const handleMenuClick = useCallback(
-    (key: KnowledgeRouteKey) => () => {
-      navigate(`/${DatasetBaseKey}/${key}`);
+    (key: Routes) => () => {
+      navigate(`${Routes.DatasetBase}${key}`);
     },
     [navigate],
   );

web/src/pages/dataset/sidebar/index.tsx

@@ -1,18 +1,18 @@
 import { Button } from '@/components/ui/button';
-import { KnowledgeRouteKey } from '@/constants/knowledge';
 import { useSecondPathName } from '@/hooks/route-hook';
 import { cn } from '@/lib/utils';
+import { Routes } from '@/routes';
 import { Banknote, LayoutGrid, Trash2, User } from 'lucide-react';
 import { useHandleMenuClick } from './hooks';
 
 const items = [
-  { icon: User, label: 'Dataset', key: KnowledgeRouteKey.Dataset },
+  { icon: User, label: 'Dataset', key: Routes.DatasetBase },
   {
     icon: LayoutGrid,
     label: 'Retrieval testing',
-    key: KnowledgeRouteKey.Testing,
+    key: Routes.DatasetTesting,
   },
-  { icon: Banknote, label: 'Settings', key: KnowledgeRouteKey.Configuration },
+  { icon: Banknote, label: 'Settings', key: Routes.DatasetSetting },
 ];
 
 const dataset = {
@@ -29,7 +29,7 @@ export function SideBar() {
   const { handleMenuClick } = useHandleMenuClick();
 
   return (
-    <aside className="w-[303px] relative">
+    <aside className="w-[303px] relative border-r ">
       <div className="p-6 space-y-2 border-b">
         <div
           className="w-[70px] h-[70px] rounded-xl bg-cover"
@@ -44,7 +44,7 @@ export function SideBar() {
       </div>
       <div className="mt-4">
         {items.map((item, itemIdx) => {
-          const active = pathName === item.key;
+          const active = '/' + pathName === item.key;
           return (
             <Button
               key={itemIdx}

web/src/pages/dataset/testing/index.tsx

@@ -8,7 +8,7 @@ const list = new Array(15).fill({
 
 export default function RetrievalTesting() {
   return (
-    <section className="flex divide-x border-l h-full">
+    <section className="flex divide-x h-full">
       <div className="p-4">
         <TestingForm></TestingForm>
       </div>

web/src/routes.ts

@@ -8,6 +8,8 @@ export enum Routes {
   Search = '/next-search',
   Chat = '/next-chat',
   ProfileSetting = '/profile-setting',
+  DatasetTesting = '/testing',
+  DatasetSetting = '/setting',
 }
 
 const routes = [
@@ -207,12 +209,12 @@ const routes = [
             component: `@/pages${Routes.Dataset}`,
           },
           {
-            path: `${Routes.DatasetBase}/configuration`,
-            component: `@/pages${Routes.DatasetBase}/settings`,
+            path: `${Routes.DatasetBase}${Routes.DatasetSetting}`,
+            component: `@/pages${Routes.DatasetBase}${Routes.DatasetSetting}`,
           },
           {
-            path: `${Routes.DatasetBase}/testing`,
-            component: `@/pages${Routes.DatasetBase}/testing`,
+            path: `${Routes.DatasetBase}${Routes.DatasetTesting}`,
+            component: `@/pages${Routes.DatasetBase}${Routes.DatasetTesting}`,
           },
         ],
       },