dynamic-input-variable.tsx

Overview

The dynamic-input-variable.tsx file defines a React functional component named DynamicInputVariable. This component provides a dynamic form interface for managing input variables within a flow node in a RAG (Retrieval-Augmented Generation) flow system. The form allows users to add, edit, and remove variables dynamically, where each variable consists of a name and an associated component ID selected from available options.

Key features of this component include:

• Integration with Ant Design (antd) form and UI components for a consistent user experience.

• Dynamic list management using Form.List to add or remove input variable entries.

• Localization support via react-i18next for multilingual UI text.

• Select options for component IDs are fetched using a custom hook (useBuildComponentIdSelectOptions) based on the current node context.

• Collapsible UI section wrapping the input variables form for better UX.

This component is typically used within a larger flow configuration UI where users define or modify the inputs for a particular flow node.

Exports

DynamicInputVariable

Description

A React functional component that renders a dynamic form list allowing users to manage input variables. Each variable includes a text input for the variable name and a dropdown select for choosing a related component ID.

Props

Usage Example

import { DynamicInputVariable } from './dynamic-input-variable';
import { RAGFlowNodeType } from '@/interfaces/database/flow';

const node: RAGFlowNodeType = {
  id: 'node-123',
  parentId: 'parent-456',
  // other node properties
};

<DynamicInputVariable name="inputVars" node={node} />

Return Value

Returns JSX rendering the dynamic input variables form section.

Detailed Explanation

Imports and Dependencies

• RAGFlowNodeType - Type definition for the flow node object.

• Ant Design components: Button, Form, Input, Select for UI elements.

• Icons from Ant Design: MinusCircleOutlined (remove icon), PlusOutlined (add icon).

• useTranslation from react-i18next for internationalization of UI strings.

• useBuildComponentIdSelectOptions - custom hook to generate select options for component IDs based on the current node.

• FormCollapse - a custom collapsible wrapper component for form sections.

Component Breakdown

1. DynamicInputVariable Function Component

• Parameters: Destructures name (defaulting to "arguments") and node.

• Hooks:

  • const { t } = useTranslation(); — extracts translation function.

  • const valueOptions = useBuildComponentIdSelectOptions(node?.id, node?.parentId); — builds select options dynamically based on node context.

• Render:

  • Wraps the form list in a FormCollapse component titled with the localized string for "Input Variables".

  • Uses Form.List bound to the field name (name) to enable dynamic addition/removal of input variable entries.

  • For each variable:

    • Renders an Input for the variable name.

    • Renders a Select dropdown populated with valueOptions for component ID selection.

    • Displays a remove icon (MinusCircleOutlined) to delete the variable entry.

  • Below the list, a dashed Button with a plus icon (PlusOutlined) is rendered to add new variables.

Algorithms / Implementation Details

• Dynamic Form List Management: Utilizes Form.List from Ant Design which internally manages an array of form items. The fields array contains metadata for each variable entry, and add/remove functions modify the list.

• Option Generation: Select options for component IDs are generated by useBuildComponentIdSelectOptions, which likely queries or computes options based on the current node and its parent — enabling context-aware selections.

• Localization: All user-facing strings are localized using the t function from react-i18next. This ensures that UI text such as "Input Variables", "Please Select", and "Add Variable" are translatable.

Interaction with Other Parts of the System

• Flow Node Context: The component receives a node prop which is an object representing the current flow node, including its id and parentId. This context is essential for generating the appropriate options for the component ID select input.

• Custom Hook Dependency: Depends on useBuildComponentIdSelectOptions hook which presumably interacts with state management or data fetching layers to retrieve component data related to the node.

• Parent Form: This component is designed to be used inside an Ant Design Form context. Its form list values integrate into the parent form's data model under the specified name path.

• UI Composition: Uses a custom FormCollapse component to encapsulate the input variables section, improving UI organization within the larger flow editor interface.

Visual Diagram

componentDiagram
    component DynamicInputVariable {
        +props: DynamicInputVariableProps
        +render()
    }

    component FormCollapse {
        +title: string
        +children
    }

    component FormList {
        +fields: Array
        +add()
        +remove()
    }

    component Input
    component Select
    component Button
    component MinusCircleOutlined
    component PlusOutlined

    DynamicInputVariable --> FormCollapse : wraps
    FormCollapse --> FormList : contains
    FormList --> Input : renders variable name input
    FormList --> Select : renders component_id select
    FormList --> MinusCircleOutlined : remove variable
    FormList --> Button : add variable
    Button --> PlusOutlined : icon

Summary

The dynamic-input-variable.tsx file provides a reusable, localized React component that facilitates managing a dynamic list of input variables for flow nodes within a RAG system. Its integration with Ant Design forms and custom hooks enables context-sensitive option selection and seamless user interactions for adding/removing variables. The component is a modular building block intended to be used inside broader flow configuration interfaces.

Appendix: Key Types and Components

RAGFlowNodeType

• Represents a node in a RAG flow.

• Contains at least id and parentId properties used to scope component ID options.

useBuildComponentIdSelectOptions(nodeId, parentId)

• Returns options suitable for an Ant Design Select component.

• Options represent component IDs related to the given node context.

FormCollapse

• A custom UI wrapper that provides a collapsible section for grouping form fields.

If you need details on useBuildComponentIdSelectOptions or FormCollapse, please refer to their respective files or documentation.