Feat: Let system variables appear in operator prompts #3221 (#8154)

### What problem does this PR solve?
Feat: Let system variables appear in operator prompts #3221

### Type of change


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

web/src/components/top-n-item.tsx

@@ -1,14 +1,6 @@
 import { useTranslate } from '@/hooks/common-hooks';
 import { Form, Slider } from 'antd';
-import { useFormContext } from 'react-hook-form';
-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 = {
   top_n?: number;
@@ -41,22 +33,14 @@ interface SimilaritySliderFormFieldProps {
 }
 
 export function TopNFormField({ max = 30 }: SimilaritySliderFormFieldProps) {
-  const form = useFormContext();
   const { t } = useTranslate('chat');
 
   return (
-    <FormField
-      control={form.control}
+    <SliderInputFormField
       name={'top_n'}
-      render={({ field }) => (
-        <FormItem>
-          <FormLabel tooltip={t('topNTip')}>{t('topN')}</FormLabel>
-          <FormControl>
-            <SingleFormSlider {...field} max={max}></SingleFormSlider>
-          </FormControl>
-          <FormMessage />
-        </FormItem>
-      )}
-    />
+      label={t('topN')}
+      max={max}
+      tooltip={t('topNTip')}
+    ></SliderInputFormField>
   );
 }