Implement tone of voice options to the plugin

includes/api/class-utils.php

@@ -37,17 +37,19 @@ public static function get_chatgpt_settings(): array {
 		$settings = get_option(
 			'gutenberg_native_ai',
 			array(
-				'model'   => 'gpt-4o-mini',
-				'api_key' => '',
+				'model'         => 'gpt-4o-mini',
+				'api_key'       => '',
+				'tone_of_voice' => 'none',
 			)
 		);
 
 		$encryptor         = new Encryption();
 		$decrypted_api_key = $encryptor->decrypt( $settings['api_key'] );
 
 		return array(
-			'model'   => $settings['model'],
-			'api_key' => $decrypted_api_key,
+			'model'         => $settings['model'],
+			'api_key'       => $decrypted_api_key,
+			'tone_of_voice' => $settings['tone_of_voice'],
 		);
 	}
 
@@ -69,14 +71,15 @@ public static function update_chatgpt_settings( \WP_REST_Request $request ): arr
 			return $current;
 		}
 
-		$encryptor         = new \Kotisivu\Gutenberg_Native_AI\Data_Encryption();
+		$encryptor         = new Encryption();
 		$encrypted_api_key = $encryptor->encrypt( $body['api_key'] ?? $current['api_key'] ?? '' );
 
 		$update = update_option(
 			'gutenberg_native_ai',
 			array(
-				'model'   => $body['model'] ?? $current['model'] ?? 'gpt-4o-mini',
-				'api_key' => $encrypted_api_key,
+				'model'         => $body['model'] ?? $current['model'] ?? 'gpt-4o-mini',
+				'api_key'       => $encrypted_api_key,
+				'tone_of_voice' => $body['tone_of_voice'] ?? $current['tone_of_voice'] ?? 'none',
 			),
 			true
 		);
@@ -86,11 +89,77 @@ public static function update_chatgpt_settings( \WP_REST_Request $request ): arr
 		}
 
 		return array(
-			'model'   => $body['model'] ?? $current['model'] ?? 'gpt-4o-mini',
-			'api_key' => $body['api_key'] ?? $current['api_key'] ?? '',
+			'model'         => $body['model'] ?? $current['model'] ?? 'gpt-4o-mini',
+			'api_key'       => $body['api_key'] ?? $current['api_key'] ?? '',
+			'tone_of_voice' => $body['tone_of_voice'] ?? $current['tone_of_voice'] ?? 'none',
 		);
 	}
 
+	/**
+	 * Get system instructions for text prompts
+	 *
+	 * @since 0.1.3
+	 * @access private
+	 * @param string $tone_of_voice The tone of voice.
+	 * @return string
+	 */
+	private static function get_system_instructions_for_text_prompts( string $tone_of_voice ): string {
+		/**
+		 * Set base instructions for AI text prompts
+		 * To get the result that can be converted to Gutenberg blocks, we must use markdown format and return only the result.
+		 * Otherwise, the AI might return additional content like the prompt itself or other unnecessary information.
+		 */
+		$base_instructions = 'You are a helpful assistant that returns text in markdown format. Return only the result.';
+
+		/**
+		 * Set tone of voice instructions
+		 * If the tone of voice is not set, return the base instructions.
+		 * Otherwise, add the tone of voice to the base instructions.
+		 */
+		switch ( $tone_of_voice ) {
+			case 'none':
+				return $base_instructions;
+
+			case 'friendly-professional':
+				return $base_instructions . ' You are expected to use a friendly and professional tone of voice.';
+
+			case 'authoritative-informative':
+				return $base_instructions . ' You are expected to use an authoritative and informative tone of voice.';
+
+			case 'urgent-persuasive':
+				return $base_instructions . ' You are expected to use an urgent and persuasive tone of voice.';
+
+			case 'casual-conversational':
+				return $base_instructions . ' You are expected to use a casual and conversational tone of voice.';
+
+			case 'professional-trustworthy':
+				return $base_instructions . ' You are expected to use a professional and trustworthy tone of voice.';
+
+			case 'humorous-informal':
+				return $base_instructions . ' You are expected to use a humorous and informal tone of voice.';
+
+			case 'professional-straightforward':
+				return $base_instructions . ' You are expected to use a professional and straightforward tone of voice.';
+
+			case 'serious-empathetic':
+				return $base_instructions . ' You are expected to use a serious and empathetic tone of voice.';
+
+			case 'positive-enthusiastic':
+				return $base_instructions . ' You are expected to use a positive and enthusiastic tone of voice.';
+
+			case 'authoritative-professional':
+				return $base_instructions . ' You are expected to use an authoritative and professional tone of voice.';
+
+			case 'casual-funny':
+				return $base_instructions . ' You are expected to use a casual and funny tone of voice.';
+
+			case 'authoritative-expert':
+				return $base_instructions . ' You are expected to use an authoritative and expert tone of voice.';
+			default:
+				return $base_instructions;
+		}
+	}
+
 	/**
 	 * Get content from Open AI
 	 *
@@ -101,14 +170,15 @@ public static function update_chatgpt_settings( \WP_REST_Request $request ): arr
 	 * @throws \Exception If failed to update contact information.
 	 */
 	public static function get_open_ai_text_content( \WP_REST_Request $request ): array {
-		$body = json_decode( $request->get_body(), true );
-		$api  = self::get_chatgpt_settings();
-		$data = array(
+		$body          = json_decode( $request->get_body(), true );
+		$api           = self::get_chatgpt_settings();
+		$tone_of_voice = $body['tone_of_voice'] ?? 'none';
+		$data          = array(
 			'model'    => $api['model'] ?? 'gpt-4o-mini',
 			'messages' => array(
 				(object) array(
 					'role'    => 'system',
-					'content' => 'You are a helpful assistant that returns text in markdown format. Return only the result.',
+					'content' => self::get_system_instructions_for_text_prompts( $tone_of_voice ),
 				),
 				(object) array(
 					'role'    => 'user',

src/constants/actions.ts

@@ -5,6 +5,8 @@ export const ACTIONS = {
 	SET_IMAGE: 'SET_IMAGE',
 	GET_SELECTION: 'GET_SELECTION',
 	SET_SELECTION: 'SET_SELECTION',
+	GET_MODE: 'GET_MODE',
+	SET_MODE: 'SET_MODE',
 	GET_SETTINGS: 'GET_SETTINGS',
 	SET_SETTINGS: 'SET_SETTINGS',
 	SET_STATUS: 'SET_STATUS',

src/constants/modal.ts

@@ -5,6 +5,11 @@ export const MODAL_STATUS = {
 	ERROR: 'error',
 };
 
+export const MODAL_MODE = {
+	TEXT: 'text',
+	IMAGE: 'image',
+};
+
 export const ALLOWED_TEXT_BLOCKS = [
 	'core/paragraph',
 	'core/heading',

src/constants/options.ts

@@ -0,0 +1,53 @@
+import { __ } from '@wordpress/i18n';
+
+export const TONE_OF_VOICE = [
+	{ value: 'none', label: __('None', 'gutenberg-native-ai') },
+	{
+		value: 'friendly-professional',
+		label: __('Friendly and Professional', 'gutenberg-native-ai'),
+	},
+	{
+		value: 'authoritative-informative',
+		label: __('Authoritative and Informative', 'gutenberg-native-ai'),
+	},
+	{
+		value: 'urgent-persuasive',
+		label: __('Urgent and Persuasive', 'gutenberg-native-ai'),
+	},
+	{
+		value: 'casual-conversational',
+		label: __('Casual and Conversational', 'gutenberg-native-ai'),
+	},
+	{
+		value: 'professional-trustworthy',
+		label: __('Professional and Trustworthy', 'gutenberg-native-ai'),
+	},
+	{
+		value: 'humorous-informal',
+		label: __('Humorous and Informal', 'gutenberg-native-ai'),
+	},
+	{
+		value: 'professional-straightforward',
+		label: __('Professional and Straightforward', 'gutenberg-native-ai'),
+	},
+	{
+		value: 'serious-empathetic',
+		label: __('Serious and Empathetic', 'gutenberg-native-ai'),
+	},
+	{
+		value: 'positive-enthusiastic',
+		label: __('Positive and Enthusiastic', 'gutenberg-native-ai'),
+	},
+	{
+		value: 'authoritative-professional',
+		label: __('Authoritative and Professional', 'gutenberg-native-ai'),
+	},
+	{
+		value: 'casual-funny',
+		label: __('Casual and Funny', 'gutenberg-native-ai'),
+	},
+	{
+		value: 'authoritative-expert',
+		label: __('Authoritative and Expert', 'gutenberg-native-ai'),
+	},
+];

src/features/admin/components/inputs/index.ts

@@ -1,2 +1,3 @@
 export * from './lib/Input';
 export * from './lib/Toggle';
+export * from './lib/Select';

src/features/admin/components/inputs/lib/Input.tsx

@@ -3,22 +3,10 @@
  */
 import styles from './Input.module.css';
 
-type InputType = 'text' | 'textarea' | 'number' | 'email';
-
-type InputProps = {
-	type: InputType;
-	label: string;
-	name: string;
-	value: string | number | readonly string[] | undefined;
-	placeholder?: string;
-	onChange?: React.ChangeEventHandler<HTMLInputElement>;
-	disabled?: boolean;
-};
-
 /**
  * Component for number input
  * @param {Object} props - Component props
- * @param {InputType} props.type - Type of the input
+ * @param {FormInputType} props.type - Type of the input
  * @param {string} props.label - Label for the input
  * @param {string} props.name - Name for the input
  * @param {string} props.value - Value for the input
@@ -35,7 +23,7 @@ const Input = ({
 	placeholder = '',
 	onChange = () => {},
 	disabled = false,
-}: InputProps): JSX.Element => {
+}: FormInputProps): JSX.Element => {
 	return (
 		<div className={styles.input}>
 			<label htmlFor={name}>{label}</label>

src/features/admin/components/inputs/lib/Select.module.css

@@ -0,0 +1,10 @@
+.select {
+	display: grid;
+	grid-template-columns: 5rem 1fr;
+	align-items: center;
+	gap: 1rem;
+}
+
+.select > label {
+	line-height: 1.1;
+}

src/features/admin/components/inputs/lib/Select.tsx

@@ -0,0 +1,42 @@
+/**
+ * Internal dependencies
+ */
+import styles from './Select.module.css';
+
+/**
+ * Select Component
+ * @param {Object} props - Component props
+ * @param {string} props.label - Label for the select
+ * @param {string} props.name - Name of the select
+ * @param {string} props.value - Value of the select
+ * @param {Array} props.options - Options for the select
+ * @param {Function} props.onChange - Change handler for the select
+ * @return {JSX.Element} Toggle component
+ */
+const Select = ({
+	label,
+	name,
+	value,
+	options,
+	onChange,
+}: FormSelectProps): JSX.Element => {
+	return (
+		<div className={styles.select}>
+			<label htmlFor={name}>{label}</label>
+			<select
+				id={name}
+				name={name}
+				value={value || undefined}
+				onChange={onChange}
+			>
+				{options.map((option) => (
+					<option key={option.value} value={option.value}>
+						{option.label}
+					</option>
+				))}
+			</select>
+		</div>
+	);
+};
+
+export { Select };

src/features/admin/components/inputs/lib/Toggle.tsx

@@ -3,14 +3,6 @@
  */
 import styles from './Toggle.module.css';
 
-type ToggleProps = {
-	label: string;
-	name: string;
-	checked: boolean;
-	onChange: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
-	hideLabel?: boolean;
-};
-
 /**
  * Toggle Component
  * @param {Object} props - Component props
@@ -27,7 +19,7 @@ const Toggle = ({
 	checked,
 	onChange,
 	hideLabel = false,
-}: ToggleProps): JSX.Element => {
+}: FormToggleProps): JSX.Element => {
 	return (
 		<div className={styles.toggle}>
 			<label htmlFor={name}>