AI Assistant: add prompt to attributes (#34438)

* add userPrompt to the block's attributes * set last value to default to initial prop * add requestingState to attributes to keep consistency between reloads * add changelog entry
Automattic · Dec 8, 2023 · 3896544 · 3896544
1 parent 09177b9
commit 3896544
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 20 deletions.
diff --git a/projects/js-packages/ai-client/changelog/add-ai-prompt-to-attr b/projects/js-packages/ai-client/changelog/add-ai-prompt-to-attr
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+AI Client: add requesting state to attributes
diff --git a/projects/js-packages/ai-client/src/components/ai-control/index.tsx b/projects/js-packages/ai-client/src/components/ai-control/index.tsx
@@ -97,7 +97,7 @@ export function AIControl(
 	const promptUserInputRef = useRef( null );
 	const loading = state === 'requesting' || state === 'suggesting';
 	const [ editRequest, setEditRequest ] = React.useState( false );
-	const [ lastValue, setLastValue ] = React.useState( '' );
+	const [ lastValue, setLastValue ] = React.useState( value || '' );
 
 	useEffect( () => {
 		if ( editRequest ) {

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,14 @@
 		"customSystemPrompt": {
 			"type": "string",
 			"default": ""
+		},
+		"userPrompt": {
+			"type": "string",
+			"default": ""
+		},
+		"requestingState": {
+			"type": "string",
+			"default": "init"
 		}
 	},
 	"example": {

diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js b/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js
@@ -51,7 +51,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( [] );
@@ -124,8 +123,9 @@ export default function AIAssistantEdit( { attributes, setAttributes, clientId,
 		content: attributes.content,
 		setError,
 		tracks,
-		userPrompt,
+		userPrompt: attributes.userPrompt,
 		requireUpgrade,
+		requestingState: attributes.requestingState,
 	} );
 
 	const connected = isUserConnected();
@@ -218,6 +218,10 @@ export default function AIAssistantEdit( { attributes, setAttributes, clientId,
 		return () => clearInterval( interval );
 	}, [ promptPlaceholder, currentIndex ] );
 
+	useEffect( () => {
+		setAttributes( { requestingState } );
+	}, [ requestingState, setAttributes ] );
+
 	const saveImage = async image => {
 		if ( loadingImages ) {
 			return;
@@ -310,7 +314,7 @@ export default function AIAssistantEdit( { attributes, setAttributes, clientId,
 
 	const handleChange = value => {
 		setErrorDismissed( true );
-		setUserPrompt( value );
+		setAttributes( { userPrompt: value } );
 	};
 
 	const handleSend = () => {
@@ -386,7 +390,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,
@@ -545,7 +551,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 );
 							}
 						} }
@@ -556,7 +562,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 }

diff --git a/...plugins/jetpack/extensions/blocks/ai-assistant/hooks/use-suggestions-from-openai/index.js b/...plugins/jetpack/extensions/blocks/ai-assistant/hooks/use-suggestions-from-openai/index.js
@@ -32,6 +32,7 @@ const useSuggestionsFromOpenAI = ( {
 	onUnclearPrompt,
 	onModeration,
 	requireUpgrade,
+	requestingState,
 } ) => {
 	const [ isLoadingCategories, setIsLoadingCategories ] = useState( false );
 	const [ isLoadingCompletion, setIsLoadingCompletion ] = useState( false );
@@ -41,7 +42,7 @@ const useSuggestionsFromOpenAI = ( {
 	const { updateBlockAttributes } = useDispatch( 'core/block-editor' );
 	const { dequeueAiAssistantFeatureAyncRequest, setAiAssistantFeatureRequireUpgrade } =
 		useDispatch( 'wordpress-com/plans' );
-	const [ requestingState, setRequestingState ] = useState( 'init' );
+	const [ requestState, setRequestState ] = useState( requestingState || 'init' );
 	const source = useRef();
 
 	// Let's grab post data so that we can do something smart.
@@ -139,7 +140,7 @@ const useSuggestionsFromOpenAI = ( {
 		 * let's set the error and return an `undefined` event source.
 		 */
 		if ( requireUpgrade ) {
-			setRequestingState( 'error' );
+			setRequestState( 'error' );
 			setIsLoadingCompletion( false );
 			setWasCompletionJustRequested( false );
 			setShowRetry( false );
@@ -226,7 +227,7 @@ const useSuggestionsFromOpenAI = ( {
 				debugPrompt( '(%s/%s) %o\n%s', i + 1, prompt.length, `[${ role }]`, promptContent )
 			);
 
-			setRequestingState( 'requesting' );
+			setRequestState( 'requesting' );
 
 			source.current = await askQuestion( prompt, {
 				postId,
@@ -235,7 +236,7 @@ const useSuggestionsFromOpenAI = ( {
 				functions: options?.functions,
 			} );
 
-			setRequestingState( 'suggesting' );
+			setRequestState( 'suggesting' );
 		} catch ( err ) {
 			if ( err.message ) {
 				setError( { message: err.message, code: err?.code || 'unknown', status: 'error' } );
@@ -309,7 +310,7 @@ const useSuggestionsFromOpenAI = ( {
 		const onDone = e => {
 			const { detail } = e;
 
-			setRequestingState( 'done' );
+			setRequestState( 'done' );
 
 			// Remove the delimiter from the suggestion.
 			const assistantResponse = detail.replaceAll( delimiter, '' );
@@ -355,7 +356,7 @@ const useSuggestionsFromOpenAI = ( {
 		};
 
 		const onErrorUnclearPrompt = () => {
-			setRequestingState( 'error' );
+			setRequestState( 'error' );
 			source?.current?.close();
 			setIsLoadingCompletion( false );
 			setWasCompletionJustRequested( false );
@@ -368,7 +369,7 @@ const useSuggestionsFromOpenAI = ( {
 		};
 
 		const onErrorContextTooLarge = () => {
-			setRequestingState( 'error' );
+			setRequestState( 'error' );
 			source?.current?.close();
 			setIsLoadingCompletion( false );
 			setWasCompletionJustRequested( false );
@@ -384,7 +385,7 @@ const useSuggestionsFromOpenAI = ( {
 		};
 
 		const onErrorNetwork = ( { detail: error } ) => {
-			setRequestingState( 'error' );
+			setRequestState( 'error' );
 			const { name: errorName, message: errorMessage } = error;
 			if ( errorName === 'TypeError' && errorMessage === 'Failed to fetch' ) {
 				/*
@@ -430,7 +431,7 @@ const useSuggestionsFromOpenAI = ( {
 		};
 
 		const onErrorServiceUnavailable = () => {
-			setRequestingState( 'error' );
+			setRequestState( 'error' );
 			source?.current?.close();
 			setIsLoadingCompletion( false );
 			setWasCompletionJustRequested( false );
@@ -446,7 +447,7 @@ const useSuggestionsFromOpenAI = ( {
 		};
 
 		const onErrorQuotaExceeded = () => {
-			setRequestingState( 'error' );
+			setRequestState( 'error' );
 			source?.current?.close();
 			setIsLoadingCompletion( false );
 			setWasCompletionJustRequested( false );
@@ -463,7 +464,7 @@ const useSuggestionsFromOpenAI = ( {
 		};
 
 		const onErrorModeration = () => {
-			setRequestingState( 'error' );
+			setRequestState( 'error' );
 			source?.current?.close();
 			setIsLoadingCompletion( false );
 			setWasCompletionJustRequested( false );
@@ -527,7 +528,7 @@ const useSuggestionsFromOpenAI = ( {
 		onSuggestionDone?.();
 
 		// Set requesting state to done since the suggestion stopped.
-		setRequestingState( 'done' );
+		setRequestState( 'done' );
 	}
 
 	return {
@@ -540,7 +541,7 @@ const useSuggestionsFromOpenAI = ( {
 		postTitle: currentPostTitle,
 		contentBefore: getPartialContentToBlock( clientId ),
 		wholeContent: getContentFromBlocks(),
-		requestingState,
+		requestingState: requestState,
 
 		getSuggestionFromOpenAI: getStreamedSuggestionFromOpenAI,
 		stopSuggestion,