@automattic/jetpack-ai-client 0.28.1 → 0.31.0

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.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]
+
 ## [0.28.1] - 2025-05-15
 ### Fixed
 - AI Assistant: Shorten AI excerpt if the built-in AI model doesn't respect the word count limit. [#43433]
@@ -612,6 +627,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.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
 [0.27.10]: https://github.com/Automattic/jetpack-ai-client/compare/v0.27.9...v0.27.10

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.d.ts

@@ -30,4 +30,5 @@ export default function useAiFeature(): {
         };
     };
     featuresControl?: import("@automattic/jetpack-shared-extension-utils/store/wordpress-com/types").FeaturesControl;
+    chromeAiTokens?: import("@automattic/jetpack-shared-extension-utils/store/wordpress-com/types").ChromeAiTokens;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.28.1",
+	"version": "0.31.0",
 	"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,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.0",
-		"@automattic/jetpack-connection": "^0.39.14",
-		"@automattic/jetpack-shared-extension-utils": "^0.19.3",
+		"@automattic/jetpack-base-styles": "^0.8.0",
+		"@automattic/jetpack-components": "^0.73.4",
+		"@automattic/jetpack-connection": "^0.39.18",
+		"@automattic/jetpack-shared-extension-utils": "^0.20.3",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/jest": "29.5.14",
 		"@types/react": "18.3.18",
 		"@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/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;