@automattic/jetpack-ai-client 0.12.1 → 0.12.3

package/src/components/message/index.tsx

@@ -0,0 +1,157 @@
+/**
+ * External dependencies
+ */
+import { ExternalLink, Button } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { Icon, check, arrowRight } from '@wordpress/icons';
+import classNames from 'classnames';
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import errorExclamation from '../../icons/error-exclamation.js';
+/**
+ * Types
+ */
+import type React from 'react';
+
+export const MESSAGE_SEVERITY_WARNING = 'warning';
+export const MESSAGE_SEVERITY_ERROR = 'error';
+export const MESSAGE_SEVERITY_SUCCESS = 'success';
+export const MESSAGE_SEVERITY_INFO = 'info';
+
+const messageSeverityTypes = [
+	MESSAGE_SEVERITY_WARNING,
+	MESSAGE_SEVERITY_ERROR,
+	MESSAGE_SEVERITY_SUCCESS,
+	MESSAGE_SEVERITY_INFO,
+] as const;
+
+export type MessageSeverityProp = ( typeof messageSeverityTypes )[ number ] | null;
+
+export type MessageProps = {
+	icon?: React.ReactNode;
+	severity?: MessageSeverityProp;
+	showSidebarIcon?: boolean;
+	onSidebarIconClick?: () => void;
+	children: React.ReactNode;
+};
+
+export type UpgradeMessageProps = {
+	requestsRemaining: number;
+	onUpgradeClick: () => void;
+};
+
+export type ErrorMessageProps = {
+	error?: string;
+	onTryAgainClick: () => void;
+};
+
+const messageIconsMap = {
+	[ MESSAGE_SEVERITY_INFO ]: null,
+	[ MESSAGE_SEVERITY_WARNING ]: null,
+	[ MESSAGE_SEVERITY_ERROR ]: errorExclamation,
+	[ MESSAGE_SEVERITY_SUCCESS ]: check,
+};
+
+/**
+ * React component to render a block message.
+ *
+ * @param {MessageProps} props - Component props.
+ * @returns {React.ReactElement }    Banner component.
+ */
+export default function Message( {
+	severity = MESSAGE_SEVERITY_INFO,
+	icon = null,
+	showSidebarIcon = false,
+	onSidebarIconClick = () => {},
+	children,
+}: MessageProps ): React.ReactElement {
+	return (
+		<div
+			className={ classNames(
+				'jetpack-ai-assistant__message',
+				`jetpack-ai-assistant__message-severity-${ severity }`
+			) }
+		>
+			{ ( messageIconsMap[ severity ] || icon ) && (
+				<Icon icon={ messageIconsMap[ severity ] || icon } />
+			) }
+			<div className="jetpack-ai-assistant__message-content">{ children }</div>
+			{ showSidebarIcon && (
+				<Button className="jetpack-ai-assistant__message-sidebar" onClick={ onSidebarIconClick }>
+					<Icon size={ 20 } icon={ arrowRight } />
+				</Button>
+			) }
+		</div>
+	);
+}
+
+/**
+ * React component to render a guideline message.
+ *
+ * @returns {React.ReactElement } - Message component.
+ */
+export function GuidelineMessage(): React.ReactElement {
+	return (
+		<Message>
+			<span>
+				{ __( 'AI-generated content could be inaccurate or biased.', 'jetpack-ai-client' ) }
+			</span>
+			<ExternalLink href="https://automattic.com/ai-guidelines">
+				{ __( 'Learn more', 'jetpack-ai-client' ) }
+			</ExternalLink>
+		</Message>
+	);
+}
+
+/**
+ * React component to render an upgrade message for free tier users
+ *
+ * @param {number} requestsRemaining - Number of requests remaining.
+ * @returns {React.ReactElement } - Message component.
+ */
+export function UpgradeMessage( {
+	requestsRemaining,
+	onUpgradeClick,
+}: UpgradeMessageProps ): React.ReactElement {
+	return (
+		<Message severity={ MESSAGE_SEVERITY_WARNING }>
+			<span>
+				{ sprintf(
+					// translators: %1$d: number of requests remaining
+					__( 'You have %1$d free requests remaining.', 'jetpack-ai-client' ),
+					requestsRemaining
+				) }
+			</span>
+			<Button variant="link" onClick={ onUpgradeClick }>
+				{ __( 'Upgrade now', 'jetpack-ai-client' ) }
+			</Button>
+		</Message>
+	);
+}
+
+/**
+ * React component to render an error message
+ *
+ * @param {number} requestsRemaining - Number of requests remaining.
+ * @returns {React.ReactElement } - Message component.
+ */
+export function ErrorMessage( { error, onTryAgainClick }: ErrorMessageProps ): React.ReactElement {
+	const errorMessage = error || __( 'Something went wrong', 'jetpack-ai-client' );
+
+	return (
+		<Message severity={ MESSAGE_SEVERITY_ERROR }>
+			<span>
+				{ sprintf(
+					// translators: %1$d: A dynamic error message
+					__( 'Error: %1$s.', 'jetpack-ai-client' ),
+					errorMessage
+				) }
+			</span>
+			<Button variant="link" onClick={ onTryAgainClick }>
+				{ __( 'Try Again', 'jetpack-ai-client' ) }
+			</Button>
+		</Message>
+	);
+}

package/src/components/message/style.scss

@@ -0,0 +1,83 @@
+@import '@automattic/jetpack-base-styles/root-variables';
+
+.jetpack-ai-assistant__message {
+	display: flex;
+	line-height: 28px;
+	font-size: 12px;
+	align-self: center;
+	align-items: center;
+	padding: 0 12px;
+	border-radius: 4px;
+	min-height: 28px;
+
+	> svg {
+		fill: var( --jp-gray-40 );
+		flex-shrink: 0;
+	}
+
+	.jetpack-ai-assistant__message-content {
+		flex-grow: 2;
+		margin: 0 8px;
+		line-height: 1.4em;
+		display: flex;
+		gap: 4px;
+		align-items: center;
+
+		span {
+			padding: 5px 0;
+		}
+
+		.components-external-link {
+			color: var( --jp-gray-50 );
+		}
+
+		// Force padding 0 in link buttons, since default Gutenberg version in WordPress doesn't use iframe and
+		// Buttons receive styles from edit-post-visual-editor.
+		.components-button.is-link {
+			padding: 0;
+		}
+
+		.components-button.is-link,
+		.components-external-link {
+			flex-shrink: 0;
+		}
+	}
+}
+
+.jetpack-ai-assistant__message-severity-info {
+	background-color: var( --jp-gray-0 );
+	color: var( --jp-gray-50 );
+}
+
+.jetpack-ai-assistant__message-severity-warning {
+	background-color: #FEF8EE;
+	color: var( --jp-gray-100 );
+}
+
+.jetpack-ai-assistant__message-severity-error {
+	background-color: var( --jp-red-0 );
+	color: var( --jp-gray-100 );
+
+	> svg {
+		fill: var( --jp-red-40, #E65054 );
+	}
+}
+
+.jetpack-ai-assistant__message-severity-success {
+	background-color: var( --jp-green-5 );
+	color: var( --jp-gray-100 );
+
+	> svg {
+		fill: var( --jp-green-30 );
+	}
+}
+
+.jetpack-ai-assistant__message-sidebar {
+	display: flex;
+	padding: 0;
+	height: unset;
+
+	> svg {
+		fill: var( --jp-gray-50 );
+	}
+}

package/src/icons/error-exclamation.tsx

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+
+const errorExclamation = (
+	<SVG width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M10 3.95833C6.66328 3.95833 3.95833 6.66327 3.95833 9.99999C3.95833 13.3367 6.66328 16.0417 10 16.0417C13.3367 16.0417 16.0417 13.3367 16.0417 9.99999C16.0417 6.66327 13.3367 3.95833 10 3.95833ZM2.70833 9.99999C2.70833 5.97292 5.97292 2.70833 10 2.70833C14.0271 2.70833 17.2917 5.97292 17.2917 9.99999C17.2917 14.0271 14.0271 17.2917 10 17.2917C5.97292 17.2917 2.70833 14.0271 2.70833 9.99999Z"
+		/>
+		<Path d="M10.8333 5.83333H9.16667V10.8333H10.8333V5.83333Z" />
+		<Path d="M10.8333 12.5H9.16667V14.1667H10.8333V12.5Z" />
+	</SVG>
+);
+
+export default errorExclamation;

package/src/index.ts

@@ -35,3 +35,8 @@ export * from './data-flow/index.js';
  * Types
  */
 export * from './types.js';
+
+/*
+ * Libs
+ */
+export * from './libs/index.js';

package/src/libs/index.ts

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

package/src/libs/markdown/README.md

@@ -0,0 +1,74 @@
+# Markdown converters
+
+Typescript functions and classes to convert Markdown to and from HTML.
+
+## HTML to Markdown
+
+The HTML to Markdown conversion uses the [Turndown](https://github.com/mixmark-io/turndown) library and supports Turndown's options and rules.
+
+Example:
+```typescript
+/**
+ * External dependencies
+ */
+import { renderMarkdownFromHTML } from '@automattic/jetpack-ai-client';
+
+const htmlContent = '<strong>Hello world</strong>';
+const markdownContent = renderMarkdownFromHTML( { content: htmlContent } );
+// **Hello world**
+```
+
+To use custom options and rules:
+```typescript
+/**
+ * External dependencies
+ */
+import { HTMLToMarkdown } from '@automattic/jetpack-ai-client';
+
+const htmlContent = '<strong>Hello world</strong>';
+const options = { headingStyle: 'setext' };
+const rules = {
+	customStrong: {
+		filter: [ 'strong' ],
+		replacement: function( content: string ) {
+				return '***' + content + '***';
+		}
+ 	}
+};
+const renderer = new HTMLToMarkdown( options, rules );
+const markdownContent = renderer.render( { content: htmlContent } );
+// ***Hello world***
+```
+
+## Markdown to HTML
+
+The Markdown to HTML conversion uses the [markdown-it](https://github.com/markdown-it/markdown-it) library and supports markdown-it's options. It also adds access to common fixes.
+
+Example:
+```typescript
+/**
+ * External dependencies
+ */
+import { renderHTMLFromMarkdown } from '@automattic/jetpack-ai-client';
+
+const markdownContent = '**Hello world**';
+const htmlContent = renderHTMLFromMarkdown( { content: markdownContent, rules: 'all' } ); // 'all' is a default value
+// <p><strong>Hello world</strong></p>\n
+```
+
+To use custom options and fixes:
+```typescript
+/**
+ * External dependencies
+ */
+import { MarkdownToHTML } from '@automattic/jetpack-ai-client';
+
+const markdownContent = '**Hello world**';
+const options = { breaks: 'false' };
+const rules = [ 'list' ];
+const renderer = new MarkdownToHTML( options );
+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.

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

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import TurndownService from 'turndown';
+/**
+ * Types
+ */
+import type { Options, Rule } from 'turndown';
+
+const defaultTurndownOptions: Options = { emDelimiter: '_', headingStyle: 'atx' };
+const defaultTurndownRules: { [ key: string ]: Rule } = {
+	strikethrough: {
+		filter: [ 'del', 's' ],
+		replacement: function ( content: string ) {
+			return '~~' + content + '~~';
+		},
+	},
+};
+
+export default class HTMLToMarkdown {
+	turndownService: TurndownService;
+
+	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 ] );
+		}
+	}
+
+	/**
+	 * 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 {
+		return this.turndownService.turndown( content );
+	}
+}

package/src/libs/markdown/index.ts

@@ -0,0 +1,28 @@
+/**
+ * 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';
+
+const defaultMarkdownConverter = new MarkdownToHTML();
+const defaultHTMLConverter = new HTMLToMarkdown();
+
+const renderHTMLFromMarkdown = ( {
+	content,
+	rules = 'all',
+}: {
+	content: string;
+	rules?: Array< HTMLFix > | 'all';
+} ) => {
+	return defaultMarkdownConverter.render( { content, rules } );
+};
+
+const renderMarkdownFromHTML = ( { content }: { content: string } ) => {
+	return defaultHTMLConverter.render( { content } );
+};
+
+export { MarkdownToHTML, HTMLToMarkdown, renderHTMLFromMarkdown, renderMarkdownFromHTML };

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

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import MarkdownIt from 'markdown-it';
+/**
+ * Types
+ */
+import type { Options } from 'markdown-it';
+
+export type Fix = 'list';
+type Fixes = {
+	[ key in Fix ]: ( content: string ) => string;
+};
+
+const fixes: Fixes = {
+	list: ( content: string ) => {
+		// Fix list indentation
+		return content.replace( /<li>\s+<p>/g, '<li>' ).replace( /<\/p>\s+<\/li>/g, '</li>' );
+	},
+};
+
+const defaultMarkdownItOptions: Options = {
+	breaks: true,
+};
+
+export default class MarkdownToHTML {
+	markdownConverter: MarkdownIt;
+
+	constructor( options: 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' }: { content: string; rules: Array< Fix > | 'all' } ): string {
+		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/src/types.ts

@@ -93,6 +93,17 @@ 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;
+};
+
 /*
  * Transcription types
  */

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

@@ -1,57 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * External dependencies
- */
-import { ExternalLink, Button } from '@wordpress/components';
-import { createInterpolateElement } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import { Icon, warning, info, cancelCircleFilled as error, check as success, } from '@wordpress/icons';
-import './style.scss';
-export const MESSAGE_SEVERITY_WARNING = 'warning';
-export const MESSAGE_SEVERITY_ERROR = 'error';
-export const MESSAGE_SEVERITY_SUCCESS = 'success';
-export const MESSAGE_SEVERITY_INFO = 'info';
-const messageSeverityTypes = [
-    MESSAGE_SEVERITY_WARNING,
-    MESSAGE_SEVERITY_ERROR,
-    MESSAGE_SEVERITY_SUCCESS,
-    MESSAGE_SEVERITY_INFO,
-];
-const messageIconsMap = {
-    [MESSAGE_SEVERITY_WARNING]: warning,
-    [MESSAGE_SEVERITY_ERROR]: error,
-    [MESSAGE_SEVERITY_SUCCESS]: success,
-    [MESSAGE_SEVERITY_INFO]: info,
-};
-/**
- * React component to render a block message.
- *
- * @param {MessageProps} props - Component props.
- * @returns {React.ReactElement }    Banner component.
- */
-export default function Message({ severity = null, icon = null, children, }) {
-    return (_jsxs("div", { className: "jetpack-ai-assistant__message", children: [(severity || icon) && _jsx(Icon, { icon: messageIconsMap[severity] || icon }), _jsx("div", { className: "jetpack-ai-assistant__message-content", children: children })] }));
-}
-/**
- * React component to render a guideline message.
- *
- * @returns {React.ReactElement } - Message component.
- */
-export function GuidelineMessage() {
-    return (_jsx(Message, { severity: MESSAGE_SEVERITY_INFO, children: createInterpolateElement(__('AI-generated content could be inaccurate or biased. <link>Learn more</link>', 'jetpack-ai-client'), {
-            link: _jsx(ExternalLink, { href: "https://automattic.com/ai-guidelines" }),
-        }) }));
-}
-/**
- * React component to render a upgrade message.
- *
- * @param {number} requestsRemaining - Number of requests remaining.
- * @returns {React.ReactElement } - Message component.
- */
-export function UpgradeMessage({ requestsRemaining, onUpgradeClick, }) {
-    return (_jsx(Message, { severity: MESSAGE_SEVERITY_INFO, children: createInterpolateElement(sprintf(
-        // translators: %1$d: number of requests remaining
-        __('You have %1$d free requests remaining. <link>Upgrade</link> and avoid interruptions', 'jetpack-ai-client'), requestsRemaining), {
-            link: _jsx(Button, { variant: "link", onClick: onUpgradeClick }),
-        }) }));
-}

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

@@ -1,118 +0,0 @@
-/**
- * External dependencies
- */
-import { ExternalLink, Button } from '@wordpress/components';
-import { createInterpolateElement } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import {
-	Icon,
-	warning,
-	info,
-	cancelCircleFilled as error,
-	check as success,
-} from '@wordpress/icons';
-/**
- * Types
- */
-import type React from 'react';
-
-import './style.scss';
-
-export const MESSAGE_SEVERITY_WARNING = 'warning';
-export const MESSAGE_SEVERITY_ERROR = 'error';
-export const MESSAGE_SEVERITY_SUCCESS = 'success';
-export const MESSAGE_SEVERITY_INFO = 'info';
-
-const messageSeverityTypes = [
-	MESSAGE_SEVERITY_WARNING,
-	MESSAGE_SEVERITY_ERROR,
-	MESSAGE_SEVERITY_SUCCESS,
-	MESSAGE_SEVERITY_INFO,
-] as const;
-
-export type MessageSeverityProp = ( typeof messageSeverityTypes )[ number ] | null;
-
-export type MessageProps = {
-	icon?: React.ReactNode;
-	children: React.ReactNode;
-	severity: MessageSeverityProp;
-};
-
-const messageIconsMap = {
-	[ MESSAGE_SEVERITY_WARNING ]: warning,
-	[ MESSAGE_SEVERITY_ERROR ]: error,
-	[ MESSAGE_SEVERITY_SUCCESS ]: success,
-	[ MESSAGE_SEVERITY_INFO ]: info,
-};
-
-/**
- * React component to render a block message.
- *
- * @param {MessageProps} props - Component props.
- * @returns {React.ReactElement }    Banner component.
- */
-export default function Message( {
-	severity = null,
-	icon = null,
-	children,
-}: MessageProps ): React.ReactElement {
-	return (
-		<div className="jetpack-ai-assistant__message">
-			{ ( severity || icon ) && <Icon icon={ messageIconsMap[ severity ] || icon } /> }
-			<div className="jetpack-ai-assistant__message-content">{ children }</div>
-		</div>
-	);
-}
-
-/**
- * React component to render a guideline message.
- *
- * @returns {React.ReactElement } - Message component.
- */
-export function GuidelineMessage(): React.ReactElement {
-	return (
-		<Message severity={ MESSAGE_SEVERITY_INFO }>
-			{ createInterpolateElement(
-				__(
-					'AI-generated content could be inaccurate or biased. <link>Learn more</link>',
-					'jetpack-ai-client'
-				),
-				{
-					link: <ExternalLink href="https://automattic.com/ai-guidelines" />,
-				}
-			) }
-		</Message>
-	);
-}
-
-/**
- * React component to render a upgrade message.
- *
- * @param {number} requestsRemaining - Number of requests remaining.
- * @returns {React.ReactElement } - Message component.
- */
-export function UpgradeMessage( {
-	requestsRemaining,
-	onUpgradeClick,
-}: {
-	requestsRemaining: number;
-	onUpgradeClick: () => void;
-} ): React.ReactElement {
-	return (
-		<Message severity={ MESSAGE_SEVERITY_INFO }>
-			{ createInterpolateElement(
-				sprintf(
-					// translators: %1$d: number of requests remaining
-					__(
-						'You have %1$d free requests remaining. <link>Upgrade</link> and avoid interruptions',
-						'jetpack-ai-client'
-					),
-					requestsRemaining
-				),
-				{
-					link: <Button variant="link" onClick={ onUpgradeClick } />,
-				}
-			) }
-		</Message>
-	);
-}