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

@@ -19,7 +19,7 @@ interface IProps {
   leftPanel?: ReactNode;
 }
 
-const FilterButton = React.forwardRef<
+export const FilterButton = React.forwardRef<
   HTMLButtonElement,
   ButtonProps & { count?: number }
 >(({ count = 0, ...props }, ref) => {

web/src/components/rerank.tsx

@@ -4,7 +4,8 @@ import { useSelectLlmOptionsByModelType } from '@/hooks/llm-hooks';
 import { Select as AntSelect, Form, message, Slider } from 'antd';
 import { useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
-import { SingleFormSlider } from './ui/dual-range-slider';
+import { z } from 'zod';
+import { SliderInputFormField } from './slider-input-form-field';
 import {
   FormControl,
   FormField,
@@ -63,6 +64,14 @@ export const RerankItem = () => {
   );
 };
 
+export const topKSchema = {
+  top_k: z.number().optional(),
+};
+
+export const initialTopKValue = {
+  top_k: 1024,
+};
+
 const Rerank = () => {
   const { t } = useTranslate('knowledgeDetails');
 
@@ -143,7 +152,7 @@ function RerankFormField() {
 }
 
 export function RerankFormFields() {
-  const { control, watch } = useFormContext();
+  const { watch } = useFormContext();
   const { t } = useTranslate('knowledgeDetails');
   const rerankId = watch(RerankId);
 
@@ -151,23 +160,13 @@ export function RerankFormFields() {
     <>
       <RerankFormField></RerankFormField>
       {rerankId && (
-        <FormField
-          control={control}
+        <SliderInputFormField
           name={'top_k'}
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel tooltip={t('topKTip')}>{t('topK')}</FormLabel>
-              <FormControl>
-                <SingleFormSlider
-                  {...field}
-                  max={2048}
-                  min={1}
-                ></SingleFormSlider>
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+          label={t('topK')}
+          max={2048}
+          min={1}
+          tooltip={t('topKTip')}
+        ></SliderInputFormField>
       )}
     </>
   );

web/src/components/similarity-slider/index.tsx

@@ -1,15 +1,7 @@
 import { useTranslate } from '@/hooks/common-hooks';
 import { Form, Slider } from 'antd';
-import { useFormContext } from 'react-hook-form';
 import { z } from 'zod';
-import { SingleFormSlider } from '../ui/dual-range-slider';
-import {
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '../ui/form';
+import { SliderInputFormField } from '../slider-input-form-field';
 
 type FieldType = {
   similarity_threshold?: number;
@@ -73,51 +65,24 @@ export function SimilaritySliderFormField({
   vectorSimilarityWeightName = 'vector_similarity_weight',
   isTooltipShown,
 }: SimilaritySliderFormFieldProps) {
-  const form = useFormContext();
   const { t } = useTranslate('knowledgeDetails');
 
   return (
     <>
-      <FormField
-        control={form.control}
+      <SliderInputFormField
         name={'similarity_threshold'}
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel tooltip={isTooltipShown && t('similarityThresholdTip')}>
-              {t('similarityThreshold')}
-            </FormLabel>
-            <FormControl>
-              <SingleFormSlider
-                {...field}
-                max={1}
-                step={0.01}
-              ></SingleFormSlider>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-      <FormField
-        control={form.control}
+        label={t('similarityThreshold')}
+        max={1}
+        step={0.01}
+        tooltip={isTooltipShown && t('similarityThresholdTip')}
+      ></SliderInputFormField>
+      <SliderInputFormField
         name={vectorSimilarityWeightName}
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel
-              tooltip={isTooltipShown && t('vectorSimilarityWeightTip')}
-            >
-              {t('vectorSimilarityWeight')}
-            </FormLabel>
-            <FormControl>
-              <SingleFormSlider
-                {...field}
-                max={1}
-                step={0.01}
-              ></SingleFormSlider>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
+        label={t('vectorSimilarityWeight')}
+        max={1}
+        step={0.01}
+        tooltip={isTooltipShown && t('vectorSimilarityWeightTip')}
+      ></SliderInputFormField>
     </>
   );
 }

web/src/components/slider-input-form-field.tsx

@@ -1,3 +1,4 @@
+import { cn } from '@/lib/utils';
 import { ReactNode } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { SingleFormSlider } from './ui/dual-range-slider';
@@ -18,6 +19,7 @@ type SliderInputFormFieldProps = {
   label: string;
   tooltip?: ReactNode;
   defaultValue?: number;
+  className?: string;
 };
 
 export function SliderInputFormField({
@@ -28,6 +30,7 @@ export function SliderInputFormField({
   name,
   tooltip,
   defaultValue,
+  className,
 }: SliderInputFormFieldProps) {
   const form = useFormContext();
 
@@ -39,7 +42,12 @@ export function SliderInputFormField({
       render={({ field }) => (
         <FormItem>
           <FormLabel tooltip={tooltip}>{label}</FormLabel>
-          <div className="flex items-center gap-14 justify-between">
+          <div
+            className={cn(
+              'flex items-center gap-14 justify-between',
+              className,
+            )}
+          >
             <FormControl>
               <SingleFormSlider
                 {...field}