@automattic/jetpack-ai-client 0.25.7 → 0.26.1

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

@@ -0,0 +1,88 @@
+.ai-image-modal {
+	&__content {
+		display: flex;
+		margin-top: 32px;
+		flex-direction: column;
+		justify-content: center;
+		gap: 8px;
+
+		.jetpack-ai-fair-usage-notice {
+			width: 100%;
+		}
+	}
+
+	&__actions {
+		width: 100%;
+		display: flex;
+	}
+
+	&__user-prompt {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		flex-direction: row;
+	}
+
+	&__user-prompt-textarea {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+
+		div {
+			width: 100%;
+			display: flex;
+		}
+
+		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: space-between;
+		align-items: center;
+		margin-right: -32px;
+		margin-left: -32px;
+		margin-top: 32px;
+		margin-bottom: -32px;
+		padding: 8px 32px;
+		border-top: solid 1px #dcdcde;
+		height: 60px;
+	}
+}

package/src/components/ai-image/components/ai-image-modal.tsx

@@ -0,0 +1,240 @@
+/**
+ * External dependencies
+ */
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
+import { SelectControl } from '@wordpress/components';
+import { useCallback, useRef, useState, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import debugFactory from 'debug';
+/**
+ * Internal dependencies
+ */
+import {
+	IMAGE_STYLE_NONE,
+	IMAGE_STYLE_AUTO,
+	ImageStyleObject,
+	ImageStyle,
+} from '../../../hooks/use-image-generator/constants.js';
+import { AiModalPromptInput } from '../../../logo-generator/index.js';
+import AiModalFooter from '../../ai-modal-footer/index.js';
+import AiAssistantModal from '../../modal/index.js';
+import QuotaExceededMessage from '../../quota-exceeded-message/index.js';
+import Carrousel, { CarrouselImages } from './carrousel.js';
+import UsageCounter from './usage-counter.js';
+import './ai-image-modal.scss';
+
+type AiImageModalProps = {
+	title: string;
+	cost: number;
+	open: boolean;
+	placement: string;
+	images: CarrouselImages;
+	currentIndex: number;
+	onClose: () => void;
+	onTryAgain: ( { userPrompt, style }: { userPrompt?: string; style?: string } ) => void;
+	onGenerate: ( { userPrompt, style }: { userPrompt?: string; style?: string } ) => void;
+	generating: boolean;
+	notEnoughRequests: boolean;
+	requireUpgrade: boolean;
+	currentLimit: number;
+	currentUsage: number;
+	isUnlimited: boolean;
+	upgradeDescription: string;
+	hasError: boolean;
+	postContent?: string | boolean | null;
+	handlePreviousImage: () => void;
+	handleNextImage: () => void;
+	acceptButton: React.JSX.Element;
+	autoStart?: boolean;
+	autoStartAction?: ( { userPrompt, style }: { userPrompt?: string; style?: string } ) => void;
+	generateButtonLabel: string;
+	instructionsPlaceholder: string;
+	imageStyles?: Array< ImageStyleObject >;
+	onGuessStyle?: ( userPrompt: string ) => Promise< ImageStyle >;
+	prompt?: string;
+	setPrompt?: ( userPrompt: string ) => void;
+	initialStyle?: ImageStyle;
+	inputDisabled?: boolean;
+	actionDisabled?: boolean;
+};
+
+const FEATURED_IMAGE_UPGRADE_PROMPT_PLACEMENT = 'ai-image-generator';
+
+const debug = debugFactory( 'jetpack-ai-client:ai-image-modal' );
+
+/**
+ * AiImageModal component
+ * @param {AiImageModalProps} props - The component properties.
+ * @return {React.ReactElement} - rendered component.
+ */
+export default function AiImageModal( {
+	title,
+	cost,
+	open,
+	images,
+	currentIndex = 0,
+	onClose = null,
+	onTryAgain = null,
+	onGenerate = null,
+	generating = false,
+	notEnoughRequests = false,
+	requireUpgrade = false,
+	currentLimit = null,
+	currentUsage = null,
+	isUnlimited = false,
+	upgradeDescription = null,
+	hasError = false,
+	handlePreviousImage = () => {},
+	handleNextImage = () => {},
+	acceptButton = null,
+	autoStart = false,
+	autoStartAction = null,
+	instructionsPlaceholder = null,
+	imageStyles = [],
+	onGuessStyle = null,
+	prompt = '',
+	setPrompt = () => {},
+	initialStyle = null,
+	inputDisabled = false,
+	actionDisabled = false,
+}: AiImageModalProps ) {
+	const { tracks } = useAnalytics();
+	const { recordEvent: recordTracksEvent } = tracks;
+	const triggeredAutoGeneration = useRef( false );
+	const [ showStyleSelector, setShowStyleSelector ] = useState( false );
+	const [ style, setStyle ] = useState< ImageStyle >( null );
+	const [ styles, setStyles ] = useState< Array< ImageStyleObject > >( imageStyles || [] );
+
+	const handleTryAgain = useCallback( () => {
+		onTryAgain?.( { userPrompt: prompt, style } );
+	}, [ onTryAgain, prompt, style ] );
+
+	const handleGenerate = useCallback( async () => {
+		if ( style === IMAGE_STYLE_AUTO && onGuessStyle ) {
+			recordTracksEvent( 'jetpack_ai_general_image_guess_style', {
+				context: 'block-editor',
+				tool: 'image',
+			} );
+			const guessedStyle = ( await onGuessStyle( prompt ) ) || IMAGE_STYLE_NONE;
+			setStyle( guessedStyle );
+			debug( 'guessed style', guessedStyle );
+			onGenerate?.( { userPrompt: prompt, style: guessedStyle } );
+		} else {
+			onGenerate?.( { userPrompt: prompt, style } );
+		}
+	}, [ onGenerate, prompt, style, onGuessStyle, recordTracksEvent ] );
+
+	const updateStyle = useCallback(
+		( imageStyle: ImageStyle ) => {
+			debug( 'change style', imageStyle );
+			setStyle( imageStyle );
+			recordTracksEvent( 'jetpack_ai_image_generator_switch_style', {
+				context: 'block-editor',
+				style: imageStyle,
+			} );
+		},
+		[ setStyle, recordTracksEvent ]
+	);
+
+	// Controllers
+	const upgradePromptVisible = ( requireUpgrade || notEnoughRequests ) && ! generating;
+	const counterVisible = Boolean( ! isUnlimited && cost && currentLimit );
+
+	const generateLabel = __( 'Generate', 'jetpack-ai-client' );
+	const tryAgainLabel = __( 'Try again', 'jetpack-ai-client' );
+
+	/**
+	 * Trigger image generation automatically.
+	 */
+	useEffect( () => {
+		if ( autoStart && open ) {
+			if ( ! triggeredAutoGeneration.current ) {
+				triggeredAutoGeneration.current = true;
+				autoStartAction?.( {} );
+			}
+		}
+	}, [ autoStart, autoStartAction, open ] );
+
+	// initialize styles dropdown
+	useEffect( () => {
+		if ( imageStyles && imageStyles.length > 0 ) {
+			// Sort styles to have "None" and "Auto" first
+			setStyles(
+				[
+					imageStyles.find( ( { value } ) => value === IMAGE_STYLE_NONE ),
+					imageStyles.find( ( { value } ) => value === IMAGE_STYLE_AUTO ),
+					...imageStyles.filter(
+						( { value } ) => ! [ IMAGE_STYLE_NONE, IMAGE_STYLE_AUTO ].includes( value )
+					),
+				].filter( v => v ) // simplest way to get rid of empty values
+			);
+			setShowStyleSelector( true );
+			setStyle( initialStyle || IMAGE_STYLE_NONE );
+		}
+	}, [ imageStyles, initialStyle ] );
+
+	return (
+		<>
+			{ open && (
+				<AiAssistantModal handleClose={ onClose } title={ title }>
+					<div className="ai-image-modal__content">
+						{ showStyleSelector && (
+							<div style={ { display: 'flex', alignItems: 'center', gap: 16 } }>
+								<div style={ { fontWeight: 500, flexGrow: 1 } }>
+									{ __( 'Generate image', 'jetpack-ai-client' ) }
+								</div>
+								<div>
+									<SelectControl
+										__nextHasNoMarginBottom
+										value={ style }
+										options={ styles }
+										onChange={ updateStyle }
+									/>
+								</div>
+							</div>
+						) }
+						<AiModalPromptInput
+							prompt={ prompt }
+							setPrompt={ setPrompt }
+							disabled={ inputDisabled }
+							actionDisabled={ actionDisabled }
+							generateHandler={ hasError ? handleTryAgain : handleGenerate }
+							placeholder={ instructionsPlaceholder }
+							buttonLabel={ hasError ? tryAgainLabel : generateLabel }
+						/>
+						{ upgradePromptVisible && (
+							<QuotaExceededMessage
+								description={ upgradeDescription }
+								placement={ FEATURED_IMAGE_UPGRADE_PROMPT_PLACEMENT }
+								useLightNudge={ true }
+							/>
+						) }
+						<div className="ai-image-modal__actions">
+							<div className="ai-image-modal__actions-left">
+								{ counterVisible && (
+									<UsageCounter
+										cost={ cost }
+										currentLimit={ currentLimit }
+										currentUsage={ currentUsage }
+									/>
+								) }
+							</div>
+						</div>
+						<div className="ai-image-modal__image-canvas">
+							<Carrousel
+								images={ images }
+								current={ currentIndex }
+								handlePreviousImage={ handlePreviousImage }
+								handleNextImage={ handleNextImage }
+								actions={ acceptButton }
+							/>
+						</div>
+					</div>
+					<div className="ai-image-modal__footer">
+						<AiModalFooter />
+					</div>
+				</AiAssistantModal>
+			) }
+		</>
+	);
+}

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

@@ -0,0 +1,163 @@
+$scale-factor: 0.55;
+
+.ai-assistant-image {
+	&__blank {
+		display: flex;
+		justify-content: center;
+		position: relative;
+		align-items: center;
+		width: 100%;
+		height: auto;
+
+		&-content {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			&.is-dotted {
+				border: 1px dotted;
+			}
+		}
+	}
+
+	&__loading {
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	&__error {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+
+		&-message {
+			font-size: 10px;
+			color: red;
+		}
+	}
+
+	&__carrousel {
+		flex-direction: column;
+		width: 100%;
+
+		&-images {
+			position: relative;
+			display: flex;
+			align-items: center;
+			overflow: hidden;
+			height: calc( 768px * $scale-factor );
+
+			.ai-carrousel {
+				&__prev {
+					left: 0;
+				}
+
+				&__next {
+					right: 0;
+				}
+
+				&__prev,
+				&__next {
+					&:hover {
+						background-color: rgba( 0, 0, 0, 0.3 );
+						opacity: 1;
+					}
+
+					&-icon {
+						fill: white;
+						&.is-disabled {
+							fill: gray;
+						}
+					}
+
+					cursor: pointer;
+					z-index: 1;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					transition: opacity 0.3s;
+					border: none;
+					position: absolute;
+					top: 0;
+					bottom: 0;
+					height: 100%;
+					width: 60px;
+					opacity: 0;
+					background: transparent;
+				}
+			}
+		}
+
+		&-footer {
+			display: flex;
+			justify-content: space-between;
+			margin-top: 8px;
+		}
+
+		&-footer-left {
+			display: flex;
+			flex-grow: 1;
+		}
+
+		&-counter {
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			font-size: 13px;
+			padding: 6px 0;
+
+			.ai-carrousel {
+				&__prev,
+				&__next {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					cursor: pointer;
+					border: none;
+					background: transparent;
+					padding: 0;
+
+					&-icon {
+						&.is-disabled {
+							fill: gray;
+						}
+					}
+				}
+			}
+		}
+
+		&-image {
+			max-height: calc( 768px * $scale-factor );
+			max-width: calc( 1024px * $scale-factor );
+			width: auto;
+			height: auto;
+			margin: auto 0;
+		}
+
+		&-image-container {
+			display: flex;
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			left: 8px;
+			transform: translateX( 100% );
+			transition: transform 0.5s;
+			flex-direction: column;
+			align-items: center;
+
+			&.is-prev {
+				transform: translateX( -100% );
+				left: -8px;
+			}
+
+			&.is-current {
+				transform: translateX( 0 );
+				position: static;
+			}
+		}
+	}
+}

package/src/components/ai-image/components/carrousel.tsx

@@ -0,0 +1,217 @@
+/**
+ * External dependencies
+ */
+import { Spinner } from '@wordpress/components';
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
+import clsx from 'clsx';
+/**
+ * Internal dependencies
+ */
+import AiFeedbackThumbs from '../../ai-feedback/index.js';
+import AiIcon from '../../ai-icon/index.js';
+import './carrousel.scss';
+
+export type CarrouselImageData = {
+	image?: string;
+	libraryId?: number | string;
+	prompt?: string;
+	revisedPrompt?: string;
+	libraryUrl?: string;
+	generating?: boolean;
+	error?: {
+		message: string;
+	};
+};
+
+export type CarrouselImages = CarrouselImageData[];
+
+type BlankImageProps = {
+	children: React.ReactNode;
+	isDotted?: boolean;
+	contentClassName?: string;
+};
+
+/**
+ * BlankImage component
+ * @param {BlankImageProps} props - The component properties.
+ * @return {React.ReactElement} - rendered component.
+ */
+function BlankImage( { children, isDotted = false, contentClassName = '' }: BlankImageProps ) {
+	const blankImage = (
+		<img
+			className="ai-assistant-image__carrousel-image"
+			src="data:image/svg+xml;utf8,<svg viewBox='0 0 1 1' width='1024' height='768' xmlns='http://www.w3.org/2000/svg'><path d='M0 0 L1 0 L1 1 L0 1 L0 0 Z' fill='none' /></svg>"
+			alt=""
+		/>
+	);
+
+	return (
+		<div className="ai-assistant-image__blank">
+			{ blankImage }
+			<div
+				className={ clsx( 'ai-assistant-image__blank-content', contentClassName, {
+					'is-dotted': isDotted,
+				} ) }
+			>
+				{ children }
+			</div>
+		</div>
+	);
+}
+
+type CarrouselProps = {
+	images: CarrouselImages;
+	current: number;
+	handlePreviousImage: () => void;
+	handleNextImage: () => void;
+	actions?: React.JSX.Element;
+};
+
+/**
+ * Carrousel component
+ * @param {CarrouselProps} props - The component properties.
+ * @return {React.ReactElement} - rendered component.
+ */
+export default function Carrousel( {
+	images,
+	current,
+	handlePreviousImage,
+	handleNextImage,
+	actions = null,
+}: CarrouselProps ) {
+	const [ imageFeedbackDisabled, setImageFeedbackDisabled ] = useState( false );
+	const prevButton = (
+		<button className="ai-carrousel__prev" onClick={ handlePreviousImage }>
+			<Icon
+				icon={ chevronLeft }
+				className={ clsx( 'ai-carrousel__prev-icon', {
+					'is-disabled': current === 0,
+				} ) }
+			/>
+		</button>
+	);
+
+	const nextButton = (
+		<button className="ai-carrousel__next" onClick={ handleNextImage }>
+			<Icon
+				icon={ chevronRight }
+				className={ clsx( 'ai-carrousel__next-icon', {
+					'is-disabled': current + 1 === images.length,
+				} ) }
+			/>
+		</button>
+	);
+
+	const total = images?.filter?.(
+		item => item?.generating || Object.hasOwn( item, 'image' ) || Object.hasOwn( item, 'libraryId' )
+	)?.length;
+
+	const actual = current === 0 && total === 0 ? 0 : current + 1;
+
+	useEffect( () => {
+		const imageData = images[ current ];
+		if ( ! imageData ) {
+			setImageFeedbackDisabled( true );
+		}
+
+		const { image, generating, error } = imageData || {};
+
+		// disable if there's an empty modal
+		if ( ! image && ! generating && ! error ) {
+			return setImageFeedbackDisabled( true );
+		}
+		// also disable if we're generating or have an error
+		if ( generating || error ) {
+			return setImageFeedbackDisabled( true );
+		}
+
+		setImageFeedbackDisabled( false );
+	}, [ current, images ] );
+
+	return (
+		<div className="ai-assistant-image__carrousel">
+			<div className="ai-assistant-image__carrousel-images">
+				{ images.length > 1 && prevButton }
+				{ images.map( ( { image, generating, error, revisedPrompt, libraryUrl }, index ) => (
+					<div
+						key={ `image:` + index }
+						className={ clsx( 'ai-assistant-image__carrousel-image-container', {
+							'is-current': current === index,
+							'is-prev': current > index,
+						} ) }
+					>
+						{ generating ? (
+							<BlankImage contentClassName="ai-assistant-image__loading">
+								{ __( 'Creating image…', 'jetpack-ai-client' ) }
+								<Spinner
+									style={ {
+										width: '50px',
+										height: '50px',
+									} }
+								/>
+							</BlankImage>
+						) : (
+							<>
+								{ error ? (
+									<BlankImage isDotted>
+										<div className="ai-assistant-image__error">
+											{ __(
+												'An error occurred while generating the image. Please, try again!',
+												'jetpack-ai-client'
+											) }
+											{ error?.message && (
+												<span className="ai-assistant-image__error-message">
+													{ error?.message }
+												</span>
+											) }
+										</div>
+									</BlankImage>
+								) : (
+									<>
+										{ ! generating && ! image && ! libraryUrl ? (
+											<BlankImage>
+												<AiIcon />
+											</BlankImage>
+										) : (
+											<img
+												className="ai-assistant-image__carrousel-image"
+												src={ image || libraryUrl }
+												alt={ revisedPrompt }
+											/>
+										) }
+									</>
+								) }
+							</>
+						) }
+					</div>
+				) ) }
+				{ images.length > 1 && nextButton }
+			</div>
+			<div className="ai-assistant-image__carrousel-footer">
+				<div className="ai-assistant-image__carrousel-footer-left">
+					<div className="ai-assistant-image__carrousel-counter">
+						{ prevButton }
+						{ actual } / { total }
+						{ nextButton }
+					</div>
+
+					<AiFeedbackThumbs
+						disabled={ imageFeedbackDisabled }
+						ratedItem={ images[ current ]?.libraryUrl || '' }
+						iconSize={ 20 }
+						options={ {
+							mediaLibraryId: Number( images[ current ].libraryId ),
+							prompt: images[ current ].prompt,
+							revisedPrompt: images[ current ].revisedPrompt,
+						} }
+						feature="image-generator"
+					/>
+				</div>
+
+				<div className="ai-assistant-image__carrousel-actions">{ actions }</div>
+			</div>
+		</div>
+	);
+}