@automattic/jetpack-ai-client 0.25.7 → 0.26.1

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

@@ -0,0 +1,95 @@
+.ai-assistant-featured-image {
+	&__content {
+		display: flex;
+		margin-top: 32px;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		gap: 8px;
+	}
+
+	&__actions {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+	}
+
+	&__user-prompt {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		flex-direction: row;
+	}
+
+	&__user-prompt-textarea {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+
+		textarea {
+			width: 100%;
+			outline: none;
+			border: 1px solid #CCC;
+			border-radius: 6px;
+			padding: 12px;
+			color: var(--studio-black);
+		}
+
+		textarea:disabled {
+			opacity: 0.5;
+		}
+	}
+
+	&__actions-left {
+		width: 50%;
+		display: flex;
+		justify-content: flex-start;
+	}
+
+	&__actions-right {
+		width: 50%;
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	&__action-buttons {
+		display: flex;
+		justify-content: center;
+		gap: 12px;
+	}
+
+	&__image-canvas {
+		width: 100%;
+		margin-top: 24px;
+		& > .jetpack-ai-upgrade-banner {
+			margin-bottom: 8px;
+		}
+	}
+
+	&__footer {
+		display: flex;
+		justify-content: flex-start;
+		margin-right: -32px;
+		margin-left: -32px;
+		margin-top: 32px;
+		margin-bottom: -32px;
+		padding: 8px 32px;
+		border-top: solid 1px #DCDCDE;
+		height: 60px;
+
+		&__feedback-button {
+			display: inline-block;
+
+			a {
+				text-decoration: none;
+			}
+		}
+
+		.icon {
+			width: 20px;
+			height: 20px;
+			color: var(--studio-gray-20);
+			margin-left: 4px;
+		}
+	}
+}

package/src/components/ai-image/types.ts

@@ -0,0 +1,19 @@
+export const FEATURED_IMAGE_FEATURE_NAME = 'featured-post-image' as const;
+export const GENERAL_IMAGE_FEATURE_NAME = 'general-image' as const;
+export const IMAGE_GENERATION_MODEL_STABLE_DIFFUSION = 'stable-diffusion' as const;
+export const IMAGE_GENERATION_MODEL_DALL_E_3 = 'dall-e-3' as const;
+export const PLACEMENT_MEDIA_SOURCE_DROPDOWN = 'media-source-dropdown' as const;
+export const PLACEMENT_BLOCK_PLACEHOLDER_BUTTON = 'block-placeholder-button' as const;
+
+export interface EditorSelectors {
+	// actually getEditedPostAttribute can bring different values, but for our current use, number is fine (media ID)
+	getEditedPostAttribute: ( attribute: string ) => number;
+	isEditorPanelOpened: ( panel: string ) => boolean;
+}
+
+export interface CoreSelectors {
+	getMedia: ( mediaId: number ) => {
+		id: number;
+		source_url: string;
+	} | null;
+}

package/src/components/index.ts

@@ -1,5 +1,12 @@
 export { AIControl, BlockAIControl, ExtensionAIControl } from './ai-control/index.js';
 export { default as AiFeedbackThumbs } from './ai-feedback/index.js';
+export { default as AiIcon, AiSVG } from './ai-icon/index.js';
+export {
+	FeaturedImage,
+	GeneralPurposeImage,
+	PLACEMENT_MEDIA_SOURCE_DROPDOWN,
+	PLACEMENT_BLOCK_PLACEHOLDER_BUTTON,
+} from './ai-image/index.js';
 export { default as AiStatusIndicator } from './ai-status-indicator/index.js';
 export { default as AudioDurationDisplay } from './audio-duration-display/index.js';
 export { default as AiModalFooter } from './ai-modal-footer/index.js';
@@ -9,3 +16,8 @@ export {
 	ErrorMessage,
 	default as FooterMessage,
 } from './message/index.js';
+export { default as AiAssistantModal } from './modal/index.js';
+export {
+	default as QuotaExceededMessage,
+	FairUsageNotice,
+} from './quota-exceeded-message/index.js';

package/src/components/modal/index.tsx

@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import { Modal, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { close } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+import AiStatusIndicator from '../ai-status-indicator/index.js';
+import type { RequestingStateProp } from '../../types.js';
+import './style.scss';
+
+const ModalHeader = ( {
+	requestingState,
+	onClose,
+	title,
+}: {
+	requestingState: RequestingStateProp;
+	onClose: () => void;
+	title: string;
+} ) => {
+	return (
+		<div className="ai-assistant-modal__header">
+			<div className="ai-assistant-modal__title-wrapper">
+				<AiStatusIndicator state={ requestingState } />
+				<h1 className="ai-assistant-modal__title">{ title }</h1>
+			</div>
+			<Button icon={ close } label={ __( 'Close', 'jetpack-ai-client' ) } onClick={ onClose } />
+		</div>
+	);
+};
+
+type AiAssistantModalProps = {
+	children: React.ReactNode;
+	handleClose: () => void;
+	hideHeader?: boolean;
+	requestingState?: RequestingStateProp;
+	title?: string;
+	maxWidth?: number;
+};
+
+/**
+ * AiAssistantModal component
+ * @param {AiAssistantModalProps} props - The component properties.
+ * @return {React.ReactElement} - rendered component.
+ */
+export default function AiAssistantModal( {
+	children,
+	handleClose,
+	hideHeader = true,
+	requestingState = 'init',
+	title = __( 'AI Assistant', 'jetpack-ai-client' ),
+	maxWidth = 720,
+}: AiAssistantModalProps ) {
+	return (
+		<Modal
+			__experimentalHideHeader={ hideHeader }
+			className="ai-assistant-modal"
+			shouldCloseOnClickOutside={ false }
+			onRequestClose={ handleClose }
+		>
+			<div className="ai-assistant-modal__content" style={ { maxWidth } }>
+				<ModalHeader requestingState={ requestingState } onClose={ handleClose } title={ title } />
+				<hr className="ai-assistant-modal__divider" />
+				{ children }
+			</div>
+		</Modal>
+	);
+}

package/src/components/modal/style.scss

@@ -0,0 +1,45 @@
+.ai-assistant-modal {
+	@media (min-width: 960px) {
+		max-height: 95%;
+	}
+
+	&__content {
+		display: flex;
+		flex-direction: column;
+		@media screen and (min-width: 960px) {
+			width: 100vw;
+		}
+	}
+
+	&__header {
+		display: flex;
+		justify-content: space-between;
+		margin-right: -32px;
+		margin-left: -32px;
+		margin-top: -32px;
+		padding: 8px 12px;
+	}
+
+	&__divider {
+		background: #DCDCDE;
+		margin: 0 -32px;
+		height: 1px;
+	}
+
+	&__title-wrapper {
+		display: flex;
+		gap: 16px;
+		align-items: center;
+
+		& > svg {
+			margin: 0;
+			color: #008710;
+		}
+	}
+
+	&__title {
+		font-size: 14px;
+		line-height: 24px;
+		margin: 0;
+	}
+}

package/src/components/quota-exceeded-message/index.tsx

@@ -0,0 +1,319 @@
+/*
+ * External dependencies
+ */
+import getRedirectUrl from '@automattic/jetpack-components/tools/jp-redirect';
+import { useAnalytics, canUserPurchasePlan } from '@automattic/jetpack-shared-extension-utils';
+import { Nudge as StandardNudge } from '@automattic/jetpack-shared-extension-utils/components';
+import { Notice } from '@wordpress/components';
+import { createInterpolateElement, useCallback } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import debugFactory from 'debug';
+/*
+ * Internal dependencies
+ */
+import useAICheckout from '../../hooks/use-ai-checkout/index.js';
+import useAiFeature from '../../hooks/use-ai-feature/index.js';
+import { LightNudge } from './light-nudge.js';
+import type { ReactElement } from 'react';
+import './style.scss';
+
+type QuotaExceededMessageProps = {
+	placement?: string;
+	description?: string;
+	useLightNudge?: boolean;
+};
+
+const debug = debugFactory( 'jetpack-ai-client:upgrade-prompt' );
+
+/**
+ * The fair usage notice message for the AI Assistant block.
+ * @return {ReactElement} the fair usage notice message, with the proper link and date.
+ */
+const useFairUsageNoticeMessage = () => {
+	const { usagePeriod } = useAiFeature();
+
+	const getFormattedUsagePeriodStartDate = planUsagePeriod => {
+		if ( ! planUsagePeriod?.nextStart ) {
+			return null;
+		}
+
+		const nextUsagePeriodStartDate = new Date( planUsagePeriod.nextStart );
+		return (
+			nextUsagePeriodStartDate.toLocaleString( 'default', { month: 'long' } ) +
+			' ' +
+			nextUsagePeriodStartDate.getDate()
+		);
+	};
+
+	const getFairUsageNoticeMessage = resetDateString => {
+		const fairUsageMessage = __(
+			"You've reached this month's request limit, per our <link>fair usage policy</link>.",
+			'jetpack-ai-client'
+		);
+
+		if ( ! resetDateString ) {
+			return fairUsageMessage;
+		}
+
+		// Translators: %s is the date when the requests will reset.
+		const dateMessage = __( 'Requests will reset on %s.', 'jetpack-ai-client' );
+		const formattedDateMessage = sprintf( dateMessage, resetDateString );
+
+		return `${ fairUsageMessage } ${ formattedDateMessage }`;
+	};
+
+	const nextUsagePeriodStartDateString = getFormattedUsagePeriodStartDate( usagePeriod );
+
+	// Get the proper template based on the presence of the next usage period start date.
+	const fairUsageNoticeMessage = getFairUsageNoticeMessage( nextUsagePeriodStartDateString );
+
+	const fairUsageNoticeMessageElement = createInterpolateElement( fairUsageNoticeMessage, {
+		link: (
+			<a
+				href="https://jetpack.com/redirect/?source=ai-assistant-fair-usage-policy"
+				target="_blank"
+				rel="noreferrer"
+			/>
+		),
+	} );
+
+	return fairUsageNoticeMessageElement;
+};
+
+/**
+ * The default upgrade prompt for the AI Assistant block, containing the Upgrade button and linking
+ * to the checkout page or the Jetpack AI interstitial page.
+ *
+ * @param {QuotaExceededMessageProps} props - Component props.
+ * @return {ReactElement} the Nudge component with the prompt.
+ */
+const DefaultUpgradePrompt = ( {
+	placement = null,
+	description = null,
+	useLightNudge = false,
+}: QuotaExceededMessageProps ): ReactElement => {
+	const Nudge = useLightNudge ? LightNudge : StandardNudge;
+
+	const { checkoutUrl } = useAICheckout();
+	const canUpgrade = canUserPurchasePlan();
+	const { nextTier, tierPlansEnabled, currentTier, requestsCount } = useAiFeature();
+
+	const { tracks } = useAnalytics();
+
+	const handleUpgradeClick = useCallback( () => {
+		debug( 'upgrade', placement );
+		tracks.recordEvent( 'jetpack_ai_upgrade_button', {
+			current_tier_slug: currentTier?.slug,
+			requests_count: requestsCount,
+			placement: placement,
+		} );
+	}, [ currentTier, requestsCount, tracks, placement ] );
+
+	const handleContactUsClick = useCallback( () => {
+		debug( 'contact us', placement );
+		tracks.recordEvent( 'jetpack_ai_upgrade_contact_us', {
+			placement: placement,
+		} );
+	}, [ tracks, placement ] );
+
+	if ( ! canUpgrade ) {
+		const cantUpgradeDescription = createInterpolateElement(
+			__(
+				'Congratulations on exploring Jetpack AI and reaching the free requests limit! <strong>Reach out to the site administrator to upgrade and keep using Jetpack AI.</strong>',
+				'jetpack-ai-client'
+			),
+			{
+				strong: <strong />,
+			}
+		);
+
+		return (
+			<Nudge
+				showButton={ false }
+				className={ 'jetpack-ai-upgrade-banner' }
+				description={ description || cantUpgradeDescription }
+				visible={ true }
+				align={ null }
+				title={ null }
+				context={ null }
+			/>
+		);
+	}
+
+	if ( tierPlansEnabled ) {
+		if ( ! nextTier ) {
+			const contactHref = getRedirectUrl( 'jetpack-ai-tiers-more-requests-contact' );
+			const contactUsDescription = __(
+				'You have reached the request limit for your current plan.',
+				'jetpack-ai-client'
+			);
+
+			return (
+				<Nudge
+					buttonText={ __( 'Contact Us', 'jetpack-ai-client' ) }
+					description={ description || contactUsDescription }
+					className={ 'jetpack-ai-upgrade-banner' }
+					checkoutUrl={ contactHref }
+					visible={ true }
+					align={ null }
+					title={ null }
+					context={ null }
+					goToCheckoutPage={ handleContactUsClick }
+					target="_blank"
+				/>
+			);
+		}
+
+		const upgradeDescription = createInterpolateElement(
+			sprintf(
+				/* Translators: number of requests */
+				__(
+					'You have reached the requests limit for your current plan. <strong>Upgrade now to increase your requests limit to %d.</strong>',
+					'jetpack-ai-client'
+				),
+				nextTier.limit
+			),
+			{
+				strong: <strong />,
+			}
+		);
+
+		return (
+			<Nudge
+				buttonText={ sprintf(
+					/* Translators: number of requests */
+					__( 'Upgrade to %d requests', 'jetpack-ai-client' ),
+					nextTier.limit
+				) }
+				checkoutUrl={ checkoutUrl }
+				className={ 'jetpack-ai-upgrade-banner' }
+				description={ description || upgradeDescription }
+				goToCheckoutPage={ handleUpgradeClick }
+				visible={ true }
+				align={ 'center' }
+				title={ null }
+				context={ null }
+				target="_blank"
+			/>
+		);
+	}
+
+	return (
+		<Nudge
+			buttonText={ __( 'Upgrade', 'jetpack-ai-client' ) }
+			checkoutUrl={ checkoutUrl }
+			className={ 'jetpack-ai-upgrade-banner' }
+			description={ createInterpolateElement(
+				__(
+					'Congratulations on exploring Jetpack AI and reaching the free requests limit! <strong>Upgrade now to keep using it.</strong>',
+					'jetpack-ai-client'
+				),
+				{
+					strong: <strong />,
+				}
+			) }
+			goToCheckoutPage={ handleUpgradeClick }
+			visible={ true }
+			align={ null }
+			title={ null }
+			context={ null }
+			target="_blank"
+		/>
+	);
+};
+
+/**
+ * The VIP upgrade prompt, with a single text message recommending that the user reach
+ * out to their VIP account team.
+ *
+ * @param {object}  props               - Component props.
+ * @param {string}  props.description   - The description to display in the prompt.
+ * @param {boolean} props.useLightNudge - Wheter to use the light variant of the nudge, or the standard one.
+ * @return {ReactElement} the Nudge component with the prompt.
+ */
+const VIPUpgradePrompt = ( {
+	description = null,
+	useLightNudge = false,
+}: {
+	description?: string;
+	useLightNudge?: boolean;
+} ): ReactElement => {
+	const Nudge = useLightNudge ? LightNudge : StandardNudge;
+	const vipDescription = createInterpolateElement(
+		__(
+			"You've reached the Jetpack AI rate limit. <strong>Please reach out to your VIP account team.</strong>",
+			'jetpack-ai-client'
+		),
+		{
+			strong: <strong />,
+		}
+	);
+
+	return (
+		<Nudge
+			buttonText={ null }
+			checkoutUrl={ null }
+			className={ 'jetpack-ai-upgrade-banner' }
+			description={ description || vipDescription }
+			goToCheckoutPage={ null }
+			isRedirecting={ null }
+			visible={ true }
+			align={ null }
+			title={ null }
+			context={ null }
+		/>
+	);
+};
+
+type FairUsageNoticeProps = {
+	variant?: 'error' | 'muted';
+};
+
+/**
+ * The fair usage notice component.
+ * @param {FairUsageNoticeProps}         props         - Fair usage notice component props.
+ * @param {FairUsageNoticeProps.variant} props.variant - The variant of the notice to render.
+ * @return {ReactElement} the Notice component with the fair usage message.
+ */
+export const FairUsageNotice = ( { variant = 'error' }: FairUsageNoticeProps ) => {
+	const useFairUsageNoticeMessageElement = useFairUsageNoticeMessage();
+
+	if ( variant === 'muted' ) {
+		return (
+			<span className="jetpack-ai-fair-usage-notice-muted-variant">
+				{ useFairUsageNoticeMessageElement }
+			</span>
+		);
+	}
+
+	if ( variant === 'error' ) {
+		return (
+			<Notice status="error" isDismissible={ false } className="jetpack-ai-fair-usage-notice">
+				{ useFairUsageNoticeMessageElement }
+			</Notice>
+		);
+	}
+
+	return null;
+};
+
+const QuotaExceededMessage = props => {
+	const { upgradeType, currentTier } = useAiFeature();
+
+	// Return notice component for the fair usage limit message, on unlimited plans.
+	if ( currentTier?.value === 1 ) {
+		return <FairUsageNotice />;
+	}
+
+	// If the user is on a VIP site, show the VIP upgrade prompt.
+	if ( upgradeType === 'vip' ) {
+		return VIPUpgradePrompt( {
+			description: props.description,
+			useLightNudge: props?.useLightNudge,
+		} );
+	}
+
+	return DefaultUpgradePrompt( props );
+};
+
+export default QuotaExceededMessage;

package/src/components/quota-exceeded-message/light-nudge.tsx

@@ -0,0 +1,38 @@
+import { Button, Notice } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+import './style.scss';
+
+export const LightNudge = ( {
+	title,
+	description,
+	buttonText = null,
+	checkoutUrl = null,
+	goToCheckoutPage = null,
+	isRedirecting = false,
+	showButton = true,
+	target = '_top',
+} ) => {
+	const redirectingText = __( 'Redirecting…', 'jetpack-ai-client' );
+
+	return (
+		<div className="jetpack-upgrade-plan-banner-light">
+			<Notice status="error" isDismissible={ false }>
+				<p>
+					{ title && <strong>{ title }</strong> }
+					{ description }{ ' ' }
+					{ showButton && (
+						<Button
+							href={ isRedirecting ? null : checkoutUrl } // Only for server-side rendering, since onClick doesn't work there.
+							onClick={ goToCheckoutPage }
+							variant="link"
+							target={ target }
+						>
+							{ isRedirecting ? redirectingText : buttonText }
+						</Button>
+					) }
+				</p>
+			</Notice>
+		</div>
+	);
+};

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

@@ -0,0 +1,35 @@
+@import '@automattic/jetpack-base-styles/style';
+
+.jetpack-upgrade-plan-banner__wrapper {
+    column-gap: 32px;
+}
+
+.jetpack-upgrade-plan-banner.jetpack-ai-upgrade-banner {
+    .jetpack-upgrade-plan-banner__wrapper {
+        .components-button.is-primary.is-busy {
+            background: var( --jp-white );
+            color: var( --jp-black );
+        }
+    }
+}
+
+.jetpack-ai-fair-usage-notice-muted-variant {
+    line-height: 1.4;
+    margin: 0px;
+    text-wrap: pretty;
+    font-size: calc(13px);
+    font-weight: normal;
+    color: #757575;
+
+    a {
+        color: #757575;
+    }
+}
+
+.jetpack-ai-fair-usage-notice {
+    color: #1E1E1E;
+
+    a {
+        color: #1E1E1E;
+    }
+}

package/src/constants.ts

@@ -114,3 +114,8 @@ export const WRITE_POST_FROM_LIST_LABEL = __( 'Write a post from this list', 'je
 export const GENERATE_TITLE_LABEL = __( 'Generate a post title', 'jetpack-ai-client' );
 export const SUMMARY_BASED_ON_TITLE_LABEL = __( 'Summary based on title', 'jetpack-ai-client' );
 export const CONTINUE_LABEL = __( 'Continue writing', 'jetpack-ai-client' );
+
+// Jetpack Sidebar
+export const PLACEMENT_JETPACK_SIDEBAR = 'jetpack-sidebar' as const;
+export const PLACEMENT_DOCUMENT_SETTINGS = 'document-settings' as const;
+export const PLACEMENT_PRE_PUBLISH = 'pre-publish' as const;