AI Proofread: Set suggestion

Automattic · Jul 15, 2024 · efd629a · efd629a
1 parent 737d99b
commit efd629a
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 62 deletions.
diff --git a/...ugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/index.tsx b/...ugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/index.tsx
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { rawHandler } from '@wordpress/blocks';
 import { Button, Popover, Spinner } from '@wordpress/components';
 import { select as globalSelect, useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -26,53 +27,46 @@ import type { RichTextFormatList } from '@wordpress/rich-text/build-types/types'
 // Setup the Breve highlights
 export default function Highlight() {
 	const { setPopoverHover, setSuggestions } = useDispatch( 'jetpack/ai-breve' ) as BreveDispatch;
-
-	const {
-		anchor,
-		virtual,
-		popoverOpen,
-		id,
-		feature,
-		identifier,
-		block,
-		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();
-		const anchorFeature = anchorEl?.getAttribute?.( 'data-type' );
-		const anchorId = anchorEl?.getAttribute?.( 'data-id' );
-		const anchorIdentifier = anchorEl?.getAttribute?.( 'data-identifier' );
-		const anchorBlock = anchorEl?.getAttribute?.( 'data-block' );
-		const config = features?.find?.( ftr => ftr.config.name === anchorFeature )?.config ?? {
-			name: '',
-			title: '',
-		};
-
-		// Suggestions
-		const loadingSuggestions = breveSelect.getSuggestionsLoading( anchorFeature, anchorId );
-		const suggestionsData = breveSelect.getSuggestions( anchorFeature, anchorId );
-
-		return {
-			config,
-			anchor: anchorEl,
-			virtual: virtualEl,
-			title: config?.title,
-			feature: anchorFeature,
-			id: anchorId,
-			identifier: anchorIdentifier,
-			block: anchorBlock,
-			popoverOpen: isHighlightHover || isPopoverHover,
-			loading: loadingSuggestions,
-			suggestions: suggestionsData,
-		};
-	}, [] );
+	const { updateBlockAttributes } = useDispatch( 'core/block-editor' );
+
+	const { anchor, virtual, popoverOpen, id, feature, block, 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' );
+			const anchorId = anchorEl?.getAttribute?.( 'data-id' );
+			const anchorBlock = anchorEl?.getAttribute?.( 'data-block' );
+			const config = features?.find?.( ftr => ftr.config.name === anchorFeature )?.config ?? {
+				name: '',
+				title: '',
+			};
+
+			// Suggestions
+			const loadingSuggestions = breveSelect.getSuggestionsLoading( anchorFeature, anchorId );
+			const suggestionsData = breveSelect.getSuggestions( anchorFeature, anchorId );
+
+			return {
+				config,
+				anchor: anchorEl,
+				virtual: virtualEl,
+				title: config?.title,
+				feature: anchorFeature,
+				id: anchorId,
+				block: anchorBlock,
+				popoverOpen: isHighlightHover || isPopoverHover,
+				loading: loadingSuggestions,
+				suggestions: suggestionsData,
+			};
+		}, [] );
 
 	const isPopoverOpen = popoverOpen && virtual;
 	const hasSuggestions = Boolean( suggestions?.suggestion );
@@ -88,18 +82,20 @@ export default function Highlight() {
 
 	const handleSuggestions = () => {
 		const sentence = ( anchor as HTMLElement )?.innerText;
-		const content = ( anchor as HTMLElement )?.parentElement?.innerText;
 
 		setSuggestions( {
 			id,
 			feature,
-			identifier,
 			sentence,
-			content,
-			blockClientId: block,
+			blockId: block,
 		} );
 	};
 
+	const handleApplySuggestion = () => {
+		const [ newBlock ] = rawHandler( { HTML: suggestions?.revisedText } );
+		updateBlockAttributes( block, newBlock.attributes );
+	};
+
 	return (
 		<>
 			{ isPopoverOpen && (
@@ -125,7 +121,9 @@ export default function Highlight() {
 						</div>
 						{ hasSuggestions ? (
 							<div className="suggestion-container">
-								<div className="suggestion">{ suggestions?.suggestion }</div>
+								<button className="suggestion" onClick={ handleApplySuggestion }>
+									{ suggestions?.suggestion }
+								</button>
 								<div className="helper">
 									{ __( 'Click on a suggestion to insert it.', 'jetpack' ) }
 								</div>

diff --git a/.../plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/actions.ts b/.../plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/actions.ts
@@ -52,12 +52,12 @@ export function setSuggestions( {
 	id,
 	feature,
 	sentence,
-	content,
+	blockId,
 }: {
 	id: string;
 	feature: string;
 	sentence: string;
-	content: string;
+	blockId: string;
 } ) {
 	return ( { dispatch } ) => {
 		dispatch( {
@@ -71,7 +71,7 @@ export function setSuggestions( {
 			getRequestMessages( {
 				feature,
 				sentence,
-				paragraph: content,
+				blockId,
 			} ),
 			{
 				feature: 'jetpack-ai-breve',

diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/types.ts b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/types.ts
@@ -61,10 +61,8 @@ export type BreveDispatch = {
 	setSuggestions: ( suggestions: {
 		id: string;
 		feature: string;
-		identifier: string;
 		sentence: string;
-		content: string;
-		blockClientId: string;
+		blockId: string;
 	} ) => void;
 };
 

diff --git a/...tpack/extensions/plugins/ai-assistant-plugin/components/breve/utils/getRequestMessages.ts b/...tpack/extensions/plugins/ai-assistant-plugin/components/breve/utils/getRequestMessages.ts
@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+import { select } from '@wordpress/data';
 import features from '../features/index.js';
 
 // Map of types to the corresponding AI Assistant request type.
@@ -13,7 +14,9 @@ const requestTypeMap = {
 	// adjective: 'breve-adjective',
 };
 
-export const getRequestMessages = ( { feature, sentence, paragraph } ) => {
+export const getRequestMessages = ( { feature, sentence, blockId } ) => {
+	const block = select( 'core/block-editor' ).getBlock( blockId );
+	const html = block?.originalContent;
 	const dictionary = features?.find?.( ftr => ftr.config.name === feature )?.dictionary || {};
 	const replacement = dictionary[ sentence.toLowerCase() ] || null;
 
@@ -22,10 +25,9 @@ export const getRequestMessages = ( { feature, sentence, paragraph } ) => {
 			role: 'jetpack-ai' as const,
 			context: {
 				type: requestTypeMap[ feature ],
-				target: sentence,
-				sentence: paragraph,
+				sentence,
 				replacement,
-				paragraph,
+				html,
 			},
 		},
 	];