@automattic/jetpack-ai-client 0.16.3 → 0.17.0

package/CHANGELOG.md

@@ -5,6 +5,15 @@ 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.17.0] - 2024-09-02
+### Added
+- AI Client: Add FeaturesControl to ai-assistant-feature response parsing. [#39168]
+- Jetpack AI: Support fair usage messaging on the Extension AI Control component. [#39103]
+
+## [0.16.4] - 2024-08-26
+### Changed
+- Updated package dependencies. [#39004]
+
 ## [0.16.3] - 2024-08-21
 ### Fixed
 - Revert recent SVG image optimizations. [#38981]
@@ -388,6 +397,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.17.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.16.4...v0.17.0
+[0.16.4]: https://github.com/Automattic/jetpack-ai-client/compare/v0.16.3...v0.16.4
 [0.16.3]: https://github.com/Automattic/jetpack-ai-client/compare/v0.16.2...v0.16.3
 [0.16.2]: https://github.com/Automattic/jetpack-ai-client/compare/v0.16.1...v0.16.2
 [0.16.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.16.0...v0.16.1

package/build/components/ai-control/extension-ai-control.d.ts

@@ -17,6 +17,7 @@ type ExtensionAIControlProps = {
     error?: RequestingErrorProps;
     requestsRemaining?: number;
     showUpgradeMessage?: boolean;
+    showFairUsageMessage?: boolean;
     upgradeUrl?: string;
     wrapperRef?: React.MutableRefObject<HTMLDivElement | null>;
     onChange?: (newValue: string) => void;
@@ -34,6 +35,6 @@ type ExtensionAIControlProps = {
  * @param {React.MutableRefObject}  ref   - Ref to the component
  * @return {ReactElement}                 Rendered component
  */
-export declare function ExtensionAIControl({ className, disabled, value, placeholder, showButtonLabels, isTransparent, state, showGuideLine, error, requestsRemaining, showUpgradeMessage, upgradeUrl, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, onTryAgain, }: ExtensionAIControlProps, ref: React.MutableRefObject<HTMLInputElement>): ReactElement;
+export declare function ExtensionAIControl({ className, disabled, value, placeholder, showButtonLabels, isTransparent, state, showGuideLine, error, requestsRemaining, showUpgradeMessage, showFairUsageMessage, upgradeUrl, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, onTryAgain, }: ExtensionAIControlProps, ref: React.MutableRefObject<HTMLInputElement>): ReactElement;
 declare const _default: React.ForwardRefExoticComponent<ExtensionAIControlProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/build/components/ai-control/extension-ai-control.js

@@ -11,7 +11,7 @@ import { forwardRef } from 'react';
 /**
  * Internal dependencies
  */
-import { GuidelineMessage, ErrorMessage, UpgradeMessage } from '../message/index.js';
+import { GuidelineMessage, ErrorMessage, UpgradeMessage, FairUsageLimitMessage, } from '../message/index.js';
 import AIControl from './ai-control.js';
 import './style.scss';
 /**
@@ -21,7 +21,7 @@ import './style.scss';
  * @param {React.MutableRefObject}  ref   - Ref to the component
  * @return {ReactElement}                 Rendered component
  */
-export function ExtensionAIControl({ className, disabled = false, value = '', placeholder = '', showButtonLabels = true, isTransparent = false, state = 'init', showGuideLine = false, error, requestsRemaining, showUpgradeMessage = false, upgradeUrl, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, onTryAgain, }, ref) {
+export function ExtensionAIControl({ className, disabled = false, value = '', placeholder = '', showButtonLabels = true, isTransparent = false, state = 'init', showGuideLine = false, error, requestsRemaining, showUpgradeMessage = false, showFairUsageMessage = false, upgradeUrl, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, onTryAgain, }, ref) {
     const loading = state === 'requesting' || state === 'suggesting';
     const [editRequest, setEditRequest] = useState(false);
     const [lastValue, setLastValue] = useState(value || null);
@@ -78,6 +78,9 @@ export function ExtensionAIControl({ className, disabled = false, value = '', pl
     if (error?.message) {
         message = (_jsx(ErrorMessage, { error: error.message, code: error.code, onTryAgainClick: tryAgainHandler, onUpgradeClick: upgradeHandler, upgradeUrl: upgradeUrl }));
     }
+    else if (showFairUsageMessage) {
+        message = _jsx(FairUsageLimitMessage, {});
+    }
     else if (showUpgradeMessage) {
         message = (_jsx(UpgradeMessage, { requestsRemaining: requestsRemaining, onUpgradeClick: upgradeHandler, upgradeUrl: upgradeUrl }));
     }

package/build/components/message/index.d.ts

@@ -47,6 +47,12 @@ export default function Message({ severity, icon, showSidebarIcon, onSidebarIcon
  * @return {React.ReactElement } - Message component.
  */
 export declare function GuidelineMessage(): React.ReactElement;
+/**
+ * React component to render a fair usage limit message.
+ *
+ * @return {React.ReactElement } - Message component.
+ */
+export declare function FairUsageLimitMessage(): React.ReactElement;
 /**
  * React component to render an upgrade message for free tier users
  *

package/build/components/message/index.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * External dependencies
  */
 import { ExternalLink, Button } from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check, arrowRight } from '@wordpress/icons';
 import clsx from 'clsx';
@@ -45,6 +46,18 @@ export default function Message({ severity = MESSAGE_SEVERITY_INFO, icon = null,
 export function GuidelineMessage() {
     return (_jsxs(Message, { children: [_jsx("span", { children: __('AI-generated content could be inaccurate or biased.', 'jetpack-ai-client') }), _jsx(ExternalLink, { href: "https://automattic.com/ai-guidelines", children: __('Learn more', 'jetpack-ai-client') })] }));
 }
+/**
+ * React component to render a fair usage limit message.
+ *
+ * @return {React.ReactElement } - Message component.
+ */
+export function FairUsageLimitMessage() {
+    const message = __("You've reached this month's request limit, per our <link>fair usage policy</link>", 'jetpack-ai-client');
+    const element = createInterpolateElement(message, {
+        link: (_jsx(ExternalLink, { href: "https://jetpack.com/redirect/?source=ai-assistant-fair-usage-policy" })),
+    });
+    return _jsx(Message, { severity: MESSAGE_SEVERITY_WARNING, children: element });
+}
 /**
  * React component to render an upgrade message for free tier users
  *

package/build/logo-generator/store/actions.js

@@ -32,6 +32,7 @@ export function mapAiFeatureResponseToAiFeatureProps(response) {
         nextTier: response['next-tier'],
         tierPlansEnabled: !!response['tier-plans-enabled'],
         costs: response.costs,
+        featuresControl: response['features-control'],
     };
 }
 const actions = {

package/build/logo-generator/store/reducer.d.ts

@@ -77,6 +77,7 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
                     logo: number;
                 };
             };
+            featuresControl?: import("./types.js").FeaturesControl;
             _meta?: {
                 isRequesting: boolean;
                 asyncRequestCountdown: number;

package/build/logo-generator/store/types.d.ts

@@ -53,6 +53,14 @@ export type TierProp = {
 export type TierLimitProp = TierUnlimitedProps['limit'] | TierFreeProps['limit'] | Tier100Props['limit'] | Tier200Props['limit'] | Tier500Props['limit'] | Tier750Props['limit'] | Tier1000Props['limit'];
 export type TierSlugProp = TierUnlimitedProps['slug'] | TierFreeProps['slug'] | Tier100Props['slug'] | Tier200Props['slug'] | Tier500Props['slug'] | Tier750Props['slug'] | Tier1000Props['slug'];
 export type TierValueProp = TierUnlimitedProps['value'] | TierFreeProps['value'] | Tier100Props['value'] | Tier200Props['value'] | Tier500Props['value'] | Tier750Props['value'] | Tier1000Props['value'];
+export type FeatureControl = {
+    enabled: boolean;
+    'min-jetpack-version': string;
+    [key: string]: FeatureControl | boolean | string;
+};
+export type FeaturesControl = {
+    [key: string]: FeatureControl;
+};
 export type AiFeatureProps = {
     hasFeature: boolean;
     isOverLimit: boolean;
@@ -75,6 +83,7 @@ export type AiFeatureProps = {
             logo: number;
         };
     };
+    featuresControl?: FeaturesControl;
 };
 export type AiFeatureStateProps = AiFeatureProps & {
     _meta?: {
@@ -157,6 +166,7 @@ export type AiAssistantFeatureEndpointResponseProps = {
             logo: number;
         };
     };
+    'features-control'?: FeaturesControl;
 };
 export type SaveLogo = (logo: Logo) => Promise<{
     mediaId: number;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.16.3",
+	"version": "0.17.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": {
@@ -43,9 +43,9 @@
 	"main": "./build/index.js",
 	"types": "./build/index.d.ts",
 	"dependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.29",
+		"@automattic/jetpack-base-styles": "^0.6.30",
 		"@automattic/jetpack-connection": "^0.35.3",
-		"@automattic/jetpack-shared-extension-utils": "^0.15.4",
+		"@automattic/jetpack-shared-extension-utils": "^0.15.5",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/react": "18.3.3",
 		"@types/wordpress__block-editor": "11.5.15",

package/src/components/ai-control/extension-ai-control.tsx

@@ -10,7 +10,12 @@ import React, { forwardRef } from 'react';
 /**
  * Internal dependencies
  */
-import { GuidelineMessage, ErrorMessage, UpgradeMessage } from '../message/index.js';
+import {
+	GuidelineMessage,
+	ErrorMessage,
+	UpgradeMessage,
+	FairUsageLimitMessage,
+} from '../message/index.js';
 import AIControl from './ai-control.js';
 import './style.scss';
 /**
@@ -31,6 +36,7 @@ type ExtensionAIControlProps = {
 	error?: RequestingErrorProps;
 	requestsRemaining?: number;
 	showUpgradeMessage?: boolean;
+	showFairUsageMessage?: boolean;
 	upgradeUrl?: string;
 	wrapperRef?: React.MutableRefObject< HTMLDivElement | null >;
 	onChange?: ( newValue: string ) => void;
@@ -62,6 +68,7 @@ export function ExtensionAIControl(
 		error,
 		requestsRemaining,
 		showUpgradeMessage = false,
+		showFairUsageMessage = false,
 		upgradeUrl,
 		wrapperRef,
 		onChange,
@@ -215,6 +222,8 @@ export function ExtensionAIControl(
 				upgradeUrl={ upgradeUrl }
 			/>
 		);
+	} else if ( showFairUsageMessage ) {
+		message = <FairUsageLimitMessage />;
 	} else if ( showUpgradeMessage ) {
 		message = (
 			<UpgradeMessage

package/src/components/message/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { ExternalLink, Button } from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check, arrowRight } from '@wordpress/icons';
 import clsx from 'clsx';
@@ -114,6 +115,25 @@ export function GuidelineMessage(): React.ReactElement {
 	);
 }
 
+/**
+ * React component to render a fair usage limit message.
+ *
+ * @return {React.ReactElement } - Message component.
+ */
+export function FairUsageLimitMessage(): React.ReactElement {
+	const message = __(
+		"You've reached this month's request limit, per our <link>fair usage policy</link>",
+		'jetpack-ai-client'
+	);
+	const element = createInterpolateElement( message, {
+		link: (
+			<ExternalLink href="https://jetpack.com/redirect/?source=ai-assistant-fair-usage-policy" />
+		),
+	} );
+
+	return <Message severity={ MESSAGE_SEVERITY_WARNING }>{ element }</Message>;
+}
+
 /**
  * React component to render an upgrade message for free tier users
  *

package/src/logo-generator/store/actions.ts

@@ -64,6 +64,7 @@ export function mapAiFeatureResponseToAiFeatureProps(
 		nextTier: response[ 'next-tier' ],
 		tierPlansEnabled: !! response[ 'tier-plans-enabled' ],
 		costs: response.costs,
+		featuresControl: response[ 'features-control' ],
 	};
 }
 

package/src/logo-generator/store/types.ts

@@ -88,6 +88,14 @@ export type TierValueProp =
 	| Tier750Props[ 'value' ]
 	| Tier1000Props[ 'value' ];
 
+export type FeatureControl = {
+	enabled: boolean;
+	'min-jetpack-version': string;
+	[ key: string ]: FeatureControl | boolean | string;
+};
+
+export type FeaturesControl = { [ key: string ]: FeatureControl };
+
 export type AiFeatureProps = {
 	hasFeature: boolean;
 	isOverLimit: boolean;
@@ -110,6 +118,7 @@ export type AiFeatureProps = {
 			logo: number;
 		};
 	};
+	featuresControl?: FeaturesControl;
 };
 
 // Type used in the `wordpress-com/plans` store.
@@ -202,6 +211,7 @@ export type AiAssistantFeatureEndpointResponseProps = {
 			logo: number;
 		};
 	};
+	'features-control'?: FeaturesControl;
 };
 
 export type SaveLogo = ( logo: Logo ) => Promise< { mediaId: number; mediaURL: string } >;