dynamic-tool.tsx

Overview

dynamic-tool.tsx defines a React functional component named DynamicTool that provides a dynamic form interface for managing a list of "tools". Each tool consists primarily of a component_name field which is edited using a rich text/prompt editor component (PromptEditor). Users can add new tools or remove existing ones dynamically. The component leverages react-hook-form for form state management and validation, ensuring seamless integration into a larger form.

This component is designed to be embedded within a form context and allows users to flexibly create, edit, and delete multiple tool entries in a user-friendly way. It is memoized for performance optimization.

Detailed Explanation

Imports Summary

• UI Elements: BlockButton, Button, FormControl, FormField, FormItem, and FormMessage are UI components likely from a shared design system.

• Icons: X from lucide-react is used as a delete icon.

• React Utilities: memo to optimize re-renders.

• React Hook Form: useFormContext to access the parent form context and useFieldArray for managing dynamic fields.

• PromptEditor: A custom component used for editing the component_name field in a rich text or prompt-based manner.

Component: DynamicTool

Purpose

DynamicTool renders a dynamic list of tool entries. Each entry contains an editable field (component_name) managed by PromptEditor. Users can add new tools or remove existing tools dynamically.

Hooks and State

• useFormContext(): Accesses the form context, including form control and state.

• useFieldArray(): Manages the dynamic array of tools fields, providing:

  • fields: current array of tool objects (each with at least an id and component_name).

  • append: function to add a new empty tool.

  • remove: function to delete a tool by index.

Render Logic

• The component maps over fields to render each tool entry.

• Each tool entry consists of:

  • A FormField connected to the form control with the name tools[index].component_name.

  • Inside FormField, a PromptEditor is rendered to edit the component_name.

  • A ghost-style Button with an X icon to remove that tool entry.

• Below the list, a BlockButton allows appending a new tool with an empty component_name.

• FormMessage is used to display validation or other form messages related to this field array.

Props

The component does not receive external props; it relies on being used within a parent form context.

Return Value

The component returns React elements representing the dynamic tool list UI.

Usage Example

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

function ParentForm() {
  const methods = useForm({
    defaultValues: {
      tools: [{ component_name: 'Initial tool' }],
    },
  });

  const onSubmit = (data) => {
    console.log('Form data:', data);
  };

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

Important Implementation Details

• useFieldArray Integration:
  This hook is critical for dynamic form fields in React Hook Form. It ensures that additions and removals update the form state correctly and maintain field IDs for React rendering optimization.

• Memoization:
  The component is wrapped with memo to prevent unnecessary re-renders when form state unrelated to this component changes.

• Controlled Components with FormField:
  The FormField component abstracts form control wiring, making the form fields controlled and integrated with validation/error messaging.

• PromptEditor Usage:
  This component is used as an input for the component_name field, likely providing a rich-text or prompt editing UI instead of a simple text input.

• UI Layout:
  The tools list is vertically stacked with spacing (space-y-4), and each entry aligns the editor and remove button horizontally.

Interaction with Other Parts of the System

• Form Context:
  DynamicTool must be used within a react-hook-form context (e.g., inside a FormProvider), from which it derives the form state and control.

• PromptEditor Component:
  This file imports and uses PromptEditor from '../components/prompt-editor'. Changes or API updates in PromptEditor may affect this component.

• UI Library Components:
  It depends on shared UI components (Button, FormField, etc.) that provide consistent styling and behavior.

• Parent Form:
  The data managed here (tools array) will be part of the overall form data submitted by the parent form.

Mermaid Component Diagram

componentDiagram
    component "DynamicTool" {
        +useFormContext()
        +useFieldArray(name='tools')
        +render()
    }
    component "PromptEditor" <<child>>
    component "FormField" <<child>>
    component "Button" <<child>>

    DynamicTool --> FormField : renders
    FormField --> PromptEditor : renders
    DynamicTool --> Button : renders (Add, Remove)

Summary

dynamic-tool.tsx is a reusable React component designed for dynamic management of a list of tool entries within a form. It uses react-hook-form for dynamic field array management, integrates a rich text prompt editor for input, and provides UI buttons for adding/removing entries. The component is memoized for performance and depends on shared UI components and form context for full functionality. It fits into a larger form system where users can edit multiple dynamic tools as part of form submission.