From 149fe1652b5050f9c46bf79ab3bc016e5bf0ef0e Mon Sep 17 00:00:00 2001 From: Luiz Kowalski Date: Tue, 10 Sep 2024 18:16:37 -0300 Subject: [PATCH 01/12] Save the error object so we can use it to display the error message --- .../components/title-optimization/index.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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 c272caf73a022..1b87fab2cdf82 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 @@ -1,7 +1,7 @@ /** * External dependencies */ -import { useAiSuggestions } from '@automattic/jetpack-ai-client'; +import { useAiSuggestions, RequestingErrorProps } from '@automattic/jetpack-ai-client'; import { useAnalytics } from '@automattic/jetpack-shared-extension-utils'; import { Button, Spinner, ExternalLink } from '@wordpress/components'; import { useDispatch } from '@wordpress/data'; @@ -58,7 +58,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 [ error, setError ] = useState< RequestingErrorProps >( null ); const [ optimizationKeywords, setOptimizationKeywords ] = useState( '' ); const { editPost } = useDispatch( 'core/editor' ); const { autosave } = useAutoSaveAndRedirect(); @@ -88,8 +88,8 @@ export default function TitleOptimization( { const { request, stopSuggestion } = useAiSuggestions( { onDone: handleDone, - onError: () => { - setError( true ); + onError: ( e: RequestingErrorProps ) => { + setError( e ); setGenerating( false ); }, } ); @@ -127,7 +127,7 @@ export default function TitleOptimization( { }, [ handleRequest, toggleTitleOptimizationModal ] ); const handleTryAgain = useCallback( () => { - setError( false ); + setError( null ); handleRequest( true ); // retry the generation }, [ handleRequest ] ); From 6abdd0a42c32f37182173bae4274610893b447f6 Mon Sep 17 00:00:00 2001 From: Luiz Kowalski Date: Tue, 10 Sep 2024 18:25:45 -0300 Subject: [PATCH 02/12] Move error message to it's own component --- .../components/title-optimization/index.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) 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 1b87fab2cdf82..4af155a2b8c35 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 @@ -25,6 +25,14 @@ const isKeywordsFeatureAvailable = getFeatureAvailability( 'ai-title-optimization-keywords-support' ); +const TitleOptimizationErrorMessage = () => { + return ( +
+ { __( 'The generation of your suggested titles failed. Please try again.', 'jetpack' ) } +
+ ); +}; + export default function TitleOptimization( { placement, busy, @@ -190,12 +198,7 @@ export default function TitleOptimization( { ) : ( <> { error ? ( -
- { __( - 'The generation of your suggested titles failed. Please try again.', - 'jetpack' - ) } -
+ ) : ( <> { isKeywordsFeatureAvailable && ( From 357f6f41b5d7a0032e481596c6a2103e173ab3f1 Mon Sep 17 00:00:00 2001 From: Luiz Kowalski Date: Tue, 10 Sep 2024 18:35:00 -0300 Subject: [PATCH 03/12] Show the provided error message when the error is related to moderation --- .../components/title-optimization/index.tsx | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) 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 4af155a2b8c35..0de0cca5c5b95 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 @@ -1,7 +1,11 @@ /** * External dependencies */ -import { useAiSuggestions, RequestingErrorProps } from '@automattic/jetpack-ai-client'; +import { + useAiSuggestions, + RequestingErrorProps, + ERROR_MODERATION, +} from '@automattic/jetpack-ai-client'; import { useAnalytics } from '@automattic/jetpack-shared-extension-utils'; import { Button, Spinner, ExternalLink } from '@wordpress/components'; import { useDispatch } from '@wordpress/data'; @@ -25,12 +29,13 @@ const isKeywordsFeatureAvailable = getFeatureAvailability( 'ai-title-optimization-keywords-support' ); -const TitleOptimizationErrorMessage = () => { - return ( -
- { __( 'The generation of your suggested titles failed. Please try again.', 'jetpack' ) } -
+const TitleOptimizationErrorMessage = ( { error }: { error: RequestingErrorProps } ) => { + const genericErrorMessage = __( + 'The generation of your suggested titles failed. Please try again.', + 'jetpack' ); + const errorMessage = error.code === ERROR_MODERATION ? error.message : genericErrorMessage; + return
{ errorMessage }
; }; export default function TitleOptimization( { @@ -198,7 +203,7 @@ export default function TitleOptimization( { ) : ( <> { error ? ( - + ) : ( <> { isKeywordsFeatureAvailable && ( From 8c0b06eb7a1285b4033229f9d4d9d2bc1eca2110 Mon Sep 17 00:00:00 2001 From: Luiz Kowalski Date: Tue, 10 Sep 2024 18:37:41 -0300 Subject: [PATCH 04/12] Use an error notice to show the errors --- .../components/title-optimization/index.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) 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 0de0cca5c5b95..5873335c7398d 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 @@ -7,7 +7,7 @@ import { ERROR_MODERATION, } from '@automattic/jetpack-ai-client'; import { useAnalytics } from '@automattic/jetpack-shared-extension-utils'; -import { Button, Spinner, ExternalLink } from '@wordpress/components'; +import { Button, Spinner, ExternalLink, Notice } from '@wordpress/components'; import { useDispatch } from '@wordpress/data'; import { useState, useCallback } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; @@ -35,7 +35,13 @@ const TitleOptimizationErrorMessage = ( { error }: { error: RequestingErrorProps 'jetpack' ); const errorMessage = error.code === ERROR_MODERATION ? error.message : genericErrorMessage; - return
{ errorMessage }
; + return ( +
+ + { errorMessage } + +
+ ); }; export default function TitleOptimization( { From 58e326c791bfc137bfc2c88ab1d38b9e46998663 Mon Sep 17 00:00:00 2001 From: Luiz Kowalski Date: Tue, 10 Sep 2024 18:45:17 -0300 Subject: [PATCH 05/12] Show FairUsageNotice when the error is a quota exceeded one --- .../components/title-optimization/index.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) 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 5873335c7398d..e63c33d927b57 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 @@ -5,6 +5,7 @@ import { useAiSuggestions, RequestingErrorProps, ERROR_MODERATION, + ERROR_QUOTA_EXCEEDED, } from '@automattic/jetpack-ai-client'; import { useAnalytics } from '@automattic/jetpack-shared-extension-utils'; import { Button, Spinner, ExternalLink, Notice } from '@wordpress/components'; @@ -14,6 +15,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ +import { FairUsageNotice } from '../../../../blocks/ai-assistant/components/quota-exceeded-message'; import { getFeatureAvailability } from '../../../../blocks/ai-assistant/lib/utils/get-feature-availability'; import useAutoSaveAndRedirect from '../../../../shared/use-autosave-and-redirect'; import usePostContent from '../../hooks/use-post-content'; @@ -30,6 +32,13 @@ const isKeywordsFeatureAvailable = getFeatureAvailability( ); const TitleOptimizationErrorMessage = ( { error }: { error: RequestingErrorProps } ) => { + if ( error.code === ERROR_QUOTA_EXCEEDED ) { + return ( +
+ +
+ ); + } const genericErrorMessage = __( 'The generation of your suggested titles failed. Please try again.', 'jetpack' From 42f44a45cbea8aca745a9f836c8fd09ee7fd519d Mon Sep 17 00:00:00 2001 From: Luiz Kowalski Date: Tue, 10 Sep 2024 18:46:24 -0300 Subject: [PATCH 06/12] Changelog --- .../update-jetpack-ai-handle-errors-on-title-improvement-tool | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/plugins/jetpack/changelog/update-jetpack-ai-handle-errors-on-title-improvement-tool diff --git a/projects/plugins/jetpack/changelog/update-jetpack-ai-handle-errors-on-title-improvement-tool b/projects/plugins/jetpack/changelog/update-jetpack-ai-handle-errors-on-title-improvement-tool new file mode 100644 index 0000000000000..fa385b0412fcc --- /dev/null +++ b/projects/plugins/jetpack/changelog/update-jetpack-ai-handle-errors-on-title-improvement-tool @@ -0,0 +1,4 @@ +Significance: patch +Type: other + +Title Optimization: properly handle errors and show the correct UI for each. From 973d9e915e8c5d223dd47a7c8361cfa9d131e76c Mon Sep 17 00:00:00 2001 From: Luiz Kowalski Date: Wed, 11 Sep 2024 12:19:29 -0300 Subject: [PATCH 07/12] Use the QuotaExceededMessage component so we handle automatically the free and paid plan quotas --- .../components/title-optimization/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 e63c33d927b57..e3030c1045d43 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 @@ -15,7 +15,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { FairUsageNotice } from '../../../../blocks/ai-assistant/components/quota-exceeded-message'; +import QuotaExceededMessage from '../../../../blocks/ai-assistant/components/quota-exceeded-message'; import { getFeatureAvailability } from '../../../../blocks/ai-assistant/lib/utils/get-feature-availability'; import useAutoSaveAndRedirect from '../../../../shared/use-autosave-and-redirect'; import usePostContent from '../../hooks/use-post-content'; @@ -35,7 +35,7 @@ const TitleOptimizationErrorMessage = ( { error }: { error: RequestingErrorProps if ( error.code === ERROR_QUOTA_EXCEEDED ) { return (
- +
); } From 063091163cea54c10c3ac2e51a6d41f874c04975 Mon Sep 17 00:00:00 2001 From: Luiz Kowalski Date: Wed, 11 Sep 2024 15:04:38 -0300 Subject: [PATCH 08/12] Support JSON error handling --- .../components/title-optimization/index.tsx | 21 ++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) 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 e3030c1045d43..0f73b1630d18a 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 @@ -31,7 +31,15 @@ const isKeywordsFeatureAvailable = getFeatureAvailability( 'ai-title-optimization-keywords-support' ); -const TitleOptimizationErrorMessage = ( { error }: { error: RequestingErrorProps } ) => { +const ERROR_JSON_PARSE = 'json-parse-error'; +type TitleOptimizationJSONError = { + code: typeof ERROR_JSON_PARSE; + message: string; +}; + +type TitleOptimizationError = RequestingErrorProps | TitleOptimizationJSONError; + +const TitleOptimizationErrorMessage = ( { error }: { error: TitleOptimizationError } ) => { if ( error.code === ERROR_QUOTA_EXCEEDED ) { return (
@@ -86,7 +94,7 @@ export default function TitleOptimization( { const [ isTitleOptimizationModalVisible, setIsTitleOptimizationModalVisible ] = useState( false ); const [ generating, setGenerating ] = useState( false ); const [ options, setOptions ] = useState( [] ); - const [ error, setError ] = useState< RequestingErrorProps >( null ); + const [ error, setError ] = useState< TitleOptimizationError >( null ); const [ optimizationKeywords, setOptimizationKeywords ] = useState( '' ); const { editPost } = useDispatch( 'core/editor' ); const { autosave } = useAutoSaveAndRedirect(); @@ -108,7 +116,14 @@ export default function TitleOptimization( { setOptions( parsedContent ); setSelected( parsedContent?.[ 0 ]?.title ); } catch ( e ) { - // Do nothing + const jsonError: TitleOptimizationJSONError = { + code: ERROR_JSON_PARSE, + message: __( + 'The generation of your suggested titles failed. Please try again!', + 'jetpack' + ), + }; + setError( jsonError ); } }, [ increaseAiAssistantRequestsCount ] From af943f6472d1b6d2c284e98ecf626f7b2dd9ba0f Mon Sep 17 00:00:00 2001 From: Luiz Kowalski Date: Wed, 11 Sep 2024 15:18:40 -0300 Subject: [PATCH 09/12] Reuse the generic error message --- .../components/title-optimization/index.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) 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 0f73b1630d18a..47621d30acf31 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 @@ -31,6 +31,14 @@ const isKeywordsFeatureAvailable = getFeatureAvailability( 'ai-title-optimization-keywords-support' ); +/** + * A generic error message that we can reuse. + */ +const genericErrorMessage = __( + 'The generation of your suggested titles failed. Please try again.', + 'jetpack' +); + const ERROR_JSON_PARSE = 'json-parse-error'; type TitleOptimizationJSONError = { code: typeof ERROR_JSON_PARSE; @@ -47,10 +55,6 @@ const TitleOptimizationErrorMessage = ( { error }: { error: TitleOptimizationErr
); } - const genericErrorMessage = __( - 'The generation of your suggested titles failed. Please try again.', - 'jetpack' - ); const errorMessage = error.code === ERROR_MODERATION ? error.message : genericErrorMessage; return (
@@ -118,10 +122,7 @@ export default function TitleOptimization( { } catch ( e ) { const jsonError: TitleOptimizationJSONError = { code: ERROR_JSON_PARSE, - message: __( - 'The generation of your suggested titles failed. Please try again!', - 'jetpack' - ), + message: genericErrorMessage, }; setError( jsonError ); } From eec6b77fef3d6b491e50d0580ec08e175c497392 Mon Sep 17 00:00:00 2001 From: Luiz Kowalski Date: Wed, 11 Sep 2024 15:23:01 -0300 Subject: [PATCH 10/12] Change code to trust the message provided by the error object, when available --- .../components/title-optimization/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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 47621d30acf31..82ae2e6aeb0cc 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 @@ -4,7 +4,6 @@ import { useAiSuggestions, RequestingErrorProps, - ERROR_MODERATION, ERROR_QUOTA_EXCEEDED, } from '@automattic/jetpack-ai-client'; import { useAnalytics } from '@automattic/jetpack-shared-extension-utils'; @@ -55,7 +54,10 @@ const TitleOptimizationErrorMessage = ( { error }: { error: TitleOptimizationErr
); } - const errorMessage = error.code === ERROR_MODERATION ? error.message : genericErrorMessage; + + // Use the provided message, if available, otherwise use the generic error message + const errorMessage = error?.message ? error.message : genericErrorMessage; + return (
From c527fd4ee7f0bacbb4565588d79fb169e4745cf6 Mon Sep 17 00:00:00 2001 From: Luiz Kowalski Date: Wed, 11 Sep 2024 17:39:04 -0300 Subject: [PATCH 11/12] Do not show retry button when the error will not go away --- .../components/title-optimization/index.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) 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 82ae2e6aeb0cc..09ed829da3c80 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 @@ -5,6 +5,9 @@ import { useAiSuggestions, RequestingErrorProps, ERROR_QUOTA_EXCEEDED, + ERROR_NETWORK, + ERROR_SERVICE_UNAVAILABLE, + ERROR_UNCLEAR_PROMPT, } from '@automattic/jetpack-ai-client'; import { useAnalytics } from '@automattic/jetpack-shared-extension-utils'; import { Button, Spinner, ExternalLink, Notice } from '@wordpress/components'; @@ -206,6 +209,14 @@ export default function TitleOptimization( { stopSuggestion(); }, [ stopSuggestion, toggleTitleOptimizationModal ] ); + // When can we retry? + const showTryAgainButton = + error && + [ ERROR_JSON_PARSE, ERROR_NETWORK, ERROR_SERVICE_UNAVAILABLE, ERROR_UNCLEAR_PROMPT ].includes( + error.code + ); + const showReplaceTitleButton = ! error; + return (

{ sidebarDescription }

@@ -267,11 +278,12 @@ export default function TitleOptimization( { - { error ? ( + { showTryAgainButton && ( - ) : ( + ) } + { showReplaceTitleButton && ( From 7e30c31456dd1a70f27e4a9600a66fc7dfbf9be9 Mon Sep 17 00:00:00 2001 From: Luiz Kowalski Date: Thu, 12 Sep 2024 15:00:05 -0300 Subject: [PATCH 12/12] Include type suggestions --- .../components/title-optimization/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 09ed829da3c80..01acfac40d607 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 @@ -59,7 +59,7 @@ const TitleOptimizationErrorMessage = ( { error }: { error: TitleOptimizationErr } // Use the provided message, if available, otherwise use the generic error message - const errorMessage = error?.message ? error.message : genericErrorMessage; + const errorMessage = error.message ? error.message : genericErrorMessage; return (
@@ -103,7 +103,7 @@ export default function TitleOptimization( { const [ isTitleOptimizationModalVisible, setIsTitleOptimizationModalVisible ] = useState( false ); const [ generating, setGenerating ] = useState( false ); const [ options, setOptions ] = useState( [] ); - const [ error, setError ] = useState< TitleOptimizationError >( null ); + const [ error, setError ] = useState< TitleOptimizationError | null >( null ); const [ optimizationKeywords, setOptimizationKeywords ] = useState( '' ); const { editPost } = useDispatch( 'core/editor' ); const { autosave } = useAutoSaveAndRedirect();