testing-form.tsx

Overview

testing-form.tsx is a React functional component file that implements a user interface form for testing knowledge retrieval queries. It is designed to capture user input parameters related to similarity thresholds, vector similarity weights, ranking parameters, and optionally the use of a knowledge graph. The form validates inputs with the zod schema validation library integrated into react-hook-form and triggers a data refetch when submitted.

This component primarily serves as an interactive front-end form that allows users to configure and test retrieval settings before running a query against a knowledge base or search system.

Detailed Explanation

Imports and Dependencies

• Form and UI Components: Custom UI components like Form, FormField, Textarea, ButtonLoading, and a variety of specialized form fields (SimilaritySliderFormField, RerankFormFields, UseKnowledgeGraphFormField, CrossLanguageFormField) are imported from internal UI/component libraries.

• Form Management: Uses react-hook-form for form state management and validation integration with zod via @hookform/resolvers/zod.

• Validation Schemas: zod schemas for similarity thresholds, vector similarity weights, and ranking parameters are imported and combined into a comprehensive form schema.

• Hooks: useTestRetrieval hook provides loading state, a refetch function, and a setter for external values.

• Other Utilities: useTranslation from react-i18next for internationalization, lodash.trim for input validation, and React useEffect for side effects.

Main Exported Component: TestingForm

Signature

function TestingForm(props: TestingFormProps): JSX.Element

Props

type TestingFormProps = Pick<
  ReturnType<typeof useTestRetrieval>,
  'loading' | 'refetch' | 'setValues'
>;

• loading (boolean): Indicates whether the retrieval process is currently loading.

• refetch (() => void): Function to trigger a refetch or re-execution of the retrieval query.

• setValues ((values: Required<z.infer<typeof formSchema>>) => void): Function to update external state with the current form values.

Internal Data and Logic

• Form Schema (formSchema): Combines multiple zod schemas:

  • question: required string, must not be empty.

  • similarityThresholdSchema: validates similarity threshold related fields.

  • vectorSimilarityWeightSchema: validates vector similarity weight related fields.

  • topKSchema: validates top K ranking fields.

  • use_kg: optional boolean indicating the use of knowledge graph.

• Form Initialization:

  • useForm initializes the form with default values:

    • initialSimilarityThresholdValue

    • initialVectorSimilarityWeightValue

    • initialTopKValue

    • use_kg defaulting to false

  • zodResolver(formSchema) enables schema validation.

• Watched Fields:

  • question is watched to enable/disable the submit button based on non-empty trimmed input.

  • Entire form values are watched and synced to external state via setValues inside a useEffect.

• Submission Logic:

  • onSubmit simply calls refetch() to initiate the retrieval process based on current form values.

Rendered JSX Structure

• Form Wrapper: <Form {...form}> provides context for react-hook-form.

• Form Element: <form onSubmit={form.handleSubmit(onSubmit)} ...> handles submit event.

• FormContainer: Groups sliders and toggle fields:

  • SimilaritySliderFormField (with tooltip)

  • RerankFormFields

  • UseKnowledgeGraphFormField (toggle checkbox)

  • CrossLanguageFormField (language selection)

• Question Input: Controlled textarea with label and validation message.

• Submit Button: ButtonLoading that shows a loading spinner and disables submit if question is empty.

Usage Example

import { useTestRetrieval } from '@/hooks/use-knowledge-request';

function ParentComponent() {
  const { loading, refetch, setValues } = useTestRetrieval();

  return (
    <TestingForm loading={loading} refetch={refetch} setValues={setValues} />
  );
}

Important Implementation Details

• Schema-Driven Validation: Leveraging zod schemas and zodResolver with react-hook-form ensures form inputs are validated both on the client side and in a type-safe manner.

• Form Synchronization: Uses useWatch and useEffect to synchronize form state (values) with an external state handler (setValues), enabling the parent or other components to be aware of the current form configuration at all times.

• Conditional Button State: The submit button is disabled unless the question field contains a non-empty trimmed string, ensuring no empty queries are submitted.

• Internationalization: All user-facing text (labels, placeholders, button text) is localized using react-i18next.

Interactions with Other Parts of the System

• Hooks:

  • useTestRetrieval supplies the loading state, a refetch handler, and a setter for values. This hook likely manages the actual data retrieval logic and state outside this form.

• Components:

  • Uses multiple reusable form components (SimilaritySliderFormField, RerankFormFields, etc.) which encapsulate specific UI and logic for individual configuration fields.

• Validation Schemas:

  • Imports shared zod schemas (similarityThresholdSchema, vectorSimilarityWeightSchema, topKSchema) ensuring consistency in validation across the application.

• Localization:

  • Uses useTranslation hook for displaying translated strings, integrating with the app's internationalization framework.

Mermaid Component Diagram

componentDiagram
    component TestingForm {
        +loading: boolean
        +refetch(): void
        +setValues(values): void
        +form: useForm
        +onSubmit(): void
    }

    component SimilaritySliderFormField
    component RerankFormFields
    component UseKnowledgeGraphFormField
    component CrossLanguageFormField
    component ButtonLoading
    component Textarea

    TestingForm --> SimilaritySliderFormField : renders
    TestingForm --> RerankFormFields : renders
    TestingForm --> UseKnowledgeGraphFormField : renders
    TestingForm --> CrossLanguageFormField : renders
    TestingForm --> ButtonLoading : renders
    TestingForm --> Textarea : renders

Summary

testing-form.tsx is a well-structured React component that provides a configurable, validated form for testing knowledge retrieval queries. It integrates advanced form state management, schema validation, internationalization, and centralized state synchronization to support a seamless user experience in configuring retrieval parameters. It relies on modular components and hooks, making it a clean, reusable piece in a larger knowledge retrieval or search application.