@automattic/jetpack-ai-client 0.11.0 → 0.12.1

package/CHANGELOG.md

@@ -5,6 +5,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.12.1] - 2024-04-15
+### Added
+- AI Client: Add callbacks, initial requesting state and change error handling. [#36869]
+
+## [0.12.0] - 2024-04-08
+### Added
+- Add error rejection in image generation. [#36709]
+
+### Changed
+- Updated package dependencies. [#36756] [#36760] [#36761]
+
+### Fixed
+- AI Featured Image: handle posts longer than the limit of Dall-e generation prompt. [#36703]
+
 ## [0.11.0] - 2024-04-01
 ### Added
 - AI Client: include prompt to generate featured image based on post content. [#36591]
@@ -272,6 +286,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.12.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.12.0...v0.12.1
+[0.12.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.11.0...v0.12.0
 [0.11.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.10.1...v0.11.0
 [0.10.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.10.0...v0.10.1
 [0.10.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.9.0...v0.10.0

package/build/hooks/use-ai-suggestions/index.d.ts

@@ -17,9 +17,12 @@ type useAiSuggestionsOptions = {
      * AskQuestion options.
      */
     askQuestionOptions?: AskQuestionOptionsArgProps;
+    initialRequestingState?: RequestingStateProp;
     onSuggestion?: (suggestion: string) => void;
     onDone?: (content: string) => void;
+    onStop?: () => void;
     onError?: (error: RequestingErrorProps) => void;
+    onAllErrors?: (error: RequestingErrorProps) => void;
 };
 type useAiSuggestionsProps = {
     suggestion: string;
@@ -29,6 +32,7 @@ type useAiSuggestionsProps = {
     request: (prompt: PromptProp, options?: AskQuestionOptionsArgProps) => Promise<void>;
     reset: () => void;
     stopSuggestion: () => void;
+    handleErrorQuotaExceededError: () => void;
 };
 /**
  * Get the error data for a given error code.
@@ -44,5 +48,5 @@ export declare function getErrorData(errorCode: SuggestionErrorCode): Requesting
  * @param {useAiSuggestionsOptions} options - The options for the hook.
  * @returns {useAiSuggestionsProps}           The props for the hook.
  */
-export default function useAiSuggestions({ prompt, autoRequest, askQuestionOptions, onSuggestion, onDone, onError, }?: useAiSuggestionsOptions): useAiSuggestionsProps;
+export default function useAiSuggestions({ prompt, autoRequest, askQuestionOptions, initialRequestingState, onSuggestion, onDone, onStop, onError, onAllErrors, }?: useAiSuggestionsOptions): useAiSuggestionsProps;
 export {};

package/build/hooks/use-ai-suggestions/index.js

@@ -3,13 +3,11 @@
  */
 import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import debugFactory from 'debug';
 /**
  * Internal dependencies
  */
 import askQuestion from '../../ask-question/index.js';
-import { ERROR_MODERATION, ERROR_NETWORK, ERROR_QUOTA_EXCEEDED, ERROR_SERVICE_UNAVAILABLE, ERROR_UNCLEAR_PROMPT, } from '../../types.js';
-const debug = debugFactory('jetpack-ai-client:use-suggestion');
+import { ERROR_CONTEXT_TOO_LARGE, ERROR_MODERATION, ERROR_NETWORK, ERROR_QUOTA_EXCEEDED, ERROR_SERVICE_UNAVAILABLE, ERROR_UNCLEAR_PROMPT, ERROR_RESPONSE, } from '../../types.js';
 /**
  * Get the error data for a given error code.
  *
@@ -42,6 +40,12 @@ export function getErrorData(errorCode) {
                 message: __('This request has been flagged by our moderation system. Please try to rephrase it and try again.', 'jetpack-ai-client'),
                 severity: 'info',
             };
+        case ERROR_CONTEXT_TOO_LARGE:
+            return {
+                code: ERROR_CONTEXT_TOO_LARGE,
+                message: __('The content is too large to be processed all at once. Please try to shorten it or divide it into smaller parts.', 'jetpack-ai-client'),
+                severity: 'info',
+            };
         case ERROR_NETWORK:
         default:
             return {
@@ -58,8 +62,8 @@ export function getErrorData(errorCode) {
  * @param {useAiSuggestionsOptions} options - The options for the hook.
  * @returns {useAiSuggestionsProps}           The props for the hook.
  */
-export default function useAiSuggestions({ prompt, autoRequest = false, askQuestionOptions = {}, onSuggestion, onDone, onError, } = {}) {
-    const [requestingState, setRequestingState] = useState('init');
+export default function useAiSuggestions({ prompt, autoRequest = false, askQuestionOptions = {}, initialRequestingState = 'init', onSuggestion, onDone, onStop, onError, onAllErrors, } = {}) {
+    const [requestingState, setRequestingState] = useState(initialRequestingState);
     const [suggestion, setSuggestion] = useState('');
     const [error, setError] = useState();
     // Store the event source in a ref, so we can handle it if needed.
@@ -81,9 +85,13 @@ export default function useAiSuggestions({ prompt, autoRequest = false, askQuest
      * @returns {void}
      */
     const handleDone = useCallback((event) => {
+        closeEventSource();
         onDone?.(event?.detail);
         setRequestingState('done');
     }, [onDone]);
+    const handleAnyError = useCallback((event) => {
+        onAllErrors?.(event?.detail);
+    }, [onAllErrors]);
     const handleError = useCallback((errorCode) => {
         eventSourceRef?.current?.close();
         setRequestingState('error');
@@ -103,35 +111,26 @@ export default function useAiSuggestions({ prompt, autoRequest = false, askQuest
      * @returns {Promise<void>} The promise.
      */
     const request = useCallback(async (promptArg, options = { ...askQuestionOptions }) => {
-        if (Array.isArray(promptArg) && promptArg?.length) {
-            promptArg.forEach(({ role, content: promptContent }, i) => debug('(%s/%s) %o\n%s', i + 1, promptArg.length, `[${role}]`, promptContent));
-        }
-        else {
-            debug('%o', promptArg);
-        }
+        // Clear any error.
+        setError(undefined);
         // Set the request status.
         setRequestingState('requesting');
-        try {
-            eventSourceRef.current = await askQuestion(promptArg, options);
-            if (!eventSourceRef?.current) {
-                return;
-            }
-            // Alias
-            const eventSource = eventSourceRef.current;
-            // Set the request status.
-            setRequestingState('suggesting');
-            eventSource.addEventListener('suggestion', handleSuggestion);
-            eventSource.addEventListener(ERROR_QUOTA_EXCEEDED, handleErrorQuotaExceededError);
-            eventSource.addEventListener(ERROR_UNCLEAR_PROMPT, handleUnclearPromptError);
-            eventSource.addEventListener(ERROR_SERVICE_UNAVAILABLE, handleServiceUnavailableError);
-            eventSource.addEventListener(ERROR_MODERATION, handleModerationError);
-            eventSource.addEventListener(ERROR_NETWORK, handleNetworkError);
-            eventSource.addEventListener('done', handleDone);
-        }
-        catch (e) {
-            // eslint-disable-next-line no-console
-            console.error(e);
+        eventSourceRef.current = await askQuestion(promptArg, options);
+        if (!eventSourceRef?.current) {
+            return;
         }
+        // Alias
+        const eventSource = eventSourceRef.current;
+        // Set the request status.
+        setRequestingState('suggesting');
+        eventSource.addEventListener('suggestion', handleSuggestion);
+        eventSource.addEventListener(ERROR_QUOTA_EXCEEDED, handleErrorQuotaExceededError);
+        eventSource.addEventListener(ERROR_UNCLEAR_PROMPT, handleUnclearPromptError);
+        eventSource.addEventListener(ERROR_SERVICE_UNAVAILABLE, handleServiceUnavailableError);
+        eventSource.addEventListener(ERROR_MODERATION, handleModerationError);
+        eventSource.addEventListener(ERROR_NETWORK, handleNetworkError);
+        eventSource.addEventListener(ERROR_RESPONSE, handleAnyError);
+        eventSource.addEventListener('done', handleDone);
     }, [
         handleDone,
         handleErrorQuotaExceededError,
@@ -152,11 +151,11 @@ export default function useAiSuggestions({ prompt, autoRequest = false, askQuest
         setError(undefined);
     }, []);
     /**
-     * Stop suggestion handler.
+     * Close the event source connection.
      *
      * @returns {void}
      */
-    const stopSuggestion = useCallback(() => {
+    const closeEventSource = useCallback(() => {
         if (!eventSourceRef?.current) {
             return;
         }
@@ -172,8 +171,6 @@ export default function useAiSuggestions({ prompt, autoRequest = false, askQuest
         eventSource.removeEventListener(ERROR_MODERATION, handleModerationError);
         eventSource.removeEventListener(ERROR_NETWORK, handleNetworkError);
         eventSource.removeEventListener('done', handleDone);
-        // Set requesting state to done since the suggestion stopped.
-        setRequestingState('done');
     }, [
         eventSourceRef,
         handleSuggestion,
@@ -184,6 +181,16 @@ export default function useAiSuggestions({ prompt, autoRequest = false, askQuest
         handleNetworkError,
         handleDone,
     ]);
+    /**
+     * Stop suggestion handler.
+     *
+     * @returns {void}
+     */
+    const stopSuggestion = useCallback(() => {
+        closeEventSource();
+        onStop?.();
+        setRequestingState('done');
+    }, [onStop]);
     // Request suggestions automatically when ready.
     useEffect(() => {
         // Check if there is a prompt to request.
@@ -208,6 +215,8 @@ export default function useAiSuggestions({ prompt, autoRequest = false, askQuest
         request,
         stopSuggestion,
         reset,
+        // Error handlers
+        handleErrorQuotaExceededError,
         // SuggestionsEventSource
         eventSource: eventSourceRef.current,
     };

package/build/hooks/use-image-generator/index.js

@@ -32,7 +32,7 @@ Do not add text to the image.
 
 This is the post content:
 
-` + postContent;
+` + (postContent.length > 3000 ? postContent.substring(0, 3000) + ` [...]` : postContent); // truncating the content so the whole prompt is not longer than 4000 characters, the model limit.
             const URL = 'https://public-api.wordpress.com/wpcom/v2/jetpack-ai-image';
             const body = {
                 prompt: imageGenerationPrompt,
@@ -49,10 +49,15 @@ This is the post content:
                 headers,
                 body: JSON.stringify(body),
             }).then(response => response.json());
+            if (data?.data?.status && data?.data?.status > 200) {
+                debug('Error generating image: %o', data);
+                return Promise.reject(data);
+            }
             return data;
         }
         catch (error) {
-            return;
+            debug('Error generating image: %o', error);
+            return Promise.reject(error);
         }
     };
     return {

package/build/hooks/use-transcription-post-processing/index.js

@@ -39,7 +39,6 @@ export default function useTranscriptionPostProcessing({ feature, onReady, onErr
         onError?.(errorData.message);
     }, [setPostProcessingError, onError]);
     const { request, stopSuggestion } = useAiSuggestions({
-        autoRequest: false,
         onSuggestion: handleOnSuggestion,
         onDone: handleOnDone,
         onError: handleOnError,

package/build/index.d.ts

@@ -2,7 +2,7 @@ export { default as requestJwt } from './jwt/index.js';
 export { default as SuggestionsEventSource } from './suggestions-event-source/index.js';
 export { default as askQuestion } from './ask-question/index.js';
 export { default as transcribeAudio } from './audio-transcription/index.js';
-export { default as useAiSuggestions } from './hooks/use-ai-suggestions/index.js';
+export { default as useAiSuggestions, getErrorData } from './hooks/use-ai-suggestions/index.js';
 export { default as useMediaRecording } from './hooks/use-media-recording/index.js';
 export { default as useAudioTranscription } from './hooks/use-audio-transcription/index.js';
 export { default as useTranscriptionPostProcessing } from './hooks/use-transcription-post-processing/index.js';

package/build/index.js

@@ -8,7 +8,7 @@ export { default as transcribeAudio } from './audio-transcription/index.js';
 /*
  * Hooks
  */
-export { default as useAiSuggestions } from './hooks/use-ai-suggestions/index.js';
+export { default as useAiSuggestions, getErrorData } from './hooks/use-ai-suggestions/index.js';
 export { default as useMediaRecording } from './hooks/use-media-recording/index.js';
 export { default as useAudioTranscription } from './hooks/use-audio-transcription/index.js';
 export { default as useTranscriptionPostProcessing } from './hooks/use-transcription-post-processing/index.js';

package/build/suggestions-event-source/index.d.ts

@@ -49,7 +49,6 @@ export default class SuggestionsEventSource extends EventTarget {
     checkForUnclearPrompt(): void;
     close(): void;
     processEvent(e: EventSourceMessage): void;
-    processConnectionError(response: any): void;
     processErrorEvent(e: any): void;
 }
 export {};

package/build/suggestions-event-source/index.js

@@ -128,7 +128,9 @@ export default class SuggestionsEventSource extends EventTarget {
                 if (response.status >= 400 &&
                     response.status <= 500 &&
                     ![413, 422, 429].includes(response.status)) {
-                    this.processConnectionError(response);
+                    debug('Connection error: %o', response);
+                    errorCode = ERROR_NETWORK;
+                    this.dispatchEvent(new CustomEvent(ERROR_NETWORK, { detail: response }));
                 }
                 /*
                  * error code 503
@@ -264,13 +266,6 @@ export default class SuggestionsEventSource extends EventTarget {
             this.dispatchEvent(new CustomEvent('functionCallChunk', { detail: this.fullFunctionCall }));
         }
     }
-    processConnectionError(response) {
-        debug('Connection error: %o', response);
-        this.dispatchEvent(new CustomEvent(ERROR_NETWORK, { detail: response }));
-        this.dispatchEvent(new CustomEvent(ERROR_RESPONSE, {
-            detail: getErrorData(ERROR_NETWORK),
-        }));
-    }
     processErrorEvent(e) {
         debug('onerror: %o', e);
         // Dispatch a generic network error event

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.11.0",
+	"version": "0.12.1",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -23,9 +23,9 @@
 	},
 	"type": "module",
 	"devDependencies": {
-		"@storybook/addon-actions": "8.0.4",
-		"@storybook/blocks": "8.0.4",
-		"@storybook/react": "8.0.4",
+		"@storybook/addon-actions": "8.0.6",
+		"@storybook/blocks": "8.0.6",
+		"@storybook/react": "8.0.6",
 		"jest": "^29.6.2",
 		"jest-environment-jsdom": "29.7.0",
 		"typescript": "5.0.4"
@@ -39,19 +39,19 @@
 	"main": "./build/index.js",
 	"types": "./build/index.d.ts",
 	"dependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.20",
-		"@automattic/jetpack-connection": "^0.33.5",
-		"@automattic/jetpack-shared-extension-utils": "^0.14.8",
+		"@automattic/jetpack-base-styles": "^0.6.22",
+		"@automattic/jetpack-connection": "^0.33.8",
+		"@automattic/jetpack-shared-extension-utils": "^0.14.10",
 		"@microsoft/fetch-event-source": "2.0.1",
-		"@types/react": "18.2.61",
-		"@wordpress/api-fetch": "6.51.0",
-		"@wordpress/block-editor": "12.22.0",
-		"@wordpress/components": "27.2.0",
-		"@wordpress/compose": "6.31.0",
-		"@wordpress/data": "9.24.0",
-		"@wordpress/element": "5.31.0",
-		"@wordpress/i18n": "4.54.0",
-		"@wordpress/icons": "9.45.0",
+		"@types/react": "18.2.74",
+		"@wordpress/api-fetch": "6.52.0",
+		"@wordpress/block-editor": "12.23.0",
+		"@wordpress/components": "27.3.0",
+		"@wordpress/compose": "6.32.0",
+		"@wordpress/data": "9.25.0",
+		"@wordpress/element": "5.32.0",
+		"@wordpress/i18n": "4.55.0",
+		"@wordpress/icons": "9.46.0",
 		"classnames": "2.3.2",
 		"debug": "4.3.4",
 		"react": "18.2.0",

package/src/hooks/use-ai-suggestions/index.ts

@@ -3,17 +3,18 @@
  */
 import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import debugFactory from 'debug';
 /**
  * Internal dependencies
  */
 import askQuestion from '../../ask-question/index.js';
 import {
+	ERROR_CONTEXT_TOO_LARGE,
 	ERROR_MODERATION,
 	ERROR_NETWORK,
 	ERROR_QUOTA_EXCEEDED,
 	ERROR_SERVICE_UNAVAILABLE,
 	ERROR_UNCLEAR_PROMPT,
+	ERROR_RESPONSE,
 } from '../../types.js';
 /**
  * Types & constants
@@ -56,6 +57,11 @@ type useAiSuggestionsOptions = {
 	 */
 	askQuestionOptions?: AskQuestionOptionsArgProps;
 
+	/*
+	 * Initial requesting state.
+	 */
+	initialRequestingState?: RequestingStateProp;
+
 	/*
 	 * onSuggestion callback.
 	 */
@@ -66,10 +72,20 @@ type useAiSuggestionsOptions = {
 	 */
 	onDone?: ( content: string ) => void;
 
+	/*
+	 * onStop callback.
+	 */
+	onStop?: () => void;
+
 	/*
 	 * onError callback.
 	 */
 	onError?: ( error: RequestingErrorProps ) => void;
+
+	/*
+	 * Error callback common for all errors.
+	 */
+	onAllErrors?: ( error: RequestingErrorProps ) => void;
 };
 
 type useAiSuggestionsProps = {
@@ -107,9 +123,12 @@ type useAiSuggestionsProps = {
 	 * The handler to stop a suggestion.
 	 */
 	stopSuggestion: () => void;
-};
 
-const debug = debugFactory( 'jetpack-ai-client:use-suggestion' );
+	/*
+	 * The handler to handle the quota exceeded error.
+	 */
+	handleErrorQuotaExceededError: () => void;
+};
 
 /**
  * Get the error data for a given error code.
@@ -149,6 +168,15 @@ export function getErrorData( errorCode: SuggestionErrorCode ): RequestingErrorP
 				),
 				severity: 'info',
 			};
+		case ERROR_CONTEXT_TOO_LARGE:
+			return {
+				code: ERROR_CONTEXT_TOO_LARGE,
+				message: __(
+					'The content is too large to be processed all at once. Please try to shorten it or divide it into smaller parts.',
+					'jetpack-ai-client'
+				),
+				severity: 'info',
+			};
 		case ERROR_NETWORK:
 		default:
 			return {
@@ -173,11 +201,15 @@ export default function useAiSuggestions( {
 	prompt,
 	autoRequest = false,
 	askQuestionOptions = {},
+	initialRequestingState = 'init',
 	onSuggestion,
 	onDone,
+	onStop,
 	onError,
+	onAllErrors,
 }: useAiSuggestionsOptions = {} ): useAiSuggestionsProps {
-	const [ requestingState, setRequestingState ] = useState< RequestingStateProp >( 'init' );
+	const [ requestingState, setRequestingState ] =
+		useState< RequestingStateProp >( initialRequestingState );
 	const [ suggestion, setSuggestion ] = useState< string >( '' );
 	const [ error, setError ] = useState< RequestingErrorProps >();
 
@@ -206,12 +238,20 @@ export default function useAiSuggestions( {
 	 */
 	const handleDone = useCallback(
 		( event: CustomEvent ) => {
+			closeEventSource();
 			onDone?.( event?.detail );
 			setRequestingState( 'done' );
 		},
 		[ onDone ]
 	);
 
+	const handleAnyError = useCallback(
+		( event: CustomEvent ) => {
+			onAllErrors?.( event?.detail );
+		},
+		[ onAllErrors ]
+	);
+
 	const handleError = useCallback(
 		( errorCode: SuggestionErrorCode ) => {
 			eventSourceRef?.current?.close();
@@ -250,43 +290,34 @@ export default function useAiSuggestions( {
 			promptArg: PromptProp,
 			options: AskQuestionOptionsArgProps = { ...askQuestionOptions }
 		) => {
-			if ( Array.isArray( promptArg ) && promptArg?.length ) {
-				promptArg.forEach( ( { role, content: promptContent }, i ) =>
-					debug( '(%s/%s) %o\n%s', i + 1, promptArg.length, `[${ role }]`, promptContent )
-				);
-			} else {
-				debug( '%o', promptArg );
-			}
+			// Clear any error.
+			setError( undefined );
 
 			// Set the request status.
 			setRequestingState( 'requesting' );
 
-			try {
-				eventSourceRef.current = await askQuestion( promptArg, options );
+			eventSourceRef.current = await askQuestion( promptArg, options );
 
-				if ( ! eventSourceRef?.current ) {
-					return;
-				}
+			if ( ! eventSourceRef?.current ) {
+				return;
+			}
 
-				// Alias
-				const eventSource = eventSourceRef.current;
+			// Alias
+			const eventSource = eventSourceRef.current;
 
-				// Set the request status.
-				setRequestingState( 'suggesting' );
+			// Set the request status.
+			setRequestingState( 'suggesting' );
 
-				eventSource.addEventListener( 'suggestion', handleSuggestion );
+			eventSource.addEventListener( 'suggestion', handleSuggestion );
 
-				eventSource.addEventListener( ERROR_QUOTA_EXCEEDED, handleErrorQuotaExceededError );
-				eventSource.addEventListener( ERROR_UNCLEAR_PROMPT, handleUnclearPromptError );
-				eventSource.addEventListener( ERROR_SERVICE_UNAVAILABLE, handleServiceUnavailableError );
-				eventSource.addEventListener( ERROR_MODERATION, handleModerationError );
-				eventSource.addEventListener( ERROR_NETWORK, handleNetworkError );
+			eventSource.addEventListener( ERROR_QUOTA_EXCEEDED, handleErrorQuotaExceededError );
+			eventSource.addEventListener( ERROR_UNCLEAR_PROMPT, handleUnclearPromptError );
+			eventSource.addEventListener( ERROR_SERVICE_UNAVAILABLE, handleServiceUnavailableError );
+			eventSource.addEventListener( ERROR_MODERATION, handleModerationError );
+			eventSource.addEventListener( ERROR_NETWORK, handleNetworkError );
+			eventSource.addEventListener( ERROR_RESPONSE, handleAnyError );
 
-				eventSource.addEventListener( 'done', handleDone );
-			} catch ( e ) {
-				// eslint-disable-next-line no-console
-				console.error( e );
-			}
+			eventSource.addEventListener( 'done', handleDone );
 		},
 		[
 			handleDone,
@@ -311,11 +342,11 @@ export default function useAiSuggestions( {
 	}, [] );
 
 	/**
-	 * Stop suggestion handler.
+	 * Close the event source connection.
 	 *
 	 * @returns {void}
 	 */
-	const stopSuggestion = useCallback( () => {
+	const closeEventSource = useCallback( () => {
 		if ( ! eventSourceRef?.current ) {
 			return;
 		}
@@ -336,9 +367,6 @@ export default function useAiSuggestions( {
 		eventSource.removeEventListener( ERROR_NETWORK, handleNetworkError );
 
 		eventSource.removeEventListener( 'done', handleDone );
-
-		// Set requesting state to done since the suggestion stopped.
-		setRequestingState( 'done' );
 	}, [
 		eventSourceRef,
 		handleSuggestion,
@@ -350,6 +378,17 @@ export default function useAiSuggestions( {
 		handleDone,
 	] );
 
+	/**
+	 * Stop suggestion handler.
+	 *
+	 * @returns {void}
+	 */
+	const stopSuggestion = useCallback( () => {
+		closeEventSource();
+		onStop?.();
+		setRequestingState( 'done' );
+	}, [ onStop ] );
+
 	// Request suggestions automatically when ready.
 	useEffect( () => {
 		// Check if there is a prompt to request.
@@ -379,6 +418,9 @@ export default function useAiSuggestions( {
 		stopSuggestion,
 		reset,
 
+		// Error handlers
+		handleErrorQuotaExceededError,
+
 		// SuggestionsEventSource
 		eventSource: eventSourceRef.current,
 	};

package/src/hooks/use-image-generator/index.ts

@@ -45,7 +45,7 @@ Do not add text to the image.
 
 This is the post content:
 
-` + postContent;
+` + ( postContent.length > 3000 ? postContent.substring( 0, 3000 ) + ` [...]` : postContent ); // truncating the content so the whole prompt is not longer than 4000 characters, the model limit.
 
 			const URL = 'https://public-api.wordpress.com/wpcom/v2/jetpack-ai-image';
 
@@ -67,9 +67,15 @@ This is the post content:
 				body: JSON.stringify( body ),
 			} ).then( response => response.json() );
 
+			if ( data?.data?.status && data?.data?.status > 200 ) {
+				debug( 'Error generating image: %o', data );
+				return Promise.reject( data );
+			}
+
 			return data as { data: { [ key: string ]: string }[] };
 		} catch ( error ) {
-			return;
+			debug( 'Error generating image: %o', error );
+			return Promise.reject( error );
 		}
 	};
 

package/src/hooks/use-transcription-post-processing/index.ts

@@ -83,7 +83,6 @@ export default function useTranscriptionPostProcessing( {
 	);
 
 	const { request, stopSuggestion } = useAiSuggestions( {
-		autoRequest: false,
 		onSuggestion: handleOnSuggestion,
 		onDone: handleOnDone,
 		onError: handleOnError,

package/src/index.ts

@@ -9,7 +9,7 @@ export { default as transcribeAudio } from './audio-transcription/index.js';
 /*
  * Hooks
  */
-export { default as useAiSuggestions } from './hooks/use-ai-suggestions/index.js';
+export { default as useAiSuggestions, getErrorData } from './hooks/use-ai-suggestions/index.js';
 export { default as useMediaRecording } from './hooks/use-media-recording/index.js';
 export { default as useAudioTranscription } from './hooks/use-audio-transcription/index.js';
 export { default as useTranscriptionPostProcessing } from './hooks/use-transcription-post-processing/index.js';

package/src/suggestions-event-source/index.ts

@@ -197,7 +197,9 @@ export default class SuggestionsEventSource extends EventTarget {
 					response.status <= 500 &&
 					! [ 413, 422, 429 ].includes( response.status )
 				) {
-					this.processConnectionError( response );
+					debug( 'Connection error: %o', response );
+					errorCode = ERROR_NETWORK;
+					this.dispatchEvent( new CustomEvent( ERROR_NETWORK, { detail: response } ) );
 				}
 
 				/*
@@ -358,16 +360,6 @@ export default class SuggestionsEventSource extends EventTarget {
 		}
 	}
 
-	processConnectionError( response ) {
-		debug( 'Connection error: %o', response );
-		this.dispatchEvent( new CustomEvent( ERROR_NETWORK, { detail: response } ) );
-		this.dispatchEvent(
-			new CustomEvent( ERROR_RESPONSE, {
-				detail: getErrorData( ERROR_NETWORK ),
-			} )
-		);
-	}
-
 	processErrorEvent( e ) {
 		debug( 'onerror: %o', e );