cross-language-form-field.tsx

Overview

cross-language-form-field.tsx defines a reusable React form component named CrossLanguageFormField that provides a multi-select dropdown for users to choose multiple languages. It is designed to be integrated into forms managed by react-hook-form and supports internationalization with react-i18next. The component displays a labeled field with optional vertical or horizontal layout and includes user-friendly features such as tooltips and placeholder text.

This component is typically used in settings or configuration forms where users specify cross-lingual preferences, such as selecting multiple languages for translation, content filtering, or language-specific processing.

Detailed Explanation

Constants

Languages

const Languages = [
  'English',
  'Chinese',
  'Spanish',
  'French',
  'German',
  'Japanese',
  'Korean',
  'Vietnamese',
];

Purpose: Defines the list of supported languages presented as options in the multi-select dropdown.
Usage: Mapped to options with translated labels for UI display.

options

const options = Languages.map((x) => ({
  label: t('language.' + toLower(x)),
  value: x,
}));

Purpose: Converts each language name to an object suitable for the MultiSelect component.
Properties:
- label: A localized string fetched using t() with keys like 'language.english'.
- value: The original language string (e.g., "English").
Note: Uses toLower from lodash to normalize keys for translations.

Types

CrossLanguageItemProps

type CrossLanguageItemProps = {
  name?: string;
  vertical?: boolean;
};

name: Optional string specifying the form field name in react-hook-form. Defaults to 'prompt_config.cross_languages'.
vertical: Optional boolean indicating layout orientation. Defaults to true (vertical layout).

Component: CrossLanguageFormField

export const CrossLanguageFormField = ({
  name = 'prompt_config.cross_languages',
  vertical = true,
}: CrossLanguageItemProps) => {
  const { t } = useTranslation();
  const form = useFormContext();

  return (
    <FormField
      control={form.control}
      name={name}
      render={({ field }) => (
        <FormItem
          className={cn('flex', {
            'gap-2': vertical,
            'flex-col': vertical,
            'justify-between': !vertical,
            'items-center': !vertical,
          })}
        >
          <FormLabel tooltip={t('chat.crossLanguageTip')}>
            {t('chat.crossLanguage')}
          </FormLabel>
          <FormControl>
            <MultiSelect
              options={options}
              placeholder={t('fileManager.pleaseSelect')}
              maxCount={100}
              {...field}
              onValueChange={field.onChange}
              defaultValue={field.value}
              modalPopover
            />
          </FormControl>
        </FormItem>
      )}
    />
  );
};

Description

Renders a form field integrated with react-hook-form validation and state management.
Displays a label with a tooltip explaining the purpose of the field.
Uses a MultiSelect dropdown component for selecting multiple language options.
Supports two layout modes:
- Vertical (default): Label above the selector with spacing.
- Horizontal: Label and selector aligned side-by-side.
Supports i18n for all visible text and tooltips.
Limits maximum selectable languages to 100 (arbitrary large number).

Parameters

Prop	Type	Default	Description
`name`	string?	`'prompt_config.cross_languages'`	Form field name in `react-hook-form` context.
`vertical`	boolean?	`true`	Determines vertical (true) or horizontal (false) layout.

Return Value

Returns a JSX element representing the cross-language multi-select form field.

Usage Example

import { useForm, FormProvider } from 'react-hook-form';
import { CrossLanguageFormField } from '@/components/forms/cross-language-form-field';

const MyForm = () => {
  const methods = useForm({
    defaultValues: {
      prompt_config: {
        cross_languages: ['English', 'Spanish'],
      },
    },
  });

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

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

Implementation Details and Algorithms

Integration with React Hook Form: Uses useFormContext to access form control and field state, ensuring synchronization of field value and validation.
Localization: Uses react-i18next both at the field label and in option labels. The options array is generated dynamically on each render, translating each language label.
Dynamic CSS Classes: Utilizes the cn utility to conditionally apply flexbox layout styles depending on the vertical prop.
MultiSelect Behavior:
- Passes field props (onChange, value) directly to MultiSelect enabling two-way binding.
- Uses modalPopover prop to render the dropdown as a modal/popover (UX detail).
- Limits selections to a maximum of 100 items.
Tooltips: Label has a tooltip providing additional info, improving usability.

Interaction with Other Parts of the System

@/components/ui/form: Provides base form components (FormControl, FormField, FormItem, FormLabel) that implement consistent UI and accessibility patterns.
@/components/ui/multi-select: The multi-select dropdown UI component that supports multi-value selection.
react-hook-form: Manages form state and validation, allowing this component to be easily integrated into complex forms.
react-i18next: Handles internationalization, ensuring all UI strings adapt to the user's current language.
Utility cn: A classnames helper used to conditionally apply CSS classes.
Localization keys used:
- language.<lowercase language> for option labels.
- chat.crossLanguage for the field label.
- chat.crossLanguageTip for the label tooltip.
- fileManager.pleaseSelect for the placeholder text.

This component is designed to be embedded inside larger forms where language selection is necessary, such as user preferences, content filtering, or multilingual prompt configurations.

Visual Diagram

classDiagram
    CrossLanguageFormField {
        +name: string
        +vertical: boolean
        +render()
    }
    CrossLanguageFormField ..> FormField : uses
    CrossLanguageFormField ..> FormItem : uses
    CrossLanguageFormField ..> FormLabel : uses
    CrossLanguageFormField ..> FormControl : uses
    CrossLanguageFormField ..> MultiSelect : uses
    CrossLanguageFormField ..> useFormContext : hooks into
    CrossLanguageFormField ..> useTranslation : hooks into

Summary

cross-language-form-field.tsx exports a flexible, localized multi-select form field component for choosing multiple languages. Leveraging React Hook Form for state management and i18next for internationalization, it provides a user-friendly interface with tooltips and layout options suitable for multilingual applications. The component's dependencies on UI primitives and form utilities make it a modular part of a larger form system.