@automattic/jetpack-ai-client 0.26.0 → 0.26.2

package/CHANGELOG.md

@@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.26.2] - 2025-02-17
+### Added
+- Jetpack AI: Adding translation support using Chrome's Gemini AI mini. [#41724]
+
+## [0.26.1] - 2025-02-11
+### Changed
+- Update dependencies. [#38958]
+
 ## [0.26.0] - 2025-02-10
 ### Added
 - Add shared components from ai-assistant-plugin [#41078]
@@ -517,6 +525,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - AI Client: stop using smart document visibility handling on the fetchEventSource library, so it does not restart the completion when changing tabs. [#32004]
 - Updated package dependencies. [#31468] [#31659] [#31785]
 
+[0.26.2]: https://github.com/Automattic/jetpack-ai-client/compare/v0.26.1...v0.26.2
+[0.26.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.26.0...v0.26.1
 [0.26.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.25.7...v0.26.0
 [0.25.7]: https://github.com/Automattic/jetpack-ai-client/compare/v0.25.6...v0.25.7
 [0.25.6]: https://github.com/Automattic/jetpack-ai-client/compare/v0.25.5...v0.25.6

package/build/chrome-ai/factory.d.ts

@@ -0,0 +1,9 @@
+import { PromptProp } from '../types.js';
+import ChromeAISuggestionsEventSource from './suggestions.js';
+/**
+ * This will return an instance of ChromeAISuggestionsEventSource or false.
+ *
+ * @param promptArg - The messages array of the prompt.
+ * @return ChromeAISuggestionsEventSource | bool
+ */
+export default function ChromeAIFactory(promptArg: PromptProp): Promise<false | ChromeAISuggestionsEventSource>;

package/build/chrome-ai/factory.js

@@ -0,0 +1,99 @@
+import { getJetpackExtensionAvailability } from '@automattic/jetpack-shared-extension-utils';
+import { PROMPT_TYPE_CHANGE_LANGUAGE,
+//PROMPT_TYPE_SUMMARIZE,
+ } from '../constants.js';
+import ChromeAISuggestionsEventSource from './suggestions.js';
+/**
+ * Check for the feature flag.
+ *
+ * @return boolean
+ */
+function shouldUseChromeAI() {
+    return getJetpackExtensionAvailability('ai-use-chrome-ai-sometimes').available === true;
+}
+/**
+ * This will return an instance of ChromeAISuggestionsEventSource or false.
+ *
+ * @param promptArg - The messages array of the prompt.
+ * @return ChromeAISuggestionsEventSource | bool
+ */
+export default async function ChromeAIFactory(promptArg) {
+    if (!shouldUseChromeAI()) {
+        return false;
+    }
+    const context = {
+        content: '',
+        language: '',
+    };
+    let promptType = '';
+    if (Array.isArray(promptArg)) {
+        for (let i = 0; i < promptArg.length; i++) {
+            const prompt = promptArg[i];
+            if (prompt.content) {
+                context.content = prompt.content;
+            }
+            if (!('context' in prompt)) {
+                continue;
+            }
+            const promptContext = prompt.context;
+            if (promptContext.type) {
+                promptType = promptContext.type;
+            }
+            if (promptContext.language) {
+                context.language = promptContext.language;
+            }
+            if (promptContext.content) {
+                context.content = promptContext.content;
+            }
+        }
+    }
+    if (promptType.startsWith('ai-assistant-change-language')) {
+        const [language] = context.language.split(' ');
+        if (!('translation' in self) ||
+            !self.translation.createTranslator ||
+            !self.translation.canTranslate) {
+            return false;
+        }
+        const languageOpts = {
+            sourceLanguage: 'en',
+            targetLanguage: language,
+        };
+        // see if we can detect the source language
+        if ('ai' in self && self.ai.languageDetector) {
+            const detector = await self.ai.languageDetector.create();
+            const confidences = await detector.detect(context.content);
+            for (const confidence of confidences) {
+                // 75% confidence is just a value that was picked. Generally
+                // 80% of higher is pretty safe, but the source language is
+                // required for the translator to work at all, which is also
+                // why en is the default language.
+                if (confidence.confidence > 0.75) {
+                    languageOpts.sourceLanguage = confidence.detectedLanguage;
+                    break;
+                }
+            }
+        }
+        const canTranslate = await self.translation.canTranslate(languageOpts);
+        if (canTranslate === 'no') {
+            return false;
+        }
+        const chromeAI = new ChromeAISuggestionsEventSource({
+            content: context.content,
+            promptType: PROMPT_TYPE_CHANGE_LANGUAGE,
+            options: languageOpts,
+        });
+        return chromeAI;
+    }
+    // TODO
+    if (promptType.startsWith('ai-assistant-summarize')) {
+        /*
+        return new ChromeAISuggestionsEventSource({
+            content: "",
+            promptType: PROMPT_TYPE_SUMMARIZE,
+            options: {},
+        } );
+        */
+        return false;
+    }
+    return false;
+}

package/build/chrome-ai/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ChromeAIFactory } from './factory.js';
+export { default as ChromeAISuggestionsEventSource } from './suggestions.js';

package/build/chrome-ai/index.js

@@ -0,0 +1,2 @@
+export { default as ChromeAIFactory } from './factory.js';
+export { default as ChromeAISuggestionsEventSource } from './suggestions.js';

package/build/chrome-ai/suggestions.d.ts

@@ -0,0 +1,35 @@
+import { EventSourceMessage } from '@microsoft/fetch-event-source';
+import { AiModelTypeProp } from '../types.js';
+type ChromeAISuggestionsEventSourceConstructorArgs = {
+    content: string;
+    promptType: string;
+    options?: {
+        postId?: number | string;
+        feature?: 'ai-assistant-experimental' | string | undefined;
+        sourceLanguage?: string;
+        targetLanguage?: string;
+        functions?: Array<object>;
+        model?: AiModelTypeProp;
+    };
+};
+type FunctionCallProps = {
+    name?: string;
+    arguments?: string;
+};
+export default class ChromeAISuggestionsEventSource extends EventTarget {
+    fullMessage: string;
+    fullFunctionCall: FunctionCallProps;
+    isPromptClear: boolean;
+    controller: AbortController;
+    errorUnclearPromptTriggered: boolean;
+    constructor(data: ChromeAISuggestionsEventSourceConstructorArgs);
+    initSource({ content, promptType, options, }: ChromeAISuggestionsEventSourceConstructorArgs): void;
+    initEventSource(): Promise<void>;
+    close(): void;
+    checkForUnclearPrompt(): void;
+    processEvent(e: EventSourceMessage): void;
+    processErrorEvent(e: any): void;
+    translate(text: string, target: string, source?: string): Promise<void>;
+    summarize(text: string): Promise<string>;
+}
+export {};

package/build/chrome-ai/suggestions.js

@@ -0,0 +1,87 @@
+import { PROMPT_TYPE_CHANGE_LANGUAGE, PROMPT_TYPE_SUMMARIZE } from '../constants.js';
+import { getErrorData } from '../hooks/use-ai-suggestions/index.js';
+import { renderHTMLFromMarkdown, renderMarkdownFromHTML } from '../libs/markdown/index.js';
+import { ERROR_RESPONSE, ERROR_NETWORK } from '../types.js';
+export default class ChromeAISuggestionsEventSource extends EventTarget {
+    fullMessage;
+    fullFunctionCall;
+    isPromptClear;
+    controller;
+    errorUnclearPromptTriggered;
+    constructor(data) {
+        super();
+        this.fullMessage = '';
+        this.fullFunctionCall = {
+            name: '',
+            arguments: '',
+        };
+        this.isPromptClear = false;
+        this.controller = new AbortController();
+        this.initSource(data);
+    }
+    initSource({ content, promptType, options = {}, }) {
+        if (promptType === PROMPT_TYPE_CHANGE_LANGUAGE) {
+            this.translate(content, options.targetLanguage, options.sourceLanguage);
+        }
+        if (promptType === PROMPT_TYPE_SUMMARIZE) {
+            this.summarize(content);
+        }
+    }
+    async initEventSource() { }
+    close() { }
+    checkForUnclearPrompt() { }
+    processEvent(e) {
+        let data;
+        try {
+            data = JSON.parse(e.data);
+        }
+        catch (err) {
+            this.processErrorEvent(err);
+            return;
+        }
+        if (e.event === 'translation') {
+            this.dispatchEvent(new CustomEvent('suggestion', { detail: data.message }));
+        }
+        if (data.complete) {
+            this.dispatchEvent(new CustomEvent('done', { detail: data.message }));
+        }
+    }
+    processErrorEvent(e) {
+        // Dispatch a generic network error event
+        this.dispatchEvent(new CustomEvent(ERROR_NETWORK, { detail: e }));
+        this.dispatchEvent(new CustomEvent(ERROR_RESPONSE, {
+            detail: getErrorData(ERROR_NETWORK),
+        }));
+    }
+    // use the Chrome AI translator
+    async translate(text, target, source = '') {
+        if (!('translation' in self)) {
+            return;
+        }
+        const translator = await self.translation.createTranslator({
+            sourceLanguage: source,
+            targetLanguage: target,
+        });
+        if (!translator) {
+            return;
+        }
+        try {
+            const translation = await translator.translate(renderHTMLFromMarkdown({ content: text }));
+            this.processEvent({
+                id: '',
+                event: 'translation',
+                data: JSON.stringify({
+                    message: renderMarkdownFromHTML({ content: translation }),
+                    complete: true,
+                }),
+            });
+        }
+        catch (error) {
+            this.processErrorEvent(error);
+        }
+    }
+    // TODO
+    async summarize(text) {
+        return text;
+    }
+}

package/build/hooks/use-ai-suggestions/index.js

@@ -7,6 +7,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import askQuestion from '../../ask-question/index.js';
+import ChromeAIFactory from '../../chrome-ai/factory.js';
 import { ERROR_CONTEXT_TOO_LARGE, ERROR_MODERATION, ERROR_NETWORK, ERROR_QUOTA_EXCEEDED, ERROR_SERVICE_UNAVAILABLE, ERROR_UNCLEAR_PROMPT, ERROR_RESPONSE, } from '../../types.js';
 /**
  * Get the error data for a given error code.
@@ -129,7 +130,14 @@ export default function useAiSuggestions({ prompt, autoRequest = false, askQuest
         setError(undefined);
         // Set the request status.
         setRequestingState('requesting');
-        eventSourceRef.current = await askQuestion(promptArg, options);
+        // check if we can (or should) use Chrome AI
+        const chromeAI = await ChromeAIFactory(promptArg);
+        if (chromeAI !== false) {
+            eventSourceRef.current = chromeAI;
+        }
+        else {
+            eventSourceRef.current = await askQuestion(promptArg, options);
+        }
         if (!eventSourceRef?.current) {
             return;
         }

package/build/index.d.ts

@@ -20,3 +20,7 @@ export * from './types.js';
 export * from './libs/index.js';
 export * from './constants.js';
 export * from './logo-generator/index.js';
+/**
+ * Chrome AI
+ */
+export * from './chrome-ai/index.js';

package/build/index.js

@@ -47,3 +47,7 @@ export * from './constants.js';
  * Logo Generator
  */
 export * from './logo-generator/index.js';
+/**
+ * Chrome AI
+ */
+export * from './chrome-ai/index.js';

package/build/types.d.ts

@@ -51,3 +51,29 @@ export interface BlockEditorStore {
         [key in keyof typeof BlockEditorSelectors]: (typeof BlockEditorSelectors)[key];
     };
 }
+declare global {
+    interface Window {
+        translation?: {
+            canTranslate: (options: {
+                sourceLanguage: string;
+                targetLanguage: string;
+            }) => Promise<'no' | 'yes' | string>;
+            createTranslator: (options: {
+                sourceLanguage: string;
+                targetLanguage: string;
+            }) => Promise<{
+                translate: (text: string) => Promise<string>;
+            }>;
+        };
+        ai?: {
+            languageDetector: {
+                create: () => Promise<{
+                    detect: (text: string) => Promise<{
+                        detectedLanguage: string;
+                        confidence: number;
+                    }[]>;
+                }>;
+            };
+        };
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.26.0",
+	"version": "0.26.2",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -45,9 +45,9 @@
 	"types": "./build/index.d.ts",
 	"dependencies": {
 		"@automattic/jetpack-base-styles": "^0.6.42",
-		"@automattic/jetpack-components": "^0.66.0",
-		"@automattic/jetpack-connection": "^0.36.5",
-		"@automattic/jetpack-shared-extension-utils": "^0.17.0",
+		"@automattic/jetpack-components": "^0.67.0",
+		"@automattic/jetpack-connection": "^0.36.7",
+		"@automattic/jetpack-shared-extension-utils": "^0.17.2",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/jest": "29.5.14",
 		"@types/react": "18.3.18",

package/src/chrome-ai/factory.ts

@@ -0,0 +1,129 @@
+import { getJetpackExtensionAvailability } from '@automattic/jetpack-shared-extension-utils';
+import {
+	PROMPT_TYPE_CHANGE_LANGUAGE,
+	//PROMPT_TYPE_SUMMARIZE,
+} from '../constants.js';
+import { PromptProp, PromptItemProps } from '../types.js';
+import ChromeAISuggestionsEventSource from './suggestions.js';
+
+/**
+ * Check for the feature flag.
+ *
+ * @return boolean
+ */
+function shouldUseChromeAI() {
+	return getJetpackExtensionAvailability( 'ai-use-chrome-ai-sometimes' ).available === true;
+}
+
+interface PromptContext {
+	type?: string;
+	content?: string;
+	language?: string;
+}
+
+/**
+ * This will return an instance of ChromeAISuggestionsEventSource or false.
+ *
+ * @param promptArg - The messages array of the prompt.
+ * @return ChromeAISuggestionsEventSource | bool
+ */
+export default async function ChromeAIFactory( promptArg: PromptProp ) {
+	if ( ! shouldUseChromeAI() ) {
+		return false;
+	}
+
+	const context = {
+		content: '',
+		language: '',
+	};
+	let promptType = '';
+	if ( Array.isArray( promptArg ) ) {
+		for ( let i = 0; i < promptArg.length; i++ ) {
+			const prompt: PromptItemProps = promptArg[ i ];
+			if ( prompt.content ) {
+				context.content = prompt.content;
+			}
+
+			if ( ! ( 'context' in prompt ) ) {
+				continue;
+			}
+
+			const promptContext: PromptContext = prompt.context;
+
+			if ( promptContext.type ) {
+				promptType = promptContext.type;
+			}
+
+			if ( promptContext.language ) {
+				context.language = promptContext.language;
+			}
+
+			if ( promptContext.content ) {
+				context.content = promptContext.content;
+			}
+		}
+	}
+
+	if ( promptType.startsWith( 'ai-assistant-change-language' ) ) {
+		const [ language ] = context.language.split( ' ' );
+
+		if (
+			! ( 'translation' in self ) ||
+			! self.translation.createTranslator ||
+			! self.translation.canTranslate
+		) {
+			return false;
+		}
+
+		const languageOpts = {
+			sourceLanguage: 'en',
+			targetLanguage: language,
+		};
+
+		// see if we can detect the source language
+		if ( 'ai' in self && self.ai.languageDetector ) {
+			const detector = await self.ai.languageDetector.create();
+			const confidences = await detector.detect( context.content );
+
+			for ( const confidence of confidences ) {
+				// 75% confidence is just a value that was picked. Generally
+				// 80% of higher is pretty safe, but the source language is
+				// required for the translator to work at all, which is also
+				// why en is the default language.
+				if ( confidence.confidence > 0.75 ) {
+					languageOpts.sourceLanguage = confidence.detectedLanguage;
+					break;
+				}
+			}
+		}
+
+		const canTranslate = await self.translation.canTranslate( languageOpts );
+
+		if ( canTranslate === 'no' ) {
+			return false;
+		}
+
+		const chromeAI = new ChromeAISuggestionsEventSource( {
+			content: context.content,
+			promptType: PROMPT_TYPE_CHANGE_LANGUAGE,
+			options: languageOpts,
+		} );
+
+		return chromeAI;
+	}
+
+	// TODO
+	if ( promptType.startsWith( 'ai-assistant-summarize' ) ) {
+		/*
+		return new ChromeAISuggestionsEventSource({
+			content: "",
+			promptType: PROMPT_TYPE_SUMMARIZE,
+			options: {},
+		} );
+		*/
+
+		return false;
+	}
+
+	return false;
+}

package/src/chrome-ai/index.ts

@@ -0,0 +1,2 @@
+export { default as ChromeAIFactory } from './factory.js';
+export { default as ChromeAISuggestionsEventSource } from './suggestions.js';

package/src/chrome-ai/suggestions.ts

@@ -0,0 +1,139 @@
+import { EventSourceMessage } from '@microsoft/fetch-event-source';
+import { PROMPT_TYPE_CHANGE_LANGUAGE, PROMPT_TYPE_SUMMARIZE } from '../constants.js';
+import { getErrorData } from '../hooks/use-ai-suggestions/index.js';
+import { renderHTMLFromMarkdown, renderMarkdownFromHTML } from '../libs/markdown/index.js';
+import { AiModelTypeProp, ERROR_RESPONSE, ERROR_NETWORK } from '../types.js';
+
+type ChromeAISuggestionsEventSourceConstructorArgs = {
+	content: string;
+	promptType: string;
+	options?: {
+		postId?: number | string;
+		feature?: 'ai-assistant-experimental' | string | undefined;
+
+		// translation
+		sourceLanguage?: string;
+		targetLanguage?: string;
+
+		// not sure if we need these
+		functions?: Array< object >;
+		model?: AiModelTypeProp;
+	};
+};
+
+type ChromeAIEvent = {
+	type: string;
+	message: string;
+	complete?: boolean;
+};
+
+type FunctionCallProps = {
+	name?: string;
+	arguments?: string;
+};
+
+export default class ChromeAISuggestionsEventSource extends EventTarget {
+	fullMessage: string;
+	fullFunctionCall: FunctionCallProps;
+	isPromptClear: boolean;
+	controller: AbortController;
+
+	errorUnclearPromptTriggered: boolean;
+
+	constructor( data: ChromeAISuggestionsEventSourceConstructorArgs ) {
+		super();
+		this.fullMessage = '';
+		this.fullFunctionCall = {
+			name: '',
+			arguments: '',
+		};
+		this.isPromptClear = false;
+
+		this.controller = new AbortController();
+
+		this.initSource( data );
+	}
+
+	initSource( {
+		content,
+		promptType,
+		options = {},
+	}: ChromeAISuggestionsEventSourceConstructorArgs ) {
+		if ( promptType === PROMPT_TYPE_CHANGE_LANGUAGE ) {
+			this.translate( content, options.targetLanguage, options.sourceLanguage );
+		}
+
+		if ( promptType === PROMPT_TYPE_SUMMARIZE ) {
+			this.summarize( content );
+		}
+	}
+
+	async initEventSource() {}
+
+	close() {}
+
+	checkForUnclearPrompt() {}
+
+	processEvent( e: EventSourceMessage ) {
+		let data: ChromeAIEvent;
+		try {
+			data = JSON.parse( e.data );
+		} catch ( err ) {
+			this.processErrorEvent( err );
+			return;
+		}
+
+		if ( e.event === 'translation' ) {
+			this.dispatchEvent( new CustomEvent( 'suggestion', { detail: data.message } ) );
+		}
+
+		if ( data.complete ) {
+			this.dispatchEvent( new CustomEvent( 'done', { detail: data.message } ) );
+		}
+	}
+
+	processErrorEvent( e ) {
+		// Dispatch a generic network error event
+		this.dispatchEvent( new CustomEvent( ERROR_NETWORK, { detail: e } ) );
+		this.dispatchEvent(
+			new CustomEvent( ERROR_RESPONSE, {
+				detail: getErrorData( ERROR_NETWORK ),
+			} )
+		);
+	}
+
+	// use the Chrome AI translator
+	async translate( text: string, target: string, source: string = '' ) {
+		if ( ! ( 'translation' in self ) ) {
+			return;
+		}
+
+		const translator = await self.translation.createTranslator( {
+			sourceLanguage: source,
+			targetLanguage: target,
+		} );
+
+		if ( ! translator ) {
+			return;
+		}
+
+		try {
+			const translation = await translator.translate( renderHTMLFromMarkdown( { content: text } ) );
+			this.processEvent( {
+				id: '',
+				event: 'translation',
+				data: JSON.stringify( {
+					message: renderMarkdownFromHTML( { content: translation } ),
+					complete: true,
+				} ),
+			} );
+		} catch ( error ) {
+			this.processErrorEvent( error );
+		}
+	}
+
+	// TODO
+	async summarize( text: string ) {
+		return text;
+	}
+}

package/src/hooks/use-ai-suggestions/index.ts

@@ -7,6 +7,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import askQuestion from '../../ask-question/index.js';
+import ChromeAIFactory from '../../chrome-ai/factory.js';
 import {
 	ERROR_CONTEXT_TOO_LARGE,
 	ERROR_MODERATION,
@@ -314,7 +315,14 @@ export default function useAiSuggestions( {
 			// Set the request status.
 			setRequestingState( 'requesting' );
 
-			eventSourceRef.current = await askQuestion( promptArg, options );
+			// check if we can (or should) use Chrome AI
+			const chromeAI = await ChromeAIFactory( promptArg );
+
+			if ( chromeAI !== false ) {
+				eventSourceRef.current = chromeAI;
+			} else {
+				eventSourceRef.current = await askQuestion( promptArg, options );
+			}
 
 			if ( ! eventSourceRef?.current ) {
 				return;

package/src/index.ts

@@ -55,3 +55,8 @@ export * from './constants.js';
  * Logo Generator
  */
 export * from './logo-generator/index.js';
+
+/**
+ * Chrome AI
+ */
+export * from './chrome-ai/index.js';

package/src/types.ts

@@ -132,3 +132,32 @@ export interface BlockEditorStore {
 		[ key in keyof typeof BlockEditorSelectors ]: ( typeof BlockEditorSelectors )[ key ];
 	};
 }
+
+declare global {
+	interface Window {
+		translation?: {
+			canTranslate: ( options: {
+				sourceLanguage: string;
+				targetLanguage: string;
+			} ) => Promise< 'no' | 'yes' | string >;
+			createTranslator: ( options: {
+				sourceLanguage: string;
+				targetLanguage: string;
+			} ) => Promise< {
+				translate: ( text: string ) => Promise< string >;
+			} >;
+		};
+		ai?: {
+			languageDetector: {
+				create: () => Promise< {
+					detect: ( text: string ) => Promise<
+						{
+							detectedLanguage: string;
+							confidence: number;
+						}[]
+					>;
+				} >;
+			};
+		};
+	}
+}