dify/web/app/components/base/features/new-feature-panel/moderation/form-generation.tsx

import type { FC } from 'react'
import type { CodeBasedExtensionForm } from '@/models/common'
import type { ModerationConfig } from '@/models/debug'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectItemIndicator,
  SelectItemText,
  SelectTrigger,
} from '@langgenius/dify-ui/select'
import { Textarea } from '@langgenius/dify-ui/textarea'
import { useLocale } from '@/context/i18n'

type FormGenerationProps = {
  forms: CodeBasedExtensionForm[]
  value: ModerationConfig['config']
  onChange: (v: Record<string, string>) => void
}
const FormGeneration: FC<FormGenerationProps> = ({ forms, value, onChange }) => {
  const locale = useLocale()

  const handleFormChange = (type: string, v: string) => {
    onChange({ ...value, [type]: v })
  }

  return (
    <>
      {forms.map((form, index) => {
        const selectOptions =
          form.type === 'select'
            ? form.options.map((option) => ({
                name: option.label[locale === 'zh-Hans' ? 'zh-Hans' : 'en-US'],
                value: option.value,
              }))
            : []
        const selectedOption =
          selectOptions.find((option) => option.value === value?.[form.variable]) ?? null

        return (
          <div key={index} className="py-2">
            <div className="flex h-9 items-center text-sm font-medium text-text-primary">
              {locale === 'zh-Hans' ? form.label['zh-Hans'] : form.label['en-US']}
            </div>
            {form.type === 'text-input' && (
              <input
                value={value?.[form.variable] || ''}
                className="block h-9 w-full appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-hidden"
                placeholder={form.placeholder}
                onChange={(e) => handleFormChange(form.variable, e.target.value)}
              />
            )}
            {form.type === 'paragraph' && (
              <div className="relative">
                <Textarea
                  aria-label={locale === 'zh-Hans' ? form.label['zh-Hans'] : form.label['en-US']}
                  className="resize-none"
                  value={value?.[form.variable] || ''}
                  placeholder={form.placeholder}
                  onValueChange={(value) => handleFormChange(form.variable, value)}
                />
              </div>
            )}
            {form.type === 'select' && (
              <Select
                value={selectedOption?.value ?? null}
                onValueChange={(nextValue) =>
                  nextValue && handleFormChange(form.variable, nextValue)
                }
              >
                <SelectTrigger className="w-full">
                  {selectedOption?.name ?? form.placeholder}
                </SelectTrigger>
                <SelectContent>
                  {selectOptions.map((option) => (
                    <SelectItem key={option.value} value={option.value}>
                      <SelectItemText>{option.name}</SelectItemText>
                      <SelectItemIndicator />
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            )}
          </div>
        )
      })}
    </>
  )
}

export default FormGeneration