dynamic-input-variable.tsx

Overview

dynamic-input-variable.tsx is a React functional component module designed to enable dynamic, user-configurable input variables within a form context. It is used primarily in a flow-based UI system where nodes may have variable inputs that are either references to other components or free-text inputs. This file provides an interactive UI for adding, editing, and removing such variables dynamically, integrating with Ant Design's form system and UI components.

The main functionality includes:

• Dynamically adding/removing input variables.

• Supporting two types of variables: Reference (selecting another component) and Input (typing plain text).

• Contextual rendering of input fields depending on the variable type.

• Wrapping the entire form section in a collapsible panel for better UX.

• Internationalization support via react-i18next.

Detailed Explanation

Interfaces & Types

IProps

interface IProps {
  node?: RAGFlowNodeType;
}

• Purpose: Props interface for components in this file.

• Properties:

  • node (optional): Represents a flow node of type RAGFlowNodeType (imported from the application database flow interfaces). This node provides context such as id and parentId used to fetch variable options.

VariableType (enum)

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

• Defines the two types of variables supported:

  • Reference: Variable is a reference to another flow component.

  • Input: Variable is a user-typed text input.

Utility Function

getVariableName

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

• Purpose: Returns the form field name key based on the variable type.

• Parameters:

  • type (string): The variable type.

• Returns:

  • 'component_id' for Reference type.

  • 'value' for Input type.

• Usage: Used to dynamically select the correct form field for the variable value depending on its type.

Components

DynamicVariableForm

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

• Purpose: Renders a dynamic list of input variables inside a form, allowing adding, editing, and removing variables.

• Props:

  • node (optional): Used to fetch options for reference variables.

• Key Hooks and Features:

  • Uses Ant Design's Form.List to manage a dynamic array of form items under the key "query".

  • Uses useBuildVariableOptions hook with node.id and node.parentId to generate options for the Reference type select input.

  • Supports switching variable types (Reference or Input) and resets the corresponding value fields when the type changes.

  • Uses Ant Design icons (MinusCircleOutlined & PlusOutlined) for remove and add actions.

  • Uses useTranslation for internationalized labels and placeholders.

• Form Structure per Variable:

  • A select dropdown to choose variable type.

  • Conditional input field:

    • If Reference, renders a select dropdown populated with valueOptions.

    • If Input, renders a text input field.

  • A delete icon to remove the variable.

• Example Usage:

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

FormCollapse

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

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

• Props:

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

  • children: React children elements to render inside the collapsible content.

• Features:

  • Defaults to open (defaultActiveKey={['1']}).

  • Uses CSS module styles for theming.

• Example Usage:

  <FormCollapse title="Input Variables">
    <DynamicVariableForm node={currentNode} />
  </FormCollapse>
  

DynamicInputVariable

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

• Purpose: The main exported component that combines the FormCollapse and DynamicVariableForm components to provide a ready-to-use input variable section.

• Props:

  • node (optional): Passed down to DynamicVariableForm.

• Features:

  • Uses translation hook to get localized title.

  • Encapsulates the entire input variable form inside a collapsible panel.

• Example Usage:

  <DynamicInputVariable node={someNode} />
  

Important Implementation Details

• Dynamic Form List: Utilizes Ant Design's Form.List to dynamically manage an array of variable objects under the form field query. This allows users to add or remove variable inputs dynamically.

• Dynamic Field Naming: Uses the utility function getVariableName to determine which form field to use (component_id or value) based on the selected variable type. This is important for correctly binding the form fields and resetting them when variable type changes.

• Asynchronous Reset on Type Change: The handleTypeChange callback uses a setTimeout with zero delay to reset the form fields for the variable after the type changes. This ensures the form state updates correctly and prevents stale values.

• Custom Hook Dependency: useBuildVariableOptions is a custom hook (likely defined elsewhere) that fetches or constructs options for the reference variable select dropdown based on the current node's id and parentId.

• Internationalization: All user-facing strings are wrapped with the t function from react-i18next to support multiple languages.

• Styling: Uses CSS modules (index.less) for scoped styling of components, especially to style form elements such as variable type selector and the add button.

Interaction with Other Parts of the System

• Integration with Flow Nodes: The node prop passed to this component links it to a specific flow node in the system, enabling context-aware variable options.

• Form Context: This component assumes it is used inside an Ant Design Form context. It uses Form.useFormInstance() to access and manipulate form values.

• Custom Hook useBuildVariableOptions: This hook is a dependency that generates variable reference options based on the node. It likely fetches or derives relevant components or variables that can be referenced.

• Internationalization System: Uses react-i18next for language translations, aligning with the application's i18n strategy.

• Ant Design UI Library: Relies heavily on Ant Design components and icons, making it visually consistent with other parts of the app using Ant Design.

Visual Diagram

classDiagram
    class DynamicInputVariable {
        +node?: RAGFlowNodeType
        +render()
    }
    class FormCollapse {
        +title: string
        +children: ReactNode
        +render()
    }
    class DynamicVariableForm {
        +node?: RAGFlowNodeType
        +render()
        -handleTypeChange(name: number): void
        -getVariableName(type: string): string
    }

    DynamicInputVariable --> FormCollapse : uses
    FormCollapse --> DynamicVariableForm : wraps

Summary

dynamic-input-variable.tsx is a well-structured React component file that provides a dynamic form UI to handle input variables of two types: references to other components and plain text inputs. It leverages Ant Design for UI and form management and hooks into the application's flow system via the node prop and a custom hook for options. The file is internationalization-ready and styled using CSS modules. It serves as a reusable UI piece for managing dynamic input variables in flow nodes.

Example Usage in Application

import { Form } from 'antd';
import DynamicInputVariable from './dynamic-input-variable';

// Inside some parent component rendering a flow node form
const FlowNodeEditor = ({ node }) => {
  const [form] = Form.useForm();

  return (
    <Form form={form} initialValues={{ query: [] }}>
      {/* Other form items */}
      <DynamicInputVariable node={node} />
      {/* Submit button etc. */}
    </Form>
  );
};

This snippet shows how the component fits into a larger form for editing flow nodes, enabling users to dynamically add and configure input variables tied to that node.