Feat: Rendering recall test page #3221 (#7689)

### What problem does this PR solve?

Feat: Rendering recall test page #3221
### Type of change


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

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

@@ -4,7 +4,12 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 
-import { RerankFormFields } from '@/components/rerank';
+import { FormContainer } from '@/components/form-container';
+import {
+  initialTopKValue,
+  RerankFormFields,
+  topKSchema,
+} from '@/components/rerank';
 import {
   initialKeywordsSimilarityWeightValue,
   initialSimilarityThresholdValue,
@@ -12,6 +17,7 @@ import {
   SimilaritySliderFormField,
   similarityThresholdSchema,
 } from '@/components/similarity-slider';
+import { ButtonLoading } from '@/components/ui/button';
 import {
   Form,
   FormControl,
@@ -20,7 +26,6 @@ import {
   FormLabel,
   FormMessage,
 } from '@/components/ui/form';
-import { LoadingButton } from '@/components/ui/loading-button';
 import { Textarea } from '@/components/ui/textarea';
 import { UseKnowledgeGraphFormField } from '@/components/use-knowledge-graph-item';
 import { useTestRetrieval } from '@/hooks/use-knowledge-request';
@@ -46,6 +51,7 @@ export default function TestingForm({
     }),
     ...similarityThresholdSchema,
     ...keywordsSimilarityWeightSchema,
+    ...topKSchema,
   });
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -53,6 +59,7 @@ export default function TestingForm({
     defaultValues: {
       ...initialSimilarityThresholdValue,
       ...initialKeywordsSimilarityWeightValue,
+      ...initialTopKValue,
     },
   });
 
@@ -71,12 +78,14 @@ export default function TestingForm({
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <SimilaritySliderFormField
-          vectorSimilarityWeightName="keywords_similarity_weight"
-          isTooltipShown
-        ></SimilaritySliderFormField>
-        <RerankFormFields></RerankFormFields>
-        <UseKnowledgeGraphFormField name="use_kg"></UseKnowledgeGraphFormField>
+        <FormContainer className="p-10">
+          <SimilaritySliderFormField
+            vectorSimilarityWeightName="keywords_similarity_weight"
+            isTooltipShown
+          ></SimilaritySliderFormField>
+          <RerankFormFields></RerankFormFields>
+          <UseKnowledgeGraphFormField name="use_kg"></UseKnowledgeGraphFormField>
+        </FormContainer>
         <FormField
           control={form.control}
           name="question"
@@ -94,16 +103,13 @@ export default function TestingForm({
             </FormItem>
           )}
         />
-        <LoadingButton
-          variant={'tertiary'}
-          size={'sm'}
+        <ButtonLoading
           type="submit"
-          className="w-full"
           disabled={!!!trim(question)}
           loading={loading}
         >
           {t('knowledgeDetails.testingLabel')}
-        </LoadingButton>
+        </ButtonLoading>
       </form>
     </Form>
   );