Skip to content

Commit

Permalink
AI Proofread: Update interface for ignore button
Browse files Browse the repository at this point in the history
  • Loading branch information
@renatoagds
renatoagds committed Jul 30, 2024
1 parent 1bfd3eb commit 00b12ca
Show file tree
Hide file tree
Showing 4 changed files with 146 additions and 108 deletions.
7 changes: 7 additions & 0 deletions ...plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
/**
* Features
*/
Expand All @@ -15,14 +19,17 @@ const features: Array< BreveFeature > = [
config: COMPLEX_WORDS,
highlight: complexWords,
dictionary: dicComplex,
description: __( 'Use simple, direct words.', 'jetpack' ),
},
{
config: LONG_SENTENCES,
highlight: longSentences,
description: __( 'Long sentences are hard to read.', 'jetpack' ),
},
{
config: UNCONFIDENT_WORDS,
highlight: unconfidentWords,
description: __( 'Remove weasel words.', 'jetpack' ),
},
];

Expand Down
155 changes: 85 additions & 70 deletions ...ugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {
useSelect,
} from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { trash } from '@wordpress/icons';
import { registerFormatType, removeFormat, RichTextValue } from '@wordpress/rich-text';
import clsx from 'clsx';
import md5 from 'crypto-js/md5';
Expand Down Expand Up @@ -56,54 +55,64 @@ export default function Highlight() {
return { getBlock: selector.getBlock };
}, [] );

const { anchor, virtual, popoverOpen, id, feature, blockId, title, loading, suggestions } =
useSelect( select => {
const breveSelect = select( 'jetpack/ai-breve' ) as BreveSelect;

// Popover
const isPopoverHover = breveSelect.isPopoverHover();
const isHighlightHover = breveSelect.isHighlightHover();

// Anchor data
const { target: anchorEl, virtual: virtualEl } = breveSelect.getPopoverAnchor() ?? {
target: null,
virtual: null,
};
const anchorFeature = anchorEl?.getAttribute?.( 'data-type' ) as string;
const anchorId = anchorEl?.getAttribute?.( 'data-id' ) as string;
const anchorBlockId = anchorEl?.getAttribute?.( 'data-block' ) as string;

const config = features?.find?.( ftr => ftr.config.name === anchorFeature )?.config ?? {
name: '',
title: '',
};

// Suggestions
const loadingSuggestions = breveSelect.getSuggestionsLoading( {
feature: anchorFeature,
id: anchorId,
blockId: anchorBlockId,
} );
const {
anchor,
virtual,
popoverOpen,
id,
feature,
blockId,
title,
loading,
suggestions,
description,
} = useSelect( select => {
const breveSelect = select( 'jetpack/ai-breve' ) as BreveSelect;

// Popover
const isPopoverHover = breveSelect.isPopoverHover();
const isHighlightHover = breveSelect.isHighlightHover();

// Anchor data
const defaultAnchor = { target: null, virtual: null };
const { target: anchorEl, virtual: virtualEl } =
breveSelect.getPopoverAnchor() ?? defaultAnchor;
const anchorFeature = anchorEl?.getAttribute?.( 'data-type' ) as string;
const anchorId = anchorEl?.getAttribute?.( 'data-id' ) as string;
const anchorBlockId = anchorEl?.getAttribute?.( 'data-block' ) as string;

// Feature data
const featureData = features?.find?.( ftr => ftr.config.name === anchorFeature );
const featureConfig = featureData?.config ?? { name: '', title: '' };
const featureDescription = featureData?.description ?? '';
const featureTitle = featureConfig?.title ?? '';

// Suggestions
const loadingSuggestions = breveSelect.getSuggestionsLoading( {
feature: anchorFeature,
id: anchorId,
blockId: anchorBlockId,
} );

const suggestionsData = breveSelect.getSuggestions( {
feature: anchorFeature,
id: anchorId,
blockId: anchorBlockId,
} );
const suggestionsData = breveSelect.getSuggestions( {
feature: anchorFeature,
id: anchorId,
blockId: anchorBlockId,
} );

return {
config,
anchor: anchorEl,
virtual: virtualEl,
title: config?.title,
feature: anchorFeature,
id: anchorId,
blockId: anchorBlockId,
popoverOpen: isHighlightHover || isPopoverHover,
loading: loadingSuggestions,
suggestions: suggestionsData,
};
}, [] );
return {
title: featureTitle,
description: featureDescription,
anchor: anchorEl,
virtual: virtualEl,
feature: anchorFeature,
id: anchorId,
blockId: anchorBlockId,
popoverOpen: isHighlightHover || isPopoverHover,
loading: loadingSuggestions,
suggestions: suggestionsData,
};
}, [] );

const isPopoverOpen = popoverOpen && virtual;
const hasSuggestions = Boolean( suggestions?.suggestion );
Expand Down Expand Up @@ -190,6 +199,7 @@ export default function Highlight() {

const handleIgnoreSuggestion = () => {
ignoreSuggestion( feature, blockId, id );
setPopoverHover( false );
tracks.recordEvent( 'jetpack_ai_breve_ignore', {
feature: BREVE_FEATURE_NAME,
type: feature,
Expand All @@ -214,39 +224,44 @@ export default function Highlight() {
'has-suggestions': hasSuggestions,
} ) }
>
<div className="title">
<div className="color" data-type={ feature } />
<div>{ title }</div>
<div className="header-container">
<div className="title">
<div className="color" data-type={ feature } />
<div>{ title }</div>
</div>
{ ! hasSuggestions && (
<div className="action">
{ loading ? (
<div className="loading">
<Spinner />
</div>
) : (
<Button className="suggest" icon={ AiSVG } onClick={ handleSuggestions }>
{ __( 'Suggest', 'jetpack' ) }
</Button>
) }
</div>
) }
</div>
{ hasSuggestions ? (
<div className="suggestion-container">
<div className="bottom-container">
{ hasSuggestions && (
<Button variant="tertiary" onClick={ handleApplySuggestion }>
{ suggestions?.suggestion }
</Button>
<div className="helper">
{ __( 'Click on the suggestion to insert it.', 'jetpack' ) }
</div>
</div>
) : (
<div className="action">
{ loading ? (
<div className="loading">
<Spinner />
</div>
) }
<div className="helper">
{ hasSuggestions ? (
__( 'Click on the suggestion to insert it.', 'jetpack' )
) : (
<>
<Button
icon={ trash }
label={ __( 'Ignore suggestion', 'jetpack' ) }
onClick={ handleIgnoreSuggestion }
/>
<Button className="suggest" icon={ AiSVG } onClick={ handleSuggestions }>
{ __( 'Suggest', 'jetpack' ) }
{ description }
<Button variant="link" onClick={ handleIgnoreSuggestion }>
{ __( 'Dismiss', 'jetpack' ) }
</Button>
</>
) }
</div>
) }
</div>
</div>
</Popover>
) }
Expand Down
91 changes: 53 additions & 38 deletions ...gins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,70 +20,85 @@
.highlight-content {
align-items: center;
display: flex;
justify-content: space-between;
gap: 32px;
flex-direction: column;

&.has-suggestions {
align-items: flex-start;
flex-direction: column;
padding-top: 8px;
gap: 8px;
}

.title,
.action {
padding: 8px 12px;
}

.title {
.header-container {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
width: 100%;
justify-content: space-between;
gap: 32px;

.color {
width: 10px;
height: 10px;
border-radius: 50%;
@include features-colors( ( 'background-color' ) );
.title,
.action {
padding: 8px 12px;
}
}

.action {
font-size: 13px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
.title {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
font-size: 14px;
font-weight: 500;
white-space: nowrap;

.suggest.components-button {
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
height: unset;
.color {
width: 10px;
height: 10px;
border-radius: 50%;
@include features-colors( ( 'background-color' ) );
}
}

.action {
font-size: 13px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;

& > svg,
path {
fill: #0277a8;
.suggest.components-button {
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
height: unset;

& > svg,
path {
fill: #0277a8;
}
}
}
}

.suggestion-container {
.bottom-container {
display: flex;
flex-direction: column;
border-top: 1px solid #dcdcde;
width: 100%;

.helper {
padding: 8px;
padding: 4px 8px;
background-color: #f6f7f7;
white-space: nowrap;
color: #646970;
margin: 0 4px 4px 4px;
margin: 4px;
border-radius: 4px;
font-size: 12px;
display: flex;
justify-content: space-between;
align-items: center;

.components-button {
padding: 0px;
color: #646970;
}
}

.components-button.is-tertiary {
Expand Down
1 change: 1 addition & 0 deletions projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ export type BreveFeature = {
config: BreveFeatureConfig;
highlight: ( text: string ) => Array< HighlightedText >;
dictionary?: { [ key: string ]: string };
description: string;
};

export type HighlightedText = {
Expand Down

0 comments on commit 00b12ca

Please sign in to comment.