@automattic/jetpack-ai-client 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -5,6 +5,11 @@ 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.3.0] - 2023-12-20
+### Changed
+- AI Client: improved usability with new block positioning, prompt and suggestion action buttons. [#34383]
+- Updated package dependencies. [#34696]
+
 ## [0.2.1] - 2023-12-03
 ### Changed
 - Updated the prompt shadow for a better sense of depth. [#34362]
@@ -171,6 +176,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.3.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.2.1...v0.3.0
 [0.2.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.2.0...v0.2.1
 [0.2.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.16...v0.2.0
 [0.1.16]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.15...v0.1.16

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

@@ -7,14 +7,7 @@ import './style.scss';
  * Types
  */
 import type { RequestingStateProp } from '../../types';
-/**
- * AI Control component.
- *
- * @param {AIControlProps} props       - Component props.
- * @param {React.MutableRefObject} ref - Ref to the component.
- * @returns {React.ReactElement}         Rendered component.
- */
-export declare function AIControl({ disabled, value, placeholder, showAccept, acceptLabel, showButtonLabels, isTransparent, state, showClearButton, showGuideLine, onChange, onSend, onStop, onAccept, }: {
+type AiControlProps = {
     disabled?: boolean;
     value: string;
     placeholder?: string;
@@ -23,27 +16,22 @@ export declare function AIControl({ disabled, value, placeholder, showAccept, ac
     showButtonLabels?: boolean;
     isTransparent?: boolean;
     state?: RequestingStateProp;
-    showClearButton?: boolean;
-    showGuideLine?: boolean;
-    onChange?: (newValue: string) => void;
-    onSend?: (currentValue: string) => void;
-    onStop?: () => void;
-    onAccept?: () => void;
-}, ref: React.MutableRefObject<null>): React.ReactElement;
-declare const _default: React.ForwardRefExoticComponent<{
-    disabled?: boolean;
-    value: string;
-    placeholder?: string;
-    showAccept?: boolean;
-    acceptLabel?: string;
-    showButtonLabels?: boolean;
-    isTransparent?: boolean;
-    state?: "init" | "requesting" | "suggesting" | "done" | "error";
-    showClearButton?: boolean;
     showGuideLine?: boolean;
+    customFooter?: React.ReactElement;
     onChange?: (newValue: string) => void;
     onSend?: (currentValue: string) => void;
     onStop?: () => void;
     onAccept?: () => void;
-} & React.RefAttributes<null>>;
+    onDiscard?: () => void;
+    showRemove?: boolean;
+};
+/**
+ * AI Control component.
+ *
+ * @param {AiControlProps} props       - Component props.
+ * @param {React.MutableRefObject} ref - Ref to the component.
+ * @returns {React.ReactElement}         Rendered component.
+ */
+export declare function AIControl({ disabled, value, placeholder, showAccept, acceptLabel, showButtonLabels, isTransparent, state, showGuideLine, customFooter, onChange, onSend, onStop, onAccept, onDiscard, showRemove, }: AiControlProps, ref: React.MutableRefObject<null>): React.ReactElement;
+declare const _default: React.ForwardRefExoticComponent<AiControlProps & React.RefAttributes<null>>;
 export default _default;

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

@@ -1,14 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * External dependencies
  */
 import { PlainText } from '@wordpress/block-editor';
-import { Button } from '@wordpress/components';
+import { Button, ButtonGroup } from '@wordpress/components';
 import { useKeyboardShortcut } from '@wordpress/compose';
-import { forwardRef, useImperativeHandle, useRef } from '@wordpress/element';
+import { forwardRef, useImperativeHandle, useRef, useEffect, useCallback, } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Icon, closeSmall, check, arrowUp } from '@wordpress/icons';
+import { Icon, closeSmall, check, arrowUp, trash, reusableBlock } from '@wordpress/icons';
 import classNames from 'classnames';
+import React from 'react';
 /**
  * Internal dependencies
  */
@@ -20,14 +21,51 @@ const noop = () => { };
 /**
  * AI Control component.
  *
- * @param {AIControlProps} props       - Component props.
+ * @param {AiControlProps} props       - Component props.
  * @param {React.MutableRefObject} ref - Ref to the component.
  * @returns {React.ReactElement}         Rendered component.
  */
-export function AIControl({ disabled = false, value = '', placeholder = '', showAccept = false, acceptLabel = __('Accept', 'jetpack-ai-client'), showButtonLabels = true, isTransparent = false, state = 'init', showClearButton = true, showGuideLine = false, onChange = noop, onSend = noop, onStop = noop, onAccept = noop, }, ref // eslint-disable-line @typescript-eslint/ban-types
+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, }, ref // eslint-disable-line @typescript-eslint/ban-types
 ) {
     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();
+        }
+        if (!editRequest && lastValue !== null && value !== lastValue) {
+            onChange?.(lastValue);
+        }
+    }, [editRequest, lastValue, value]);
+    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?.();
+        onAccept?.();
+    }, []);
+    const cancelEdit = useCallback(() => {
+        onChange(lastValue || '');
+        setEditRequest(false);
+    }, [lastValue]);
     // Pass the ref to forwardRef.
     useImperativeHandle(ref, () => promptUserInputRef.current);
     useKeyboardShortcut('mod+enter', () => {
@@ -39,15 +77,12 @@ export function AIControl({ disabled = false, value = '', placeholder = '', show
     });
     useKeyboardShortcut('enter', e => {
         e.preventDefault();
-        onSend?.(value);
+        sendRequest();
     }, {
         target: promptUserInputRef,
     });
-    const actionButtonClasses = classNames('jetpack-components-ai-control__controls-prompt_button', {
-        'has-label': showButtonLabels,
-    });
-    return (_jsxs("div", { className: "jetpack-components-ai-control__container", children: [_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: loading || disabled, ref: promptUserInputRef }) }), value?.length > 0 && showClearButton && (_jsx(Button, { icon: closeSmall, className: "jetpack-components-ai-control__clear", onClick: () => onChange('') })), _jsx("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: !loading ? (_jsxs(Button, { className: actionButtonClasses, onClick: () => onSend?.(value), isSmall: true, disabled: !value?.length || disabled, label: __('Send request', 'jetpack-ai-client'), children: [_jsx(Icon, { icon: arrowUp }), showButtonLabels && __('Send', 'jetpack-ai-client')] })) : (_jsxs(Button, { className: actionButtonClasses, onClick: onStop, isSmall: true, label: __('Stop request', 'jetpack-ai-client'), children: [_jsx(Icon, { icon: closeSmall }), showButtonLabels && __('Stop (ESC)', 'jetpack-ai-client')] })) }), showAccept && (_jsx("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: _jsxs(Button, { className: actionButtonClasses, onClick: onAccept, isSmall: true, label: acceptLabel, children: [_jsx(Icon, { icon: check }), showButtonLabels && acceptLabel] }) }))] }), showGuideLine && _jsx(GuidelineMessage, {})] }));
+    return (_jsx("div", { className: "jetpack-components-ai-control__container-wrapper", children: _jsxs("div", { className: "jetpack-components-ai-control__container", children: [_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);

package/build/components/ai-status-indicator/index.d.ts

@@ -12,4 +12,4 @@ export type AiStatusIndicatorProps = {
  * @param {AiStatusIndicatorProps} props - component props.
  * @returns {React.ReactElement} - rendered component.
  */
-export default function AiStatusIndicator({ state, size, }: AiStatusIndicatorProps): React.ReactElement;
+export default function AiStatusIndicator({ state }: AiStatusIndicatorProps): React.ReactElement;

package/build/components/ai-status-indicator/index.js

@@ -2,12 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * External dependencies
  */
-import { Icon } from '@wordpress/components';
+import { Spinner } from '@wordpress/components';
 import classNames from 'classnames';
-/*
- * Internal dependencies
- */
-import { aiAssistantIcon } from '../../icons';
 import './style.scss';
 /**
  * AiStatusIndicator component.
@@ -15,8 +11,8 @@ import './style.scss';
  * @param {AiStatusIndicatorProps} props - component props.
  * @returns {React.ReactElement} - rendered component.
  */
-export default function AiStatusIndicator({ state, size = 24, }) {
+export default function AiStatusIndicator({ state }) {
     return (_jsx("div", { className: classNames('jetpack-ai-status-indicator__icon-wrapper', {
             [`is-${state}`]: true,
-        }), children: _jsx(Icon, { icon: aiAssistantIcon, size: size }) }));
+        }), children: _jsx(Spinner, {}) }));
 }

package/build/components/index.d.ts

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

package/build/components/index.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.2.1",
+	"version": "0.3.0",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -22,9 +22,9 @@
 	},
 	"type": "module",
 	"devDependencies": {
-		"@storybook/addon-actions": "7.4.6",
-		"@storybook/blocks": "7.4.6",
-		"@storybook/react": "7.4.6",
+		"@storybook/addon-actions": "7.6.5",
+		"@storybook/blocks": "7.6.5",
+		"@storybook/react": "7.6.5",
 		"jest": "^29.6.2",
 		"jest-environment-jsdom": "29.7.0",
 		"typescript": "5.0.4"
@@ -39,8 +39,8 @@
 	"types": "./build/index.d.ts",
 	"dependencies": {
 		"@automattic/jetpack-base-styles": "^0.6.14",
-		"@automattic/jetpack-connection": "^0.30.9",
-		"@automattic/jetpack-shared-extension-utils": "^0.13.3",
+		"@automattic/jetpack-connection": "^0.30.11",
+		"@automattic/jetpack-shared-extension-utils": "^0.13.5",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/react": "18.2.33",
 		"@wordpress/api-fetch": "6.44.0",

package/src/components/ai-control/Readme.md

@@ -11,6 +11,8 @@
 - `isTransparent` (**boolean**) (Optional): Controls the opacity of the component. Default value is `false`.
 - `state` (**RequestingStateProp**) (Optional): Determines the state of the component. Default value is `'init'`.
 - `showClearButton` (**boolean**) (Optional): Determines if the clear button is shown when the input has a value. Default value is `true`.
+- `showGuideLine`: (**boolean**) (Optional): Whether to show the usual AI guidelines at the bottom of the input.
+- `customFooter`: (**ReactElement**) (Optional): if provided together with `showGuideLine` it will be rendered at the bottom of the input.
 - `onChange` (**Function**) (Optional): Handler for input change. Default action is no operation.
 - `onSend` (**Function**) (Optional): Handler to send a request. Default action is no operation.
 - `onStop` (**Function**) (Optional): Handler to stop a request. Default action is no operation.
@@ -19,6 +21,8 @@
 #### Example Usage
 
 ```jsx
+import { AIControl, FooterMessage } from '@automattic/jetpack-ai-client';
+
 <AIControl
   value="Type here"
   placeholder="Placeholder text"
@@ -26,5 +30,7 @@
   onSend={ handleSend }
   onStop={ handleStop }
   onAccept={ handleAccept }
+  showGuideLine={ true }
+  customFooter={ <FooterMessage severity="info">Remember AI suggestions can be inaccurate</FooterMessage> }
 />
-```
+```

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

@@ -2,11 +2,17 @@
  * External dependencies
  */
 import { PlainText } from '@wordpress/block-editor';
-import { Button } from '@wordpress/components';
+import { Button, ButtonGroup } from '@wordpress/components';
 import { useKeyboardShortcut } from '@wordpress/compose';
-import { forwardRef, useImperativeHandle, useRef } from '@wordpress/element';
+import {
+	forwardRef,
+	useImperativeHandle,
+	useRef,
+	useEffect,
+	useCallback,
+} from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Icon, closeSmall, check, arrowUp } from '@wordpress/icons';
+import { Icon, closeSmall, check, arrowUp, trash, reusableBlock } from '@wordpress/icons';
 import classNames from 'classnames';
 import React from 'react';
 /**
@@ -19,7 +25,7 @@ import { GuidelineMessage } from './message';
  * Types
  */
 import type { RequestingStateProp } from '../../types';
-type AIControlProps = {
+type AiControlProps = {
 	disabled?: boolean;
 	value: string;
 	placeholder?: string;
@@ -28,12 +34,14 @@ type AIControlProps = {
 	showButtonLabels?: boolean;
 	isTransparent?: boolean;
 	state?: RequestingStateProp;
-	showClearButton?: boolean;
 	showGuideLine?: boolean;
+	customFooter?: React.ReactElement;
 	onChange?: ( newValue: string ) => void;
 	onSend?: ( currentValue: string ) => void;
 	onStop?: () => void;
 	onAccept?: () => void;
+	onDiscard?: () => void;
+	showRemove?: boolean;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -42,7 +50,7 @@ const noop = () => {};
 /**
  * AI Control component.
  *
- * @param {AIControlProps} props       - Component props.
+ * @param {AiControlProps} props       - Component props.
  * @param {React.MutableRefObject} ref - Ref to the component.
  * @returns {React.ReactElement}         Rendered component.
  */
@@ -56,32 +64,65 @@ export function AIControl(
 		showButtonLabels = true,
 		isTransparent = false,
 		state = 'init',
-		showClearButton = true,
 		showGuideLine = false,
+		customFooter = null,
 		onChange = noop,
 		onSend = noop,
 		onStop = noop,
 		onAccept = noop,
-	}: {
-		disabled?: boolean;
-		value: string;
-		placeholder?: string;
-		showAccept?: boolean;
-		acceptLabel?: string;
-		showButtonLabels?: boolean;
-		isTransparent?: boolean;
-		state?: RequestingStateProp;
-		showClearButton?: boolean;
-		showGuideLine?: boolean;
-		onChange?: ( newValue: string ) => void;
-		onSend?: ( currentValue: string ) => void;
-		onStop?: () => void;
-		onAccept?: () => void;
-	},
+		onDiscard = null,
+		showRemove = false,
+	}: AiControlProps,
 	ref: React.MutableRefObject< null > // eslint-disable-line @typescript-eslint/ban-types
 ): React.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();
+		}
+
+		if ( ! editRequest && lastValue !== null && value !== lastValue ) {
+			onChange?.( lastValue );
+		}
+	}, [ editRequest, lastValue, value ] );
+
+	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?.();
+		onAccept?.();
+	}, [] );
+
+	const cancelEdit = useCallback( () => {
+		onChange( lastValue || '' );
+		setEditRequest( false );
+	}, [ lastValue ] );
 
 	// Pass the ref to forwardRef.
 	useImperativeHandle( ref, () => promptUserInputRef.current );
@@ -102,85 +143,137 @@ export function AIControl(
 		'enter',
 		e => {
 			e.preventDefault();
-			onSend?.( value );
+			sendRequest();
 		},
 		{
 			target: promptUserInputRef,
 		}
 	);
 
-	const actionButtonClasses = classNames( 'jetpack-components-ai-control__controls-prompt_button', {
-		'has-label': showButtonLabels,
-	} );
-
 	return (
-		<div className="jetpack-components-ai-control__container">
-			<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={ loading || disabled }
-						ref={ promptUserInputRef }
-					/>
-				</div>
+		<div className="jetpack-components-ai-control__container-wrapper">
+			<div className="jetpack-components-ai-control__container">
+				<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>
+									) }
 
-				{ value?.length > 0 && showClearButton && (
-					<Button
-						icon={ closeSmall }
-						className="jetpack-components-ai-control__clear"
-						onClick={ () => onChange( '' ) }
-					/>
-				) }
-
-				<div className="jetpack-components-ai-control__controls-prompt_button_wrapper">
-					{ ! loading ? (
-						<Button
-							className={ actionButtonClasses }
-							onClick={ () => onSend?.( value ) }
-							isSmall={ true }
-							disabled={ ! value?.length || disabled }
-							label={ __( 'Send request', 'jetpack-ai-client' ) }
-						>
-							<Icon icon={ arrowUp } />
-							{ showButtonLabels && __( 'Send', 'jetpack-ai-client' ) }
-						</Button>
-					) : (
-						<Button
-							className={ actionButtonClasses }
-							onClick={ onStop }
-							isSmall={ true }
-							label={ __( 'Stop request', 'jetpack-ai-client' ) }
-						>
-							<Icon icon={ closeSmall } />
-							{ showButtonLabels && __( 'Stop (ESC)', 'jetpack-ai-client' ) }
-						</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>
 					) }
-				</div>
 
-				{ showAccept && (
-					<div className="jetpack-components-ai-control__controls-prompt_button_wrapper">
-						<Button
-							className={ actionButtonClasses }
-							onClick={ onAccept }
-							isSmall={ true }
-							label={ acceptLabel }
-						>
-							<Icon icon={ check } />
-							{ showButtonLabels && acceptLabel }
-						</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>
-			{ showGuideLine && <GuidelineMessage /> }
 		</div>
 	);
 }

package/src/components/ai-control/style.scss

@@ -2,20 +2,27 @@
 
 // AI CONTROL
 
+.jetpack-components-ai-control__container-wrapper {
+	position: sticky;
+	bottom: 16px;
+}
+
 .jetpack-components-ai-control__container {
 	color: var( --jp-gray-80 );
 	background-color: var( --jp-white );
 	box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.12), 0px 3px 9px 0px rgba(0, 0, 0, 0.12), 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
 	font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-	width: 100%;
+	border-radius: 6px;
+	border: 1px solid var(--gutenberg-gray-400, #CCC);
 }
 
 .jetpack-components-ai-control__wrapper {
 	display: flex;
-	padding: 12px 14px;
-	gap: 8px;
-	align-items: center;
+	padding: 8px 8px 8px var(--grid-unit-15, 12px);
+	align-items: flex-end;
 	box-sizing: border-box;
+	border-radius: 6px 6px 0 0;
+	gap: 6px;
 
 	&.is-transparent {
 		opacity: 0.4;
@@ -23,10 +30,11 @@
 }
 
 .jetpack-components-ai-control__input-wrapper {
-	position: relative;
 	display: flex;
 	flex-grow: 1;
-	width: 100%;
+	align-self: center;
+	min-height: 36px; // need compat height with buttons wrapper
+	align-items: center;
 
 	textarea.jetpack-components-ai-control__input {
 		background-color: var( --jp-white );
@@ -63,67 +71,28 @@
 	}
 }
 
-.jetpack-components-ai-control__clear.components-button.has-icon {
-	width: 24px;
-	min-width: 24px;
-	height: 24px;
-	padding: 0;
-	border-radius: 50%;
-	background-color: black;
-	opacity: 0.2;
-	color: white;
-
-	&:hover {
-		opacity: 0.4;
-	}
-}
-
-.jetpack-components-ai-controlton__icon {
-	flex-shrink: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	.input-icon {
-		// Brand green regardless of theme
-		color: var( --jp-green-40 );
-	}
-
-	.input-spinner {
-		margin: 0;
-		width: 24px;
-		height: 24px;
-
-		path {
-			color: var( --jp-green-40 );
-		}
-	}
-}
-
 .jetpack-components-ai-control__controls-prompt_button_wrapper {
 	text-transform: uppercase;
 	font-size: 11px;
 	font-weight: 600;
-	line-height: 16px;
+	line-height: 1em;
 	user-select: none;
 	white-space: nowrap;
 	display: flex;
 	align-items: center;
+	gap: 8px;
 
 	.components-button.is-small:not(.has-label) {
 		padding: 0;
 	}
-}
 
-.jetpack-components-ai-control__controls-prompt_button {
-	color: var( --jp-gray-80 );
-	text-transform: uppercase;
-
-	&:hover,
-	&:active {
-		color: var( --wp-components-color-accent, var( --wp-admin-theme-color ) );
+	.components-button-group .components-button {
+		box-shadow: none;
+		padding: 6px 8px;
 	}
+}
 
+.jetpack-components-ai-control__controls-prompt_button {
 	&:disabled {
 		opacity: 0.6;
 		cursor: not-allowed;
@@ -134,24 +103,26 @@
 
 .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;
-
-    > svg {
-        fill: var( --jp-gray-40 );
-    }
-
-    .jetpack-ai-assistant__message-content {
-        flex-grow: 2;
-        margin: 0 8px;
-        color: var( --jp-gray-70 );
-
-        .components-external-link {
-            color: var( --jp-gray-50 );
-        }
-    }
+	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 );
+		}
+	}
 }

package/src/components/ai-status-indicator/index.tsx

@@ -1,12 +1,8 @@
 /**
  * External dependencies
  */
-import { Icon } from '@wordpress/components';
+import { Spinner } from '@wordpress/components';
 import classNames from 'classnames';
-/*
- * Internal dependencies
- */
-import { aiAssistantIcon } from '../../icons';
 /*
  * Types
  */
@@ -27,17 +23,14 @@ export type AiStatusIndicatorProps = {
  * @param {AiStatusIndicatorProps} props - component props.
  * @returns {React.ReactElement} - rendered component.
  */
-export default function AiStatusIndicator( {
-	state,
-	size = 24,
-}: AiStatusIndicatorProps ): React.ReactElement {
+export default function AiStatusIndicator( { state }: AiStatusIndicatorProps ): React.ReactElement {
 	return (
 		<div
 			className={ classNames( 'jetpack-ai-status-indicator__icon-wrapper', {
 				[ `is-${ state }` ]: true,
 			} ) }
 		>
-			<Icon icon={ aiAssistantIcon } size={ size } />
+			<Spinner />
 		</div>
 	);
 }

package/src/components/ai-status-indicator/style.scss

@@ -1,52 +1,19 @@
 @import '@automattic/jetpack-base-styles/style';
 
 .jetpack-ai-status-indicator__icon-wrapper {
-	color: var( --jp-green-60 );
-	height: 24px;
-
-	&.is-init {
-		color: var( --jp-green-60 );
-	}
-
-	&.is-requesting {
-		color: var( --jp-green-40 );
-		animation: fade 800ms linear infinite;
-	}
-
-	&.is-suggesting {
-		color: var( --jp-green-30 );
-		.ai-assistant-icon > path {
-			animation: fadingSpark 300ms ease-in-out alternate infinite;
-	
-			&.spark-first {
-				animation-delay: 0.2s;
-			}
-			
-			&.spark-second {
-				animation-delay: 0.6s;
-			}
-		}
-	}
-
-	&.is-done {
-		color: var( --jp-green-40 );
-	}
-
-	&.is-error {
-		color: var( --jp-yellow-30 );
+	transition: opacity 0.25s ease-in-out, width 0.25s;
+	width: 0;
+	opacity: 0;
+	align-self: baseline;
+
+	> svg {
+		height: 24px;
+		width: 24px;
+		margin: 6px 0 0;
 	}
-}
-
 
-@keyframes fadingSpark {
-	to {
-		opacity: 0.3;
+	&.is-requesting, &.is-suggesting {
+		opacity: 1;
+		width: 24px;
 	}
 }
-
-@keyframes fade {
-	0% { opacity: 1; }
-	50% { opacity: 0.4; }
-	100% { opacity: 1; }
-  }
-  

package/src/components/index.ts

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