Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 5 commits into
base: trunk
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
faf638c
Updates / clean up to Jetpack AI assistant sidebar
mwatson Jan 15, 2025
291002b
Replacing custom warning with Notice component, move score below writ…
mwatson Jan 16, 2025
8360654
Switching to use isEditedPostEmpty instead of usePostContent, Write B…
mwatson Jan 17, 2025
f7cdc8e
changelog
mwatson Jan 17, 2025
b9420f5
Fixing typo
mwatson Jan 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions projects/plugins/jetpack/changelog/update-jetpack-ai-sidebar-improvements
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
48 changes: 30 additions & 18 deletions ...k/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -73,6 +73,8 @@ const JetpackAndSettingsContent = ( {
const { productPageUrl } = useAiProductPage();
const isBreveAvailable = getBreveAvailability();

const isPostEmpty = useSelect( select => select( editorStore ).isEditedPostEmpty(), [] );

const currentTitleOptimizationSectionLabel = __( 'Optimize Publishing', 'jetpack' );
const SEOTitleOptimizationSectionLabel = __( 'Optimize Title', 'jetpack' );
const titleOptimizationSectionLabel = isAITitleOptimizationKeywordsFeatureAvailable
Expand Down Expand Up @@ -102,24 +104,25 @@ const JetpackAndSettingsContent = ( {
</PanelRow>
) }

{ isPostEmpty && (
<PanelRow className="jetpack-ai-sidebar__warning-content">
<Notice isDismissible={ false } status="warning">
{ __( 'The following features requie content to work.', 'jetpack' ) }
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typo on "require" 😅

</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 }>
Expand All @@ -128,16 +131,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 } />
Expand All @@ -149,21 +161,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>
</>
Expand Down
27 changes: 27 additions & 0 deletions .../extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -14,6 +28,10 @@
}
}

.jetpack-ai-sidebar__warning-content {
padding-bottom: 12px;
}

.jetpack-ai__feedback-button {
.icon {
width: 20px;
Expand All @@ -22,3 +40,12 @@
margin-left: 4px;
}
}

.jetpack-ai__write-brief-card {
width: 100%;
margin-bottom: 12px;

p {
margin: 0;
}
}
5 changes: 4 additions & 1 deletion ...ins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/featured-image.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
13 changes: 6 additions & 7 deletions projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/breve.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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' ) );
Expand All @@ -21,11 +19,6 @@
margin-bottom: 16px;
}

&__grade-label {
color: #757575;
margin-left: 12px;
}

&__help-text {
font-size: 12px;
color: #757575;
Expand All @@ -36,4 +29,10 @@
flex-direction: column;
gap: 12px;
}

&__grade-level-container {
svg {
fill: #757575;
}
}
}
91 changes: 52 additions & 39 deletions ...ects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/controls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down Expand Up @@ -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>
);
};
Expand Down
5 changes: 4 additions & 1 deletion ...ects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/feedback/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
11 changes: 6 additions & 5 deletions ...ns/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
Expand Down
Loading