Feat: multiple prompts

includes/Classifai/Providers/Provider.php

@@ -230,27 +230,81 @@ class="<?php echo esc_attr( $class ); ?>"
 	}
 
 	/**
-	 * Generic textarea field callback
+	 * Generic prompt repeater field callback
+	 *
+	 * @since 2.4.0
 	 *
 	 * @param array $args The args passed to add_settings_field.
 	 */
-	public function render_textarea( $args ) {
-		$option_index  = isset( $args['option_index'] ) ? $args['option_index'] : false;
-		$setting_index = $this->get_settings( $option_index );
-		$value         = ( isset( $setting_index[ $args['label_for'] ] ) ) ? $setting_index[ $args['label_for'] ] : '';
-		$class         = isset( $args['class'] ) ? $args['class'] : 'large-text';
-		$placeholder   = isset( $args['placeholder'] ) ? $args['placeholder'] : '';
+	public function render_prompt_repeater_field( array $args ): void {
+		$option_index      = $args['option_index'] ?? false;
+		$setting_index     = $this->get_settings( $option_index );
+		$value             = $setting_index[ $args['label_for'] ] ?? '';
+		$class             = $args['class'] ?? 'large-text';
+		$placeholder       = $args['placeholder'] ?? '';
+		$field_name_prefix = sprintf(
+			'classifai_%1$s%2$s[%3$s]',
+			$this->option_name,
+			$option_index ? "[$option_index]" : '',
+			$args['label_for']
+		);
 
-		// Check for a default value
 		$value = ( empty( $value ) && isset( $args['default_value'] ) ) ? $args['default_value'] : $value;
+
+		$prompt_count = count( $value );
+		$field_index  = 0;
 		?>
-		<textarea
-			id="<?php echo esc_attr( $args['label_for'] ); ?>"
-			class="<?php echo esc_attr( $class ); ?>"
-			rows="4"
-			name="classifai_<?php echo esc_attr( $this->option_name ); ?><?php echo $option_index ? '[' . esc_attr( $option_index ) . ']' : ''; ?>[<?php echo esc_attr( $args['label_for'] ); ?>]"
-			placeholder="<?php echo esc_attr( $placeholder ); ?>"
-		><?php echo esc_textarea( $value ); ?></textarea>
+
+		<?php foreach ( $value as $prompt ) : ?>
+			<?php $is_default_prompt = 1 === $prompt['default']; ?>
+
+			<fieldset class="classifai-field-type-prompt-setting">
+				<input type="hidden"
+					name="<?php echo esc_attr( $field_name_prefix . "[$field_index][default]" ); ?>"
+					value="<?php echo esc_attr( $prompt['default'] ?? '' ); ?>"
+					class="js-setting-field__default">
+				<label>
+					<?php esc_html_e( 'Title', 'classifai' ); ?>&nbsp;*
+					<span class="dashicons dashicons-editor-help"
+						title="<?php esc_attr_e( 'Short description of prompt to use for identification', 'classifai' ); ?>"></span>
+					<input type="text"
+						name="<?php echo esc_attr( $field_name_prefix . "[$field_index][title]" ); ?>"
+						placeholder="<?php esc_attr_e( 'Prompt title', 'classifai' ); ?>"
+						value="<?php echo esc_attr( $prompt['title'] ?? '' ); ?>"
+						required>
+				</label>
+
+				<label>
+					<?php esc_html_e( 'Prompt', 'classifai' ); ?>
+					<textarea
+						class="<?php echo esc_attr( $class ); ?>"
+						rows="4"
+						name="<?php echo esc_attr( $field_name_prefix . "[$field_index][prompt]" ); ?>"
+						placeholder="<?php echo esc_attr( $placeholder ); ?>"
+					><?php echo esc_textarea( $prompt['prompt'] ?? '' ); ?></textarea>
+				</label>
+
+				<div class="actions-rows">
+					<a href="#" class="action__set_default <?php echo $is_default_prompt ? 'selected' : ''; ?>">
+						<?php if ( $is_default_prompt ) : ?>
+							<?php esc_html_e( 'Default Prompt', 'classifai' ); ?>
+						<?php else : ?>
+							<?php esc_html_e( 'Set as default prompt', 'classifai' ); ?>
+						<?php endif; ?>
+					</a>
+					<a href="#" class="action__remove_prompt" style="<?php echo 1 === $prompt_count ? 'display:none;' : ''; ?>">
+						<?php esc_html_e( 'Trash', 'classifai' ); ?>
+					</a>
+				</div>
+			</fieldset>
+			<?php ++$field_index; ?>
+		<?php endforeach; ?>
+
+		<button
+			class="button-secondary js-classifai-add-prompt-fieldset">
+			<?php esc_html_e( 'Add new prompt', 'classifai' ); ?>
+		</button>
+
 		<?php
 		if ( ! empty( $args['description'] ) ) {
 			echo '<br /><span class="description classifai-input-description">' . wp_kses_post( $args['description'] ) . '</span>';

includes/Classifai/Services/LanguageProcessing.php

@@ -204,7 +204,7 @@ public function register_endpoints() {
 						'type'              => 'string',
 						'sanitize_callback' => 'sanitize_text_field',
 						'validate_callback' => 'rest_validate_request_arg',
-						'description'       => esc_html__( 'The type of resize operation. "grow" or "shrink".', 'classifai' ),
+						'description'       => esc_html__( 'The type of resize operation. "expand" or "condense".', 'classifai' ),
 					],
 				],
 			]

src/js/admin.js

@@ -1,4 +1,5 @@
 /* global ClassifAI */
+import { __ } from '@wordpress/i18n';
 import '../scss/admin.scss';
 import tippy from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
@@ -9,6 +10,7 @@ document.addEventListener( 'DOMContentLoaded', function () {
 	if ( ! template ) {
 		return;
 	}
+
 	const container = document.createElement( 'div' );
 	container.appendChild( document.importNode( template.content, true ) );
 
@@ -78,3 +80,225 @@ document.addEventListener( 'DOMContentLoaded', function () {
 		$passwordFieldTitle.innerText = ClassifAI.api_password;
 	} );
 } )();
+
+( () => {
+	// Attach event to add new prompt button.
+	const $addNewPromptFieldsetButton = document.querySelectorAll(
+		'button.js-classifai-add-prompt-fieldset'
+	);
+	if ( $addNewPromptFieldsetButton.length ) {
+		$addNewPromptFieldsetButton.forEach( ( button ) => {
+			button.addEventListener( 'click', ( e ) => {
+				e.preventDefault();
+
+				addNewFieldSet( e.target.previousElementSibling );
+			} );
+		} );
+	}
+
+	// Attach event to existing prompt fieldsets.
+	const $promptFieldsets = document.querySelectorAll(
+		'.classifai-field-type-prompt-setting'
+	);
+	if ( $promptFieldsets.length ) {
+		$promptFieldsets.forEach( ( $promptFieldset ) => {
+			attachEventPromptFieldset( $promptFieldset );
+		} );
+	}
+
+	// ------------------
+	// Helper function
+	// ------------------
+
+	/**
+	 * Reset all input fields in a fieldset.
+	 *
+	 * @since 2.4.0
+	 * @param {Element} $fieldset
+	 * @param {Element} $parentRow
+	 */
+	function resetInputFields( $fieldset, $parentRow ) {
+		const $allFieldsets = $parentRow.querySelectorAll( 'fieldset' );
+		const $lastFieldset = Array.from( $allFieldsets ).pop();
+		const highestFieldIndexOfFieldset = parseInt(
+			$lastFieldset.querySelector( 'input' ).name.match( /\d+/ ).pop()
+		);
+		const fields = $fieldset.querySelectorAll( 'input, textarea' );
+		const actionButtons = $fieldset.querySelectorAll(
+			'.actions-rows .action__set_default'
+		);
+
+		// Reset form fields.
+		fields.forEach( ( field ) => {
+			field.value = '';
+
+			// Add index to field name.
+			field.name = field.name.replace(
+				/(\d+)/g,
+				() => highestFieldIndexOfFieldset + 1
+			);
+		} );
+
+		// Reset action buttons.
+		actionButtons.forEach( ( button ) => {
+			button.classList.remove( 'selected' );
+			button.textContent = __( 'Set as default prompt', 'classifai' );
+		} );
+	}
+
+	/**
+	 * Attach event to fieldset.
+	 *
+	 * @since 2.4.0
+	 * @param {Element} $newPromptFieldset
+	 */
+	function attachEventPromptFieldset( $newPromptFieldset ) {
+		// Add event to remove prompt link
+		const $removePromptFieldsetLink = $newPromptFieldset.querySelector(
+			'a.action__remove_prompt'
+		);
+
+		$removePromptFieldsetLink.addEventListener( 'click', ( e ) => {
+			e.preventDefault();
+			displayPromptRemovalModal( e.target );
+		} );
+
+		// Add event to set as default link.
+		const $setAsDefaultLink = $newPromptFieldset.querySelector(
+			'a.action__set_default'
+		);
+
+		$setAsDefaultLink.addEventListener( 'click', ( e ) => {
+			e.preventDefault();
+
+			// If already selected, do nothing.
+			if ( e.target.classList.contains( 'selected' ) ) {
+				return;
+			}
+
+			// Remove selected class from all buttons.
+			const $settingRow = e.target.closest( 'tr' );
+			const $setAsDefaultLinks = $settingRow.querySelectorAll(
+				'.action__set_default'
+			);
+			$setAsDefaultLinks.forEach( ( link ) => {
+				// Update text.
+				if ( link.classList.contains( 'selected' ) ) {
+					link.textContent = __(
+						'Set as default prompt',
+						'classifai'
+					);
+				}
+
+				link.classList.remove( 'selected' );
+
+				link
+					.closest( 'fieldset' )
+					.querySelector( '.js-setting-field__default' ).value = '';
+			} );
+
+			// Set selected class.
+			e.target.classList.add( 'selected' );
+
+			e.target.textContent = __( 'Default Prompt', 'classifai' );
+
+			// Set default value.
+			$newPromptFieldset.querySelector(
+				'.js-setting-field__default'
+			).value = '1';
+		} );
+	}
+
+	/**
+	 * Handle prompt removal modal.
+	 *
+	 * @since 2.4.0
+	 * @param {Element} removePromptLink
+	 */
+	function displayPromptRemovalModal( removePromptLink ) {
+		jQuery( '#js-classifai--delete-prompt-modal' ).dialog( {
+			modal: true,
+			title: __( 'Remove Prompt', 'classifai' ),
+			width: 550,
+			buttons: [
+				{
+					text: __( 'Cancel', 'classifai' ),
+					class: 'button-secondary',
+					click() {
+						jQuery( this ).dialog( 'close' );
+					},
+				},
+				{
+					text: __( 'Remove', 'classifai' ),
+					class: 'button-primary',
+					click() {
+						const fieldset = removePromptLink.closest( 'fieldset' );
+						const fieldsetContainer = fieldset.parentElement;
+						const canResetPrompt =
+							fieldset.querySelector(
+								'.js-setting-field__default'
+							).value === '1';
+						const hasOnlySinglePrompt =
+							2 ===
+							fieldsetContainer.querySelectorAll( 'fieldset' )
+								.length;
+
+						fieldset.remove();
+
+						// Set first prompt in list as default.
+						if ( canResetPrompt ) {
+							const setAsDefaultButton =
+								fieldsetContainer.querySelector(
+									'fieldset .action__set_default'
+								);
+
+							setAsDefaultButton.click();
+						}
+
+						// Hide remove button if only single fieldset is left.
+						if ( hasOnlySinglePrompt ) {
+							fieldsetContainer.querySelector(
+								'.action__remove_prompt'
+							).style.display = 'none';
+						}
+
+						jQuery( this ).dialog( 'close' );
+					},
+					style: 'margin-left: 10px;',
+				},
+			],
+		} );
+	}
+
+	/**
+	 * Add a new fieldset.
+	 *
+	 * @since 2.4.0
+	 * @param {Element} $sibling
+	 *
+	 * @return {Element} $newPromptFieldset
+	 */
+	function addNewFieldSet( $sibling ) {
+		const $promptFieldsetTemplate = $sibling.parentElement.querySelector(
+			'.classifai-field-type-prompt-setting'
+		);
+
+		// Show remove button if fieldset is single.
+		if (
+			1 === $sibling.parentElement.querySelectorAll( 'fieldset' ).length
+		) {
+			$sibling.parentElement.querySelector(
+				'.action__remove_prompt'
+			).style.display = 'block';
+		}
+
+		const $newPromptFieldset = $promptFieldsetTemplate.cloneNode( true );
+
+		resetInputFields( $newPromptFieldset, $sibling.closest( 'tr' ) );
+		attachEventPromptFieldset( $newPromptFieldset );
+
+		$sibling.insertAdjacentElement( 'afterend', $newPromptFieldset );
+
+		return $newPromptFieldset;
+	}
+} )();