dynamic-prompt.tsx

Overview

dynamic-prompt.tsx defines a React functional component named DynamicPrompt that provides a dynamic form interface for managing a list of conversational prompts. Each prompt comprises a role (either "User" or "Assistant") and associated content, editable via a rich text editor component.

This component leverages React Hook Form (react-hook-form) for form state management, allowing users to add, edit, and remove prompt entries dynamically. It integrates with UI components from the project’s design system for consistent styling and accessibility.

This file is primarily used in contexts where users need to configure or edit a sequence of message prompts, such as in a chatbot workflow or conversational AI setup.

Detailed Description

Imports and Dependencies

• UI Components: BlockButton, Button (buttons), FormControl, FormField, FormItem, FormLabel, FormMessage (form controls), RAGFlowSelect (custom select dropdown), and PromptEditor (rich text editor for prompt content).

• Icons: X icon from lucide-react for the remove button.

• Hooks:

  • useFormContext and useFieldArray from react-hook-form to handle form state and dynamic array fields.

  • useTranslation from react-i18next for internationalization support.

• Constants: PromptRole defines available roles for prompts (User and Assistant).

Constants

const options = [
  { label: 'User', value: PromptRole.User },
  { label: 'Assistant', value: PromptRole.Assistant },
];

• Defines options for the prompt role select dropdown.

Component: DynamicPrompt

const DynamicPrompt = () => { ... }

Purpose

Renders a dynamic list of prompt entries, each with:

• A role selector (User or Assistant).

• A rich text editor for the prompt content.

• A remove button to delete the prompt.

Also provides an "Add" button to append a new prompt with default values.

Usage Example

import DynamicPrompt from './dynamic-prompt';

function MyForm() {
  // Assume react-hook-form provider is wrapped at a higher level
  return (
    <form>
      <DynamicPrompt />
      {/* other form fields */}
    </form>
  );
}

Internal Logic and Hooks

• Form Context: Uses useFormContext to access the parent form's control and state.

• Field Array: Uses useFieldArray to manage the array of prompt objects under the form field name "prompts".

• Localization: Uses useTranslation for label and tooltip texts.

JSX Structure

• FormItem: Wraps the entire prompt list with a label and tooltip.

• Prompt List: Iterates over fields from useFieldArray, rendering each prompt as:

  • A select dropdown for role (RAGFlowSelect).

  • A PromptEditor for the content.

  • A remove button (Button with X icon) to delete the prompt.

• Add Button: Appends a new prompt with default role User and empty content.

Props and Bindings

• The component itself takes no props; it depends on being used inside a react-hook-form provider context.

• Each prompt item is dynamically bound to form state fields via FormField components.

Return Value

• Returns a React element representing the dynamic prompt form UI.

Methods and Functions

The file contains only one main React component function:

DynamicPrompt()

Important Implementation Details

• Dynamic Form Management: Uses useFieldArray to synchronize an array of prompt objects with the form state, enabling dynamic add/remove functionality.

• Controlled Components: Each prompt’s role and content are controlled via FormField components, ensuring validation and state consistency.

• Performance Optimization: The component is wrapped with React's memo to prevent unnecessary re-renders when props do not change.

• Accessibility: Uses semantic form components with labels and messages to ensure accessibility.

• Localization: All user-facing text strings use useTranslation for internationalization.

Interactions with Other System Parts

• Form Provider: This component is designed to be used inside a react-hook-form <FormProvider> context, sharing form state and methods.

• PromptEditor Component: Imports and uses a custom PromptEditor component for rich text editing of prompt content.

• UI Library: Relies on project-specific UI components for consistent styling and interaction patterns.

• Constants: Uses the PromptRole enum from a constants module to define prompt roles.

This file likely interacts with a larger conversational AI or chatbot workflow editor where users define messages that drive interactions.

Mermaid Component Diagram

componentDiagram
    component DynamicPrompt {
        +render()
        -fields: array
        -append(prompt)
        -remove(index)
    }
    component FormField {
        +render({field})
    }
    component RAGFlowSelect
    component PromptEditor
    component Button
    component FormItem
    component FormLabel
    component FormMessage

    DynamicPrompt --> FormField : manages prompt role & content fields
    FormField --> RAGFlowSelect : renders role select dropdown
    FormField --> PromptEditor : renders prompt content editor
    DynamicPrompt --> Button : remove prompt button
    DynamicPrompt --> Button : add prompt button
    DynamicPrompt --> FormItem : main form container
    FormItem --> FormLabel
    FormItem --> FormMessage

Summary

dynamic-prompt.tsx is a reusable React component that provides a dynamic, localized, and well-structured UI for editing a list of conversational prompts with roles and content. It integrates tightly with react-hook-form for form state management and uses project-specific UI components for a consistent look and feel. The component supports adding and removing prompt entries interactively and uses memoization for performance optimization. It is a core building block for workflows involving message prompt configuration.