parameter-dialog.tsx

Overview

parameter-dialog.tsx defines a React modal dialog component for creating and editing parameters (referred to as "BeginQuery" objects) used within a flow or query configuration system. It provides a user interface to input and validate the parameter’s type, key, display name, optional status, and additional options if applicable. The dialog encapsulates a form built with react-hook-form and Zod schema validation, supporting dynamic UI changes based on the selected parameter type.

This component is tightly integrated with the UI framework components for dialogs, forms, inputs, switches, and select dropdowns, and leverages internationalization hooks for localization. It interacts with constants and types related to BeginQuery, ensuring consistent validation and rendering of parameter types with icons.

Classes and Components

`ParameterForm`

Description

A controlled form component managing the parameter input fields using react-hook-form and Zod for validation. It renders input controls for parameter properties and conditionally renders dynamic options when the parameter type is Options.

Props

Name	Type	Description
`initialValue`	`BeginQuery`	Initial values to populate the form (editing existing parameter).
`otherThanCurrentQuery`	`BeginQuery[]`	List of other parameters to validate uniqueness of the `key` field.
`submit`	`(values: any) => void`	Callback invoked with sanitized form data on submission.

State and Hooks

Uses useForm with a Zod schema to manage form state and validation.
Uses useWatch to observe the type field to conditionally render dynamic options.
Uses useEffect to reset form values when initialValue changes.
Uses useMemo to memoize select options with icons and localized labels.

Zod Validation Schema

type: required string.
key: required non-empty string, trimmed, and must be unique among other parameters.
optional: boolean flag.
name: required non-empty trimmed string.
options: optional array of objects with value property (string, boolean, or number).

Methods

onSubmit(data): Converts options array to plain values and calls submit.
handleKeyChange(e): Updates key and defaults name to key if name is empty on blur event.

Rendered Form Fields

Type: Select dropdown with icons and localized labels.
Key: Text input with uniqueness validation.
Name: Text input.
Optional: Switch toggle.
Options: Conditionally rendered BeginDynamicOptions component when type is Options.

Usage Example

<ParameterForm
  initialValue={existingParameter}
  otherThanCurrentQuery={allOtherParameters}
  submit={(values) => console.log('Form submitted:', values)}
/>

`ParameterDialog`

Description

A modal dialog wrapper that displays the ParameterForm inside a dialog UI. It handles opening and closing the dialog and provides a submit button linked to the form.

Props

Name	Type	Description
`initialValue`	`BeginQuery`	Initial parameter values for editing.
`hideModal`	`(open: boolean) => void`	Callback to close the dialog.
`otherThanCurrentQuery`	`BeginQuery[]`	Other parameters for key uniqueness validation.
`submit`	`(values: any) => void`	Callback triggered upon form submission.

Behavior

Uses the Dialog component with controlled open state.
Passes props down to ParameterForm.
Renders a submit button inside the DialogFooter that triggers the form submission by linking to the form's ID (BeginParameterForm).

Usage Example

<ParameterDialog
  initialValue={paramToEdit}
  otherThanCurrentQuery={paramsExcludingCurrent}
  submit={(values) => saveParameter(values)}
  hideModal={() => setShowDialog(false)}
/>

Important Implementation Details

Validation Logic: The key field is validated to be unique among other parameters (otherThanCurrentQuery) using Zod's .refine method. This prevents duplicate keys in the parameter list.
Dynamic Rendering: The form dynamically renders additional UI (BeginDynamicOptions) when the type is set to Options. This supports parameters that have selectable options rather than simple inputs.
Localization: Uses useTranslate and useTranslation hooks for i18n support, allowing labels and messages to be translated based on provided keys such as 'flow.type' or 'modal.okText'.
Form Reset: Uses form.reset inside a useEffect hook to update form values when the initialValue prop changes, supporting editing existing parameters.
Options with Icons: Uses a memoized array of options that include icons mapped by BeginQueryTypeIconMap for a rich UI experience in the select dropdown.
Form Submission: The form submission handler transforms the nested options structure (array of objects with value) into a simple array of values before passing to the submit callback.

Interaction with Other System Parts

UI Components: Depends on reusable UI components (Button, Dialog, Form, Input, Switch, RAGFlowSelect) from a shared component library (@/components/ui/*).
Types and Constants: Uses BeginQueryType, BeginQueryTypeIconMap, and BeginQuery interface from the relative imports, ensuring consistency with the data model representing parameters.
Dynamic Options: Imports and renders the BeginDynamicOptions component, which presumably manages the UI and logic for parameter options when the type is Options.
Hooks: Uses custom hooks (useTranslate) and standard hooks (useTranslation, useForm, useWatch) to handle form state and localization.
Validation: Relies on zod for schema validation and @hookform/resolvers/zod for integration with react-hook-form.

This file likely functions as part of a larger flow or query configuration system where users define parameters that influence the runtime behavior of flows or queries.

Mermaid Component Diagram

classDiagram
    class ParameterDialog {
        +initialValue: BeginQuery
        +hideModal(open: boolean): void
        +otherThanCurrentQuery: BeginQuery[]
        +submit(values: any): void
    }
    class ParameterForm {
        -form: UseForm
        -FormSchema: z.ZodSchema
        -options: RAGFlowSelectOptionType[]
        -onSubmit(data: FormSchema): void
        -handleKeyChange(e: ChangeEvent<HTMLInputElement>): void
        +initialValue: BeginQuery
        +otherThanCurrentQuery: BeginQuery[]
        +submit(values: any): void
    }
    class BeginDynamicOptions

    ParameterDialog --> ParameterForm : renders >
    ParameterForm --> BeginDynamicOptions : conditionally renders >

Summary

The parameter-dialog.tsx file provides a comprehensive modal dialog solution for parameter management in a flow/query system. It combines robust form handling, validation, dynamic UI rendering, and localization to facilitate a user-friendly experience for defining complex parameters. Its integration with shared UI components and data models makes it a reusable and consistent part of the application’s configuration interface.