@automattic/jetpack-ai-client 0.12.4 → 0.13.1

package/CHANGELOG.md

@@ -5,6 +5,22 @@ 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.13.1] - 2024-05-13
+### Added
+- AI Client: Add className to AI Control component. [#37322]
+- AI Client: Add "try again" prop on Extension AI Control. [#37250]
+
+### Changed
+- AI Client: Add event to upgrade handler function of Extension AI Control. [#37224]
+
+## [0.13.0] - 2024-05-06
+### Added
+- AI Client: Add wrapper ref to AI Control. [#37145]
+- AI Featured Image: Support custom user prompt on the image generation. [#37086]
+
+### Changed
+- Updated package dependencies. [#37147] [#37148] [#37160]
+
 ## [0.12.4] - 2024-04-29
 ### Added
 - AI Client: Export ExtensionAIControl. [#37087]
@@ -298,6 +314,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.13.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.13.0...v0.13.1
+[0.13.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.12.4...v0.13.0
 [0.12.4]: https://github.com/Automattic/jetpack-ai-client/compare/v0.12.3...v0.12.4
 [0.12.3]: https://github.com/Automattic/jetpack-ai-client/compare/v0.12.2...v0.12.3
 [0.12.2]: https://github.com/Automattic/jetpack-ai-client/compare/v0.12.1...v0.12.2

package/build/components/ai-control/ai-control.d.ts

@@ -6,6 +6,7 @@ import './style.scss';
 import type { RequestingStateProp } from '../../types.js';
 import type { ReactElement } from 'react';
 type AIControlProps = {
+    className?: string;
     disabled?: boolean;
     value: string;
     placeholder?: string;
@@ -17,6 +18,7 @@ type AIControlProps = {
     actions?: ReactElement;
     message?: ReactElement;
     promptUserInputRef?: React.MutableRefObject<HTMLInputElement>;
+    wrapperRef?: React.MutableRefObject<HTMLDivElement | null>;
 };
 /**
  * Base AIControl component. Contains the main structure of the control component and slots for banner, error, actions and message.
@@ -24,5 +26,5 @@ type AIControlProps = {
  * @param {AIControlProps} props - Component props
  * @returns {ReactElement}       Rendered component
  */
-export default function AIControl({ disabled, value, placeholder, isTransparent, state, onChange, banner, error, actions, message, promptUserInputRef, }: AIControlProps): ReactElement;
+export default function AIControl({ className, disabled, value, placeholder, isTransparent, state, onChange, banner, error, actions, message, promptUserInputRef, wrapperRef, }: AIControlProps): ReactElement;
 export {};

package/build/components/ai-control/ai-control.js

@@ -15,8 +15,8 @@ import './style.scss';
  * @param {AIControlProps} props - Component props
  * @returns {ReactElement}       Rendered component
  */
-export default function AIControl({ disabled = false, value = '', placeholder = '', isTransparent = false, state = 'init', onChange, banner = null, error = null, actions = null, message = null, promptUserInputRef = null, }) {
-    return (_jsxs("div", { className: "jetpack-components-ai-control__container-wrapper", children: [error, _jsxs("div", { className: "jetpack-components-ai-control__container", children: [banner, _jsxs("div", { className: classNames('jetpack-components-ai-control__wrapper', {
+export default function AIControl({ className, disabled = false, value = '', placeholder = '', isTransparent = false, state = 'init', onChange, banner = null, error = null, actions = null, message = null, promptUserInputRef = null, wrapperRef = null, }) {
+    return (_jsxs("div", { className: classNames('jetpack-components-ai-control__container-wrapper', className), ref: wrapperRef, children: [error, _jsxs("div", { className: "jetpack-components-ai-control__container", children: [banner, _jsxs("div", { className: classNames('jetpack-components-ai-control__wrapper', {
                             'is-transparent': isTransparent,
                         }), children: [_jsx(AiStatusIndicator, { state: state }), _jsx("div", { className: "jetpack-components-ai-control__input-wrapper", children: _jsx(PlainText, { value: value, onChange: onChange, placeholder: placeholder, className: "jetpack-components-ai-control__input", disabled: disabled, ref: promptUserInputRef }) }), actions] }), message] })] }));
 }

package/build/components/ai-control/extension-ai-control.d.ts

@@ -4,8 +4,9 @@ import './style.scss';
  * Types
  */
 import type { RequestingStateProp } from '../../types.js';
-import type { ReactElement } from 'react';
+import type { ReactElement, MouseEvent } from 'react';
 type ExtensionAIControlProps = {
+    className?: string;
     disabled?: boolean;
     value: string;
     placeholder?: string;
@@ -16,12 +17,14 @@ type ExtensionAIControlProps = {
     error?: string;
     requestsRemaining?: number;
     showUpgradeMessage?: boolean;
+    wrapperRef?: React.MutableRefObject<HTMLDivElement | null>;
     onChange?: (newValue: string) => void;
     onSend?: (currentValue: string) => void;
     onStop?: () => void;
     onClose?: () => void;
     onUndo?: () => void;
-    onUpgrade?: () => void;
+    onUpgrade?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onTryAgain?: () => void;
 };
 /**
  * ExtensionAIControl component. Used by the AI Assistant inline extensions, adding logic and components to the base AIControl component.
@@ -30,6 +33,6 @@ type ExtensionAIControlProps = {
  * @param {React.MutableRefObject} ref     - Ref to the component
  * @returns {ReactElement}                 Rendered component
  */
-export declare function ExtensionAIControl({ disabled, value, placeholder, showButtonLabels, isTransparent, state, showGuideLine, error, requestsRemaining, showUpgradeMessage, onChange, onSend, onStop, onClose, onUndo, onUpgrade, }: ExtensionAIControlProps, ref: React.MutableRefObject<HTMLInputElement>): ReactElement;
+export declare function ExtensionAIControl({ className, disabled, value, placeholder, showButtonLabels, isTransparent, state, showGuideLine, error, requestsRemaining, showUpgradeMessage, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, onTryAgain, }: ExtensionAIControlProps, ref: React.MutableRefObject<HTMLInputElement>): ReactElement;
 declare const _default: React.ForwardRefExoticComponent<ExtensionAIControlProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/build/components/ai-control/extension-ai-control.js

@@ -21,7 +21,7 @@ import './style.scss';
  * @param {React.MutableRefObject} ref     - Ref to the component
  * @returns {ReactElement}                 Rendered component
  */
-export function ExtensionAIControl({ disabled = false, value = '', placeholder = '', showButtonLabels = true, isTransparent = false, state = 'init', showGuideLine = false, error, requestsRemaining, showUpgradeMessage = false, onChange, onSend, onStop, onClose, onUndo, onUpgrade, }, ref) {
+export function ExtensionAIControl({ className, disabled = false, value = '', placeholder = '', showButtonLabels = true, isTransparent = false, state = 'init', showGuideLine = false, error, requestsRemaining, showUpgradeMessage = false, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, onTryAgain, }, ref) {
     const loading = state === 'requesting' || state === 'suggesting';
     const [editRequest, setEditRequest] = useState(false);
     const [lastValue, setLastValue] = useState(value || null);
@@ -61,9 +61,12 @@ export function ExtensionAIControl({ disabled = false, value = '', placeholder =
     const undoHandler = useCallback(() => {
         onUndo?.();
     }, [onUndo]);
-    const upgradeHandler = useCallback(() => {
-        onUpgrade?.();
+    const upgradeHandler = useCallback((event) => {
+        onUpgrade?.(event);
     }, [onUpgrade]);
+    const tryAgainHandler = useCallback(() => {
+        onTryAgain?.();
+    }, [onTryAgain]);
     useKeyboardShortcut('enter', e => {
         e.preventDefault();
         sendHandler();
@@ -73,7 +76,7 @@ export function ExtensionAIControl({ disabled = false, value = '', placeholder =
     const actions = (_jsx(_Fragment, { children: loading ? (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: stopHandler, variant: "secondary", label: __('Stop request', 'jetpack-ai-client'), children: showButtonLabels ? __('Stop', 'jetpack-ai-client') : _jsx(Icon, { icon: closeSmall }) })) : (_jsxs(_Fragment, { children: [value?.length > 0 && (_jsx("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: _jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: sendHandler, variant: "primary", disabled: !value?.length || disabled, label: __('Send request', 'jetpack-ai-client'), children: showButtonLabels ? (__('Generate', 'jetpack-ai-client')) : (_jsx(Icon, { icon: arrowUp })) }) })), value?.length <= 0 && state === 'done' && (_jsx("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: _jsxs(ButtonGroup, { children: [_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", label: __('Undo', 'jetpack-ai-client'), onClick: undoHandler, tooltipPosition: "top", children: _jsx(Icon, { icon: undo }) }), _jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", label: __('Close', 'jetpack-ai-client'), onClick: closeHandler, variant: "tertiary", children: __('Close', 'jetpack-ai-client') })] }) }))] })) }));
     let message = null;
     if (error) {
-        message = _jsx(ErrorMessage, { error: error, onTryAgainClick: sendHandler });
+        message = _jsx(ErrorMessage, { error: error, onTryAgainClick: tryAgainHandler });
     }
     else if (showUpgradeMessage) {
         message = (_jsx(UpgradeMessage, { requestsRemaining: requestsRemaining, onUpgradeClick: upgradeHandler }));
@@ -81,6 +84,6 @@ export function ExtensionAIControl({ disabled = false, value = '', placeholder =
     else if (showGuideLine) {
         message = _jsx(GuidelineMessage, {});
     }
-    return (_jsx(AIControl, { disabled: disabled || loading, value: value, placeholder: placeholder, isTransparent: isTransparent, state: state, onChange: changeHandler, actions: actions, message: message, promptUserInputRef: promptUserInputRef }));
+    return (_jsx(AIControl, { className: className, disabled: disabled || loading, value: value, placeholder: placeholder, isTransparent: isTransparent, state: state, onChange: changeHandler, actions: actions, message: message, promptUserInputRef: promptUserInputRef, wrapperRef: wrapperRef }));
 }
 export default forwardRef(ExtensionAIControl);

package/build/components/message/index.d.ts

@@ -21,7 +21,7 @@ export type MessageProps = {
 };
 export type UpgradeMessageProps = {
     requestsRemaining: number;
-    onUpgradeClick: () => void;
+    onUpgradeClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
 };
 export type ErrorMessageProps = {
     error?: string;

package/build/components/message/index.js

@@ -65,5 +65,5 @@ export function ErrorMessage({ error, onTryAgainClick }) {
     const errorMessage = error || __('Something went wrong', 'jetpack-ai-client');
     return (_jsxs(Message, { severity: MESSAGE_SEVERITY_ERROR, children: [_jsx("span", { children: sprintf(
                 // translators: %1$d: A dynamic error message
-                __('Error: %1$s.', 'jetpack-ai-client'), errorMessage) }), _jsx(Button, { variant: "link", onClick: onTryAgainClick, children: __('Try Again', 'jetpack-ai-client') })] }));
+                __('Error: %1$s', 'jetpack-ai-client'), errorMessage) }), _jsx(Button, { variant: "link", onClick: onTryAgainClick, children: __('Try Again', 'jetpack-ai-client') })] }));
 }

package/build/hooks/use-image-generator/index.d.ts

@@ -1,8 +1,9 @@
 declare const useImageGenerator: () => {
-    generateImage: ({ feature, postContent, responseFormat, }: {
+    generateImage: ({ feature, postContent, responseFormat, userPrompt, }: {
         feature: string;
         postContent: string;
         responseFormat?: 'url' | 'b64_json';
+        userPrompt?: string;
     }) => Promise<{
         data: {
             [key: string]: string;

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

@@ -7,20 +7,57 @@ import debugFactory from 'debug';
  */
 import requestJwt from '../../jwt/index.js';
 const debug = debugFactory('ai-client:use-image-generator');
-const useImageGenerator = () => {
-    const generateImage = async function ({ feature, postContent, responseFormat = 'url', }) {
-        let token = '';
-        try {
-            token = (await requestJwt()).token;
-        }
-        catch (error) {
-            debug('Error getting token: %o', error);
-            return Promise.reject(error);
-        }
-        try {
-            debug('Generating image');
-            // TODO: fine tune the prompt as we move forward
-            const imageGenerationPrompt = `I need a cover image for a blog post.
+/**
+ * Cut the post content on a given lenght so the total length of the prompt is not longer than 4000 characters.
+ * @param {string} content - the content to be truncated
+ * @param {number} currentPromptLength - the length of the prompt already in use
+ * @returns {string} a truncated version of the content respecting the prompt length limit
+ */
+const truncateContent = (content, currentPromptLength) => {
+    const maxLength = 4000;
+    const remainingLength = maxLength - currentPromptLength;
+    // 6 is the length of the ellipsis and the space before it
+    return content.length > remainingLength
+        ? content.substring(0, remainingLength - 6) + ` [...]`
+        : content;
+};
+/**
+ * Create the prompt string based on the provided context.
+ * @param {string} postContent - the content of the post
+ * @param {string} userPrompt - the user prompt for the image generation, if provided. Max length is 1000 characters, will be truncated.
+ * @returns {string} the prompt string
+ */
+const getImageGenerationPrompt = (postContent, userPrompt) => {
+    /**
+     * If the user provide some custom prompt for the image generation,
+     * we will use it, add the post content as additional context and
+     * provide some guardrails for the generation.
+     */
+    if (userPrompt) {
+        const imageGenerationPrompt = `I need a cover image for a blog post based on this user prompt:
+
+${userPrompt.length > 1000 ? userPrompt.substring(0, 1000) : userPrompt}
+
+Before creating the image, identify the main topic of the user prompt and relate it to the post content.
+Do not represent the whole content in one image, keep it simple and just represent one single idea.
+Do not add details, detailed explanations or highlights from the content, just represent the main idea as if it was a photograph.
+Do not use collages or compositions with multiple elements or scenes. Stick to one single scene. Do not compose unrealistic scenes.
+If the content describes facts, objects or concepts from the real world, represent them on a realistic style and do not make unreal compositions.
+If the content is more abstract, use a more abstract style to represent the main idea.
+Make sure the light and the style are visually appealing.
+Do not add text to the image.
+
+For additional context, this is the post content:
+
+`;
+        // truncating the content so the whole prompt is not longer than 4000 characters, the model limit.
+        return imageGenerationPrompt + truncateContent(postContent, imageGenerationPrompt.length);
+    }
+    /**
+     * When the user does not provide a custom prompt, we will use the
+     * standard one, based solely on the post content.
+     */
+    const imageGenerationPrompt = `I need a cover image for a blog post.
 Before creating the image, identify the main topic of the content and only represent it.
 Do not represent the whole content in one image, keep it simple and just represent one single idea.
 Do not add details, detailed explanations or highlights from the content, just represent the main idea as if it was a photograph.
@@ -32,7 +69,23 @@ Do not add text to the image.
 
 This is the post content:
 
-` + (postContent.length > 3000 ? postContent.substring(0, 3000) + ` [...]` : postContent); // truncating the content so the whole prompt is not longer than 4000 characters, the model limit.
+`;
+    // truncating the content so the whole prompt is not longer than 4000 characters, the model limit.
+    return imageGenerationPrompt + truncateContent(postContent, imageGenerationPrompt.length);
+};
+const useImageGenerator = () => {
+    const generateImage = async function ({ feature, postContent, responseFormat = 'url', userPrompt, }) {
+        let token = '';
+        try {
+            token = (await requestJwt()).token;
+        }
+        catch (error) {
+            debug('Error getting token: %o', error);
+            return Promise.reject(error);
+        }
+        try {
+            debug('Generating image');
+            const imageGenerationPrompt = getImageGenerationPrompt(postContent, userPrompt);
             const URL = 'https://public-api.wordpress.com/wpcom/v2/jetpack-ai-image';
             const body = {
                 prompt: imageGenerationPrompt,

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.12.4",
+	"version": "0.13.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,11 +23,11 @@
 	},
 	"type": "module",
 	"devDependencies": {
-		"@storybook/addon-actions": "8.0.6",
-		"@storybook/blocks": "8.0.6",
-		"@storybook/preview-api": "8.0.6",
-		"@storybook/react": "8.0.6",
-		"@types/markdown-it": "14.0.0",
+		"@storybook/addon-actions": "8.0.9",
+		"@storybook/blocks": "8.0.9",
+		"@storybook/preview-api": "8.0.9",
+		"@storybook/react": "8.0.9",
+		"@types/markdown-it": "14.0.1",
 		"@types/turndown": "5.0.4",
 		"jest": "^29.6.2",
 		"jest-environment-jsdom": "29.7.0",
@@ -42,19 +42,19 @@
 	"main": "./build/index.js",
 	"types": "./build/index.d.ts",
 	"dependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.23",
-		"@automattic/jetpack-connection": "^0.33.8",
-		"@automattic/jetpack-shared-extension-utils": "^0.14.10",
+		"@automattic/jetpack-base-styles": "^0.6.24",
+		"@automattic/jetpack-connection": "^0.33.10",
+		"@automattic/jetpack-shared-extension-utils": "^0.14.12",
 		"@microsoft/fetch-event-source": "2.0.1",
-		"@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",
+		"@types/react": "18.3.1",
+		"@wordpress/api-fetch": "6.53.0",
+		"@wordpress/block-editor": "12.24.0",
+		"@wordpress/components": "27.4.0",
+		"@wordpress/compose": "6.33.0",
+		"@wordpress/data": "9.26.0",
+		"@wordpress/element": "5.33.0",
+		"@wordpress/i18n": "4.56.0",
+		"@wordpress/icons": "9.47.0",
 		"classnames": "2.3.2",
 		"debug": "4.3.4",
 		"markdown-it": "14.0.0",

package/src/components/ai-control/ai-control.tsx

@@ -16,6 +16,7 @@ import type { RequestingStateProp } from '../../types.js';
 import type { ReactElement } from 'react';
 
 type AIControlProps = {
+	className?: string;
 	disabled?: boolean;
 	value: string;
 	placeholder?: string;
@@ -27,6 +28,7 @@ type AIControlProps = {
 	actions?: ReactElement;
 	message?: ReactElement;
 	promptUserInputRef?: React.MutableRefObject< HTMLInputElement >;
+	wrapperRef?: React.MutableRefObject< HTMLDivElement | null >;
 };
 
 /**
@@ -36,6 +38,7 @@ type AIControlProps = {
  * @returns {ReactElement}       Rendered component
  */
 export default function AIControl( {
+	className,
 	disabled = false,
 	value = '',
 	placeholder = '',
@@ -47,9 +50,13 @@ export default function AIControl( {
 	actions = null,
 	message = null,
 	promptUserInputRef = null,
+	wrapperRef = null,
 }: AIControlProps ): ReactElement {
 	return (
-		<div className="jetpack-components-ai-control__container-wrapper">
+		<div
+			className={ classNames( 'jetpack-components-ai-control__container-wrapper', className ) }
+			ref={ wrapperRef }
+		>
 			{ error }
 			<div className="jetpack-components-ai-control__container">
 				{ banner }

package/src/components/ai-control/extension-ai-control.tsx

@@ -17,9 +17,10 @@ import './style.scss';
  * Types
  */
 import type { RequestingStateProp } from '../../types.js';
-import type { ReactElement } from 'react';
+import type { ReactElement, MouseEvent } from 'react';
 
 type ExtensionAIControlProps = {
+	className?: string;
 	disabled?: boolean;
 	value: string;
 	placeholder?: string;
@@ -30,12 +31,14 @@ type ExtensionAIControlProps = {
 	error?: string;
 	requestsRemaining?: number;
 	showUpgradeMessage?: boolean;
+	wrapperRef?: React.MutableRefObject< HTMLDivElement | null >;
 	onChange?: ( newValue: string ) => void;
 	onSend?: ( currentValue: string ) => void;
 	onStop?: () => void;
 	onClose?: () => void;
 	onUndo?: () => void;
-	onUpgrade?: () => void;
+	onUpgrade?: ( event: MouseEvent< HTMLButtonElement > ) => void;
+	onTryAgain?: () => void;
 };
 
 /**
@@ -47,6 +50,7 @@ type ExtensionAIControlProps = {
  */
 export function ExtensionAIControl(
 	{
+		className,
 		disabled = false,
 		value = '',
 		placeholder = '',
@@ -57,12 +61,14 @@ export function ExtensionAIControl(
 		error,
 		requestsRemaining,
 		showUpgradeMessage = false,
+		wrapperRef,
 		onChange,
 		onSend,
 		onStop,
 		onClose,
 		onUndo,
 		onUpgrade,
+		onTryAgain,
 	}: ExtensionAIControlProps,
 	ref: React.MutableRefObject< HTMLInputElement >
 ): ReactElement {
@@ -116,9 +122,16 @@ export function ExtensionAIControl(
 		onUndo?.();
 	}, [ onUndo ] );
 
-	const upgradeHandler = useCallback( () => {
-		onUpgrade?.();
-	}, [ onUpgrade ] );
+	const upgradeHandler = useCallback(
+		( event: MouseEvent< HTMLButtonElement > ) => {
+			onUpgrade?.( event );
+		},
+		[ onUpgrade ]
+	);
+
+	const tryAgainHandler = useCallback( () => {
+		onTryAgain?.();
+	}, [ onTryAgain ] );
 
 	useKeyboardShortcut(
 		'enter',
@@ -190,7 +203,7 @@ export function ExtensionAIControl(
 
 	let message = null;
 	if ( error ) {
-		message = <ErrorMessage error={ error } onTryAgainClick={ sendHandler } />;
+		message = <ErrorMessage error={ error } onTryAgainClick={ tryAgainHandler } />;
 	} else if ( showUpgradeMessage ) {
 		message = (
 			<UpgradeMessage requestsRemaining={ requestsRemaining } onUpgradeClick={ upgradeHandler } />
@@ -201,6 +214,7 @@ export function ExtensionAIControl(
 
 	return (
 		<AIControl
+			className={ className }
 			disabled={ disabled || loading }
 			value={ value }
 			placeholder={ placeholder }
@@ -210,6 +224,7 @@ export function ExtensionAIControl(
 			actions={ actions }
 			message={ message }
 			promptUserInputRef={ promptUserInputRef }
+			wrapperRef={ wrapperRef }
 		/>
 	);
 }

package/src/components/message/index.tsx

@@ -39,7 +39,7 @@ export type MessageProps = {
 
 export type UpgradeMessageProps = {
 	requestsRemaining: number;
-	onUpgradeClick: () => void;
+	onUpgradeClick: ( event?: React.MouseEvent< HTMLButtonElement > ) => void;
 };
 
 export type ErrorMessageProps = {
@@ -145,7 +145,7 @@ export function ErrorMessage( { error, onTryAgainClick }: ErrorMessageProps ): R
 			<span>
 				{ sprintf(
 					// translators: %1$d: A dynamic error message
-					__( 'Error: %1$s.', 'jetpack-ai-client' ),
+					__( 'Error: %1$s', 'jetpack-ai-client' ),
 					errorMessage
 				) }
 			</span>

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

@@ -9,15 +9,86 @@ import requestJwt from '../../jwt/index.js';
 
 const debug = debugFactory( 'ai-client:use-image-generator' );
 
+/**
+ * Cut the post content on a given lenght so the total length of the prompt is not longer than 4000 characters.
+ * @param {string} content - the content to be truncated
+ * @param {number} currentPromptLength - the length of the prompt already in use
+ * @returns {string} a truncated version of the content respecting the prompt length limit
+ */
+const truncateContent = ( content: string, currentPromptLength: number ): string => {
+	const maxLength = 4000;
+	const remainingLength = maxLength - currentPromptLength;
+	// 6 is the length of the ellipsis and the space before it
+	return content.length > remainingLength
+		? content.substring( 0, remainingLength - 6 ) + ` [...]`
+		: content;
+};
+
+/**
+ * Create the prompt string based on the provided context.
+ * @param {string} postContent - the content of the post
+ * @param {string} userPrompt - the user prompt for the image generation, if provided. Max length is 1000 characters, will be truncated.
+ * @returns {string} the prompt string
+ */
+const getImageGenerationPrompt = ( postContent: string, userPrompt?: string ): string => {
+	/**
+	 * If the user provide some custom prompt for the image generation,
+	 * we will use it, add the post content as additional context and
+	 * provide some guardrails for the generation.
+	 */
+	if ( userPrompt ) {
+		const imageGenerationPrompt = `I need a cover image for a blog post based on this user prompt:
+
+${ userPrompt.length > 1000 ? userPrompt.substring( 0, 1000 ) : userPrompt }
+
+Before creating the image, identify the main topic of the user prompt and relate it to the post content.
+Do not represent the whole content in one image, keep it simple and just represent one single idea.
+Do not add details, detailed explanations or highlights from the content, just represent the main idea as if it was a photograph.
+Do not use collages or compositions with multiple elements or scenes. Stick to one single scene. Do not compose unrealistic scenes.
+If the content describes facts, objects or concepts from the real world, represent them on a realistic style and do not make unreal compositions.
+If the content is more abstract, use a more abstract style to represent the main idea.
+Make sure the light and the style are visually appealing.
+Do not add text to the image.
+
+For additional context, this is the post content:
+
+`;
+		// truncating the content so the whole prompt is not longer than 4000 characters, the model limit.
+		return imageGenerationPrompt + truncateContent( postContent, imageGenerationPrompt.length );
+	}
+
+	/**
+	 * When the user does not provide a custom prompt, we will use the
+	 * standard one, based solely on the post content.
+	 */
+	const imageGenerationPrompt = `I need a cover image for a blog post.
+Before creating the image, identify the main topic of the content and only represent it.
+Do not represent the whole content in one image, keep it simple and just represent one single idea.
+Do not add details, detailed explanations or highlights from the content, just represent the main idea as if it was a photograph.
+Do not use collages or compositions with multiple elements or scenes. Stick to one single scene. Do not compose unrealistic scenes.
+If the content describes facts, objects or concepts from the real world, represent them on a realistic style and do not make unreal compositions.
+If the content is more abstract, use a more abstract style to represent the main idea.
+Make sure the light and the style are visually appealing.
+Do not add text to the image.
+
+This is the post content:
+
+`;
+	// truncating the content so the whole prompt is not longer than 4000 characters, the model limit.
+	return imageGenerationPrompt + truncateContent( postContent, imageGenerationPrompt.length );
+};
+
 const useImageGenerator = () => {
 	const generateImage = async function ( {
 		feature,
 		postContent,
 		responseFormat = 'url',
+		userPrompt,
 	}: {
 		feature: string;
 		postContent: string;
 		responseFormat?: 'url' | 'b64_json';
+		userPrompt?: string;
 	} ): Promise< { data: Array< { [ key: string ]: string } > } > {
 		let token = '';
 
@@ -31,21 +102,7 @@ const useImageGenerator = () => {
 		try {
 			debug( 'Generating image' );
 
-			// TODO: fine tune the prompt as we move forward
-			const imageGenerationPrompt =
-				`I need a cover image for a blog post.
-Before creating the image, identify the main topic of the content and only represent it.
-Do not represent the whole content in one image, keep it simple and just represent one single idea.
-Do not add details, detailed explanations or highlights from the content, just represent the main idea as if it was a photograph.
-Do not use collages or compositions with multiple elements or scenes. Stick to one single scene. Do not compose unrealistic scenes.
-If the content describes facts, objects or concepts from the real world, represent them on a realistic style and do not make unreal compositions.
-If the content is more abstract, use a more abstract style to represent the main idea.
-Make sure the light and the style are visually appealing.
-Do not add text to the image.
-
-This is the post content:
-
-` + ( 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 imageGenerationPrompt = getImageGenerationPrompt( postContent, userPrompt );
 
 			const URL = 'https://public-api.wordpress.com/wpcom/v2/jetpack-ai-image';