@automattic/jetpack-ai-client 0.12.3 → 0.13.0

package/CHANGELOG.md

@@ -5,6 +5,18 @@ 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.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]
+
 ## [0.12.3] - 2024-04-25
 ### Changed
 - AI Client: Separate AIControl UI from block logic. [#36967]
@@ -294,6 +306,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.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
 [0.12.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.12.0...v0.12.1

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

@@ -17,6 +17,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 +25,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({ 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({ 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: "jetpack-components-ai-control__container-wrapper", 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

@@ -16,6 +16,7 @@ type ExtensionAIControlProps = {
     error?: string;
     requestsRemaining?: number;
     showUpgradeMessage?: boolean;
+    wrapperRef?: React.MutableRefObject<HTMLDivElement | null>;
     onChange?: (newValue: string) => void;
     onSend?: (currentValue: string) => void;
     onStop?: () => void;
@@ -30,6 +31,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({ disabled, value, placeholder, showButtonLabels, isTransparent, state, showGuideLine, error, requestsRemaining, showUpgradeMessage, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, }: 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({ disabled = false, value = '', placeholder = '', showButtonLabels = true, isTransparent = false, state = 'init', showGuideLine = false, error, requestsRemaining, showUpgradeMessage = false, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, }, ref) {
     const loading = state === 'requesting' || state === 'suggesting';
     const [editRequest, setEditRequest] = useState(false);
     const [lastValue, setLastValue] = useState(value || null);
@@ -81,6 +81,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, { 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/index.d.ts

@@ -1,4 +1,4 @@
-export { AIControl, BlockAIControl } from './ai-control/index.js';
+export { AIControl, BlockAIControl, ExtensionAIControl } from './ai-control/index.js';
 export { default as AiStatusIndicator } from './ai-status-indicator/index.js';
 export { default as AudioDurationDisplay } from './audio-duration-display/index.js';
 export { GuidelineMessage, UpgradeMessage, ErrorMessage, default as FooterMessage, } from './message/index.js';

package/build/components/index.js

@@ -1,4 +1,4 @@
-export { AIControl, BlockAIControl } from './ai-control/index.js';
+export { AIControl, BlockAIControl, ExtensionAIControl } from './ai-control/index.js';
 export { default as AiStatusIndicator } from './ai-status-indicator/index.js';
 export { default as AudioDurationDisplay } from './audio-duration-display/index.js';
 export { GuidelineMessage, UpgradeMessage, ErrorMessage, default as FooterMessage, } from './message/index.js';

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.3",
+	"version": "0.13.0",
 	"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.9",
+		"@automattic/jetpack-shared-extension-utils": "^0.14.11",
 		"@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

@@ -27,6 +27,7 @@ type AIControlProps = {
 	actions?: ReactElement;
 	message?: ReactElement;
 	promptUserInputRef?: React.MutableRefObject< HTMLInputElement >;
+	wrapperRef?: React.MutableRefObject< HTMLDivElement | null >;
 };
 
 /**
@@ -47,9 +48,10 @@ 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="jetpack-components-ai-control__container-wrapper" ref={ wrapperRef }>
 			{ error }
 			<div className="jetpack-components-ai-control__container">
 				{ banner }

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

@@ -30,6 +30,7 @@ type ExtensionAIControlProps = {
 	error?: string;
 	requestsRemaining?: number;
 	showUpgradeMessage?: boolean;
+	wrapperRef?: React.MutableRefObject< HTMLDivElement | null >;
 	onChange?: ( newValue: string ) => void;
 	onSend?: ( currentValue: string ) => void;
 	onStop?: () => void;
@@ -57,6 +58,7 @@ export function ExtensionAIControl(
 		error,
 		requestsRemaining,
 		showUpgradeMessage = false,
+		wrapperRef,
 		onChange,
 		onSend,
 		onStop,
@@ -210,6 +212,7 @@ export function ExtensionAIControl(
 			actions={ actions }
 			message={ message }
 			promptUserInputRef={ promptUserInputRef }
+			wrapperRef={ wrapperRef }
 		/>
 	);
 }

package/src/components/index.ts

@@ -1,4 +1,4 @@
-export { AIControl, BlockAIControl } from './ai-control/index.js';
+export { AIControl, BlockAIControl, ExtensionAIControl } from './ai-control/index.js';
 export { default as AiStatusIndicator } from './ai-status-indicator/index.js';
 export { default as AudioDurationDisplay } from './audio-duration-display/index.js';
 export {

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';