@automattic/jetpack-ai-client 0.14.1 → 0.14.3

package/CHANGELOG.md

@@ -5,6 +5,17 @@ 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.3] - 2024-06-10
+### Changed
+- AI Featured Image: export generic image generation request function. [#37668]
+- Change codebase to use clsx instead of classnames. [#37708]
+- Updated package dependencies. [#37669]
+
+## [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]
@@ -328,6 +339,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.3]: https://github.com/Automattic/jetpack-ai-client/compare/v0.14.2...v0.14.3
+[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

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * External dependencies
  */
 import { PlainText } from '@wordpress/block-editor';
-import classNames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -16,7 +16,7 @@ import './style.scss';
  * @returns {ReactElement}       Rendered component
  */
 export default function AIControl({ className, disabled = false, value = '', placeholder = '', isTransparent = false, state = 'init', onChange, banner = null, error = null, actions = null, message = null, promptUserInputRef = null, wrapperRef = null, }) {
-    return (_jsxs("div", { className: classNames('jetpack-components-ai-control__container-wrapper', className), ref: wrapperRef, children: [error, _jsxs("div", { className: "jetpack-components-ai-control__container", children: [banner, _jsxs("div", { className: classNames('jetpack-components-ai-control__wrapper', {
+    return (_jsxs("div", { className: clsx('jetpack-components-ai-control__container-wrapper', className), ref: wrapperRef, children: [error, _jsxs("div", { className: "jetpack-components-ai-control__container", children: [banner, _jsxs("div", { className: clsx('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

@@ -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/ai-status-indicator/index.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * External dependencies
  */
 import { Spinner } from '@wordpress/components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import './style.scss';
 /**
  * AiStatusIndicator component.
@@ -12,7 +12,7 @@ import './style.scss';
  * @returns {React.ReactElement} - rendered component.
  */
 export default function AiStatusIndicator({ state }) {
-    return (_jsx("div", { className: classNames('jetpack-ai-status-indicator__icon-wrapper', {
+    return (_jsx("div", { className: clsx('jetpack-ai-status-indicator__icon-wrapper', {
             [`is-${state}`]: true,
         }), children: _jsx(Spinner, {}) }));
 }

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

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExternalLink, Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check, arrowRight } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -35,7 +35,7 @@ const messageIconsMap = {
  * @returns {React.ReactElement }    Banner component.
  */
 export default function Message({ severity = MESSAGE_SEVERITY_INFO, icon = null, showSidebarIcon = false, onSidebarIconClick = () => { }, children, }) {
-    return (_jsxs("div", { className: classNames('jetpack-ai-assistant__message', `jetpack-ai-assistant__message-severity-${severity}`), children: [(messageIconsMap[severity] || icon) && (_jsx(Icon, { icon: messageIconsMap[severity] || icon })), _jsx("div", { className: "jetpack-ai-assistant__message-content", children: children }), showSidebarIcon && (_jsx(Button, { className: "jetpack-ai-assistant__message-sidebar", onClick: onSidebarIconClick, children: _jsx(Icon, { size: 20, icon: arrowRight }) }))] }));
+    return (_jsxs("div", { className: clsx('jetpack-ai-assistant__message', `jetpack-ai-assistant__message-severity-${severity}`), children: [(messageIconsMap[severity] || icon) && (_jsx(Icon, { icon: messageIconsMap[severity] || icon })), _jsx("div", { className: "jetpack-ai-assistant__message-content", children: children }), showSidebarIcon && (_jsx(Button, { className: "jetpack-ai-assistant__message-sidebar", onClick: onSidebarIconClick, children: _jsx(Icon, { size: 20, icon: arrowRight }) }))] }));
 }
 /**
  * React component to render a guideline message.
@@ -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

@@ -18,5 +18,6 @@ declare const useImageGenerator: () => {
         postContent: string;
         userPrompt?: string;
     }) => Promise<ImageGenerationResponse>;
+    generateImageWithParameters: (parameters: object) => Promise<ImageGenerationResponse>;
 };
 export default useImageGenerator;

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

@@ -199,6 +199,7 @@ const useImageGenerator = () => {
     return {
         generateImage,
         generateImageWithStableDiffusion,
+        generateImageWithParameters: executeImageGeneration,
     };
 };
 export default useImageGenerator;

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' | 'paragraph';
+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,12 +2,44 @@
  * 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) => {
+    paragraph: (content, extension = false) => {
+        if (!extension) {
+            return content;
+        }
         // Fix encoding of <br /> tags
         return content.replaceAll(/\s*&lt;br \/&gt;\s*/g, '<br />');
     },
@@ -15,6 +47,8 @@ const fixes = {
 const defaultMarkdownItOptions = {
     breaks: true,
 };
+// The rules used by the AI Assistant block
+const assistantBlockRules = ['list'];
 export default class MarkdownToHTML {
     markdownConverter;
     constructor(options = defaultMarkdownItOptions) {
@@ -22,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.1",
+	"version": "0.14.3",
 	"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,20 +42,20 @@
 	"main": "./build/index.js",
 	"types": "./build/index.d.ts",
 	"dependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.25",
-		"@automattic/jetpack-connection": "^0.33.11",
-		"@automattic/jetpack-shared-extension-utils": "^0.14.13",
+		"@automattic/jetpack-base-styles": "^0.6.26",
+		"@automattic/jetpack-connection": "^0.33.14",
+		"@automattic/jetpack-shared-extension-utils": "^0.14.14",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/react": "18.3.1",
-		"@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",
+		"@wordpress/api-fetch": "7.0.0",
+		"@wordpress/block-editor": "13.0.0",
+		"@wordpress/components": "28.0.0",
+		"@wordpress/compose": "7.0.0",
+		"@wordpress/data": "10.0.0",
+		"@wordpress/element": "6.0.0",
+		"@wordpress/i18n": "5.0.0",
+		"@wordpress/icons": "10.0.0",
+		"clsx": "2.1.1",
 		"debug": "4.3.4",
 		"markdown-it": "14.0.0",
 		"react": "18.3.1",

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { PlainText } from '@wordpress/block-editor';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 /**
  * Internal dependencies
@@ -54,14 +54,14 @@ export default function AIControl( {
 }: AIControlProps ): ReactElement {
 	return (
 		<div
-			className={ classNames( 'jetpack-components-ai-control__container-wrapper', className ) }
+			className={ clsx( 'jetpack-components-ai-control__container-wrapper', className ) }
 			ref={ wrapperRef }
 		>
 			{ error }
 			<div className="jetpack-components-ai-control__container">
 				{ banner }
 				<div
-					className={ classNames( 'jetpack-components-ai-control__wrapper', {
+					className={ clsx( 'jetpack-components-ai-control__wrapper', {
 						'is-transparent': isTransparent,
 					} ) }
 				>

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/ai-status-indicator/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Spinner } from '@wordpress/components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 /*
  * Types
  */
@@ -26,7 +26,7 @@ export type AiStatusIndicatorProps = {
 export default function AiStatusIndicator( { state }: AiStatusIndicatorProps ): React.ReactElement {
 	return (
 		<div
-			className={ classNames( 'jetpack-ai-status-indicator__icon-wrapper', {
+			className={ clsx( 'jetpack-ai-status-indicator__icon-wrapper', {
 				[ `is-${ state }` ]: true,
 			} ) }
 		>

package/src/components/message/index.tsx

@@ -4,7 +4,7 @@
 import { ExternalLink, Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check, arrowRight } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -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 = {
@@ -76,7 +78,7 @@ export default function Message( {
 }: MessageProps ): React.ReactElement {
 	return (
 		<div
-			className={ classNames(
+			className={ clsx(
 				'jetpack-ai-assistant__message',
 				`jetpack-ai-assistant__message-severity-${ severity }`
 			) }
@@ -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

@@ -154,9 +154,9 @@ const getStableDiffusionImageGenerationPrompt = async (
 };
 
 const useImageGenerator = () => {
-	const executeImageGeneration = async function ( parameters: {
-		[ key: string ]: string;
-	} ): Promise< ImageGenerationResponse > {
+	const executeImageGeneration = async function (
+		parameters: object
+	): Promise< ImageGenerationResponse > {
 		let token = '';
 
 		try {
@@ -259,6 +259,7 @@ const useImageGenerator = () => {
 	return {
 		generateImage,
 		generateImageWithStableDiffusion,
+		generateImageWithParameters: executeImageGeneration,
 	};
 };
 

package/src/libs/markdown/README.md

@@ -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/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,17 +7,57 @@ import MarkdownIt from 'markdown-it';
  */
 import type { Options } from 'markdown-it';
 
-export type Fix = 'list' | 'paragraph';
-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;
 	},
-	paragraph: ( content: string ) => {
+	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 />' );
 	},
@@ -27,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;
 
@@ -36,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 );
 	}
 }