AI Client: fix empty prompts handling (#34547)

* use a default value to keep track of changes in the prompt, allow for empty prompts to show suggestion action buttons * use null instead of a made up default value
Automattic · Dec 15, 2023 · e90e463 · e90e463
1 parent 9e9417e
commit e90e463
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 29 deletions.
diff --git a/projects/js-packages/ai-client/changelog/fix-ai-action-prompts b/projects/js-packages/ai-client/changelog/fix-ai-action-prompts
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Ai Client: use default last value (not empty), allows for handling 'one click' prompts (empty prompts)
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
@@ -84,14 +84,14 @@ export function AIControl(
 	const promptUserInputRef = useRef( null );
 	const loading = state === 'requesting' || state === 'suggesting';
 	const [ editRequest, setEditRequest ] = React.useState( false );
-	const [ lastValue, setLastValue ] = React.useState( value || '' );
+	const [ lastValue, setLastValue ] = React.useState( value || null );
 
 	useEffect( () => {
 		if ( editRequest ) {
 			promptUserInputRef?.current?.focus();
 		}
 
-		if ( ! editRequest && lastValue && value !== lastValue ) {
+		if ( ! editRequest && lastValue !== null && value !== lastValue ) {
 			onChange?.( lastValue );
 		}
 	}, [ editRequest, lastValue ] );
@@ -229,34 +229,39 @@ export function AIControl(
 						</div>
 					) }
 
-					{ showAccept && ! editRequest && value?.length > 0 && (
+					{ showAccept && ! editRequest && (
 						<div className="jetpack-components-ai-control__controls-prompt_button_wrapper">
-							<ButtonGroup>
-								<Button
-									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={ 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>
-							</ButtonGroup>
+							{ ( value?.length > 0 || lastValue === null ) && (
+								<ButtonGroup>
+									{ value.length > 0 && (
+										<Button
+											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={ 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 }