From 4c74f0276faf94ca31b45a509a1b7d2effed6d36 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Fri, 15 Dec 2023 18:08:32 -0300
Subject: [PATCH] AI Assistant: change prompt placeholder (#34671)

* remove typing effect from prompt placeholders

* use a fixed placeholder with suggestions on how to create a prompt

* use different placeholders depending on whether there is content or not

* move ternary out of jsx chunk

* take i18n out of ternary

* change placeholder text
---
 ...hange-ai-assistant-dont-rotate-placeholder |  4 +++
 .../extensions/blocks/ai-assistant/edit.js    | 30 +++----------------
 2 files changed, 8 insertions(+), 26 deletions(-)
 create mode 100644 projects/plugins/jetpack/changelog/change-ai-assistant-dont-rotate-placeholder

diff --git a/projects/plugins/jetpack/changelog/change-ai-assistant-dont-rotate-placeholder b/projects/plugins/jetpack/changelog/change-ai-assistant-dont-rotate-placeholder
new file mode 100644
index 0000000000000..1f5457b97872c
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/change-ai-assistant-dont-rotate-placeholder
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+AI Assistant: remove typing effect on prompt placeholder
diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js b/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js
index aca16b377a94b..2eed494d92341 100644
--- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js
@@ -32,7 +32,6 @@ import { USAGE_PANEL_PLACEMENT_BLOCK_SETTINGS_SIDEBAR } from '../../plugins/ai-a
 import ConnectPrompt from './components/connect-prompt';
 import FeedbackControl from './components/feedback-control';
 import ImageWithSelect from './components/image-with-select';
-import { promptTemplates } from './components/prompt-templates-control';
 import ToolbarControls from './components/toolbar-controls';
 import UpgradePrompt from './components/upgrade-prompt';
 import { getStoreBlockId } from './extensions/ai-assistant/with-ai-assistant';
@@ -201,24 +200,6 @@ export default function AIAssistantEdit( { attributes, setAttributes, clientId,
 		replaceBlocks( clientId, storedInnerBlocks );
 	}, [ initialContent, clientId, replaceBlocks, getBlock, attributes?.useGutenbergSyntax ] );
 
-	const [ promptPlaceholder, setPromptPlaceholder ] = useState( '' );
-	const [ currentIndex, setCurrentIndex ] = useState( 0 );
-
-	// Loop through placeholder prompts for a nice UX effect.
-	useEffect( () => {
-		const interval = setInterval( () => {
-			if ( currentIndex < promptTemplates.length ) {
-				setPromptPlaceholder( promptTemplates[ currentIndex ].label );
-				setCurrentIndex( prevIndex => prevIndex + 1 );
-			} else {
-				clearInterval( interval );
-				setPromptPlaceholder( __( 'Ask Jetpack AI', 'jetpack' ) );
-			}
-		}, 1600 );
-
-		return () => clearInterval( interval );
-	}, [ promptPlaceholder, currentIndex ] );
-
 	useEffect( () => {
 		// we don't want to store "half way" states
 		if ( ! [ 'init', 'done' ].includes( requestingState ) ) {
@@ -426,6 +407,8 @@ export default function AIAssistantEdit( { attributes, setAttributes, clientId,
 
 	const innerBlocks = useInnerBlocksProps( blockProps );
 
+	const promptPlaceholder = __( 'Ask Jetpack AI…', 'jetpack' );
+	const promptPlaceholderWithSamples = __( 'Write about… Make a table for…', 'jetpack' );
 	return (
 		<KeyboardShortcuts
 			bindGlobal
@@ -559,12 +542,7 @@ export default function AIAssistantEdit( { attributes, setAttributes, clientId,
 							// Focus the text area
 							userPromptInput.focus();
 
-							// Add a typing effect in the text area
-							for ( let i = 0; i < prompt.length; i++ ) {
-								setTimeout( () => {
-									setAttributes( { userPrompt: prompt.slice( 0, i + 1 ) } );
-								}, 25 * i );
-							}
+							setAttributes( { userPrompt: prompt } );
 						} }
 						recordEvent={ tracks.recordEvent }
 						isGeneratingTitle={ isGeneratingTitle }
@@ -574,7 +552,7 @@ export default function AIAssistantEdit( { attributes, setAttributes, clientId,
 					ref={ aiControlRef }
 					disabled={ requireUpgrade || ! connected }
 					value={ attributes.userPrompt }
-					placeholder={ promptPlaceholder || __( 'Ask Jetpack AI', 'jetpack' ) }
+					placeholder={ attributes?.content ? promptPlaceholder : promptPlaceholderWithSamples }
 					onChange={ handleChange }
 					onSend={ handleSend }
 					onStop={ handleStopSuggestion }