@automattic/jetpack-ai-client 0.20.1 → 0.22.0

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

@@ -7,6 +7,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import getRedirectUrl from '../../../../components/tools/jp-redirect/index.js';
 import { EVENT_PLACEMENT_FREE_USER_SCREEN, EVENT_UPGRADE } from '../constants.js';
 import useLogoGenerator from '../hooks/use-logo-generator.js';
 /**
@@ -21,8 +22,9 @@ export const UpgradeScreen: React.FC< {
 } > = ( { onCancel, upgradeURL, reason } ) => {
 	const { tracks } = useAnalytics();
 	const { recordEvent: recordTracksEvent } = tracks;
+
 	const upgradeMessageFeature = __(
-		'The logo generator requires a paid Jetpack AI plan. Upgrade your plan to access exclusive features, including logo generation. The upgrade will also increase the amount of requests you can use in all AI-powered features.',
+		'Upgrade your Jetpack AI for access to logo generation. This upgrade will also increase the amount of monthly requests you can use in for all AI-powered features.',
 		'jetpack-ai-client'
 	);
 
@@ -31,6 +33,10 @@ export const UpgradeScreen: React.FC< {
 		'jetpack-ai-client'
 	);
 
+	const upgradeInfoUrl = getRedirectUrl( 'ai-logo-generator-fair-usage-policy', {
+		anchor: 'usage-limitations-and-upgrades',
+	} );
+
 	const { context } = useLogoGenerator();
 
 	const handleUpgradeClick = () => {
@@ -45,7 +51,7 @@ export const UpgradeScreen: React.FC< {
 					{ reason === 'feature' ? upgradeMessageFeature : upgradeMessageRequests }
 				</span>
 				&nbsp;
-				<Button variant="link" href="https://jetpack.com/ai/" target="_blank">
+				<Button variant="link" href={ upgradeInfoUrl } target="_blank">
 					{ __( 'Learn more about Jetpack AI.', 'jetpack-ai-client' ) }
 				</Button>
 			</div>

package/src/logo-generator/constants.ts

@@ -11,6 +11,7 @@ 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';
 export const EVENT_SWITCH_STYLE = 'jetpack_ai_logo_generator_switch_style';
+export const EVENT_GUESS_STYLE = 'jetpack_ai_logo_generator_guess_style';
 
 // Event placement constants
 export const EVENT_PLACEMENT_QUICK_LINKS = 'quick_links';

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

@@ -7,7 +7,6 @@ import {
 	getSiteFragment,
 } from '@automattic/jetpack-shared-extension-utils';
 import { useSelect } from '@wordpress/data';
-import debugFactory from 'debug';
 /**
  * Internal dependencies
  */
@@ -17,8 +16,6 @@ import { STORE_NAME } from '../store/index.js';
  */
 import type { Selectors } from '../store/types.js';
 
-const debug = debugFactory( 'ai-client:logo-generator:use-checkout' );
-
 export const useCheckout = () => {
 	const { nextTier, tierPlansEnabled } = useSelect( select => {
 		const selectors: Selectors = select( STORE_NAME );
@@ -60,8 +57,6 @@ export const useCheckout = () => {
 
 	const nextTierCheckoutURL = checkoutUrl.toString();
 
-	debug( 'Next tier checkout URL: ', nextTierCheckoutURL );
-
 	return {
 		nextTierCheckoutURL,
 		hasNextTier: !! nextTier,

package/src/logo-generator/hooks/use-fair-usage-notice-message.tsx

@@ -1,6 +1,7 @@
 import { useSelect } from '@wordpress/data';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
+import getRedirectUrl from '../../../../components/tools/jp-redirect/index.js';
 /**
  * Internal dependencies
  */
@@ -52,14 +53,12 @@ const useFairUsageNoticeMessage = () => {
 	// Get the proper template based on the presence of the next usage period start date.
 	const fairUsageNoticeMessage = getFairUsageNoticeMessage( nextUsagePeriodStartDateString );
 
+	const upgradeInfoUrl = getRedirectUrl( 'ai-logo-generator-fair-usage-policy', {
+		anchor: 'jetpack-ai-usage-limit',
+	} );
+
 	const fairUsageNoticeMessageElement = createInterpolateElement( fairUsageNoticeMessage, {
-		link: (
-			<a
-				href="https://jetpack.com/redirect/?source=ai-logo-generator-fair-usage-policy"
-				target="_blank"
-				rel="noreferrer"
-			/>
-		),
+		link: <a href={ upgradeInfoUrl } target="_blank" rel="noreferrer" />,
 	} );
 
 	return fairUsageNoticeMessageElement;

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

@@ -7,6 +7,7 @@ import { useCallback } from 'react';
 /**
  * Internal dependencies
  */
+import askQuestionSync from '../../ask-question/sync.js';
 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';
@@ -17,8 +18,9 @@ import useRequestErrors from './use-request-errors.js';
 /**
  * Types
  */
-import type { ImageStyle } from '../../hooks/use-image-generator/constants.js';
-import type { Logo, Selectors, SaveLogo } from '../store/types.js';
+import type { ImageStyle, ImageStyleObject } from '../../hooks/use-image-generator/constants.js';
+import type { RoleType } from '../../types.js';
+import type { Logo, Selectors, SaveLogo, LogoGeneratorFeatureControl } from '../store/types.js';
 
 const debug = debugFactory( 'jetpack-ai-calypso:use-logo-generator' );
 
@@ -79,7 +81,7 @@ const useLogoGenerator = () => {
 		setLogoUpdateError,
 	} = useRequestErrors();
 
-	const { generateImageWithParameters, getImageStyles } = useImageGenerator();
+	const { generateImageWithParameters } = useImageGenerator();
 	const { saveToMediaLibrary } = useSaveToMediaLibrary();
 
 	const { ID = null, name = null, description = null } = siteDetails || {};
@@ -87,6 +89,10 @@ const useLogoGenerator = () => {
 
 	const aiAssistantFeatureData = getAiAssistantFeature( siteId );
 	const logoGenerationCost = aiAssistantFeatureData?.costs?.[ 'jetpack-ai-logo-generator' ]?.logo;
+	const logoGeneratorControl = aiAssistantFeatureData?.featuresControl?.[
+		'logo-generator'
+	] as LogoGeneratorFeatureControl;
+	const imageStyles: Array< ImageStyleObject > = logoGeneratorControl?.styles;
 
 	const generateFirstPrompt = useCallback(
 		async function (): Promise< string > {
@@ -192,25 +198,70 @@ For example: user's prompt: A logo for an ice cream shop. Returned prompt: A log
 		}
 	};
 
-	const generateImage = useCallback( async function ( {
-		prompt,
-		style = null,
-	}: {
-		prompt: string;
-		style?: ImageStyle | null;
-	} ): Promise< { data: Array< { url: string } > } > {
-		setLogoFetchError( null );
+	const guessStyle = useCallback(
+		async function ( prompt: string ): Promise< ImageStyle | null > {
+			setLogoFetchError( null );
+			if ( ! imageStyles || ! imageStyles.length ) {
+				return null;
+			}
 
-		try {
-			const tokenData = await requestJwt();
+			const messages = [
+				{
+					role: 'jetpack-ai' as RoleType,
+					context: {
+						type: 'ai-assistant-guess-logo-style',
+						request: prompt,
+						name,
+						description,
+					},
+				},
+			];
 
-			if ( ! tokenData || ! tokenData.token ) {
-				throw new Error( 'No token provided' );
+			try {
+				const style = await askQuestionSync( messages, { feature: 'jetpack-ai-logo-generator' } );
+
+				if ( ! style ) {
+					return null;
+				}
+				const styleObject = imageStyles.find( ( { value } ) => value === style );
+
+				if ( ! styleObject ) {
+					return null;
+				}
+
+				return styleObject.value;
+			} catch ( error ) {
+				debug( 'Error guessing style', error );
+				Promise.reject( error );
 			}
+		},
+		[ imageStyles, name, description ]
+	);
+
+	const generateImage = useCallback(
+		async function ( {
+			prompt,
+			style = null,
+		}: {
+			prompt: string;
+			style?: ImageStyle | null;
+		} ): Promise< { data: Array< { url: string } > } > {
+			setLogoFetchError( null );
 
-			debug( 'Generating image with prompt', prompt );
+			try {
+				const tokenData = await requestJwt();
+
+				if ( ! tokenData || ! tokenData.token ) {
+					throw new Error( 'No token provided' );
+				}
 
-			const imageGenerationPrompt = `I NEED to test how the tool works with extremely simple prompts. DO NOT add any detail, just use it AS-IS:
+				if ( style === 'auto' ) {
+					throw new Error( 'Auto style is not supported' );
+				}
+
+				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.
@@ -220,21 +271,38 @@ The image should contain a single icon, without variations, color palettes or di
 
 User request:${ prompt }`;
 
-			const body = {
-				prompt: imageGenerationPrompt,
-				feature: 'jetpack-ai-logo-generator',
-				response_format: 'b64_json',
-				style: style || '', // backend expects an empty string if no style is provided
-			};
+				const body = {
+					prompt: imageGenerationPrompt,
+					// if style is set prompt is reworked at backend with messages
+					messages: style
+						? [
+								{
+									role: 'jetpack-ai',
+									context: {
+										type: 'ai-assistant-generate-logo',
+										request: prompt,
+										name,
+										description,
+										style,
+									},
+								},
+						  ]
+						: [],
+					feature: 'jetpack-ai-logo-generator',
+					response_format: 'b64_json',
+					style: style || '', // backend expects an empty string if no style is provided
+				};
 
-			const data = await generateImageWithParameters( body );
+				const data = await generateImageWithParameters( body );
 
-			return data as { data: { url: string }[] };
-		} catch ( error ) {
-			setLogoFetchError( error );
-			throw error;
-		}
-	}, [] );
+				return data as { data: { url: string }[] };
+			} catch ( error ) {
+				setLogoFetchError( error );
+				throw error;
+			}
+		},
+		[ name, description ]
+	);
 
 	const saveLogo = useCallback< SaveLogo >(
 		async logo => {
@@ -401,7 +469,8 @@ User request:${ prompt }`;
 		tierPlansEnabled,
 		isLoadingHistory,
 		setIsLoadingHistory,
-		getImageStyles,
+		imageStyles,
+		guessStyle,
 	};
 };
 

package/src/logo-generator/store/constants.ts

@@ -18,7 +18,7 @@ export const ENDPOINT_AI_ASSISTANT_FEATURE = '/wpcom/v2/jetpack-ai/ai-assistant-
  * New AI Assistant feature async request
  */
 export const FREE_PLAN_REQUESTS_LIMIT = 20;
-export const UNLIMITED_PLAN_REQUESTS_LIMIT = 999999999;
+export const UNLIMITED_PLAN_REQUESTS_LIMIT = 3000;
 export const ASYNC_REQUEST_COUNTDOWN_INIT_VALUE = 3;
 export const NEW_ASYNC_REQUEST_TIMER_INTERVAL = 5000;
 export const ACTION_DECREASE_NEW_ASYNC_REQUEST_COUNTDOWN = 'DECREASE_NEW_ASYNC_REQUEST_COUNTDOWN';

package/src/logo-generator/store/initial-state.ts

@@ -34,6 +34,12 @@ const INITIAL_STATE: LogoGeneratorStateProp = {
 				asyncRequestTimerId: 0,
 				isRequestingImage: false,
 			},
+			featuresControl: {
+				'logo-generator': {
+					enabled: false,
+					styles: [],
+				},
+			},
 		},
 	},
 	history: [],

package/src/logo-generator/store/types.ts

@@ -1,3 +1,4 @@
+import type { ImageStyleObject } from '../../hooks/use-image-generator/constants.js';
 import type { SiteDetails } from '../types.js';
 
 /**
@@ -13,7 +14,7 @@ export type UpgradeTypeProp = 'vip' | 'default';
 
 export type TierUnlimitedProps = {
 	slug: 'ai-assistant-tier-unlimited';
-	limit: 999999999;
+	limit: 999999999 | 3000;
 	value: 1;
 	readableLimit: string;
 };
@@ -88,13 +89,17 @@ export type TierValueProp =
 	| Tier750Props[ 'value' ]
 	| Tier1000Props[ 'value' ];
 
+export type LogoGeneratorFeatureControl = FeatureControl & {
+	styles: Array< ImageStyleObject > | [];
+};
+
 export type FeatureControl = {
 	enabled: boolean;
-	'min-jetpack-version': string;
-	[ key: string ]: FeatureControl | boolean | string;
 };
 
-export type FeaturesControl = { [ key: string ]: FeatureControl };
+export type FeaturesControl = {
+	[ key: string ]: FeatureControl | LogoGeneratorFeatureControl;
+};
 
 export type AiFeatureProps = {
 	hasFeature: boolean;

package/src/logo-generator/types.ts

@@ -19,7 +19,6 @@ export interface GeneratorModalProps {
 	onReload: () => void;
 	context: string;
 	placement: string;
-	showStyleSelector?: boolean;
 }
 
 export interface LogoPresenterProps {

package/src/types.ts

@@ -17,11 +17,22 @@ export type SuggestionErrorCode =
 	| typeof ERROR_UNCLEAR_PROMPT
 	| typeof ERROR_RESPONSE;
 
+export const ROLE_SYSTEM = 'system' as const;
+export const ROLE_USER = 'user' as const;
+export const ROLE_ASSISTANT = 'assistant' as const;
+export const ROLE_JETPACK_AI = 'jetpack-ai' as const;
+
+export type RoleType =
+	| typeof ROLE_SYSTEM
+	| typeof ROLE_USER
+	| typeof ROLE_ASSISTANT
+	| typeof ROLE_JETPACK_AI;
+
 /*
  * Prompt types
  */
 export type PromptItemProps = {
-	role: 'system' | 'user' | 'assistant' | 'jetpack-ai';
+	role: RoleType;
 	content?: string;
 	context?: object;
 };

package/build/hooks/use-image-generator/constants.js

@@ -1,40 +0,0 @@
-import { __ } from '@wordpress/i18n';
-// Styles
-export const IMAGE_STYLE_ENHANCE = 'enhance';
-export const IMAGE_STYLE_ANIME = 'anime';
-export const IMAGE_STYLE_PHOTOGRAPHIC = 'photographic';
-export const IMAGE_STYLE_DIGITAL_ART = 'digital-art';
-export const IMAGE_STYLE_COMICBOOK = 'comicbook';
-export const IMAGE_STYLE_FANTASY_ART = 'fantasy-art';
-export const IMAGE_STYLE_ANALOG_FILM = 'analog-film';
-export const IMAGE_STYLE_NEONPUNK = 'neonpunk';
-export const IMAGE_STYLE_ISOMETRIC = 'isometric';
-export const IMAGE_STYLE_LOWPOLY = 'lowpoly';
-export const IMAGE_STYLE_ORIGAMI = 'origami';
-export const IMAGE_STYLE_LINE_ART = 'line-art';
-export const IMAGE_STYLE_CRAFT_CLAY = 'craft-clay';
-export const IMAGE_STYLE_CINEMATIC = 'cinematic';
-export const IMAGE_STYLE_3D_MODEL = '3d-model';
-export const IMAGE_STYLE_PIXEL_ART = 'pixel-art';
-export const IMAGE_STYLE_TEXTURE = 'texture';
-export const IMAGE_STYLE_MONTY_PYTHON = 'monty-python';
-export const IMAGE_STYLE_LABELS = {
-    [IMAGE_STYLE_ENHANCE]: __('Enhance', 'jetpack-ai-client'),
-    [IMAGE_STYLE_ANIME]: __('Anime', 'jetpack-ai-client'),
-    [IMAGE_STYLE_PHOTOGRAPHIC]: __('Photographic', 'jetpack-ai-client'),
-    [IMAGE_STYLE_DIGITAL_ART]: __('Digital Art', 'jetpack-ai-client'),
-    [IMAGE_STYLE_COMICBOOK]: __('Comicbook', 'jetpack-ai-client'),
-    [IMAGE_STYLE_FANTASY_ART]: __('Fantasy Art', 'jetpack-ai-client'),
-    [IMAGE_STYLE_ANALOG_FILM]: __('Analog Film', 'jetpack-ai-client'),
-    [IMAGE_STYLE_NEONPUNK]: __('Neon Punk', 'jetpack-ai-client'),
-    [IMAGE_STYLE_ISOMETRIC]: __('Isometric', 'jetpack-ai-client'),
-    [IMAGE_STYLE_LOWPOLY]: __('Low Poly', 'jetpack-ai-client'),
-    [IMAGE_STYLE_ORIGAMI]: __('Origami', 'jetpack-ai-client'),
-    [IMAGE_STYLE_LINE_ART]: __('Line Art', 'jetpack-ai-client'),
-    [IMAGE_STYLE_CRAFT_CLAY]: __('Craft Clay', 'jetpack-ai-client'),
-    [IMAGE_STYLE_CINEMATIC]: __('Cinematic', 'jetpack-ai-client'),
-    [IMAGE_STYLE_3D_MODEL]: __('3D Model', 'jetpack-ai-client'),
-    [IMAGE_STYLE_PIXEL_ART]: __('Pixel Art', 'jetpack-ai-client'),
-    [IMAGE_STYLE_TEXTURE]: __('Texture', 'jetpack-ai-client'),
-    [IMAGE_STYLE_MONTY_PYTHON]: __('Monty Python', 'jetpack-ai-client'),
-};

package/build/logo-generator/components/prompt.d.ts

@@ -1,7 +0,0 @@
-import './prompt.scss';
-type PromptProps = {
-    initialPrompt?: string;
-    showStyleSelector?: boolean;
-};
-export declare const Prompt: ({ initialPrompt, showStyleSelector }: PromptProps) => import("react/jsx-runtime").JSX.Element;
-export {};