@automattic/jetpack-ai-client 0.14.0 → 0.14.2

package/CHANGELOG.md

@@ -5,6 +5,16 @@ 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.2] - 2024-06-03
+### Added
+- AI Client: Add list-related fixes on MarkdownToHTML conversion. [#37564]
+- Jetpack AI: Support upgrade links on the AI Control that will open on a new tab. [#37629]
+
+## [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]
@@ -323,6 +333,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.2]: https://github.com/Automattic/jetpack-ai-client/compare/v0.14.1...v0.14.2
+[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

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

@@ -17,6 +17,7 @@ type ExtensionAIControlProps = {
     error?: RequestingErrorProps;
     requestsRemaining?: number;
     showUpgradeMessage?: boolean;
+    upgradeUrl?: string;
     wrapperRef?: React.MutableRefObject<HTMLDivElement | null>;
     onChange?: (newValue: string) => void;
     onSend?: (currentValue: string) => void;
@@ -33,6 +34,6 @@ type ExtensionAIControlProps = {
  * @param {React.MutableRefObject} ref     - Ref to the component
  * @returns {ReactElement}                 Rendered component
  */
-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;
+export declare function ExtensionAIControl({ className, disabled, value, placeholder, showButtonLabels, isTransparent, state, showGuideLine, error, requestsRemaining, showUpgradeMessage, upgradeUrl, 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({ 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) {
+export function ExtensionAIControl({ className, disabled = false, value = '', placeholder = '', showButtonLabels = true, isTransparent = false, state = 'init', showGuideLine = false, error, requestsRemaining, showUpgradeMessage = false, upgradeUrl, 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);
@@ -76,10 +76,10 @@ 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) {
-        message = (_jsx(ErrorMessage, { error: error.message, code: error.code, onTryAgainClick: tryAgainHandler, onUpgradeClick: upgradeHandler }));
+        message = (_jsx(ErrorMessage, { error: error.message, code: error.code, onTryAgainClick: tryAgainHandler, onUpgradeClick: upgradeHandler, upgradeUrl: upgradeUrl }));
     }
     else if (showUpgradeMessage) {
-        message = (_jsx(UpgradeMessage, { requestsRemaining: requestsRemaining, onUpgradeClick: upgradeHandler }));
+        message = (_jsx(UpgradeMessage, { requestsRemaining: requestsRemaining, onUpgradeClick: upgradeHandler, upgradeUrl: upgradeUrl }));
     }
     else if (showGuideLine) {
         message = _jsx(GuidelineMessage, {});

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

@@ -25,12 +25,14 @@ export type UpgradeMessageProps = {
     requestsRemaining: number;
     severity?: MessageSeverityProp;
     onUpgradeClick: OnUpgradeClick;
+    upgradeUrl?: string;
 };
 export type ErrorMessageProps = {
     error?: string;
     code?: SuggestionErrorCode;
     onTryAgainClick: () => void;
     onUpgradeClick: OnUpgradeClick;
+    upgradeUrl?: string;
 };
 /**
  * React component to render a block message.
@@ -51,12 +53,12 @@ export declare function GuidelineMessage(): React.ReactElement;
  * @param {number} requestsRemaining - Number of requests remaining.
  * @returns {React.ReactElement } - Message component.
  */
-export declare function UpgradeMessage({ requestsRemaining, severity, onUpgradeClick, }: UpgradeMessageProps): React.ReactElement;
+export declare function UpgradeMessage({ requestsRemaining, severity, onUpgradeClick, upgradeUrl, }: 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, code, onTryAgainClick, onUpgradeClick, }: ErrorMessageProps): React.ReactElement;
+export declare function ErrorMessage({ error, code, onTryAgainClick, onUpgradeClick, upgradeUrl, }: ErrorMessageProps): React.ReactElement;
 export {};

package/build/components/message/index.js

@@ -51,14 +51,14 @@ export function GuidelineMessage() {
  * @param {number} requestsRemaining - Number of requests remaining.
  * @returns {React.ReactElement } - Message component.
  */
-export function UpgradeMessage({ requestsRemaining, severity, onUpgradeClick, }) {
+export function UpgradeMessage({ requestsRemaining, severity, onUpgradeClick, upgradeUrl, }) {
     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') })] }));
+                __('You have %1$d requests remaining.', 'jetpack-ai-client'), requestsRemaining) }), _jsx(Button, { variant: "link", onClick: onUpgradeClick, href: upgradeUrl, target: upgradeUrl ? '_blank' : null, children: __('Upgrade now', 'jetpack-ai-client') })] }));
 }
 /**
  * React component to render an error message
@@ -66,9 +66,9 @@ export function UpgradeMessage({ requestsRemaining, severity, onUpgradeClick, })
  * @param {number} requestsRemaining - Number of requests remaining.
  * @returns {React.ReactElement } - Message component.
  */
-export function ErrorMessage({ error, code, onTryAgainClick, onUpgradeClick, }) {
+export function ErrorMessage({ error, code, onTryAgainClick, onUpgradeClick, upgradeUrl, }) {
     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) }), 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') }))] }));
+                __('Error: %1$s', 'jetpack-ai-client'), errorMessage) }), code === ERROR_QUOTA_EXCEEDED ? (_jsx(Button, { variant: "link", onClick: onUpgradeClick, href: upgradeUrl, target: upgradeUrl ? '_blank' : null, 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,22 +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<{
-        data: {
-            [key: string]: string;
-        }[];
-    }>;
+    }) => Promise<ImageGenerationResponse>;
 };
 export default useImageGenerator;

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import debugFactory from 'debug';
 /**
  * Internal dependencies
@@ -130,101 +129,66 @@ const getStableDiffusionImageGenerationPrompt = async (postContent, userPrompt,
     return data.choices?.[0]?.message?.content;
 };
 const useImageGenerator = () => {
-    const generateImageWithStableDiffusion = async function ({ feature, postContent, userPrompt, }) {
-        let token = null;
+    const executeImageGeneration = async function (parameters) {
+        let token = '';
         try {
-            token = await requestJwt();
+            token = (await requestJwt()).token;
         }
         catch (error) {
             debug('Error getting token: %o', error);
             return Promise.reject(error);
         }
         try {
-            debug('Generating image with Stable Diffusion');
-            const prompt = await getStableDiffusionImageGenerationPrompt(postContent, userPrompt, feature);
-            const data = {
-                prompt,
-                style: 'photographic',
-                token: token.token,
-                width: 1024,
-                height: 768,
+            const URL = 'https://public-api.wordpress.com/wpcom/v2/jetpack-ai-image';
+            const headers = {
+                Authorization: `Bearer ${token}`,
+                'Content-Type': 'application/json',
             };
-            const response = await fetch(`https://public-api.wordpress.com/wpcom/v2/sites/${token.blogId}/ai-image`, {
+            const data = await fetch(URL, {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(data),
-            });
-            if (!response?.ok) {
-                debug('Error generating image: %o', response);
-                return Promise.reject({
-                    data: {
-                        status: response.status,
-                    },
-                    message: __('Error generating image. Please try again later.', 'jetpack-ai-client'),
-                });
+                headers,
+                body: JSON.stringify(parameters),
+            }).then(response => response.json());
+            if (data?.data?.status && data?.data?.status > 200) {
+                debug('Error generating image: %o', data);
+                return Promise.reject(data);
             }
-            const blob = await response.blob();
-            /**
-             * Convert the blob to base64 to keep the same format as the Dalle API.
-             */
-            const base64 = await new Promise((resolve, reject) => {
-                const reader = new FileReader();
-                reader.onloadend = () => {
-                    const base64data = reader.result;
-                    return resolve(base64data.replace(/^data:image\/(png|jpg);base64,/, ''));
-                };
-                reader.onerror = reject;
-                reader.readAsDataURL(blob);
-            });
-            // Return the Dalle API format
-            return {
-                data: [
-                    {
-                        b64_json: base64,
-                        revised_prompt: prompt,
-                    },
-                ],
-            };
+            return data;
         }
         catch (error) {
             debug('Error generating image: %o', error);
             return Promise.reject(error);
         }
     };
-    const generateImage = async function ({ feature, postContent, responseFormat = 'url', userPrompt, }) {
-        let token = '';
+    const generateImageWithStableDiffusion = async function ({ feature, postContent, userPrompt, }) {
         try {
-            token = (await requestJwt()).token;
+            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 getting token: %o', 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 URL = 'https://public-api.wordpress.com/wpcom/v2/jetpack-ai-image';
-            const body = {
+            const parameters = {
                 prompt: imageGenerationPrompt,
                 response_format: responseFormat,
                 feature,
                 size: '1792x1024',
             };
-            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 image: %o', data);
-                return Promise.reject(data);
-            }
+            const data = await executeImageGeneration(parameters);
             return data;
         }
         catch (error) {

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,10 +7,11 @@ 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, }: {
+export type RenderHTMLRules = Array<HTMLFix>;
+declare const renderHTMLFromMarkdown: ({ content, rules, extension, }: {
     content: string;
     rules?: RenderHTMLRules;
+    extension?: boolean;
 }) => string;
 declare const renderMarkdownFromHTML: ({ content }: {
     content: string;

package/build/libs/markdown/index.js

@@ -5,8 +5,8 @@ import HTMLToMarkdown from './html-to-markdown.js';
 import MarkdownToHTML from './markdown-to-html.js';
 const defaultMarkdownConverter = new MarkdownToHTML();
 const defaultHTMLConverter = new HTMLToMarkdown();
-const renderHTMLFromMarkdown = ({ content, rules = 'all', }) => {
-    return defaultMarkdownConverter.render({ content, rules });
+const renderHTMLFromMarkdown = ({ content, rules, extension, }) => {
+    return defaultMarkdownConverter.render({ content, rules, extension });
 };
 const renderMarkdownFromHTML = ({ content }) => {
     return defaultHTMLConverter.render({ content });

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

@@ -6,19 +6,21 @@ import MarkdownIt from 'markdown-it';
  * Types
  */
 import type { Options } from 'markdown-it';
-export type Fix = 'list';
+export type Fix = 'list' | 'paragraph' | 'listItem';
 export default class MarkdownToHTML {
     markdownConverter: MarkdownIt;
     constructor(options?: Options);
     /**
      * Renders HTML from Markdown content with specified processing rules.
-     * @param {object} options         - The options to use when rendering the HTML content
-     * @param {string} options.content - The Markdown content to render
-     * @param {string} options.rules   - The rules to apply to the rendered content
-     * @returns {string}                 The rendered HTML content
+     * @param {object} options            - The options to use when rendering the HTML content
+     * @param {string} options.content    - The Markdown content to render
+     * @param {string} options.rules      - The rules to apply to the rendered content
+     * @param {boolean} options.extension - Whether to apply the extension-specific rules
+     * @returns {string}                    The rendered HTML content
      */
-    render({ content, rules }: {
+    render({ content, rules, extension, }: {
         content: string;
-        rules: Array<Fix> | 'all';
+        rules: Array<Fix>;
+        extension?: boolean;
     }): string;
 }

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

@@ -2,15 +2,53 @@
  * External dependencies
  */
 import MarkdownIt from 'markdown-it';
+const addListComments = (content) => {
+    return (content
+        // First remove any existing Gutenberg comments to avoid duplicates
+        .replaceAll('<!-- wp:list-item -->', '')
+        .replaceAll('<!-- /wp:list-item -->', '')
+        .replaceAll('<!-- wp:list -->', '')
+        .replaceAll('<!-- /wp:list -->', '')
+        // Add Gutenberg comments to <li> tags
+        .replaceAll('<li>', '<!-- wp:list-item --><li>')
+        .replaceAll('</li>', '</li><!-- /wp:list-item -->')
+        // Add Gutenberg comments to <ol> tags
+        .replaceAll('<ol>', '<!-- wp:list {"ordered":true} --><ol>')
+        .replaceAll('</ol>', '</ol><!-- /wp:list -->')
+        // Add Gutenberg comments to <ul> tags
+        .replaceAll('<ul>', '<!-- wp:list --><ul>')
+        .replaceAll('</ul>', '</ul><!-- /wp:list -->'));
+};
 const fixes = {
-    list: (content) => {
+    list: (content, extension = false) => {
         // Fix list indentation
-        return content.replace(/<li>\s+<p>/g, '<li>').replace(/<\/p>\s+<\/li>/g, '</li>');
+        const fixedIndentation = content
+            .replace(/<li>\s+<p>/g, '<li>')
+            .replace(/<\/p>\s+<\/li>/g, '</li>');
+        return extension ? addListComments(fixedIndentation) : fixedIndentation;
+    },
+    listItem: (content, extension = false) => {
+        if (!extension) {
+            return content;
+        }
+        return addListComments(content
+            // Remove wrapping <ul> or <ol> tag
+            .replace(/^<[ou]l>\s*/g, '')
+            .replace(/\s*<\/[ou]l>\s*$/g, ''));
+    },
+    paragraph: (content, extension = false) => {
+        if (!extension) {
+            return content;
+        }
+        // Fix encoding of <br /> tags
+        return content.replaceAll(/\s*&lt;br \/&gt;\s*/g, '<br />');
     },
 };
 const defaultMarkdownItOptions = {
     breaks: true,
 };
+// The rules used by the AI Assistant block
+const assistantBlockRules = ['list'];
 export default class MarkdownToHTML {
     markdownConverter;
     constructor(options = defaultMarkdownItOptions) {
@@ -18,16 +56,16 @@ export default class MarkdownToHTML {
     }
     /**
      * Renders HTML from Markdown content with specified processing rules.
-     * @param {object} options         - The options to use when rendering the HTML content
-     * @param {string} options.content - The Markdown content to render
-     * @param {string} options.rules   - The rules to apply to the rendered content
-     * @returns {string}                 The rendered HTML content
+     * @param {object} options            - The options to use when rendering the HTML content
+     * @param {string} options.content    - The Markdown content to render
+     * @param {string} options.rules      - The rules to apply to the rendered content
+     * @param {boolean} options.extension - Whether to apply the extension-specific rules
+     * @returns {string}                    The rendered HTML content
      */
-    render({ content, rules = 'all' }) {
+    render({ content, rules = assistantBlockRules, extension = false, }) {
         const rendered = this.markdownConverter.render(content);
-        const rulesToApply = rules === 'all' ? Object.keys(fixes) : rules;
-        return rulesToApply.reduce((renderedContent, rule) => {
-            return fixes[rule](renderedContent);
+        return rules.reduce((renderedContent, rule) => {
+            return fixes[rule](renderedContent, extension);
         }, rendered);
     }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.14.0",
+	"version": "0.14.2",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -43,7 +43,7 @@
 	"types": "./build/index.d.ts",
 	"dependencies": {
 		"@automattic/jetpack-base-styles": "^0.6.25",
-		"@automattic/jetpack-connection": "^0.33.11",
+		"@automattic/jetpack-connection": "^0.33.12",
 		"@automattic/jetpack-shared-extension-utils": "^0.14.13",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/react": "18.3.1",

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

@@ -31,6 +31,7 @@ type ExtensionAIControlProps = {
 	error?: RequestingErrorProps;
 	requestsRemaining?: number;
 	showUpgradeMessage?: boolean;
+	upgradeUrl?: string;
 	wrapperRef?: React.MutableRefObject< HTMLDivElement | null >;
 	onChange?: ( newValue: string ) => void;
 	onSend?: ( currentValue: string ) => void;
@@ -61,6 +62,7 @@ export function ExtensionAIControl(
 		error,
 		requestsRemaining,
 		showUpgradeMessage = false,
+		upgradeUrl,
 		wrapperRef,
 		onChange,
 		onSend,
@@ -210,11 +212,16 @@ export function ExtensionAIControl(
 				code={ error.code }
 				onTryAgainClick={ tryAgainHandler }
 				onUpgradeClick={ upgradeHandler }
+				upgradeUrl={ upgradeUrl }
 			/>
 		);
 	} else if ( showUpgradeMessage ) {
 		message = (
-			<UpgradeMessage requestsRemaining={ requestsRemaining } onUpgradeClick={ upgradeHandler } />
+			<UpgradeMessage
+				requestsRemaining={ requestsRemaining }
+				onUpgradeClick={ upgradeHandler }
+				upgradeUrl={ upgradeUrl }
+			/>
 		);
 	} else if ( showGuideLine ) {
 		message = <GuidelineMessage />;

package/src/components/message/index.tsx

@@ -45,6 +45,7 @@ export type UpgradeMessageProps = {
 	requestsRemaining: number;
 	severity?: MessageSeverityProp;
 	onUpgradeClick: OnUpgradeClick;
+	upgradeUrl?: string;
 };
 
 export type ErrorMessageProps = {
@@ -52,6 +53,7 @@ export type ErrorMessageProps = {
 	code?: SuggestionErrorCode;
 	onTryAgainClick: () => void;
 	onUpgradeClick: OnUpgradeClick;
+	upgradeUrl?: string;
 };
 
 const messageIconsMap = {
@@ -122,6 +124,7 @@ export function UpgradeMessage( {
 	requestsRemaining,
 	severity,
 	onUpgradeClick,
+	upgradeUrl,
 }: UpgradeMessageProps ): React.ReactElement {
 	let messageSeverity = severity;
 
@@ -134,11 +137,16 @@ export function UpgradeMessage( {
 			<span>
 				{ sprintf(
 					// translators: %1$d: number of requests remaining
-					__( 'You have %1$d free requests remaining.', 'jetpack-ai-client' ),
+					__( 'You have %1$d requests remaining.', 'jetpack-ai-client' ),
 					requestsRemaining
 				) }
 			</span>
-			<Button variant="link" onClick={ onUpgradeClick }>
+			<Button
+				variant="link"
+				onClick={ onUpgradeClick }
+				href={ upgradeUrl }
+				target={ upgradeUrl ? '_blank' : null }
+			>
 				{ __( 'Upgrade now', 'jetpack-ai-client' ) }
 			</Button>
 		</Message>
@@ -156,6 +164,7 @@ export function ErrorMessage( {
 	code,
 	onTryAgainClick,
 	onUpgradeClick,
+	upgradeUrl,
 }: ErrorMessageProps ): React.ReactElement {
 	const errorMessage = error || __( 'Something went wrong', 'jetpack-ai-client' );
 
@@ -169,7 +178,12 @@ export function ErrorMessage( {
 				) }
 			</span>
 			{ code === ERROR_QUOTA_EXCEEDED ? (
-				<Button variant="link" onClick={ onUpgradeClick }>
+				<Button
+					variant="link"
+					onClick={ onUpgradeClick }
+					href={ upgradeUrl }
+					target={ upgradeUrl ? '_blank' : null }
+				>
 					{ __( 'Upgrade now', 'jetpack-ai-client' ) }
 				</Button>
 			) : (

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import debugFactory from 'debug';
 /**
  * Internal dependencies
@@ -11,6 +10,13 @@ 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
@@ -148,6 +154,44 @@ const getStableDiffusionImageGenerationPrompt = async (
 };
 
 const useImageGenerator = () => {
+	const executeImageGeneration = async function ( parameters: {
+		[ key: string ]: string;
+	} ): Promise< ImageGenerationResponse > {
+		let token = '';
+
+		try {
+			token = ( await requestJwt() ).token;
+		} catch ( error ) {
+			debug( 'Error getting token: %o', error );
+			return Promise.reject( error );
+		}
+
+		try {
+			const URL = 'https://public-api.wordpress.com/wpcom/v2/jetpack-ai-image';
+
+			const headers = {
+				Authorization: `Bearer ${ token }`,
+				'Content-Type': 'application/json',
+			};
+
+			const data = await fetch( URL, {
+				method: 'POST',
+				headers,
+				body: JSON.stringify( parameters ),
+			} ).then( response => response.json() );
+
+			if ( data?.data?.status && data?.data?.status > 200 ) {
+				debug( 'Error generating image: %o', data );
+				return Promise.reject( data );
+			}
+
+			return data as ImageGenerationResponse;
+		} catch ( error ) {
+			debug( 'Error generating image: %o', error );
+			return Promise.reject( error );
+		}
+	};
+
 	const generateImageWithStableDiffusion = async function ( {
 		feature,
 		postContent,
@@ -156,16 +200,7 @@ const useImageGenerator = () => {
 		feature: string;
 		postContent: string;
 		userPrompt?: string;
-	} ): Promise< { data: Array< { [ key: string ]: string } > } > {
-		let token = null;
-
-		try {
-			token = await requestJwt();
-		} catch ( error ) {
-			debug( 'Error getting token: %o', error );
-			return Promise.reject( error );
-		}
-
+	} ): Promise< ImageGenerationResponse > {
 		try {
 			debug( 'Generating image with Stable Diffusion' );
 
@@ -175,59 +210,15 @@ const useImageGenerator = () => {
 				feature
 			);
 
-			const data = {
+			const parameters = {
 				prompt,
+				feature,
+				model: 'stable-diffusion',
 				style: 'photographic',
-				token: token.token,
-				width: 1024,
-				height: 768,
 			};
 
-			const response = await fetch(
-				`https://public-api.wordpress.com/wpcom/v2/sites/${ token.blogId }/ai-image`,
-				{
-					method: 'POST',
-					headers: {
-						'Content-Type': 'application/json',
-					},
-					body: JSON.stringify( data ),
-				}
-			);
-
-			if ( ! response?.ok ) {
-				debug( 'Error generating image: %o', response );
-				return Promise.reject( {
-					data: {
-						status: response.status,
-					},
-					message: __( 'Error generating image. Please try again later.', 'jetpack-ai-client' ),
-				} );
-			}
-
-			const blob = await response.blob();
-
-			/**
-			 * Convert the blob to base64 to keep the same format as the Dalle API.
-			 */
-			const base64 = await new Promise( ( resolve, reject ) => {
-				const reader = new FileReader();
-				reader.onloadend = () => {
-					const base64data = reader.result as string;
-					return resolve( base64data.replace( /^data:image\/(png|jpg);base64,/, '' ) );
-				};
-				reader.onerror = reject;
-				reader.readAsDataURL( blob );
-			} );
-
-			// Return the Dalle API format
-			return {
-				data: [
-					{
-						b64_json: base64 as string,
-						revised_prompt: prompt,
-					},
-				],
-			};
+			const data: ImageGenerationResponse = await executeImageGeneration( parameters );
+			return data;
 		} catch ( error ) {
 			debug( 'Error generating image: %o', error );
 			return Promise.reject( error );
@@ -244,47 +235,21 @@ const useImageGenerator = () => {
 		postContent: string;
 		responseFormat?: 'url' | 'b64_json';
 		userPrompt?: string;
-	} ): Promise< { data: Array< { [ key: string ]: string } > } > {
-		let token = '';
-
-		try {
-			token = ( await requestJwt() ).token;
-		} catch ( error ) {
-			debug( 'Error getting token: %o', error );
-			return Promise.reject( error );
-		}
-
+	} ): Promise< ImageGenerationResponse > {
 		try {
 			debug( 'Generating image' );
 
 			const imageGenerationPrompt = getDalleImageGenerationPrompt( postContent, userPrompt );
 
-			const URL = 'https://public-api.wordpress.com/wpcom/v2/jetpack-ai-image';
-
-			const body = {
+			const parameters = {
 				prompt: imageGenerationPrompt,
 				response_format: responseFormat,
 				feature,
 				size: '1792x1024',
 			};
 
-			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 image: %o', data );
-				return Promise.reject( data );
-			}
-
-			return data as { data: { [ key: string ]: string }[] };
+			const data: ImageGenerationResponse = await executeImageGeneration( parameters );
+			return data;
 		} catch ( error ) {
 			debug( 'Error generating image: %o', error );
 			return Promise.reject( error );

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***
 ```
@@ -52,7 +52,7 @@ Example:
 import { renderHTMLFromMarkdown } from '@automattic/jetpack-ai-client';
 
 const markdownContent = '**Hello world**';
-const htmlContent = renderHTMLFromMarkdown( { content: markdownContent, rules: 'all' } ); // 'all' is a default value
+const htmlContent = renderHTMLFromMarkdown( { content: markdownContent, rules: [ 'list' ], extension: false } ); // [ 'list' ] and false are default values
 // <p><strong>Hello world</strong></p>\n
 ```
 
@@ -71,4 +71,5 @@ const htmlContent = renderer.render( { content: markdownContent, rules } );
 // <p><strong>Hello world</strong></p>\n
 ```
 
-Currently `rules` only supports `'all'` and `['list']`. Further specific fixes can be added when necessary.
+The `rules` array supports the following values: `'list'`, `'paragraph'` and `'list-item'`. Further specific fixes can be added when necessary.
+Due to different implementations between the Jetpack AI Assistant block and its extensions, the `extension` flag is used to apply context-specific fixes.

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

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

@@ -7,15 +7,59 @@ import MarkdownIt from 'markdown-it';
  */
 import type { Options } from 'markdown-it';
 
-export type Fix = 'list';
-type Fixes = {
-	[ key in Fix ]: ( content: string ) => string;
+export type Fix = 'list' | 'paragraph' | 'listItem';
+
+const addListComments = ( content: string ) => {
+	return (
+		content
+			// First remove any existing Gutenberg comments to avoid duplicates
+			.replaceAll( '<!-- wp:list-item -->', '' )
+			.replaceAll( '<!-- /wp:list-item -->', '' )
+			.replaceAll( '<!-- wp:list -->', '' )
+			.replaceAll( '<!-- /wp:list -->', '' )
+			// Add Gutenberg comments to <li> tags
+			.replaceAll( '<li>', '<!-- wp:list-item --><li>' )
+			.replaceAll( '</li>', '</li><!-- /wp:list-item -->' )
+			// Add Gutenberg comments to <ol> tags
+			.replaceAll( '<ol>', '<!-- wp:list {"ordered":true} --><ol>' )
+			.replaceAll( '</ol>', '</ol><!-- /wp:list -->' )
+			// Add Gutenberg comments to <ul> tags
+			.replaceAll( '<ul>', '<!-- wp:list --><ul>' )
+			.replaceAll( '</ul>', '</ul><!-- /wp:list -->' )
+	);
 };
 
+type Fixes = {
+	[ key in Fix ]: ( content: string, extension?: boolean ) => string;
+};
 const fixes: Fixes = {
-	list: ( content: string ) => {
+	list: ( content: string, extension = false ) => {
 		// Fix list indentation
-		return content.replace( /<li>\s+<p>/g, '<li>' ).replace( /<\/p>\s+<\/li>/g, '</li>' );
+		const fixedIndentation = content
+			.replace( /<li>\s+<p>/g, '<li>' )
+			.replace( /<\/p>\s+<\/li>/g, '</li>' );
+
+		return extension ? addListComments( fixedIndentation ) : fixedIndentation;
+	},
+	listItem: ( content: string, extension = false ) => {
+		if ( ! extension ) {
+			return content;
+		}
+
+		return addListComments(
+			content
+				// Remove wrapping <ul> or <ol> tag
+				.replace( /^<[ou]l>\s*/g, '' )
+				.replace( /\s*<\/[ou]l>\s*$/g, '' )
+		);
+	},
+	paragraph: ( content: string, extension = false ) => {
+		if ( ! extension ) {
+			return content;
+		}
+
+		// Fix encoding of <br /> tags
+		return content.replaceAll( /\s*&lt;br \/&gt;\s*/g, '<br />' );
 	},
 };
 
@@ -23,6 +67,9 @@ const defaultMarkdownItOptions: Options = {
 	breaks: true,
 };
 
+// The rules used by the AI Assistant block
+const assistantBlockRules: Array< Fix > = [ 'list' ];
+
 export default class MarkdownToHTML {
 	markdownConverter: MarkdownIt;
 
@@ -32,17 +79,25 @@ export default class MarkdownToHTML {
 
 	/**
 	 * Renders HTML from Markdown content with specified processing rules.
-	 * @param {object} options         - The options to use when rendering the HTML content
-	 * @param {string} options.content - The Markdown content to render
-	 * @param {string} options.rules   - The rules to apply to the rendered content
-	 * @returns {string}                 The rendered HTML content
+	 * @param {object} options            - The options to use when rendering the HTML content
+	 * @param {string} options.content    - The Markdown content to render
+	 * @param {string} options.rules      - The rules to apply to the rendered content
+	 * @param {boolean} options.extension - Whether to apply the extension-specific rules
+	 * @returns {string}                    The rendered HTML content
 	 */
-	render( { content, rules = 'all' }: { content: string; rules: Array< Fix > | 'all' } ): string {
+	render( {
+		content,
+		rules = assistantBlockRules,
+		extension = false,
+	}: {
+		content: string;
+		rules: Array< Fix >;
+		extension?: boolean;
+	} ): string {
 		const rendered = this.markdownConverter.render( content );
-		const rulesToApply = rules === 'all' ? Object.keys( fixes ) : rules;
 
-		return rulesToApply.reduce( ( renderedContent, rule ) => {
-			return fixes[ rule ]( renderedContent );
+		return rules.reduce( ( renderedContent, rule ) => {
+			return fixes[ rule ]( renderedContent, extension );
 		}, rendered );
 	}
 }