next-dynamic-input-variable.tsx

Overview

This file defines React components that provide a dynamic, user-interactive form interface to manage input variables in a "RAG" (Retrieval-Augmented Generation) flow node context. It primarily focuses on rendering and managing a list of variables that can be either references to other components or direct text inputs.

The components utilize the react-hook-form library for form state management and validation, combined with custom UI components for form controls and collapsible sections. The user can add, remove, and select variable types and their corresponding values dynamically, with options populated based on the current node context.

Components and Functions

Enum: VariableType

Defines the two types of variables that the form supports:

Function: getVariableName(type: string): string

Returns the form field name suffix corresponding to the variable type.

• Parameters:

  • type (string): The variable type, expected to be either 'reference' or 'input'.

• Returns:

  • string: 'component_id' if type is 'reference', otherwise 'value'.

Usage example:

const fieldName = getVariableName(VariableType.Reference);  // returns 'component_id'

Component: DynamicVariableForm

A form component that renders dynamic input fields for variables associated with a given flow node.

• Props:

  • node?: RAGFlowNodeType — The RAG flow node object, optionally used to fetch variable options.

• Functionality:

  • Uses react-hook-form's useFormContext and useFieldArray to manage a dynamic array of variable entries under the form field name "query".

  • Each variable entry includes:

    • A type selector (reference or input) rendered as a dropdown.

    • An input field which is either:

      • A select dropdown for choosing a referenced component (component_id) if type is reference.

      • A text input field (value) if type is input.

  • Provides buttons to add new variable entries and remove existing ones.

  • Resets the dependent fields (value or component_id) when the variable type changes.

  • Uses translation hooks (react-i18next) for internationalized labels.

  • Fetches options for referenced components dynamically through the custom hook useBuildVariableOptions(node?.id, node?.parentId).

• Returns:

  • JSX element rendering the dynamic variable form.

Usage example:

<DynamicVariableForm node={someNode} />

Component: DynamicInputVariable

A collapsible UI component that wraps DynamicVariableForm, providing a toggleable section for input variables.

• Props:

  • node?: RAGFlowNodeType — The RAG flow node object passed down to DynamicVariableForm.

• Functionality:

  • Uses a collapsible UI pattern (Collapsible, CollapsibleTrigger, CollapsibleContent) to show/hide the variable form.

  • The collapsible is open by default.

  • Displays a header with a title and a toggle button icon (SideDown).

  • Renders DynamicVariableForm as content inside the collapsible.

• Returns:

  • JSX element rendering the collapsible input variables section.

Usage example:

<DynamicInputVariable node={someNode} />

Implementation Details and Algorithms

• Form State Management:
  The DynamicVariableForm component leverages react-hook-form's useFormContext to access the shared form context. It then uses useFieldArray for handling dynamic arrays of form fields, enabling add/remove functionality for variable entries.

• Dynamic Field Naming:
  The form fields for each variable depend on the selected variable type. The helper function getVariableName determines the exact field name to bind based on the type, ensuring the form data structure adapts dynamically.

• Dependent Field Reset:
  When the variable type changes, the other dependent fields (value or component_id) are reset via form.resetField to avoid stale or inconsistent data.

• Dynamic Options Fetching:
  The useBuildVariableOptions hook is called with the current node's id and parentId, returning options for the reference-type variables. This hook likely performs a query or computation to retrieve relevant component IDs for selection.

• Internationalization:
  All user-facing text (labels, placeholders, button text) is wrapped with the t function from react-i18next for multi-language support.

• UI Components:
  The UI leverages a custom design system with components such as Button, Input, RAGFlowSelect (a select/dropdown component), form-related components (FormControl, FormField, FormItem, FormDescription, FormMessage), and collapsible UI (Collapsible, CollapsibleTrigger, CollapsibleContent).

Interaction with Other Parts of the System

• RAG Flow System:
  This component is designed to be used within a RAG flow builder or editor UI, where nodes represent stages or components in a data flow. The node prop provides context to fetch relevant variable options and associate variables with the correct node.

• Form Context:
  It relies on being rendered inside a react-hook-form context provider (FormProvider) that manages the overall flow form state.

• Custom Hooks:
  The useBuildVariableOptions hook (imported from a relative path) presumably connects to the application's state or backend to provide dynamic dropdown options based on the current flow node.

• Icons and UI Kit:
  Imports icons from lucide-react and custom SVG icons (SideDown). Uses custom UI components from the project's design system (@/components/ui/*).

Visual Diagram

componentDiagram
    direction TB
    DynamicInputVariable --> Collapsible
    Collapsible --> CollapsibleTrigger
    Collapsible --> CollapsibleContent
    CollapsibleContent --> DynamicVariableForm
    DynamicVariableForm --> useFormContext
    DynamicVariableForm --> useFieldArray
    DynamicVariableForm --> useBuildVariableOptions
    DynamicVariableForm --> RAGFlowSelect
    DynamicVariableForm --> Input
    DynamicVariableForm --> Button
    DynamicVariableForm --> Trash2 (icon)
    DynamicVariableForm --> FormField
    DynamicVariableForm --> FormItem
    DynamicVariableForm --> FormControl
    DynamicVariableForm --> FormDescription
    DynamicVariableForm --> FormMessage

Summary

This file provides a reusable and dynamic React UI for managing input variables in a RAG flow editor. It handles complex form states with dynamic fields, conditional rendering based on variable types, and integrates with the broader system via hooks and context. Its collapsible design enhances user experience by organizing input variables into a neat, expandable section.

Example Integration

import { useForm, FormProvider } from 'react-hook-form';
import { DynamicInputVariable } from './next-dynamic-input-variable';

function FlowNodeEditor({ node }) {
  const methods = useForm({
    defaultValues: {
      query: [
        { type: 'input', value: '' },
      ],
    },
  });

  return (
    <FormProvider {...methods}>
      <form>
        <DynamicInputVariable node={node} />
        {/* Other form fields and submit button */}
      </form>
    </FormProvider>
  );
}

This example demonstrates how DynamicInputVariable fits inside a form context, managing variable inputs dynamically for a given flow node.