Jetpack AI: Updates / clean up to Jetpack AI assistant sidebar (#41161)

* Updates / clean up to Jetpack AI assistant sidebar * Buttons now have 100% width and are 40px tall * Updated text in various places * Added message that displays when a post has no content * Cleaned up spacing in a few places * Changed color of some text * Replacing custom warning with Notice component, move score below write brief controls * Switching to use isEditedPostEmpty instead of usePostContent, Write Brief styling cleanup * changelog * Fixing typo
Automattic · Jan 20, 2025 · 235e678 · 235e678
1 parent 485f5e9
commit 235e678
Show file tree

Hide file tree

Showing 8 changed files with 139 additions and 71 deletions.
diff --git a/projects/plugins/jetpack/changelog/update-jetpack-ai-sidebar-improvements b/projects/plugins/jetpack/changelog/update-jetpack-ai-sidebar-improvements
@@ -0,0 +1,10 @@
+Significance: patch
+Type: other
+
+Jetpack AI: Updates / clean up to Jetpack AI assistant sidebar
+* Buttons now have 100% width and are 40px tall
+* Updated text in various places
+* Added message that displays when a post has no content
+* Cleaned up spacing in a few places
+* Changed color of some text
+* Write Brief checkboxes are hidden by toggle now
diff --git a/...k/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx b/...k/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { JetpackEditorPanelLogo, useAnalytics } from '@automattic/jetpack-shared-extension-utils';
-import { PanelBody, PanelRow, BaseControl, ExternalLink } from '@wordpress/components';
+import { PanelBody, PanelRow, BaseControl, ExternalLink, Notice } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { PluginPrePublishPanel, PluginDocumentSettingPanel } from '@wordpress/edit-post';
@@ -81,6 +81,8 @@ const JetpackAndSettingsContent = ( {
 	// 	return postTypeObject?.viewable;
 	// }, [] );
 
+	const isPostEmpty = useSelect( select => select( editorStore ).isEditedPostEmpty(), [] );
+
 	const currentTitleOptimizationSectionLabel = __( 'Optimize Publishing', 'jetpack' );
 	const SEOTitleOptimizationSectionLabel = __( 'Optimize Title', 'jetpack' );
 	const titleOptimizationSectionLabel = isAITitleOptimizationKeywordsFeatureAvailable
@@ -110,24 +112,25 @@ const JetpackAndSettingsContent = ( {
 				</PanelRow>
 			) } */ }
 
+			{ isPostEmpty && (
+				<PanelRow className="jetpack-ai-sidebar__warning-content">
+					<Notice isDismissible={ false } status="warning">
+						{ __( 'The following features require content to work.', 'jetpack' ) }
+					</Notice>
+				</PanelRow>
+			) }
+
 			{ canWriteBriefBeEnabled() && isBreveAvailable && (
 				<PanelRow>
 					<BaseControl __nextHasNoMarginBottom={ true }>
 						<BaseControl.VisualLabel>
-							{ __( 'Write Brief with AI (BETA)', 'jetpack' ) }
+							{ __( 'Write Brief (Beta)', 'jetpack' ) }
 						</BaseControl.VisualLabel>
 						<Breve />
 					</BaseControl>
 				</PanelRow>
 			) }
 
-			<PanelRow className="jetpack-ai-sidebar__feature-section">
-				<BaseControl __nextHasNoMarginBottom={ true }>
-					<BaseControl.VisualLabel>{ __( 'AI Feedback', 'jetpack' ) }</BaseControl.VisualLabel>
-					<Feedback placement={ placement } busy={ false } disabled={ requireUpgrade } />
-				</BaseControl>
-			</PanelRow>
-
 			{ isAITitleOptimizationAvailable && (
 				<PanelRow className="jetpack-ai-sidebar__feature-section">
 					<BaseControl __nextHasNoMarginBottom={ true }>
@@ -136,16 +139,25 @@ const JetpackAndSettingsContent = ( {
 					</BaseControl>
 				</PanelRow>
 			) }
+
 			{ isAIFeaturedImageAvailable && (
 				<PanelRow className="jetpack-ai-sidebar__feature-section">
 					<BaseControl __nextHasNoMarginBottom={ true }>
 						<BaseControl.VisualLabel>
-							{ __( 'AI Featured Image', 'jetpack' ) }
+							{ __( 'Get Featured Image', 'jetpack' ) }
 						</BaseControl.VisualLabel>
 						<FeaturedImage busy={ false } disabled={ requireUpgrade } placement={ placement } />
 					</BaseControl>
 				</PanelRow>
 			) }
+
+			<PanelRow className="jetpack-ai-sidebar__feature-section">
+				<BaseControl __nextHasNoMarginBottom={ true }>
+					<BaseControl.VisualLabel>{ __( 'Get Feedback', 'jetpack' ) }</BaseControl.VisualLabel>
+					<Feedback placement={ placement } busy={ false } disabled={ requireUpgrade } />
+				</BaseControl>
+			</PanelRow>
+
 			{ requireUpgrade && ! isUsagePanelAvailable && (
 				<PanelRow>
 					<Upgrade placement={ placement } type={ upgradeType } upgradeUrl={ checkoutUrl } />
@@ -157,21 +169,21 @@ const JetpackAndSettingsContent = ( {
 				</PanelRow>
 			) }
 
-			<PanelRow>
-				<ExternalLink href="https://jetpack.com/redirect/?source=jetpack-ai-feedback">
-					{ __( 'Provide feedback', 'jetpack' ) }
+			<PanelRow className="jetpack-ai-sidebar__external-link">
+				<ExternalLink href={ productPageUrl }>
+					{ __( 'Learn more about Jetpack AI', 'jetpack' ) }
 				</ExternalLink>
 			</PanelRow>
 
-			<PanelRow>
-				<ExternalLink href={ productPageUrl }>
-					{ __( 'Learn more about Jetpack AI', 'jetpack' ) }
+			<PanelRow className="jetpack-ai-sidebar__external-link">
+				<ExternalLink href="https://jetpack.com/redirect/?source=jetpack-ai-feedback">
+					{ __( 'Give us feedback', 'jetpack' ) }
 				</ExternalLink>
 			</PanelRow>
 
-			<PanelRow>
+			<PanelRow className="jetpack-ai-sidebar__external-link">
 				<ExternalLink href="https://jetpack.com/redirect/?source=ai-guidelines">
-					{ __( 'AI Guidelines', 'jetpack' ) }
+					{ __( 'AI guidelines', 'jetpack' ) }
 				</ExternalLink>
 			</PanelRow>
 		</>

diff --git a/.../extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/style.scss b/.../extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/style.scss
@@ -1,9 +1,23 @@
 .jetpack-ai-sidebar__feature-section {
 	margin-bottom: 2em;
+	display: block;
 
 	p, p > * {
 		text-wrap: pretty;
 	}
+
+	button {
+		width: 100%;
+		justify-content: center;
+	}
+}
+
+.jetpack-ai-sidebar__external-link {
+	min-height: unset;
+}
+
+.jetpack-ai-assistant__help-text {
+	color: #757575;
 }
 
 .jetpack-ai-feedback__label {
@@ -14,6 +28,10 @@
 	}
 }
 
+.jetpack-ai-sidebar__warning-content {
+	padding-bottom: 12px;
+}
+
 .jetpack-ai__feedback-button {
 	.icon {
 		width: 20px;
@@ -22,3 +40,12 @@
 		margin-left: 4px;
 	}
 }
+
+.jetpack-ai__write-brief-card {
+	width: 100%;
+	margin-bottom: 12px;
+
+	p {
+		margin: 0;
+	}
+}
diff --git a/...ins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/featured-image.tsx b/...ins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/featured-image.tsx
@@ -374,12 +374,15 @@ export default function FeaturedImage( {
 			{ ( placement === PLACEMENT_JETPACK_SIDEBAR ||
 				placement === PLACEMENT_DOCUMENT_SETTINGS ) && (
 				<>
-					<p>{ __( 'Create and use an AI generated featured image for your post.', 'jetpack' ) }</p>
+					<p className="jetpack-ai-assistant__help-text">
+						{ __( 'Based on your post content.', 'jetpack' ) }
+					</p>
 					<Button
 						onClick={ handleModalOpen }
 						isBusy={ busy }
 						disabled={ disabled || notEnoughRequests }
 						variant="secondary"
+						__next40pxDefaultSize
 					>
 						{ __( 'Generate image', 'jetpack' ) }
 					</Button>

diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/breve.scss b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/breve.scss
@@ -1,8 +1,6 @@
 @import './features/features.colors';
 
 .jetpack-ai-proofread {
-	margin-bottom: 24px;
-
 	.components-checkbox-control {
 		&__input:not( :disabled ) {
 			@include features-colors( ( 'border-color' ) );
@@ -21,11 +19,6 @@
 		margin-bottom: 16px;
 	}
 
-	&__grade-label {
-		color: #757575;
-		margin-left: 12px;
-	}
-
 	&__help-text {
 		font-size: 12px;
 		color: #757575;
@@ -36,4 +29,10 @@
 		flex-direction: column;
 		gap: 12px;
 	}
+
+	&__grade-level-container {
+		svg {
+			fill: #757575;
+		}
+	}
 }
diff --git a/...ects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/controls.tsx b/...ects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/controls.tsx
@@ -8,10 +8,14 @@ import {
 	CheckboxControl,
 	ToggleControl,
 	Tooltip,
+	Card,
+	CardBody,
+	CardFooter,
 } from '@wordpress/components';
 import { compose, useDebounce } from '@wordpress/compose';
 import { useDispatch, useSelect, withSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import { Icon, help } from '@wordpress/icons';
 /**
  * External dependencies
  */
@@ -103,55 +107,64 @@ const Controls = ( { blocks, disabledFeatures } ) => {
 
 	return (
 		<div className="jetpack-ai-proofread">
-			<p> { __( 'Improve your writing with AI.', 'jetpack' ) }</p>
-			<PanelRow>
-				<BaseControl __nextHasNoMarginBottom={ true }>
-					<div className="grade-level-container">
-						{ gradeLevel === null ? (
-							<p className="jetpack-ai-proofread__help-text">
-								{ __( 'Write to see your grade level.', 'jetpack' ) }
-							</p>
-						) : (
-							<Tooltip text={ __( 'To make it easy to read, aim for level 8–12', 'jetpack' ) }>
-								<p>
-									{ gradeLevel }
-									<span className="jetpack-ai-proofread__grade-label">
-										{ __( 'Reading grade score', 'jetpack' ) }
-									</span>
-								</p>
-							</Tooltip>
-						) }
-					</div>
-				</BaseControl>
-			</PanelRow>
+			<p className="jetpack-ai-assistant__help-text">
+				{ __( 'Visualize issues and apply AI suggestions.', 'jetpack' ) }
+			</p>
 
 			<PanelRow>
 				<BaseControl __nextHasNoMarginBottom={ true }>
 					<ToggleControl
 						checked={ isProofreadEnabled }
 						onChange={ handleAiFeedbackToggle }
-						label={ __( 'Show suggestions', 'jetpack' ) }
+						label={ __( 'Show issues & suggestions', 'jetpack' ) }
 						__nextHasNoMarginBottom={ true }
 					/>
-					<div className="feature-checkboxes-container">
-						{ features.map(
-							feature =>
-								canWriteBriefFeatureBeEnabled( feature.config.name ) && (
-									<CheckboxControl
-										className={ isProofreadEnabled ? '' : 'is-disabled' }
-										disabled={ ! isProofreadEnabled }
-										data-breve-type={ feature.config.name }
-										key={ feature.config.name }
-										label={ feature.config.title }
-										checked={ ! disabledFeatures.includes( feature.config.name ) }
-										onChange={ handleToggleFeature( feature.config.name ) }
-										__nextHasNoMarginBottom={ true }
-									/>
-								)
-						) }
-					</div>
 				</BaseControl>
 			</PanelRow>
+
+			{ isProofreadEnabled && (
+				<PanelRow>
+					<Card size="small" className="jetpack-ai__write-brief-card">
+						<CardBody size="small">
+							<BaseControl __nextHasNoMarginBottom={ true }>
+								<div className="feature-checkboxes-container">
+									{ features.map(
+										feature =>
+											canWriteBriefFeatureBeEnabled( feature.config.name ) && (
+												<CheckboxControl
+													className={ isProofreadEnabled ? '' : 'is-disabled' }
+													disabled={ ! isProofreadEnabled }
+													data-breve-type={ feature.config.name }
+													key={ feature.config.name }
+													label={ feature.config.title }
+													checked={ ! disabledFeatures.includes( feature.config.name ) }
+													onChange={ handleToggleFeature( feature.config.name ) }
+													__nextHasNoMarginBottom={ true }
+												/>
+											)
+									) }
+								</div>
+							</BaseControl>
+						</CardBody>
+						<CardFooter size="small" className="jetpack-ai-proofread__grade-level-container">
+							{ gradeLevel === null ? (
+								<p className="jetpack-ai-proofread__help-text">
+									{ __( 'Write to see your grade level.', 'jetpack' ) }
+								</p>
+							) : (
+								<>
+									<div className="jetpack-ai-proofread__grade-label">
+										{ gradeLevel } { __( 'Reading grade score', 'jetpack' ) }
+									</div>
+									<Tooltip text={ __( 'To make it easy to read, aim for level 8–12', 'jetpack' ) }>
+										<Icon icon={ help } size={ 20 } />
+									</Tooltip>
+								</>
+							) }
+						</CardFooter>
+					</Card>
+				</PanelRow>
+			) }
 		</div>
 	);
 };

diff --git a/...ects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/feedback/index.tsx b/...ects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/feedback/index.tsx
@@ -98,12 +98,15 @@ export default function Feedback( {
 					<div className="ai-assistant-post-feedback__suggestion">{ suggestion }</div>
 				</AiAssistantModal>
 			) }
-			<p>{ __( 'Get feedback on content structure.', 'jetpack' ) }</p>
+			<p className="jetpack-ai-assistant__help-text">
+				{ __( 'Get feedback on content structure.', 'jetpack' ) }
+			</p>
 			<Button
 				onClick={ handleRequest }
 				variant="secondary"
 				disabled={ ! postContent || disabled }
 				isBusy={ busy }
+				__next40pxDefaultSize
 			>
 				{ __( 'Generate feedback', 'jetpack' ) }
 			</Button>

diff --git a/...ns/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/index.tsx b/...ns/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/index.tsx
@@ -83,17 +83,17 @@ export default function TitleOptimization( {
 	const SEOModalTitle = __( 'Improve title for SEO', 'jetpack' );
 	const modalTitle = isKeywordsFeatureAvailable ? SEOModalTitle : currentModalTitle;
 
-	const currentSidebarDescription = __( 'Use AI to optimize key details of your post.', 'jetpack' );
+	const currentSidebarDescription = __( 'Based on your post content.', 'jetpack' );
 	const SEOSidebarDescription = __(
-		'AI suggested titles based on your content and keywords for better SEO results.',
+		'Based on your post content and SEO best practices.',
 		'jetpack'
 	);
 	const sidebarDescription = isKeywordsFeatureAvailable
 		? SEOSidebarDescription
 		: currentSidebarDescription;
 
-	const currentSidebarButtonLabel = __( 'Improve title', 'jetpack' );
-	const SEOSidebarButtonLabel = __( 'Improve title for SEO', 'jetpack' );
+	const currentSidebarButtonLabel = __( 'Generate title options', 'jetpack' );
+	const SEOSidebarButtonLabel = __( 'Generate title options', 'jetpack' );
 	const sidebarButtonLabel = isKeywordsFeatureAvailable
 		? SEOSidebarButtonLabel
 		: currentSidebarButtonLabel;
@@ -228,12 +228,13 @@ export default function TitleOptimization( {
 
 	return (
 		<div>
-			<p>{ sidebarDescription }</p>
+			<p className="jetpack-ai-assistant__help-text">{ sidebarDescription }</p>
 			<Button
 				isBusy={ busy }
 				disabled={ ! postContent || disabled }
 				onClick={ handleTitleOptimization }
 				variant="secondary"
+				__next40pxDefaultSize
 			>
 				{ sidebarButtonLabel }
 			</Button>