Show error if unable to fetch voices and display disabled voice selector if voices are not present.

Author: iamdharmesh

includes/Classifai/Providers/ElevenLabs/ElevenLabs.php

@@ -186,10 +186,18 @@ public function sanitize_api_key_settings( array $new_settings = [], array $sett
 			if ( $this->feature_instance instanceof TextToSpeech ) {
 				// Get the available voices.
 				$voices = $this->get_voices( $new_settings[ static::ID ]['api_key'] ?? '' );
-				if ( ! is_wp_error( $voices ) && ! empty( $voices ) ) {
-					$new_settings[ static::ID ]['voices'] = $voices;
+
+				if ( is_wp_error( $voices ) ) {
+					$new_settings[ static::ID ]['authenticated'] = false;
+					$new_settings[ static::ID ]['voices']        = [];
+					add_settings_error(
+						'api_key',
+						'classifai-elevenlabs-voices-error',
+						$voices->get_error_message(),
+						'error'
+					);
 				} else {
-					$new_settings[ static::ID ]['voices'] = [];
+					$new_settings[ static::ID ]['voices'] = $voices;
 				}
 			}
 		}

includes/Classifai/Providers/ElevenLabs/TextToSpeech.php

@@ -95,12 +95,12 @@ public function sanitize_settings( array $new_settings ): array {
 		$new_settings[ static::ID ]['voice'] = sanitize_text_field( $new_settings[ static::ID ]['voice'] ?? $settings[ static::ID ]['voice'] );
 
 		// Ensure the model being saved is valid. If not valid or we don't have one, use the first model.
-		if ( ! in_array( $new_settings[ static::ID ]['model'], array_column( $new_settings[ static::ID ]['models'], 'id' ), true ) ) {
+		if ( ! empty( $new_settings[ static::ID ]['models'] ) && ! in_array( $new_settings[ static::ID ]['model'], array_column( $new_settings[ static::ID ]['models'], 'id' ), true ) ) {
 			$new_settings[ static::ID ]['model'] = array_column( $new_settings[ static::ID ]['models'], 'id' )[0];
 		}
 
 		// Ensure the voice being saved is valid. If not valid or we don't have one, use the first voice.
-		if ( ! in_array( $new_settings[ static::ID ]['voice'], array_column( $new_settings[ static::ID ]['voices'], 'id' ), true ) ) {
+		if ( ! empty( $new_settings[ static::ID ]['voices'] ) && ! in_array( $new_settings[ static::ID ]['voice'], array_column( $new_settings[ static::ID ]['voices'], 'id' ), true ) ) {
 			$new_settings[ static::ID ]['voice'] = array_column( $new_settings[ static::ID ]['voices'], 'id' )[0];
 		}
 

src/js/settings/components/provider-settings/elevenlabs/text-to-speech.js

@@ -29,6 +29,14 @@ export const ElevenLabsTextToSpeechSettings = ( { isConfigured = false } ) => {
 	);
 	const { setProviderSettings } = useDispatch( STORE_NAME );
 	const onChange = ( data ) => setProviderSettings( providerName, data );
+	const voices = providerSettings.voices.length
+		? providerSettings.voices
+		: [
+				{
+					name: __( '-- Choose Voice --', 'classifai' ),
+					id: '',
+				},
+		  ];
 
 	return (
 		<>
@@ -44,40 +52,37 @@ export const ElevenLabsTextToSpeechSettings = ( { isConfigured = false } ) => {
 				onChange={ ( value ) => onChange( { model: value } ) }
 				modelsDocUrl="https://elevenlabs.io/docs/models"
 			/>
-			{ !! providerSettings.voices?.length && (
-				<SettingsRow
-					label={ __( 'Voice', 'classifai' ) }
-					description={
-						<>
-							{ __(
-								'Select the voice for the generated audio. You can find more details on voices',
-								'classifai'
-							) }{ ' ' }
-							<a
-								href="https://elevenlabs.io/app/voice-library"
-								target="_blank"
-								rel="noreferrer"
-							>
-								{ __( 'here', 'classifai' ) }
-							</a>
-							.
-						</>
-					}
-				>
-					<SelectControl
-						id={ `${ providerName }_voice` }
-						onChange={ ( value ) => onChange( { voice: value } ) }
-						value={ providerSettings.voice || 'alloy' }
-						options={ ( providerSettings.voices || [] ).map(
-							( ele ) => ( {
-								label: ele.name,
-								value: ele.id,
-							} )
-						) }
-						__nextHasNoMarginBottom
-					/>
-				</SettingsRow>
-			) }
+			<SettingsRow
+				label={ __( 'Voice', 'classifai' ) }
+				description={
+					<>
+						{ __(
+							'Select the voice for the generated audio. You can find more details on voices',
+							'classifai'
+						) }{ ' ' }
+						<a
+							href="https://elevenlabs.io/app/voice-library"
+							target="_blank"
+							rel="noreferrer"
+						>
+							{ __( 'here', 'classifai' ) }
+						</a>
+						.
+					</>
+				}
+			>
+				<SelectControl
+					id={ `${ providerName }_voice` }
+					onChange={ ( value ) => onChange( { voice: value } ) }
+					value={ providerSettings.voice || '' }
+					options={ voices.map( ( ele ) => ( {
+						label: ele.name,
+						value: ele.id,
+					} ) ) }
+					disabled={ ! providerSettings.voices?.length }
+					__nextHasNoMarginBottom
+				/>
+			</SettingsRow>
 		</>
 	);
 };