Jetpack AI: Generate a post intro based on title and categories

projects/plugins/jetpack/changelog/jetpack-ai-post-suggestions

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+AI Paragraph block now is aware of the rest of editor canvas and can work without any input

projects/plugins/jetpack/extensions/blocks/ai-paragraph/edit.js

@@ -5,9 +5,9 @@ import { useBlockProps } from '@wordpress/block-editor';
 import { Placeholder, Button, Spinner } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useState, RawHTML, useEffect } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { sprintf, __ } from '@wordpress/i18n';
 
-function formatPromptToOpenAI( editor ) {
+function formatEditorCanvasContentForCompletion( editor ) {
 	const index = editor.getBlockInsertionPoint().index - 1;
 	const allBlocksBefore = editor.getBlocks().slice( 0, index );
 	return allBlocksBefore
@@ -26,18 +26,23 @@ function getSuggestionFromOpenAI(
 	setLoadingCompletion,
 	setErrorMessage
 ) {
-	if ( formattedPrompt.length < 120 ) {
+	const needsAtLeast = 36;
+	if ( formattedPrompt.length < needsAtLeast ) {
 		setErrorMessage(
-			__(
-				'Please write a little bit more. Jetpack AI needs at least 120 characters to make the gears spin.',
-				'jetpack'
+			sprintf(
+				/** translators: First placeholder is a number of more characters we need, second is the total number we need */
+				__(
+					'AI needs you to write %1$d more characters above this block. When inserted into an empty post with a title (or additionally categories selected), AI Paragraph will generate a new post for you. If you insert the AI Paragraph block following other text, it will attemp to auto-complete, but it needs at least %2$d characters of input.',
+					'jetpack'
+				),
+				needsAtLeast - formattedPrompt.length,
+				needsAtLeast
 			)
 		);
 		return;
 	}
 	setErrorMessage( '' );
-	// We only take the last 240 chars into account, otherwise the prompt gets too long and because we have a 110 tokens limit, there is no place for response.
-	formattedPrompt = formattedPrompt.slice( -240 );
+
 	const data = { content: formattedPrompt };
 	setLoadingCompletion( true );
 	setAttributes( { requestedPrompt: true } ); // This will prevent double submitting.
@@ -69,13 +74,66 @@ function getSuggestionFromOpenAI(
 		} );
 }
 
+/**
+ * Gather data available in Gutenberg and prepare the best prompt we can come up with.
+ *
+ * @param {Function} select - function returning Gutenberg data store.
+ * @returns {string} - prompt ready to pipe to OpenAI.
+ */
+function preparePromptBasedOnEditorState( select ) {
+	const prompt = formatEditorCanvasContentForCompletion( select( 'core/block-editor' ) );
+
+	// If a user started typing something, we will just create a completion.
+	if ( prompt.length > 0 ) {
+		// We only take the last 240 chars into account, otherwise the prompt gets too long and because we have a 110 tokens limit, there is no place for response.
+		return prompt.slice( -240 );
+	}
+
+	// Let's grab post data so that we can do something smart.
+	const currentPost = select( 'core/editor' ).getCurrentPost();
+	if ( ! currentPost ) {
+		return '';
+	}
+
+	// If there is no title, there is not much we can do.
+	if ( ! currentPost.title ) {
+		return '';
+	}
+
+	// We are filtering out the default "Uncategorized"
+	const categories = currentPost.categories.filter( catId => catId !== 1 );
+
+	// User did not set any categories, we are going to base the suggestions off a title.
+	if ( ! categories.length ) {
+		/** translators: This will be a prompt to OpenAI to generate a post based on the post title */
+		return sprintf( __( 'Write content of a post titled "%s"', 'jetpack' ), currentPost.title );
+	}
+
+	// We are grabbing more data from WP.
+	const categoryObjects = categories.map( categoryId =>
+		select( 'core' ).getEntityRecord( 'taxonomy', 'category', categoryId )
+	);
+	// We want to wait until all category names are loaded. This will return empty string (aka loading state) until all objects are truthy.
+	if ( categoryObjects.filter( obj => ! obj || ! obj.name ).length ) {
+		return '';
+	}
+
+	const categoryNames = categoryObjects.map( ( { name } ) => name ).join( ', ' );
+
+	return sprintf(
+		/** translators: This will be a prompt to OpenAI to generate a post based on the comma-seperated category names and the post title */
+		__( 'Write content of a post with categories "%1$s" titled "%2$s"', 'jetpack' ),
+		categoryNames,
+		currentPost.title
+	);
+}
+
 export default function Edit( { attributes, setAttributes } ) {
 	const [ loadingCompletion, setLoadingCompletion ] = useState( false );
 	const [ errorMessage, setErrorMessage ] = useState( '' );
 
-	const formattedPrompt = useSelect( select => {
-		return formatPromptToOpenAI( select( 'core/block-editor' ) );
-	}, [] );
+	// Here is where we craft the prompt.
+	const formattedPrompt = useSelect( preparePromptBasedOnEditorState, [] );
 
 	//useEffect hook is called only once when block is first rendered.
 	useEffect( () => {
@@ -88,7 +146,7 @@ export default function Edit( { attributes, setAttributes } ) {
 				setErrorMessage
 			);
 		}
-	}, [ attributes, formattedPrompt, setAttributes ] );
+	}, [ setAttributes, attributes ] ); // eslint-disable-line react-hooks/exhaustive-deps
 
 	return (
 		<div { ...useBlockProps() }>