diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx
index 66878a350339b..304e302a39829 100644
--- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx
+++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx
@@ -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,7 +97,7 @@ const JetpackAndSettingsContent = ( {
) }
- { isSeoAssistantEnabled && (
+ { isSeoAssistantEnabled && isViewable && (
{ __( 'SEO', 'jetpack' ) }
-
+
) }
diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/index.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/index.tsx
index 4a2ef9104c105..6bda862f650d7 100644
--- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/index.tsx
+++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/seo-assistant/index.tsx
@@ -1,7 +1,5 @@
+import { useModuleStatus } from '@automattic/jetpack-shared-extension-utils';
import { Button, TextControl, SVG, Circle } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
import {
useState,
useCallback,
@@ -12,8 +10,9 @@ import {
import { __, sprintf } from '@wordpress/i18n';
import clsx from 'clsx';
import debugFactory from 'debug';
+import { SeoPlaceholder } from '../../../../plugins/seo/components/placeholder';
+import usePostContent from '../../hooks/use-post-content';
import './style.scss';
-import { CoreSelect } from '../ai-assistant-plugin-sidebar/types';
type StepType = 'input' | 'options' | 'completion';
@@ -77,7 +76,7 @@ const TypingMessage = () => {
);
};
-export default function SeoAssistant( { busy, disabled, onStep }: SeoAssistantProps ) {
+export default function SeoAssistant( { disabled, onStep }: SeoAssistantProps ) {
const [ isOpen, setIsOpen ] = useState( false );
const [ currentStep, setCurrentStep ] = useState( 0 );
const [ keywords, setKeywords ] = useState( '' );
@@ -86,16 +85,9 @@ export default function SeoAssistant( { busy, disabled, onStep }: SeoAssistantPr
const [ messages, setMessages ] = useState< Message[] >( [] );
const messagesEndRef = useRef< HTMLDivElement >( null );
const [ titleOptions, setTitleOptions ] = useState< Option[] >( [] );
- // const postContent = usePostContent();
- // const { isLoadingModules, isChangingStatus, isModuleActive, changeStatus } = useModuleStatus( 'seo-tools' );
- const isViewable = useSelect( select => {
- const postTypeName = select( editorStore ).getCurrentPostType();
- const postTypeObject = ( select( coreStore ) as unknown as CoreSelect ).getPostType(
- postTypeName
- );
-
- return postTypeObject?.viewable;
- }, [] );
+ const postContent = usePostContent();
+ const { isLoadingModules, isChangingStatus, isModuleActive, changeStatus } =
+ useModuleStatus( 'seo-tools' );
const [ metaDescriptionOptions, setMetaDescriptionOptions ] = useState< Option[] >( [] );
@@ -398,27 +390,6 @@ export default function SeoAssistant( { busy, disabled, onStep }: SeoAssistantPr
setMessages( [] );
};
- // If the post type is not viewable, do not render my plugin.
- if ( ! isViewable ) {
- return null;
- }
-
- if ( ! isOpen ) {
- return (
-
-
{ __( 'Improve post engagement.', 'jetpack' ) }
-
-
- );
- }
-
const renderCurrentInput = () => {
if ( currentStepData.type === 'input' ) {
return (
@@ -490,36 +461,59 @@ export default function SeoAssistant( { busy, disabled, onStep }: SeoAssistantPr
return null;
};
+ debug( isModuleActive, isLoadingModules );
return (
-
-
-
-
{ currentStepData.title }
-
-
-
-
-
- { messages.map( message => (
-
- { message.content }
+
+
{ __( 'Improve post engagement.', 'jetpack' ) }
+ { ( isModuleActive || isLoadingModules ) && (
+
+ ) }
+ { ! isModuleActive && ! isLoadingModules && (
+
+ ) }
+ { isOpen && (
+
+
+
+
{ currentStepData.title }
+
+
+
+
+
+ { messages.map( message => (
+
+ { message.content }
+
+ ) ) }
+
- ) ) }
-
-
-
{ renderCurrentInput() }
-
+
{ renderCurrentInput() }
+
+
+ ) }
);
}