metadata-filter-conditions.tsx

Overview

The metadata-filter-conditions.tsx file defines the MetadataFilterConditions React functional component, which provides a dynamic UI for creating and managing filter conditions based on metadata keys retrieved from specified knowledge base IDs (kbIds). This component integrates with a form context (using react-hook-form) and allows users to:

• Select metadata keys from a dropdown menu.

• Define filter conditions by specifying a key, an operator, and a value.

• Add or remove multiple filter conditions dynamically.

• Utilize internationalization (i18next) for multi-language support.

This component is primarily used within an agent or chatbot context where filtering based on knowledge metadata is required.

Detailed Explanation

Component: MetadataFilterConditions

export function MetadataFilterConditions({
  kbIds,
  prefix = '',
}: {
  kbIds: string[];
  prefix?: string;
})

Purpose

Renders a section of dynamic filter condition inputs for metadata properties fetched from knowledge bases identified by kbIds. It manages the state of filter conditions within a form via react-hook-form.

Props

Internal State and Hooks

• useTranslation: Provides the t function for localized text strings.

• useFormContext: Accesses the form control and context from react-hook-form.

• useFetchKnowledgeMetadata(kbIds): Custom hook that fetches metadata keys related to the given knowledge base IDs.

• useBuildSwitchOperatorOptions(): Custom hook returning available operator options for filtering.

• useFieldArray: Hook from react-hook-form to manage dynamic arrays of form fields (manual filter conditions).

• useCallback: Memoizes the add function used for appending new filter conditions.

Key Variables

• name: Composed form field name string based on optional prefix, e.g. 'meta_data_filter.manual'.

• fields: Array of filter condition objects managed by useFieldArray.

• remove: Function to remove a filter condition by index.

• append: Function to add a new filter condition.

Functional Behavior

• Add Filter Condition: Clicking the "+" button opens a dropdown listing metadata keys fetched from metadata.data. Selecting a key adds a new filter condition initialized with the key, an empty value, and a default operator.

• Edit Filter Conditions: Each condition row allows editing:

  • key: Text input for the metadata key.

  • op: Dropdown select with search for choosing the operator.

  • value: Text input for the value to compare.

• Remove Filter Condition: An "X" button deletes the corresponding condition.

Return / JSX Structure

• A <section> containing:

  • A header with a label and a dropdown button to add new conditions.

  • A list of filter condition rows, each with inputs for key, operator, value, and a remove button.

Usage Example

import { useForm, FormProvider } from 'react-hook-form';

function FilterForm() {
  const methods = useForm({
    defaultValues: {
      meta_data_filter: { manual: [] },
    },
  });

  const kbIds = ['kb1', 'kb2'];

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(data => console.log(data))}>
        <MetadataFilterConditions kbIds={kbIds} />
        <button type="submit">Submit</button>
      </form>
    </FormProvider>
  );
}

This example sets up a form context, provides knowledge base IDs, and renders the filter conditions component with form submission.

Important Implementation Details

• Dynamic Form Arrays: The component uses react-hook-form’s useFieldArray to manage an array of filter conditions dynamically, ensuring form state consistency.

• Custom Hooks Integration: It leverages custom hooks such as useFetchKnowledgeMetadata to retrieve metadata keys asynchronously, and useBuildSwitchOperatorOptions to supply operator options, encapsulating external data logic.

• Localization Support: All user-facing strings like labels and placeholders use the t function from react-i18next to support multiple languages.

• UI Components: Utilizes reusable UI components (e.g., SelectWithSearch, DropdownMenu, Input, Button) promoting consistency across the application.

• Performance Optimization: The add function is memoized with useCallback to prevent unnecessary re-renders.

Interaction with Other System Parts

• Form System: This component is designed to be used within a react-hook-form context as part of larger forms that handle agent or chatbot configurations.

• Data Fetching: It interacts with the knowledge base through the useFetchKnowledgeMetadata hook, which fetches metadata keys for filters.

• Operator Options: It depends on useBuildSwitchOperatorOptions and SwitchOperatorOptions constants to populate filtering operators.

• UI Layer: Integrates with UI primitives and components from the application's shared component library (@/components/ui/*).

• Internationalization: Uses react-i18next for translations, aligning with the app’s localization strategy.

Mermaid Component Diagram

componentDiagram
    component MetadataFilterConditions {
        +kbIds: string[]
        +prefix?: string
        +add(key: string): void
        +remove(index: number): void
    }
    component useFetchKnowledgeMetadata
    component useBuildSwitchOperatorOptions
    component react-hook-form (useFormContext, useFieldArray)
    component i18next (useTranslation)
    component UIComponents (SelectWithSearch, Button, DropdownMenu, Input, Form*)

    MetadataFilterConditions --> useFetchKnowledgeMetadata : fetch metadata keys
    MetadataFilterConditions --> useBuildSwitchOperatorOptions : get operator options
    MetadataFilterConditions --> react-hook-form : form state & dynamic fields
    MetadataFilterConditions --> i18next : translations
    MetadataFilterConditions --> UIComponents : renders inputs, buttons, dropdowns

Summary

metadata-filter-conditions.tsx is a reusable React component that enables users to create complex metadata-based filter conditions dynamically within a form. It efficiently coordinates form state management, asynchronous data fetching, and UI rendering while supporting internationalization and modular UI components. This component fits within a larger system dealing with knowledge bases and agent configuration forms.