import React from 'react'; import { AlertTriangle, Trash2, ChevronDown, ChevronRight } from 'lucide-react'; import { Parameter } from '../../recipe'; import { defineMessages, useIntl } from '../../i18n'; const i18n = defineMessages({ unusedWarningTitle: { id: 'parameterInput.unusedWarningTitle', defaultMessage: 'This parameter is not used in the instructions or prompt. It will be available for manual input but may not be needed.', }, unused: { id: 'parameterInput.unused', defaultMessage: 'Unused', }, deleteParameter: { id: 'parameterInput.deleteParameter', defaultMessage: 'Delete parameter: {key}', }, description: { id: 'parameterInput.description', defaultMessage: 'description', }, descriptionPlaceholder: { id: 'parameterInput.descriptionPlaceholder', defaultMessage: 'E.g., "Enter the name for the new component"', }, descriptionHelp: { id: 'parameterInput.descriptionHelp', defaultMessage: 'This is the message the end-user will see.', }, inputType: { id: 'parameterInput.inputType', defaultMessage: 'Input Type', }, typeString: { id: 'parameterInput.typeString', defaultMessage: 'String', }, typeSelect: { id: 'parameterInput.typeSelect', defaultMessage: 'Select', }, typeNumber: { id: 'parameterInput.typeNumber', defaultMessage: 'Number', }, typeBoolean: { id: 'parameterInput.typeBoolean', defaultMessage: 'Boolean', }, requirement: { id: 'parameterInput.requirement', defaultMessage: 'Requirement', }, required: { id: 'parameterInput.required', defaultMessage: 'Required', }, optional: { id: 'parameterInput.optional', defaultMessage: 'Optional', }, defaultValue: { id: 'parameterInput.defaultValue', defaultMessage: 'Default Value', }, defaultValuePlaceholder: { id: 'parameterInput.defaultValuePlaceholder', defaultMessage: 'Enter default value', }, optionsLabel: { id: 'parameterInput.optionsLabel', defaultMessage: 'Options (one per line)', }, optionsPlaceholder: { id: 'parameterInput.optionsPlaceholder', defaultMessage: 'Option 1\nOption 2\nOption 3', }, optionsHelp: { id: 'parameterInput.optionsHelp', defaultMessage: 'Enter each option on a new line. These will be shown as dropdown choices.', }, }); interface ParameterInputProps { parameter: Parameter; onChange: (name: string, updatedParameter: Partial) => void; onDelete?: (parameterKey: string) => void; isUnused?: boolean; isExpanded?: boolean; onToggleExpanded?: (parameterKey: string) => void; } const ParameterInput: React.FC = ({ parameter, onChange, onDelete, isUnused = false, isExpanded = true, onToggleExpanded, }) => { const intl = useIntl(); const { key, description, requirement } = parameter; const defaultValue = parameter.default || ''; const handleToggleExpanded = (e: React.MouseEvent) => { // Only toggle if we're not clicking on the delete button if (onToggleExpanded && !(e.target as HTMLElement).closest('button')) { onToggleExpanded(key); } }; return (

{/* Collapsed header - always visible */}

{onToggleExpanded && ( )}

{parameter.key} {isUnused && (

{intl.formatMessage(i18n.unused)}

)}

{onDelete && ( )}

{/* Expandable content - only shown when expanded */} {isExpanded && (

{intl.formatMessage(i18n.description)} onChange(key, { description: e.target.value })} className="w-full p-3 border rounded-lg bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-border-secondary" placeholder={intl.formatMessage(i18n.descriptionPlaceholder)} />

{intl.formatMessage(i18n.descriptionHelp)}

{/* Controls for requirement, input type, and default value */}

{intl.formatMessage(i18n.inputType)}

{intl.formatMessage(i18n.requirement)}

{/* The default value input is only shown for optional parameters */} {requirement === 'optional' && (

{intl.formatMessage(i18n.defaultValue)} onChange(key, { default: e.target.value })} className="w-full p-3 border rounded-lg bg-background-primary text-text-primary" placeholder={intl.formatMessage(i18n.defaultValuePlaceholder)} />

)}

{/* Options field for select input type */} {parameter.input_type === 'select' && (

{intl.formatMessage(i18n.optionsLabel)}

{
                    // Don't filter out empty lines - preserve them so user can type on new lines
                    const options = e.target.value.split('\n');
                    onChange(key, { options });
                  }}
                  onKeyDown={(e) => {
                    // Allow Enter key to work normally in textarea (prevent form submission or modal close)
                    if (e.key === 'Enter') {
                      e.stopPropagation();
                    }
                  }}
                  className="w-full p-3 border rounded-lg bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-border-secondary"
                  placeholder={intl.formatMessage(i18n.optionsPlaceholder)}
                  rows={4}
                />
                <p className="text-sm text-text-secondary mt-1">
                  {intl.formatMessage(i18n.optionsHelp)}
                </p>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
};

export default ParameterInput;
</article></body></html>