search-setting.tsx

Overview

search-setting.tsx is a React functional component file that implements a comprehensive search configuration form interface within a web application. This component enables users to view and modify search-related settings for a specific search application instance, including dataset selections, similarity thresholds, AI model configurations, and feature toggles such as reranking and AI summaries.

The form leverages React Hook Form with Zod for schema-based validation, ensuring robust data integrity. It integrates multiple UI components and hooks for fetching necessary data and managing state, providing an interactive and dynamic user experience for search configuration management.

Detailed Explanation

Component: SearchSetting

Purpose

The SearchSetting component renders a side panel form for editing the settings of a search application. It handles form state, validation, and submission logic, providing options to configure datasets, similarity metrics, AI models, and various search features.

Props

Internal State and Hooks

• Form State: Uses useForm from React Hook Form with zodResolver to validate against SearchSettingFormSchema.

• Dataset List: Maintains selectable datasets with embedded IDs, fetched via useFetchKnowledgeList.

• LLM Model Options: Uses custom hooks useSelectLlmOptionsByModelType and useComposeLlmOptionsByModelTypes to fetch AI model options for reranking and AI summaries.

• Feature Toggles: Watches form control for conditional UI rendering (e.g., rerank model selection, AI summary options).

• Loading State: Manages form submission loading indicator.

Schema: SearchSettingFormSchema

This Zod schema defines the validation rules for the form data:

• name: Required non-empty string.

• search_config.kb_ids: At least one dataset ID required.

• vector_similarity_weight: Number between 0 and 1.

• Conditional validations:

  • If rerank is enabled, rerank_id must be specified.

  • If AI summary is enabled, LLM model (llm_id) must be specified.

Form Fields and Controls

• Name: Text input for the search name (required).

• Avatar: Avatar upload component.

• Description: Textarea with default placeholder which clears/fills on focus/blur.

• Datasets: Multi-select dropdown listing datasets; ensures only datasets with matching embedding IDs are selectable.

• Similarity Threshold & Vector Similarity Weight: Slider + numeric input controls for configuring similarity metrics.

• Rerank Model Toggle & Selection: Switch to enable reranking and dropdown to select rerank model.

• Top K: Slider + input controlling how many top results to consider in reranking.

• AI Summary Toggle & LLM Settings: Switch to enable AI summary and nested LLM model configuration fields.

• Related Search & Query Mindmap Toggles: Switches to enable related search and query mindmap display.

Methods and Functions

• resetForm(): Resets the form fields to initial values from the data prop.

• handleDatasetSelectChange(value, onChange): Handles dataset selection changes, enforces embedding ID consistency.

• onSubmit(formData): Async function to process form submission, transform data, and call updateSearch hook. Closes form on success and handles loading state and errors.

Usage Example

import { SearchSetting } from './search-setting';

const Example = () => {
  const [open, setOpen] = useState(false);
  const searchData = {
    id: 'search123',
    name: 'My Search',
    avatar: '',
    description: 'Search description',
    search_config: {
      kb_ids: ['dataset1'],
      vector_similarity_weight: 0.3,
      web_search: true,
      similarity_threshold: 0.2,
      use_kg: false,
      rerank_id: '',
      use_rerank: false,
      top_k: 100,
      summary: false,
      llm_setting: { llm_id: '', parameter: '', temperature: 0 },
      related_search: false,
      query_mindmap: false,
      meta_data_filter: {},
    },
  };

  return (
    <>
      <button onClick={() => setOpen(true)}>Open Search Setting</button>
      <SearchSetting open={open} setOpen={setOpen} data={searchData} />
    </>
  );
};

Important Implementation Details

• Form Validation: Utilizes Zod schema validation with custom refinement logic to enforce conditional requirements.

• Dataset Embedding ID Consistency: When selecting datasets, disables incompatible datasets based on embedding ID to ensure consistent vector space usage.

• Weight Inversion: The vector_similarity_weight is stored internally as the complement (1 - value) for compatibility with backend expectations.

• Dynamic UI Rendering: Watches use_rerank and summary switches to conditionally render rerank model selector and LLM settings.

• Localization: All labels and messages use the useTranslation hook for internationalization.

• UI Animations: The panel animates open/close with fade-in-right and fade-out-right CSS animations.

• State Synchronization: Resets form fields whenever the data prop changes or the panel opens.

System Interaction

• Data Fetching:

  • useFetchKnowledgeList fetches available knowledge bases/datasets.

  • useFetchTenantInfo retrieves tenant system settings (e.g., tenant ID).

  • useSelectLlmOptionsByModelType and useComposeLlmOptionsByModelTypes fetch AI model options.

• State Management:

  • Manages internal form state with React Hook Form.

  • Uses external useUpdateSearch hook to submit updated settings to backend.

• UI Components:

  • Integrates multiple reusable UI components such as AvatarUpload, MultiSelect, Switch, SingleFormSlider, and RAGFlowSelect.

• Validation:

  • Uses zodResolver for form validation.

• Localization:

  • Uses react-i18next for text internationalization.

Mermaid Diagram

The following Mermaid class diagram illustrates the structure of the primary React component SearchSetting including its key properties, state, and methods.

classDiagram
    class SearchSetting {
        +boolean open
        +function setOpen(boolean)
        +string className
        +ISearchAppDetailProps data
        -useForm<SearchSettingFormData> formMethods
        -MultiSelectOptionType[] datasetList
        -string datasetSelectEmbdId
        -boolean formSubmitLoading
        +void resetForm()
        +void handleDatasetSelectChange(string[], onChange: function)
        +Promise<void> onSubmit(formData)
        +JSX.Element render()
    }
    SearchSetting ..> "1" ISearchAppDetailProps : uses
    SearchSetting ..> SearchSettingFormSchema : validates with
    SearchSetting ..> MultiSelectOptionType : manages dataset options
    SearchSetting ..> useFetchKnowledgeList : fetches dataset list
    SearchSetting ..> useUpdateSearch : submits updates
    SearchSetting ..> useSelectLlmOptionsByModelType : fetches LLM options
    SearchSetting ..> useComposeLlmOptionsByModelTypes : fetches AI summary models

Summary

search-setting.tsx is a critical UI component that encapsulates the search configuration logic for the application. It combines complex form state management, validation, and data fetching to allow users to tailor search behaviors and AI model parameters effectively. Its modular design and integration with shared hooks and UI elements make it reusable and maintainable within the overall system.

End of Documentation for search-setting.tsx