From c5d1139f7b42be829e8240e690a910d11221ad49 Mon Sep 17 00:00:00 2001
From: chanx <1243304602@qq.com>
Date: Tue, 28 Oct 2025 19:17:05 +0800
Subject: [PATCH] Fix: Refactor the similarity slider component and modify the
 style of the dataset-test page #10703 (#10846)

### What problem does this PR solve?

Fix: Refactor the similarity slider component and modify the style of
the dataset-test page

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
---
 .../components/similarity-slider/index.tsx    | 101 +++++++++++++++---
 .../components/slider-input-form-field.tsx    |   5 +-
 web/src/components/top-n-item.tsx             |   2 +
 web/src/components/ui/dual-range-slider.tsx   |   4 +-
 web/src/locales/en.ts                         |   2 +-
 web/src/locales/zh.ts                         |   2 +-
 .../pages/dataset/testing/testing-form.tsx    |   8 +-
 web/src/pages/next-search/search-setting.tsx  |  86 ++-------------
 8 files changed, 105 insertions(+), 105 deletions(-)

diff --git a/web/src/components/similarity-slider/index.tsx b/web/src/components/similarity-slider/index.tsx
index 796d2415e..05a7f29ce 100644
--- a/web/src/components/similarity-slider/index.tsx
+++ b/web/src/components/similarity-slider/index.tsx
@@ -1,7 +1,19 @@
+import { FormLayout } from '@/constants/form';
 import { useTranslate } from '@/hooks/common-hooks';
+import { cn } from '@/lib/utils';
 import { Form, Slider } from 'antd';
+import { useFormContext } from 'react-hook-form';
 import { z } from 'zod';
 import { SliderInputFormField } from '../slider-input-form-field';
+import { SingleFormSlider } from '../ui/dual-range-slider';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../ui/form';
+import { NumberInput } from '../ui/input';
 
 type FieldType = {
   similarity_threshold?: number;
@@ -44,6 +56,7 @@ const SimilaritySlider = ({
 export default SimilaritySlider;
 
 interface SimilaritySliderFormFieldProps {
+  similarityName?: string;
   vectorSimilarityWeightName?: string;
   isTooltipShown?: boolean;
 }
@@ -70,37 +83,93 @@ export const initialVectorSimilarityWeightValue = {
 };
 
 export function SimilaritySliderFormField({
+  similarityName = 'similarity_threshold',
   vectorSimilarityWeightName = 'vector_similarity_weight',
   isTooltipShown,
 }: SimilaritySliderFormFieldProps) {
   const { t } = useTranslate('knowledgeDetails');
-  const isVector = vectorSimilarityWeightName === 'vector_similarity_weight';
+  const form = useFormContext();
+  const isVector =
+    vectorSimilarityWeightName.indexOf('vector_similarity_weight') > -1;
 
   return (
     <>
       <SliderInputFormField
-        name={'similarity_threshold'}
+        name={similarityName}
         label={t('similarityThreshold')}
         max={1}
         step={0.01}
+        layout={FormLayout.Vertical}
         tooltip={isTooltipShown && t('similarityThresholdTip')}
       ></SliderInputFormField>
-      <SliderInputFormField
+      <FormField
+        control={form.control}
         name={vectorSimilarityWeightName}
-        label={t(
-          isVector ? 'vectorSimilarityWeight' : 'keywordSimilarityWeight',
+        defaultValue={0}
+        render={({ field }) => (
+          <FormItem
+          // className={cn({ 'flex items-center gap-1 space-y-0': isHorizontal })}
+          >
+            <FormLabel
+              tooltip={
+                isTooltipShown &&
+                t(
+                  isVector
+                    ? 'vectorSimilarityWeightTip'
+                    : 'keywordSimilarityWeightTip',
+                )
+              }
+            >
+              {t(
+                isVector ? 'vectorSimilarityWeight' : 'keywordSimilarityWeight',
+              )}
+            </FormLabel>
+            <div className={cn('flex items-end gap-14 justify-between')}>
+              <FormControl>
+                <div className="flex flex-col flex-1 gap-2">
+                  <div className="flex justify-between items-center">
+                    <div className="flex items-center gap-1">
+                      <label className="italic text-xs text-text-secondary">
+                        vector
+                      </label>
+                      <span className="bg-bg-card rounded-md p-1 w-10 text-center text-xs">
+                        {field.value.toFixed(2)}
+                      </span>
+                    </div>
+                    <div className="flex  items-center gap-1">
+                      <label className="italic text-xs text-text-secondary">
+                        full-text
+                      </label>
+                      <span className="bg-bg-card rounded-md p-1 w-10 text-center text-xs">
+                        {(1 - field.value).toFixed(2)}
+                      </span>
+                    </div>
+                  </div>
+                  <SingleFormSlider
+                    {...field}
+                    max={1}
+                    step={0.01}
+                    min={0}
+                  ></SingleFormSlider>
+                </div>
+              </FormControl>
+              <FormControl>
+                <NumberInput
+                  className={cn(
+                    'h-6 w-10 p-0 text-center bg-bg-input border-border-default border text-text-secondary',
+                    '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
+                  )}
+                  max={1}
+                  min={0}
+                  step={0.01}
+                  {...field}
+                ></NumberInput>
+              </FormControl>
+            </div>
+            <FormMessage />
+          </FormItem>
         )}
-        max={1}
-        step={0.01}
-        tooltip={
-          isTooltipShown &&
-          t(
-            isVector
-              ? 'vectorSimilarityWeightTip'
-              : 'keywordSimilarityWeightTip',
-          )
-        }
-      ></SliderInputFormField>
+      />
     </>
   );
 }
diff --git a/web/src/components/slider-input-form-field.tsx b/web/src/components/slider-input-form-field.tsx
index 8972222a8..40b2c6804 100644
--- a/web/src/components/slider-input-form-field.tsx
+++ b/web/src/components/slider-input-form-field.tsx
@@ -79,7 +79,10 @@ export function SliderInputFormField({
             </FormControl>
             <FormControl>
               <NumberInput
-                className="h-7 w-20"
+                className={cn(
+                  'h-6 w-10 p-0 text-center bg-bg-input border border-border-default text-text-secondary',
+                  '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
+                )}
                 max={max}
                 min={min}
                 step={step}
diff --git a/web/src/components/top-n-item.tsx b/web/src/components/top-n-item.tsx
index c826c3700..f91140f2d 100644
--- a/web/src/components/top-n-item.tsx
+++ b/web/src/components/top-n-item.tsx
@@ -1,3 +1,4 @@
+import { FormLayout } from '@/constants/form';
 import { useTranslate } from '@/hooks/common-hooks';
 import { Form, Slider } from 'antd';
 import { z } from 'zod';
@@ -46,6 +47,7 @@ export function TopNFormField({ max = 30 }: SimilaritySliderFormFieldProps) {
       label={t('topN')}
       max={max}
       tooltip={t('topNTip')}
+      layout={FormLayout.Vertical}
     ></SliderInputFormField>
   );
 }
diff --git a/web/src/components/ui/dual-range-slider.tsx b/web/src/components/ui/dual-range-slider.tsx
index e2fbb303c..88210920a 100644
--- a/web/src/components/ui/dual-range-slider.tsx
+++ b/web/src/components/ui/dual-range-slider.tsx
@@ -28,12 +28,12 @@ const DualRangeSlider = React.forwardRef<
       )}
       {...props}
     >
-      <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-border-button">
+      <SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full bg-border-button">
         <SliderPrimitive.Range className="absolute h-full bg-accent-primary" />
       </SliderPrimitive.Track>
       {initialValue.map((value, index) => (
         <React.Fragment key={index}>
-          <SliderPrimitive.Thumb className="relative block h-4 w-4 rounded-full border-2 border-accent-primary bg-white ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer">
+          <SliderPrimitive.Thumb className="relative block h-2.5 w-2.5 rounded-full border-2 border-accent-primary bg-white ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer">
             {label && (
               <span
                 className={cn(
diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts
index 42cccdb38..88c17b1e1 100644
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@@ -191,7 +191,7 @@ export default {
         'This sets the weight of keyword similarity in the combined similarity score, either used with vector cosine similarity or with reranking score. The total of the two weights must equal 1.0.',
       testText: 'Test text',
       testTextPlaceholder: 'Input your question here!',
-      testingLabel: 'Testing',
+      testingLabel: 'Run',
       similarity: 'Hybrid similarity',
       termSimilarity: 'Term similarity',
       vectorSimilarity: 'Vector similarity',
diff --git a/web/src/locales/zh.ts b/web/src/locales/zh.ts
index 4d2170aa9..55cafe3d2 100644
--- a/web/src/locales/zh.ts
+++ b/web/src/locales/zh.ts
@@ -177,7 +177,7 @@ export default {
         '我们使用混合相似性评分来评估两行文本之间的距离。它是加权关键字相似性和矢量余弦相似性或rerank得分（0〜1）。两个权重的总和为1.0。',
       testText: '测试文本',
       testTextPlaceholder: '请输入您的问题！',
-      testingLabel: '测试',
+      testingLabel: '运行',
       similarity: '混合相似度',
       termSimilarity: '关键词相似度',
       vectorSimilarity: '向量相似度',
diff --git a/web/src/pages/dataset/testing/testing-form.tsx b/web/src/pages/dataset/testing/testing-form.tsx
index fb9f3189b..f6dc195b0 100644
--- a/web/src/pages/dataset/testing/testing-form.tsx
+++ b/web/src/pages/dataset/testing/testing-form.tsx
@@ -24,14 +24,13 @@ import {
   FormControl,
   FormField,
   FormItem,
-  FormLabel,
   FormMessage,
 } from '@/components/ui/form';
 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 { CirclePlay } from 'lucide-react';
+import { Send } from 'lucide-react';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -97,7 +96,7 @@ export default function TestingForm({
           name="question"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>{t('knowledgeDetails.testText')}</FormLabel>
+              {/* <FormLabel>{t('knowledgeDetails.testText')}</FormLabel> */}
               <FormControl>
                 <Textarea {...field}></Textarea>
               </FormControl>
@@ -112,8 +111,9 @@ export default function TestingForm({
             disabled={!!!trim(question)}
             loading={loading}
           >
-            {!loading && <CirclePlay />}
+            {/* {!loading && <CirclePlay />} */}
             {t('knowledgeDetails.testingLabel')}
+            <Send />
           </ButtonLoading>
         </div>
       </form>
diff --git a/web/src/pages/next-search/search-setting.tsx b/web/src/pages/next-search/search-setting.tsx
index 8a9e136cb..665d7e49b 100644
--- a/web/src/pages/next-search/search-setting.tsx
+++ b/web/src/pages/next-search/search-setting.tsx
@@ -5,6 +5,7 @@ import {
   MetadataFilter,
   MetadataFilterSchema,
 } from '@/components/metadata-filter';
+import { SimilaritySliderFormField } from '@/components/similarity-slider';
 import { Button } from '@/components/ui/button';
 import { SingleFormSlider } from '@/components/ui/dual-range-slider';
 import {
@@ -392,86 +393,11 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
               )}
             />
             <MetadataFilter prefix="search_config."></MetadataFilter>
-            <FormField
-              control={formMethods.control}
-              name="search_config.similarity_threshold"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel
-                    tooltip={t('knowledgeDetails.similarityThresholdTip')}
-                  >
-                    {t('knowledgeDetails.similarityThreshold')}
-                  </FormLabel>
-                  <div
-                    className={cn(
-                      'flex items-center gap-4 justify-between',
-                      className,
-                    )}
-                  >
-                    <FormControl>
-                      <SingleFormSlider
-                        {...field}
-                        max={1}
-                        min={0}
-                        step={0.01}
-                      ></SingleFormSlider>
-                    </FormControl>
-                    <FormControl>
-                      <Input
-                        type={'number'}
-                        className="h-7 w-20 bg-bg-card"
-                        max={1}
-                        min={0}
-                        step={0.01}
-                        {...field}
-                      ></Input>
-                    </FormControl>
-                  </div>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            {/* Keyword Similarity Weight */}
-            <FormField
-              control={formMethods.control}
-              name="search_config.vector_similarity_weight"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel
-                    tooltip={t('knowledgeDetails.vectorSimilarityWeightTip')}
-                  >
-                    <span className="text-destructive mr-1"> *</span>
-                    {t('knowledgeDetails.vectorSimilarityWeight')}
-                  </FormLabel>
-                  <div
-                    className={cn(
-                      'flex items-center gap-4 justify-between',
-                      className,
-                    )}
-                  >
-                    <FormControl>
-                      <SingleFormSlider
-                        {...field}
-                        max={1}
-                        min={0}
-                        step={0.01}
-                      ></SingleFormSlider>
-                    </FormControl>
-                    <FormControl>
-                      <Input
-                        type={'number'}
-                        className="h-7 w-20 bg-bg-card"
-                        max={1}
-                        min={0}
-                        step={0.01}
-                        {...field}
-                      ></Input>
-                    </FormControl>
-                  </div>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+            <SimilaritySliderFormField
+              isTooltipShown
+              similarityName="search_config.similarity_threshold"
+              vectorSimilarityWeightName="search_config.vector_similarity_weight"
+            ></SimilaritySliderFormField>
             {/* Rerank Model */}
             <FormField
               control={formMethods.control}