Jetpack AI: use custom input placeholders on the Jetpack Form AI Exte…

…nsion (#39482)

* Support custom placeholder getter on the BlockHandler class

* Implement a custom placeholder getter for the Jetpack Form block handler

* Expose the custom placeholder getter on the block handler getter

* Support custom placeholder prop on the AI Assistant Input component

* Provide the custom placeholder to the AI Assistant input, when it exists

* Changelog

* Rename custom placeholder method to refer to the extension input

* Use null instead of undefined as the prop when a custom placeholder is not set

Co-authored-by: Douglas Henri <[email protected]>

---------

Co-authored-by: Douglas Henri <[email protected]>

projects/plugins/jetpack/changelog/update-jetpack-ai-add-custom-placeholders-on-form-extension

@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Jetpack AI: use custom placeholders on the Jetpack Form AI extension input component.

projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/block-handler.tsx

@@ -92,4 +92,13 @@ export class BlockHandler {
 		__unstableMarkNextChangeAsNotPersistent();
 		replaceInnerBlocks( this.clientId, newBlock.innerBlocks );
 	}
+
+	/**
+	 * Produces a custom placeholder for the AI Assistant Input component.
+	 *
+	 * @return {string | null} the custom placeholder.
+	 */
+	public getExtensionInputPlaceholder(): string | null {
+		return null;
+	}
 }

projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/components/ai-assistant-input/index.tsx

@@ -21,6 +21,7 @@ import type { RequestingErrorProps, RequestingStateProp } from '@automattic/jetp
 import type { ReactElement } from 'react';
 
 export type AiAssistantInputProps = {
+	customPlaceholder?: string;
 	className?: string;
 	requestingState: RequestingStateProp;
 	requestingError?: RequestingErrorProps;
@@ -42,6 +43,7 @@ const defaultClassNames = clsx(
 );
 
 export default function AiAssistantInput( {
+	customPlaceholder,
 	className,
 	requestingState,
 	requestingError,
@@ -56,8 +58,11 @@ export default function AiAssistantInput( {
 	undo,
 	tryAgain,
 }: AiAssistantInputProps ): ReactElement {
+	const defaultPlaceholder = customPlaceholder
+		? customPlaceholder
+		: __( 'Ask Jetpack AI to edit…', 'jetpack' );
 	const [ value, setValue ] = useState( '' );
-	const [ placeholder, setPlaceholder ] = useState( __( 'Ask Jetpack AI to edit…', 'jetpack' ) );
+	const [ placeholder, setPlaceholder ] = useState( defaultPlaceholder );
 	const { checkoutUrl } = useAICheckout();
 	const { tracks } = useAnalytics();
 	const [ requestsRemaining, setRequestsRemaining ] = useState( 0 );
@@ -137,13 +142,13 @@ export default function AiAssistantInput( {
 
 	// Sets the placeholder to the quick action text once it changes and clear the input value.
 	useEffect( () => {
-		setPlaceholder( action || __( 'Ask Jetpack AI to edit…', 'jetpack' ) );
+		setPlaceholder( action || defaultPlaceholder );
 
 		// Clear the input value when the action changes.
 		if ( action ) {
 			setValue( '' );
 		}
-	}, [ action ] );
+	}, [ action, defaultPlaceholder ] );
 
 	// Changes the displayed message according to the input value.
 	useEffect( () => {

projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/get-block-handler.tsx

@@ -58,6 +58,7 @@ export function getBlockHandler( blockType: ExtendedBlockProp, clientId: string
 		onSuggestion: handler.onSuggestion.bind( handler ),
 		onDone: handler.onDone.bind( handler ),
 		getContent: handler.getContent.bind( handler ),
+		getExtensionInputPlaceholder: handler.getExtensionInputPlaceholder.bind( handler ),
 		behavior: handler.behavior,
 		isChildBlock: handler.isChildBlock,
 		feature: handler.feature,

projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/jetpack-form/index.tsx

@@ -125,6 +125,32 @@ export class JetpackFormHandler extends BlockHandler {
 		}
 	}
 
+	public getExtensionInputPlaceholder(): string {
+		const content = this.getContent();
+
+		if ( ! content ) {
+			// If the block is empty, return a random example for creating a form.
+			const createExamples = [
+				__( 'Example: a contact form with name, email, and message fields', 'jetpack' ),
+				__(
+					'Example: a pizza ordering form with name, address, phone number and toppings',
+					'jetpack'
+				),
+				__( 'Example: a survey form with multiple choice questions', 'jetpack' ),
+			];
+
+			return createExamples[ Math.floor( Math.random() * createExamples.length ) ];
+		}
+		// If the block has content, return a random example for editing a form.
+		const editExamples = [
+			__( 'Example: remove email field', 'jetpack' ),
+			__( 'Example: make email optional', 'jetpack' ),
+			__( 'Example: add message field and make it required', 'jetpack' ),
+		];
+
+		return editExamples[ Math.floor( Math.random() * editExamples.length ) ];
+	}
+
 	public getContent() {
 		const block = this.getBlock();
 		if ( ! block ) {

projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/types.ts

@@ -16,6 +16,7 @@ export interface IBlockHandler {
 	onSuggestion: OnSuggestion;
 	onDone: ( suggestion: string ) => void;
 	getContent: () => string;
+	getExtensionInputPlaceholder: () => string | null;
 	behavior: BlockBehavior;
 	isChildBlock?: boolean;
 	feature: string;

projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/with-ai-extension.tsx

@@ -123,6 +123,7 @@ const blockEditWithAiComponents = createHigherOrderComponent( BlockEdit => {
 			onSuggestion: onBlockSuggestion,
 			onDone: onBlockDone,
 			getContent,
+			getExtensionInputPlaceholder,
 			behavior,
 			isChildBlock,
 			feature,
@@ -131,6 +132,8 @@ const blockEditWithAiComponents = createHigherOrderComponent( BlockEdit => {
 			hideOnBlockFocus,
 		} = useMemo( () => getBlockHandler( blockName, clientId ), [ blockName, clientId ] );
 
+		const customPlaceholder = getExtensionInputPlaceholder();
+
 		// State to display the AI Control or not.
 		const [ showAiControl, setShowAiControl ] = useState( startOpen );
 
@@ -497,6 +500,7 @@ const blockEditWithAiComponents = createHigherOrderComponent( BlockEdit => {
 
 				{ showAiControl && (
 					<AiAssistantInput
+						customPlaceholder={ customPlaceholder ? customPlaceholder : null }
 						className={ className }
 						requestingState={ requestingState }
 						requestingError={ error }