+
+
+ {inputParam.label}
+ {!inputParam.optional && *}
+ {inputParam.description && (
+
+ )}
+
+
+ {inputParam.type === 'credential' && (
+ {
+ setValue(newValue, selectedProvider, 'credentialId')
+ // Load voices when credential is updated
+ if (newValue && selectedProvider !== 'none') {
+ setTimeout(() => loadVoicesForProvider(selectedProvider, newValue), 100)
+ }
+ }}
+ />
+ )}
+ {inputParam.type === 'boolean' && (
+ setValue(newValue, selectedProvider, inputParam.name)}
+ value={
+ textToSpeech?.[selectedProvider]
+ ? textToSpeech[selectedProvider][inputParam.name]
+ : inputParam.default ?? false
+ }
+ />
+ )}
+ {(inputParam.type === 'string' || inputParam.type === 'password' || inputParam.type === 'number') && (
+ setValue(newValue, selectedProvider, inputParam.name)}
+ value={
+ textToSpeech?.[selectedProvider]
+ ? textToSpeech[selectedProvider][inputParam.name]
+ : inputParam.default ?? ''
+ }
+ />
+ )}
+ {inputParam.type === 'options' && (
+ setValue(newValue, selectedProvider, inputParam.name)}
+ value={
+ textToSpeech?.[selectedProvider]
+ ? textToSpeech[selectedProvider][inputParam.name]
+ : inputParam.default ?? 'choose an option'
+ }
+ />
+ )}
+ {inputParam.type === 'voice_select' && (
+ option.name || ''}
+ value={
+ voices.find(
+ (voice) =>
+ voice.id === (textToSpeech?.[selectedProvider]?.[inputParam.name] || inputParam.default)
+ ) || null
+ }
+ onChange={(event, newValue) => {
+ setValue(newValue ? newValue.id : '', selectedProvider, inputParam.name)
+ }}
+ renderInput={(params) => (
+
+ {loadingVoices ? : null}
+ {params.InputProps.endAdornment}
+ >
+ )
+ }}
+ />
+ )}
+ disabled={loadingVoices || !textToSpeech?.[selectedProvider]?.credentialId}
+ />
+ )}
+
+ ))}
+
+ {/* Auto-play Toggle */}
+