diff --git a/projects/plugins/jetpack/changelog/add-title-optimization-error b/projects/plugins/jetpack/changelog/add-title-optimization-error new file mode 100644 index 0000000000000..d31d02f749115 --- /dev/null +++ b/projects/plugins/jetpack/changelog/add-title-optimization-error @@ -0,0 +1,4 @@ +Significance: minor +Type: other + +Add error handling on Title Optimization diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/index.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/index.tsx index 496302a7a442f..d9802e5d50bb4 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/index.tsx +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/index.tsx @@ -32,6 +32,7 @@ export default function TitleOptimization( { const [ isTitleOptimizationModalVisible, setIsTitleOptimizationModalVisible ] = useState( false ); const [ generating, setGenerating ] = useState( false ); const [ options, setOptions ] = useState( [] ); + const [ error, setError ] = useState( false ); const { editPost } = useDispatch( 'core/editor' ); const { autosave } = useAutoSaveAndRedirect(); const { increaseAiAssistantRequestsCount } = useDispatch( 'wordpress-com/plans' ); @@ -61,6 +62,7 @@ export default function TitleOptimization( { const { request, stopSuggestion } = useAiSuggestions( { onDone: handleDone, onError: () => { + setError( true ); setGenerating( false ); }, } ); @@ -91,6 +93,12 @@ export default function TitleOptimization( { handleRequest(); }, [ handleRequest, placement, recordEvent, toggleTitleOptimizationModal ] ); + const handleTryAgain = useCallback( () => { + setError( false ); + setGenerating( true ); + handleRequest(); + }, [ handleRequest ] ); + const handleAccept = useCallback( ( event: MouseEvent ) => { // track the generated title acceptance @@ -120,7 +128,7 @@ export default function TitleOptimization( {

{ __( 'Use AI to optimize key details of your post.', 'jetpack' ) }

- + { error ? ( + + ) : ( + + ) } ) } diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/style.scss b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/style.scss index 74231e44d9649..79db6eca95ad5 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/style.scss +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/style.scss @@ -9,7 +9,7 @@ justify-content: center; } - &__intro { + &__intro, &__error { margin-top: 16px; }