@automattic/jetpack-ai-client 0.13.1 → 0.14.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.14.1] - 2024-05-27
+### Changed
+- AI Client: Add paragraph tweaks to Markdown conversion libs. [#37461]
+- AI Featured Image: add type info. [#37474]
+
+## [0.14.0] - 2024-05-20
+### Added
+- AI Client: Expose HTML render rules type. [#37386]
+- AI Featured Image: Support Stable Diffusion image generation. [#37413]
+
+### Changed
+- AI Client: Change default behavior of Message components [#37365]
+- Updated package dependencies. [#37379] [#37380]
+
 ## [0.13.1] - 2024-05-13
 ### Added
 - AI Client: Add className to AI Control component. [#37322]
@@ -314,6 +328,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.14.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.14.0...v0.14.1
+[0.14.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.13.1...v0.14.0
 [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

package/build/ask-question/sync.d.ts

@@ -0,0 +1,30 @@
+import { AskQuestionOptionsArgProps } from './index.js';
+import type { PromptProp } from '../types.js';
+/**
+ * The response data from the AI assistant when doing a sync, not-streamed question.
+ */
+export type ResponseData = {
+    choices: Array<{
+        message: {
+            content: string;
+        };
+    }>;
+};
+/**
+ * A function that asks a question without streaming.
+ *
+ * @param {PromptProp} question - The question to ask. It can be a simple string or an array of PromptMessageItemProps objects.
+ * @param {AskQuestionOptionsArgProps} options - An optional object for additional configuration: postId, feature, model.
+ * @returns {Promise<ResponseData>} - A promise that resolves to an instance of the ResponseData
+ * @example
+ * const question = "What is the meaning of life?";
+ * const options = {
+ *   feature: 'ai-featured-image',
+ *   model: 'gpt-4-turbo'
+ * }
+ * askQuestionSync( question, options ).then( responseData => {
+ *    // access the choices array on the response data
+ *    const content = responseData.choices[ 0 ].message.content;
+ * } );
+ */
+export default function askQuestionSync(question: PromptProp, { postId, feature, model }?: AskQuestionOptionsArgProps): Promise<ResponseData>;

package/build/ask-question/sync.js

@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import debugFactory from 'debug';
+/*
+ * Types & constants
+ */
+import requestJwt from '../jwt/index.js';
+const debug = debugFactory('jetpack-ai-client:ask-question-sync');
+/**
+ * A function that asks a question without streaming.
+ *
+ * @param {PromptProp} question - The question to ask. It can be a simple string or an array of PromptMessageItemProps objects.
+ * @param {AskQuestionOptionsArgProps} options - An optional object for additional configuration: postId, feature, model.
+ * @returns {Promise<ResponseData>} - A promise that resolves to an instance of the ResponseData
+ * @example
+ * const question = "What is the meaning of life?";
+ * const options = {
+ *   feature: 'ai-featured-image',
+ *   model: 'gpt-4-turbo'
+ * }
+ * askQuestionSync( question, options ).then( responseData => {
+ *    // access the choices array on the response data
+ *    const content = responseData.choices[ 0 ].message.content;
+ * } );
+ */
+export default async function askQuestionSync(question, { postId = null, feature, model } = {}) {
+    debug('Asking question with no streaming: %o. options: %o', question, {
+        postId,
+        feature,
+        model,
+    });
+    /**
+     * The URL to the AI assistant query endpoint.
+     */
+    const URL = 'https://public-api.wordpress.com/wpcom/v2/jetpack-ai-query';
+    let token = null;
+    try {
+        token = (await requestJwt()).token;
+    }
+    catch (error) {
+        debug('Error getting token: %o', error);
+        return Promise.reject(error);
+    }
+    const body = {
+        question: question,
+        stream: false,
+        postId,
+        feature,
+        model,
+    };
+    const headers = {
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json',
+    };
+    const data = await fetch(URL, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(body),
+    }).then(response => response.json());
+    if (data?.data?.status && data?.data?.status > 200) {
+        debug('Error generating prompt: %o', data);
+        return Promise.reject(data);
+    }
+    return data;
+}

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

@@ -3,7 +3,7 @@ import './style.scss';
 /**
  * Types
  */
-import type { RequestingStateProp } from '../../types.js';
+import type { RequestingErrorProps, RequestingStateProp } from '../../types.js';
 import type { ReactElement, MouseEvent } from 'react';
 type ExtensionAIControlProps = {
     className?: string;
@@ -14,7 +14,7 @@ type ExtensionAIControlProps = {
     isTransparent?: boolean;
     state?: RequestingStateProp;
     showGuideLine?: boolean;
-    error?: string;
+    error?: RequestingErrorProps;
     requestsRemaining?: number;
     showUpgradeMessage?: boolean;
     wrapperRef?: React.MutableRefObject<HTMLDivElement | null>;

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

@@ -75,8 +75,8 @@ export function ExtensionAIControl({ className, disabled = false, value = '', pl
     });
     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: tryAgainHandler });
+    if (error?.message) {
+        message = (_jsx(ErrorMessage, { error: error.message, code: error.code, onTryAgainClick: tryAgainHandler, onUpgradeClick: upgradeHandler }));
     }
     else if (showUpgradeMessage) {
         message = (_jsx(UpgradeMessage, { requestsRemaining: requestsRemaining, onUpgradeClick: upgradeHandler }));

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

@@ -5,6 +5,7 @@ import './style.scss';
 /**
  * Types
  */
+import type { SuggestionErrorCode } from '../../types.js';
 import type React from 'react';
 export declare const MESSAGE_SEVERITY_WARNING = "warning";
 export declare const MESSAGE_SEVERITY_ERROR = "error";
@@ -19,13 +20,17 @@ export type MessageProps = {
     onSidebarIconClick?: () => void;
     children: React.ReactNode;
 };
+export type OnUpgradeClick = (event?: React.MouseEvent<HTMLButtonElement>) => void;
 export type UpgradeMessageProps = {
     requestsRemaining: number;
-    onUpgradeClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    severity?: MessageSeverityProp;
+    onUpgradeClick: OnUpgradeClick;
 };
 export type ErrorMessageProps = {
     error?: string;
+    code?: SuggestionErrorCode;
     onTryAgainClick: () => void;
+    onUpgradeClick: OnUpgradeClick;
 };
 /**
  * React component to render a block message.
@@ -46,12 +51,12 @@ export declare function GuidelineMessage(): React.ReactElement;
  * @param {number} requestsRemaining - Number of requests remaining.
  * @returns {React.ReactElement } - Message component.
  */
-export declare function UpgradeMessage({ requestsRemaining, onUpgradeClick, }: UpgradeMessageProps): React.ReactElement;
+export declare function UpgradeMessage({ requestsRemaining, severity, onUpgradeClick, }: UpgradeMessageProps): React.ReactElement;
 /**
  * React component to render an error message
  *
  * @param {number} requestsRemaining - Number of requests remaining.
  * @returns {React.ReactElement } - Message component.
  */
-export declare function ErrorMessage({ error, onTryAgainClick }: ErrorMessageProps): React.ReactElement;
+export declare function ErrorMessage({ error, code, onTryAgainClick, onUpgradeClick, }: ErrorMessageProps): React.ReactElement;
 export {};

package/build/components/message/index.js

@@ -11,6 +11,7 @@ import classNames from 'classnames';
  */
 import './style.scss';
 import errorExclamation from '../../icons/error-exclamation.js';
+import { ERROR_QUOTA_EXCEEDED } from '../../types.js';
 export const MESSAGE_SEVERITY_WARNING = 'warning';
 export const MESSAGE_SEVERITY_ERROR = 'error';
 export const MESSAGE_SEVERITY_SUCCESS = 'success';
@@ -50,8 +51,12 @@ export function GuidelineMessage() {
  * @param {number} requestsRemaining - Number of requests remaining.
  * @returns {React.ReactElement } - Message component.
  */
-export function UpgradeMessage({ requestsRemaining, onUpgradeClick, }) {
-    return (_jsxs(Message, { severity: MESSAGE_SEVERITY_WARNING, children: [_jsx("span", { children: sprintf(
+export function UpgradeMessage({ requestsRemaining, severity, onUpgradeClick, }) {
+    let messageSeverity = severity;
+    if (messageSeverity == null) {
+        messageSeverity = requestsRemaining > 0 ? MESSAGE_SEVERITY_INFO : MESSAGE_SEVERITY_WARNING;
+    }
+    return (_jsxs(Message, { severity: messageSeverity, children: [_jsx("span", { children: sprintf(
                 // translators: %1$d: number of requests remaining
                 __('You have %1$d free requests remaining.', 'jetpack-ai-client'), requestsRemaining) }), _jsx(Button, { variant: "link", onClick: onUpgradeClick, children: __('Upgrade now', 'jetpack-ai-client') })] }));
 }
@@ -61,9 +66,9 @@ export function UpgradeMessage({ requestsRemaining, onUpgradeClick, }) {
  * @param {number} requestsRemaining - Number of requests remaining.
  * @returns {React.ReactElement } - Message component.
  */
-export function ErrorMessage({ error, onTryAgainClick }) {
+export function ErrorMessage({ error, code, onTryAgainClick, onUpgradeClick, }) {
     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) }), code === ERROR_QUOTA_EXCEEDED ? (_jsx(Button, { variant: "link", onClick: onUpgradeClick, children: __('Upgrade now', 'jetpack-ai-client') })) : (_jsx(Button, { variant: "link", onClick: onTryAgainClick, children: __('Try again', 'jetpack-ai-client') }))] }));
 }

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

@@ -1,13 +1,22 @@
+/**
+ * The type of the response from the image generation API.
+ */
+type ImageGenerationResponse = {
+    data: Array<{
+        [key: string]: string;
+    }>;
+};
 declare const useImageGenerator: () => {
     generateImage: ({ feature, postContent, responseFormat, userPrompt, }: {
         feature: string;
         postContent: string;
         responseFormat?: 'url' | 'b64_json';
         userPrompt?: string;
-    }) => Promise<{
-        data: {
-            [key: string]: string;
-        }[];
-    }>;
+    }) => Promise<ImageGenerationResponse>;
+    generateImageWithStableDiffusion: ({ feature, postContent, userPrompt, }: {
+        feature: string;
+        postContent: string;
+        userPrompt?: string;
+    }) => Promise<ImageGenerationResponse>;
 };
 export default useImageGenerator;

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

@@ -5,6 +5,7 @@ import debugFactory from 'debug';
 /**
  * Internal dependencies
  */
+import askQuestionSync from '../../ask-question/sync.js';
 import requestJwt from '../../jwt/index.js';
 const debug = debugFactory('ai-client:use-image-generator');
 /**
@@ -27,7 +28,7 @@ const truncateContent = (content, currentPromptLength) => {
  * @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) => {
+const getDalleImageGenerationPrompt = (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
@@ -73,8 +74,62 @@ 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);
 };
+/**
+ * Create the Stable Diffusion pre-processing prompt 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 to be fed to the AI Assistant model.
+ */
+const getStableDiffusionPreProcessingPrompt = (postContent, userPrompt) => {
+    /**
+     * If the user provide some custom prompt for the image generation,
+     * we will use it and add the post content as additional context.
+     */
+    if (userPrompt) {
+        const preProcessingPrompt = `I need a Stable Diffusion prompt to generate a featured image for a blog post based on this user-provided image description:
+
+${userPrompt.length > 1000 ? userPrompt.substring(0, 1000) : userPrompt}
+
+The image should be a photo. Make sure you highlight the main suject of the image description, and include brief details about the light and style of the image.
+Include a request to use high resolution and produce a highly detailed image, with sharp focus.
+Return just the prompt, without comments.
+
+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 preProcessingPrompt + truncateContent(postContent, preProcessingPrompt.length);
+    }
+    /**
+     * When the user does not provide a custom prompt, we will use the
+     * standard one, based solely on the post content.
+     */
+    const preProcessingPrompt = `I need a Stable Diffusion prompt to generate a featured image for a blog post with the following content.
+The image should be a photo. Make sure you highlight the main suject of the content, and include brief details about the light and style of the image.
+Include a request to use high resolution and produce a highly detailed image, with sharp focus.
+Return just the prompt, without comments. The content is:
+
+`;
+    // truncating the content so the whole prompt is not longer than 4000 characters, the model limit.
+    return preProcessingPrompt + truncateContent(postContent, preProcessingPrompt.length);
+};
+/**
+ * Uses the Jetpack AI query endpoint to produce a prompt for the stable diffusion model.
+ * @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
+ * @param {string} feature - the feature to be used for the image generation.
+ * @returns {string} the prompt string to be used on stable diffusion image generation.
+ */
+const getStableDiffusionImageGenerationPrompt = async (postContent, userPrompt, feature) => {
+    const prompt = getStableDiffusionPreProcessingPrompt(postContent, userPrompt);
+    /**
+     * Request the prompt on the AI Assistant endpoint
+     */
+    const data = await askQuestionSync(prompt, { feature });
+    return data.choices?.[0]?.message?.content;
+};
 const useImageGenerator = () => {
-    const generateImage = async function ({ feature, postContent, responseFormat = 'url', userPrompt, }) {
+    const executeImageGeneration = async function (parameters) {
         let token = '';
         try {
             token = (await requestJwt()).token;
@@ -84,15 +139,7 @@ const useImageGenerator = () => {
             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,
-                response_format: responseFormat,
-                feature,
-                size: '1792x1024',
-            };
             const headers = {
                 Authorization: `Bearer ${token}`,
                 'Content-Type': 'application/json',
@@ -100,7 +147,7 @@ const useImageGenerator = () => {
             const data = await fetch(URL, {
                 method: 'POST',
                 headers,
-                body: JSON.stringify(body),
+                body: JSON.stringify(parameters),
             }).then(response => response.json());
             if (data?.data?.status && data?.data?.status > 200) {
                 debug('Error generating image: %o', data);
@@ -113,8 +160,45 @@ const useImageGenerator = () => {
             return Promise.reject(error);
         }
     };
+    const generateImageWithStableDiffusion = async function ({ feature, postContent, userPrompt, }) {
+        try {
+            debug('Generating image with Stable Diffusion');
+            const prompt = await getStableDiffusionImageGenerationPrompt(postContent, userPrompt, feature);
+            const parameters = {
+                prompt,
+                feature,
+                model: 'stable-diffusion',
+                style: 'photographic',
+            };
+            const data = await executeImageGeneration(parameters);
+            return data;
+        }
+        catch (error) {
+            debug('Error generating image: %o', error);
+            return Promise.reject(error);
+        }
+    };
+    const generateImage = async function ({ feature, postContent, responseFormat = 'url', userPrompt, }) {
+        try {
+            debug('Generating image');
+            const imageGenerationPrompt = getDalleImageGenerationPrompt(postContent, userPrompt);
+            const parameters = {
+                prompt: imageGenerationPrompt,
+                response_format: responseFormat,
+                feature,
+                size: '1792x1024',
+            };
+            const data = await executeImageGeneration(parameters);
+            return data;
+        }
+        catch (error) {
+            debug('Error generating image: %o', error);
+            return Promise.reject(error);
+        }
+    };
     return {
         generateImage,
+        generateImageWithStableDiffusion,
     };
 };
 export default useImageGenerator;

package/build/libs/index.d.ts

@@ -1 +1,2 @@
 export { MarkdownToHTML, HTMLToMarkdown, renderHTMLFromMarkdown, renderMarkdownFromHTML, } from './markdown/index.js';
+export type { RenderHTMLRules } from './markdown/index.js';

package/build/libs/markdown/html-to-markdown.d.ts

@@ -5,11 +5,19 @@ import TurndownService from 'turndown';
 /**
  * Types
  */
-import type { Options, Rule } from 'turndown';
+import type { Options, Rule, Filter } from 'turndown';
+export type Fix = 'paragraph';
 export default class HTMLToMarkdown {
     turndownService: TurndownService;
-    constructor(options?: Options, rules?: {
-        [key: string]: Rule;
+    fixes: Fix[];
+    constructor({ options, rules, keep, remove, fixes, }?: {
+        options?: Options;
+        rules?: {
+            [key: string]: Rule;
+        };
+        keep?: Filter;
+        remove?: Filter;
+        fixes?: Fix[];
     });
     /**
      * Renders HTML from Markdown content with specified processing rules.

package/build/libs/markdown/html-to-markdown.js

@@ -2,6 +2,12 @@
  * External dependencies
  */
 import TurndownService from 'turndown';
+const fixesList = {
+    paragraph: (content) => {
+        // Keep <br> tags to prevent paragraphs from being split
+        return content.replaceAll('\n', '<br />');
+    },
+};
 const defaultTurndownOptions = { emDelimiter: '_', headingStyle: 'atx' };
 const defaultTurndownRules = {
     strikethrough: {
@@ -13,10 +19,15 @@ const defaultTurndownRules = {
 };
 export default class HTMLToMarkdown {
     turndownService;
-    constructor(options = defaultTurndownOptions, rules = defaultTurndownRules) {
-        this.turndownService = new TurndownService(options);
-        for (const rule in rules) {
-            this.turndownService.addRule(rule, rules[rule]);
+    fixes;
+    constructor({ options = {}, rules = {}, keep = [], remove = [], fixes = [], } = {}) {
+        this.fixes = fixes;
+        this.turndownService = new TurndownService({ ...defaultTurndownOptions, ...options });
+        this.turndownService.keep(keep);
+        this.turndownService.remove(remove);
+        const allRules = { ...defaultTurndownRules, ...rules };
+        for (const rule in allRules) {
+            this.turndownService.addRule(rule, allRules[rule]);
         }
     }
     /**
@@ -26,6 +37,9 @@ export default class HTMLToMarkdown {
      * @returns {string}                 The rendered Markdown content
      */
     render({ content }) {
-        return this.turndownService.turndown(content);
+        const rendered = this.turndownService.turndown(content);
+        return this.fixes.reduce((renderedContent, fix) => {
+            return fixesList[fix](renderedContent);
+        }, rendered);
     }
 }

package/build/libs/markdown/index.d.ts

@@ -7,9 +7,10 @@ import MarkdownToHTML from './markdown-to-html.js';
  * Types
  */
 import type { Fix as HTMLFix } from './markdown-to-html.js';
+export type RenderHTMLRules = 'all' | Array<HTMLFix>;
 declare const renderHTMLFromMarkdown: ({ content, rules, }: {
     content: string;
-    rules?: Array<HTMLFix> | 'all';
+    rules?: RenderHTMLRules;
 }) => string;
 declare const renderMarkdownFromHTML: ({ content }: {
     content: string;

package/build/libs/markdown/markdown-to-html.d.ts

@@ -6,7 +6,7 @@ import MarkdownIt from 'markdown-it';
  * Types
  */
 import type { Options } from 'markdown-it';
-export type Fix = 'list';
+export type Fix = 'list' | 'paragraph';
 export default class MarkdownToHTML {
     markdownConverter: MarkdownIt;
     constructor(options?: Options);

package/build/libs/markdown/markdown-to-html.js

@@ -7,6 +7,10 @@ const fixes = {
         // Fix list indentation
         return content.replace(/<li>\s+<p>/g, '<li>').replace(/<\/p>\s+<\/li>/g, '</li>');
     },
+    paragraph: (content) => {
+        // Fix encoding of <br /> tags
+        return content.replaceAll(/\s*&lt;br \/&gt;\s*/g, '<br />');
+    },
 };
 const defaultMarkdownItOptions = {
     breaks: true,

package/build/types.d.ts

@@ -39,3 +39,4 @@ export type Block = {
     originalContent?: string;
 };
 export type TranscriptionState = RecordingState | 'validating' | 'processing' | 'error';
+export type { RenderHTMLRules } from './libs/index.js';

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.13.1",
+	"version": "0.14.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": {
@@ -42,24 +42,24 @@
 	"main": "./build/index.js",
 	"types": "./build/index.d.ts",
 	"dependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.24",
-		"@automattic/jetpack-connection": "^0.33.10",
-		"@automattic/jetpack-shared-extension-utils": "^0.14.12",
+		"@automattic/jetpack-base-styles": "^0.6.25",
+		"@automattic/jetpack-connection": "^0.33.11",
+		"@automattic/jetpack-shared-extension-utils": "^0.14.13",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@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",
+		"@wordpress/api-fetch": "6.54.0",
+		"@wordpress/block-editor": "12.25.0",
+		"@wordpress/components": "27.5.0",
+		"@wordpress/compose": "6.34.0",
+		"@wordpress/data": "9.27.0",
+		"@wordpress/element": "5.34.0",
+		"@wordpress/i18n": "4.57.0",
+		"@wordpress/icons": "9.48.0",
 		"classnames": "2.3.2",
 		"debug": "4.3.4",
 		"markdown-it": "14.0.0",
-		"react": "18.2.0",
-		"react-dom": "18.2.0",
+		"react": "18.3.1",
+		"react-dom": "18.3.1",
 		"turndown": "7.1.2"
 	}
 }

package/src/ask-question/sync.ts

@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import debugFactory from 'debug';
+/*
+ * Types & constants
+ */
+import requestJwt from '../jwt/index.js';
+import { AskQuestionOptionsArgProps } from './index.js';
+import type { PromptProp } from '../types.js';
+
+/**
+ * The response data from the AI assistant when doing a sync, not-streamed question.
+ */
+export type ResponseData = {
+	choices: Array< {
+		message: {
+			content: string;
+		};
+	} >;
+};
+
+const debug = debugFactory( 'jetpack-ai-client:ask-question-sync' );
+
+/**
+ * A function that asks a question without streaming.
+ *
+ * @param {PromptProp} question - The question to ask. It can be a simple string or an array of PromptMessageItemProps objects.
+ * @param {AskQuestionOptionsArgProps} options - An optional object for additional configuration: postId, feature, model.
+ * @returns {Promise<ResponseData>} - A promise that resolves to an instance of the ResponseData
+ * @example
+ * const question = "What is the meaning of life?";
+ * const options = {
+ *   feature: 'ai-featured-image',
+ *   model: 'gpt-4-turbo'
+ * }
+ * askQuestionSync( question, options ).then( responseData => {
+ *    // access the choices array on the response data
+ *    const content = responseData.choices[ 0 ].message.content;
+ * } );
+ */
+export default async function askQuestionSync(
+	question: PromptProp,
+	{ postId = null, feature, model }: AskQuestionOptionsArgProps = {}
+): Promise< ResponseData > {
+	debug( 'Asking question with no streaming: %o. options: %o', question, {
+		postId,
+		feature,
+		model,
+	} );
+
+	/**
+	 * The URL to the AI assistant query endpoint.
+	 */
+	const URL = 'https://public-api.wordpress.com/wpcom/v2/jetpack-ai-query';
+
+	let token = null;
+
+	try {
+		token = ( await requestJwt() ).token;
+	} catch ( error ) {
+		debug( 'Error getting token: %o', error );
+		return Promise.reject( error );
+	}
+
+	const body = {
+		question: question,
+		stream: false,
+		postId,
+		feature,
+		model,
+	};
+
+	const headers = {
+		Authorization: `Bearer ${ token }`,
+		'Content-Type': 'application/json',
+	};
+
+	const data = await fetch( URL, {
+		method: 'POST',
+		headers,
+		body: JSON.stringify( body ),
+	} ).then( response => response.json() );
+
+	if ( data?.data?.status && data?.data?.status > 200 ) {
+		debug( 'Error generating prompt: %o', data );
+		return Promise.reject( data );
+	}
+
+	return data as ResponseData;
+}

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

@@ -16,7 +16,7 @@ import './style.scss';
 /**
  * Types
  */
-import type { RequestingStateProp } from '../../types.js';
+import type { RequestingErrorProps, RequestingStateProp } from '../../types.js';
 import type { ReactElement, MouseEvent } from 'react';
 
 type ExtensionAIControlProps = {
@@ -28,7 +28,7 @@ type ExtensionAIControlProps = {
 	isTransparent?: boolean;
 	state?: RequestingStateProp;
 	showGuideLine?: boolean;
-	error?: string;
+	error?: RequestingErrorProps;
 	requestsRemaining?: number;
 	showUpgradeMessage?: boolean;
 	wrapperRef?: React.MutableRefObject< HTMLDivElement | null >;
@@ -202,8 +202,16 @@ export function ExtensionAIControl(
 	);
 
 	let message = null;
-	if ( error ) {
-		message = <ErrorMessage error={ error } onTryAgainClick={ tryAgainHandler } />;
+
+	if ( error?.message ) {
+		message = (
+			<ErrorMessage
+				error={ error.message }
+				code={ error.code }
+				onTryAgainClick={ tryAgainHandler }
+				onUpgradeClick={ upgradeHandler }
+			/>
+		);
 	} else if ( showUpgradeMessage ) {
 		message = (
 			<UpgradeMessage requestsRemaining={ requestsRemaining } onUpgradeClick={ upgradeHandler } />

package/src/components/message/index.tsx

@@ -10,9 +10,11 @@ import classNames from 'classnames';
  */
 import './style.scss';
 import errorExclamation from '../../icons/error-exclamation.js';
+import { ERROR_QUOTA_EXCEEDED } from '../../types.js';
 /**
  * Types
  */
+import type { SuggestionErrorCode } from '../../types.js';
 import type React from 'react';
 
 export const MESSAGE_SEVERITY_WARNING = 'warning';
@@ -37,14 +39,19 @@ export type MessageProps = {
 	children: React.ReactNode;
 };
 
+export type OnUpgradeClick = ( event?: React.MouseEvent< HTMLButtonElement > ) => void;
+
 export type UpgradeMessageProps = {
 	requestsRemaining: number;
-	onUpgradeClick: ( event?: React.MouseEvent< HTMLButtonElement > ) => void;
+	severity?: MessageSeverityProp;
+	onUpgradeClick: OnUpgradeClick;
 };
 
 export type ErrorMessageProps = {
 	error?: string;
+	code?: SuggestionErrorCode;
 	onTryAgainClick: () => void;
+	onUpgradeClick: OnUpgradeClick;
 };
 
 const messageIconsMap = {
@@ -113,10 +120,17 @@ export function GuidelineMessage(): React.ReactElement {
  */
 export function UpgradeMessage( {
 	requestsRemaining,
+	severity,
 	onUpgradeClick,
 }: UpgradeMessageProps ): React.ReactElement {
+	let messageSeverity = severity;
+
+	if ( messageSeverity == null ) {
+		messageSeverity = requestsRemaining > 0 ? MESSAGE_SEVERITY_INFO : MESSAGE_SEVERITY_WARNING;
+	}
+
 	return (
-		<Message severity={ MESSAGE_SEVERITY_WARNING }>
+		<Message severity={ messageSeverity }>
 			<span>
 				{ sprintf(
 					// translators: %1$d: number of requests remaining
@@ -137,7 +151,12 @@ export function UpgradeMessage( {
  * @param {number} requestsRemaining - Number of requests remaining.
  * @returns {React.ReactElement } - Message component.
  */
-export function ErrorMessage( { error, onTryAgainClick }: ErrorMessageProps ): React.ReactElement {
+export function ErrorMessage( {
+	error,
+	code,
+	onTryAgainClick,
+	onUpgradeClick,
+}: ErrorMessageProps ): React.ReactElement {
 	const errorMessage = error || __( 'Something went wrong', 'jetpack-ai-client' );
 
 	return (
@@ -149,9 +168,15 @@ export function ErrorMessage( { error, onTryAgainClick }: ErrorMessageProps ): R
 					errorMessage
 				) }
 			</span>
-			<Button variant="link" onClick={ onTryAgainClick }>
-				{ __( 'Try Again', 'jetpack-ai-client' ) }
-			</Button>
+			{ code === ERROR_QUOTA_EXCEEDED ? (
+				<Button variant="link" onClick={ onUpgradeClick }>
+					{ __( 'Upgrade now', 'jetpack-ai-client' ) }
+				</Button>
+			) : (
+				<Button variant="link" onClick={ onTryAgainClick }>
+					{ __( 'Try again', 'jetpack-ai-client' ) }
+				</Button>
+			) }
 		</Message>
 	);
 }

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

@@ -5,10 +5,18 @@ import debugFactory from 'debug';
 /**
  * Internal dependencies
  */
+import askQuestionSync from '../../ask-question/sync.js';
 import requestJwt from '../../jwt/index.js';
 
 const debug = debugFactory( 'ai-client:use-image-generator' );
 
+/**
+ * The type of the response from the image generation API.
+ */
+type ImageGenerationResponse = {
+	data: Array< { [ key: string ]: string } >;
+};
+
 /**
  * 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
@@ -30,7 +38,7 @@ const truncateContent = ( content: string, currentPromptLength: number ): string
  * @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 => {
+const getDalleImageGenerationPrompt = ( 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
@@ -78,18 +86,77 @@ This is the post content:
 	return imageGenerationPrompt + truncateContent( postContent, imageGenerationPrompt.length );
 };
 
+/**
+ * Create the Stable Diffusion pre-processing prompt 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 to be fed to the AI Assistant model.
+ */
+const getStableDiffusionPreProcessingPrompt = (
+	postContent: string,
+	userPrompt?: string
+): string => {
+	/**
+	 * If the user provide some custom prompt for the image generation,
+	 * we will use it and add the post content as additional context.
+	 */
+	if ( userPrompt ) {
+		const preProcessingPrompt = `I need a Stable Diffusion prompt to generate a featured image for a blog post based on this user-provided image description:
+
+${ userPrompt.length > 1000 ? userPrompt.substring( 0, 1000 ) : userPrompt }
+
+The image should be a photo. Make sure you highlight the main suject of the image description, and include brief details about the light and style of the image.
+Include a request to use high resolution and produce a highly detailed image, with sharp focus.
+Return just the prompt, without comments.
+
+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 preProcessingPrompt + truncateContent( postContent, preProcessingPrompt.length );
+	}
+
+	/**
+	 * When the user does not provide a custom prompt, we will use the
+	 * standard one, based solely on the post content.
+	 */
+	const preProcessingPrompt = `I need a Stable Diffusion prompt to generate a featured image for a blog post with the following content.
+The image should be a photo. Make sure you highlight the main suject of the content, and include brief details about the light and style of the image.
+Include a request to use high resolution and produce a highly detailed image, with sharp focus.
+Return just the prompt, without comments. The content is:
+
+`;
+
+	// truncating the content so the whole prompt is not longer than 4000 characters, the model limit.
+	return preProcessingPrompt + truncateContent( postContent, preProcessingPrompt.length );
+};
+
+/**
+ * Uses the Jetpack AI query endpoint to produce a prompt for the stable diffusion model.
+ * @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
+ * @param {string} feature - the feature to be used for the image generation.
+ * @returns {string} the prompt string to be used on stable diffusion image generation.
+ */
+const getStableDiffusionImageGenerationPrompt = async (
+	postContent: string,
+	userPrompt?: string,
+	feature?: string
+): Promise< string > => {
+	const prompt = getStableDiffusionPreProcessingPrompt( postContent, userPrompt );
+
+	/**
+	 * Request the prompt on the AI Assistant endpoint
+	 */
+	const data = await askQuestionSync( prompt, { feature } );
+
+	return data.choices?.[ 0 ]?.message?.content;
+};
+
 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 } > } > {
+	const executeImageGeneration = async function ( parameters: {
+		[ key: string ]: string;
+	} ): Promise< ImageGenerationResponse > {
 		let token = '';
 
 		try {
@@ -100,19 +167,8 @@ const useImageGenerator = () => {
 		}
 
 		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,
-				response_format: responseFormat,
-				feature,
-				size: '1792x1024',
-			};
-
 			const headers = {
 				Authorization: `Bearer ${ token }`,
 				'Content-Type': 'application/json',
@@ -121,7 +177,7 @@ const useImageGenerator = () => {
 			const data = await fetch( URL, {
 				method: 'POST',
 				headers,
-				body: JSON.stringify( body ),
+				body: JSON.stringify( parameters ),
 			} ).then( response => response.json() );
 
 			if ( data?.data?.status && data?.data?.status > 200 ) {
@@ -129,7 +185,71 @@ const useImageGenerator = () => {
 				return Promise.reject( data );
 			}
 
-			return data as { data: { [ key: string ]: string }[] };
+			return data as ImageGenerationResponse;
+		} catch ( error ) {
+			debug( 'Error generating image: %o', error );
+			return Promise.reject( error );
+		}
+	};
+
+	const generateImageWithStableDiffusion = async function ( {
+		feature,
+		postContent,
+		userPrompt,
+	}: {
+		feature: string;
+		postContent: string;
+		userPrompt?: string;
+	} ): Promise< ImageGenerationResponse > {
+		try {
+			debug( 'Generating image with Stable Diffusion' );
+
+			const prompt = await getStableDiffusionImageGenerationPrompt(
+				postContent,
+				userPrompt,
+				feature
+			);
+
+			const parameters = {
+				prompt,
+				feature,
+				model: 'stable-diffusion',
+				style: 'photographic',
+			};
+
+			const data: ImageGenerationResponse = await executeImageGeneration( parameters );
+			return data;
+		} catch ( error ) {
+			debug( 'Error generating image: %o', error );
+			return Promise.reject( error );
+		}
+	};
+
+	const generateImage = async function ( {
+		feature,
+		postContent,
+		responseFormat = 'url',
+		userPrompt,
+	}: {
+		feature: string;
+		postContent: string;
+		responseFormat?: 'url' | 'b64_json';
+		userPrompt?: string;
+	} ): Promise< ImageGenerationResponse > {
+		try {
+			debug( 'Generating image' );
+
+			const imageGenerationPrompt = getDalleImageGenerationPrompt( postContent, userPrompt );
+
+			const parameters = {
+				prompt: imageGenerationPrompt,
+				response_format: responseFormat,
+				feature,
+				size: '1792x1024',
+			};
+
+			const data: ImageGenerationResponse = await executeImageGeneration( parameters );
+			return data;
 		} catch ( error ) {
 			debug( 'Error generating image: %o', error );
 			return Promise.reject( error );
@@ -138,6 +258,7 @@ const useImageGenerator = () => {
 
 	return {
 		generateImage,
+		generateImageWithStableDiffusion,
 	};
 };
 

package/src/libs/index.ts

@@ -4,3 +4,5 @@ export {
 	renderHTMLFromMarkdown,
 	renderMarkdownFromHTML,
 } from './markdown/index.js';
+
+export type { RenderHTMLRules } from './markdown/index.js';

package/src/libs/markdown/README.md

@@ -35,7 +35,7 @@ const rules = {
 		}
  	}
 };
-const renderer = new HTMLToMarkdown( options, rules );
+const renderer = new HTMLToMarkdown( { options, rules } );
 const markdownContent = renderer.render( { content: htmlContent } );
 // ***Hello world***
 ```

package/src/libs/markdown/html-to-markdown.ts

@@ -5,7 +5,19 @@ import TurndownService from 'turndown';
 /**
  * Types
  */
-import type { Options, Rule } from 'turndown';
+import type { Options, Rule, Filter } from 'turndown';
+
+export type Fix = 'paragraph';
+type Fixes = {
+	[ key in Fix ]: ( content: string ) => string;
+};
+
+const fixesList: Fixes = {
+	paragraph: ( content: string ) => {
+		// Keep <br> tags to prevent paragraphs from being split
+		return content.replaceAll( '\n', '<br />' );
+	},
+};
 
 const defaultTurndownOptions: Options = { emDelimiter: '_', headingStyle: 'atx' };
 const defaultTurndownRules: { [ key: string ]: Rule } = {
@@ -19,14 +31,29 @@ const defaultTurndownRules: { [ key: string ]: Rule } = {
 
 export default class HTMLToMarkdown {
 	turndownService: TurndownService;
+	fixes: Fix[];
+
+	constructor( {
+		options = {},
+		rules = {},
+		keep = [],
+		remove = [],
+		fixes = [],
+	}: {
+		options?: Options;
+		rules?: { [ key: string ]: Rule };
+		keep?: Filter;
+		remove?: Filter;
+		fixes?: Fix[];
+	} = {} ) {
+		this.fixes = fixes;
+		this.turndownService = new TurndownService( { ...defaultTurndownOptions, ...options } );
+		this.turndownService.keep( keep );
+		this.turndownService.remove( remove );
 
-	constructor(
-		options: Options = defaultTurndownOptions,
-		rules: { [ key: string ]: Rule } = defaultTurndownRules
-	) {
-		this.turndownService = new TurndownService( options );
-		for ( const rule in rules ) {
-			this.turndownService.addRule( rule, rules[ rule ] );
+		const allRules = { ...defaultTurndownRules, ...rules };
+		for ( const rule in allRules ) {
+			this.turndownService.addRule( rule, allRules[ rule ] );
 		}
 	}
 
@@ -37,6 +64,10 @@ export default class HTMLToMarkdown {
 	 * @returns {string}                 The rendered Markdown content
 	 */
 	render( { content }: { content: string } ): string {
-		return this.turndownService.turndown( content );
+		const rendered = this.turndownService.turndown( content );
+
+		return this.fixes.reduce( ( renderedContent, fix ) => {
+			return fixesList[ fix ]( renderedContent );
+		}, rendered );
 	}
 }

package/src/libs/markdown/index.ts

@@ -11,12 +11,14 @@ import type { Fix as HTMLFix } from './markdown-to-html.js';
 const defaultMarkdownConverter = new MarkdownToHTML();
 const defaultHTMLConverter = new HTMLToMarkdown();
 
+export type RenderHTMLRules = 'all' | Array< HTMLFix >;
+
 const renderHTMLFromMarkdown = ( {
 	content,
 	rules = 'all',
 }: {
 	content: string;
-	rules?: Array< HTMLFix > | 'all';
+	rules?: RenderHTMLRules;
 } ) => {
 	return defaultMarkdownConverter.render( { content, rules } );
 };

package/src/libs/markdown/markdown-to-html.ts

@@ -7,7 +7,7 @@ import MarkdownIt from 'markdown-it';
  */
 import type { Options } from 'markdown-it';
 
-export type Fix = 'list';
+export type Fix = 'list' | 'paragraph';
 type Fixes = {
 	[ key in Fix ]: ( content: string ) => string;
 };
@@ -17,6 +17,10 @@ const fixes: Fixes = {
 		// Fix list indentation
 		return content.replace( /<li>\s+<p>/g, '<li>' ).replace( /<\/p>\s+<\/li>/g, '</li>' );
 	},
+	paragraph: ( content: string ) => {
+		// Fix encoding of <br /> tags
+		return content.replaceAll( /\s*&lt;br \/&gt;\s*/g, '<br />' );
+	},
 };
 
 const defaultMarkdownItOptions: Options = {

package/src/types.ts

@@ -108,3 +108,8 @@ export type Block = {
  * Transcription types
  */
 export type TranscriptionState = RecordingState | 'validating' | 'processing' | 'error';
+
+/*
+ * Lib types
+ */
+export type { RenderHTMLRules } from './libs/index.js';