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 }