@automattic/jetpack-ai-client 0.14.6 → 0.15.0

package/src/logo-generator/components/logo-presenter.tsx

@@ -0,0 +1,234 @@
+/**
+ * External dependencies
+ */
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
+import { Button, Icon } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import debugFactory from 'debug';
+/**
+ * Internal dependencies
+ */
+import CheckIcon from '../assets/icons/check.js';
+import LogoIcon from '../assets/icons/logo.js';
+import MediaIcon from '../assets/icons/media.js';
+import { EVENT_SAVE, EVENT_USE } from '../constants.js';
+import useLogoGenerator from '../hooks/use-logo-generator.js';
+import useRequestErrors from '../hooks/use-request-errors.js';
+import { updateLogo } from '../lib/logo-storage.js';
+import { STORE_NAME } from '../store/index.js';
+import { ImageLoader } from './image-loader.js';
+import './logo-presenter.scss';
+/**
+ * Types
+ */
+import type { Logo } from '../store/types.js';
+import type { LogoPresenterProps } from '../types.js';
+import type React from 'react';
+
+const debug = debugFactory( 'jetpack-ai-calypso:logo-presenter' );
+
+const SaveInLibraryButton: React.FC< { siteId: string } > = ( { siteId } ) => {
+	const { tracks } = useAnalytics();
+	const { recordEvent: recordTracksEvent } = tracks;
+	const {
+		saveLogo,
+		selectedLogo,
+		isSavingLogoToLibrary: saving,
+		logos,
+		selectedLogoIndex,
+		context,
+	} = useLogoGenerator();
+	const saved = !! selectedLogo?.mediaId;
+
+	const { loadLogoHistory } = useDispatch( STORE_NAME );
+
+	const handleClick = async () => {
+		if ( ! saved && ! saving ) {
+			recordTracksEvent( EVENT_SAVE, {
+				context,
+				logos_count: logos.length,
+				selected_logo: selectedLogoIndex ? selectedLogoIndex + 1 : 0,
+			} );
+
+			try {
+				const savedLogo = await saveLogo( selectedLogo );
+
+				// Update localStorage
+				updateLogo( {
+					siteId,
+					url: selectedLogo.url,
+					newUrl: savedLogo.mediaURL,
+					mediaId: savedLogo.mediaId,
+				} );
+
+				// Update state
+				loadLogoHistory( siteId );
+			} catch ( error ) {
+				debug( 'Error saving logo', error );
+			}
+		}
+	};
+
+	const savingLabel = __( 'Saving…', 'jetpack-ai-client' );
+	const savedLabel = __( 'Saved', 'jetpack-ai-client' );
+
+	return ! saving && ! saved ? (
+		<Button className="jetpack-ai-logo-generator-modal-presenter__action" onClick={ handleClick }>
+			<Icon icon={ <MediaIcon /> } />
+			<span className="action-text">{ __( 'Save in Library', 'jetpack-ai-client' ) }</span>
+		</Button>
+	) : (
+		<button className="jetpack-ai-logo-generator-modal-presenter__action">
+			<Icon icon={ saving ? <MediaIcon /> : <CheckIcon /> } />
+			<span className="action-text">{ saving ? savingLabel : savedLabel }</span>
+		</button>
+	);
+};
+
+const UseOnSiteButton: React.FC< { onApplyLogo: () => void } > = ( { onApplyLogo } ) => {
+	const { tracks } = useAnalytics();
+	const { recordEvent: recordTracksEvent } = tracks;
+	const {
+		applyLogo,
+		isSavingLogoToLibrary,
+		isApplyingLogo,
+		selectedLogo,
+		logos,
+		selectedLogoIndex,
+		context,
+	} = useLogoGenerator();
+
+	const handleClick = async () => {
+		if ( ! isApplyingLogo && ! isSavingLogoToLibrary ) {
+			recordTracksEvent( EVENT_USE, {
+				context,
+				logos_count: logos.length,
+				selected_logo: selectedLogoIndex != null ? selectedLogoIndex + 1 : 0,
+			} );
+
+			try {
+				await applyLogo();
+				onApplyLogo();
+			} catch ( error ) {
+				debug( 'Error applying logo', error );
+			}
+		}
+	};
+
+	return isApplyingLogo && ! isSavingLogoToLibrary ? (
+		<button className="jetpack-ai-logo-generator-modal-presenter__action">
+			<Icon icon={ <LogoIcon /> } />
+			<span className="action-text">{ __( 'Applying logo…', 'jetpack-ai-client' ) }</span>
+		</button>
+	) : (
+		<Button
+			className="jetpack-ai-logo-generator-modal-presenter__action"
+			onClick={ handleClick }
+			disabled={ isSavingLogoToLibrary || ! selectedLogo?.mediaId }
+		>
+			<Icon icon={ <LogoIcon /> } />
+			<span className="action-text">{ __( 'Use on Site', 'jetpack-ai-client' ) }</span>
+		</Button>
+	);
+};
+
+const LogoLoading: React.FC = () => {
+	return (
+		<>
+			<ImageLoader className="jetpack-ai-logo-generator-modal-presenter__logo" />
+			<span className="jetpack-ai-logo-generator-modal-presenter__loading-text">
+				{ __( 'Generating new logo…', 'jetpack-ai-client' ) }
+			</span>
+		</>
+	);
+};
+
+const LogoReady: React.FC< { siteId: string; logo: Logo; onApplyLogo: () => void } > = ( {
+	siteId,
+	logo,
+	onApplyLogo,
+} ) => {
+	return (
+		<>
+			<img
+				src={ logo.url }
+				alt={ logo.description }
+				className="jetpack-ai-logo-generator-modal-presenter__logo"
+			/>
+			<div className="jetpack-ai-logo-generator-modal-presenter__action-wrapper">
+				<span className="jetpack-ai-logo-generator-modal-presenter__description">
+					{ logo.description }
+				</span>
+				<div className="jetpack-ai-logo-generator-modal-presenter__actions">
+					<SaveInLibraryButton siteId={ siteId } />
+					<UseOnSiteButton onApplyLogo={ onApplyLogo } />
+				</div>
+			</div>
+		</>
+	);
+};
+
+const LogoUpdated: React.FC< { logo: Logo } > = ( { logo } ) => {
+	return (
+		<>
+			<img
+				src={ logo.url }
+				alt={ logo.description }
+				className="jetpack-ai-logo-generator-modal-presenter__logo"
+			/>
+			<div className="jetpack-ai-logo-generator-modal-presenter__success-wrapper">
+				<Icon icon={ <CheckIcon /> } />
+				<span>{ __( 'Your logo has been successfully updated!', 'jetpack-ai-client' ) }</span>
+			</div>
+		</>
+	);
+};
+
+export const LogoPresenter: React.FC< LogoPresenterProps > = ( {
+	logo = null,
+	loading = false,
+	onApplyLogo,
+	logoAccepted = false,
+	siteId,
+} ) => {
+	const { isRequestingImage } = useLogoGenerator();
+	const { saveToLibraryError, logoUpdateError } = useRequestErrors();
+
+	if ( ! logo ) {
+		return null;
+	}
+
+	let logoContent: React.ReactNode;
+
+	if ( loading || isRequestingImage ) {
+		logoContent = <LogoLoading />;
+	} else if ( logoAccepted ) {
+		logoContent = <LogoUpdated logo={ logo } />;
+	} else {
+		logoContent = (
+			<LogoReady siteId={ String( siteId ) } logo={ logo } onApplyLogo={ onApplyLogo } />
+		);
+	}
+
+	return (
+		<div className="jetpack-ai-logo-generator-modal-presenter__wrapper">
+			<div className="jetpack-ai-logo-generator-modal-presenter">
+				<div className="jetpack-ai-logo-generator-modal-presenter__content">{ logoContent }</div>
+				{ ! logoAccepted && (
+					<div className="jetpack-ai-logo-generator-modal-presenter__rectangle" />
+				) }
+			</div>
+			{ saveToLibraryError && (
+				<div className="jetpack-ai-logo-generator__prompt-error">
+					{ __( 'Error saving the logo to your library. Please try again.', 'jetpack-ai-client' ) }
+				</div>
+			) }
+			{ logoUpdateError && (
+				<div className="jetpack-ai-logo-generator__prompt-error">
+					{ __( 'Error applying the logo to your site. Please try again.', 'jetpack-ai-client' ) }
+				</div>
+			) }
+		</div>
+	);
+};

package/src/logo-generator/components/prompt.scss

@@ -0,0 +1,102 @@
+@import '@automattic/jetpack-base-styles/root-variables';
+
+.jetpack-ai-logo-generator__prompt {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	font-size: var(--font-body-small);
+}
+
+.jetpack-ai-logo-generator__prompt-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	align-self: stretch;
+
+	.jetpack-ai-logo-generator__prompt-label {
+		font-weight: 500;
+	}
+
+	.jetpack-ai-logo-generator__prompt-actions {
+		display: flex;
+		font-size: var(--font-body-extra-small);
+		line-height: 20px;
+
+		.jetpack-ai-logo-generator-icon {
+			margin-right: 4px;
+		}
+	}
+}
+
+.jetpack-ai-logo-generator__prompt-query {
+	display: flex;
+	padding: 8px 8px 8px var(--grid-unit-15, 16px);
+	justify-content: space-between;
+	align-items: flex-end;
+	align-self: stretch;
+	border-radius: calc(4px * 2);
+	border: 1px solid var(--studio-gray-10, #ccc);
+	background: var(--studio-white, #fff);
+	gap: 8px;
+
+	@media (min-width: 700px) {
+		gap: 48px;
+	}
+
+	.prompt-query__input {
+		border: 0;
+		resize: none;
+		flex-grow: 1;
+		padding: 6px 0;
+		vertical-align: baseline;
+		color: var(--studio-gray-100);
+		line-height: 1.6;
+		word-break: break-word;
+
+		&:focus,
+		&:active {
+			outline: 0;
+		}
+
+		&[contentEditable="false"] {
+			color: var(--studio-gray-50, #646970);
+		}
+
+		&[data-placeholder]:empty::before {
+			content: attr(data-placeholder);
+			color: var(--studio-gray-50, #646970);
+		}
+
+		&[data-placeholder]:empty:focus::before {
+			content: "";
+		}
+	}
+}
+
+.jetpack-ai-logo-generator__prompt-footer {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.jetpack-ai-logo-generator__prompt-requests {
+	color: var(--studio-gray-50, #646970);
+	font-size: var(--font-body-extra-small);
+	line-height: 21px;
+	display: flex;
+
+	& .prompt-footer__icon {
+		height: 20px;
+		width: 20px;
+
+		path {
+			fill: var(--studio-gray-20, #a7aaad);
+		}
+	}
+}
+
+.jetpack-ai-logo-generator__prompt-error {
+	color: var(--studio-red-50, #d63638);
+	font-size: var(--font-body-extra-small);
+	line-height: 21px;
+}

package/src/logo-generator/components/prompt.tsx

@@ -0,0 +1,211 @@
+/**
+ * External dependencies
+ */
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
+import { Button, Tooltip } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { Icon, info } from '@wordpress/icons';
+import debugFactory from 'debug';
+import { useCallback, useEffect, useState, useRef } from 'react';
+/**
+ * Internal dependencies
+ */
+import AiIcon from '../assets/icons/ai.js';
+import {
+	EVENT_GENERATE,
+	MINIMUM_PROMPT_LENGTH,
+	EVENT_UPGRADE,
+	EVENT_PLACEMENT_INPUT_FOOTER,
+} from '../constants.js';
+import { useCheckout } from '../hooks/use-checkout.js';
+import useLogoGenerator from '../hooks/use-logo-generator.js';
+import useRequestErrors from '../hooks/use-request-errors.js';
+import { UpgradeNudge } from './upgrade-nudge.js';
+import './prompt.scss';
+
+const debug = debugFactory( 'jetpack-ai-calypso:prompt-box' );
+
+export const Prompt: React.FC< { initialPrompt?: string } > = ( { initialPrompt = '' } ) => {
+	const { tracks } = useAnalytics();
+	const { recordEvent: recordTracksEvent } = tracks;
+	const [ prompt, setPrompt ] = useState< string >( initialPrompt );
+	const [ requestsRemaining, setRequestsRemaining ] = useState( 0 );
+	const { enhancePromptFetchError, logoFetchError } = useRequestErrors();
+	const { nextTierCheckoutURL: checkoutUrl, hasNextTier } = useCheckout();
+	const hasPrompt = prompt?.length >= MINIMUM_PROMPT_LENGTH;
+
+	const {
+		generateLogo,
+		enhancePrompt,
+		setIsEnhancingPrompt,
+		isBusy,
+		isEnhancingPrompt,
+		site,
+		getAiAssistantFeature,
+		requireUpgrade,
+		context,
+	} = useLogoGenerator();
+
+	const enhancingLabel = __( 'Enhancing…', 'jetpack-ai-client' );
+	const enhanceLabel = __( 'Enhance prompt', 'jetpack-ai-client' );
+	const enhanceButtonLabel = isEnhancingPrompt ? enhancingLabel : enhanceLabel;
+
+	const inputRef = useRef< HTMLDivElement | null >( null );
+
+	const onEnhance = useCallback( async () => {
+		debug( 'Enhancing prompt', prompt );
+		setIsEnhancingPrompt( true );
+		recordTracksEvent( EVENT_GENERATE, { context, tool: 'enhance-prompt' } );
+
+		try {
+			const enhancedPrompt = await enhancePrompt( { prompt } );
+			setPrompt( enhancedPrompt );
+			setIsEnhancingPrompt( false );
+		} catch ( error ) {
+			debug( 'Error enhancing prompt', error );
+			setIsEnhancingPrompt( false );
+		}
+	}, [ context, enhancePrompt, prompt, setIsEnhancingPrompt ] );
+
+	const featureData = getAiAssistantFeature( String( site?.id || '' ) );
+
+	const currentLimit = featureData?.currentTier?.value || 0;
+	const currentUsage = featureData?.usagePeriod?.requestsCount || 0;
+	const isUnlimited = currentLimit === 1;
+
+	useEffect( () => {
+		if ( currentLimit - currentUsage <= 0 ) {
+			setRequestsRemaining( 0 );
+		} else {
+			setRequestsRemaining( currentLimit - currentUsage );
+		}
+	}, [ currentLimit, currentUsage ] );
+
+	useEffect( () => {
+		// Update prompt text node after enhancement
+		if ( inputRef.current && inputRef.current.textContent !== prompt ) {
+			inputRef.current.textContent = prompt;
+		}
+	}, [ prompt ] );
+
+	const onGenerate = useCallback( async () => {
+		recordTracksEvent( EVENT_GENERATE, { context, tool: 'image' } );
+		generateLogo( { prompt } );
+	}, [ context, generateLogo, prompt ] );
+
+	const onPromptInput = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		setPrompt( event.target.textContent || '' );
+	};
+
+	const onPromptPaste = ( event: React.ClipboardEvent< HTMLInputElement > ) => {
+		event.preventDefault();
+
+		// Paste plain text only
+		const text = event.clipboardData.getData( 'text/plain' );
+
+		const selection = window.getSelection();
+		if ( ! selection || ! selection.rangeCount ) {
+			return;
+		}
+		selection.deleteFromDocument();
+		const range = selection.getRangeAt( 0 );
+		range.insertNode( document.createTextNode( text ) );
+		selection.collapseToEnd();
+
+		setPrompt( inputRef.current?.textContent || '' );
+	};
+
+	const onUpgradeClick = () => {
+		recordTracksEvent( EVENT_UPGRADE, { context, placement: EVENT_PLACEMENT_INPUT_FOOTER } );
+	};
+
+	return (
+		<div className="jetpack-ai-logo-generator__prompt">
+			<div className="jetpack-ai-logo-generator__prompt-header">
+				<div className="jetpack-ai-logo-generator__prompt-label">
+					{ __( 'Describe your site:', 'jetpack-ai-client' ) }
+				</div>
+				<div className="jetpack-ai-logo-generator__prompt-actions">
+					<Button
+						variant="link"
+						disabled={ isBusy || requireUpgrade || ! hasPrompt }
+						onClick={ onEnhance }
+					>
+						<AiIcon />
+						<span>{ enhanceButtonLabel }</span>
+					</Button>
+				</div>
+			</div>
+			<div className="jetpack-ai-logo-generator__prompt-query">
+				<div
+					ref={ inputRef }
+					contentEditable={ ! isBusy && ! requireUpgrade }
+					// The content editable div is expected to be updated by the enhance prompt, so warnings are suppressed
+					suppressContentEditableWarning
+					className="prompt-query__input"
+					onInput={ onPromptInput }
+					onPaste={ onPromptPaste }
+					data-placeholder={ __(
+						'Describe your site or simply ask for a logo specifying some details about it',
+						'jetpack-ai-client'
+					) }
+				></div>
+				<Button
+					variant="primary"
+					className="jetpack-ai-logo-generator__prompt-submit"
+					onClick={ onGenerate }
+					disabled={ isBusy || requireUpgrade || ! hasPrompt }
+				>
+					{ __( 'Generate', 'jetpack-ai-client' ) }
+				</Button>
+			</div>
+			<div className="jetpack-ai-logo-generator__prompt-footer">
+				{ ! isUnlimited && ! requireUpgrade && (
+					<div className="jetpack-ai-logo-generator__prompt-requests">
+						<div>
+							{ sprintf(
+								// translators: %u is the number of requests
+								__( '%u requests remaining.', 'jetpack-ai-client' ),
+								requestsRemaining
+							) }
+						</div>
+						{ hasNextTier && (
+							<>
+								&nbsp;
+								<Button
+									variant="link"
+									href={ checkoutUrl }
+									target="_blank"
+									onClick={ onUpgradeClick }
+								>
+									{ __( 'Upgrade', 'jetpack-ai-client' ) }
+								</Button>
+							</>
+						) }
+						&nbsp;
+						<Tooltip
+							text={ __(
+								'Logo generation costs 10 requests; prompt enhancement costs 1 request each',
+								'jetpack-ai-client'
+							) }
+							placement="bottom"
+						>
+							<Icon className="prompt-footer__icon" icon={ info } />
+						</Tooltip>
+					</div>
+				) }
+				{ ! isUnlimited && requireUpgrade && <UpgradeNudge /> }
+				{ enhancePromptFetchError && (
+					<div className="jetpack-ai-logo-generator__prompt-error">
+						{ __( 'Error enhancing prompt. Please try again.', 'jetpack-ai-client' ) }
+					</div>
+				) }
+				{ logoFetchError && (
+					<div className="jetpack-ai-logo-generator__prompt-error">
+						{ __( 'Error generating logo. Please try again.', 'jetpack-ai-client' ) }
+					</div>
+				) }
+			</div>
+		</div>
+	);
+};

package/src/logo-generator/components/upgrade-nudge.scss

@@ -0,0 +1,43 @@
+@import '@automattic/jetpack-base-styles/root-variables';
+
+.jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	font-size: var(--font-body-small);
+	background: var(--jp-black);
+	padding: 8px 16px;
+	border-radius: 2px;
+}
+
+.jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .jetpack-upgrade-plan-banner__banner-description {
+	color: var(--jp-white);
+	line-height: 21px;
+	word-wrap: break-word;
+	vertical-align: middle;
+}
+
+.jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .jetpack-upgrade-plan-banner__icon {
+	width: 24px;
+	height: 24px;
+	position: relative;
+	vertical-align: middle;
+	margin-right: 8px;
+
+	path {
+		fill: var(--jp-gray-30);
+	}
+}
+
+.jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .components-button {
+	height: auto;
+	line-height: 20px;
+	font-size: var(--font-body-extra-small);
+	font-weight: 600;
+	padding: 4px 8px;
+}
+
+.jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .components-button.is-primary {
+	background: var(--jp-white);
+	color: var(--jp-black);
+}

package/src/logo-generator/components/upgrade-nudge.tsx

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
+import { Button } from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Icon, warning } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+import { EVENT_PLACEMENT_UPGRADE_PROMPT, EVENT_UPGRADE } from '../constants.js';
+import { useCheckout } from '../hooks/use-checkout.js';
+import useLogoGenerator from '../hooks/use-logo-generator.js';
+import './upgrade-nudge.scss';
+
+export const UpgradeNudge = () => {
+	const { tracks } = useAnalytics();
+	const { recordEvent: recordTracksEvent } = tracks;
+	const buttonText = __( 'Upgrade', 'jetpack-ai-client' );
+	const upgradeMessage = createInterpolateElement(
+		__(
+			'Not enough requests left to generate a logo. <strong>Upgrade now to increase it.</strong>',
+			'jetpack-ai-client'
+		),
+		{
+			strong: <strong />,
+		}
+	);
+
+	const { nextTierCheckoutURL: checkoutUrl } = useCheckout();
+	const { context } = useLogoGenerator();
+
+	const handleUpgradeClick = () => {
+		recordTracksEvent( EVENT_UPGRADE, { context, placement: EVENT_PLACEMENT_UPGRADE_PROMPT } );
+	};
+
+	return (
+		<div className="jetpack-upgrade-plan-banner">
+			<div className="jetpack-upgrade-plan-banner__wrapper">
+				<div>
+					<Icon className="jetpack-upgrade-plan-banner__icon" icon={ warning } />
+					<span className="jetpack-upgrade-plan-banner__banner-description">
+						{ upgradeMessage }
+					</span>
+				</div>
+				<Button
+					href={ checkoutUrl }
+					target="_blank"
+					className="is-primary"
+					onClick={ handleUpgradeClick }
+				>
+					{ buttonText }
+				</Button>
+			</div>
+		</div>
+	);
+};