diff --git a/projects/plugins/jetpack/changelog/update-jetpack-ai-add-custom-placeholders-on-form-extension b/projects/plugins/jetpack/changelog/update-jetpack-ai-add-custom-placeholders-on-form-extension new file mode 100644 index 0000000000000..63def4c741761 --- /dev/null +++ b/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. diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/block-handler.tsx b/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/block-handler.tsx index 847c0a21caf98..79215845cbe92 100644 --- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/block-handler.tsx +++ b/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; + } } diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/components/ai-assistant-input/index.tsx b/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/components/ai-assistant-input/index.tsx index e3e2fa37ecfe8..e7c6380fcb239 100644 --- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/components/ai-assistant-input/index.tsx +++ b/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( () => { diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/get-block-handler.tsx b/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/get-block-handler.tsx index 8708c9d11400d..80fa86962251e 100644 --- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/get-block-handler.tsx +++ b/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, diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/jetpack-form/index.tsx b/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/jetpack-form/index.tsx index 1ea05e60118a8..31f6dbacb7ddd 100644 --- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/jetpack-form/index.tsx +++ b/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 ) { diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/types.ts b/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/types.ts index 4de3741a045b6..389e238909b37 100644 --- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/types.ts +++ b/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; diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/with-ai-extension.tsx b/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/with-ai-extension.tsx index f0cdb68296901..1898574d809a5 100644 --- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/with-ai-extension.tsx +++ b/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 && (