Add JavaScript that submits the form to Special:AI and shows the result

extension.json

@@ -54,6 +54,9 @@
 			"targets": [
 				"desktop",
 				"mobile"
+			],
+			"messages": [
+				"askai-submit-failed"
 			]
 		}
 	},

i18n/en.json

@@ -14,7 +14,9 @@
 	"askai-field-pages": "List of wiki pages (and paragraphs in them) to be analyzed by the AI:",
 	"askai-field-prompt": "Question to ask:",
 	"askai-field-response": "Response from the AI:",
+	"askai-openai-failed": "Failed to contact OpenAI: $1",
 	"askai-openai-not-configured": "Error: OpenAI not configured: apiKey, apiUrl or model are not set.",
+	"askai-submit-failed": "HTTP error when submitting the form: $1",
 	"askai-unknown-service": "Not configured: incorrect value of $wgAskAIServiceClass.",
 	"right-askai": "Send queries to Special:AI."
 }

i18n/qqq.json

@@ -14,7 +14,9 @@
 	"askai-field-pages": "Label of field for the list of pages/paragraphs.",
 	"askai-field-prompt": "Label of field for a question to the AI.:",
 	"askai-field-response": "Label of readonly field that will show the response from the AI.",
+	"askai-openai-failed": "Error message if HTTP request to OpenAI resulted in an error.",
 	"askai-openai-not-configured": "Error message if OpenAI API key, etc. are not configured.",
+	"askai-submit-failed": "Error message if HTTP POST request to Special:AI resulted in an error.",
 	"askai-unknown-service": "Error message if failed to create an AI service.",
-	"right-askai": "{{doc-right|askai}}\nAllows to use Special:AI.",
+	"right-askai": "{{doc-right|askai}}\nAllows to use Special:AI."
 }

includes/Service/OpenAI.php

@@ -96,7 +96,7 @@ public function query( $prompt, $instructions = '' ) {
 
 		$status = $req->execute();
 		if ( !$status->isOK() ) {
-			return "HTTP request failed: " . $status->getMessage()->plain();
+			return wfMessage( 'askai-openai-failed', $status->getMessage()->plain() );
 		}
 		$ret = FormatJson::decode( $req->getContent(), true );
 

includes/SpecialAI.php

@@ -44,19 +44,19 @@ public function requiresWrite() {
 	/** @inheritDoc */
 	protected function getFormFields() {
 		return [
-			'pagesAndParagraphs' => [
+			'Pages' => [
 				'type' => 'textarea',
-				'rows' => 5,
+				'rows' => 3,
 				'label-message' => 'askai-field-pages',
 				'required' => true
 			],
-			'response' => [
+			'Response' => [
 				'type' => 'textarea',
-				'rows' => 10,
+				'rows' => 15,
 				'label-message' => 'askai-field-response',
 				'readonly' => true
 			],
-			'prompt' => [
+			'Prompt' => [
 				'type' => 'text',
 				'label-message' => 'askai-field-prompt',
 				'required' => true
@@ -66,6 +66,8 @@ protected function getFormFields() {
 
 	/** @inheritDoc */
 	protected function alterForm( HTMLForm $form ) {
+		$form->setId( 'mw-askai' );
+		$this->getOutput()->addModules( 'ext.askai' );
 	}
 
 	/** @inheritDoc */
@@ -75,18 +77,17 @@ public function onSubmit( array $data ) {
 			return Status::newFatal( 'askai-unknown-service' );
 		}
 
-		$response = $ai->query( $data['prompt'], $data['pagesAndParagraphs'] );
+		$response = $ai->query( $data['Prompt'], $data['Pages'] );
 
-		$this->getOutput()->addHTML( Xml::element( 'div', [
+		$this->getOutput()->disable();
+		echo Xml::element( 'div', [
+			'id' => 'mw-askai-response',
 			'style' => 'white-space: pre-wrap'
-		], $response ) );
+		], $response );
 
 		return Status::newGood();
 	}
 
-	public function onSuccess() {
-	}
-
 	/** @inheritDoc */
 	protected function getDisplayFormat() {
 		return 'ooui';

modules/ext.askai.js

@@ -0,0 +1,29 @@
+/* Submits the form [[Special:AI]] and displays results without reloading the page. */
+
+$( function () {
+	var $form = $( '#mw-askai' ),
+		$response = $form.find( '[name="wpResponse"]' ),
+		$pages = $form.find( '[name="wpPages"]' ),
+		$prompt = $form.find( '[name="wpPrompt"]' ),
+		token = $( '#wpEditToken' ).val(),
+		url = $form[ 0 ].action;
+
+	function onsubmit( ev ) {
+		ev.preventDefault();
+
+		$.post( url, {
+			wpPages: $pages.val(),
+			wpPrompt: $prompt.val(),
+			wpEditToken: token
+		} ).fail( function ( xhr ) {
+			$response.val( mw.msg( 'askai-submit-failed',
+				xhr.statusText + ' (' + url + ')'
+			) );
+		} ).done( function ( ret ) {
+			var responseText = $( '<div>' ).append( ret ).find( '#mw-askai-response' ).text();
+			$response.val( responseText );
+		} );
+	}
+
+	$form.on( 'submit', onsubmit );
+}() );