index.tsx

Overview

This file defines React components and related types/validation schemas for rendering slider inputs used to configure similarity thresholds and weights in a form, likely related to knowledge or search relevance settings. It provides two main UI components:

SimilaritySlider: A simple slider form item component using Ant Design's Form.Item and Slider.
SimilaritySliderFormField: A more generic slider input form field component built on a custom SliderInputFormField component.

The file also exports initial values and Zod schemas for input validation and type safety, ensuring the similarity threshold and similarity weight inputs are numbers.

The components support localization via a custom useTranslate hook and optionally show tooltips with explanatory information.

Detailed Explanation

Types and Interfaces

type FieldType = {
  similarity_threshold?: number;
  // vector_similarity_weight?: number;
};

Defines the shape of form data fields used in the form items.
Currently includes only similarity_threshold.
vector_similarity_weight is commented out but referenced elsewhere.

interface IProps {
  isTooltipShown?: boolean;
  vectorSimilarityWeightName?: string;
}

Props for the SimilaritySlider component.
isTooltipShown (optional boolean): Whether tooltips should be displayed.
vectorSimilarityWeightName (optional string): The form field name for vector similarity weight; defaults to 'vector_similarity_weight'.

interface SimilaritySliderFormFieldProps {
  vectorSimilarityWeightName?: string;
  isTooltipShown?: boolean;
}

Props for the SimilaritySliderFormField component.
Same as IProps.

Constants and Validation Schemas

export const initialSimilarityThresholdValue = {
  similarity_threshold: 0.2,
};

Default initial value for similarity threshold.

export const initialKeywordsSimilarityWeightValue = {
  keywords_similarity_weight: 0.7,
};

Default initial value for keywords similarity weight.

export const initialVectorSimilarityWeightValue = {
  vector_similarity_weight: 0.3,
};

Default initial value for vector similarity weight.

export const similarityThresholdSchema = { similarity_threshold: z.number() };
export const keywordsSimilarityWeightSchema = {
  keywords_similarity_weight: z.number(),
};
export const vectorSimilarityWeightSchema = {
  vector_similarity_weight: z.number(),
};

Zod schemas for validating that the respective fields are numbers.
Used for runtime validation of form values.

Components

SimilaritySlider

const SimilaritySlider = ({
  isTooltipShown = false,
  vectorSimilarityWeightName = 'vector_similarity_weight',
}: IProps) => {
  const { t } = useTranslate('knowledgeDetails');

  return (
    <>
      <Form.Item<FieldType>
        label={t('similarityThreshold')}
        name={'similarity_threshold'}
        tooltip={isTooltipShown && t('similarityThresholdTip')}
        initialValue={0.2}
      >
        <Slider max={1} step={0.01} />
      </Form.Item>
      <Form.Item
        label={t('vectorSimilarityWeight')}
        name={vectorSimilarityWeightName}
        initialValue={1 - 0.3}
        tooltip={isTooltipShown && t('vectorSimilarityWeightTip')}
      >
        <Slider max={1} step={0.01} />
      </Form.Item>
    </>
  );
};

Functional React component rendering two slider inputs inside Ant Design's Form.Item.
Uses useTranslate hook for localized labels and tooltips.
Props:
- isTooltipShown: If true, shows tooltips with explanations.
- vectorSimilarityWeightName: The form field name for the vector similarity slider.
The sliders:
- similarity_threshold: value between 0 and 1, step 0.01, default 0.2.
- vector_similarity_weight (or custom name): value between 0 and 1, step 0.01, default 0.7 (calculated as 1 - 0.3).
Usage example:

<Form>
  <SimilaritySlider isTooltipShown={true} />
</Form>

SimilaritySliderFormField

export function SimilaritySliderFormField({
  vectorSimilarityWeightName = 'vector_similarity_weight',
  isTooltipShown,
}: SimilaritySliderFormFieldProps) {
  const { t } = useTranslate('knowledgeDetails');
  const isVector = vectorSimilarityWeightName === 'vector_similarity_weight';

  return (
    <>
      <SliderInputFormField
        name={'similarity_threshold'}
        label={t('similarityThreshold')}
        max={1}
        step={0.01}
        tooltip={isTooltipShown && t('similarityThresholdTip')}
      ></SliderInputFormField>
      <SliderInputFormField
        name={vectorSimilarityWeightName}
        label={t(
          isVector ? 'vectorSimilarityWeight' : 'keywordSimilarityWeight',
        )}
        max={1}
        step={0.01}
        tooltip={
          isTooltipShown &&
          t(
            isVector
              ? 'vectorSimilarityWeightTip'
              : 'keywordSimilarityWeightTip',
          )
        }
      ></SliderInputFormField>
    </>
  );
}

Functional React component rendering two slider inputs using a custom SliderInputFormField component (imported).
Supports both "vector similarity weight" and "keyword similarity weight" fields depending on vectorSimilarityWeightName.
Uses localization for labels and tooltips.
Props:
- vectorSimilarityWeightName: string for the second slider's form field name.
- isTooltipShown: boolean to toggle tooltips.
Usage example:

<SimilaritySliderFormField vectorSimilarityWeightName="keyword_similarity_weight" isTooltipShown={true} />

Implementation Details and Algorithms

Both components use sliders limited to the range [0, 1] with fine step increments (0.01), which suits similarity metrics that are typically represented as decimal weights.
The components leverage the useTranslate hook scoped to 'knowledgeDetails' for i18n support.
Form validation schemas using Zod ensure the submitted values are numbers, enabling type-safe form handling elsewhere.
The file abstracts similarity weights to allow usage of either vector or keyword similarity weights by parameterizing the field name.

Interaction with Other Parts of the System

useTranslate hook: This hook is imported from @/hooks/common-hooks to provide localized strings, implying this file is part of a larger internationalized application.
SliderInputFormField component: A custom component imported from a relative path, likely wrapping antd's slider with form integration.
Ant Design components: Uses Form and Slider from the Ant Design library for consistent UI styling and behavior.
Form state management: These components are designed to be used inside Ant Design <Form> components, integrating with form state and validation.
Validation schemas: Exported Zod schemas are likely consumed by form validation logic elsewhere in the app.

Visual Diagram

componentDiagram
    component "SimilaritySlider" {
      +isTooltipShown: boolean (optional)
      +vectorSimilarityWeightName: string (optional)
      +returns JSX.Element (Antd Form Items with Sliders)
    }
    component "SimilaritySliderFormField" {
      +isTooltipShown: boolean (optional)
      +vectorSimilarityWeightName: string (optional)
      +returns JSX.Element (SliderInputFormField components)
    }
    component "SliderInputFormField" {
      +name: string
      +label: string
      +max: number
      +step: number
      +tooltip: string (optional)
    }
    component "useTranslate" {
      +t(key: string): string
    }

    "SimilaritySlider" --> "useTranslate"
    "SimilaritySliderFormField" --> "useTranslate"
    "SimilaritySliderFormField" --> "SliderInputFormField"

Summary

This file provides reusable, localized slider input components for configuring similarity thresholds and weights in a form, with support for tooltips and validation. It cleanly separates UI concerns from validation schemas and initial values, enabling consistent usage across the application. The ability to switch between vector and keyword similarity weight input by prop enhances flexibility.

End of Documentation for index.tsx