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