dynamic-input-variable.tsx

Overview

The dynamic-input-variable.tsx file provides a React component for dynamically managing input variables in a form, specifically within the context of a RAG (Retrieval-Augmented Generation) flow node. It allows users to add, remove, and configure variables that can either be references to other components or direct text inputs. The component leverages Ant Design's Form.List to handle dynamic lists, Select and Input components for user input, and supports internationalization via react-i18next.

This file is primarily responsible for the UI and logic around dynamically adding and configuring query variables that will be used elsewhere in the application flow, possibly to build queries or parameters for the RAG nodes.

Detailed Explanation

Interfaces and Enums

IProps

interface IProps {
  node?: RAGFlowNodeType;
}

• Description: Props interface for components in this file.

• Properties:

  • node (optional): Represents a RAG flow node object, whose type is imported from the database interfaces. It provides context such as the current node's ID and its parent ID.

VariableType (Enum)

enum VariableType {
  Reference = 'reference',
  Input = 'input',
}

• Description: Defines two types of variables the user can select:

  • Reference: Variable refers to another component by its ID.

  • Input: Variable is a direct user input (text).

Utility Function

getVariableName

const getVariableName = (type: string) =>
  type === VariableType.Reference ? 'component_id' : 'value';

• Purpose: Returns the correct key name for the variable's value based on the selected type.

• Parameters:

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

• Returns: Returns 'component_id' if the type is Reference, otherwise 'value'.

• Usage: Used to dynamically access or set the correct field in the form depending on variable type.

Components

DynamicVariableForm

const DynamicVariableForm = ({ node }: IProps) => { ... }

• Purpose: A form component that allows dynamic addition, removal, and configuration of query variables.

• Props:

  • node (optional): The current RAG flow node object to provide context for fetching variable options.

• Internal Logic:

  • Uses useBuildVariableOptions hook to get options for referencing other components based on node.id and node.parentId.

  • Uses Ant Design's Form.List to dynamically manage an array of variable entries named "query".

  • Each variable entry has:

    • A Select to choose between Reference and Input.

    • Depending on the choice, either a Select dropdown showing component options or a simple Input field for text.

    • A delete (MinusCircleOutlined) icon to remove the entry.

  • The "Add variable" button (PlusOutlined) allows adding new variables with default type Reference.

  • handleTypeChange resets the input fields when the variable type changes to avoid stale data.

• Return Value: JSX element rendering the dynamic variable list form.

• Example Usage:

  <Form>
    <DynamicVariableForm node={currentNode} />
  </Form>
  

FormCollapse

export function FormCollapse({
  children,
  title,
}: PropsWithChildren<{ title: string }>) { ... }

• Purpose: Wrapper component to display collapsible panels with a title.

• Props:

  • children: React children elements to be rendered inside the collapsible panel.

  • title (string): The title displayed on the collapse header.

• Implementation Details:

  • Uses Ant Design's Collapse with a single item.

  • The collapse is expanded by default.

  • Applies CSS styles from index.less.

• Return Value: JSX element rendering a styled collapsible panel.

• Example Usage:

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

DynamicInputVariable (Default Export)

const DynamicInputVariable = ({ node }: IProps) => { ... }

• Purpose: Main exported component that wraps the DynamicVariableForm inside a collapsible panel.

• Props:

  • node (optional): The RAG flow node for context.

• Implementation Details:

  • Uses useTranslation for i18n.

  • Uses FormCollapse to provide a titled collapsible container.

• Return Value: JSX element rendering the full dynamic input variable UI section.

• Example Usage:

  <Form>
    <DynamicInputVariable node={myNode} />
  </Form>
  

Important Implementation Details

• Dynamic Form Management: Uses Ant Design's Form.List to handle an arbitrary number of variable entries, with clean add and remove capabilities.

• Type-Dependent Input Fields: The form dynamically renders either a Select or Input component based on the variable's type, controlled via dependent form fields and Form.Item dependencies.

• Delayed Reset on Type Change: When the variable type changes, related form fields are reset asynchronously using setTimeout to avoid conflicts in form state updates.

• Internationalization Support: All labels, placeholders, and button texts use the react-i18next translation hook, ensuring multi-language support.

• CSS Module Styling: Classes are applied via imported styles from a Less stylesheet, enabling scoped and maintainable styling.

Interaction with Other Parts of the System

• Integration with RAG Flow: The component receives a node prop representing the current RAG flow node, enabling it to fetch variable options relevant to the current node and its parent via the useBuildVariableOptions hook.

• State Management: The form state is managed via Ant Design's Form context, allowing this component to fit seamlessly inside larger forms (e.g., flow node editors).

• Iconography and UI Components: Relies on Ant Design components and icons for consistent UI appearance and behavior.

• Translation: Uses the react-i18next library, which suggests the app supports multiple languages and this component respects that setup.

Visual Diagram

componentDiagram
    component DynamicInputVariable {
        +node: RAGFlowNodeType (optional)
        - uses FormCollapse
        - uses DynamicVariableForm
    }
    component FormCollapse {
        +title: string
        +children: ReactNode
        - renders Collapse (AntD)
    }
    component DynamicVariableForm {
        +node: RAGFlowNodeType (optional)
        - uses Form.List
        - uses Select (for type and references)
        - uses Input (for text input)
        - uses useBuildVariableOptions (hook)
        - handles dynamic add/remove
        - handles type change resetting fields
    }
    DynamicInputVariable --> FormCollapse : wraps
    DynamicInputVariable --> DynamicVariableForm : renders inside
    DynamicVariableForm --> useBuildVariableOptions : fetch options
    DynamicVariableForm --> Form.List : manages dynamic list
    FormCollapse --> Collapse (AntD)

Summary

The dynamic-input-variable.tsx file is a React component module designed to provide a flexible UI for managing dynamic input variables, which can either be references to other components or manual text inputs. It integrates tightly with Ant Design's form system and the RAG flow node data model, supporting internationalization and styled via CSS modules. This component is intended to be embedded within larger forms to support configuring queries or parameters dynamically in a flow-based application.

End of Documentation for dynamic-input-variable.tsx