{ __( 'Improve post engagement.', 'jetpack' ) }
- + { ( isModuleActive || isLoadingModules ) && ( + + ) } + { ! isModuleActive && ! isLoadingModules && ( +
+
+ )
+ );
+}
diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/style.scss b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/style.scss
new file mode 100644
index 0000000000000..e541444b6a5e1
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/style.scss
@@ -0,0 +1,221 @@
+.seo-assistant-wizard {
+ position: fixed;
+ bottom: 32px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 384px;
+ height: 434px;
+ background: white;
+ border-radius: 24px;
+ outline: 0.5px solid var( --jp-gray-5 );
+ z-index: 1000;
+ display: flex;
+ flex-direction: column;
+
+ &__header {
+ flex: 0 0 auto;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px;
+ // border-bottom: 1px solid #e5e7eb;
+ background: white;
+ border-radius: 16px 16px 0 0;
+
+ h2 {
+ margin: 0;
+ font-size: 16px;
+ font-weight: 600;
+ }
+
+ button {
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 8px;
+ color: #6b7280;
+
+ &:hover {
+ color: #374151;
+ }
+ }
+ }
+
+ &__content {
+ flex: 1 1 auto;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow: hidden;
+ }
+
+ &__messages {
+ flex: 1 1 auto;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ padding: 16px 24px;
+ overflow-y: auto;
+ scroll-behavior: smooth;
+ align-items: flex-start;
+ mask-image: linear-gradient( 180deg, transparent, white 24px );
+ }
+
+ &__message {
+ border-radius: 16px;
+ white-space: pre-line;
+ animation: messageAppear 0.3s ease-out;
+ font-size: 13px;
+ line-height: 1.5;
+ display: flex;
+ align-items: center;
+ min-width: 48px;
+
+ .seo-assistant-wizard__message-icon {
+ flex-shrink: 0;
+ align-self: center;
+ flex-basis: 26px;
+
+ img {
+ vertical-align: middle;
+ }
+ }
+
+ .seo-assistant-wizard__message-text {
+ padding: 4px 12px;
+ // flex: 1 0 200px;
+ }
+
+ &.is-user {
+ background: #f3f4f6;
+ align-self: flex-end;
+ max-width: 85%;
+
+ .seo-assistant-wizard__message-icon {
+ display: none;
+ }
+ }
+ }
+
+ &__input-container {
+ flex: 0 0 auto;
+ padding: 16px;
+ background: white;
+ border-radius: 0 0 16px 16px;
+ border-top: 1px solid var( --jp-gray-5, #e5e7eb );
+ }
+
+ &__input {
+ display: flex;
+ gap: 8px;
+ border-radius: 12px;
+ outline: 1px solid var( --jp-gray-10, #c3c3c3 );
+ align-items: center;
+ padding-right: 6px;
+ height: 44px;
+
+ &:focus-within {
+ outline-width: 2px;
+ outline-color: var( --wp-components-color-accent, var( --wp-admin-theme-color, #007cba ) );
+ }
+
+ .components-base-control {
+ flex-grow: 1;
+ }
+ .components-text-control__input,
+ .components-text-control__input:focus {
+ padding: 8px;
+ border: 0;
+ border-radius: 12px;
+ box-shadow: none;
+ outline: 0;
+ }
+ }
+
+ &__submit {
+ border-radius: 20px;
+ max-height: 34px;
+ }
+
+ &__options {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ }
+
+ &__option {
+ width: 100%;
+ padding: 12px;
+ background: #f3f4f6;
+ border: 2px solid transparent;
+ border-radius: 12px;
+ text-align: left;
+ font-size: 14px;
+ line-height: 1.4;
+ transition: all 0.2s ease;
+ animation: messageAppear 0.3s ease-out;
+ color: inherit;
+
+ &.is-selected {
+ background: #fff;
+ border-color: var( --wp-components-color-accent, var( --wp-admin-theme-color, #007cba ) );
+ }
+
+ // target buttons only
+ &:not( div ) {
+ cursor: pointer;
+ }
+
+ &:hover:not( div ):not( .is-selected ) {
+ background: #e5e7eb;
+ }
+ }
+
+ &__actions {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ gap: 16px;
+
+ .components-button {
+ border-radius: 20px;
+ }
+ }
+
+ &__completion {
+ display: flex;
+ justify-content: flex-end;
+
+ .components-button {
+ border-radius: 20px;
+ }
+ }
+}
+
+@keyframes messageAppear {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+// Keep this around for magic:
+@keyframes typing-blink {
+ 30% { cy: 30; }
+ 50% { cy: 25; fill: lightgrey }
+ 70% { cy: 30; }
+}
+.typing-dot {
+ animation: 1s typing-blink linear infinite;
+ fill: grey;
+}
+.typing-dot:nth-child(2) { animation-delay: 150ms }
+.typing-dot:nth-child(3) { animation-delay: 250ms }
+
+.typing-loader {
+ color: grey;
+}
diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/types.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/types.tsx
new file mode 100644
index 0000000000000..d14a0d2578d19
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/types.tsx
@@ -0,0 +1,71 @@
+type StepType = 'input' | 'options' | 'completion';
+
+export interface Message {
+ id?: string;
+ content?: string | React.ReactNode;
+ isUser?: boolean;
+ showIcon?: boolean;
+ type?: string;
+ options?: Option[];
+}
+
+export interface Option {
+ id: string;
+ content: string;
+ selected?: boolean;
+}
+
+interface BaseStep {
+ id: string;
+ title: string;
+ label?: string;
+ messages: StepMessage[];
+ type: StepType;
+ onStart?: () => void;
+ onSubmit?: () => void;
+ onSkip?: () => void;
+ value: string;
+ setValue:
+ | React.Dispatch< React.SetStateAction< string > >
+ | React.Dispatch< React.SetStateAction< Array< string > > >;
+ setCompleted?: React.Dispatch< React.SetStateAction< boolean > >;
+ completed?: boolean;
+}
+
+interface InputStep extends BaseStep {
+ type: 'input';
+ placeholder: string;
+}
+
+interface OptionsStep extends BaseStep {
+ type: 'options';
+ options: Option[];
+ onSelect: ( option: Option ) => void;
+ submitCtaLabel?: string;
+ onRetry?: () => void;
+ onRetryCtaLabel?: string;
+}
+
+interface CompletionStep extends BaseStep {
+ type: 'completion';
+}
+
+interface StepMessage {
+ content: string | React.ReactNode;
+ showIcon?: boolean;
+}
+
+export type Step = InputStep | OptionsStep | CompletionStep;
+
+export type CompletionStepHookProps = {
+ steps: Step[];
+ addMessage?: ( message: Message | string ) => void;
+};
+
+export interface SeoAssistantProps {
+ isBusy?: boolean;
+ disabled?: boolean;
+ onStep?: ( data: { value: string | Option | null } ) => void;
+ isOpen?: boolean;
+ close?: () => void;
+}
diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/typing-message.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/typing-message.tsx
new file mode 100644
index 0000000000000..540231b59be73
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/typing-message.tsx
@@ -0,0 +1,11 @@
+import { SVG, Circle } from '@wordpress/components';
+
+export default function TypingMessage() {
+ return (
+
+ );
+}
diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/use-completion-step.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/use-completion-step.tsx
new file mode 100644
index 0000000000000..a46bc41eadd5f
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/use-completion-step.tsx
@@ -0,0 +1,49 @@
+import { createInterpolateElement, useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import type { Step, CompletionStepHookProps } from './types';
+
+export const useCompletionStep = ( { steps }: CompletionStepHookProps ): Step => {
+ const getSummaryCheck = useCallback( () => {
+ const summaryString = steps
+ .map( step => {
+ const stepLabel = step.label || step.title;
+ return step.completed ? `✅ ${ stepLabel }` : `❌ ${ stepLabel }`;
+ } )
+ .join( '
+
+
+
+ { currentStepData.title }
+
+
+
+
+
+
+
+
+ ' ); + return createInterpolateElement( summaryString, { br:
} ); + }, [ steps ] ); + + return { + id: 'completion', + title: __( 'Your post is SEO-ready', 'jetpack' ), + // onStart: handleSummaryChecks, + messages: [ + { + content: __( "Here's your updated checklist:", 'jetpack' ), + showIcon: true, + }, + { + content: getSummaryCheck(), + showIcon: false, + }, + { + content: createInterpolateElement( + __( + 'SEO optimization complete! 🎉
Your blog post is now search-engine friendly.', + 'jetpack' + ), + { br:
} + ), + showIcon: true, + }, + { + content: __( 'Happy blogging! 😊', 'jetpack' ), + showIcon: false, + }, + ], + type: 'completion', + // onStart: handleStart, + value: null, + setValue: () => null, + }; +}; diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/use-keywords-step.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/use-keywords-step.tsx new file mode 100644 index 0000000000000..ac811cd2546af --- /dev/null +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/use-keywords-step.tsx @@ -0,0 +1,87 @@ +import { createInterpolateElement, useCallback, useState } from '@wordpress/element'; +import { __, sprintf } from '@wordpress/i18n'; +import type { Step } from './types'; + +export const useKeywordsStep = ( { addMessage, onStep } ): Step => { + const [ keywords, setKeywords ] = useState( '' ); + const [ completed, setCompleted ] = useState( false ); + + const handleSkip = useCallback( () => { + addMessage( { content: __( 'Skipped!', 'jetpack' ) } ); + if ( onStep ) { + onStep( { value: '' } ); + } + }, [ addMessage, onStep ] ); + + const handleKeywordsSubmit = useCallback( () => { + if ( ! keywords.trim() ) { + return handleSkip(); + } + addMessage( { content: keywords, isUser: true } ); + + const keywordlist = keywords + .split( ',' ) + .map( k => k.trim() ) + .reduce( ( acc, curr, i, arr ) => { + if ( arr.length === 1 ) { + return curr; + } + if ( i === arr.length - 1 ) { + return `${ acc } & ${ curr }`; + } + return i === 0 ? curr : `${ acc }, ${ curr }`; + }, '' ); + const message = createInterpolateElement( + /* Translators: wrapped string is list of keywords user has entered */ + sprintf( __( `Got it! You're targeting %s. ✨✅`, 'jetpack' ), keywordlist ), + { + b: , + } + ); + addMessage( { content: message } ); + setCompleted( true ); + if ( onStep ) { + onStep( { value: keywords } ); + } + }, [ onStep, addMessage, keywords, handleSkip ] ); + + return { + id: 'keywords', + title: __( 'Optimise for SEO', 'jetpack' ), + label: __( 'Keywords', 'jetpack' ), + messages: [ + { + content: createInterpolateElement( + __( "Hi there! 👋 Let's optimise your blog post for SEO.", 'jetpack' ), + { b: } + ), + showIcon: true, + }, + { + content: createInterpolateElement( + __( + "Here's what we can improve:
1. Keywords
2. Title
3. Meta description", + 'jetpack' + ), + { br:
} + ), + showIcon: false, + }, + { + content: __( + 'To start, please enter 1–3 focus keywords that describe your blog post.', + 'jetpack' + ), + showIcon: true, + }, + ], + type: 'input', + placeholder: __( 'Photography, plants', 'jetpack' ), + onSubmit: handleKeywordsSubmit, + onSkip: handleSkip, + completed, + setCompleted, + value: keywords, + setValue: setKeywords, + }; +}; diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/use-meta-description-step.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/use-meta-description-step.tsx new file mode 100644 index 0000000000000..5b4699fd95872 --- /dev/null +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/use-meta-description-step.tsx @@ -0,0 +1,117 @@ +import { useDispatch } from '@wordpress/data'; +import { useCallback, useState } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import TypingMessage from './typing-message'; +import type { Step, Option } from './types'; + +export const useMetaDescriptionStep = ( { + addMessage, + removeLastMessage, + onStep, + setIsBusy, +} ): Step => { + const [ selectedMetaDescription, setSelectedMetaDescription ] = useState< string >(); + const [ metaDescriptionOptions, setMetaDescriptionOptions ] = useState< Option[] >( [] ); + const { editPost } = useDispatch( 'core/editor' ); + const [ completed, setCompleted ] = useState( false ); + + const handleMetaDescriptionSelect = useCallback( ( option: Option ) => { + setSelectedMetaDescription( option.content ); + setMetaDescriptionOptions( prev => + prev.map( opt => ( { + ...opt, + selected: opt.id === option.id, + } ) ) + ); + }, [] ); + + const handleMetaDescriptionSubmit = useCallback( async () => { + addMessage( { content:
+ { currentStepData.type === 'input' && (
+
+ );
+}
diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/wizard-messages.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/wizard-messages.tsx
new file mode 100644
index 0000000000000..fc6e0af1dc98c
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/wizard-messages.tsx
@@ -0,0 +1,87 @@
+import { useEffect, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import clsx from 'clsx';
+import bigSkyIcon from './big-sky-icon.svg';
+
+const Message = ( { message } ) => {
+ return (
+
+
+ ) }
+
+ { currentStepData.type === 'options' && (
+
+
+
+
+
+ ) }
+
+ { currentStepData.type === 'completion' && (
+
+
+
+ ) }
+
+
+ );
+};
+
+const OptionMessages = ( { currentStepData } ) => {
+ if ( currentStepData.type !== 'options' || ! currentStepData.options.length ) {
+ return null;
+ }
+
+ return (
+
+ { message.showIcon && (
+ 
+ ) }
+
+
+ { message.type === 'past-options' && (
+
+ { message.options.map( option => (
+
+ ) }
+
+ { ( ! message.type || message.type === 'chat' ) && (
+
+ { option.content }
+
+ ) ) }
+ { message.content }
+ ) }
+
+
+
+ );
+};
+
+export default function Messages( { currentStepData, messages } ) {
+ const messagesEndRef = useRef< HTMLDivElement >( null );
+ const scrollToBottom = () => {
+ messagesEndRef.current?.scrollIntoView( { behavior: 'smooth' } );
+ };
+
+ useEffect( () => {
+ scrollToBottom();
+ }, [ messages ] );
+
+ return (
+
+
+
+ { currentStepData.options.map( option => (
+
+ ) ) }
+
+
+ { messages.map( message => (
+
+ );
+}
diff --git a/projects/plugins/jetpack/extensions/plugins/seo/index.js b/projects/plugins/jetpack/extensions/plugins/seo/index.js
index 4ebdeb0185543..a3618e5a60fa0 100644
--- a/projects/plugins/jetpack/extensions/plugins/seo/index.js
+++ b/projects/plugins/jetpack/extensions/plugins/seo/index.js
@@ -3,6 +3,7 @@ import {
useModuleStatus,
isSimpleSite,
isAtomicSite,
+ getJetpackExtensionAvailability,
getRequiredPlan,
} from '@automattic/jetpack-shared-extension-utils';
import { PanelBody, PanelRow } from '@wordpress/components';
@@ -12,7 +13,9 @@ import { PluginPrePublishPanel } from '@wordpress/edit-post';
import { store as editorStore } from '@wordpress/editor';
import { Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
+import { isBetaExtension } from '../../editor';
import JetpackPluginSidebar from '../../shared/jetpack-plugin-sidebar';
+import SeoAssistant from '../ai-assistant-plugin/components/seo-assistant';
import { SeoPlaceholder } from './components/placeholder';
import { SeoSkeletonLoader } from './components/skeleton-loader';
import UpsellNotice from './components/upsell';
@@ -24,6 +27,9 @@ import './editor.scss';
export const name = 'seo';
+const isSeoAssistantEnabled =
+ getJetpackExtensionAvailability( 'ai-seo-assistant' )?.available === true;
+
const Seo = () => {
const { isLoadingModules, isChangingStatus, isModuleActive, changeStatus } =
useModuleStatus( 'seo-tools' );
@@ -95,6 +101,15 @@ const Seo = () => {