@automattic/jetpack-ai-client 0.12.1 → 0.12.3

package/CHANGELOG.md

@@ -5,6 +5,14 @@ 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.12.3] - 2024-04-25
+### Changed
+- AI Client: Separate AIControl UI from block logic. [#36967]
+
+## [0.12.2] - 2024-04-22
+### Added
+- AI Client: Add Markdown and HTML conversions. [#36906]
+
 ## [0.12.1] - 2024-04-15
 ### Added
 - AI Client: Add callbacks, initial requesting state and change error handling. [#36869]
@@ -286,6 +294,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.12.3]: https://github.com/Automattic/jetpack-ai-client/compare/v0.12.2...v0.12.3
+[0.12.2]: https://github.com/Automattic/jetpack-ai-client/compare/v0.12.1...v0.12.2
 [0.12.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.12.0...v0.12.1
 [0.12.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.11.0...v0.12.0
 [0.11.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.10.1...v0.11.0

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

@@ -0,0 +1,28 @@
+import React from 'react';
+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, value, placeholder, isTransparent, state, onChange, banner, error, actions, message, promptUserInputRef, }: AIControlProps): ReactElement;
+export {};

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { PlainText } from '@wordpress/block-editor';
+import classNames from 'classnames';
+/**
+ * Internal dependencies
+ */
+import AiStatusIndicator from '../ai-status-indicator/index.js';
+import './style.scss';
+/**
+ * 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, }) {
+    return (_jsxs("div", { className: "jetpack-components-ai-control__container-wrapper", children: [error, _jsxs("div", { className: "jetpack-components-ai-control__container", children: [banner, _jsxs("div", { className: classNames('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/block-ai-control.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+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;
+};
+/**
+ * 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 declare function BlockAIControl({ disabled, value, placeholder, showAccept, acceptLabel, showButtonLabels, isTransparent, state, showGuideLine, customFooter, onChange, onSend, onStop, onAccept, onDiscard, showRemove, banner, error, }: BlockAIControlProps, ref: React.MutableRefObject<HTMLInputElement>): ReactElement;
+declare const _default: React.ForwardRefExoticComponent<BlockAIControlProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;

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

@@ -0,0 +1,82 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 { forwardRef } from 'react';
+/**
+ * Internal dependencies
+ */
+import { GuidelineMessage } from '../message/index.js';
+import AIControl from './ai-control.js';
+import './style.scss';
+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, }, ref) {
+    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) => {
+        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 = (_jsxs(_Fragment, { children: [(!showAccept || editRequest) && (_jsx("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: !loading ? (_jsxs(_Fragment, { children: [editRequest && (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: cancelEdit, variant: "secondary", label: __('Cancel', 'jetpack-ai-client'), children: showButtonLabels ? (__('Cancel', 'jetpack-ai-client')) : (_jsx(Icon, { icon: closeSmall })) })), showRemove && !editRequest && !value?.length && onDiscard && (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: discardHandler, variant: "secondary", label: __('Cancel', 'jetpack-ai-client'), children: showButtonLabels ? (__('Cancel', 'jetpack-ai-client')) : (_jsx(Icon, { icon: closeSmall })) })), value?.length > 0 && (_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 })) }))] })) : (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: onStop, variant: "secondary", label: __('Stop request', 'jetpack-ai-client'), children: showButtonLabels ? (__('Stop', 'jetpack-ai-client')) : (_jsx(Icon, { icon: closeSmall })) })) })), showAccept && !editRequest && (_jsxs("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: [(value?.length > 0 || lastValue === null) && (_jsxs(ButtonGroup, { children: [_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", label: __('Discard', 'jetpack-ai-client'), onClick: discardHandler, tooltipPosition: "top", children: _jsx(Icon, { icon: trash }) }), _jsx(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, children: _jsx(Icon, { icon: regenerate }) })] })), _jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: onAccept, variant: "primary", label: acceptLabel, children: showButtonLabels ? acceptLabel : _jsx(Icon, { icon: check }) })] }))] }));
+    const message = showGuideLine && !loading && !editRequest && (customFooter || _jsx(GuidelineMessage, {}));
+    return (_jsx(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);

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import './style.scss';
+/**
+ * Types
+ */
+import type { RequestingStateProp } from '../../types.js';
+import type { ReactElement } from 'react';
+type ExtensionAIControlProps = {
+    disabled?: boolean;
+    value: string;
+    placeholder?: string;
+    showButtonLabels?: boolean;
+    isTransparent?: boolean;
+    state?: RequestingStateProp;
+    showGuideLine?: boolean;
+    error?: string;
+    requestsRemaining?: number;
+    showUpgradeMessage?: boolean;
+    onChange?: (newValue: string) => void;
+    onSend?: (currentValue: string) => void;
+    onStop?: () => void;
+    onClose?: () => void;
+    onUndo?: () => void;
+    onUpgrade?: () => void;
+};
+/**
+ * ExtensionAIControl component. Used by the AI Assistant inline extensions, adding logic and components to the base AIControl component.
+ *
+ * @param {ExtensionAIControlProps} props  - Component props
+ * @param {React.MutableRefObject} ref     - Ref to the component
+ * @returns {ReactElement}                 Rendered component
+ */
+export declare function ExtensionAIControl({ disabled, value, placeholder, showButtonLabels, isTransparent, state, showGuideLine, error, requestsRemaining, showUpgradeMessage, onChange, onSend, onStop, onClose, onUndo, onUpgrade, }: 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

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * 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, arrowUp, undo } from '@wordpress/icons';
+import { forwardRef } from 'react';
+/**
+ * Internal dependencies
+ */
+import { GuidelineMessage, ErrorMessage, UpgradeMessage } from '../message/index.js';
+import AIControl from './ai-control.js';
+import './style.scss';
+/**
+ * ExtensionAIControl component. Used by the AI Assistant inline extensions, adding logic and components to the base AIControl component.
+ *
+ * @param {ExtensionAIControlProps} props  - Component props
+ * @param {React.MutableRefObject} ref     - Ref to the component
+ * @returns {ReactElement}                 Rendered component
+ */
+export function ExtensionAIControl({ disabled = false, value = '', placeholder = '', showButtonLabels = true, isTransparent = false, state = 'init', showGuideLine = false, error, requestsRemaining, showUpgradeMessage = false, onChange, onSend, onStop, onClose, onUndo, onUpgrade, }, ref) {
+    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);
+    }, [onSend, value]);
+    const changeHandler = useCallback((newValue) => {
+        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);
+        }
+    }, [onChange, lastValue, state]);
+    const stopHandler = useCallback(() => {
+        onStop?.();
+    }, [onStop]);
+    const closeHandler = useCallback(() => {
+        onClose?.();
+    }, [onClose]);
+    const undoHandler = useCallback(() => {
+        onUndo?.();
+    }, [onUndo]);
+    const upgradeHandler = useCallback(() => {
+        onUpgrade?.();
+    }, [onUpgrade]);
+    useKeyboardShortcut('enter', e => {
+        e.preventDefault();
+        sendHandler();
+    }, {
+        target: promptUserInputRef,
+    });
+    const actions = (_jsx(_Fragment, { children: loading ? (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: stopHandler, variant: "secondary", label: __('Stop request', 'jetpack-ai-client'), children: showButtonLabels ? __('Stop', 'jetpack-ai-client') : _jsx(Icon, { icon: closeSmall }) })) : (_jsxs(_Fragment, { children: [value?.length > 0 && (_jsx("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: _jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: sendHandler, variant: "primary", disabled: !value?.length || disabled, label: __('Send request', 'jetpack-ai-client'), children: showButtonLabels ? (__('Generate', 'jetpack-ai-client')) : (_jsx(Icon, { icon: arrowUp })) }) })), value?.length <= 0 && state === 'done' && (_jsx("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: _jsxs(ButtonGroup, { children: [_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", label: __('Undo', 'jetpack-ai-client'), onClick: undoHandler, tooltipPosition: "top", children: _jsx(Icon, { icon: undo }) }), _jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", label: __('Close', 'jetpack-ai-client'), onClick: closeHandler, variant: "tertiary", children: __('Close', 'jetpack-ai-client') })] }) }))] })) }));
+    let message = null;
+    if (error) {
+        message = _jsx(ErrorMessage, { error: error, onTryAgainClick: sendHandler });
+    }
+    else if (showUpgradeMessage) {
+        message = (_jsx(UpgradeMessage, { requestsRemaining: requestsRemaining, onUpgradeClick: upgradeHandler }));
+    }
+    else if (showGuideLine) {
+        message = _jsx(GuidelineMessage, {});
+    }
+    return (_jsx(AIControl, { disabled: disabled || loading, value: value, placeholder: placeholder, isTransparent: isTransparent, state: state, onChange: changeHandler, actions: actions, message: message, promptUserInputRef: promptUserInputRef }));
+}
+export default forwardRef(ExtensionAIControl);

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

@@ -1,40 +1,3 @@
-import React from 'react';
-/**
- * Internal dependencies
- */
-import './style.scss';
-/**
- * Types
- */
-import type { RequestingStateProp } from '../../types.js';
-import type { ReactElement } from 'react';
-type AiControlProps = {
-    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;
-    bannerComponent?: ReactElement;
-    errorComponent?: ReactElement;
-};
-/**
- * AI Control component.
- *
- * @param {AiControlProps} props       - Component props.
- * @param {React.MutableRefObject} ref - Ref to the component.
- * @returns {ReactElement}         Rendered component.
- */
-export declare function AIControl({ disabled, value, placeholder, showAccept, acceptLabel, showButtonLabels, isTransparent, state, showGuideLine, customFooter, onChange, onSend, onStop, onAccept, onDiscard, showRemove, bannerComponent, errorComponent, }: AiControlProps, ref: React.MutableRefObject<HTMLInputElement>): ReactElement;
-declare const _default: React.ForwardRefExoticComponent<AiControlProps & React.RefAttributes<HTMLInputElement>>;
-export default _default;
+export { default as AIControl } from './ai-control.js';
+export { default as BlockAIControl } from './block-ai-control.js';
+export { default as ExtensionAIControl } from './extension-ai-control.js';

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

@@ -1,86 +1,3 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * External dependencies
- */
-import { PlainText } from '@wordpress/block-editor';
-import { Button, ButtonGroup } from '@wordpress/components';
-import { useKeyboardShortcut } from '@wordpress/compose';
-import { useImperativeHandle, useRef, useEffect, useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { Icon, closeSmall, check, arrowUp, trash, reusableBlock } from '@wordpress/icons';
-import classNames from 'classnames';
-import debugFactory from 'debug';
-import React, { forwardRef } from 'react';
-/**
- * Internal dependencies
- */
-import './style.scss';
-import AiStatusIndicator from '../ai-status-indicator/index.js';
-import { GuidelineMessage } from './message.js';
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => { };
-const debug = debugFactory('jetpack-ai-client:ai-control');
-/**
- * AI Control component.
- *
- * @param {AiControlProps} props       - Component props.
- * @param {React.MutableRefObject} ref - Ref to the component.
- * @returns {ReactElement}         Rendered component.
- */
-export function AIControl({ disabled = false, value = '', placeholder = '', showAccept = false, acceptLabel = __('Accept', 'jetpack-ai-client'), showButtonLabels = true, isTransparent = false, state = 'init', showGuideLine = false, customFooter = null, onChange = noop, onSend = noop, onStop = noop, onAccept = noop, onDiscard = null, showRemove = false, bannerComponent = null, errorComponent = null, }, ref) {
-    const promptUserInputRef = useRef(null);
-    const loading = state === 'requesting' || state === 'suggesting';
-    const [editRequest, setEditRequest] = React.useState(false);
-    const [lastValue, setLastValue] = React.useState(value || null);
-    useEffect(() => {
-        if (editRequest) {
-            promptUserInputRef?.current?.focus();
-        }
-    }, [editRequest]);
-    const sendRequest = useCallback(() => {
-        setLastValue(value);
-        setEditRequest(false);
-        onSend?.(value);
-    }, [value]);
-    const changeHandler = useCallback((newValue) => {
-        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]);
-    // Pass the ref to forwardRef.
-    useImperativeHandle(ref, () => promptUserInputRef.current);
-    useKeyboardShortcut('mod+enter', () => {
-        if (showAccept) {
-            onAccept?.();
-        }
-    }, {
-        target: promptUserInputRef,
-    });
-    useKeyboardShortcut('enter', e => {
-        e.preventDefault();
-        sendRequest();
-    }, {
-        target: promptUserInputRef,
-    });
-    return (_jsxs("div", { className: "jetpack-components-ai-control__container-wrapper", children: [errorComponent, _jsxs("div", { className: "jetpack-components-ai-control__container", children: [bannerComponent, _jsxs("div", { className: classNames('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: changeHandler, placeholder: placeholder, className: "jetpack-components-ai-control__input", disabled: loading || disabled, ref: promptUserInputRef }) }), (!showAccept || editRequest) && (_jsx("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: !loading ? (_jsxs(_Fragment, { children: [editRequest && (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: cancelEdit, variant: "secondary", label: __('Cancel', 'jetpack-ai-client'), children: showButtonLabels ? (__('Cancel', 'jetpack-ai-client')) : (_jsx(Icon, { icon: closeSmall })) })), showRemove && !editRequest && !value?.length && onDiscard && (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: discardHandler, variant: "secondary", label: __('Cancel', 'jetpack-ai-client'), children: showButtonLabels ? (__('Cancel', 'jetpack-ai-client')) : (_jsx(Icon, { icon: closeSmall })) })), value?.length > 0 && (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: sendRequest, variant: "primary", disabled: !value?.length || disabled, label: __('Send request', 'jetpack-ai-client'), children: showButtonLabels ? (__('Generate', 'jetpack-ai-client')) : (_jsx(Icon, { icon: arrowUp })) }))] })) : (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: onStop, variant: "secondary", label: __('Stop request', 'jetpack-ai-client'), children: showButtonLabels ? (__('Stop', 'jetpack-ai-client')) : (_jsx(Icon, { icon: closeSmall })) })) })), showAccept && !editRequest && (_jsxs("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: [(value?.length > 0 || lastValue === null) && (_jsxs(ButtonGroup, { children: [_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", label: __('Discard', 'jetpack-ai-client'), onClick: discardHandler, tooltipPosition: "top", children: _jsx(Icon, { icon: trash }) }), _jsx(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, children: _jsx(Icon, { icon: reusableBlock }) })] })), _jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: onAccept, variant: "primary", label: acceptLabel, children: showButtonLabels ? acceptLabel : _jsx(Icon, { icon: check }) })] }))] }), showGuideLine && !loading && !editRequest && (customFooter || _jsx(GuidelineMessage, {}))] })] }));
-}
-export default forwardRef(AIControl);
+export { default as AIControl } from './ai-control.js';
+export { default as BlockAIControl } from './block-ai-control.js';
+export { default as ExtensionAIControl } from './extension-ai-control.js';

package/build/components/index.d.ts

@@ -1,4 +1,4 @@
-export { default as AIControl } from './ai-control/index.js';
+export { AIControl, BlockAIControl } from './ai-control/index.js';
 export { default as AiStatusIndicator } from './ai-status-indicator/index.js';
 export { default as AudioDurationDisplay } from './audio-duration-display/index.js';
-export { GuidelineMessage, UpgradeMessage, default as FooterMessage, } from './ai-control/message.js';
+export { GuidelineMessage, UpgradeMessage, ErrorMessage, default as FooterMessage, } from './message/index.js';

package/build/components/index.js

@@ -1,4 +1,4 @@
-export { default as AIControl } from './ai-control/index.js';
+export { AIControl, BlockAIControl } from './ai-control/index.js';
 export { default as AiStatusIndicator } from './ai-status-indicator/index.js';
 export { default as AudioDurationDisplay } from './audio-duration-display/index.js';
-export { GuidelineMessage, UpgradeMessage, default as FooterMessage, } from './ai-control/message.js';
+export { GuidelineMessage, UpgradeMessage, ErrorMessage, default as FooterMessage, } from './message/index.js';

package/build/components/{ai-control/message.d.ts → message/index.d.ts}

@@ -1,8 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
 /**
  * Types
  */
 import type React from 'react';
-import './style.scss';
 export declare const MESSAGE_SEVERITY_WARNING = "warning";
 export declare const MESSAGE_SEVERITY_ERROR = "error";
 export declare const MESSAGE_SEVERITY_SUCCESS = "success";
@@ -11,8 +14,18 @@ declare const messageSeverityTypes: readonly ["warning", "error", "success", "in
 export type MessageSeverityProp = (typeof messageSeverityTypes)[number] | null;
 export type MessageProps = {
     icon?: React.ReactNode;
+    severity?: MessageSeverityProp;
+    showSidebarIcon?: boolean;
+    onSidebarIconClick?: () => void;
     children: React.ReactNode;
-    severity: MessageSeverityProp;
+};
+export type UpgradeMessageProps = {
+    requestsRemaining: number;
+    onUpgradeClick: () => void;
+};
+export type ErrorMessageProps = {
+    error?: string;
+    onTryAgainClick: () => void;
 };
 /**
  * React component to render a block message.
@@ -20,7 +33,7 @@ export type MessageProps = {
  * @param {MessageProps} props - Component props.
  * @returns {React.ReactElement }    Banner component.
  */
-export default function Message({ severity, icon, children, }: MessageProps): React.ReactElement;
+export default function Message({ severity, icon, showSidebarIcon, onSidebarIconClick, children, }: MessageProps): React.ReactElement;
 /**
  * React component to render a guideline message.
  *
@@ -28,13 +41,17 @@ export default function Message({ severity, icon, children, }: MessageProps): Re
  */
 export declare function GuidelineMessage(): React.ReactElement;
 /**
- * React component to render a upgrade 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 declare function UpgradeMessage({ requestsRemaining, onUpgradeClick, }: {
-    requestsRemaining: number;
-    onUpgradeClick: () => void;
-}): React.ReactElement;
+export declare function UpgradeMessage({ requestsRemaining, onUpgradeClick, }: UpgradeMessageProps): React.ReactElement;
+/**
+ * React component to render an error message
+ *
+ * @param {number} requestsRemaining - Number of requests remaining.
+ * @returns {React.ReactElement } - Message component.
+ */
+export declare function ErrorMessage({ error, onTryAgainClick }: ErrorMessageProps): React.ReactElement;
 export {};

package/build/components/message/index.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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';
+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_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, }) {
+    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 }) }))] }));
+}
+/**
+ * React component to render a guideline message.
+ *
+ * @returns {React.ReactElement } - Message component.
+ */
+export function GuidelineMessage() {
+    return (_jsxs(Message, { children: [_jsx("span", { children: __('AI-generated content could be inaccurate or biased.', 'jetpack-ai-client') }), _jsx(ExternalLink, { href: "https://automattic.com/ai-guidelines", children: __('Learn more', 'jetpack-ai-client') })] }));
+}
+/**
+ * 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, }) {
+    return (_jsxs(Message, { severity: MESSAGE_SEVERITY_WARNING, 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') })] }));
+}
+/**
+ * React component to render an error message
+ *
+ * @param {number} requestsRemaining - Number of requests remaining.
+ * @returns {React.ReactElement } - Message component.
+ */
+export function ErrorMessage({ error, onTryAgainClick }) {
+    const errorMessage = error || __('Something went wrong', 'jetpack-ai-client');
+    return (_jsxs(Message, { severity: MESSAGE_SEVERITY_ERROR, children: [_jsx("span", { children: sprintf(
+                // translators: %1$d: A dynamic error message
+                __('Error: %1$s.', 'jetpack-ai-client'), errorMessage) }), _jsx(Button, { variant: "link", onClick: onTryAgainClick, children: __('Try Again', 'jetpack-ai-client') })] }));
+}

package/build/icons/error-exclamation.d.ts

@@ -0,0 +1,2 @@
+declare const errorExclamation: import("react/jsx-runtime").JSX.Element;
+export default errorExclamation;

package/build/icons/error-exclamation.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+const errorExclamation = (_jsxs(SVG, { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx(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" }), _jsx(Path, { d: "M10.8333 5.83333H9.16667V10.8333H10.8333V5.83333Z" }), _jsx(Path, { d: "M10.8333 12.5H9.16667V14.1667H10.8333V12.5Z" })] }));
+export default errorExclamation;

package/build/index.d.ts

@@ -12,3 +12,4 @@ export * from './icons/index.js';
 export * from './components/index.js';
 export * from './data-flow/index.js';
 export * from './types.js';
+export * from './libs/index.js';

package/build/index.js

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

package/build/libs/index.d.ts

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

package/build/libs/index.js

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