AI Assistant: Hide input when user types on extended block (#37801)

* add hook to hide the input when user types

* changelog

* add hideOnBlockFocus to the block handlers

* change hiding behavior to focus instead of keydown

* rename event listener function and fix autohide on stream

projects/plugins/jetpack/changelog/update-jetpack-ai-inline-extension-hide-control-when-typing

@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+AI Assistant: Hide input when user types on extended block

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

@@ -27,6 +27,7 @@ export class BlockHandler {
 	public feature: string = 'ai-assistant';
 	public adjustPosition: boolean = true;
 	public startOpen: boolean = false;
+	public hideOnBlockFocus: boolean = true;
 
 	constructor( clientId: string, renderRules: RenderHTMLRules = [] ) {
 		this.clientId = clientId;

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

@@ -69,5 +69,6 @@ export function getBlockHandler(
 		feature: handler.feature,
 		adjustPosition: handler.adjustPosition,
 		startOpen: handler.startOpen,
+		hideOnBlockFocus: handler.hideOnBlockFocus,
 	};
 }

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

@@ -8,6 +8,7 @@ export class JetpackChildrenFormHandler extends BlockHandler {
 		super( clientId, [] );
 		this.behavior = this.handleBehavior;
 		this.isChildBlock = true;
+		this.hideOnBlockFocus = false;
 	}
 
 	handleBehavior = ( { context } ) => {

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

@@ -25,6 +25,7 @@ export class JetpackFormHandler extends BlockHandler {
 		this.feature = 'jetpack-form-ai-extension';
 		this.adjustPosition = false;
 		this.startOpen = true;
+		this.hideOnBlockFocus = false;
 	}
 
 	private setContent( newContent: string, isRequestDone = false ): void {

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

@@ -21,6 +21,7 @@ export interface IBlockHandler {
 	feature: string;
 	adjustPosition?: boolean;
 	startOpen?: boolean;
+	hideOnBlockFocus?: boolean;
 }
 
 export type BlockEditorSelect = {

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

@@ -33,7 +33,11 @@ import type {
 } from '../components/ai-assistant-toolbar-dropdown/dropdown-content';
 import type { ExtendedInlineBlockProp } from '../extensions/ai-assistant';
 import type { PromptTypeProp } from '../lib/prompt';
-import type { PromptMessagesProp, PromptItemProps } from '@automattic/jetpack-ai-client';
+import type {
+	PromptMessagesProp,
+	PromptItemProps,
+	RequestingStateProp,
+} from '@automattic/jetpack-ai-client';
 
 const debug = debugFactory( 'jetpack-ai-assistant:extensions:with-ai-extension' );
 
@@ -82,6 +86,8 @@ const blockEditWithAiComponents = createHigherOrderComponent( BlockEdit => {
 		const [ action, setAction ] = useState< string >( '' );
 		// The last request made by the user, to be used when the user clicks the "Try Again" button.
 		const lastRequest = useRef< RequestOptions | null >( null );
+		// Ref to the requesting state to use it in the hideOnBlockFocus effect.
+		const requestingStateRef = useRef< RequestingStateProp | null >( null );
 		// Data and functions from the editor.
 		const { undo } = useDispatch( 'core/editor' ) as CoreEditorDispatch;
 		const { postId } = useSelect( select => {
@@ -121,6 +127,7 @@ const blockEditWithAiComponents = createHigherOrderComponent( BlockEdit => {
 			feature,
 			adjustPosition,
 			startOpen,
+			hideOnBlockFocus,
 		} = useMemo( () => getBlockHandler( blockName, clientId ), [ blockName, clientId ] );
 
 		// State to display the AI Control or not.
@@ -287,6 +294,11 @@ const blockEditWithAiComponents = createHigherOrderComponent( BlockEdit => {
 			},
 		} );
 
+		// Save the requesting state to use it in the hideOnBlockFocus effect.
+		useEffect( () => {
+			requestingStateRef.current = requestingState;
+		}, [ requestingState ] );
+
 		// Called when a suggestion from the toolbar is requested, like "Change tone".
 		const handleRequestSuggestion = useCallback< OnRequestSuggestion >(
 			( promptType, options, humanText ) => {
@@ -450,6 +462,33 @@ const blockEditWithAiComponents = createHigherOrderComponent( BlockEdit => {
 			};
 		}, [ adjustBlockPadding, adjustPosition, clientId, controlObserver, id, showAiControl ] );
 
+		// Hide the AI Control when the block is focused.
+		useEffect( () => {
+			if ( ! hideOnBlockFocus ) {
+				return;
+			}
+
+			if ( showAiControl ) {
+				const element = ownerDocument.current.getElementById( id );
+
+				const handleFocusInBlock = () => {
+					// If the AI Control is requesting or suggesting, don't hide it, as the block focus is programmatic.
+					if ( [ 'requesting', 'suggesting' ].includes( requestingStateRef.current as string ) ) {
+						return;
+					}
+
+					setShowAiControl( false );
+					element?.removeEventListener( 'focusin', handleFocusInBlock );
+				};
+
+				element?.addEventListener( 'focusin', handleFocusInBlock );
+
+				return () => {
+					element?.removeEventListener( 'focusin', handleFocusInBlock );
+				};
+			}
+		}, [ hideOnBlockFocus, showAiControl, id ] );
+
 		const aiInlineExtensionContent = (
 			<>
 				<BlockEdit { ...props } />