Implement translate function

includes/api/class-callbacks.php

@@ -89,6 +89,23 @@ public static function generate_text( \WP_REST_Request $request ): \WP_REST_Resp
 		return new \WP_REST_Response( $result, 200 );
 	}
 
+	/**
+	 * Translate text content through Open AI
+	 *
+	 * @param \WP_REST_Request $request Request object
+	 * @return \WP_REST_Response|\WP_Error Response object
+	 * @throws \Exception If user does not have sufficient permissions.
+	 */
+	public static function translate_text( \WP_REST_Request $request ): \WP_REST_Response|\WP_Error {
+		try {
+			$result = Utils::translate_open_ai_text_content( $request );
+		} catch ( \Exception $e ) {
+			return new \WP_Error( 'error_' . $e->getCode(), $e->getMessage() );
+		}
+
+		return new \WP_REST_Response( $result, 200 );
+	}
+
 	/**
 	 * Generate content through Open AI
 	 *

includes/api/class-routes.php

@@ -126,6 +126,21 @@ public function register_endpoints(): void {
 			)
 		);
 
+		/**
+		 * Route for translating text content
+		 *
+		 * @method POST
+		 */
+		register_rest_route(
+			$this->name . '/v' . $this->version,
+			'/text/translate',
+			array(
+				'methods'             => \WP_REST_Server::EDITABLE, // Alias for GET transport method.
+				'callback'            => array( Callbacks::class, 'translate_text' ),
+				'permission_callback' => Permissions::ADMIN->get_callback(),
+			)
+		);
+
 		/**
 		 * Route for generating image content
 		 *

includes/api/class-utils.php

@@ -214,6 +214,81 @@ public static function get_open_ai_text_content( \WP_REST_Request $request ): ar
 		}
 	}
 
+	/**
+	 * Get translation prompt
+	 *
+	 * @since 0.3.0
+	 * @access private
+	 * @param string $languageFrom The language to translate from.
+	 * @param string $languageTo   The language to translate to.
+	 * @return string
+	 */
+	private static function get_translation_prompt( string $languageFrom, string $languageTo ): string {
+		$prompt  = 'You are a helpful assistant that returns text in markdown format.';
+		$prompt .= ' ';
+		$prompt .= 'You will be provided with a text in ' . $languageFrom . ', and your task is to translate it into ' . $languageTo . '.';
+		$prompt .= ' ';
+
+		if ( 'emoji' === $languageTo ) {
+			$prompt .= 'Do not use any regular text. Do your best with emojis only. Return only the result.';
+		} else {
+			$prompt .= 'Return only the result.';
+		}
+
+		return $prompt;
+	}
+
+	/**
+	 * Translate content from Open AI
+	 *
+	 * @since 0.3.0
+	 * @access public
+	 * @param \WP_REST_Request $request Request object.
+	 * @return Object
+	 * @throws \Exception If failed to update contact information.
+	 */
+	public static function translate_open_ai_text_content( \WP_REST_Request $request ): array {
+		$body         = json_decode( $request->get_body(), true );
+		$api          = self::get_chatgpt_settings();
+		$languageFrom = $body['languageFrom'] ?? '';
+		$languageTo   = $body['languageTo'] ?? '';
+		$data         = array(
+			'model'    => $api['model_text'] ?? 'gpt-4o-mini',
+			'messages' => array(
+				(object) array(
+					'role'    => 'system',
+					'content' => self::get_translation_prompt( $languageFrom, $languageTo ),
+				),
+				(object) array(
+					'role'    => 'user',
+					'content' => $body['text'],
+				),
+			),
+		);
+
+		$response = wp_remote_post(
+			'https://api.openai.com/v1/chat/completions',
+			array(
+				'method'    => 'POST',
+				'body'      => wp_json_encode( $data ),
+				'headers'   => array(
+					'Content-Type'  => 'application/json',
+					'Authorization' => 'Bearer ' . $api['api_key'],
+				),
+				'sslverify' => false,
+				'timeout'   => 60,
+			),
+		);
+
+		if ( ! is_wp_error( $response ) ) {
+			$body = json_decode( wp_remote_retrieve_body( $response ), true );
+			return $body;
+		} else {
+			$error_message = $response->get_error_message();
+			throw new \Exception( esc_html( $error_message ) );
+		}
+	}
+
 	/**
 	 * Get content from Open AI
 	 *

src/constants/api.ts

@@ -2,6 +2,7 @@ export const API_PATH = {
 	GET_SETTINGS: 'gutenberg-native-ai/v1/settings',
 	SET_SETTINGS: 'gutenberg-native-ai/v1/settings',
 	GENERATE_TEXT: 'gutenberg-native-ai/v1/text/generate',
+	TRANSLATE_TEXT: 'gutenberg-native-ai/v1/text/translate',
 	GENERATE_IMAGE: 'gutenberg-native-ai/v1/image/generate',
 	SAVE_IMAGE: 'gutenberg-native-ai/v1/image/save',
 };

src/constants/modal.ts

@@ -8,6 +8,7 @@ export const MODAL_STATUS = {
 export const MODAL_MODE = {
 	TEXT: 'text',
 	IMAGE: 'image',
+	TRANSLATE: 'translate',
 };
 
 export const ALLOWED_TEXT_BLOCKS = [

src/constants/options.ts

@@ -61,3 +61,25 @@ export const TONE_OF_VOICE = [
 		label: __('Authoritative and Expert', 'gutenberg-native-ai'),
 	},
 ];
+
+export const AVAILABLE_LANGUAGES = [
+	{ value: 'chinese', label: __('Chinese', 'gutenberg-native-ai') },
+	{ value: 'dutch', label: __('Dutch', 'gutenberg-native-ai') },
+	{ value: 'english', label: __('English', 'gutenberg-native-ai') },
+	{ value: 'finnish', label: __('Finnish', 'gutenberg-native-ai') },
+	{ value: 'french', label: __('French', 'gutenberg-native-ai') },
+	{ value: 'german', label: __('German', 'gutenberg-native-ai') },
+	{ value: 'italian', label: __('Italian', 'gutenberg-native-ai') },
+	{ value: 'japanese', label: __('Japanese', 'gutenberg-native-ai') },
+	{ value: 'korean', label: __('Korean', 'gutenberg-native-ai') },
+	{ value: 'norwegian', label: __('Norwegian', 'gutenberg-native-ai') },
+	{ value: 'polish', label: __('Polish', 'gutenberg-native-ai') },
+	{ value: 'portugese', label: __('Portuguese', 'gutenberg-native-ai') },
+	{ value: 'romanian', label: __('Romanian', 'gutenberg-native-ai') },
+	{ value: 'russian', label: __('Russian', 'gutenberg-native-ai') },
+	{ value: 'spanish', label: __('Spanish', 'gutenberg-native-ai') },
+	{ value: 'swedish', label: __('Swedish', 'gutenberg-native-ai') },
+	{ value: 'turkish', label: __('Turkish', 'gutenberg-native-ai') },
+	{ value: 'vietnamese', label: __('Vietnamese', 'gutenberg-native-ai') },
+	{ value: 'emoji', label: __('Emoji', 'gutenberg-native-ai') },
+];

src/constants/stores.ts

@@ -9,6 +9,8 @@ export const ACTIONS = {
 	SET_SELECTION: 'SET_SELECTION',
 	GET_MODE: 'GET_MODE',
 	SET_MODE: 'SET_MODE',
+	GET_TRANSLATION_LANGUAGES: 'GET_TRANSLATION_LANGUAGES',
+	SET_TRANSLATION_LANGUAGES: 'SET_TRANSLATION_LANGUAGES',
 	GET_SETTINGS: 'GET_SETTINGS',
 	SET_SETTINGS: 'SET_SETTINGS',
 	SET_STATUS: 'SET_STATUS',

src/features/ai-modal/features/modal/components/form/FormSubmitButton.tsx

@@ -7,22 +7,50 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { MODAL_STATUS } from '@constants/modal';
-import type { ModalStatus } from 'types/modal';
+import type { ModalMode, ModalStatus } from 'types/modal';
 
 import styles from '../../index.module.css';
 
+/**
+ * Get button text
+ * @param {string} mode - Modal mode
+ * @return {string} Button text
+ */
+const getButtonText = (mode: ModalMode): string => {
+	switch (mode) {
+		case 'text':
+			return __('Generate', 'gutenberg-native-ai');
+		case 'image':
+			return __('Generate', 'gutenberg-native-ai');
+		case 'translate':
+			return __('Translate', 'gutenberg-native-ai');
+		default:
+			return __('Generate', 'gutenberg-native-ai');
+	}
+};
+
 /**
  * SubmitButton component
  * @param {Object} props - Component props
  * @param {string} props.status - Popover status
+ * @param {string} props.mode - Popover mode
+ * @param {boolean} props.disabled - Button disabled state
  * @return {JSX.Element} SubmitButton component
  */
-const FormSubmitButton = ({ status }: { status: ModalStatus }): JSX.Element => {
+const FormSubmitButton = ({
+	status,
+	mode,
+	disabled = false,
+}: {
+	status: ModalStatus;
+	mode: ModalMode;
+	disabled?: boolean;
+}): JSX.Element => {
 	return (
 		<button
 			type="submit"
 			className={styles.formButtonSubmit}
-			disabled={status === MODAL_STATUS.LOADING}
+			disabled={status === MODAL_STATUS.LOADING || disabled}
 		>
 			{status === MODAL_STATUS.LOADING ? (
 				<svg xmlns="http://www.w3.org/2000/svg" width={24} height={24}>
@@ -40,7 +68,7 @@ const FormSubmitButton = ({ status }: { status: ModalStatus }): JSX.Element => {
 					/>
 				</svg>
 			) : (
-				__('Generate', 'gutenberg-native-ai')
+				getButtonText(mode)
 			)}
 		</button>
 	);

src/features/ai-modal/features/modal/components/modal-image/ModalControlsImage.tsx

@@ -21,7 +21,12 @@ import ImagePreview from './ImagePreview';
 import { MODAL_STATUS } from '@constants/modal';
 import { DATA_STORE } from '@constants/stores';
 
-import type { ModalSettings, ModalStatus } from 'types/modal';
+import type {
+	ModalSettings,
+	ModalStatus,
+	ModalMode,
+	ModalSelection,
+} from 'types/modal';
 
 import styles from '../../index.module.css';
 
@@ -31,10 +36,12 @@ import styles from '../../index.module.css';
  */
 const ModalImage = (): JSX.Element | null => {
 	const [preview, setPreview] = useState<ChatGPTImage[] | null>(null);
-	const { status, settings } = useSelect((select: WPAny) => {
+	const { status, settings, mode } = useSelect((select: WPAny) => {
 		return {
 			status: select(DATA_STORE).getStatus() as ModalStatus,
 			settings: select(DATA_STORE).getSettings() as ModalSettings,
+			selection: select(DATA_STORE).getSelection() as ModalSelection,
+			mode: select(DATA_STORE).getMode() as ModalMode,
 		};
 	}, []);
 
@@ -94,9 +101,11 @@ const ModalImage = (): JSX.Element | null => {
 						'gutenberg-native-ai'
 					)}
 				/>
-				<FormSubmitButton status={status} />
-				<CloseButton closeCallback={handleCLose} />
-				<Settings />
+				<div className={styles.controlContainerButtons}>
+					<FormSubmitButton status={status} mode={mode} />
+					<CloseButton closeCallback={handleCLose} />
+					<Settings />
+				</div>
 			</div>
 			<ImagePreview preview={preview} />
 			<WarningText />

src/features/ai-modal/features/modal/components/modal-text/ModalControlsText.tsx

@@ -18,14 +18,20 @@ import Settings from '../../../settings';
 
 import {
 	addBlocksToEditor,
+	closeModal,
 	parseMarkdownToBlocks,
 	replateSelectedText,
 } from '../../../../utils';
 
 import { MODAL_STATUS } from '@constants/modal';
 import { DATA_STORE } from '@constants/stores';
 
-import type { ModalStatus, ModalSelection, ModalSettings } from 'types/modal';
+import type {
+	ModalStatus,
+	ModalSelection,
+	ModalSettings,
+	ModalMode,
+} from 'types/modal';
 
 import styles from '../../index.module.css';
 
@@ -34,27 +40,18 @@ import styles from '../../index.module.css';
  * @return {JSX.Element} Popover component
  */
 const ModalControlsText = (): JSX.Element | null => {
-	const { status, selection, settings } = useSelect((select: WPAny) => {
+	const { status, selection, settings, mode } = useSelect((select: WPAny) => {
 		return {
 			status: select(DATA_STORE).getStatus() as ModalStatus,
 			selection: select(DATA_STORE).getSelection() as ModalSelection,
 			settings: select(DATA_STORE).getSettings() as ModalSettings,
+			mode: select(DATA_STORE).getMode() as ModalMode,
 		};
 	}, []);
 
-	const { setStatus, setSelection } = useDispatch(DATA_STORE);
+	const { setStatus } = useDispatch(DATA_STORE);
 	const { getText } = useChatGPT();
 
-	const handleCLose = () => {
-		setStatus(MODAL_STATUS.INITIAL);
-		setSelection({
-			block: null,
-			text: '',
-			start: 0,
-			end: 0,
-		});
-	};
-
 	/**
 	 * Handle generate content
 	 * @param event - Form event
@@ -109,7 +106,7 @@ const ModalControlsText = (): JSX.Element | null => {
 			}
 		}
 
-		handleCLose();
+		closeModal();
 	};
 
 	return (
@@ -121,9 +118,11 @@ const ModalControlsText = (): JSX.Element | null => {
 						'gutenberg-native-ai'
 					)}
 				/>
-				<FormSubmitButton status={status} />
-				<CloseButton closeCallback={handleCLose} />
-				<Settings />
+				<div className={styles.controlContainerButtons}>
+					<FormSubmitButton status={status} mode={mode} />
+					<CloseButton closeCallback={closeModal} />
+					<Settings />
+				</div>
 			</div>
 			<WarningText />
 		</Form>