From 09ccb19a66042a424fda325fee6bb4eaad251e16 Mon Sep 17 00:00:00 2001
From: Siddharth Thevaril <siddharth.thevaril@gmail.com>
Date: Fri, 23 Jun 2023 00:35:10 +0530
Subject: [PATCH 1/7] add title generation popup for classic editor

---
 .../Classifai/Providers/OpenAI/ChatGPT.php    |  71 +++++++++--
 .../openai/classic-editor-title-generator.js  |  86 ++++++++++++++
 src/scss/admin.scss                           |   2 +
 .../classic-editor-title-generator.scss       | 112 ++++++++++++++++++
 webpack.config.js                             |   1 +
 5 files changed, 259 insertions(+), 13 deletions(-)
 create mode 100644 src/js/openai/classic-editor-title-generator.js
 create mode 100644 src/scss/openai/classic-editor-title-generator.scss

diff --git a/includes/Classifai/Providers/OpenAI/ChatGPT.php b/includes/Classifai/Providers/OpenAI/ChatGPT.php
index 835ab4f4d..9db544398 100644
--- a/includes/Classifai/Providers/OpenAI/ChatGPT.php
+++ b/includes/Classifai/Providers/OpenAI/ChatGPT.php
@@ -69,6 +69,26 @@ public function __construct( $service ) {
 	public function register() {
 		add_action( 'enqueue_block_editor_assets', [ $this, 'enqueue_editor_assets' ] );
 		add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_admin_assets' ] );
+		add_action( 'edit_form_before_permalink', [ $this, 'regster_generated_titles_template' ] );
+	}
+
+	/**
+	 * Returns localised data for title generation.
+	 */
+	public function get_localised_vars() {
+		global $post;
+
+		return [
+			'enabledFeatures' => [
+				0 => [
+					'feature'    => 'title',
+					'path'       => '/classifai/v1/openai/generate-title/',
+					'buttonText' => __( 'Generate titles', 'classifai' ),
+					'modalTitle' => __( 'Select a title', 'classifai' ),
+				],
+			],
+			'noPermissions'   => ! is_user_logged_in() || ! current_user_can( 'edit_post', $post->ID ),
+		];
 	}
 
 	/**
@@ -117,19 +137,7 @@ public function enqueue_editor_assets() {
 				'classifai-post-status-info',
 				sprintf(
 					'var classifaiChatGPTData = %s;',
-					wp_json_encode(
-						[
-							'enabledFeatures' => [
-								0 => [
-									'feature'    => 'title',
-									'path'       => '/classifai/v1/openai/generate-title/',
-									'buttonText' => __( 'Generate titles', 'classifai' ),
-									'modalTitle' => __( 'Select a title', 'classifai' ),
-								],
-							],
-							'noPermissions'   => ! is_user_logged_in() || ! current_user_can( 'edit_post', $post->ID ),
-						]
-					)
+					wp_json_encode( $this->get_localised_vars() )
 				),
 				'before'
 			);
@@ -146,6 +154,27 @@ public function enqueue_admin_assets( $hook_suffix = '' ) {
 			return;
 		}
 
+		$screen = get_current_screen();
+
+		if ( $screen && ! $screen->is_block_editor() ) {
+			wp_enqueue_script(
+				'classifai-generate-title-classic-js',
+				CLASSIFAI_PLUGIN_URL . 'dist/generate-title-classic.js',
+				array_merge( get_asset_info( 'generate-title-classic', 'dependencies' ), array( 'wp-api' ) ),
+				get_asset_info( 'generate-title-classic', 'version' ),
+				true
+			);
+
+			wp_add_inline_script(
+				'classifai-generate-title-classic-js',
+				sprintf(
+					'var classifaiChatGPTData = %s;',
+					wp_json_encode( $this->get_localised_vars() )
+				),
+				'before'
+			);
+		}
+
 		wp_enqueue_style(
 			'classifai-language-processing-style',
 			CLASSIFAI_PLUGIN_URL . 'dist/language-processing.css',
@@ -155,6 +184,22 @@ public function enqueue_admin_assets( $hook_suffix = '' ) {
 		);
 	}
 
+	/**
+	 * HTML template for title generation result popup.
+	 */
+	public function regster_generated_titles_template() {
+		?>
+		<div id="classifai-openai__results" style="display: none;">
+			<div id="classifai-openai__overlay" style="opacity: 0;"></div>
+			<div id="classifai-openai__modal" style="opacity: 0;">
+				<h2 id="classifai-openai__results-title"></h2>
+				<div id="classifai-openai__results-content">
+				</div>
+			</div>
+		</div>
+		<?php
+	}
+
 	/**
 	 * Setup fields
 	 */
diff --git a/src/js/openai/classic-editor-title-generator.js b/src/js/openai/classic-editor-title-generator.js
new file mode 100644
index 000000000..783cf0988
--- /dev/null
+++ b/src/js/openai/classic-editor-title-generator.js
@@ -0,0 +1,86 @@
+import apiFetch from '@wordpress/api-fetch';
+
+const classifaiChatGPTData = window.classifaiChatGPTData || {};
+let scriptData = classifaiChatGPTData.enabledFeatures.reduce( ( acc, cur ) => ( { [ cur.feature ] : cur } ), {} );
+
+console.log(scriptData)
+
+( function( $ ) {
+	$( document ).ready( () => {
+		if ( scriptData?.title ) {
+			generateTitleInit();
+		}
+	} );
+
+	function generateTitleInit() {
+		// Adds button to the UI.
+		// $( '<a>', {
+		// 	href: '#',
+		// 	id: 'classifai-openai__title-generate-btn',
+		// 	text: scriptData?.title?.buttonText ?? '',
+		// 	class: 'button',
+		// } ).appendTo( '#titlewrap' );
+
+		$( '<span />', {
+			text: scriptData?.title?.buttonText ?? '',
+			'class': 'classifai-openai__title-generate-btn--text',
+		} )
+		.wrap( '<div class="button" id="classifai-openai__title-generate-btn" />' )
+		.parent()
+		.append( $( '<span />', {
+			'class': 'classifai-openai__title-generate-btn--spinner',
+		} ) )
+		.appendTo( '#titlewrap' )
+	
+		const postId = $( '#post_ID' ).val();
+
+		const hidePopup = () => {
+			$( '#classifai-openai__results' ).removeClass( 'classifai-openai--fade-in' ).delay(300).fadeOut(0);
+		}
+
+		const generateTitle = ( e ) => {
+			e.preventDefault();
+
+			$( '#classifai-openai__results-content' ).html( '' );
+			const generateTextEl = $( '.classifai-openai__title-generate-btn--text' );
+			const spinnerEl = $( '.classifai-openai__title-generate-btn--spinner' );
+
+			generateTextEl.css( 'opacity', '0' );
+			spinnerEl.show();
+
+			const path = scriptData.title?.path + postId;
+
+			apiFetch( {
+				path,
+			} )
+			.then( ( result ) => {
+				generateTextEl.css( 'opacity', '1' );
+				spinnerEl.hide();
+
+				result.forEach( ( title ) => {
+					$( '<textarea>', {
+						text: title
+					} )
+					.wrap( '<div class="classifai-openai__result-item" />' )
+					.parent()
+					.append( $( '<button />', {
+						text: 'Select',
+						type: 'button',
+						'class': 'button classifai-openai__select-title',
+					} ) )
+					.appendTo( '#classifai-openai__results-content' );
+				} );
+
+				$( '#classifai-openai__results' ).show().addClass( 'classifai-openai--fade-in' );
+			} );
+		};
+
+		$( document ).on( 'click', '#classifai-openai__title-generate-btn', generateTitle );
+		$( document ).on( 'click', '#classifai-openai__overlay', hidePopup )
+
+		const resultWrapper = $( '#classifai-openai__results' );
+		resultWrapper
+			.find( '#classifai-openai__results-title' )
+			.text( scriptData.title.modalTitle );
+	}
+} ( jQuery ) );
diff --git a/src/scss/admin.scss b/src/scss/admin.scss
index 267232cac..900d2edfa 100644
--- a/src/scss/admin.scss
+++ b/src/scss/admin.scss
@@ -1,3 +1,5 @@
+@import './openai/classic-editor-title-generator.scss';
+
 :root{
 	--classifai-admin-theme-color:#007cba;
 	--classifai-admin-theme-color--rgb:0, 124, 186;
diff --git a/src/scss/openai/classic-editor-title-generator.scss b/src/scss/openai/classic-editor-title-generator.scss
new file mode 100644
index 000000000..d81b0190e
--- /dev/null
+++ b/src/scss/openai/classic-editor-title-generator.scss
@@ -0,0 +1,112 @@
+#titlewrap {
+	display: flex;
+
+	#classifai-openai__title-generate-btn {
+		position: relative;
+		margin-left: 0.5rem;
+		height: 2.348rem;
+		line-height: 2.348rem;
+
+		& > .classifai-openai__title-generate-btn--spinner {
+			display: none;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate( -50%, -50% );
+			line-height: 29px;
+		}
+	}
+}
+
+#classifai-openai {
+	&__overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: rgba(0,0,0,.35);
+		z-index: 99998;
+		transition: opacity 0.3s ease !important;
+	}
+
+	&__modal {
+		position: fixed;
+		top: 100px;
+		left: 50%;
+		transform: translate(-50%, 0);
+		z-index: 99999;
+		background: #fff;
+		width: 100%;
+		max-width: 900px;
+		border: 1px solid;
+		margin: 0 1rem;
+		transition: opacity 0.3s ease !important;
+		box-shadow: 0 0.7px 1px rgba(0,0,0,.15), 0 2.7px 3.8px -0.2px rgba(0,0,0,.15), 0 5.5px 7.8px -0.3px rgba(0,0,0,.15), 0.1px 11.5px 16.4px -0.5px rgba(0,0,0,.15);
+	}
+
+	&__results-title {
+		font-size: 1.5rem !important;
+		padding-top: 1.5rem !important;
+	}
+
+	&__results-content {
+		display: flex;
+		padding: 1rem;
+		padding-bottom: 1.5rem;
+		gap: 1rem;
+	}
+}
+
+.classifai-openai {
+	&__result-item {
+		flex-grow: 1;
+		flex-basis: 0;
+
+		textarea {
+			display: block;
+			width: 100%;
+			height: 80px;
+		}
+	}
+
+	&__select-title {
+		margin-top: 1rem !important;
+	}
+
+	&--fade-in {
+		#classifai-openai__overlay {
+			opacity: 1 !important;
+			transition: opacity 0.3s ease !important;
+		}
+
+		#classifai-openai__modal {
+			opacity: 1 !important;
+			transition: opacity 0.3s ease !important;
+		}
+	}
+
+	&__title-generate-btn--spinner {
+
+		&:before {
+			display: block;
+			animation: rotation 2s infinite linear;
+			content: "\f463";
+			font-family: dashicons;
+			font-size: 1.75rem;
+
+			width: 1.75rem;
+			height: 1.75rem;
+		}
+	}
+}
+
+@keyframes rotation {
+	from {
+		transform: rotate(0deg);
+	}
+
+	to {
+		transform: rotate(360deg);
+	}
+}
diff --git a/webpack.config.js b/webpack.config.js
index 04ab30874..60df03098 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -26,6 +26,7 @@ module.exports = {
 		],
 		'post-excerpt': [ './src/js/post-excerpt/index.js' ],
 		'media-modal': [ './src/js/media-modal/index.js' ],
+		'generate-title-classic': [ './src/js/openai/classic-editor-title-generator.js' ],
 	},
 	module: {
 		rules: [

From 3cc64a85ed73581d63bd59845ee8b9656021b357 Mon Sep 17 00:00:00 2001
From: Siddharth Thevaril <siddharth.thevaril@gmail.com>
Date: Fri, 23 Jun 2023 14:55:31 +0530
Subject: [PATCH 2/7] add doc and add close button to popup

---
 .../Classifai/Providers/OpenAI/ChatGPT.php    | 29 ++++++++--
 .../openai/classic-editor-title-generator.js  | 56 +++++++++++++------
 src/scss/admin.scss                           |  2 -
 .../classic-editor-title-generator.scss       | 25 ++++++++-
 4 files changed, 85 insertions(+), 27 deletions(-)

diff --git a/includes/Classifai/Providers/OpenAI/ChatGPT.php b/includes/Classifai/Providers/OpenAI/ChatGPT.php
index 9db544398..2cc260b10 100644
--- a/includes/Classifai/Providers/OpenAI/ChatGPT.php
+++ b/includes/Classifai/Providers/OpenAI/ChatGPT.php
@@ -81,10 +81,11 @@ public function get_localised_vars() {
 		return [
 			'enabledFeatures' => [
 				0 => [
-					'feature'    => 'title',
-					'path'       => '/classifai/v1/openai/generate-title/',
-					'buttonText' => __( 'Generate titles', 'classifai' ),
-					'modalTitle' => __( 'Select a title', 'classifai' ),
+					'feature'       => 'title',
+					'path'          => '/classifai/v1/openai/generate-title/',
+					'buttonText'    => __( 'Generate titles', 'classifai' ),
+					'modalTitle'    => __( 'Select a title', 'classifai' ),
+					'selectBtnText' => __( 'Select', 'classifai' ),
 				],
 			],
 			'noPermissions'   => ! is_user_logged_in() || ! current_user_can( 'edit_post', $post->ID ),
@@ -154,9 +155,24 @@ public function enqueue_admin_assets( $hook_suffix = '' ) {
 			return;
 		}
 
-		$screen = get_current_screen();
+		$screen        = get_current_screen();
+		$settings      = $this->get_settings();
+		$user_roles    = wp_get_current_user()->roles ?? [];
+		$title_roles = $settings['title_roles'] ?? [];
+
+		if (
+			$screen && ! $screen->is_block_editor()
+			&& ( ! empty( $title_roles ) && empty( array_diff( $user_roles, $title_roles ) ) )
+			&& ( isset( $settings['enable_titles'] ) && 1 === (int) $settings['enable_titles'] )
+		) {
+			wp_enqueue_style(
+				'classifai-generate-title-classic-css',
+				CLASSIFAI_PLUGIN_URL . 'dist/generate-title-classic.css',
+				[],
+				CLASSIFAI_PLUGIN_VERSION,
+				'all'
+			);
 
-		if ( $screen && ! $screen->is_block_editor() ) {
 			wp_enqueue_script(
 				'classifai-generate-title-classic-js',
 				CLASSIFAI_PLUGIN_URL . 'dist/generate-title-classic.js',
@@ -193,6 +209,7 @@ public function regster_generated_titles_template() {
 			<div id="classifai-openai__overlay" style="opacity: 0;"></div>
 			<div id="classifai-openai__modal" style="opacity: 0;">
 				<h2 id="classifai-openai__results-title"></h2>
+				<div id="classifai-openai__close-modal-button"></div>
 				<div id="classifai-openai__results-content">
 				</div>
 			</div>
diff --git a/src/js/openai/classic-editor-title-generator.js b/src/js/openai/classic-editor-title-generator.js
index 783cf0988..c2cfa89fb 100644
--- a/src/js/openai/classic-editor-title-generator.js
+++ b/src/js/openai/classic-editor-title-generator.js
@@ -1,10 +1,9 @@
 import apiFetch from '@wordpress/api-fetch';
+import '../../scss/openai/classic-editor-title-generator.scss';
 
 const classifaiChatGPTData = window.classifaiChatGPTData || {};
 let scriptData = classifaiChatGPTData.enabledFeatures.reduce( ( acc, cur ) => ( { [ cur.feature ] : cur } ), {} );
 
-console.log(scriptData)
-
 ( function( $ ) {
 	$( document ).ready( () => {
 		if ( scriptData?.title ) {
@@ -12,15 +11,15 @@ console.log(scriptData)
 		}
 	} );
 
+	/**
+	 * This function is solely responsibe for rendering, generating
+	 * and applying the generated title for the classic editor.
+	 */
 	function generateTitleInit() {
-		// Adds button to the UI.
-		// $( '<a>', {
-		// 	href: '#',
-		// 	id: 'classifai-openai__title-generate-btn',
-		// 	text: scriptData?.title?.buttonText ?? '',
-		// 	class: 'button',
-		// } ).appendTo( '#titlewrap' );
+		// Boolean indicating whether title generation is in progress.
+		let isProcessing = false;
 
+		// Creates and appens the "Generate titles" button.
 		$( '<span />', {
 			text: scriptData?.title?.buttonText ?? '',
 			'class': 'classifai-openai__title-generate-btn--text',
@@ -31,15 +30,29 @@ console.log(scriptData)
 			'class': 'classifai-openai__title-generate-btn--spinner',
 		} ) )
 		.appendTo( '#titlewrap' )
-	
+
+		// The current post ID.
 		const postId = $( '#post_ID' ).val();
 
+		// Callback to hide the popup.
 		const hidePopup = () => {
 			$( '#classifai-openai__results' ).removeClass( 'classifai-openai--fade-in' ).delay(300).fadeOut(0);
 		}
 
-		const generateTitle = ( e ) => {
-			e.preventDefault();
+		// Callback to apply the title from the result to the post title.
+		const applyTitle = ( e ) => {
+			const selectBtnEl = $( e.target );
+			const textarea = selectBtnEl.closest( '.classifai-openai__result-item' ).find( 'textarea' );
+
+			$( '#title' ).val( textarea.val() ).trigger( 'input' );
+			hidePopup();
+		}
+
+		// Callback to generate the title.
+		const generateTitle = () => {
+			if ( isProcessing ) {
+				return;
+			}
 
 			$( '#classifai-openai__results-content' ).html( '' );
 			const generateTextEl = $( '.classifai-openai__title-generate-btn--text' );
@@ -47,6 +60,7 @@ console.log(scriptData)
 
 			generateTextEl.css( 'opacity', '0' );
 			spinnerEl.show();
+			isProcessing = true;
 
 			const path = scriptData.title?.path + postId;
 
@@ -56,17 +70,19 @@ console.log(scriptData)
 			.then( ( result ) => {
 				generateTextEl.css( 'opacity', '1' );
 				spinnerEl.hide();
+				isProcessing = false;
 
-				result.forEach( ( title ) => {
+				result.forEach( ( title, index ) => {
 					$( '<textarea>', {
 						text: title
 					} )
-					.wrap( '<div class="classifai-openai__result-item" />' )
+					.wrap( `<div class="classifai-openai__result-item" data-result-item-index="${index}" />` )
 					.parent()
 					.append( $( '<button />', {
-						text: 'Select',
+						text: scriptData.title.selectBtnText,
 						type: 'button',
 						'class': 'button classifai-openai__select-title',
+						'data-result-title-index': index
 					} ) )
 					.appendTo( '#classifai-openai__results-content' );
 				} );
@@ -75,9 +91,17 @@ console.log(scriptData)
 			} );
 		};
 
+		// Event handler registration to generate the title.
 		$( document ).on( 'click', '#classifai-openai__title-generate-btn', generateTitle );
-		$( document ).on( 'click', '#classifai-openai__overlay', hidePopup )
 
+		// Event handler registration to hide the popup.
+		$( document ).on( 'click', '#classifai-openai__overlay', hidePopup );
+		$( document ).on( 'click', '#classifai-openai__close-modal-button', hidePopup );
+
+		// Event handler registration to apply the selected title to the post title.
+		$( document ).on( 'click', '.classifai-openai__select-title', applyTitle );
+
+		// Sets the modal title.
 		const resultWrapper = $( '#classifai-openai__results' );
 		resultWrapper
 			.find( '#classifai-openai__results-title' )
diff --git a/src/scss/admin.scss b/src/scss/admin.scss
index 900d2edfa..267232cac 100644
--- a/src/scss/admin.scss
+++ b/src/scss/admin.scss
@@ -1,5 +1,3 @@
-@import './openai/classic-editor-title-generator.scss';
-
 :root{
 	--classifai-admin-theme-color:#007cba;
 	--classifai-admin-theme-color--rgb:0, 124, 186;
diff --git a/src/scss/openai/classic-editor-title-generator.scss b/src/scss/openai/classic-editor-title-generator.scss
index d81b0190e..b5432a685 100644
--- a/src/scss/openai/classic-editor-title-generator.scss
+++ b/src/scss/openai/classic-editor-title-generator.scss
@@ -34,7 +34,7 @@
 		position: fixed;
 		top: 100px;
 		left: 50%;
-		transform: translate(-50%, 0);
+		transform: translate(-50%, -10%);
 		z-index: 99999;
 		background: #fff;
 		width: 100%;
@@ -56,6 +56,25 @@
 		padding-bottom: 1.5rem;
 		gap: 1rem;
 	}
+
+	&__close-modal-button {
+		position: fixed;
+		top: 0.5rem;
+		right: 0.5rem;
+		width: 40px;
+		height: 40px;
+		cursor: pointer;
+
+		&:before {
+			content: "\f335";
+			display: block;
+			font-family: dashicons;
+			font-size: 3rem;
+			top: 0.5rem;
+			right: 0;
+			position: relative;
+		}
+	}
 }
 
 .classifai-openai {
@@ -82,12 +101,12 @@
 
 		#classifai-openai__modal {
 			opacity: 1 !important;
-			transition: opacity 0.3s ease !important;
+			transform: translate(-50%, 0) !important;
+			transition: opacity 0.3s ease, transform 0.3s ease !important;
 		}
 	}
 
 	&__title-generate-btn--spinner {
-
 		&:before {
 			display: block;
 			animation: rotation 2s infinite linear;

From 9531b66bf75a41078b20c514f598c1dbe06a80ea Mon Sep 17 00:00:00 2001
From: Siddharth Thevaril <siddharth.thevaril@gmail.com>
Date: Fri, 23 Jun 2023 14:59:50 +0530
Subject: [PATCH 3/7] add min width to results

---
 src/scss/openai/classic-editor-title-generator.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/scss/openai/classic-editor-title-generator.scss b/src/scss/openai/classic-editor-title-generator.scss
index b5432a685..0fab2c8ba 100644
--- a/src/scss/openai/classic-editor-title-generator.scss
+++ b/src/scss/openai/classic-editor-title-generator.scss
@@ -52,6 +52,7 @@
 
 	&__results-content {
 		display: flex;
+		flex-flow: row wrap;
 		padding: 1rem;
 		padding-bottom: 1.5rem;
 		gap: 1rem;
@@ -81,6 +82,7 @@
 	&__result-item {
 		flex-grow: 1;
 		flex-basis: 0;
+		min-width: 25%;
 
 		textarea {
 			display: block;

From 8f5c2aa706553f1a6fb695266e613fd3f74d2ef1 Mon Sep 17 00:00:00 2001
From: Siddharth Thevaril <siddharth.thevaril@gmail.com>
Date: Fri, 23 Jun 2023 16:46:40 +0530
Subject: [PATCH 4/7] add e2e tests

---
 .wp-env.json                                  |  5 +++-
 package.json                                  |  1 -
 tests/bin/initialize.sh                       |  1 +
 .../integration/language-processing.test.js   | 27 +++++++++++++++++++
 4 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/.wp-env.json b/.wp-env.json
index 7881ddaa8..d3be216b9 100644
--- a/.wp-env.json
+++ b/.wp-env.json
@@ -1,10 +1,13 @@
 {
-  "plugins": [".", "./tests/test-plugin"],
+  "plugins": [".", "./tests/test-plugin", "https://downloads.wordpress.org/plugin/classic-editor.zip"],
   "env": {
     "tests": {
       "mappings": {
         "wp-cli.yml": "./tests/bin/wp-cli.yml"
       }
     }
+  },
+  "lifecycleScripts": {
+    "afterStart": "bash ./tests/bin/initialize.sh"
   }
 }
diff --git a/package.json b/package.json
index 38e6bfe54..15e893a4b 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,6 @@
     "env": "wp-env",
     "env:start": "wp-env start",
     "env:stop": "wp-env stop",
-    "postenv:start": "./tests/bin/initialize.sh",
     "archive": "composer archive --file=$npm_package_name --format=zip",
     "postarchive": "rm -rf ./release && unzip $npm_package_name.zip -d ./release",
     "prepare": "husky install"
diff --git a/tests/bin/initialize.sh b/tests/bin/initialize.sh
index 51ba8ea9a..a1df1c206 100755
--- a/tests/bin/initialize.sh
+++ b/tests/bin/initialize.sh
@@ -1,3 +1,4 @@
 #!/bin/bash
 npm run env run tests-wordpress chmod -- -c ugo+w /var/www/html
 npm run env run tests-cli wp rewrite structure '/%postname%/' -- --hard
+npm run env run tests-cli wp plugin deactivate classic-editor
diff --git a/tests/cypress/integration/language-processing.test.js b/tests/cypress/integration/language-processing.test.js
index 0749605d8..7306347bb 100644
--- a/tests/cypress/integration/language-processing.test.js
+++ b/tests/cypress/integration/language-processing.test.js
@@ -467,6 +467,33 @@ describe('Language processing Tests', () => {
 		});
 	});
 
+	it('Can see the generate titles button in a post (Classic Editor)', () => {
+		cy.visit( '/wp-admin/plugins.php' );
+		cy.get( '#activate-classic-editor' ).click();
+
+		cy.visit( '/wp-admin/tools.php?page=classifai&tab=language_processing&provider=openai_chatgpt' );
+		cy.get( '#enable_titles' ).check();
+		cy.get( '#submit' ).click();
+
+		const data = getChatGPTData();
+
+		cy.visit( '/wp-admin/post-new.php' );
+
+		cy.get( '#classifai-openai__title-generate-btn' ).click();
+		cy.get( '#classifai-openai__modal' ).should( 'be.visible' );
+		cy.get( '.classifai-openai__result-item' )
+			.first()
+			.find('textarea')
+			.should('have.value', data);
+
+		cy.get( '.classifai-openai__select-title' ).first().click();
+		cy.get( '#classifai-openai__modal' ).should( 'not.be.visible' );
+		cy.get('#title').should( 'have.value', data );
+
+		cy.visit( '/wp-admin/plugins.php' );
+		cy.get('#deactivate-classic-editor').click();
+	});
+
 	it('Can disable title generation feature', () => {
 		cy.visit(
 			'/wp-admin/tools.php?page=classifai&tab=language_processing&provider=openai_chatgpt'

From 95d210f97a3209d2015584ed71b26b3ce6f4ca8b Mon Sep 17 00:00:00 2001
From: Siddharth Thevaril <siddharth.thevaril@gmail.com>
Date: Fri, 23 Jun 2023 17:04:32 +0530
Subject: [PATCH 5/7] remove redundant data-* attribute

---
 src/js/openai/classic-editor-title-generator.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/js/openai/classic-editor-title-generator.js b/src/js/openai/classic-editor-title-generator.js
index c2cfa89fb..159654588 100644
--- a/src/js/openai/classic-editor-title-generator.js
+++ b/src/js/openai/classic-editor-title-generator.js
@@ -72,17 +72,16 @@ let scriptData = classifaiChatGPTData.enabledFeatures.reduce( ( acc, cur ) => (
 				spinnerEl.hide();
 				isProcessing = false;
 
-				result.forEach( ( title, index ) => {
+				result.forEach( ( title ) => {
 					$( '<textarea>', {
 						text: title
 					} )
-					.wrap( `<div class="classifai-openai__result-item" data-result-item-index="${index}" />` )
+					.wrap( `<div class="classifai-openai__result-item" />` )
 					.parent()
 					.append( $( '<button />', {
 						text: scriptData.title.selectBtnText,
 						type: 'button',
 						'class': 'button classifai-openai__select-title',
-						'data-result-title-index': index
 					} ) )
 					.appendTo( '#classifai-openai__results-content' );
 				} );

From c3188cfd1906dcf46c75277de76280232179f221 Mon Sep 17 00:00:00 2001
From: Siddharth Thevaril <siddharth.thevaril@gmail.com>
Date: Fri, 23 Jun 2023 17:11:03 +0530
Subject: [PATCH 6/7] fix js linting issues

---
 .../openai/classic-editor-title-generator.js  | 93 ++++++++++++-------
 webpack.config.js                             |  4 +-
 2 files changed, 65 insertions(+), 32 deletions(-)

diff --git a/src/js/openai/classic-editor-title-generator.js b/src/js/openai/classic-editor-title-generator.js
index 159654588..5734dd799 100644
--- a/src/js/openai/classic-editor-title-generator.js
+++ b/src/js/openai/classic-editor-title-generator.js
@@ -2,9 +2,12 @@ import apiFetch from '@wordpress/api-fetch';
 import '../../scss/openai/classic-editor-title-generator.scss';
 
 const classifaiChatGPTData = window.classifaiChatGPTData || {};
-let scriptData = classifaiChatGPTData.enabledFeatures.reduce( ( acc, cur ) => ( { [ cur.feature ] : cur } ), {} );
+const scriptData = classifaiChatGPTData.enabledFeatures.reduce(
+	( acc, cur ) => ( { [ cur.feature ]: cur } ),
+	{}
+);
 
-( function( $ ) {
+( function ( $ ) {
 	$( document ).ready( () => {
 		if ( scriptData?.title ) {
 			generateTitleInit();
@@ -22,31 +25,40 @@ let scriptData = classifaiChatGPTData.enabledFeatures.reduce( ( acc, cur ) => (
 		// Creates and appens the "Generate titles" button.
 		$( '<span />', {
 			text: scriptData?.title?.buttonText ?? '',
-			'class': 'classifai-openai__title-generate-btn--text',
+			class: 'classifai-openai__title-generate-btn--text',
 		} )
-		.wrap( '<div class="button" id="classifai-openai__title-generate-btn" />' )
-		.parent()
-		.append( $( '<span />', {
-			'class': 'classifai-openai__title-generate-btn--spinner',
-		} ) )
-		.appendTo( '#titlewrap' )
+			.wrap(
+				'<div class="button" id="classifai-openai__title-generate-btn" />'
+			)
+			.parent()
+			.append(
+				$( '<span />', {
+					class: 'classifai-openai__title-generate-btn--spinner',
+				} )
+			)
+			.appendTo( '#titlewrap' );
 
 		// The current post ID.
 		const postId = $( '#post_ID' ).val();
 
 		// Callback to hide the popup.
 		const hidePopup = () => {
-			$( '#classifai-openai__results' ).removeClass( 'classifai-openai--fade-in' ).delay(300).fadeOut(0);
-		}
+			$( '#classifai-openai__results' )
+				.removeClass( 'classifai-openai--fade-in' )
+				.delay( 300 )
+				.fadeOut( 0 );
+		};
 
 		// Callback to apply the title from the result to the post title.
 		const applyTitle = ( e ) => {
 			const selectBtnEl = $( e.target );
-			const textarea = selectBtnEl.closest( '.classifai-openai__result-item' ).find( 'textarea' );
+			const textarea = selectBtnEl
+				.closest( '.classifai-openai__result-item' )
+				.find( 'textarea' );
 
 			$( '#title' ).val( textarea.val() ).trigger( 'input' );
 			hidePopup();
-		}
+		};
 
 		// Callback to generate the title.
 		const generateTitle = () => {
@@ -55,8 +67,12 @@ let scriptData = classifaiChatGPTData.enabledFeatures.reduce( ( acc, cur ) => (
 			}
 
 			$( '#classifai-openai__results-content' ).html( '' );
-			const generateTextEl = $( '.classifai-openai__title-generate-btn--text' );
-			const spinnerEl = $( '.classifai-openai__title-generate-btn--spinner' );
+			const generateTextEl = $(
+				'.classifai-openai__title-generate-btn--text'
+			);
+			const spinnerEl = $(
+				'.classifai-openai__title-generate-btn--spinner'
+			);
 
 			generateTextEl.css( 'opacity', '0' );
 			spinnerEl.show();
@@ -66,39 +82,54 @@ let scriptData = classifaiChatGPTData.enabledFeatures.reduce( ( acc, cur ) => (
 
 			apiFetch( {
 				path,
-			} )
-			.then( ( result ) => {
+			} ).then( ( result ) => {
 				generateTextEl.css( 'opacity', '1' );
 				spinnerEl.hide();
 				isProcessing = false;
 
 				result.forEach( ( title ) => {
 					$( '<textarea>', {
-						text: title
+						text: title,
 					} )
-					.wrap( `<div class="classifai-openai__result-item" />` )
-					.parent()
-					.append( $( '<button />', {
-						text: scriptData.title.selectBtnText,
-						type: 'button',
-						'class': 'button classifai-openai__select-title',
-					} ) )
-					.appendTo( '#classifai-openai__results-content' );
+						.wrap( `<div class="classifai-openai__result-item" />` )
+						.parent()
+						.append(
+							$( '<button />', {
+								text: scriptData.title.selectBtnText,
+								type: 'button',
+								class: 'button classifai-openai__select-title',
+							} )
+						)
+						.appendTo( '#classifai-openai__results-content' );
 				} );
 
-				$( '#classifai-openai__results' ).show().addClass( 'classifai-openai--fade-in' );
+				$( '#classifai-openai__results' )
+					.show()
+					.addClass( 'classifai-openai--fade-in' );
 			} );
 		};
 
 		// Event handler registration to generate the title.
-		$( document ).on( 'click', '#classifai-openai__title-generate-btn', generateTitle );
+		$( document ).on(
+			'click',
+			'#classifai-openai__title-generate-btn',
+			generateTitle
+		);
 
 		// Event handler registration to hide the popup.
 		$( document ).on( 'click', '#classifai-openai__overlay', hidePopup );
-		$( document ).on( 'click', '#classifai-openai__close-modal-button', hidePopup );
+		$( document ).on(
+			'click',
+			'#classifai-openai__close-modal-button',
+			hidePopup
+		);
 
 		// Event handler registration to apply the selected title to the post title.
-		$( document ).on( 'click', '.classifai-openai__select-title', applyTitle );
+		$( document ).on(
+			'click',
+			'.classifai-openai__select-title',
+			applyTitle
+		);
 
 		// Sets the modal title.
 		const resultWrapper = $( '#classifai-openai__results' );
@@ -106,4 +137,4 @@ let scriptData = classifaiChatGPTData.enabledFeatures.reduce( ( acc, cur ) => (
 			.find( '#classifai-openai__results-title' )
 			.text( scriptData.title.modalTitle );
 	}
-} ( jQuery ) );
+} )( jQuery );
diff --git a/webpack.config.js b/webpack.config.js
index 60df03098..5e24a9ca0 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -26,7 +26,9 @@ module.exports = {
 		],
 		'post-excerpt': [ './src/js/post-excerpt/index.js' ],
 		'media-modal': [ './src/js/media-modal/index.js' ],
-		'generate-title-classic': [ './src/js/openai/classic-editor-title-generator.js' ],
+		'generate-title-classic': [
+			'./src/js/openai/classic-editor-title-generator.js',
+		],
 	},
 	module: {
 		rules: [

From 25582e206ab30bfb04703727643e6f932a8215d0 Mon Sep 17 00:00:00 2001
From: Darin Kotter <darin.kotter@gmail.com>
Date: Fri, 23 Jun 2023 09:50:01 -0600
Subject: [PATCH 7/7] Fix typo; fix spacing; add code comment

---
 includes/Classifai/Providers/OpenAI/ChatGPT.php | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/includes/Classifai/Providers/OpenAI/ChatGPT.php b/includes/Classifai/Providers/OpenAI/ChatGPT.php
index 2cc260b10..3e22488f4 100644
--- a/includes/Classifai/Providers/OpenAI/ChatGPT.php
+++ b/includes/Classifai/Providers/OpenAI/ChatGPT.php
@@ -69,7 +69,7 @@ public function __construct( $service ) {
 	public function register() {
 		add_action( 'enqueue_block_editor_assets', [ $this, 'enqueue_editor_assets' ] );
 		add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_admin_assets' ] );
-		add_action( 'edit_form_before_permalink', [ $this, 'regster_generated_titles_template' ] );
+		add_action( 'edit_form_before_permalink', [ $this, 'register_generated_titles_template' ] );
 	}
 
 	/**
@@ -155,11 +155,12 @@ public function enqueue_admin_assets( $hook_suffix = '' ) {
 			return;
 		}
 
-		$screen        = get_current_screen();
-		$settings      = $this->get_settings();
-		$user_roles    = wp_get_current_user()->roles ?? [];
+		$screen      = get_current_screen();
+		$settings    = $this->get_settings();
+		$user_roles  = wp_get_current_user()->roles ?? [];
 		$title_roles = $settings['title_roles'] ?? [];
 
+		// Load the assets for the classic editor.
 		if (
 			$screen && ! $screen->is_block_editor()
 			&& ( ! empty( $title_roles ) && empty( array_diff( $user_roles, $title_roles ) ) )
@@ -203,7 +204,7 @@ public function enqueue_admin_assets( $hook_suffix = '' ) {
 	/**
 	 * HTML template for title generation result popup.
 	 */
-	public function regster_generated_titles_template() {
+	public function register_generated_titles_template() {
 		?>
 		<div id="classifai-openai__results" style="display: none;">
 			<div id="classifai-openai__overlay" style="opacity: 0;"></div>