@automattic/jetpack-ai-client 0.12.1 → 0.12.3

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

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import TurndownService from 'turndown';
+/**
+ * Types
+ */
+import type { Options, Rule } from 'turndown';
+export default class HTMLToMarkdown {
+    turndownService: TurndownService;
+    constructor(options?: Options, rules?: {
+        [key: string]: Rule;
+    });
+    /**
+     * Renders HTML from Markdown content with specified processing rules.
+     * @param {object} options         - The options to use when rendering the Markdown content
+     * @param {string} options.content - The HTML content to render
+     * @returns {string}                 The rendered Markdown content
+     */
+    render({ content }: {
+        content: string;
+    }): string;
+}

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

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import TurndownService from 'turndown';
+const defaultTurndownOptions = { emDelimiter: '_', headingStyle: 'atx' };
+const defaultTurndownRules = {
+    strikethrough: {
+        filter: ['del', 's'],
+        replacement: function (content) {
+            return '~~' + content + '~~';
+        },
+    },
+};
+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]);
+        }
+    }
+    /**
+     * Renders HTML from Markdown content with specified processing rules.
+     * @param {object} options         - The options to use when rendering the Markdown content
+     * @param {string} options.content - The HTML content to render
+     * @returns {string}                 The rendered Markdown content
+     */
+    render({ content }) {
+        return this.turndownService.turndown(content);
+    }
+}

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

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

package/build/libs/markdown/index.js

@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+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 renderMarkdownFromHTML = ({ content }) => {
+    return defaultHTMLConverter.render({ content });
+};
+export { MarkdownToHTML, HTMLToMarkdown, renderHTMLFromMarkdown, renderMarkdownFromHTML };

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

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import MarkdownIt from 'markdown-it';
+/**
+ * Types
+ */
+import type { Options } from 'markdown-it';
+export type Fix = 'list';
+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
+     */
+    render({ content, rules }: {
+        content: string;
+        rules: Array<Fix> | 'all';
+    }): string;
+}

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

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import MarkdownIt from 'markdown-it';
+const fixes = {
+    list: (content) => {
+        // Fix list indentation
+        return content.replace(/<li>\s+<p>/g, '<li>').replace(/<\/p>\s+<\/li>/g, '</li>');
+    },
+};
+const defaultMarkdownItOptions = {
+    breaks: true,
+};
+export default class MarkdownToHTML {
+    markdownConverter;
+    constructor(options = defaultMarkdownItOptions) {
+        this.markdownConverter = new MarkdownIt(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
+     */
+    render({ content, rules = 'all' }) {
+        const rendered = this.markdownConverter.render(content);
+        const rulesToApply = rules === 'all' ? Object.keys(fixes) : rules;
+        return rulesToApply.reduce((renderedContent, rule) => {
+            return fixes[rule](renderedContent);
+        }, rendered);
+    }
+}

package/build/types.d.ts

@@ -28,4 +28,14 @@ export type { RecordingState } from './hooks/use-media-recording/index.js';
 export type CancelablePromise<T = void> = Promise<T> & {
     canceled?: boolean;
 };
+export type Block = {
+    attributes?: {
+        [key: string]: unknown;
+    };
+    clientId?: string;
+    innerBlocks?: Block[];
+    isValid?: boolean;
+    name?: string;
+    originalContent?: string;
+};
 export type TranscriptionState = RecordingState | 'validating' | 'processing' | 'error';

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.12.1",
+	"version": "0.12.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": {
@@ -25,7 +25,10 @@
 	"devDependencies": {
 		"@storybook/addon-actions": "8.0.6",
 		"@storybook/blocks": "8.0.6",
+		"@storybook/preview-api": "8.0.6",
 		"@storybook/react": "8.0.6",
+		"@types/markdown-it": "14.0.0",
+		"@types/turndown": "5.0.4",
 		"jest": "^29.6.2",
 		"jest-environment-jsdom": "29.7.0",
 		"typescript": "5.0.4"
@@ -39,7 +42,7 @@
 	"main": "./build/index.js",
 	"types": "./build/index.d.ts",
 	"dependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.22",
+		"@automattic/jetpack-base-styles": "^0.6.23",
 		"@automattic/jetpack-connection": "^0.33.8",
 		"@automattic/jetpack-shared-extension-utils": "^0.14.10",
 		"@microsoft/fetch-event-source": "2.0.1",
@@ -54,7 +57,9 @@
 		"@wordpress/icons": "9.46.0",
 		"classnames": "2.3.2",
 		"debug": "4.3.4",
+		"markdown-it": "14.0.0",
 		"react": "18.2.0",
-		"react-dom": "18.2.0"
+		"react-dom": "18.2.0",
+		"turndown": "7.1.2"
 	}
 }

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

@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import { PlainText } from '@wordpress/block-editor';
+import classNames from 'classnames';
+import React from 'react';
+/**
+ * Internal dependencies
+ */
+import AiStatusIndicator from '../ai-status-indicator/index.js';
+import './style.scss';
+/**
+ * Types
+ */
+import type { RequestingStateProp } from '../../types.js';
+import type { ReactElement } from 'react';
+
+type AIControlProps = {
+	disabled?: boolean;
+	value: string;
+	placeholder?: string;
+	isTransparent?: boolean;
+	state?: RequestingStateProp;
+	onChange?: ( newValue: string ) => void;
+	banner?: ReactElement;
+	error?: ReactElement;
+	actions?: ReactElement;
+	message?: ReactElement;
+	promptUserInputRef?: React.MutableRefObject< HTMLInputElement >;
+};
+
+/**
+ * Base AIControl component. Contains the main structure of the control component and slots for banner, error, actions and message.
+ *
+ * @param {AIControlProps} props - Component props
+ * @returns {ReactElement}       Rendered component
+ */
+export default function AIControl( {
+	disabled = false,
+	value = '',
+	placeholder = '',
+	isTransparent = false,
+	state = 'init',
+	onChange,
+	banner = null,
+	error = null,
+	actions = null,
+	message = null,
+	promptUserInputRef = null,
+}: AIControlProps ): ReactElement {
+	return (
+		<div className="jetpack-components-ai-control__container-wrapper">
+			{ error }
+			<div className="jetpack-components-ai-control__container">
+				{ banner }
+				<div
+					className={ classNames( 'jetpack-components-ai-control__wrapper', {
+						'is-transparent': isTransparent,
+					} ) }
+				>
+					<AiStatusIndicator state={ state } />
+
+					<div className="jetpack-components-ai-control__input-wrapper">
+						<PlainText
+							value={ value }
+							onChange={ onChange }
+							placeholder={ placeholder }
+							className="jetpack-components-ai-control__input"
+							disabled={ disabled }
+							ref={ promptUserInputRef }
+						/>
+					</div>
+					{ actions }
+				</div>
+				{ message }
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,278 @@
+/**
+ * External dependencies
+ */
+import { Button, ButtonGroup } from '@wordpress/components';
+import { useKeyboardShortcut } from '@wordpress/compose';
+import { useImperativeHandle, useRef, useEffect, useCallback, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+	Icon,
+	closeSmall,
+	check,
+	arrowUp,
+	trash,
+	reusableBlock as regenerate,
+} from '@wordpress/icons';
+import debugFactory from 'debug';
+import React, { forwardRef } from 'react';
+/**
+ * Internal dependencies
+ */
+import { GuidelineMessage } from '../message/index.js';
+import AIControl from './ai-control.js';
+import './style.scss';
+/**
+ * Types
+ */
+import type { RequestingStateProp } from '../../types.js';
+import type { ReactElement } from 'react';
+
+type BlockAIControlProps = {
+	disabled?: boolean;
+	value: string;
+	placeholder?: string;
+	showAccept?: boolean;
+	acceptLabel?: string;
+	showButtonLabels?: boolean;
+	isTransparent?: boolean;
+	state?: RequestingStateProp;
+	showGuideLine?: boolean;
+	customFooter?: ReactElement;
+	onChange?: ( newValue: string ) => void;
+	onSend?: ( currentValue: string ) => void;
+	onStop?: () => void;
+	onAccept?: () => void;
+	onDiscard?: () => void;
+	showRemove?: boolean;
+	banner?: ReactElement;
+	error?: ReactElement;
+};
+
+const debug = debugFactory( 'jetpack-ai-client:block-ai-control' );
+
+/**
+ * BlockAIControl component. Used by the AI Assistant block, adding logic and components to the base AIControl component.
+ *
+ * @param {BlockAIControlProps} props  - Component props
+ * @param {React.MutableRefObject} ref - Ref to the component
+ * @returns {ReactElement}             Rendered component
+ */
+export function BlockAIControl(
+	{
+		disabled = false,
+		value = '',
+		placeholder = '',
+		showAccept = false,
+		acceptLabel = __( 'Accept', 'jetpack-ai-client' ),
+		showButtonLabels = true,
+		isTransparent = false,
+		state = 'init',
+		showGuideLine = false,
+		customFooter = null,
+		onChange,
+		onSend,
+		onStop,
+		onAccept,
+		onDiscard,
+		showRemove = false,
+		banner = null,
+		error = null,
+	}: BlockAIControlProps,
+	ref: React.MutableRefObject< HTMLInputElement >
+): ReactElement {
+	const loading = state === 'requesting' || state === 'suggesting';
+	const [ editRequest, setEditRequest ] = useState( false );
+	const [ lastValue, setLastValue ] = useState( value || null );
+	const promptUserInputRef = useRef( null );
+
+	// Pass the ref to forwardRef.
+	useImperativeHandle( ref, () => promptUserInputRef.current );
+
+	useEffect( () => {
+		if ( editRequest ) {
+			promptUserInputRef?.current?.focus();
+		}
+	}, [ editRequest ] );
+
+	const sendHandler = useCallback( () => {
+		setLastValue( value );
+		setEditRequest( false );
+		onSend?.( value );
+	}, [ value ] );
+
+	const changeHandler = useCallback(
+		( newValue: string ) => {
+			onChange?.( newValue );
+			if ( state === 'init' ) {
+				return;
+			}
+
+			if ( ! lastValue ) {
+				// here we're coming from a one-click action
+				setEditRequest( newValue.length > 0 );
+			} else {
+				// here we're coming from an edit action
+				setEditRequest( newValue !== lastValue );
+			}
+		},
+		[ lastValue, state ]
+	);
+
+	const discardHandler = useCallback( () => {
+		onDiscard?.();
+	}, [] );
+
+	const cancelEdit = useCallback( () => {
+		debug( 'cancelEdit, revert to last value', lastValue );
+		onChange?.( lastValue || '' );
+		setEditRequest( false );
+	}, [ lastValue ] );
+
+	useKeyboardShortcut(
+		'mod+enter',
+		() => {
+			if ( showAccept ) {
+				onAccept?.();
+			}
+		},
+		{
+			target: promptUserInputRef,
+		}
+	);
+
+	useKeyboardShortcut(
+		'enter',
+		e => {
+			e.preventDefault();
+			sendHandler();
+		},
+		{
+			target: promptUserInputRef,
+		}
+	);
+
+	const actions = (
+		<>
+			{ ( ! showAccept || editRequest ) && (
+				<div className="jetpack-components-ai-control__controls-prompt_button_wrapper">
+					{ ! loading ? (
+						<>
+							{ editRequest && (
+								<Button
+									className="jetpack-components-ai-control__controls-prompt_button"
+									onClick={ cancelEdit }
+									variant="secondary"
+									label={ __( 'Cancel', 'jetpack-ai-client' ) }
+								>
+									{ showButtonLabels ? (
+										__( 'Cancel', 'jetpack-ai-client' )
+									) : (
+										<Icon icon={ closeSmall } />
+									) }
+								</Button>
+							) }
+
+							{ showRemove && ! editRequest && ! value?.length && onDiscard && (
+								<Button
+									className="jetpack-components-ai-control__controls-prompt_button"
+									onClick={ discardHandler }
+									variant="secondary"
+									label={ __( 'Cancel', 'jetpack-ai-client' ) }
+								>
+									{ showButtonLabels ? (
+										__( 'Cancel', 'jetpack-ai-client' )
+									) : (
+										<Icon icon={ closeSmall } />
+									) }
+								</Button>
+							) }
+
+							{ value?.length > 0 && (
+								<Button
+									className="jetpack-components-ai-control__controls-prompt_button"
+									onClick={ sendHandler }
+									variant="primary"
+									disabled={ ! value?.length || disabled }
+									label={ __( 'Send request', 'jetpack-ai-client' ) }
+								>
+									{ showButtonLabels ? (
+										__( 'Generate', 'jetpack-ai-client' )
+									) : (
+										<Icon icon={ arrowUp } />
+									) }
+								</Button>
+							) }
+						</>
+					) : (
+						<Button
+							className="jetpack-components-ai-control__controls-prompt_button"
+							onClick={ onStop }
+							variant="secondary"
+							label={ __( 'Stop request', 'jetpack-ai-client' ) }
+						>
+							{ showButtonLabels ? (
+								__( 'Stop', 'jetpack-ai-client' )
+							) : (
+								<Icon icon={ closeSmall } />
+							) }
+						</Button>
+					) }
+				</div>
+			) }
+			{ showAccept && ! editRequest && (
+				<div className="jetpack-components-ai-control__controls-prompt_button_wrapper">
+					{ ( value?.length > 0 || lastValue === null ) && (
+						<ButtonGroup>
+							<Button
+								className="jetpack-components-ai-control__controls-prompt_button"
+								label={ __( 'Discard', 'jetpack-ai-client' ) }
+								onClick={ discardHandler }
+								tooltipPosition="top"
+							>
+								<Icon icon={ trash } />
+							</Button>
+							<Button
+								className="jetpack-components-ai-control__controls-prompt_button"
+								label={ __( 'Regenerate', 'jetpack-ai-client' ) }
+								onClick={ () => onSend?.( value ) }
+								tooltipPosition="top"
+								disabled={ ! value?.length || value === null || disabled }
+							>
+								<Icon icon={ regenerate } />
+							</Button>
+						</ButtonGroup>
+					) }
+					<Button
+						className="jetpack-components-ai-control__controls-prompt_button"
+						onClick={ onAccept }
+						variant="primary"
+						label={ acceptLabel }
+					>
+						{ showButtonLabels ? acceptLabel : <Icon icon={ check } /> }
+					</Button>
+				</div>
+			) }
+		</>
+	);
+
+	const message =
+		showGuideLine && ! loading && ! editRequest && ( customFooter || <GuidelineMessage /> );
+
+	return (
+		<AIControl
+			disabled={ disabled || loading }
+			value={ value }
+			placeholder={ placeholder }
+			isTransparent={ isTransparent }
+			state={ state }
+			onChange={ changeHandler }
+			banner={ banner }
+			error={ error }
+			actions={ actions }
+			message={ message }
+			promptUserInputRef={ promptUserInputRef }
+		/>
+	);
+}
+
+export default forwardRef( BlockAIControl );