From f5b43ca738d785f742b9bf2f941f2cabc21b4bbe Mon Sep 17 00:00:00 2001
From: Fabien MILLERAND <fab@millerf.com>
Date: Fri, 20 Jan 2023 19:41:37 +0100
Subject: [PATCH] Add animated text

---
 .../extensions/blocks/ai-paragraph/edit.js    | 34 ++++++++++++++++---
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/ai-paragraph/edit.js b/projects/plugins/jetpack/extensions/blocks/ai-paragraph/edit.js
index 0afe814d61f56..90ee21b3ec112 100644
--- a/projects/plugins/jetpack/extensions/blocks/ai-paragraph/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/ai-paragraph/edit.js
@@ -9,9 +9,33 @@ import { sprintf, __ } from '@wordpress/i18n';
 
 const numberOfCharactersNeeded = 36;
 
+function ShowLittleByLittle( { html, showAnimation, attributes, setAttributes } ) {
+	if ( showAnimation ) {
+		// This is to animate text input. I think this will give an idea of a "better" AI.
+		// At this point this is an established pattern.
+		const tokens = html.split( ' ' );
+		for ( let i = 1; i < tokens.length; i++ ) {
+			const output = tokens.slice( 0, i ).join( ' ' );
+			setTimeout( () => setAttributes( { content: output } ), 50 * i );
+		}
+		setTimeout( () => setAttributes( { content: html } ), 50 * tokens.length );
+	} else {
+		setAttributes( { content: html } );
+	}
+
+	return (
+		<div { ...useBlockProps() }>
+			<div className="content">
+				<RawHTML>{ attributes.content }</RawHTML>
+			</div>
+		</div>
+	);
+}
+
 export default function Edit( { attributes, setAttributes, clientId } ) {
 	const [ loadingCompletion, setLoadingCompletion ] = useState( false );
 	const [ loadingCategories, setLoadingCategories ] = useState( false );
+	const [ showAnimation, setShowAnimation ] = useState( false );
 	const [ needsMoreCharacters, setNeedsMoreCharacters ] = useState( 0 );
 	const [ showRetry, setShowRetry ] = useState( false );
 	const [ completionFinished, setCompletionFinished ] = useState( !! attributes.content );
@@ -157,6 +181,7 @@ export default function Edit( { attributes, setAttributes, clientId } ) {
 
 				// We set it up so it doesn't start with nothing
 				setCompletionFinished( true );
+				setShowAnimation( true );
 				setLoadingCompletion( false );
 				setAttributes( { content: result } );
 			} )
@@ -219,11 +244,10 @@ export default function Edit( { attributes, setAttributes, clientId } ) {
 			) }
 
 			{ attributes.content && (
-				<div>
-					<div className="content">
-						<RawHTML>{ attributes.content.trim().replaceAll( '\n', '<br/>' ) }</RawHTML>
-					</div>
-				</div>
+				<ShowLittleByLittle
+					showAnimation={ showAnimation }
+					html={ attributes.content.trim().replaceAll( '\n', '<br/>' ) }
+				/>
 			) }
 
 			{ ! attributes.content && ( loadingCompletion || loadingCategories ) && (