raptor-form-fields.tsx

Overview

raptor-form-fields.tsx is a React functional component file that provides a configurable form interface for managing "Raptor" parsing settings within a document parsing or knowledge configuration system. It integrates tightly with React Hook Form for form state management and leverages UI components for an interactive user experience.

The file contains logic to conditionally show or hide Raptor-specific form fields based on the selected document parser type, allowing users to toggle the use of Raptor parsing and configure parameters such as token limits, thresholds, clustering, random seeds, and prompt text.

Detailed Explanation

Constants

• excludedParseMethods:
  An array of DocumentParserType enums representing parser types for which the Raptor configuration should not be displayed.
  Excluded types: Table, Resume, One, Picture, KnowledgeGraph, Qa, Tag.

• showRaptorParseConfiguration(parserId: DocumentParserType | undefined): boolean
  A utility function that returns true if Raptor configuration should be shown for the given parser ID (i.e., the parser is not in excludedParseMethods).
  Parameters:

  • parserId - The current parser type (may be undefined).
    Returns:

  • boolean indicating whether to show the Raptor config.

• excludedTagParseMethods:
  Similar to excludedParseMethods, but for controlling the visibility of "Tag" items in the UI.
  Excluded types: Table, KnowledgeGraph, Tag.

• showTagItems(parserId: DocumentParserType): boolean
  Returns true if tag items should be shown for the given parser type (not in excludedTagParseMethods).

• Field name constants: String constants representing the form field paths used in React Hook Form, such as:

  • UseRaptorField

  • RandomSeedField

  • MaxTokenField

  • ThresholdField

  • MaxCluster

  • Prompt

These constants help avoid hardcoding string literals throughout the component.

Component: RaptorFormFields

Description

Main React functional component rendering Raptor-specific form fields. It conditionally displays an enable/disable switch for using Raptor parsing, and if enabled, shows various configurable fields including:

• Prompt (textarea)

• Max Token (slider input)

• Threshold (slider input)

• Max Cluster (slider input)

• Random Seed (number input with random generator button)

Dependencies

• Uses React Hook Form's useFormContext and useWatch for form state and controlled inputs.

• Uses a translation hook useTranslate scoped to 'knowledgeConfiguration' for localized text and tooltips.

• Uses utility random from lodash for generating random seeds.

• UI components from custom UI library: FormField, FormItem, FormLabel, FormMessage, FormControl, Input, Switch, Textarea, Button, and SliderInputFormField.

• Icon component Plus from lucide-react.

Internal Logic

• Watching useRaptor field: Determines if the Raptor config section should be shown.

• changeRaptor callback: When toggling the "Use Raptor" switch ON, sets default values for various fields (max token, threshold, cluster, random seed, prompt).

• handleGenerate callback: Generates a random number between 0 and 10000 and sets it as the random seed field value.

Rendered UI Elements

1. Use Raptor Switch:
   A switch toggle field to enable or disable Raptor parsing.
   Displays label with tooltip and validation messages.

2. Conditional Raptor Configuration Fields (visible only if Use Raptor is ON):

   • Prompt Textarea: Multi-line text input for prompt configuration.

   • Max Token Slider: Slider input ranging from 0 to 2048.

   • Threshold Slider: Slider input ranging from 0 to 1 with step 0.01.

   • Max Cluster Slider: Slider input ranging from 1 to 1024.

   • Random Seed Input: Number input with a button to generate a new random seed.

Each field is wrapped with appropriate form validation message and tooltip support.

Usage Example

import { useForm, FormProvider } from 'react-hook-form';
import RaptorFormFields from './raptor-form-fields';

const MyFormComponent = () => {
  const methods = useForm({
    defaultValues: {
      parser_config: {
        raptor: {
          use_raptor: false,
          random_seed: 0,
          max_token: 256,
          threshold: 0.1,
          max_cluster: 64,
          prompt: '',
        },
      },
    },
  });

  return (
    <FormProvider {...methods}>
      <form>
        <RaptorFormFields />
        {/* Other form fields */}
      </form>
    </FormProvider>
  );
};

Important Implementation Details

• Form Context Integration:
  The component relies on being used within a react-hook-form context (useFormContext) to access and manipulate form state.

• Conditional Rendering:
  The form fields for Raptor configuration are only rendered if the use_raptor switch is enabled, preventing unnecessary form elements for parsers that do not use this feature.

• Default Values on Enable:
  When enabling Raptor parsing, the form fields are automatically populated with sensible defaults to provide a starting configuration.

• Random Seed Generation:
  The random seed field has a button that, when clicked, generates a random integer between 0 and 10,000 using lodash's random utility.

• Localization Support:
  All labels, tooltips, and messages use the useTranslate hook scoped to 'knowledgeConfiguration' for i18n support.

• Excluded Parser Types:
  The module exports utility functions and arrays to determine whether the Raptor form or tag items should be displayed based on parser type, promoting reusability and consistency.

Interaction with Other System Parts

• Form State Management:
  This component depends on react-hook-form for managing form state and validation.

• Constants and Enums:
  It imports parser type enums from the knowledge constants module to determine visibility rules.

• UI Components:
  Uses shared UI components from the project's UI library (../ui/*) for consistent styling and behavior.

• Translation Infrastructure:
  Integrates with the app’s i18n system through the useTranslate hook.

• Higher-level Forms:
  This component is intended to be embedded within larger configuration forms dealing with document parsers, enabling modular and conditional configuration of parsing behavior.

Visual Diagram

componentDiagram
    direction TB
    component RaptorFormFields {
        +useFormContext()
        +useWatch(UseRaptorField)
        +changeRaptor(isUseRaptor: boolean)
        +handleGenerate()
        +render()
    }
    component useFormContext
    component useWatch
    component useTranslate
    component SliderInputFormField
    component Switch
    component Button
    component Input
    component Textarea
    component FormField

    RaptorFormFields --> useFormContext : get form control
    RaptorFormFields --> useWatch : watch UseRaptorField
    RaptorFormFields --> useTranslate : get localized strings
    RaptorFormFields --> FormField : render form fields
    RaptorFormFields --> Switch : toggle Use Raptor
    RaptorFormFields --> SliderInputFormField : render sliders
    RaptorFormFields --> Textarea : render prompt input
    RaptorFormFields --> Input : render random seed input
    RaptorFormFields --> Button : generate random seed

Summary

raptor-form-fields.tsx is a dedicated React component handling the user interface and logic for configuring Raptor parser settings within a larger document processing or knowledge configuration system. It uses React Hook Form for state control, provides conditional rendering based on parser type, and offers an intuitive set of configuration controls with localization and validation support. This modular design simplifies integration into broader forms and promotes consistent user experience across parsing configurations.