Jetpack AI: add SEO assistant PoC

projects/plugins/jetpack/changelog/add-jetpack-seo-assistant-poc

@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Jetpack AI: add PoC for SEO assistant, hardcoded and no actionables yet

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx

@@ -17,14 +17,14 @@ import useAICheckout from '../../../../blocks/ai-assistant/hooks/use-ai-checkout
 import useAiFeature from '../../../../blocks/ai-assistant/hooks/use-ai-feature';
 import useAiProductPage from '../../../../blocks/ai-assistant/hooks/use-ai-product-page';
 import { getFeatureAvailability } from '../../../../blocks/ai-assistant/lib/utils/get-feature-availability';
-import { isBetaExtension } from '../../../../editor';
+// import { isBetaExtension } from '../../../../editor';
 import JetpackPluginSidebar from '../../../../shared/jetpack-plugin-sidebar';
 import { PLAN_TYPE_FREE, PLAN_TYPE_UNLIMITED, usePlanType } from '../../../../shared/use-plan-type';
 import { FeaturedImage } from '../ai-image';
 import { Breve, registerBreveHighlights, Highlight } from '../breve';
 import { getBreveAvailability, canWriteBriefBeEnabled } from '../breve/utils/get-availability';
 import Feedback from '../feedback';
-import SeoAssistant from '../seo-assistant';
+// import SeoAssistant from '../seo-assistant';
 import TitleOptimization from '../title-optimization';
 import UsagePanel from '../usage-panel';
 import {
@@ -60,7 +60,7 @@ const isAITitleOptimizationKeywordsFeatureAvailable = getFeatureAvailability(
 	'ai-title-optimization-keywords-support'
 );
 
-const isSeoAssistantEnabled = getFeatureAvailability( 'ai-seo-assistant' );
+// const isSeoAssistantEnabled = getFeatureAvailability( 'ai-seo-assistant' );
 
 const JetpackAndSettingsContent = ( {
 	placement,
@@ -72,6 +72,14 @@ const JetpackAndSettingsContent = ( {
 	const { checkoutUrl } = useAICheckout();
 	const { productPageUrl } = useAiProductPage();
 	const isBreveAvailable = getBreveAvailability();
+	// const isViewable = useSelect( select => {
+	// 	const postTypeName = select( editorStore ).getCurrentPostType();
+	// 	const postTypeObject = ( select( coreStore ) as unknown as CoreSelect ).getPostType(
+	// 		postTypeName
+	// 	);
+
+	// 	return postTypeObject?.viewable;
+	// }, [] );
 
 	const currentTitleOptimizationSectionLabel = __( 'Optimize Publishing', 'jetpack' );
 	const SEOTitleOptimizationSectionLabel = __( 'Optimize Title', 'jetpack' );
@@ -89,18 +97,18 @@ const JetpackAndSettingsContent = ( {
 				</PanelRow>
 			) }
 
-			{ isSeoAssistantEnabled && (
+			{ /* { isSeoAssistantEnabled && isViewable && (
 				<PanelRow
 					className={ `jetpack-ai-sidebar__feature-section ${
 						isBetaExtension( 'ai-seo-assistant' ) ? 'is-beta-extension' : ''
 					}` }
 				>
 					<BaseControl __nextHasNoMarginBottom={ true }>
 						<BaseControl.VisualLabel>{ __( 'SEO', 'jetpack' ) }</BaseControl.VisualLabel>
-						<SeoAssistant busy={ false } disabled={ false } />
+						<SeoAssistant disabled={ false } />
 					</BaseControl>
 				</PanelRow>
-			) }
+			) } */ }
 
 			{ canWriteBriefBeEnabled() && isBreveAvailable && (
 				<PanelRow>

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/index.tsx

@@ -1,21 +1,48 @@
+import { useModuleStatus } from '@automattic/jetpack-shared-extension-utils';
 import { Button } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import debugFactory from 'debug';
+import { SeoPlaceholder } from '../../../../plugins/seo/components/placeholder';
+import './style.scss';
+import bigSkyIcon from './big-sky-icon.svg';
+import SeoAssistantWizard from './seo-assistant-wizard';
+import type { SeoAssistantProps } from './types';
 
 const debug = debugFactory( 'jetpack-ai:seo-assistant' );
 
-export default function SeoAssistant( { busy, disabled } ) {
+export default function SeoAssistant( { disabled, onStep }: SeoAssistantProps ) {
+	const [ isOpen, setIsOpen ] = useState( false );
+	const postIsEmpty = useSelect( select => select( editorStore ).isEditedPostEmpty(), [] );
+	const { isLoadingModules, isChangingStatus, isModuleActive, changeStatus } =
+		useModuleStatus( 'seo-tools' );
+
+	debug( 'rendering seo-assistant entry point' );
 	return (
 		<div>
 			<p>{ __( 'Improve post engagement.', 'jetpack' ) }</p>
-			<Button
-				onClick={ () => debug( 'click' ) }
-				variant="secondary"
-				disabled={ disabled }
-				isBusy={ busy }
-			>
-				{ __( 'SEO Assistant', 'jetpack' ) }
-			</Button>
+			{ ( isModuleActive || isLoadingModules ) && (
+				<Button
+					onClick={ () => setIsOpen( true ) }
+					variant="secondary"
+					disabled={ isLoadingModules || isOpen || postIsEmpty || disabled }
+					isBusy={ isLoadingModules || isOpen }
+				>
+					<img src={ bigSkyIcon } alt={ __( 'SEO Assistant icon', 'jetpack' ) } />
+					&nbsp;
+					{ __( 'SEO Assistant', 'jetpack' ) }
+				</Button>
+			) }
+			{ ! isModuleActive && ! isLoadingModules && (
+				<SeoPlaceholder
+					isLoading={ isChangingStatus }
+					isModuleActive={ isModuleActive }
+					changeStatus={ changeStatus }
+				/>
+			) }
+			<SeoAssistantWizard isOpen={ isOpen } onStep={ onStep } close={ () => setIsOpen( false ) } />
 		</div>
 	);
 }

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/seo-assistant-wizard.tsx

@@ -0,0 +1,167 @@
+import { Button, Icon, Tooltip } from '@wordpress/components';
+import { useState, useCallback, useEffect, useRef, useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { next, closeSmall, chevronLeft } from '@wordpress/icons';
+import debugFactory from 'debug';
+import './style.scss';
+import { useCompletionStep } from './use-completion-step';
+import { useKeywordsStep } from './use-keywords-step';
+import { useMetaDescriptionStep } from './use-meta-description-step';
+import { useTitleStep } from './use-title-step';
+import WizardInput from './wizard-input';
+import WizardMessages from './wizard-messages';
+import type { SeoAssistantProps, Step, Message } from './types';
+
+const debug = debugFactory( 'jetpack-ai:seo-assistant-wizard' );
+
+export default function SeoAssistantWizard( { isOpen, close, onStep }: SeoAssistantProps ) {
+	const [ currentStep, setCurrentStep ] = useState( 0 );
+	const [ messages, setMessages ] = useState< Message[] >( [] );
+	const messagesEndRef = useRef< HTMLDivElement >( null );
+	const [ isBusy, setIsBusy ] = useState( false );
+
+	const scrollToBottom = () => {
+		messagesEndRef.current?.scrollIntoView( { behavior: 'smooth' } );
+	};
+
+	useEffect( () => {
+		scrollToBottom();
+	}, [ messages ] );
+
+	const addMessage = useCallback( async ( message: Message ) => {
+		const newMessage = {
+			...message,
+			showIcon: message.showIcon === false ? false : ! message.isUser,
+		} as Message;
+
+		setMessages( prev => [ ...prev, { ...newMessage, id: `message-${ prev.length }` } ] );
+	}, [] );
+
+	/* Removes last message */
+	const removeLastMessage = () => {
+		setMessages( prev => prev.slice( 0, -1 ) );
+	};
+
+	const keywordsStep: Step = useKeywordsStep( {
+		addMessage,
+		onStep,
+	} );
+
+	const titleStep: Step = useTitleStep( {
+		addMessage,
+		removeLastMessage,
+		onStep,
+		contextData: keywordsStep.value,
+		setIsBusy,
+	} );
+
+	const metaStep: Step = useMetaDescriptionStep( {
+		addMessage,
+		removeLastMessage,
+		onStep,
+		setIsBusy,
+	} );
+
+	const completionStep: Step = useCompletionStep( {
+		steps: [ keywordsStep, titleStep, metaStep ],
+		addMessage,
+	} );
+
+	const steps: Step[] = useMemo(
+		() => [ keywordsStep, titleStep, metaStep, completionStep ],
+		[ keywordsStep, metaStep, titleStep, completionStep ]
+	);
+
+	const currentStepData = useMemo( () => steps[ currentStep ], [ steps, currentStep ] );
+
+	// initialize wizard, set completion monitors
+	useEffect( () => {
+		if ( ! isOpen ) {
+			return;
+		}
+		// add messageQueue.length check here for delayed messages
+		if ( messages.length === 0 ) {
+			debug( 'init' );
+			// Initialize with first step messages
+			currentStepData.messages.forEach( addMessage );
+		}
+	}, [ isOpen, currentStepData.messages, messages, addMessage ] );
+
+	const handleNext = useCallback( () => {
+		if ( currentStep < steps.length - 1 ) {
+			debug( 'moving to ' + ( currentStep + 1 ), steps[ currentStep + 1 ] );
+			setCurrentStep( currentStep + 1 );
+			// Add next step messages
+			// TODO: can we capture completion step here and craft the messages?
+			// Nothing else has worked so far to keep track of step completions
+			steps[ currentStep + 1 ].messages.forEach( addMessage );
+			steps[ currentStep + 1 ].onStart?.();
+		}
+	}, [ currentStep, steps, setCurrentStep, addMessage ] );
+
+	const handleSubmit = useCallback( async () => {
+		await currentStepData.onSubmit?.();
+		handleNext();
+	}, [ currentStepData, handleNext ] );
+
+	const handleBack = () => {
+		if ( currentStep > 0 ) {
+			setCurrentStep( currentStep - 1 );
+			// Re-add previous step messages
+			steps[ currentStep - 1 ].messages.forEach( message =>
+				addMessage( {
+					content: message.content,
+					showIcon: message.showIcon,
+				} )
+			);
+		}
+	};
+
+	const handleSkip = async () => {
+		await currentStepData?.onSkip?.();
+		handleNext();
+	};
+
+	// Reset states and close the wizard
+	const handleDone = useCallback( () => {
+		close();
+		setCurrentStep( 0 );
+		setMessages( [] );
+		steps
+			.filter( step => step.type !== 'completion' )
+			.forEach( step => step.setCompleted( false ) );
+	}, [ close, steps ] );
+
+	return (
+		isOpen && (
+			<div className="seo-assistant-wizard">
+				<div className="seo-assistant-wizard__header">
+					<Button variant="link" disabled={ isBusy } onClick={ handleBack }>
+						<Icon icon={ chevronLeft } size={ 24 } />
+					</Button>
+					<h2>{ currentStepData.title }</h2>
+					<div>
+						<Tooltip text={ __( 'Skip', 'jetpack' ) }>
+							<Button variant="link" disabled={ isBusy } onClick={ handleSkip }>
+								<Icon icon={ next } size={ 24 } />
+							</Button>
+						</Tooltip>
+						<Button variant="link" onClick={ handleDone }>
+							<Icon icon={ closeSmall } size={ 24 } />
+						</Button>
+					</div>
+				</div>
+
+				<div className="seo-assistant-wizard__content">
+					<WizardMessages currentStepData={ currentStepData } messages={ messages } />
+
+					<WizardInput
+						currentStepData={ currentStepData }
+						handleDone={ handleDone }
+						handleSubmit={ handleSubmit }
+					/>
+				</div>
+			</div>
+		)
+	);
+}