import React from 'react'; import { Button } from '../../../ui/button'; import { Plus, X } from 'lucide-react'; import { Input } from '../../../ui/input'; import { cn } from '../../../../utils'; import { defineMessages, useIntl } from '../../../../i18n'; const i18n = defineMessages({ requestHeaders: { id: 'headersSection.requestHeaders', defaultMessage: 'Request Headers', }, headersDescription: { id: 'headersSection.headersDescription', defaultMessage: 'Add custom HTTP headers to include in requests to the MCP server. Click the "+" button to add after filling both fields.', }, headerName: { id: 'headersSection.headerName', defaultMessage: 'Header name', }, value: { id: 'headersSection.value', defaultMessage: 'Value', }, bothRequired: { id: 'headersSection.bothRequired', defaultMessage: 'Both header name and value must be entered', }, noSpaces: { id: 'headersSection.noSpaces', defaultMessage: 'Header name cannot contain spaces', }, duplicateHeader: { id: 'headersSection.duplicateHeader', defaultMessage: 'A header with this name already exists', }, add: { id: 'headersSection.add', defaultMessage: 'Add', }, }); interface HeadersSectionProps { headers: { key: string; value: string; isEdited?: boolean }[]; onAdd: (key: string, value: string) => void; onRemove: (index: number) => void; onChange: (index: number, field: 'key' | 'value', value: string) => void; submitAttempted: boolean; onPendingInputChange: ( hasPendingInput: boolean, pendingHeader: { key: string; value: string } | null ) => void; } export default function HeadersSection({ headers, onAdd, onRemove, onChange, submitAttempted, onPendingInputChange, }: HeadersSectionProps) { const intl = useIntl(); const [newKey, setNewKey] = React.useState(''); const [newValue, setNewValue] = React.useState(''); const [validationError, setValidationError] = React.useState(null); const [invalidFields, setInvalidFields] = React.useState<{ key: boolean; value: boolean }>({ key: false, value: false, }); // Notify parent when pending input changes React.useEffect(() => { const hasPendingInput = newKey.trim() !== '' || newValue.trim() !== ''; const pendingHeader = newKey.trim() && newValue.trim() ? { key: newKey, value: newValue } : null; onPendingInputChange(hasPendingInput, pendingHeader); }, [newKey, newValue, onPendingInputChange]); const handleAdd = () => { const keyEmpty = !newKey.trim(); const valueEmpty = !newValue.trim(); const keyHasSpaces = newKey.includes(' '); const normalizedNewKey = newKey.trim().toLowerCase(); const isDuplicate = headers.some((h) => h.key.trim().toLowerCase() === normalizedNewKey); if (keyEmpty || valueEmpty) { setInvalidFields({ key: keyEmpty, value: valueEmpty, }); setValidationError(intl.formatMessage(i18n.bothRequired)); return; } if (keyHasSpaces) { setInvalidFields({ key: true, value: false, }); setValidationError(intl.formatMessage(i18n.noSpaces)); return; } if (isDuplicate) { setInvalidFields({ key: true, value: false, }); setValidationError(intl.formatMessage(i18n.duplicateHeader)); return; } setValidationError(null); setInvalidFields({ key: false, value: false }); onAdd(newKey, newValue); setNewKey(''); setNewValue(''); }; const clearValidation = () => { setValidationError(null); setInvalidFields({ key: false, value: false }); }; const isFieldInvalid = (index: number, field: 'key' | 'value') => { if (!submitAttempted) return false; const value = headers[index][field].trim(); return value === ''; }; return (

{intl.formatMessage(i18n.requestHeaders)}

{intl.formatMessage(i18n.headersDescription)}

{/* Existing headers */} {headers.map((header, index) => (

onChange(index, 'key', e.target.value)} placeholder={intl.formatMessage(i18n.headerName)} className={cn( 'w-full text-text-primary border-border-primary hover:border-border-primary', isFieldInvalid(index, 'key') && 'border-red-500 focus:border-red-500' )} />

onChange(index, 'value', e.target.value)} placeholder={intl.formatMessage(i18n.value)} className={cn( 'w-full text-text-primary border-border-primary hover:border-border-primary', isFieldInvalid(index, 'value') && 'border-red-500 focus:border-red-500' )} />

))} {/* Empty row with Add button */} { setNewKey(e.target.value); clearValidation(); }} placeholder={intl.formatMessage(i18n.headerName)} className={cn( 'w-full text-text-primary border-border-primary hover:border-border-primary', invalidFields.key && 'border-red-500 focus:border-red-500' )} /> { setNewValue(e.target.value); clearValidation(); }} placeholder={intl.formatMessage(i18n.value)} className={cn( 'w-full text-text-primary border-border-primary hover:border-border-primary', invalidFields.value && 'border-red-500 focus:border-red-500' )} />

{validationError &&

{validationError}

}

); }