Refactor: Datasets UI #3221 (#8349)

### What problem does this PR solve?

Refactor Datasets UI #3221.
### Type of change

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

web/src/pages/dataset/index.tsx

@@ -5,6 +5,7 @@ import { SideBar } from './sidebar';
 
 export default function DatasetWrapper() {
   const { navigateToDatasetList } = useNavigatePage();
+
   return (
     <section>
       <PageHeader

web/src/pages/dataset/setting/chunk-method-form.tsx

@@ -1,7 +1,12 @@
+import { Button } from '@/components/ui/button';
+import { Loader2Icon } from 'lucide-react';
 import { useFormContext, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 
 import { DocumentParserType } from '@/constants/knowledge';
+import { useUpdateKnowledge } from '@/hooks/knowledge-hooks';
 import { useMemo } from 'react';
+import { useParams } from 'umi';
 import { AudioConfiguration } from './configuration/audio';
 import { BookConfiguration } from './configuration/book';
 import { EmailConfiguration } from './configuration/email';
@@ -42,6 +47,12 @@ function EmptyComponent() {
 
 export function ChunkMethodForm() {
   const form = useFormContext();
+  const { t } = useTranslation();
+  // const [submitLoading, setSubmitLoading] = useState(false); // submit button loading
+  const { id: kb_id } = useParams();
+
+  const { saveKnowledgeConfiguration, loading: submitLoading } =
+    useUpdateKnowledge();
 
   const finalParserId: DocumentParserType = useWatch({
     control: form.control,
@@ -55,8 +66,41 @@ export function ChunkMethodForm() {
   }, [finalParserId]);
 
   return (
-    <section className="overflow-auto max-h-[76vh]">
-      <ConfigurationComponent></ConfigurationComponent>
-    </section>
+    <>
+      <section className="overflow-auto max-h-[76vh]">
+        <ConfigurationComponent></ConfigurationComponent>
+      </section>
+      <div className="text-right pt-4">
+        <Button
+          disabled={submitLoading}
+          onClick={() => {
+            (async () => {
+              try {
+                let beValid = await form.formControl.trigger();
+                console.log('user chunk form: ', form);
+
+                if (beValid) {
+                  // setSubmitLoading(true);
+                  let postData = form.formState.values;
+                  delete postData['avatar']; // has submitted in first form general
+
+                  saveKnowledgeConfiguration({
+                    ...postData,
+                    kb_id,
+                  });
+                }
+              } catch (e) {
+                console.log(e);
+              } finally {
+                // setSubmitLoading(false);
+              }
+            })();
+          }}
+        >
+          {submitLoading && <Loader2Icon className="animate-spin" />}
+          {t('common.submit')}
+        </Button>
+      </div>
+    </>
   );
 }

web/src/pages/dataset/setting/chunk-method-learn-more.tsx

@@ -0,0 +1,45 @@
+import { Button } from '@/components/ui/button';
+import { X } from 'lucide-react';
+import { useState } from 'react';
+import CategoryPanel from './category-panel';
+
+export default ({
+  tab = 'generalForm',
+  parserId,
+}: {
+  tab: 'generalForm' | 'chunkMethodForm';
+  parserId: string;
+}) => {
+  const [visible, setVisible] = useState(true);
+
+  return (
+    <div
+      style={{
+        display: tab === 'chunkMethodForm' ? 'block' : 'none',
+      }}
+    >
+      <Button
+        variant="outline"
+        onClick={() => {
+          setVisible(!visible);
+        }}
+      >
+        Learn More
+      </Button>
+      <div
+        className="bg-[#FFF]/10 p-[20px] rounded-[12px] mt-[10px] relative"
+        style={{ display: visible ? 'block' : 'none' }}
+      >
+        <CategoryPanel chunkMethod={parserId}></CategoryPanel>
+        <div
+          className="absolute right-1 top-1 cursor-pointer hover:text-[#FFF]/30"
+          onClick={() => {
+            setVisible(false);
+          }}
+        >
+          <X />
+        </div>
+      </div>
+    </div>
+  );
+};

web/src/pages/dataset/setting/configuration/common-item.tsx

@@ -25,19 +25,29 @@ export function ChunkMethodItem() {
       control={form.control}
       name={'parser_id'}
       render={({ field }) => (
-        <FormItem>
-          <FormLabel tooltip={t('chunkMethodTip')}>
-            {t('chunkMethod')}
-          </FormLabel>
-          <FormControl>
-            <RAGFlowSelect
-              {...field}
-              options={parserList}
-              placeholder={t('chunkMethodPlaceholder')}
-              // onChange={handleChunkMethodSelectChange}
-            />
-          </FormControl>
-          <FormMessage />
+        <FormItem className=" items-center space-y-0 ">
+          <div className="flex items-center">
+            <FormLabel
+              tooltip={t('chunkMethodTip')}
+              className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+            >
+              {t('chunkMethod')}
+            </FormLabel>
+            <div className="w-3/4 ">
+              <FormControl>
+                <RAGFlowSelect
+                  {...field}
+                  options={parserList}
+                  placeholder={t('chunkMethodPlaceholder')}
+                  // onChange={handleChunkMethodSelectChange}
+                />
+              </FormControl>
+            </div>
+          </div>
+          <div className="flex pt-1">
+            <div className="w-1/4"></div>
+            <FormMessage />
+          </div>
         </FormItem>
       )}
     />
@@ -55,19 +65,29 @@ export function EmbeddingModelItem() {
       control={form.control}
       name={'embd_id'}
       render={({ field }) => (
-        <FormItem>
-          <FormLabel tooltip={t('embeddingModelTip')}>
-            {t('embeddingModel')}
-          </FormLabel>
-          <FormControl>
-            <RAGFlowSelect
-              {...field}
-              options={embeddingModelOptions}
-              disabled={disabled}
-              placeholder={t('embeddingModelPlaceholder')}
-            />
-          </FormControl>
-          <FormMessage />
+        <FormItem className=" items-center space-y-0 ">
+          <div className="flex items-center">
+            <FormLabel
+              tooltip={t('embeddingModelTip')}
+              className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+            >
+              {t('embeddingModel')}
+            </FormLabel>
+            <div className="w-3/4">
+              <FormControl>
+                <RAGFlowSelect
+                  {...field}
+                  options={embeddingModelOptions}
+                  disabled={disabled}
+                  placeholder={t('embeddingModelPlaceholder')}
+                />
+              </FormControl>
+            </div>
+          </div>
+          <div className="flex pt-1">
+            <div className="w-1/4"></div>
+            <FormMessage />
+          </div>
         </FormItem>
       )}
     />

web/src/pages/dataset/setting/form-schema.ts

@@ -7,35 +7,67 @@ export const formSchema = z.object({
   description: z.string().min(2, {
     message: 'Username must be at least 2 characters.',
   }),
-  avatar: z.instanceof(File),
+  // avatar: z.instanceof(File),
+  avatar: z.any().nullish(),
   permission: z.string(),
   parser_id: z.string(),
   embd_id: z.string(),
-  parser_config: z.object({
-    layout_recognize: z.string(),
-    chunk_token_num: z.number(),
-    delimiter: z.string(),
-    auto_keywords: z.number(),
-    auto_questions: z.number(),
-    html4excel: z.boolean(),
-    tag_kb_ids: z.array(z.string()),
-    topn_tags: z.number(),
-    raptor: z.object({
-      use_raptor: z.boolean(),
-      prompt: z.string(),
-      max_token: z.number(),
-      threshold: z.number(),
-      max_cluster: z.number(),
-      random_seed: z.number(),
-    }),
-    graphrag: z.object({
-      use_graphrag: z.boolean(),
-      entity_types: z.array(z.string()),
-      method: z.string(),
-      resolution: z.boolean(),
-      community: z.boolean(),
-    }),
-  }),
+  parser_config: z
+    .object({
+      layout_recognize: z.string(),
+      chunk_token_num: z.number(),
+      delimiter: z.string(),
+      auto_keywords: z.number().optional(),
+      auto_questions: z.number().optional(),
+      html4excel: z.boolean(),
+      tag_kb_ids: z.array(z.string()).nullish(),
+      topn_tags: z.number().optional(),
+      raptor: z
+        .object({
+          use_raptor: z.boolean().optional(),
+          prompt: z.string().optional(),
+          max_token: z.number().optional(),
+          threshold: z.number().optional(),
+          max_cluster: z.number().optional(),
+          random_seed: z.number().optional(),
+        })
+        .refine(
+          (data) => {
+            if (data.use_raptor && !data.prompt) {
+              return false;
+            }
+            return true;
+          },
+          {
+            message: 'Prompt is required',
+            path: ['prompt'],
+          },
+        ),
+      graphrag: z
+        .object({
+          use_graphrag: z.boolean().optional(),
+          entity_types: z.array(z.string()).optional(),
+          method: z.string().optional(),
+          resolution: z.boolean().optional(),
+          community: z.boolean().optional(),
+        })
+        .refine(
+          (data) => {
+            if (
+              data.use_graphrag &&
+              (!data.entity_types || data.entity_types.length === 0)
+            ) {
+              return false;
+            }
+            return true;
+          },
+          {
+            message: 'Please enter Entity types',
+            path: ['entity_types'],
+          },
+        ),
+    })
+    .optional(),
   pagerank: z.number(),
   // icon: z.array(z.instanceof(File)),
 });

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

@@ -1,5 +1,6 @@
-import { FileUploader } from '@/components/file-uploader';
 import { FormContainer } from '@/components/form-container';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
 import {
   FormControl,
   FormField,
@@ -9,100 +10,235 @@ import {
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { useUpdateKnowledge } from '@/hooks/knowledge-hooks';
+import { transformFile2Base64 } from '@/utils/file-util';
+import { Loader2Icon, Pencil, Upload } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { useParams } from 'umi';
 
 export function GeneralForm() {
   const form = useFormContext();
   const { t } = useTranslation();
+  const [avatarFile, setAvatarFile] = useState<File | null>(null);
+  const [avatarBase64Str, setAvatarBase64Str] = useState(''); // Avatar Image base64
+  // const [submitLoading, setSubmitLoading] = useState(false); // submit button loading
+
+  const { saveKnowledgeConfiguration, loading: submitLoading } =
+    useUpdateKnowledge();
+
+  const defaultValues = useMemo(
+    () => form.formState.defaultValues ?? {},
+    [form.formState.defaultValues],
+  );
+  const parser_id = defaultValues['parser_id'];
+  const { id: kb_id } = useParams();
+
+  // init avatar file if it exists in defaultValues
+  useEffect(() => {
+    if (!avatarFile) {
+      let avatarList = defaultValues['avatar'];
+      if (avatarList && avatarList.length > 0) {
+        setAvatarBase64Str(avatarList[0].thumbUrl);
+      }
+    }
+  }, [avatarFile, defaultValues]);
+
+  // input[type=file] on change event, get img base64
+  useEffect(() => {
+    if (avatarFile) {
+      (async () => {
+        // make use of img compression transformFile2Base64
+        setAvatarBase64Str(await transformFile2Base64(avatarFile));
+      })();
+    }
+  }, [avatarFile]);
 
   return (
-    <FormContainer className="space-y-2 p-10">
-      <FormField
-        control={form.control}
-        name="name"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>{t('knowledgeConfiguration.name')}</FormLabel>
-            <FormControl>
-              <Input {...field}></Input>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-      <FormField
-        control={form.control}
-        name="description"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>{t('knowledgeConfiguration.description')}</FormLabel>
-            <FormControl>
-              <Input {...field}></Input>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-      <FormField
-        control={form.control}
-        name="avatar"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>{t('knowledgeConfiguration.photo')}</FormLabel>
-            <FormControl>
-              <FileUploader
-                value={field.value}
-                onValueChange={field.onChange}
-                maxFileCount={1}
-                maxSize={4 * 1024 * 1024}
-                // progresses={progresses}
-                // pass the onUpload function here for direct upload
-                // onUpload={uploadFiles}
-                // disabled={isUploading}
-              />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-
-      <FormField
-        control={form.control}
-        name="type"
-        render={({ field }) => (
-          <FormItem className="space-y-3">
-            <FormLabel tooltip={t('knowledgeConfiguration.permissionsTip')}>
-              {t('knowledgeConfiguration.permissions')}
-            </FormLabel>
-            <FormControl>
-              <RadioGroup
-                onValueChange={field.onChange}
-                defaultValue={field.value}
-                className="flex flex-col space-y-1"
+    <>
+      <FormContainer className="space-y-10 p-10">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem className="items-center space-y-0">
+              <div className="flex">
+                <FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4">
+                  <span className="text-red-600">*</span>
+                  {t('common.name')}
+                </FormLabel>
+                <FormControl className="w-3/4">
+                  <Input {...field}></Input>
+                </FormControl>
+              </div>
+              <div className="flex pt-1">
+                <div className="w-1/4"></div>
+                <FormMessage />
+              </div>
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="description"
+          render={({ field }) => {
+            // null initialize empty string
+            if (typeof field.value === 'object' && !field.value) {
+              form.setValue('description', '  ');
+            }
+            return (
+              <FormItem className="items-center space-y-0">
+                <div className="flex">
+                  <FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4">
+                    {t('flow.description')}
+                  </FormLabel>
+                  <FormControl className="w-3/4">
+                    <Input {...field}></Input>
+                  </FormControl>
+                </div>
+                <div className="flex pt-1">
+                  <div className="w-1/4"></div>
+                  <FormMessage />
+                </div>
+              </FormItem>
+            );
+          }}
+        />
+        <FormField
+          control={form.control}
+          name="avatar"
+          render={({ field }) => (
+            <FormItem className="items-center space-y-0">
+              <div className="flex">
+                <FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4">
+                  {t('setting.avatar')}
+                </FormLabel>
+                <FormControl className="w-3/4">
+                  <>
+                    <div className="relative group">
+                      {!avatarBase64Str ? (
+                        <div className="w-[64px] h-[64px] grid place-content-center border border-dashed	rounded-md">
+                          <div className="flex flex-col items-center">
+                            <Upload />
+                            <p>Upload</p>
+                          </div>
+                        </div>
+                      ) : (
+                        <div className="w-[64px] h-[64px] relative grid place-content-center">
+                          <Avatar className="w-[64px] h-[64px]">
+                            <AvatarImage
+                              className=" block"
+                              src={avatarBase64Str}
+                              alt=""
+                            />
+                            <AvatarFallback></AvatarFallback>
+                          </Avatar>
+                          <div className="absolute inset-0 bg-[#000]/20 group-hover:bg-[#000]/60">
+                            <Pencil
+                              size={20}
+                              className="absolute right-2 bottom-0 opacity-50 hidden group-hover:block"
+                            />
+                          </div>
+                        </div>
+                      )}
+                      <Input
+                        placeholder=""
+                        // {...field}
+                        type="file"
+                        title=""
+                        accept="image/*"
+                        className="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
+                        onChange={(ev) => {
+                          const file = ev.target?.files?.[0];
+                          if (
+                            /\.(jpg|jpeg|png|webp|bmp)$/i.test(file?.name ?? '')
+                          ) {
+                            setAvatarFile(file!);
+                          }
+                          ev.target.value = '';
+                        }}
+                      />
+                    </div>
+                  </>
+                </FormControl>
+              </div>
+              <div className="flex pt-1">
+                <div className="w-1/4"></div>
+                <FormMessage />
+              </div>
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="permission"
+          render={({ field }) => (
+            <FormItem className="flex items-center space-y-0">
+              <FormLabel
+                className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+                tooltip={t('knowledgeConfiguration.permissionsTip')}
               >
-                <FormItem className="flex items-center space-x-3 space-y-0">
-                  <FormControl>
-                    <RadioGroupItem value="me" />
-                  </FormControl>
-                  <FormLabel className="font-normal">
-                    {t('knowledgeConfiguration.me')}
-                  </FormLabel>
-                </FormItem>
-                <FormItem className="flex items-center space-x-3 space-y-0">
-                  <FormControl>
-                    <RadioGroupItem value="team" />
-                  </FormControl>
-                  <FormLabel className="font-normal">
-                    {t('knowledgeConfiguration.team')}
-                  </FormLabel>
-                </FormItem>
-              </RadioGroup>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-    </FormContainer>
+                {t('knowledgeConfiguration.permissions')}
+              </FormLabel>
+              <FormControl className="w-3/4">
+                <RadioGroup
+                  onValueChange={field.onChange}
+                  value={field.value}
+                  className="flex space-y-1 gap-5"
+                >
+                  <FormItem className="flex items-center space-x-1 space-y-0">
+                    <FormControl>
+                      <RadioGroupItem value="me" />
+                    </FormControl>
+                    <FormLabel className="font-normal">
+                      {t('knowledgeConfiguration.me')}
+                    </FormLabel>
+                  </FormItem>
+                  <FormItem className="flex items-center space-x-1 space-y-0">
+                    <FormControl>
+                      <RadioGroupItem value="team" />
+                    </FormControl>
+                    <FormLabel className="font-normal">
+                      {t('knowledgeConfiguration.team')}
+                    </FormLabel>
+                  </FormItem>
+                </RadioGroup>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </FormContainer>
+      <div className="text-right pt-4">
+        <Button
+          type="button"
+          disabled={submitLoading}
+          onClick={() => {
+            // console.log('form.formControl: ', form.formState.values);
+            (async () => {
+              let isValidate = await form.formControl.trigger('name');
+              // console.log(isValidate);
+              const { name, description, permission } = form.formState.values;
+              const avatar = avatarBase64Str;
+
+              if (isValidate) {
+                saveKnowledgeConfiguration({
+                  kb_id,
+                  parser_id,
+                  name,
+                  description,
+                  permission,
+                  avatar,
+                });
+              }
+            })();
+          }}
+        >
+          {submitLoading && <Loader2Icon className="animate-spin" />}
+          {t('common.submit')}
+        </Button>
+      </div>
+    </>
   );
 }

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

@@ -1,13 +1,19 @@
-import { ButtonLoading } from '@/components/ui/button';
 import { Form } from '@/components/ui/form';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@/components/ui/tabs-underlined';
 import { DocumentParserType } from '@/constants/knowledge';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { TopTitle } from '../dataset-title';
-import CategoryPanel from './category-panel';
 import { ChunkMethodForm } from './chunk-method-form';
+import ChunkMethodLearnMore from './chunk-method-learn-more';
 import { formSchema } from './form-schema';
 import { GeneralForm } from './general-form';
 import { useFetchKnowledgeConfigurationOnMount } from './hooks';
@@ -31,6 +37,7 @@ const enum MethodValue {
 }
 
 export default function DatasetSettings() {
+  const { t } = useTranslation();
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -64,6 +71,10 @@ export default function DatasetSettings() {
 
   useFetchKnowledgeConfigurationOnMount(form);
 
+  const [currentTab, setCurrentTab] = useState<
+    'generalForm' | 'chunkMethodForm'
+  >('generalForm'); // currnet Tab state
+
   const parserId = useWatch({
     control: form.control,
     name: 'parser_id',
@@ -76,35 +87,66 @@ export default function DatasetSettings() {
   return (
     <section className="p-5 ">
       <TopTitle
-        title={'Configuration'}
-        description={`  Update your knowledge base configuration here, particularly the chunk
-          method.`}
+        title={t('knowledgeDetails.configuration')}
+        description={t('knowledgeConfiguration.titleDescription')}
       ></TopTitle>
       <div className="flex gap-14">
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-6 basis-full"
+            className="space-y-6 basis-full min-w-[1000px] max-w-[1000px]"
           >
-            <Tabs defaultValue="account">
-              <TabsList className="grid w-full grid-cols-2">
-                <TabsTrigger value="account">Account</TabsTrigger>
-                <TabsTrigger value="password">Password</TabsTrigger>
+            <Tabs
+              defaultValue="generalForm"
+              onValueChange={(val) => {
+                setCurrentTab(val);
+              }}
+            >
+              <TabsList className="grid w-full bg-background grid-cols-2 rounded-none bg-[#161618]">
+                <TabsTrigger
+                  value="generalForm"
+                  className="group bg-transparent p-0 !border-transparent"
+                >
+                  <div className="flex w-full h-full justify-center	items-center	bg-[#161618]">
+                    <span className="h-full group-data-[state=active]:border-b-2 border-white	">
+                      General
+                    </span>
+                  </div>
+                </TabsTrigger>
+                <TabsTrigger
+                  value="chunkMethodForm"
+                  className="group bg-transparent p-0 !border-transparent"
+                >
+                  <div className="flex w-full h-full justify-center	items-center	bg-[#161618]">
+                    <span className="h-full group-data-[state=active]:border-b-2 border-white	">
+                      Chunk Method
+                    </span>
+                  </div>
+                </TabsTrigger>
               </TabsList>
-              <TabsContent value="account">
+              <TabsContent value="generalForm">
                 <GeneralForm></GeneralForm>
               </TabsContent>
-              <TabsContent value="password">
+              <TabsContent value="chunkMethodForm">
                 <ChunkMethodForm></ChunkMethodForm>
               </TabsContent>
             </Tabs>
-            <div className="text-right">
+            {/* <div className="text-right">
               <ButtonLoading type="submit">Submit</ButtonLoading>
-            </div>
+            </div> */}
           </form>
         </Form>
-
-        <CategoryPanel chunkMethod={parserId}></CategoryPanel>
+        <ChunkMethodLearnMore tab={currentTab} parserId={parserId} />
+        {/* <div
+          style={{
+            display: currentTab === 'chunkMethodForm' ? 'block' : 'none',
+          }}
+        >
+          <Button variant="outline">Learn More</Button>
+          <div className="bg-[#FFF]/10 p-[20px] rounded-[12px] mt-[10px]">
+            <CategoryPanel chunkMethod={parserId}></CategoryPanel>
+          </div>
+        </div> */}
       </div>
     </section>
   );

web/src/pages/dataset/setting/tag-item.tsx

@@ -38,31 +38,39 @@ export const TagSetItem = () => {
       control={form.control}
       name="parser_config.tag_kb_ids"
       render={({ field }) => (
-        <FormItem>
-          <FormLabel
-            tooltip={
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: DOMPurify.sanitize(
-                    t('knowledgeConfiguration.tagSetTip'),
-                  ),
-                }}
-              ></div>
-            }
-          >
-            {t('knowledgeConfiguration.tagSet')}
-          </FormLabel>
-          <FormControl>
-            <MultiSelect
-              options={knowledgeOptions}
-              onValueChange={field.onChange}
-              placeholder={t('chat.knowledgeBasesMessage')}
-              variant="inverted"
-              maxCount={0}
-              {...field}
-            />
-          </FormControl>
-          <FormMessage />
+        <FormItem className=" items-center space-y-0 ">
+          <div className="flex items-center">
+            <FormLabel
+              className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+              tooltip={
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: DOMPurify.sanitize(
+                      t('knowledgeConfiguration.tagSetTip'),
+                    ),
+                  }}
+                ></div>
+              }
+            >
+              {t('knowledgeConfiguration.tagSet')}
+            </FormLabel>
+            <div className="w-3/4">
+              <FormControl>
+                <MultiSelect
+                  options={knowledgeOptions}
+                  onValueChange={field.onChange}
+                  placeholder={t('chat.knowledgeBasesMessage')}
+                  variant="inverted"
+                  maxCount={0}
+                  {...field}
+                />
+              </FormControl>
+            </div>
+          </div>
+          <div className="flex pt-1">
+            <div className="w-1/4"></div>
+            <FormMessage />
+          </div>
         </FormItem>
       )}
     />

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

@@ -10,10 +10,15 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHandleMenuClick } from './hooks';
 
-export function SideBar() {
+type PropType = {
+  refreshCount?: number;
+};
+
+export function SideBar({ refreshCount }: PropType) {
   const pathName = useSecondPathName();
   const { handleMenuClick } = useHandleMenuClick();
-  const { data } = useFetchKnowledgeBaseConfiguration();
+  // refreshCount: be for avatar img sync update on top left
+  const { data } = useFetchKnowledgeBaseConfiguration(refreshCount);
   const { t } = useTranslation();
 
   const items = useMemo(() => {

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

@@ -1,6 +1,4 @@
-import { Button } from '@/components/ui/button';
 import { useTestRetrieval } from '@/hooks/use-knowledge-request';
-import { Plus } from 'lucide-react';
 import { useCallback, useState } from 'react';
 import { TopTitle } from '../dataset-title';
 import TestingForm from './testing-form';
@@ -41,7 +39,7 @@ export default function RetrievalTesting() {
           description={`  Update your knowledge base configuration here, particularly the chunk
                   method.`}
         ></TopTitle>
-        <Button>Save as Preset</Button>
+        {/* <Button>Save as Preset</Button> */}
       </section>
       {count === 1 ? (
         <section className="flex divide-x h-full">
@@ -50,9 +48,9 @@ export default function RetrievalTesting() {
               <span className="text-text-title font-semibold text-2xl">
                 Test setting
               </span>
-              <Button variant={'outline'} onClick={addCount}>
+              {/* <Button variant={'outline'} onClick={addCount}>
                 <Plus /> Add New Test
-              </Button>
+              </Button> */}
             </div>
             <TestingForm
               loading={loading}

web/src/pages/dataset/testing/testing-form.tsx

@@ -4,6 +4,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 
+import { CrossLanguageItem } from '@/components/cross-language-item-ui';
 import { FormContainer } from '@/components/form-container';
 import {
   initialTopKValue,
@@ -30,7 +31,8 @@ import { Textarea } from '@/components/ui/textarea';
 import { UseKnowledgeGraphFormField } from '@/components/use-knowledge-graph-item';
 import { useTestRetrieval } from '@/hooks/use-knowledge-request';
 import { trim } from 'lodash';
-import { useEffect } from 'react';
+import { CirclePlay } from 'lucide-react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 type TestingFormProps = Pick<
@@ -44,6 +46,7 @@ export default function TestingForm({
   setValues,
 }: TestingFormProps) {
   const { t } = useTranslation();
+  const [cross_languages, setCrossLangArr] = useState<string[]>([]);
 
   const formSchema = z.object({
     question: z.string().min(1, {
@@ -68,8 +71,9 @@ export default function TestingForm({
   const values = useWatch({ control: form.control });
 
   useEffect(() => {
-    setValues(values as Required<z.infer<typeof formSchema>>);
-  }, [setValues, values]);
+    // setValues(values as Required<z.infer<typeof formSchema>>);
+    setValues({ ...values, cross_languages });
+  }, [setValues, values, cross_languages]);
 
   function onSubmit() {
     refetch();
@@ -85,6 +89,12 @@ export default function TestingForm({
           ></SimilaritySliderFormField>
           <RerankFormFields></RerankFormFields>
           <UseKnowledgeGraphFormField name="use_kg"></UseKnowledgeGraphFormField>
+          <CrossLanguageItem
+            name={'cross_languages'}
+            onChange={(valArr) => {
+              setCrossLangArr(valArr);
+            }}
+          ></CrossLanguageItem>
         </FormContainer>
         <FormField
           control={form.control}
@@ -103,13 +113,16 @@ export default function TestingForm({
             </FormItem>
           )}
         />
-        <ButtonLoading
-          type="submit"
-          disabled={!!!trim(question)}
-          loading={loading}
-        >
-          {t('knowledgeDetails.testingLabel')}
-        </ButtonLoading>
+        <div className="flex justify-end">
+          <ButtonLoading
+            type="submit"
+            disabled={!!!trim(question)}
+            loading={loading}
+          >
+            {!loading && <CirclePlay />}
+            {t('knowledgeDetails.testingLabel')}
+          </ButtonLoading>
+        </div>
       </form>
     </Form>
   );