dynamic-prompt.tsx

Overview

dynamic-prompt.tsx defines a React functional component named DynamicPrompt for dynamically managing a list of prompt messages in a form. Each prompt consists of a role (either "User" or "Assistant") and associated content that can be edited with a rich text editor (PromptEditor). The component utilizes React Hook Form for form state management and validation, allowing users to add, edit, and remove prompts interactively within a form context.

This component is typically used in applications where multi-turn conversational prompts or messages need to be constructed dynamically, such as chatbots, AI assistants, or interactive dialog flows.

Detailed Explanation

Component: DynamicPrompt

Description

DynamicPrompt renders a section of a form that allows users to dynamically add, edit, and remove conversational prompts. Each prompt includes:

• A select dropdown to choose the role (User or Assistant)

• A rich text editor area for the prompt content

• A button to remove the prompt entry

The component shows all prompts currently in the form state, and a button to append a new prompt initialized with the role User and empty content.

Libraries and Hooks Used

• React Hook Form (useFormContext, useFieldArray): For form state and dynamic field arrays.

• i18next (useTranslation): For internationalization and localization of labels and tooltips.

• React.memo: To optimize rendering by memoizing the component.

• UI Components: Custom UI components for form controls (FormItem, FormLabel, FormControl, etc.), buttons, and selects.

• PromptEditor: A custom rich text editor component used to edit prompt content.

• Lucide-react Icon: The X icon represents the remove button.

Constants

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

• Defines the two possible roles for a prompt, used as options in the role selection dropdown.

Internal Variables

• name: string - The base name of the field array in the form: 'prompts'.

• fields - Array of prompt fields managed by useFieldArray.

• append - Function to add a new prompt to the array.

• remove - Function to remove a prompt by index.

Component Render Structure

<FormItem>
  <FormLabel tooltip={t('flow.msgTip')}>{t('flow.msg')}</FormLabel>
  <div className="space-y-4">
    {fields.map((field, index) => (
      <div key={field.id} className="flex">
        <div className="space-y-2 flex-1">
          {/* Role Selector */}
          <FormField ... >
            <FormItem className="w-1/3">
              <FormLabel />
              <FormControl>
                <RAGFlowSelect ... />
              </FormControl>
              <FormMessage />
            </FormItem>
          </FormField>

          {/* Prompt Content Editor */}
          <FormField ... >
            <FormItem className="flex-1">
              <FormControl>
                <section>
                  <PromptEditor ... />
                </section>
              </FormControl>
            </FormItem>
          </FormField>
        </div>

        {/* Remove Button */}
        <Button type="button" variant="ghost" onClick={() => remove(index)}>
          <X />
        </Button>
      </div>
    ))}
  </div>
  <FormMessage />
  <BlockButton onClick={() => append({ content: '', role: PromptRole.User })}>
    Add
  </BlockButton>
</FormItem>

Props and Parameters

DynamicPrompt does not accept any external props directly; it relies on being rendered within a react-hook-form context.

Usage Example

import { useForm, FormProvider } from 'react-hook-form';
import DynamicPrompt from './dynamic-prompt';

function MyForm() {
  const methods = useForm({
    defaultValues: {
      prompts: [{ role: 'User', content: '' }],
    },
  });

  const onSubmit = data => {
    console.log(data.prompts);
  };

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <DynamicPrompt />
        <button type="submit">Submit</button>
      </form>
    </FormProvider>
  );
}

Important Implementation Details

• Dynamic Fields Management: Uses useFieldArray from react-hook-form to handle a dynamic list of prompt objects. This hook manages array mutations like append and remove, keeping form state in sync.

• Localization: All user-facing strings are localized using useTranslation from react-i18next.

• Role Selection: Uses a custom select component (RAGFlowSelect) to pick the prompt role.

• Prompt Editing: Uses a custom PromptEditor component (presumably a rich text editor) without the toolbar (showToolbar={false}) for editing prompt content inline.

• Memoization: Wrapped with memo to avoid unnecessary re-renders when props have not changed.

• Form Validation Messages: Uses FormMessage components to display validation or error messages associated with each field.

Interactions with Other Parts of the System

• Form Context: Must be nested within a react-hook-form context provider (useFormContext).

• PromptRole Enum: Imports PromptRole from ../../constant defining roles (likely 'User' and 'Assistant').

• UI Components: Relies on a shared UI library for buttons, form controls, and selects.

• PromptEditor: Integrates a rich text editor component for editing message content, likely shared across other parts of the app.

• Localization: Depends on react-i18next for multi-language support.

• Icons: Uses lucide-react for UI icons.

Mermaid Component Diagram

componentDiagram
    component DynamicPrompt {
        +useFormContext()
        +useFieldArray(name: "prompts")
        +useTranslation()
        +render()
    }
    component FormField
    component FormItem
    component FormLabel
    component FormControl
    component FormMessage
    component RAGFlowSelect
    component PromptEditor
    component Button
    component BlockButton
    component XIcon

    DynamicPrompt --> FormItem
    DynamicPrompt --> FormLabel
    DynamicPrompt --> FormField
    DynamicPrompt --> FormControl
    DynamicPrompt --> FormMessage
    DynamicPrompt --> RAGFlowSelect
    DynamicPrompt --> PromptEditor
    DynamicPrompt --> Button
    DynamicPrompt --> BlockButton
    Button --> XIcon

Summary

• dynamic-prompt.tsx is a React component for creating and managing a dynamic list of conversational prompts in a form.

• Utilizes react-hook-form for form state and dynamic fields.

• Supports role selection and rich text editing of prompts.

• Localized labels and tooltips.

• Provides add/remove functionality for prompt entries.

• Designed for integration within a larger form workflow handling conversational data input.

This component is a critical building block for any feature requiring flexible, user-editable conversation flows or prompt sequences.