adjust behavior upon observations

Automattic · Nov 30, 2023 · 7892c9f · 7892c9f
1 parent 7eb35d5
commit 7892c9f
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/projects/js-packages/ai-client/src/components/ai-control/index.tsx b/projects/js-packages/ai-client/src/components/ai-control/index.tsx
@@ -97,18 +97,37 @@ export function AIControl(
 	const promptUserInputRef = useRef( null );
 	const loading = state === 'requesting' || state === 'suggesting';
 	const [ editRequest, setEditRequest ] = React.useState( false );
+	const [ lastValue, setLastValue ] = React.useState( '' );
 
 	useEffect( () => {
 		if ( editRequest ) {
 			promptUserInputRef?.current?.focus();
 		}
-	}, [ editRequest ] );
+
+		if ( ! editRequest && lastValue && value !== lastValue ) {
+			onChange?.( lastValue );
+		}
+	}, [ editRequest, lastValue ] );
 
 	const sendRequest = useCallback( () => {
+		setLastValue( value );
 		setEditRequest( false );
 		onSend?.( value );
 	}, [ value ] );
 
+	const changeHandler = useCallback(
+		( newValue: string ) => {
+			onChange?.( newValue );
+			setEditRequest( state !== 'init' && lastValue && lastValue !== newValue );
+		},
+		[ lastValue, state ]
+	);
+
+	const discardHandler = useCallback( () => {
+		onDiscard?.();
+		onAccept?.();
+	}, [] );
+
 	// Pass the ref to forwardRef.
 	useImperativeHandle( ref, () => promptUserInputRef.current );
 
@@ -147,7 +166,7 @@ export function AIControl(
 				<div className="jetpack-components-ai-control__input-wrapper">
 					<PlainText
 						value={ value }
-						onChange={ onChange }
+						onChange={ changeHandler }
 						placeholder={ placeholder }
 						className="jetpack-components-ai-control__input"
 						disabled={ loading || disabled }
@@ -211,20 +230,23 @@ export function AIControl(
 							className="jetpack-components-ai-control__controls-prompt_button"
 							label={ __( 'Back to edit', 'jetpack-ai-client' ) }
 							onClick={ () => setEditRequest( true ) }
+							tooltipPosition="top"
 						>
 							<Icon icon={ arrowLeft } />
 						</Button>
 						<Button
 							className="jetpack-components-ai-control__controls-prompt_button"
 							label={ __( 'Discard', 'jetpack-ai-client' ) }
-							onClick={ () => onDiscard?.() }
+							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"
 						>
 							<Icon icon={ reusableBlock } />
 						</Button>

diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js b/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js
@@ -332,7 +332,7 @@ export default function AIAssistantEdit( { attributes, setAttributes, clientId,
 			 * - Create blocks from HTML code
 			 */
 			const HTML = markdownConverter
-				.render( attributes.content )
+				.render( attributes.content || '' )
 				// Fix list indentation
 				.replace( /<li>\s+<p>/g, '<li>' )
 				.replace( /<\/p>\s+<\/li>/g, '</li>' );
@@ -359,7 +359,7 @@ export default function AIAssistantEdit( { attributes, setAttributes, clientId,
 
 	const handleAcceptTitle = () => {
 		if ( isInBlockEditor ) {
-			editPost( { title: attributes.content.trim() } );
+			editPost( { title: attributes.content ? attributes.content.trim() : '' } );
 			removeBlock( clientId );
 		} else {
 			handleAcceptContent();
@@ -557,7 +557,7 @@ export default function AIAssistantEdit( { attributes, setAttributes, clientId,
 					state={ requestingState }
 					isTransparent={ requireUpgrade || ! connected }
 					showButtonLabels={ ! isMobileViewport }
-					showAccept={ contentIsLoaded && ! isWaitingState }
+					showAccept={ requestingState !== 'init' && contentIsLoaded && ! isWaitingState }
 					acceptLabel={ acceptLabel }
 					showGuideLine={ contentIsLoaded }
 				/>