From 55114bc67eb754662b3db6815996844d248eb0d2 Mon Sep 17 00:00:00 2001
From: ajayadav09 <ajayadav09@gmail.com>
Date: Thu, 1 Feb 2024 18:07:53 +0530
Subject: [PATCH] orb typing reactivity on site prompt input

---
 .../components/OrbAnimation/index.js          | 38 +++++++++++++++++++
 .../components/OrbAnimation/stylesheet.scss   |  6 ++-
 .../TextInput/TextInputSiteGen/index.js       |  1 +
 3 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/src/OnboardingSPA/components/OrbAnimation/index.js b/src/OnboardingSPA/components/OrbAnimation/index.js
index d8c1141b9..6c37536ed 100644
--- a/src/OnboardingSPA/components/OrbAnimation/index.js
+++ b/src/OnboardingSPA/components/OrbAnimation/index.js
@@ -1,3 +1,5 @@
+import { useEffect } from '@wordpress/element';
+
 const OrbAnimation = ( { height = '80px' } ) => {
 	// Inline style to handle custom properties
 	const logoStyle = {
@@ -5,6 +7,42 @@ const OrbAnimation = ( { height = '80px' } ) => {
 		height: `var(--wnd-ai-logo-size, ${ height })`,
 	};
 
+	useEffect( () => {
+		document
+			.querySelectorAll( '[data-wnd-ai-logo]' )
+			.forEach( function ( input ) {
+				let keyIsDown = false;
+				let animationFrameId = null;
+
+				const toggleClass = () => {
+					if ( keyIsDown ) {
+						document.body.classList.add( 'wnd-ai-logo-keydown' );
+					} else {
+						document.body.classList.remove( 'wnd-ai-logo-keydown' );
+					}
+					animationFrameId = null;
+				};
+
+				input.addEventListener( 'keydown', function () {
+					if ( ! keyIsDown ) {
+						keyIsDown = true;
+						if ( ! animationFrameId ) {
+							animationFrameId =
+								window.requestAnimationFrame( toggleClass );
+						}
+					}
+				} );
+
+				input.addEventListener( 'keyup', function () {
+					keyIsDown = false;
+					if ( ! animationFrameId ) {
+						animationFrameId =
+							window.requestAnimationFrame( toggleClass );
+					}
+				} );
+			} );
+	}, [] );
+
 	return (
 		<span className="wnd-ai-logo" style={ logoStyle }>
 			<span className="wnd-ai-logo__circle wnd-ai-logo__circle--bg"></span>
diff --git a/src/OnboardingSPA/components/OrbAnimation/stylesheet.scss b/src/OnboardingSPA/components/OrbAnimation/stylesheet.scss
index 05264031a..fcbd77e28 100644
--- a/src/OnboardingSPA/components/OrbAnimation/stylesheet.scss
+++ b/src/OnboardingSPA/components/OrbAnimation/stylesheet.scss
@@ -186,12 +186,16 @@ body.wnd-ai-logo-loading .wnd-ai-logo {
 }
 
 /* Focus & Hover */
-body:has([data-wnd-ai-logo]:focus) .wnd-ai-logo,
 body:not(.wnd-ai-logo-loading) .wnd-ai-logo:hover {
 	transform: scale(1.05);
 	filter: brightness(1.35) saturate(1.5);
 }
 
+body:has([data-wnd-ai-logo]:focus) .wnd-ai-logo {
+	transform: scale(1.2);
+	filter: brightness(1.35) saturate(1.5);
+}
+
 /* Keydown */
 body.wnd-ai-logo-keydown .wnd-ai-logo.wnd-ai-logo {
 	transform: scale(1.1);
diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js
index 59756e436..4675e6a9d 100644
--- a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js
+++ b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js
@@ -78,6 +78,7 @@ const TextInputSiteGen = ( {
 			<label htmlFor={ inputText }>
 				<div className={ 'nfd-sg-input-box' }>
 					<textarea
+						data-wnd-ai-logo
 						type="text"
 						className={ inputText }
 						ref={ textareaRef }