SEO Assistant: Add initial error handling to title generation

projects/plugins/jetpack/changelog/update-seo-assistant-title-error

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+SEO Assistant: Add initial error handling to title generation

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/assistant-wizard.tsx

@@ -1,4 +1,4 @@
-import { Button, Icon, Tooltip } from '@wordpress/components';
+import { Button, Icon, Tooltip, Notice } from '@wordpress/components';
 import { useState, useEffect, useRef, useMemo, useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { next, closeSmall, chevronLeft } from '@wordpress/icons';
@@ -64,7 +64,10 @@ export default function AssistantWizard( { close } ) {
 
 	const handleNext = useCallback( () => {
 		debug( 'handleNext, stepsCount', stepsCount );
-		let nextStep;
+		let nextStep: number;
+
+		steps[ currentStep ].resetState?.();
+
 		setCurrentStep( prev => {
 			if ( prev + 1 < stepsCount ) {
 				nextStep = prev + 1;
@@ -74,7 +77,7 @@ export default function AssistantWizard( { close } ) {
 			}
 			return prev;
 		} );
-	}, [ stepsCount, steps ] );
+	}, [ stepsCount, steps, currentStep ] );
 
 	useEffect( () => {
 		const currentId = currentStepData?.id;
@@ -157,6 +160,7 @@ export default function AssistantWizard( { close } ) {
 			setIsBusy( true );
 			setAssistantFlowAction( 'backwards' );
 			debug( 'moving back to ' + ( currentStep - 1 ) );
+			steps[ currentStep ].resetState?.();
 			setCurrentStep( currentStep - 1 );
 			setCurrentStepData( steps[ currentStep - 1 ] );
 		}
@@ -189,7 +193,7 @@ export default function AssistantWizard( { close } ) {
 	const handleRetry = useCallback( async () => {
 		debug( 'handleRetry' );
 		setIsBusy( true );
-		await steps[ currentStep ].onRetry?.();
+		await steps[ currentStep ].onRetry?.( {} );
 		setIsBusy( false );
 	}, [ currentStep, steps ] );
 
@@ -229,6 +233,12 @@ export default function AssistantWizard( { close } ) {
 						isBusy={ isBusy }
 					/>
 				) ) }
+
+				{ steps[ currentStep ].hasFailed && (
+					<Notice status="error" isDismissible={ false }>
+						{ __( 'Something went wrong. Please try again or skip this step.', 'jetpack' ) }
+					</Notice>
+				) }
 				<div ref={ stepsEndRef } />
 			</div>
 
@@ -245,6 +255,7 @@ export default function AssistantWizard( { close } ) {
 				{ currentStep === 2 && steps[ currentStep ].type === 'options' && (
 					<OptionsInput
 						disabled={ ! steps[ currentStep ].hasSelection }
+						loading={ isBusy }
 						submitCtaLabel={ steps[ currentStep ].submitCtaLabel }
 						retryCtaLabel={ steps[ currentStep ].retryCtaLabel }
 						handleRetry={ handleRetry }
@@ -254,6 +265,7 @@ export default function AssistantWizard( { close } ) {
 				{ currentStep === 3 && steps[ currentStep ].type === 'options' && (
 					<OptionsInput
 						disabled={ ! steps[ currentStep ].hasSelection }
+						loading={ isBusy }
 						submitCtaLabel={ steps[ currentStep ].submitCtaLabel }
 						retryCtaLabel={ steps[ currentStep ].retryCtaLabel }
 						handleRetry={ handleRetry }

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/types.tsx

@@ -19,15 +19,17 @@ export interface Results {
 	};
 }
 
+type OnStart = ( options?: { fromSkip?: boolean; results?: Results } ) => Promise< void | string >;
+
 export interface Step {
 	id: string;
 	title: string;
 	label?: string;
 	messages: Message[];
 	type: StepType;
-	onStart?: ( options?: { fromSkip: boolean; results: Results } ) => void;
+	onStart?: OnStart;
 	onSubmit?: () => Promise< string >;
-	onSkip?: () => void;
+	onSkip?: () => Promise< void >;
 	value?: string;
 	setValue?:
 		| React.Dispatch< React.SetStateAction< string > >
@@ -43,7 +45,9 @@ export interface Step {
 	options?: OptionMessage[];
 	onSelect?: ( option: OptionMessage ) => void;
 	submitCtaLabel?: string;
-	onRetry?: () => void;
+	onRetry?: OnStart;
 	retryCtaLabel?: string;
 	hasSelection?: boolean;
+	hasFailed?: boolean;
+	resetState?: () => void;
 }

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/use-title-step.tsx

@@ -4,7 +4,13 @@
 import { askQuestionSync, usePostContent } from '@automattic/jetpack-ai-client';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
-import { useCallback, useState, createInterpolateElement, useMemo } from '@wordpress/element';
+import {
+	useCallback,
+	useState,
+	createInterpolateElement,
+	useMemo,
+	useEffect,
+} from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 /*
  * Internal dependencies
@@ -38,6 +44,8 @@ export const useTitleStep = ( {
 	const postContent = usePostContent();
 	const postId = useSelect( select => select( editorStore ).getCurrentPostId(), [] );
 	const [ generatedCount, setGeneratedCount ] = useState( 0 );
+	const [ hasFailed, setHasFailed ] = useState( false );
+	const [ failurePoint, setFailurePoint ] = useState< 'generate' | 'regenerate' | null >( null );
 
 	const prevStepHasChanged = useMemo( () => keywords !== lastValue, [ keywords, lastValue ] );
 
@@ -87,29 +95,49 @@ export const useTitleStep = ( {
 		return newTitles;
 	}, [ generatedCount, request ] );
 
+	useEffect( () => {
+		if ( ! hasFailed ) {
+			// Reset the failure point when the request is successful
+			setFailurePoint( null );
+		}
+	}, [ hasFailed ] );
+
 	const handleTitleGenerate = useCallback(
 		async ( { fromSkip } ) => {
 			let newTitles = [ ...titleOptions ];
+			const previousLastValue = lastValue;
 
 			setLastValue( keywords );
-			const initialMessage = fromSkip
-				? {
-						content: createInterpolateElement(
-							__( "Skipped!<br />Let's optimise your title first.", 'jetpack' ),
-							{ br: <br /> }
-						),
-						showIcon: true,
-				  }
-				: {
-						content: __( "Let's optimise your title first.", 'jetpack' ),
-						showIcon: true,
-				  };
-			setMessages( [ initialMessage ] );
+
+			if ( ! hasFailed ) {
+				const initialMessage = fromSkip
+					? {
+							content: createInterpolateElement(
+								__( "Skipped!<br />Let's optimise your title first.", 'jetpack' ),
+								{ br: <br /> }
+							),
+							showIcon: true,
+					  }
+					: {
+							content: __( "Let's optimise your title first.", 'jetpack' ),
+							showIcon: true,
+					  };
+				setMessages( [ initialMessage ] );
+			}
 
 			// we only generate if options are empty
 			if ( newTitles.length === 0 || prevStepHasChanged ) {
-				setSelectedTitle( '' );
-				newTitles = await getTitles();
+				try {
+					setSelectedTitle( '' );
+					setHasFailed( false );
+					newTitles = await getTitles();
+				} catch {
+					setFailurePoint( 'generate' );
+					setHasFailed( true );
+					// reset the last value to the previous value on failure to avoid a wrong value for prevStepHasChanged
+					setLastValue( previousLastValue );
+					return;
+				}
 			}
 
 			const readyMessageSuffix = createInterpolateElement(
@@ -122,29 +150,37 @@ export const useTitleStep = ( {
 			if ( newTitles.length ) {
 				// this sets the title options for internal state
 				setTitleOptions( newTitles );
-				// this addes title options as message-buttons
+				// this adds title options as message-buttons
 				newTitles.forEach( title => addMessage( { ...title, type: 'option', isUser: true } ) );
 			}
 			return value;
 		},
 		[
 			titleOptions,
-			prevStepHasChanged,
+			lastValue,
 			keywords,
-			setMessages,
+			hasFailed,
+			prevStepHasChanged,
 			editLastMessage,
+			value,
+			setMessages,
 			getTitles,
 			addMessage,
-			value,
 		]
 	);
 
 	const handleTitleRegenerate = useCallback( async () => {
-		const newTitles = await getTitles();
-
-		setTitleOptions( [ ...titleOptions, ...newTitles ] );
-		newTitles.forEach( title => addMessage( { ...title, type: 'option', isUser: true } ) );
-	}, [ addMessage, getTitles, titleOptions ] );
+		try {
+			setHasFailed( false );
+			const newTitles = await getTitles();
+
+			setTitleOptions( [ ...titleOptions, ...newTitles ] );
+			newTitles.forEach( title => addMessage( { ...title, type: 'option', isUser: true } ) );
+		} catch {
+			setFailurePoint( 'regenerate' );
+			setHasFailed( true );
+		}
+	}, [ getTitles, titleOptions, addMessage ] );
 
 	const handleTitleSubmit = useCallback( async () => {
 		setValue( selectedTitle );
@@ -153,6 +189,15 @@ export const useTitleStep = ( {
 		return selectedTitle;
 	}, [ selectedTitle, addMessage, editPost ] );
 
+	const resetState = useCallback( () => {
+		setHasFailed( false );
+		setFailurePoint( null );
+	}, [] );
+
+	// The build fails if we use i18n strings directly in a ternary operator.
+	const tryAgainLabel = __( 'Try again', 'jetpack' );
+	const regenerateLabel = __( 'Regenerate', 'jetpack' );
+
 	return {
 		id: 'title',
 		title: __( 'Optimise Title', 'jetpack' ),
@@ -163,12 +208,14 @@ export const useTitleStep = ( {
 		onSelect: handleTitleSelect,
 		onSubmit: handleTitleSubmit,
 		submitCtaLabel: __( 'Insert', 'jetpack' ),
-		onRetry: handleTitleRegenerate,
-		retryCtaLabel: __( 'Regenerate', 'jetpack' ),
+		onRetry: failurePoint === 'generate' ? handleTitleGenerate : handleTitleRegenerate,
+		retryCtaLabel: failurePoint === 'generate' ? tryAgainLabel : regenerateLabel,
 		onStart: handleTitleGenerate,
 		value,
 		setValue,
 		includeInResults: true,
 		hasSelection: !! selectedTitle,
+		hasFailed,
+		resetState,
 	};
 };

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/wizard-input.tsx

@@ -4,14 +4,20 @@ import { arrowRight } from '@wordpress/icons';
 
 export const OptionsInput = ( {
 	disabled,
+	loading,
 	handleRetry,
 	retryCtaLabel,
 	handleSubmit,
 	submitCtaLabel,
 } ) => {
 	return (
 		<div className="assistant-wizard__actions">
-			<Button variant="secondary" className="assistant-wizard__submit" onClick={ handleRetry }>
+			<Button
+				variant="secondary"
+				className="assistant-wizard__submit"
+				onClick={ handleRetry }
+				disabled={ loading }
+			>
 				{ retryCtaLabel }
 			</Button>