diff --git a/projects/js-packages/ai-client/changelog/update-jetpack-ai-add-fair-usage-message-on-extension-ai-control b/projects/js-packages/ai-client/changelog/update-jetpack-ai-add-fair-usage-message-on-extension-ai-control
new file mode 100644
index 0000000000000..1d373fa53cda5
--- /dev/null
+++ b/projects/js-packages/ai-client/changelog/update-jetpack-ai-add-fair-usage-message-on-extension-ai-control
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Jetpack AI: support fair usage messaging on the Extension AI Control component.
diff --git a/projects/js-packages/ai-client/src/components/ai-control/extension-ai-control.tsx b/projects/js-packages/ai-client/src/components/ai-control/extension-ai-control.tsx
index 2265d77f9aede..c29fc11b63248 100644
--- a/projects/js-packages/ai-client/src/components/ai-control/extension-ai-control.tsx
+++ b/projects/js-packages/ai-client/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 = ;
} else if ( showUpgradeMessage ) {
message = (
fair usage policy",
+ 'jetpack-ai-client'
+ );
+ const element = createInterpolateElement( message, {
+ link: (
+
+ ),
+ } );
+
+ return { element };
+}
+
/**
* React component to render an upgrade message for free tier users
*
diff --git a/projects/plugins/jetpack/changelog/update-jetpack-ai-add-fair-usage-message-on-extension-ai-control b/projects/plugins/jetpack/changelog/update-jetpack-ai-add-fair-usage-message-on-extension-ai-control
new file mode 100644
index 0000000000000..729bf31f35b9b
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/update-jetpack-ai-add-fair-usage-message-on-extension-ai-control
@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Jetpack AI: support fair usage messaging on the Extension AI Control component.
diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/inline-extensions/components/ai-assistant-input/index.tsx b/projects/plugins/jetpack/extensions/blocks/ai-assistant/inline-extensions/components/ai-assistant-input/index.tsx
index 0c8eceb89c2a6..90356810fd123 100644
--- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/inline-extensions/components/ai-assistant-input/index.tsx
+++ b/projects/plugins/jetpack/extensions/blocks/ai-assistant/inline-extensions/components/ai-assistant-input/index.tsx
@@ -76,6 +76,13 @@ export default function AiAssistantInput( {
[ requireUpgrade, requestingState ]
);
+ /**
+ * Show the fair usage message when the site is on the unlimited tier and was flagged as requireUpgrade.
+ */
+ const showFairUsageMessage = useMemo( () => {
+ return requireUpgrade && currentTier?.value === 1;
+ }, [ requireUpgrade, currentTier ] );
+
const handleSend = useCallback( () => {
tracks.recordEvent( 'jetpack_ai_assistant_extension_generate', {
block_type: blockType,
@@ -165,6 +172,7 @@ export default function AiAssistantInput( {
error={ requestingError }
requestsRemaining={ requestsRemaining }
showUpgradeMessage={ showUpgradeMessage }
+ showFairUsageMessage={ showFairUsageMessage }
upgradeUrl={ checkoutUrl }
onChange={ setValue }
onSend={ handleSend }