@automattic/jetpack-ai-client 0.29.0 → 0.31.1

package/CHANGELOG.md

@@ -5,6 +5,21 @@ 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.31.1] - 2025-06-05
+### Changed
+- Update package dependencies. [#43718] [#43766]
+
+## [0.31.0] - 2025-06-02
+### Changed
+- Change how Chrome's built-in AI API tokens are injected. [#43682]
+- sass: Remove unnecessary `@import` of `@wordpress/base-styles`. [#43607]
+- Update package dependencies. [#43711]
+
+## [0.30.0] - 2025-05-26
+### Changed
+- AI Assistant: Propagate the AI model used in the AI requests. [#43495]
+- Update package dependencies. [#43578]
+
 ## [0.29.0] - 2025-05-19
 ### Added
 - AI Assistant: Retrieve Chrome AI token from AI Features response and inject it from the frontend. [#43442]
@@ -616,6 +631,9 @@ 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.31.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.31.0...v0.31.1
+[0.31.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.30.0...v0.31.0
+[0.30.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.29.0...v0.30.0
 [0.29.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.28.1...v0.29.0
 [0.28.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.28.0...v0.28.1
 [0.28.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.27.10...v0.28.0

package/build/chrome-ai/factory.js

@@ -1,14 +1,6 @@
-import { getJetpackExtensionAvailability } from '@automattic/jetpack-shared-extension-utils';
 import { PROMPT_TYPE_CHANGE_LANGUAGE, PROMPT_TYPE_SUMMARIZE } from "../constants.js";
+import { isChromeAIAvailable } from "./get-availability.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.
  *
@@ -16,7 +8,7 @@ function shouldUseChromeAI() {
  * @return ChromeAISuggestionsEventSource | bool
  */
 export default async function ChromeAIFactory(promptArg) {
-    if (!shouldUseChromeAI()) {
+    if (!isChromeAIAvailable()) {
         return false;
     }
     const context = {

package/build/chrome-ai/get-availability.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Check if Chrome AI can be enabled.
+ *
+ * @return {boolean} Whether Chrome AI can be enabled.
+ */
+export declare function isChromeAIAvailable(): boolean;
+export default isChromeAIAvailable;

package/build/chrome-ai/get-availability.js

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { getJetpackExtensionAvailability } from '@automattic/jetpack-shared-extension-utils';
+import { select } from '@wordpress/data';
+/**
+ * Get the AI Assistant feature.
+ *
+ * @return {object} The AI Assistant feature.
+ */
+function getAiAssistantFeature() {
+    const { getAiAssistantFeature: getFeature } = select('wordpress-com/plans');
+    return getFeature();
+}
+/**
+ * Check if Chrome AI can be enabled.
+ *
+ * @return {boolean} Whether Chrome AI can be enabled.
+ */
+export function isChromeAIAvailable() {
+    const { featuresControl } = getAiAssistantFeature();
+    return (featuresControl?.['chrome-ai']?.enabled !== false &&
+        getJetpackExtensionAvailability('ai-use-chrome-ai-sometimes').available !== false);
+}
+export default isChromeAIAvailable;

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

@@ -3,7 +3,7 @@
  */
 import { PLAN_TYPE_FREE, usePlanType as getPlanType, } from '@automattic/jetpack-shared-extension-utils';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useMemo, useEffect } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 /**
  * Hook to get properties for AiFeature
  * @return {object} - Object containing properties for AiFeature.
@@ -12,21 +12,6 @@ export default function useAiFeature() {
     const data = useSelect(select => select('wordpress-com/plans').getAiAssistantFeature(), []);
     const loading = useSelect(select => select('wordpress-com/plans').getIsRequestingAiAssistantFeature(), []);
     const { fetchAiAssistantFeature: loadFeatures, increaseAiAssistantRequestsCount: increaseRequestsCount, dequeueAiAssistantFeatureAsyncRequest: dequeueAsyncRequest, } = useDispatch('wordpress-com/plans');
-    useEffect(() => {
-        if (!loading && data) {
-            // Check if the meta tag already exists
-            const existingMeta = document.querySelector('meta[http-equiv="origin-trial"]');
-            if (!existingMeta && data?.chromeAiTokens) {
-                // iterate through chromeAiTokens and create a meta tag for each one
-                Object.keys(data.chromeAiTokens).forEach(token => {
-                    const otMeta = document.createElement('meta');
-                    otMeta.httpEquiv = 'origin-trial';
-                    otMeta.content = data.chromeAiTokens[token];
-                    document.head.appendChild(otMeta);
-                });
-            }
-        }
-    }, [loading, data]);
     return useMemo(() => {
         const planType = getPlanType(data?.currentTier);
         const currentTierLimit = data?.currentTier?.limit || data?.requestsLimit;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.29.0",
+	"version": "0.31.1",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -34,7 +34,7 @@
 		"jest": "^29.6.2",
 		"jest-environment-jsdom": "29.7.0",
 		"storybook": "8.6.7",
-		"typescript": "5.8.2"
+		"typescript": "5.8.3"
 	},
 	"exports": {
 		".": {
@@ -45,30 +45,30 @@
 	"main": "./build/index.js",
 	"types": "./build/index.d.ts",
 	"dependencies": {
-		"@automattic/jetpack-base-styles": "^0.7.4",
-		"@automattic/jetpack-components": "^0.73.1",
-		"@automattic/jetpack-connection": "^0.39.15",
-		"@automattic/jetpack-shared-extension-utils": "^0.20.0",
+		"@automattic/jetpack-base-styles": "^1.0.0",
+		"@automattic/jetpack-components": "^1.1.0",
+		"@automattic/jetpack-connection": "^1.2.0",
+		"@automattic/jetpack-shared-extension-utils": "^1.0.1",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/jest": "29.5.14",
-		"@types/react": "18.3.18",
+		"@types/react": "18.3.23",
 		"@types/wordpress__block-editor": "11.5.16",
-		"@wordpress/api-fetch": "7.22.0",
-		"@wordpress/base-styles": "5.22.0",
-		"@wordpress/blob": "4.22.0",
-		"@wordpress/blocks": "14.11.0",
-		"@wordpress/block-editor": "14.17.0",
-		"@wordpress/components": "29.8.0",
-		"@wordpress/compose": "7.22.0",
-		"@wordpress/data": "10.22.0",
-		"@wordpress/editor": "14.22.0",
-		"@wordpress/element": "6.22.0",
-		"@wordpress/i18n": "5.22.0",
-		"@wordpress/icons": "10.22.0",
-		"@wordpress/primitives": "4.22.0",
-		"@wordpress/url": "4.22.0",
+		"@wordpress/api-fetch": "7.24.0",
+		"@wordpress/base-styles": "6.0.0",
+		"@wordpress/blob": "4.24.0",
+		"@wordpress/blocks": "14.13.0",
+		"@wordpress/block-editor": "14.19.0",
+		"@wordpress/components": "29.10.0",
+		"@wordpress/compose": "7.24.0",
+		"@wordpress/data": "10.24.0",
+		"@wordpress/editor": "14.24.0",
+		"@wordpress/element": "6.24.0",
+		"@wordpress/i18n": "5.24.0",
+		"@wordpress/icons": "10.24.0",
+		"@wordpress/primitives": "4.24.0",
+		"@wordpress/url": "4.24.0",
 		"clsx": "2.1.1",
-		"debug": "4.4.0",
+		"debug": "4.4.1",
 		"markdown-it": "14.1.0",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",

package/src/chrome-ai/factory.ts

@@ -1,17 +1,8 @@
-import { getJetpackExtensionAvailability } from '@automattic/jetpack-shared-extension-utils';
 import { PROMPT_TYPE_CHANGE_LANGUAGE, PROMPT_TYPE_SUMMARIZE } from '../constants.ts';
 import { PromptProp, PromptItemProps } from '../types.ts';
+import { isChromeAIAvailable } from './get-availability.ts';
 import ChromeAISuggestionsEventSource from './suggestions.ts';
 
-/**
- * Check for the feature flag.
- *
- * @return boolean
- */
-function shouldUseChromeAI() {
-	return getJetpackExtensionAvailability( 'ai-use-chrome-ai-sometimes' ).available === true;
-}
-
 interface PromptContext {
 	type?: string;
 	content?: string;
@@ -27,7 +18,7 @@ interface PromptContext {
  * @return ChromeAISuggestionsEventSource | bool
  */
 export default async function ChromeAIFactory( promptArg: PromptProp ) {
-	if ( ! shouldUseChromeAI() ) {
+	if ( ! isChromeAIAvailable() ) {
 		return false;
 	}
 

package/src/chrome-ai/get-availability.ts

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import { getJetpackExtensionAvailability } from '@automattic/jetpack-shared-extension-utils';
+import { select } from '@wordpress/data';
+
+/**
+ * Types
+ */
+type FeatureControl = {
+	enabled: boolean;
+};
+
+type PlansSelect = {
+	getAiAssistantFeature: () => {
+		currentTier?: { value: number };
+		featuresControl?: Record< string, FeatureControl >;
+	};
+};
+
+/**
+ * Get the AI Assistant feature.
+ *
+ * @return {object} The AI Assistant feature.
+ */
+function getAiAssistantFeature() {
+	const { getAiAssistantFeature: getFeature } = select( 'wordpress-com/plans' ) as PlansSelect;
+	return getFeature();
+}
+
+/**
+ * Check if Chrome AI can be enabled.
+ *
+ * @return {boolean} Whether Chrome AI can be enabled.
+ */
+export function isChromeAIAvailable() {
+	const { featuresControl } = getAiAssistantFeature();
+	return (
+		featuresControl?.[ 'chrome-ai' ]?.enabled !== false &&
+		getJetpackExtensionAvailability( 'ai-use-chrome-ai-sometimes' ).available !== false
+	);
+}
+
+export default isChromeAIAvailable;

package/src/components/ai-control/style.scss

@@ -1,4 +1,4 @@
-@import '@automattic/jetpack-base-styles/root-variables';
+@use '@automattic/jetpack-base-styles/root-variables';
 
 .jetpack-components-ai-control__container-wrapper {
 	position: sticky;

package/src/components/ai-feedback/style.scss

@@ -1,5 +1,3 @@
-@import "@wordpress/base-styles/colors";
-
 .ai-assistant-feedback {
 
 	&__selection {

package/src/components/ai-image/components/carrousel.scss

@@ -64,20 +64,6 @@ $scale-factor: 0.55;
 
 				&__prev,
 				&__next {
-
-					&:hover {
-						background-color: rgba( 0, 0, 0, 0.3 );
-						opacity: 1;
-					}
-
-					&-icon {
-						fill: #fff;
-
-						&.is-disabled {
-							fill: #808080;
-						}
-					}
-
 					cursor: pointer;
 					z-index: 1;
 					display: flex;
@@ -92,6 +78,19 @@ $scale-factor: 0.55;
 					width: 60px;
 					opacity: 0;
 					background: transparent;
+
+					&:hover {
+						background-color: rgba( 0, 0, 0, 0.3 );
+						opacity: 1;
+					}
+
+					&-icon {
+						fill: #fff;
+
+						&.is-disabled {
+							fill: #808080;
+						}
+					}
 				}
 			}
 		}

package/src/components/ai-image/components/usage-counter.scss

@@ -1,4 +1,4 @@
-@import '@automattic/jetpack-base-styles/style';
+@use '@automattic/jetpack-base-styles/style';
 
 .ai-assistant-featured-image__usage-counter {
 	color: var(--studio-gray-50, #646970);

package/src/components/ai-status-indicator/style.scss

@@ -1,4 +1,4 @@
-@import '@automattic/jetpack-base-styles/style';
+@use '@automattic/jetpack-base-styles/style';
 
 .jetpack-ai-status-indicator__icon-wrapper {
 	transition: opacity 0.25s ease-in-out, width 0.25s;

package/src/components/message/style.scss

@@ -1,4 +1,4 @@
-@import '@automattic/jetpack-base-styles/root-variables';
+@use '@automattic/jetpack-base-styles/root-variables';
 
 .jetpack-ai-assistant__message {
 	display: flex;

package/src/components/quota-exceeded-message/style.scss

@@ -1,4 +1,4 @@
-@import '@automattic/jetpack-base-styles/style';
+@use '@automattic/jetpack-base-styles/style';
 
 .jetpack-upgrade-plan-banner__wrapper {
     column-gap: 32px;

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

@@ -6,7 +6,7 @@ import {
 	usePlanType as getPlanType,
 } from '@automattic/jetpack-shared-extension-utils';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useMemo, useEffect } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import type { WordPressPlansSelectors } from '@automattic/jetpack-shared-extension-utils/store/wordpress-com';
 
 /**
@@ -34,22 +34,6 @@ export default function useAiFeature() {
 		dequeueAiAssistantFeatureAsyncRequest: dequeueAsyncRequest,
 	} = useDispatch( 'wordpress-com/plans' );
 
-	useEffect( () => {
-		if ( ! loading && data ) {
-			// Check if the meta tag already exists
-			const existingMeta = document.querySelector( 'meta[http-equiv="origin-trial"]' );
-			if ( ! existingMeta && data?.chromeAiTokens ) {
-				// iterate through chromeAiTokens and create a meta tag for each one
-				Object.keys( data.chromeAiTokens ).forEach( token => {
-					const otMeta = document.createElement( 'meta' );
-					otMeta.httpEquiv = 'origin-trial';
-					otMeta.content = data.chromeAiTokens[ token ];
-					document.head.appendChild( otMeta );
-				} );
-			}
-		}
-	}, [ loading, data ] );
-
 	return useMemo( () => {
 		const planType = getPlanType( data?.currentTier );
 		const currentTierLimit = data?.currentTier?.limit || data?.requestsLimit;

package/src/logo-generator/components/generator-modal.scss

@@ -1,4 +1,4 @@
-@import '@automattic/jetpack-base-styles/root-variables';
+@use '@automattic/jetpack-base-styles/root-variables';
 
 .jetpack-ai-logo-generator-modal {
 

package/src/logo-generator/components/history-carousel.scss

@@ -1,4 +1,4 @@
-@import '@automattic/jetpack-base-styles/root-variables';
+@use '@automattic/jetpack-base-styles/root-variables';
 
 .jetpack-ai-logo-generator__carousel {
 	display: flex;

package/src/logo-generator/components/logo-presenter.scss

@@ -1,4 +1,4 @@
-@import '@automattic/jetpack-base-styles/root-variables';
+@use '@automattic/jetpack-base-styles/root-variables';
 
 .jetpack-ai-logo-generator-modal-presenter__wrapper {
 	display: flex;

package/src/logo-generator/components/prompt.scss

@@ -1,4 +1,4 @@
-@import '@automattic/jetpack-base-styles/root-variables';
+@use '@automattic/jetpack-base-styles/root-variables';
 
 .jetpack-ai-logo-generator__prompt {
 	display: flex;

package/src/logo-generator/components/upgrade-nudge.scss

@@ -1,4 +1,4 @@
-@import '@automattic/jetpack-base-styles/root-variables';
+@use '@automattic/jetpack-base-styles/root-variables';
 
 .jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper {
 	display: flex;

package/src/logo-generator/components/visit-site-banner.scss

@@ -1,4 +1,4 @@
-@import '@automattic/jetpack-base-styles/root-variables';
+@use '@automattic/jetpack-base-styles/root-variables';
 
 .jetpack-ai-logo-generator-modal-visit-site-banner {
 	border-radius: 4px;