import React, { useState, useEffect } from 'react'; import { Parameter } from '../recipe'; import { Button } from './ui/button'; import { getInitialWorkingDir } from '../utils/workingDir'; import { defineMessages, useIntl } from '../i18n'; const i18n = defineMessages({ cancelRecipeSetup: { id: 'parameterInputModal.cancelRecipeSetup', defaultMessage: 'Cancel Recipe Setup', }, whatToDo: { id: 'parameterInputModal.whatToDo', defaultMessage: 'What would you like to do?', }, backToForm: { id: 'parameterInputModal.backToForm', defaultMessage: 'Back to Parameter Form', }, startNewChat: { id: 'parameterInputModal.startNewChat', defaultMessage: 'Start New Chat (No Recipe)', }, recipeParameters: { id: 'parameterInputModal.recipeParameters', defaultMessage: 'Recipe Parameters', }, selectOption: { id: 'parameterInputModal.selectOption', defaultMessage: 'Select an option...', }, select: { id: 'parameterInputModal.select', defaultMessage: 'Select...', }, true: { id: 'parameterInputModal.true', defaultMessage: 'True', }, false: { id: 'parameterInputModal.false', defaultMessage: 'False', }, enterValue: { id: 'parameterInputModal.enterValue', defaultMessage: 'Enter value for {key}...', }, cancel: { id: 'parameterInputModal.cancel', defaultMessage: 'Cancel', }, startRecipe: { id: 'parameterInputModal.startRecipe', defaultMessage: 'Start Recipe', }, }); interface ParameterInputModalProps { parameters: Parameter[]; onSubmit: (values: Record) => void; onClose: () => void; initialValues?: Record; } const ParameterInputModal: React.FC = ({ parameters, onSubmit, onClose, initialValues, }) => { const intl = useIntl(); const [inputValues, setInputValues] = useState>({}); const [validationErrors, setValidationErrors] = useState>({}); const [showCancelOptions, setShowCancelOptions] = useState(false); // Pre-fill the form with default values from the recipe and initialValues from deeplink useEffect(() => { const defaultValues: Record = {}; parameters.forEach((param) => { if (param.requirement === 'optional' && param.default) { defaultValues[param.key] = param.input_type === 'boolean' ? param.default.toLowerCase() : param.default; } }); setInputValues({ ...defaultValues, ...initialValues }); }, [parameters, initialValues]); const handleChange = (name: string, value: string): void => { setInputValues((prevValues: Record) => ({ ...prevValues, [name]: value })); }; const handleSubmit = (): void => { // Clear previous validation errors setValidationErrors({}); // Check if all *required* parameters are filled const requiredParams: Parameter[] = parameters.filter((p) => p.requirement === 'required'); const errors: Record = {}; requiredParams.forEach((param) => { const value = inputValues[param.key]?.trim(); if (!value) { errors[param.key] = `${param.description || param.key} is required`; } }); if (Object.keys(errors).length > 0) { setValidationErrors(errors); return; } onSubmit(inputValues); }; const handleCancel = (): void => { // Always show cancel options if recipe has any parameters (required or optional) const hasAnyParams = parameters.length > 0; if (hasAnyParams) { setShowCancelOptions(true); } else { onClose(); } }; const handleCancelOption = (option: 'new-chat' | 'back-to-form'): void => { if (option === 'new-chat') { try { const workingDir = getInitialWorkingDir(); window.electron.createChatWindow({ dir: workingDir }); window.electron.hideWindow(); } catch (error) { console.error('Error creating new window:', error); onClose(); } } else { setShowCancelOptions(false); // Go back to the parameter form } }; return (

{showCancelOptions ? ( // Cancel options modal

{intl.formatMessage(i18n.cancelRecipeSetup)}

{intl.formatMessage(i18n.whatToDo)}

) : ( // Main parameter form

{intl.formatMessage(i18n.recipeParameters)}

{parameters.map((param) => (

{param.description || param.key} {param.requirement === 'required' && ( * )} {/* Render different input types */} {param.input_type === 'select' && param.options ? ( ) : param.input_type === 'boolean' ? ( ) : ( handleChange(param.key, e.target.value)} className={`w-full p-3 border rounded-lg bg-background-secondary text-text-primary focus:outline-none focus:ring-2 ${ validationErrors[param.key] ? 'border-red-500 focus:ring-red-500' : 'border-border-primary focus:ring-border-secondary' }`} placeholder={param.default || intl.formatMessage(i18n.enterValue, { key: param.key })} /> )} {validationErrors[param.key] && (

{validationErrors[param.key]}

)}

))}

)}

); }; export default ParameterInputModal;