Write Brief: Add language selector

projects/plugins/jetpack/changelog/update-jetpack-ai-write-brief-language-selector

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Write Brief: Add language selector

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/controls.tsx

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
+import { SelectControl } from '@wordpress/components';
 import {
 	BaseControl,
 	PanelRow,
@@ -40,14 +41,24 @@ export const useInit = init => {
 
 const Controls = ( { blocks, disabledFeatures } ) => {
 	const [ gradeLevel, setGradeLevel ] = useState< string | null >( null );
-	const { toggleFeature, toggleProofread, setPopoverHover, setHighlightHover, setPopoverAnchor } =
-		useDispatch( 'jetpack/ai-breve' );
+	const {
+		toggleFeature,
+		toggleProofread,
+		setPopoverHover,
+		setHighlightHover,
+		setPopoverAnchor,
+		setLanguage,
+	} = useDispatch( 'jetpack/ai-breve' );
 	const { tracks } = useAnalytics();
 
-	const isProofreadEnabled = useSelect(
-		select => ( select( 'jetpack/ai-breve' ) as BreveSelect ).isProofreadEnabled(),
-		[]
-	);
+	const { isProofreadEnabled, language } = useSelect( select => {
+		const selectors: BreveSelect = select( 'jetpack/ai-breve' );
+
+		return {
+			isProofreadEnabled: selectors.isProofreadEnabled(),
+			language: selectors.getLanguage(),
+		};
+	}, [] );
 
 	const updateGradeLevel = useCallback( () => {
 		if ( ! isProofreadEnabled ) {
@@ -104,6 +115,16 @@ const Controls = ( { blocks, disabledFeatures } ) => {
 	return (
 		<div className="jetpack-ai-proofread">
 			<p> { __( 'Improve your writing with AI.', 'jetpack' ) }</p>
+			<SelectControl
+				__nextHasNoMarginBottom
+				label="Language"
+				value={ language }
+				options={ [
+					{ label: 'English (US)', value: 'en' },
+					{ label: 'English (GB)', value: 'en-gb' },
+				] }
+				onChange={ setLanguage }
+			/>
 			<PanelRow>
 				<BaseControl>
 					<div className="grade-level-container">

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/spelling-mistakes/index.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { dispatch } from '@wordpress/data';
+import { dispatch, select } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import debugFactory from 'debug';
 import nspell from 'nspell';
@@ -19,6 +19,8 @@ import type {
 	HighlightedText,
 	SpellChecker,
 	BreveDispatch,
+	BreveLanguage,
+	BreveSelect,
 } from '../../types';
 
 const debug = debugFactory( 'jetpack-ai-breve:spelling-mistakes' );
@@ -36,7 +38,12 @@ const contextRequests: {
 	[ key: string ]: { loading: boolean; loaded: boolean; failed: boolean };
 } = {};
 
-const fetchContext = async ( language: string ) => {
+const getLanguage = () => {
+	const selector = select( 'jetpack/ai-breve' ) as BreveSelect;
+	return selector.getLanguage();
+};
+
+const fetchContext = async ( language: BreveLanguage ) => {
 	debug( 'Fetching spelling context from the server' );
 
 	const { setDictionaryLoading } = dispatch( 'jetpack/ai-breve' ) as BreveDispatch;
@@ -63,7 +70,7 @@ const fetchContext = async ( language: string ) => {
 	}
 };
 
-const getContext = ( language: string ) => {
+const getContext = ( language: BreveLanguage ) => {
 	// First check if the context is already defined in local storage
 	const storedContext = localStorage.getItem( `jetpack-ai-breve-spelling-context-${ language }` );
 	let context: SpellingDictionaryContext | null = null;
@@ -80,7 +87,7 @@ const getContext = ( language: string ) => {
 	return context;
 };
 
-export const getSpellChecker = ( { language = 'en' }: { language?: string } = {} ) => {
+export const getSpellChecker = ( { language = 'en' }: { language?: BreveLanguage } = {} ) => {
 	if ( spellCheckers[ language ] ) {
 		return spellCheckers[ language ];
 	}
@@ -114,10 +121,8 @@ export const getSpellChecker = ( { language = 'en' }: { language?: string } = {}
 	return spellCheckers[ language ];
 };
 
-export const addTextToDictionary = (
-	text: string,
-	{ language = 'en' }: { language?: string } = {}
-) => {
+export const addTextToDictionary = ( text: string ) => {
+	const language = getLanguage();
 	const spellChecker = getSpellChecker( { language } );
 	const { reloadDictionary } = dispatch( 'jetpack/ai-breve' ) as BreveDispatch;
 
@@ -152,10 +157,8 @@ export const addTextToDictionary = (
 	debug( 'Added text to the dictionary', text );
 };
 
-export const suggestSpellingFixes = (
-	text: string,
-	{ language = 'en' }: { language?: string } = {}
-) => {
+export const suggestSpellingFixes = ( text: string ) => {
+	const language = getLanguage();
 	const spellChecker = getSpellChecker( { language } );
 
 	if ( ! spellChecker || ! text ) {
@@ -174,7 +177,9 @@ export const suggestSpellingFixes = (
 
 export default function spellingMistakes( text: string ): Array< HighlightedText > {
 	const highlightedTexts: Array< HighlightedText > = [];
-	const spellChecker = getSpellChecker();
+	const language = getLanguage();
+
+	const spellChecker = getSpellChecker( { language } );
 
 	if ( ! spellChecker ) {
 		return highlightedTexts;

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/actions.ts

@@ -4,7 +4,7 @@
 import { askQuestionSync } from '@automattic/jetpack-ai-client';
 import { select } from '@wordpress/data';
 import { BREVE_FEATURE_NAME } from '../constants';
-import { Anchor } from '../types';
+import { Anchor, BreveLanguage } from '../types';
 import { getRequestMessages } from '../utils/get-request-messages';
 
 // ACTIONS
@@ -30,6 +30,13 @@ export function setPopoverAnchor( anchor: Anchor ) {
 	};
 }
 
+export function setLanguage( language: BreveLanguage ) {
+	return {
+		type: 'SET_LANGUAGE',
+		language,
+	};
+}
+
 export function toggleProofread( force?: boolean ) {
 	const current = select( 'jetpack/ai-breve' ).isProofreadEnabled();
 	const enabled = force === undefined ? ! current : force;

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/reducer.ts

@@ -9,7 +9,7 @@ import features from '../features';
 /**
  * Types
  */
-import type { Anchor, BreveState } from '../types';
+import type { Anchor, BreveLanguage, BreveState } from '../types';
 
 const enabledFromLocalStorage = window.localStorage.getItem( 'jetpack-ai-breve-enabled' );
 const disabledFeaturesFromLocalStorage = window.localStorage.getItem(
@@ -27,7 +27,13 @@ const initialConfiguration = {
 
 export function configuration(
 	state: BreveState[ 'configuration' ] = initialConfiguration,
-	action: { type: string; enabled?: boolean; feature?: string; loading?: boolean }
+	action: {
+		type: string;
+		enabled?: boolean;
+		feature?: string;
+		loading?: boolean;
+		language?: BreveLanguage;
+	}
 ) {
 	switch ( action.type ) {
 		case 'SET_PROOFREAD_ENABLED': {
@@ -40,6 +46,13 @@ export function configuration(
 			};
 		}
 
+		case 'SET_LANGUAGE': {
+			return {
+				...state,
+				language: action.language,
+			};
+		}
+
 		case 'ENABLE_FEATURE': {
 			const disabled = ( state.disabled ?? [] ).filter( feature => feature !== action.feature );
 			window.localStorage.setItem(

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/selectors.ts

@@ -43,6 +43,10 @@ export function getReloadFlag( state: BreveState ) {
 	return state.configuration?.reload;
 }
 
+export function getLanguage( state: BreveState ) {
+	return state.configuration?.language;
+}
+
 // Suggestions
 
 export function getBlockMd5( state: BreveState, blockId: string ) {

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/types.ts

@@ -20,6 +20,7 @@ export type BreveState = {
 		disabled?: Array< string >;
 		loading?: Array< string >;
 		reload?: boolean;
+		language?: BreveLanguage;
 	};
 	suggestions?: {
 		[ key: string ]: {
@@ -46,6 +47,7 @@ export type BreveSelect = {
 	isFeatureDictionaryLoading: ( feature: string ) => boolean;
 	getDisabledFeatures: () => Array< string >;
 	getBlockMd5: ( blockId: string ) => string;
+	getLanguage: () => BreveLanguage;
 	getSuggestionsLoading: ( {
 		feature,
 		id,
@@ -142,3 +144,5 @@ export type FeatureControl = {
 	'min-jetpack-version': string;
 	[ key: string ]: FeatureControl | boolean | string;
 };
+
+export type BreveLanguage = 'en' | 'en-gb';