initial

wp-content/plugins/jetpack/_inc/content-guidelines-ai/components/block-suggestion-actions.jsx

@@ -0,0 +1,73 @@
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback, useEffect, useState } from '@wordpress/element';
+import { acceptBlockSuggestion } from '../lib/dom';
+import { recordGuidelinesEvent } from '../lib/tracks';
+import { AI_STORE_NAME } from '../store';
+import DiffView from './diff-view';
+
+// Renders only the diff view. Accept/Dismiss and Improve buttons live in
+// BlockSuggestionButtons, injected as a separate row above the modal action bar.
+export default function BlockSuggestionActions( { blockName, blockModal } ) {
+	const suggestion = useSelect(
+		select => select( AI_STORE_NAME ).getSuggestion( blockName ),
+		[ blockName ]
+	);
+	const blockLoading = useSelect(
+		select => select( AI_STORE_NAME ).isSectionLoading( blockName ),
+		[ blockName ]
+	);
+	const { clearSuggestion } = useDispatch( AI_STORE_NAME );
+
+	const [ original, setOriginal ] = useState( '' );
+	const [ textareaHeight, setTextareaHeight ] = useState( null );
+
+	// Clear stale suggestion when the modal closes (component unmounts).
+	useEffect( () => {
+		return () => clearSuggestion( blockName );
+	}, [ blockName, clearSuggestion ] );
+
+	// Toggle shimmer and suggestion classes on the modal.
+	useEffect( () => {
+		if ( ! blockModal ) {
+			return;
+		}
+
+		// Capture textarea content and height before hiding it.
+		if ( suggestion && ! blockModal.classList.contains( 'has-jetpack-suggestion' ) ) {
+			const textarea = blockModal.querySelector( '.components-textarea-control__input' );
+			if ( textarea ) {
+				setOriginal( textarea.value || '' );
+				if ( textarea.offsetHeight > 0 ) {
+					setTextareaHeight( textarea.offsetHeight );
+				} else {
+					const rows = parseInt( textarea.getAttribute( 'rows' ), 10 ) || 6;
+					setTextareaHeight( rows * 20 + 20 );
+				}
+			}
+		}
+
+		blockModal.classList.toggle( 'has-jetpack-suggestion', !! suggestion );
+		blockModal.classList.toggle( 'is-jetpack-loading', blockLoading && ! suggestion );
+		return () => {
+			blockModal.classList.remove( 'has-jetpack-suggestion', 'is-jetpack-loading' );
+		};
+	}, [ blockModal, suggestion, blockLoading ] );
+
+	const handleAccept = useCallback( () => {
+		recordGuidelinesEvent( 'accept', { type: 'block', slug: blockName } );
+		acceptBlockSuggestion( blockModal, blockName, suggestion, clearSuggestion );
+	}, [ blockModal, blockName, suggestion, clearSuggestion ] );
+
+	if ( ! suggestion ) {
+		return null;
+	}
+
+	return (
+		<DiffView
+			original={ original }
+			suggestion={ suggestion }
+			onAccept={ handleAccept }
+			height={ textareaHeight }
+		/>
+	);
+}