@automattic/jetpack-ai-client 0.12.1 → 0.12.3

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

@@ -0,0 +1,217 @@
+/**
+ * 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 React, { forwardRef } from 'react';
+/**
+ * Internal dependencies
+ */
+import { GuidelineMessage, ErrorMessage, UpgradeMessage } 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 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 function ExtensionAIControl(
+	{
+		disabled = false,
+		value = '',
+		placeholder = '',
+		showButtonLabels = true,
+		isTransparent = false,
+		state = 'init',
+		showGuideLine = false,
+		error,
+		requestsRemaining,
+		showUpgradeMessage = false,
+		onChange,
+		onSend,
+		onStop,
+		onClose,
+		onUndo,
+		onUpgrade,
+	}: ExtensionAIControlProps,
+	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 );
+	}, [ onSend, 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 );
+			}
+		},
+		[ 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 = (
+		<>
+			{ loading ? (
+				<Button
+					className="jetpack-components-ai-control__controls-prompt_button"
+					onClick={ stopHandler }
+					variant="secondary"
+					label={ __( 'Stop request', 'jetpack-ai-client' ) }
+				>
+					{ showButtonLabels ? __( 'Stop', 'jetpack-ai-client' ) : <Icon icon={ closeSmall } /> }
+				</Button>
+			) : (
+				<>
+					{ value?.length > 0 && (
+						<div className="jetpack-components-ai-control__controls-prompt_button_wrapper">
+							<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>
+						</div>
+					) }
+					{ value?.length <= 0 && state === 'done' && (
+						<div className="jetpack-components-ai-control__controls-prompt_button_wrapper">
+							<ButtonGroup>
+								<Button
+									className="jetpack-components-ai-control__controls-prompt_button"
+									label={ __( 'Undo', 'jetpack-ai-client' ) }
+									onClick={ undoHandler }
+									tooltipPosition="top"
+								>
+									<Icon icon={ undo } />
+								</Button>
+								<Button
+									className="jetpack-components-ai-control__controls-prompt_button"
+									label={ __( 'Close', 'jetpack-ai-client' ) }
+									onClick={ closeHandler }
+									variant="tertiary"
+								>
+									{ __( 'Close', 'jetpack-ai-client' ) }
+								</Button>
+							</ButtonGroup>
+						</div>
+					) }
+				</>
+			) }
+		</>
+	);
+
+	let message = null;
+	if ( error ) {
+		message = <ErrorMessage error={ error } onTryAgainClick={ sendHandler } />;
+	} else if ( showUpgradeMessage ) {
+		message = (
+			<UpgradeMessage requestsRemaining={ requestsRemaining } onUpgradeClick={ upgradeHandler } />
+		);
+	} else if ( showGuideLine ) {
+		message = <GuidelineMessage />;
+	}
+
+	return (
+		<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/src/components/ai-control/index.tsx

@@ -1,281 +1,3 @@
-/**
- * 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';
-/**
- * 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;
-};
-
-// 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,
-	}: AiControlProps,
-	ref: React.MutableRefObject< HTMLInputElement >
-): ReactElement {
-	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: 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 ] );
-
-	// 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 (
-		<div className="jetpack-components-ai-control__container-wrapper">
-			{ errorComponent }
-			<div className="jetpack-components-ai-control__container">
-				{ bannerComponent }
-				<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={ changeHandler }
-							placeholder={ placeholder }
-							className="jetpack-components-ai-control__input"
-							disabled={ loading || disabled }
-							ref={ promptUserInputRef }
-						/>
-					</div>
-
-					{ ( ! 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={ sendRequest }
-											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={ reusableBlock } />
-									</Button>
-								</ButtonGroup>
-							) }
-							<Button
-								className="jetpack-components-ai-control__controls-prompt_button"
-								onClick={ onAccept }
-								variant="primary"
-								label={ acceptLabel }
-							>
-								{ showButtonLabels ? acceptLabel : <Icon icon={ check } /> }
-							</Button>
-						</div>
-					) }
-				</div>
-				{ showGuideLine && ! loading && ! editRequest && ( customFooter || <GuidelineMessage /> ) }
-			</div>
-		</div>
-	);
-}
-
-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/src/components/ai-control/style.scss

@@ -1,7 +1,5 @@
 @import '@automattic/jetpack-base-styles/root-variables';
 
-// AI CONTROL
-
 .jetpack-components-ai-control__container-wrapper {
 	position: sticky;
 	bottom: 16px;
@@ -72,12 +70,6 @@
 }
 
 .jetpack-components-ai-control__controls-prompt_button_wrapper {
-	text-transform: uppercase;
-	font-size: 11px;
-	font-weight: 600;
-	line-height: 1em;
-	user-select: none;
-	white-space: nowrap;
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -90,6 +82,10 @@
 		box-shadow: none;
 		padding: 6px 8px;
 	}
+
+	.components-button-group {
+		display: flex;
+	}
 }
 
 .jetpack-components-ai-control__controls-prompt_button {
@@ -98,37 +94,3 @@
 		cursor: not-allowed;
 	}
 }
-
-// MESSAGE
-
-.jetpack-ai-assistant__message {
-	display: flex;
-	line-height: 28px;
-	font-size: 12px;
-	align-self: center;
-	align-items: center;
-	background-color: var( --jp-white-off );
-	padding: 0 12px;
-	border-radius: 0 0 6px 6px;
-
-	> svg {
-		fill: var( --jp-gray-40 );
-	}
-
-	.jetpack-ai-assistant__message-content {
-		flex-grow: 2;
-		margin: 0 8px;
-		color: var( --jp-gray-50 );
-		line-height: 1.4em;
-
-		.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;
-		}
-	}
-}

package/src/components/index.ts

@@ -1,8 +1,9 @@
-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,
+	ErrorMessage,
 	default as FooterMessage,
-} from './ai-control/message.js';
+} from './message/index.js';