@automattic/jetpack-ai-client 0.14.6 → 0.15.0

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

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import { EVENT_PLACEMENT_FREE_USER_SCREEN, EVENT_UPGRADE } from '../constants.js';
+import useLogoGenerator from '../hooks/use-logo-generator.js';
+/**
+ * Types
+ */
+import type React from 'react';
+
+export const UpgradeScreen: React.FC< {
+	onCancel: () => void;
+	upgradeURL: string;
+	reason: 'feature' | 'requests';
+} > = ( { onCancel, upgradeURL, reason } ) => {
+	const { tracks } = useAnalytics();
+	const { recordEvent: recordTracksEvent } = tracks;
+	const upgradeMessageFeature = __(
+		'Upgrade your Jetpack AI for access to exclusive features, including logo generation. This upgrade will also increase the amount of requests you can use in all AI-powered features.',
+		'jetpack-ai-client'
+	);
+
+	const upgradeMessageRequests = __(
+		'Not enough requests left to generate a logo. Upgrade your Jetpack AI to increase the amount of requests you can use in all AI-powered features.',
+		'jetpack-ai-client'
+	);
+
+	const { context } = useLogoGenerator();
+
+	const handleUpgradeClick = () => {
+		recordTracksEvent( EVENT_UPGRADE, { context, placement: EVENT_PLACEMENT_FREE_USER_SCREEN } );
+		onCancel();
+	};
+
+	return (
+		<div className="jetpack-ai-logo-generator-modal__notice-message-wrapper">
+			<div className="jetpack-ai-logo-generator-modal__notice-message">
+				<span className="jetpack-ai-logo-generator-modal__loading-message">
+					{ reason === 'feature' ? upgradeMessageFeature : upgradeMessageRequests }
+				</span>
+				&nbsp;
+				<Button variant="link" href="https://jetpack.com/ai/" target="_blank">
+					{ __( 'Learn more', 'jetpack-ai-client' ) }
+				</Button>
+			</div>
+			<div className="jetpack-ai-logo-generator-modal__notice-actions">
+				<Button variant="tertiary" onClick={ onCancel }>
+					{ __( 'Cancel', 'jetpack-ai-client' ) }
+				</Button>
+				<Button
+					variant="primary"
+					href={ upgradeURL }
+					target="_blank"
+					onClick={ handleUpgradeClick }
+				>
+					{ __( 'Upgrade', 'jetpack-ai-client' ) }
+				</Button>
+			</div>
+		</div>
+	);
+};

package/src/logo-generator/components/visit-site-banner.scss

@@ -0,0 +1,29 @@
+@import '@automattic/jetpack-base-styles/root-variables';
+
+.jetpack-ai-logo-generator-modal-visit-site-banner {
+	border-radius: 4px;
+	background: var(--studio-gray-0, #f6f7f7);
+	padding: 16px 20px;
+	display: flex;
+	gap: 16px;
+
+	@media (max-width: 700px) {
+		flex-direction: column;
+	}
+}
+
+.jetpack-ai-logo-generator-modal-visit-site-banner__jetpack-logo {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.jetpack-ai-logo-generator-modal-visit-site-banner__content {
+	font-size: var(--font-body-small, 14px);
+	display: flex;
+	flex-direction: column;
+
+	@media (max-width: 700px) {
+		gap: 8px;
+	}
+}

package/src/logo-generator/components/visit-site-banner.tsx

@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import { Button, Icon } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { external } from '@wordpress/icons';
+import clsx from 'clsx';
+/**
+ * Internal dependencies
+ */
+import jetpackLogo from '../assets/images/jetpack-logo.svg';
+import './visit-site-banner.scss';
+/**
+ * Types
+ */
+import type React from 'react';
+
+export const VisitSiteBanner: React.FC< {
+	className?: string;
+	siteURL?: string;
+	onVisitBlankTarget: () => void;
+} > = ( { className = null, siteURL = '#', onVisitBlankTarget } ) => {
+	return (
+		<div className={ clsx( 'jetpack-ai-logo-generator-modal-visit-site-banner', className ) }>
+			<div className="jetpack-ai-logo-generator-modal-visit-site-banner__jetpack-logo">
+				<img src={ jetpackLogo } alt="Jetpack" />
+			</div>
+			<div className="jetpack-ai-logo-generator-modal-visit-site-banner__content">
+				<strong>
+					{ __(
+						'Do you want to know all the amazing things you can do with Jetpack AI?',
+						'jetpack-ai-client'
+					) }
+				</strong>
+				<span>
+					{ __(
+						'Generate and tweak content, create forms, get feedback and much more.',
+						'jetpack-ai-client'
+					) }
+				</span>
+				<div>
+					<Button variant="link" href={ siteURL } target="_blank" onClick={ onVisitBlankTarget }>
+						{ __( 'Visit website', 'jetpack-ai-client' ) }
+						<Icon icon={ external } size={ 20 } />
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+};

package/src/logo-generator/constants.ts

@@ -0,0 +1,22 @@
+export const JWT_TOKEN_ID = 'jetpack-ai-jwt';
+export const JWT_TOKEN_EXPIRATION_TIME = 2 * 60 * 1000; // 2 minutes
+
+// Tracks event names
+export const EVENT_MODAL_OPEN = 'jetpack_ai_logo_generator_modal_open';
+export const EVENT_MODAL_CLOSE = 'jetpack_ai_logo_generator_modal_close';
+export const EVENT_GENERATE = 'jetpack_ai_logo_generator_generate';
+export const EVENT_SAVE = 'jetpack_ai_logo_generator_save';
+export const EVENT_USE = 'jetpack_ai_logo_generator_use';
+export const EVENT_NAVIGATE = 'jetpack_ai_logo_generator_navigate';
+export const EVENT_FEEDBACK = 'jetpack_ai_logo_generator_feedback';
+export const EVENT_UPGRADE = 'jetpack_ai_upgrade_button';
+
+// Event placement constants
+export const EVENT_PLACEMENT_QUICK_LINKS = 'quick_links';
+export const EVENT_PLACEMENT_INPUT_FOOTER = 'input_footer';
+export const EVENT_PLACEMENT_FREE_USER_SCREEN = 'free_user_screen';
+export const EVENT_PLACEMENT_UPGRADE_PROMPT = 'upgrade_prompt';
+
+// Feature constants
+export const MINIMUM_PROMPT_LENGTH = 3;
+export const DEFAULT_LOGO_COST = 10;

package/src/logo-generator/hooks/use-checkout.ts

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import debugFactory from 'debug';
+/**
+ * Internal dependencies
+ */
+import { STORE_NAME } from '../store/index.js';
+/**
+ * Types
+ */
+import type { Selectors } from '../store/types.js';
+
+const debug = debugFactory( 'ai-client:logo-generator:use-checkout' );
+
+export const useCheckout = () => {
+	const { nextTier, siteDetails } = useSelect( select => {
+		const selectors: Selectors = select( STORE_NAME );
+		return {
+			nextTier: selectors.getAiAssistantFeature().nextTier,
+			siteDetails: selectors.getSiteDetails(),
+		};
+	}, [] );
+
+	const upgradeURL = new URL(
+		`${ location.origin }/checkout/${ siteDetails?.domain }/${ nextTier?.slug }`
+	);
+	upgradeURL.searchParams.set( 'redirect_to', location.href );
+
+	debug( 'Next tier checkout URL: ', upgradeURL.toString() );
+
+	return {
+		nextTierCheckoutURL: upgradeURL.toString(),
+		hasNextTier: !! nextTier,
+	};
+};

package/src/logo-generator/hooks/use-logo-generator.ts

@@ -0,0 +1,389 @@
+/**
+ * External dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import debugFactory from 'debug';
+import { useCallback } from 'react';
+/**
+ * Internal dependencies
+ */
+import useImageGenerator from '../../hooks/use-image-generator/index.js';
+import useSaveToMediaLibrary from '../../hooks/use-save-to-media-library/index.js';
+import requestJwt from '../../jwt/index.js';
+import { stashLogo } from '../lib/logo-storage.js';
+import { setSiteLogo } from '../lib/set-site-logo.js';
+import { STORE_NAME } from '../store/index.js';
+import useRequestErrors from './use-request-errors.js';
+/**
+ * Types
+ */
+import type { Logo, Selectors, SaveLogo } from '../store/types.js';
+
+const debug = debugFactory( 'jetpack-ai-calypso:use-logo-generator' );
+
+const useLogoGenerator = () => {
+	const {
+		setSelectedLogoIndex,
+		setIsSavingLogoToLibrary,
+		setIsApplyingLogo,
+		setIsRequestingImage,
+		setIsEnhancingPrompt,
+		increaseAiAssistantRequestsCount,
+		addLogoToHistory,
+		setContext,
+	} = useDispatch( STORE_NAME );
+
+	const {
+		logos,
+		selectedLogoIndex,
+		selectedLogo,
+		siteDetails,
+		isSavingLogoToLibrary,
+		isApplyingLogo,
+		isEnhancingPrompt,
+		isBusy,
+		isRequestingImage,
+		getAiAssistantFeature,
+		requireUpgrade,
+		context,
+	} = useSelect( select => {
+		const selectors: Selectors = select( STORE_NAME );
+
+		return {
+			logos: selectors.getLogos(),
+			selectedLogoIndex: selectors.getSelectedLogoIndex(),
+			selectedLogo: selectors.getSelectedLogo(),
+			siteDetails: selectors.getSiteDetails(),
+			isSavingLogoToLibrary: selectors.getIsSavingLogoToLibrary(),
+			isApplyingLogo: selectors.getIsApplyingLogo(),
+			isRequestingImage: selectors.getIsRequestingImage(),
+			isEnhancingPrompt: selectors.getIsEnhancingPrompt(),
+			isBusy: selectors.getIsBusy(),
+			getAiAssistantFeature: selectors.getAiAssistantFeature,
+			requireUpgrade: selectors.getRequireUpgrade(),
+			context: selectors.getContext(),
+		};
+	}, [] );
+
+	const {
+		setFirstLogoPromptFetchError,
+		setEnhancePromptFetchError,
+		setLogoFetchError,
+		setSaveToLibraryError,
+		setLogoUpdateError,
+	} = useRequestErrors();
+
+	const { generateImageWithParameters } = useImageGenerator();
+	const { saveToMediaLibrary } = useSaveToMediaLibrary();
+
+	const { ID = null, name = null, description = null } = siteDetails || {};
+	const siteId = ID ? String( ID ) : null;
+
+	const aiAssistantFeatureData = getAiAssistantFeature( siteId );
+	const logoGenerationCost = aiAssistantFeatureData?.costs?.[ 'jetpack-ai-logo-generator' ]?.logo;
+
+	const generateFirstPrompt = useCallback(
+		async function (): Promise< string > {
+			setFirstLogoPromptFetchError( null );
+			increaseAiAssistantRequestsCount();
+
+			try {
+				const tokenData = await requestJwt();
+
+				if ( ! tokenData || ! tokenData.token ) {
+					throw new Error( 'No token provided' );
+				}
+
+				debug( 'Generating first prompt for site' );
+
+				const firstPromptGenerationPrompt = `Generate a simple and short prompt asking for a logo based on the site's name and description, keeping the same language.
+Example for a site named "The minimalist fashion blog", described as "Daily inspiration for all things fashion": A logo for a minimalist fashion site focused on daily sartorial inspiration with a clean and modern aesthetic that is sleek and sophisticated.
+Another example, now for a site called "El observatorio de aves", described as "Un sitio dedicado a nuestros compañeros y compañeras entusiastas de la observación de aves.": Un logo para un sitio web dedicado a la observación de aves,  capturando la esencia de la naturaleza y la pasión por la avifauna en un diseño elegante y representativo, reflejando una estética natural y apasionada por la vida silvestre.
+
+Site name: ${ name }
+Site description: ${ description }`;
+
+				const body = {
+					question: firstPromptGenerationPrompt,
+					feature: 'jetpack-ai-logo-generator',
+					stream: false,
+				};
+
+				const URL = 'https://public-api.wordpress.com/wpcom/v2/jetpack-ai-query';
+				const headers = {
+					Authorization: `Bearer ${ tokenData.token }`,
+					'Content-Type': 'application/json',
+				};
+
+				const data = await fetch( URL, {
+					method: 'POST',
+					headers,
+					body: JSON.stringify( body ),
+				} ).then( response => response.json() );
+
+				return data?.choices?.[ 0 ]?.message?.content;
+			} catch ( error ) {
+				increaseAiAssistantRequestsCount( -1 );
+				setFirstLogoPromptFetchError( error );
+				throw error;
+			}
+		},
+		[ setFirstLogoPromptFetchError, increaseAiAssistantRequestsCount ]
+	);
+
+	const enhancePrompt = async function ( { prompt }: { prompt: string } ): Promise< string > {
+		setEnhancePromptFetchError( null );
+		increaseAiAssistantRequestsCount();
+
+		try {
+			const tokenData = await requestJwt();
+
+			if ( ! tokenData || ! tokenData.token ) {
+				throw new Error( 'No token provided' );
+			}
+
+			debug( 'Enhancing prompt', prompt );
+
+			const systemMessage = `Enhance the prompt you receive.
+The prompt is meant for generating a logo. Return the same prompt enhanced, and make each enhancement wrapped in brackets.
+Do not add any mention to text, letters, typography or the name of the site in the prompt.
+For example: user's prompt: A logo for an ice cream shop. Returned prompt: A logo for an ice cream shop [that is pink] [and vibrant].`;
+
+			const messages = [
+				{
+					role: 'system',
+					content: systemMessage,
+				},
+				{
+					role: 'user',
+					content: prompt,
+				},
+			];
+
+			const body = {
+				messages,
+				feature: 'jetpack-ai-logo-generator',
+				stream: false,
+			};
+
+			const URL = 'https://public-api.wordpress.com/wpcom/v2/jetpack-ai-query';
+			const headers = {
+				Authorization: `Bearer ${ tokenData.token }`,
+				'Content-Type': 'application/json',
+			};
+
+			const data = await fetch( URL, {
+				method: 'POST',
+				headers,
+				body: JSON.stringify( body ),
+			} ).then( response => response.json() );
+
+			return data?.choices?.[ 0 ]?.message?.content;
+		} catch ( error ) {
+			increaseAiAssistantRequestsCount( -1 );
+			setEnhancePromptFetchError( error );
+			throw error;
+		}
+	};
+
+	const generateImage = useCallback( async function ( {
+		prompt,
+	}: {
+		prompt: string;
+	} ): Promise< { data: Array< { url: string } > } > {
+		setLogoFetchError( null );
+
+		try {
+			const tokenData = await requestJwt();
+
+			if ( ! tokenData || ! tokenData.token ) {
+				throw new Error( 'No token provided' );
+			}
+
+			debug( 'Generating image with prompt', prompt );
+
+			const imageGenerationPrompt = `I NEED to test how the tool works with extremely simple prompts. DO NOT add any detail, just use it AS-IS:
+Create a single text-free iconic vector logo that symbolically represents the user request, using abstract or symbolic imagery.
+The design should be modern, with either a vivid color scheme full of gradients or a color scheme that's monochromatic. Use any of those styles based on the user request mood.
+Ensure the logo is set against a clean solid background.
+Ensure the logo works in small sizes.
+The imagery in the logo should subtly hint at the mood of the user request but DO NOT use any text, letters, or the name of the site on the imagery.
+The image should contain a single icon, without variations, color palettes or different versions.
+
+User request:${ prompt }`;
+
+			const body = {
+				prompt: imageGenerationPrompt,
+				feature: 'jetpack-ai-logo-generator',
+				response_format: 'b64_json',
+			};
+
+			const data = await generateImageWithParameters( body );
+
+			return data as { data: { url: string }[] };
+		} catch ( error ) {
+			setLogoFetchError( error );
+			throw error;
+		}
+	}, [] );
+
+	const saveLogo = useCallback< SaveLogo >(
+		async logo => {
+			setSaveToLibraryError( null );
+
+			try {
+				debug( 'Saving logo for site' );
+
+				// If the logo is already saved, return its mediaId and mediaURL.
+				if ( logo.mediaId ) {
+					return { mediaId: logo.mediaId, mediaURL: logo.url };
+				}
+
+				const savedLogo = {
+					mediaId: 0,
+					mediaURL: '',
+				};
+
+				setIsSavingLogoToLibrary( true );
+
+				const { id: mediaId, url: mediaURL } = await saveToMediaLibrary(
+					logo.url,
+					'site-logo.png'
+				);
+
+				savedLogo.mediaId = parseInt( mediaId );
+				savedLogo.mediaURL = mediaURL;
+
+				return savedLogo;
+			} catch ( error ) {
+				setSaveToLibraryError( error );
+				throw error;
+			} finally {
+				setIsSavingLogoToLibrary( false );
+			}
+		},
+		[ setIsSavingLogoToLibrary, setSaveToLibraryError ]
+	);
+
+	const applyLogo = useCallback( async () => {
+		setLogoUpdateError( null );
+
+		try {
+			if ( ! siteId || ! selectedLogo ) {
+				throw new Error( 'Missing siteId or logo' );
+			}
+
+			debug( 'Applying logo for site', siteId );
+
+			setIsApplyingLogo( true );
+
+			const { mediaId } = selectedLogo;
+
+			if ( ! mediaId ) {
+				throw new Error( 'Missing mediaId' );
+			}
+
+			await setSiteLogo( {
+				siteId: siteId,
+				imageId: String( mediaId ),
+			} );
+		} catch ( error ) {
+			setLogoUpdateError( error );
+			throw error;
+		} finally {
+			setIsApplyingLogo( false );
+		}
+	}, [ selectedLogo, setIsApplyingLogo, setLogoUpdateError, siteId ] );
+
+	const storeLogo = useCallback(
+		( logo: Logo ) => {
+			addLogoToHistory( logo );
+			stashLogo( { ...logo, siteId: String( siteId ) } );
+		},
+		[ siteId, addLogoToHistory, stashLogo ]
+	);
+
+	const generateLogo = useCallback(
+		async function ( { prompt }: { prompt: string } ): Promise< void > {
+			debug( 'Generating logo for site' );
+
+			setIsRequestingImage( true );
+
+			try {
+				if ( ! logoGenerationCost ) {
+					throw new Error( 'Missing cost information' );
+				}
+
+				increaseAiAssistantRequestsCount( logoGenerationCost );
+
+				let image;
+
+				try {
+					image = await generateImage( { prompt } );
+
+					if ( ! image || ! image.data.length ) {
+						throw new Error( 'No image returned' );
+					}
+				} catch ( error ) {
+					increaseAiAssistantRequestsCount( -logoGenerationCost );
+					throw error;
+				}
+
+				// response_format=url returns object with url, otherwise b64_json
+				const logo: Logo = {
+					url: 'data:image/png;base64,' + image.data[ 0 ].b64_json,
+					description: prompt,
+				};
+
+				try {
+					const savedLogo = await saveLogo( logo );
+					storeLogo( {
+						url: savedLogo.mediaURL,
+						description: prompt,
+						mediaId: savedLogo.mediaId,
+					} );
+				} catch ( error ) {
+					storeLogo( logo );
+					throw error;
+				}
+			} finally {
+				setIsRequestingImage( false );
+			}
+		},
+		[ logoGenerationCost, increaseAiAssistantRequestsCount, saveLogo, storeLogo, generateImage ]
+	);
+
+	return {
+		logos,
+		selectedLogoIndex,
+		selectedLogo,
+		setSelectedLogoIndex,
+		site: {
+			id: siteId,
+			name,
+			description,
+		},
+		generateFirstPrompt,
+		saveLogo,
+		applyLogo,
+		generateImage,
+		enhancePrompt,
+		storeLogo,
+		generateLogo,
+		setIsEnhancingPrompt,
+		setIsRequestingImage,
+		setIsSavingLogoToLibrary,
+		setIsApplyingLogo,
+		setContext,
+		isEnhancingPrompt,
+		isRequestingImage,
+		isSavingLogoToLibrary,
+		isApplyingLogo,
+		isBusy,
+		getAiAssistantFeature,
+		requireUpgrade,
+		context,
+	};
+};
+
+export default useLogoGenerator;

package/src/logo-generator/hooks/use-request-errors.ts

@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+import { STORE_NAME } from '../store/index.js';
+/**
+ * Types
+ */
+import type { Selectors } from '../store/types.js';
+
+const useRequestErrors = () => {
+	const {
+		setFeatureFetchError,
+		setFirstLogoPromptFetchError,
+		setEnhancePromptFetchError,
+		setLogoFetchError,
+		setSaveToLibraryError,
+		setLogoUpdateError,
+	} = useDispatch( STORE_NAME );
+
+	const {
+		featureFetchError,
+		firstLogoPromptFetchError,
+		enhancePromptFetchError,
+		logoFetchError,
+		saveToLibraryError,
+		logoUpdateError,
+	} = useSelect( select => {
+		const selectors: Selectors = select( STORE_NAME );
+
+		return {
+			featureFetchError: selectors.getFeatureFetchError(),
+			firstLogoPromptFetchError: selectors.getFirstLogoPromptFetchError(),
+			enhancePromptFetchError: selectors.getEnhancePromptFetchError(),
+			logoFetchError: selectors.getLogoFetchError(),
+			saveToLibraryError: selectors.getSaveToLibraryError(),
+			logoUpdateError: selectors.getLogoUpdateError(),
+		};
+	}, [] );
+
+	const clearErrors = () => {
+		setFeatureFetchError( null );
+		setFirstLogoPromptFetchError( null );
+		setEnhancePromptFetchError( null );
+		setLogoFetchError( null );
+		setSaveToLibraryError( null );
+		setLogoUpdateError( null );
+	};
+
+	return {
+		setFeatureFetchError,
+		setFirstLogoPromptFetchError,
+		setEnhancePromptFetchError,
+		setLogoFetchError,
+		setSaveToLibraryError,
+		setLogoUpdateError,
+		clearErrors,
+		featureFetchError,
+		firstLogoPromptFetchError,
+		enhancePromptFetchError,
+		logoFetchError,
+		saveToLibraryError,
+		logoUpdateError,
+	};
+};
+
+export default useRequestErrors;

package/src/logo-generator/index.ts

@@ -0,0 +1 @@
+export * from './components/generator-modal.js';