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)
2025-12-08 12:32:30 +08:00 · 2025-10-28 19:17:05 +08:00
parent 11247d1a9d
commit c5d1139f7b
8 changed files with 105 additions and 105 deletions
--- 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>
+      />
    </>
  );
 }
--- 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}
--- 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>
  );
 }
--- 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(
--- 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',
--- 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: '向量相似度',
--- 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>
--- 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}