Content Guidelines: Add AI-powered generate/improve UI via Jetpack

projects/plugins/jetpack/_inc/content-guidelines-ai.js

@@ -0,0 +1,16 @@
+/**
+ * Content Guidelines AI — Entry point.
+ *
+ * Injects Jetpack AI-powered generate/improve buttons into the
+ * Content Guidelines admin page (Gutenberg experimental feature).
+ */
+import '@automattic/jetpack-shared-extension-utils/store/wordpress-com';
+import './content-guidelines-ai/store';
+import './content-guidelines-ai/style.scss';
+import { startInjection } from './content-guidelines-ai/lib/inject';
+
+if ( document.readyState === 'loading' ) {
+	document.addEventListener( 'DOMContentLoaded', startInjection );
+} else {
+	startInjection();
+}

projects/plugins/jetpack/_inc/content-guidelines-ai.php

@@ -0,0 +1,86 @@
+<?php
+/**
+ * Content Guidelines AI — Jetpack AI integration.
+ *
+ * Enqueues a standalone JS bundle on the Content Guidelines admin page
+ * that adds AI-powered guideline generation via Jetpack.
+ *
+ * @package automattic/jetpack
+ */
+
+use Automattic\Jetpack\Assets;
+use Automattic\Jetpack\Status\Visitor;
+use Automattic\Jetpack\Tracking;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit( 0 );
+}
+
+/**
+ * Check if the current user is an Automattician.
+ *
+ * - Simple sites: wpcom_is_proxied_request() + is_automattician()
+ * - Atomic sites: Visitor::is_automattician_feature_flags_only()
+ *
+ * @return bool
+ */
+function jetpack_content_guidelines_ai_is_automattician() {
+	// Simple sites.
+	if ( function_exists( 'wpcom_is_proxied_request' )
+		&& wpcom_is_proxied_request()
+		&& function_exists( 'is_automattician' )
+		&& is_automattician()
+	) {
+		return true;
+	}
+
+	// Atomic sites.
+	return ( new Visitor() )->is_automattician_feature_flags_only();
+}
+
+/**
+ * Enqueue content-guidelines-ai script on the Content Guidelines admin page.
+ *
+ * @since $$next-version$$
+ *
+ * @param string $hook_suffix The current admin page hook suffix.
+ */
+function jetpack_content_guidelines_ai_enqueue_scripts( $hook_suffix ) {
+	if ( 'settings_page_guidelines-wp-admin' !== $hook_suffix ) {
+		return;
+	}
+
+	// Temporarily gate to Automatticians only during internal rollout.
+	if ( ! jetpack_content_guidelines_ai_is_automattician() ) {
+		return;
+	}
+
+	// Bail when build artifacts are missing rather than enqueueing a script
+	// with guessed (and likely wrong) dependencies.
+	if ( ! file_exists( JETPACK__PLUGIN_DIR . '_inc/build/content-guidelines-ai.min.asset.php' ) ) {
+		return;
+	}
+
+	// The bundle records Tracks events via @automattic/jetpack-analytics,
+	// which only queues into window._tkq. Enqueue the Tracks client (w.js)
+	// so events send without relying on whichever platform widgets happen
+	// to load it.
+	Tracking::register_tracks_functions_scripts( true );
+
+	// Handles dependencies/version from the asset file, JS translations for
+	// the text domain, the CSS (including the .rtl.css variant), and style
+	// dependencies derived from the script's.
+	Assets::register_script(
+		'jetpack-content-guidelines-ai',
+		'_inc/build/content-guidelines-ai.min.js',
+		JETPACK__PLUGIN_FILE,
+		array(
+			'in_footer'  => true,
+			'textdomain' => 'jetpack',
+			'css_path'   => '_inc/build/content-guidelines-ai.css',
+			'enqueue'    => true,
+		)
+	);
+}
+
+add_action( 'admin_enqueue_scripts', 'jetpack_content_guidelines_ai_enqueue_scripts' );

projects/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 }
+		/>
+	);
+}

projects/plugins/jetpack/_inc/content-guidelines-ai/components/block-suggestion-buttons.jsx

@@ -0,0 +1,107 @@
+import { useAiFeature } from '@automattic/jetpack-ai-client';
+import { Button } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { STORE_NAME } from '../constants';
+import { suggestGuidelines } from '../lib/api';
+import { acceptBlockSuggestion } from '../lib/dom';
+import { recordGuidelinesEvent } from '../lib/tracks';
+import { AI_STORE_NAME } from '../store';
+
+export default function BlockSuggestionButtons( { blockName, blockModal } ) {
+	const { createErrorNotice } = useDispatch( noticesStore );
+	const { startSectionLoading, stopSectionLoading, setSuggestion, clearSuggestion } =
+		useDispatch( AI_STORE_NAME );
+	const { hasFeature } = useAiFeature();
+
+	const blockLoading = useSelect(
+		select => select( AI_STORE_NAME ).isSectionLoading( blockName ),
+		[ blockName ]
+	);
+
+	const suggestion = useSelect(
+		select => select( AI_STORE_NAME ).getSuggestion( blockName ),
+		[ blockName ]
+	);
+
+	const saved = useSelect(
+		select => select( STORE_NAME ).getBlockGuideline( blockName ),
+		[ blockName ]
+	);
+
+	const handleGenerate = useCallback( async () => {
+		const action = saved ? 'improve' : 'generate';
+		recordGuidelinesEvent( 'generate', { type: 'block', slug: blockName, action } );
+
+		const textarea = blockModal?.querySelector( '.components-textarea-control__input' );
+		const currentText = textarea?.value || '';
+
+		startSectionLoading( blockName );
+		try {
+			const existingContent = currentText ? { [ blockName ]: currentText } : {};
+			const response = await suggestGuidelines( [ blockName ], existingContent );
+			const text = response?.suggestions?.[ blockName ];
+			if ( ! text ) {
+				throw new Error( 'No suggestion returned.' );
+			}
+			setSuggestion( blockName, text );
+		} catch {
+			createErrorNotice( __( 'Failed to generate guidelines. Please try again.', 'jetpack' ), {
+				type: 'snackbar',
+			} );
+		} finally {
+			stopSectionLoading( blockName );
+		}
+	}, [
+		blockModal,
+		blockName,
+		saved,
+		startSectionLoading,
+		stopSectionLoading,
+		setSuggestion,
+		createErrorNotice,
+	] );
+
+	const handleAccept = useCallback( () => {
+		recordGuidelinesEvent( 'accept', { type: 'block', slug: blockName } );
+		acceptBlockSuggestion( blockModal, blockName, suggestion, clearSuggestion );
+	}, [ blockModal, blockName, suggestion, clearSuggestion ] );
+
+	const handleDismiss = useCallback( () => {
+		recordGuidelinesEvent( 'dismiss', { type: 'block', slug: blockName } );
+		clearSuggestion( blockName );
+	}, [ blockName, clearSuggestion ] );
+
+	if ( suggestion ) {
+		return (
+			<div className="jetpack-content-guidelines-ai__suggestion-actions">
+				<Button variant="primary" onClick={ handleAccept }>
+					{ __( 'Accept suggestion', 'jetpack' ) }
+				</Button>
+				<Button variant="tertiary" onClick={ handleDismiss }>
+					{ __( 'Dismiss', 'jetpack' ) }
+				</Button>
+			</div>
+		);
+	}
+
+	const generateLabel = __( 'Generate guidelines', 'jetpack' );
+	const improveLabel = __( 'Improve guidelines', 'jetpack' );
+	const label = saved ? improveLabel : generateLabel;
+
+	return (
+		<div className="jetpack-content-guidelines-ai__suggestion-actions">
+			<Button
+				variant="secondary"
+				onClick={ handleGenerate }
+				disabled={ blockLoading || ! hasFeature }
+				accessibleWhenDisabled
+				className="jetpack-content-guidelines-ai__section-generate-button"
+			>
+				{ label }
+			</Button>
+		</div>
+	);
+}

projects/plugins/jetpack/_inc/content-guidelines-ai/components/diff-view.jsx

@@ -0,0 +1,55 @@
+import { useCallback, useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { diffWords } from 'diff';
+
+export default function DiffView( { original, suggestion, onAccept, height } ) {
+	const diff = useMemo( () => {
+		if ( ! suggestion ) {
+			return [];
+		}
+		return diffWords( original, suggestion );
+	}, [ original, suggestion ] );
+
+	const handleKeyDown = useCallback(
+		e => {
+			if ( e.key === 'Enter' || e.key === ' ' ) {
+				e.preventDefault();
+				onAccept();
+			}
+		},
+		[ onAccept ]
+	);
+
+	return (
+		<div
+			className="jetpack-content-guidelines-ai__diff"
+			style={ height ? { height } : undefined }
+			role="button"
+			tabIndex={ 0 }
+			aria-label={ __( 'Click to accept suggested changes', 'jetpack' ) }
+			onClick={ onAccept }
+			onKeyDown={ handleKeyDown }
+		>
+			<span className="screen-reader-text">
+				{ __( 'Changes from current to suggested guidelines:', 'jetpack' ) }
+			</span>
+			{ diff.map( ( part, i ) => {
+				if ( part.added ) {
+					return (
+						<ins key={ i } className="jetpack-content-guidelines-ai__diff-added">
+							{ part.value }
+						</ins>
+					);
+				}
+				if ( part.removed ) {
+					return (
+						<del key={ i } className="jetpack-content-guidelines-ai__diff-removed">
+							{ part.value }
+						</del>
+					);
+				}
+				return <span key={ i }>{ part.value }</span>;
+			} ) }
+		</div>
+	);
+}