dynamic-input-variable.tsx

Overview

dynamic-input-variable.tsx is a React functional component file that provides a dynamic form interface for managing input variables within a flow-based application (likely related to RAG - Retrieval Augmented Generation workflows). It enables users to add, remove, and configure variables of two types: reference variables (linking to other components by ID) and input variables (free text input). The component leverages Ant Design UI components for form rendering, layout, and icons, and supports internationalization with react-i18next.

The primary purpose of this file is to render a collapsible section containing a dynamic list of variables that can be configured at runtime. This is useful in scenarios where the input parameters to a node in a flow need to be defined flexibly by the user.

File Structure and Components

1. Interfaces and Enums

interface IProps

• Purpose: Defines the props accepted by the main components in this file.

• Properties:

  • name?: string: Optional name of the form list field.

  • node?: RAGFlowNodeType: Optional node object representing the flow node context.

  • title?: string: Optional title string for the collapsible panel.

enum VariableType

• Purpose: Distinguishes between two variable types used within the form.

• Members:

  • Reference = 'reference': Variable is a reference to another component.

  • Input = 'input': Variable is a plain input text value.

2. Utility function

getVariableName(type: string): string

• Purpose: Maps a variable type to the corresponding form field key.

• Parameters:

  • type: string - Variable type, expected to be one of VariableType.Reference or VariableType.Input.

• Returns:

  • 'component_id' if the type is Reference.

  • 'value' if the type is Input.

• Usage: Used to dynamically select the correct field name in the form based on variable type.

3. DynamicVariableForm Component

• Type: React Functional Component

• Props: IProps (optionally accepts name, node).

• Purpose: Renders a dynamic list form of variables that can be added or removed. Each variable can be either a reference to another component or a direct input value.

• Key Features:

  • Uses Ant Design's Form.List to manage repeated form items.

  • Handles dynamic switching between input types (reference selector or input field).

  • Resets dependent fields when the variable type changes.

  • Fetches options for reference variables using useBuildComponentIdSelectOptions hook.

  • Internationalized labels and placeholders.

• Important Methods:

  • handleTypeChange: Callback to clear dependent fields (component_id or value) when variable type changes.

• Form Fields:

  • type: Select input to choose variable type (reference or input).

  • component_id or value: Depending on type, renders either a Select dropdown or Input field.

• Usage Example:

<DynamicVariableForm name="query" node={currentNode} />

4. FormCollapse Component

• Type: React Functional Component

• Props: { children: React.ReactNode, title: string }

• Purpose: Wraps children inside an Ant Design Collapse panel with a custom title and styling.

• Key Points:

  • Default active key set to show the panel open initially.

  • Styles are applied via CSS modules.

• Usage Example:

<FormCollapse title="Input Variables">
  <SomeChildComponent />
</FormCollapse>

5. DynamicInputVariable Component (Default Export)

• Type: React Functional Component

• Props: IProps

• Purpose: Combines FormCollapse and DynamicVariableForm to present a titled collapsible panel containing the dynamic input variable form.

• Usage Example:

<DynamicInputVariable name="inputs" node={node} title="Configure Inputs" />

Implementation Details and Algorithms

• Dynamic Form List: Utilizes Form.List from Ant Design to dynamically add or remove variable entries. Each entry is a compound object with fields determined by the variable type.

• Conditional Rendering: The input field for the variable value switches between a dropdown (Select) for references and an input box (Input) for text inputs. This is controlled reactively by listening to the type field changes.

• Field Reset on Type Change: When the variable type changes, dependent fields (component_id or value) are reset asynchronously using setTimeout to avoid race conditions in form state updates.

• Options Fetching: The useBuildComponentIdSelectOptions hook fetches or builds a list of selectable component IDs, scoped to the current node and its parent in the flow. This ensures only valid references can be selected.

• Internationalization Support: All user-facing strings are automatically translated via react-i18next's t function.

• Stylings: CSS modules imported from index.less provide scoped styles for classes such as .variableType, .variableValue, .addButton, .title, and .dynamicInputVariable.

Interaction with Other System Parts

• RAGFlowNodeType (from '@/interfaces/database/flow'): Represents the flow node context; used to scope selectable references.

• useBuildComponentIdSelectOptions Hook: Provides options for variable references; likely queries or computes valid component IDs based on node relationships.

• Ant Design Components: Provides UI elements for inputs, buttons, icons, form controls, and collapsible panels.

• CSS Modules (index.less): Provides styling scoped to this component.

• i18n (react-i18next): Ensures all UI text is localized.

• Overall Application: Likely used within a larger flow builder UI where nodes can have customizable input variables that affect downstream processes.

Mermaid Component Diagram

componentDiagram
    component DynamicInputVariable {
        +props: IProps
        +renders FormCollapse
        +renders DynamicVariableForm
    }
    component FormCollapse {
        +props: { title: string, children }
        +renders Collapse (AntD)
    }
    component DynamicVariableForm {
        +props: IProps
        +uses Form.List (AntD)
        +renders Select for variable type
        +renders Select or Input based on variable type
        +handles add/remove variables
        +uses useBuildComponentIdSelectOptions hook
    }

    DynamicInputVariable --> FormCollapse
    DynamicInputVariable --> DynamicVariableForm
    FormCollapse --> Collapse
    DynamicVariableForm --> Form.List
    DynamicVariableForm --> Select
    DynamicVariableForm --> Input
    DynamicVariableForm --> useBuildComponentIdSelectOptions

Summary

This file implements a reusable React component that enables users to dynamically configure a list of input variables for a given flow node. It supports two types of variables — references to other components or manual text input — and provides a user-friendly, internationalized interface with add/remove capabilities and collapsible UI. It integrates tightly with the flow node model and uses hooks to retrieve contextual options for reference variables.

This component is essential for scenarios where the flow’s input parameters need to be modified dynamically, allowing for flexible and extensible flow configurations.