add userPrompt to the block's attributes

Automattic · Dec 4, 2023 · 2e11c2a · 2e11c2a
1 parent 9ea24a6
commit 2e11c2a
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/projects/plugins/jetpack/changelog/add-ai-prompt-to-attr b/projects/plugins/jetpack/changelog/add-ai-prompt-to-attr
@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+AI Assistant: add userPrompt to block's attributes
diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/block.json b/projects/plugins/jetpack/extensions/blocks/ai-assistant/block.json
@@ -50,6 +50,10 @@
 		"customSystemPrompt": {
 			"type": "string",
 			"default": ""
+		},
+		"userPrompt": {
+			"type": "string",
+			"default": ""
 		}
 	},
 	"example": {

diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js b/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js
@@ -50,7 +50,6 @@ const isPlaygroundVisible =
 	window?.Jetpack_Editor_Initial_State?.[ 'ai-assistant' ]?.[ 'is-playground-visible' ];
 
 export default function AIAssistantEdit( { attributes, setAttributes, clientId, isSelected } ) {
-	const [ userPrompt, setUserPrompt ] = useState();
 	const [ errorData, setError ] = useState( {} );
 	const [ loadingImages, setLoadingImages ] = useState( false );
 	const [ resultImages, setResultImages ] = useState( [] );
@@ -123,7 +122,7 @@ export default function AIAssistantEdit( { attributes, setAttributes, clientId,
 		content: attributes.content,
 		setError,
 		tracks,
-		userPrompt,
+		userPrompt: attributes.userPrompt,
 		requireUpgrade,
 	} );
 
@@ -309,7 +308,7 @@ export default function AIAssistantEdit( { attributes, setAttributes, clientId,
 
 	const handleChange = value => {
 		setErrorDismissed( true );
-		setUserPrompt( value );
+		setAttributes( { userPrompt: value } );
 	};
 
 	const handleSend = () => {
@@ -385,7 +384,9 @@ export default function AIAssistantEdit( { attributes, setAttributes, clientId,
 		setError( {} );
 
 		getImagesFromOpenAI(
-			userPrompt.trim() === '' ? __( 'What would you like to see?', 'jetpack' ) : userPrompt,
+			attributes.userPrompt.trim() === ''
+				? __( 'What would you like to see?', 'jetpack' )
+				: attributes.userPrompt,
 			setAttributes,
 			setLoadingImages,
 			setResultImages,
@@ -544,7 +545,7 @@ export default function AIAssistantEdit( { attributes, setAttributes, clientId,
 							// Add a typing effect in the text area
 							for ( let i = 0; i < prompt.length; i++ ) {
 								setTimeout( () => {
-									setUserPrompt( prompt.slice( 0, i + 1 ) );
+									setAttributes( { userPrompt: prompt.slice( 0, i + 1 ) } );
 								}, 25 * i );
 							}
 						} }
@@ -555,7 +556,7 @@ export default function AIAssistantEdit( { attributes, setAttributes, clientId,
 				<AIControl
 					ref={ aiControlRef }
 					disabled={ requireUpgrade || ! connected }
-					value={ userPrompt }
+					value={ attributes.userPrompt }
 					placeholder={ promptPlaceholder || __( 'Ask Jetpack AI', 'jetpack' ) }
 					onChange={ handleChange }
 					onSend={ handleSend }