@automattic/jetpack-ai-client 0.20.1 → 0.22.0

package/build/{logo-generator → ai-client/src/logo-generator}/store/types.d.ts

@@ -1,3 +1,4 @@
+import type { ImageStyleObject } from '../../hooks/use-image-generator/constants.js';
 import type { SiteDetails } from '../types.js';
 /**
  * Types for the AI Assistant feature.
@@ -10,7 +11,7 @@ export type Plan = {
 export type UpgradeTypeProp = 'vip' | 'default';
 export type TierUnlimitedProps = {
     slug: 'ai-assistant-tier-unlimited';
-    limit: 999999999;
+    limit: 999999999 | 3000;
     value: 1;
     readableLimit: string;
 };
@@ -53,13 +54,14 @@ export type TierProp = {
 export type TierLimitProp = TierUnlimitedProps['limit'] | TierFreeProps['limit'] | Tier100Props['limit'] | Tier200Props['limit'] | Tier500Props['limit'] | Tier750Props['limit'] | Tier1000Props['limit'];
 export type TierSlugProp = TierUnlimitedProps['slug'] | TierFreeProps['slug'] | Tier100Props['slug'] | Tier200Props['slug'] | Tier500Props['slug'] | Tier750Props['slug'] | Tier1000Props['slug'];
 export type TierValueProp = TierUnlimitedProps['value'] | TierFreeProps['value'] | Tier100Props['value'] | Tier200Props['value'] | Tier500Props['value'] | 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;
+    [key: string]: FeatureControl | LogoGeneratorFeatureControl;
 };
 export type AiFeatureProps = {
     hasFeature: boolean;

package/build/{logo-generator → ai-client/src/logo-generator}/types.d.ts

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

package/build/{types.d.ts → ai-client/src/types.d.ts}

@@ -7,8 +7,13 @@ export declare const ERROR_NETWORK: "error_network";
 export declare const ERROR_UNCLEAR_PROMPT: "error_unclear_prompt";
 export declare const ERROR_RESPONSE: "error_response";
 export type SuggestionErrorCode = typeof ERROR_SERVICE_UNAVAILABLE | typeof ERROR_QUOTA_EXCEEDED | typeof ERROR_MODERATION | typeof ERROR_CONTEXT_TOO_LARGE | typeof ERROR_NETWORK | typeof ERROR_UNCLEAR_PROMPT | typeof ERROR_RESPONSE;
+export declare const ROLE_SYSTEM: "system";
+export declare const ROLE_USER: "user";
+export declare const ROLE_ASSISTANT: "assistant";
+export declare const ROLE_JETPACK_AI: "jetpack-ai";
+export type RoleType = typeof ROLE_SYSTEM | typeof ROLE_USER | typeof ROLE_ASSISTANT | typeof ROLE_JETPACK_AI;
 export type PromptItemProps = {
-    role: 'system' | 'user' | 'assistant' | 'jetpack-ai';
+    role: RoleType;
     content?: string;
     context?: object;
 };

package/build/{types.js → ai-client/src/types.js}

@@ -5,6 +5,10 @@ export const ERROR_CONTEXT_TOO_LARGE = 'error_context_too_large';
 export const ERROR_NETWORK = 'error_network';
 export const ERROR_UNCLEAR_PROMPT = 'error_unclear_prompt';
 export const ERROR_RESPONSE = 'error_response';
+export const ROLE_SYSTEM = 'system';
+export const ROLE_USER = 'user';
+export const ROLE_ASSISTANT = 'assistant';
+export const ROLE_JETPACK_AI = 'jetpack-ai';
 /*
  * Hook constants
  */

package/build/components/tools/jp-redirect/index.d.ts

@@ -0,0 +1,20 @@
+import { GetRedirectUrlArgs } from './types.js';
+/**
+ * Builds an URL using the jetpack.com/redirect/ service
+ *
+ * If source is a simple slug, it will be sent using the source query parameter. e.g. jetpack.com/redirect/?source=slug
+ *
+ * If source is a full URL, starting with https://, it will be sent using the url query parameter. e.g. jetpack.com/redirect/?url=https://wordpress.com
+ *
+ * Note: if using full URL, query parameters and anchor must be passed in args. Any querystring of url fragment in the URL will be discarded.
+ *
+ * @since 0.2.0
+ * @param {string}             source - The URL handler registered in the server or the full destination URL (starting with https://).
+ * @param {GetRedirectUrlArgs} args   - Additional arguments to build the url.
+ *                                    This is not a complete list as any argument passed here
+ *                                    will be sent to as a query parameter to the Redirect server.
+ *                                    These parameters will not necessarily be passed over to the final destination URL.
+ *                                    If you want to add a parameter to the final destination URL, use the `query` argument.
+ * @return {string} The redirect URL
+ */
+export default function getRedirectUrl(source: string, args?: GetRedirectUrlArgs): string;

package/build/components/tools/jp-redirect/index.js

@@ -0,0 +1,50 @@
+/* global jetpack_redirects */
+/**
+ * Builds an URL using the jetpack.com/redirect/ service
+ *
+ * If source is a simple slug, it will be sent using the source query parameter. e.g. jetpack.com/redirect/?source=slug
+ *
+ * If source is a full URL, starting with https://, it will be sent using the url query parameter. e.g. jetpack.com/redirect/?url=https://wordpress.com
+ *
+ * Note: if using full URL, query parameters and anchor must be passed in args. Any querystring of url fragment in the URL will be discarded.
+ *
+ * @since 0.2.0
+ * @param {string}             source - The URL handler registered in the server or the full destination URL (starting with https://).
+ * @param {GetRedirectUrlArgs} args   - Additional arguments to build the url.
+ *                                    This is not a complete list as any argument passed here
+ *                                    will be sent to as a query parameter to the Redirect server.
+ *                                    These parameters will not necessarily be passed over to the final destination URL.
+ *                                    If you want to add a parameter to the final destination URL, use the `query` argument.
+ * @return {string} The redirect URL
+ */
+export default function getRedirectUrl(source, args = {}) {
+    const queryVars = {};
+    let calypsoEnv;
+    if (typeof window !== 'undefined') {
+        calypsoEnv = window?.JP_CONNECTION_INITIAL_STATE?.calypsoEnv;
+    }
+    if (source.search('https://') === 0) {
+        const parsedUrl = new URL(source);
+        // discard any query and fragments.
+        source = `https://${parsedUrl.host}${parsedUrl.pathname}`;
+        queryVars.url = encodeURIComponent(source);
+    }
+    else {
+        queryVars.source = encodeURIComponent(source);
+    }
+    for (const argName in args) {
+        queryVars[argName] = encodeURIComponent(args[argName]);
+    }
+    if (!Object.keys(queryVars).includes('site') &&
+        typeof jetpack_redirects !== 'undefined' &&
+        Object.hasOwn(jetpack_redirects, 'currentSiteRawUrl')) {
+        queryVars.site = jetpack_redirects.currentBlogID ?? jetpack_redirects.currentSiteRawUrl;
+    }
+    if (calypsoEnv) {
+        queryVars.calypso_env = calypsoEnv;
+    }
+    const queryString = Object.keys(queryVars)
+        .map(key => key + '=' + queryVars[key])
+        .join('&');
+    return `https://jetpack.com/redirect/?` + queryString;
+}

package/build/components/tools/jp-redirect/types.d.ts

@@ -0,0 +1,39 @@
+export type GetRedirectUrlArgs = {
+    /**
+     * URL of the current site. Will default to the value of
+     * jetpack_redirects.currentSiteRawUrl, if available.
+     * Used to fill in the `[site]` placeholder in the target.
+     */
+    site?: string;
+    /**
+     * Additional path to be appended to the URL.
+     * Used to fill in the `[path]` placeholder in the target.
+     */
+    path?: string;
+    /**
+     * Query parameters to be added to the final destination URL.
+     * Should be in query string format (e.g. 'key=value&foo=bar').
+     */
+    query?: string;
+    /**
+     * Anchor to be added to the URL. Must be a single string.
+     * Example: `section1`.
+     */
+    anchor?: string;
+    /**
+     * Any other custom arguments to be added to the final destination URL.
+     */
+    [key: string]: string;
+};
+export type QueryVars = {
+    url?: string;
+    site?: string;
+    source?: string;
+    calypso_env?: string;
+};
+declare global {
+    const jetpack_redirects: {
+        currentSiteRawUrl?: string;
+        currentBlogID?: string;
+    };
+}

package/build/components/tools/jp-redirect/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.20.1",
+	"version": "0.22.0",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -23,15 +23,15 @@
 	},
 	"type": "module",
 	"devDependencies": {
-		"@storybook/addon-actions": "8.2.9",
-		"@storybook/blocks": "8.2.9",
-		"@storybook/preview-api": "8.2.9",
-		"@storybook/react": "8.2.9",
+		"@storybook/addon-actions": "8.3.5",
+		"@storybook/blocks": "8.3.5",
+		"@storybook/preview-api": "8.3.5",
+		"@storybook/react": "8.3.5",
 		"@types/markdown-it": "14.1.2",
 		"@types/turndown": "5.0.5",
 		"jest": "^29.6.2",
 		"jest-environment-jsdom": "29.7.0",
-		"storybook": "8.2.9",
+		"storybook": "8.3.5",
 		"typescript": "5.0.4"
 	},
 	"exports": {
@@ -43,21 +43,21 @@
 	"main": "./build/index.js",
 	"types": "./build/index.d.ts",
 	"dependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.33",
-		"@automattic/jetpack-connection": "^0.35.11",
-		"@automattic/jetpack-shared-extension-utils": "^0.15.12",
+		"@automattic/jetpack-base-styles": "^0.6.34",
+		"@automattic/jetpack-connection": "^0.35.14",
+		"@automattic/jetpack-shared-extension-utils": "^0.15.14",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/react": "18.3.3",
 		"@types/wordpress__block-editor": "11.5.15",
-		"@wordpress/api-fetch": "7.8.2",
-		"@wordpress/blob": "4.8.1",
-		"@wordpress/block-editor": "14.3.4",
-		"@wordpress/components": "28.8.4",
-		"@wordpress/compose": "7.8.3",
-		"@wordpress/data": "10.8.3",
-		"@wordpress/element": "6.8.1",
-		"@wordpress/i18n": "5.8.2",
-		"@wordpress/icons": "10.8.2",
+		"@wordpress/api-fetch": "7.9.0",
+		"@wordpress/blob": "4.9.0",
+		"@wordpress/block-editor": "14.4.0",
+		"@wordpress/components": "28.9.0",
+		"@wordpress/compose": "7.9.0",
+		"@wordpress/data": "10.9.0",
+		"@wordpress/element": "6.9.0",
+		"@wordpress/i18n": "5.9.0",
+		"@wordpress/icons": "10.9.0",
 		"clsx": "2.1.1",
 		"debug": "4.3.4",
 		"markdown-it": "14.0.0",

package/src/hooks/use-image-generator/constants.ts

@@ -1,5 +1,3 @@
-import { __ } from '@wordpress/i18n';
-
 // Styles
 export const IMAGE_STYLE_ENHANCE = 'enhance';
 export const IMAGE_STYLE_ANIME = 'anime';
@@ -19,26 +17,32 @@ 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_AUTO = 'auto';
+export const IMAGE_STYLE_NONE = 'none';
 
-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' ),
-};
+export type ImageStyle =
+	| typeof IMAGE_STYLE_ENHANCE
+	| typeof IMAGE_STYLE_ANIME
+	| typeof IMAGE_STYLE_PHOTOGRAPHIC
+	| typeof IMAGE_STYLE_DIGITAL_ART
+	| typeof IMAGE_STYLE_COMICBOOK
+	| typeof IMAGE_STYLE_FANTASY_ART
+	| typeof IMAGE_STYLE_ANALOG_FILM
+	| typeof IMAGE_STYLE_NEONPUNK
+	| typeof IMAGE_STYLE_ISOMETRIC
+	| typeof IMAGE_STYLE_LOWPOLY
+	| typeof IMAGE_STYLE_ORIGAMI
+	| typeof IMAGE_STYLE_LINE_ART
+	| typeof IMAGE_STYLE_CRAFT_CLAY
+	| typeof IMAGE_STYLE_CINEMATIC
+	| typeof IMAGE_STYLE_3D_MODEL
+	| typeof IMAGE_STYLE_PIXEL_ART
+	| typeof IMAGE_STYLE_TEXTURE
+	| typeof IMAGE_STYLE_MONTY_PYTHON
+	| typeof IMAGE_STYLE_AUTO
+	| typeof IMAGE_STYLE_NONE;
 
-export type ImageStyle = keyof typeof IMAGE_STYLE_LABELS;
+export type ImageStyleObject = {
+	label: string;
+	value: ImageStyle;
+};

package/src/hooks/use-image-generator/index.ts

@@ -7,7 +7,6 @@ import debugFactory from 'debug';
  */
 import askQuestionSync from '../../ask-question/sync.js';
 import requestJwt from '../../jwt/index.js';
-import { IMAGE_STYLE_LABELS } from './constants.js';
 
 const debug = debugFactory( 'ai-client:use-image-generator' );
 
@@ -256,20 +255,10 @@ const useImageGenerator = () => {
 		}
 	};
 
-	/**
-	 * Get available styles.
-	 *
-	 * @return {object} with the styles {key:label} for the image generation.
-	 */
-	const getImageStyles = function (): object {
-		return IMAGE_STYLE_LABELS;
-	};
-
 	return {
 		generateImage,
 		generateImageWithStableDiffusion,
 		generateImageWithParameters: executeImageGeneration,
-		getImageStyles,
 	};
 };
 

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

@@ -49,7 +49,6 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 	siteDetails,
 	context,
 	placement,
-	showStyleSelector,
 } ) => {
 	const { tracks } = useAnalytics();
 	const { recordEvent: recordTracksEvent } = tracks;
@@ -71,6 +70,8 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 		generateLogo,
 		setContext,
 		tierPlansEnabled,
+		site,
+		requireUpgrade,
 	} = useLogoGenerator();
 	const { featureFetchError, firstLogoPromptFetchError, clearErrors } = useRequestErrors();
 	const siteId = siteDetails?.ID;
@@ -108,9 +109,10 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 
 			const logoCost = feature?.costs?.[ 'jetpack-ai-logo-generator' ]?.logo ?? DEFAULT_LOGO_COST;
 			const promptCreationCost = 1;
-			const currentLimit = feature?.currentTier?.value || 0;
+			const currentLimit = feature?.currentTier?.limit || 0;
+			const currentValue = feature?.currentTier?.value || 0;
 			const currentUsage = feature?.usagePeriod?.requestsCount || 0;
-			const isUnlimited = ! tierPlansEnabled ? currentLimit > 0 : currentLimit === 1;
+			const isUnlimited = ! tierPlansEnabled ? currentValue > 0 : currentValue === 1;
 			const hasNoNextTier = ! feature?.nextTier; // If there is no next tier, the user cannot upgrade.
 
 			// The user needs an upgrade immediately if they have no logos and not enough requests remaining for one prompt and one logo generation.
@@ -137,14 +139,33 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 			loadLogoHistory( siteId );
 
 			// If there is any logo, we do not need to generate a first logo again.
-			if ( ! isLogoHistoryEmpty( String( siteId ) ) ) {
+			if ( hasHistory ) {
 				setLoadingState( null );
 				setIsLoadingHistory( false );
 				return;
 			}
 
-			// If the site does not require an upgrade and has no logos stored, generate the first prompt based on the site's data.
-			generateFirstLogo();
+			// if site requires an upgrade, just return and set loaders to null,
+			// prompt component will take over the situation
+			if ( requireUpgrade ) {
+				setLoadingState( null );
+				setIsLoadingHistory( false );
+				return;
+			}
+
+			// If the site does not require an upgrade and has no logos stored
+			// and has title and description, generate the first prompt based on the site's data.
+			if (
+				site &&
+				site.name &&
+				site.description &&
+				site.name !== __( 'Site Title', 'jetpack-ai-client' )
+			) {
+				generateFirstLogo();
+			} else {
+				setLoadingState( null );
+				setIsLoadingHistory( false );
+			}
 		} catch ( error ) {
 			debug( 'Error fetching feature', error );
 			setLoadingState( null );
@@ -157,6 +178,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 		clearDeletedMedia,
 		isLogoHistoryEmpty,
 		siteId,
+		requireUpgrade,
 	] );
 
 	const handleModalOpen = useCallback( async () => {
@@ -243,9 +265,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 	} else {
 		body = (
 			<>
-				{ ! logoAccepted && (
-					<Prompt initialPrompt={ initialPrompt } showStyleSelector={ showStyleSelector } />
-				) }
+				{ ! logoAccepted && <Prompt initialPrompt={ initialPrompt } /> }
 
 				<LogoPresenter
 					logo={ selectedLogo }

package/src/logo-generator/components/history-carousel.tsx

@@ -48,6 +48,7 @@ export const HistoryCarousel: React.FC = () => {
 					<img height="48" width="48" src={ loader } alt={ 'loading' } />
 				</Button>
 			) }
+			{ ! logos.length && ! isLoadingHistory && <div>&nbsp;</div> }
 			{ logos.map( ( logo, index ) => (
 				<Button
 					key={ logo.url }

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

@@ -111,6 +111,7 @@ const UseOnSiteButton: React.FC< { onApplyLogo: ( mediaId: number ) => void } >
 			className="jetpack-ai-logo-generator-modal-presenter__action"
 			onClick={ handleClick }
 			disabled={ isSavingLogoToLibrary || ! selectedLogo?.mediaId }
+			variant="secondary"
 		>
 			<Icon icon={ <LogoIcon /> } />
 			<span className="action-text">{ __( 'Use on block', 'jetpack-ai-client' ) }</span>
@@ -140,6 +141,17 @@ const LogoFetching: React.FC = () => {
 	);
 };
 
+const LogoEmpty: React.FC = () => {
+	return (
+		<>
+			<div style={ { width: 0, height: '229px' } }></div>
+			<span className="jetpack-ai-logo-generator-modal-presenter__loading-text">
+				{ __( 'Once you generate a logo, it will show up here', 'jetpack-ai-client' ) }
+			</span>
+		</>
+	);
+};
+
 const LogoReady: React.FC< {
 	siteId: string;
 	logo: Logo;
@@ -194,7 +206,9 @@ export const LogoPresenter: React.FC< LogoPresenterProps > = ( {
 
 	let logoContent: React.ReactNode;
 
-	if ( ! logo ) {
+	if ( ! logo && ! isRequestingImage ) {
+		logoContent = <LogoEmpty />;
+	} else if ( ! logo ) {
 		debug( 'No logo provided, history still loading or logo being generated' );
 		logoContent = <LogoFetching />;
 	} else if ( loading || isRequestingImage ) {

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

@@ -10,10 +10,7 @@ import { useCallback, useEffect, useState, useRef } from 'react';
 /**
  * Internal dependencies
  */
-import {
-	IMAGE_STYLE_MONTY_PYTHON,
-	IMAGE_STYLE_LINE_ART,
-} from '../../hooks/use-image-generator/constants.js';
+import { IMAGE_STYLE_NONE, IMAGE_STYLE_AUTO } from '../../hooks/use-image-generator/constants.js';
 import AiIcon from '../assets/icons/ai.js';
 import {
 	EVENT_GENERATE,
@@ -21,6 +18,7 @@ import {
 	EVENT_UPGRADE,
 	EVENT_PLACEMENT_INPUT_FOOTER,
 	EVENT_SWITCH_STYLE,
+	EVENT_GUESS_STYLE,
 } from '../constants.js';
 import { useCheckout } from '../hooks/use-checkout.js';
 import useLogoGenerator from '../hooks/use-logo-generator.js';
@@ -31,16 +29,15 @@ import './prompt.scss';
 /**
  * Types
  */
-import type { ImageStyle } from '../../hooks/use-image-generator/constants.js';
+import type { ImageStyle, ImageStyleObject } from '../../hooks/use-image-generator/constants.js';
 
 const debug = debugFactory( 'jetpack-ai-calypso:prompt-box' );
 
 type PromptProps = {
 	initialPrompt?: string;
-	showStyleSelector?: boolean;
 };
 
-export const Prompt = ( { initialPrompt = '', showStyleSelector = false }: PromptProps ) => {
+export const Prompt = ( { initialPrompt = '' }: PromptProps ) => {
 	const { tracks } = useAnalytics();
 	const { recordEvent: recordTracksEvent } = tracks;
 	const [ prompt, setPrompt ] = useState< string >( initialPrompt );
@@ -48,9 +45,9 @@ export const Prompt = ( { initialPrompt = '', showStyleSelector = false }: Promp
 	const { enhancePromptFetchError, logoFetchError } = useRequestErrors();
 	const { nextTierCheckoutURL: checkoutUrl, hasNextTier } = useCheckout();
 	const hasPrompt = prompt?.length >= MINIMUM_PROMPT_LENGTH;
-	const [ style, setStyle ] = useState< ImageStyle >(
-		showStyleSelector ? IMAGE_STYLE_LINE_ART : null
-	);
+	const [ showStyleSelector, setShowStyleSelector ] = useState( false );
+	const [ style, setStyle ] = useState< ImageStyle >( null );
+	const [ styles, setStyles ] = useState< Array< ImageStyleObject > >( [] );
 
 	const {
 		generateLogo,
@@ -63,7 +60,8 @@ export const Prompt = ( { initialPrompt = '', showStyleSelector = false }: Promp
 		requireUpgrade,
 		context,
 		tierPlansEnabled,
-		getImageStyles,
+		imageStyles,
+		guessStyle,
 	} = useLogoGenerator();
 
 	const enhancingLabel = __( 'Enhancing…', 'jetpack-ai-client' );
@@ -108,10 +106,41 @@ export const Prompt = ( { initialPrompt = '', showStyleSelector = false }: Promp
 		}
 	}, [ prompt ] );
 
+	useEffect( () => {
+		if ( 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( IMAGE_STYLE_NONE );
+		} else {
+			setStyles( [] );
+			setShowStyleSelector( false );
+			setStyle( null );
+		}
+	}, [ imageStyles ] );
+
 	const onGenerate = useCallback( async () => {
-		// shouldn't tool be "logo-generator" to be more specific?
-		recordTracksEvent( EVENT_GENERATE, { context, tool: 'image', style } );
-		generateLogo( { prompt, style } );
+		debug( context );
+		if ( style === IMAGE_STYLE_AUTO ) {
+			setIsEnhancingPrompt( true );
+			recordTracksEvent( EVENT_GUESS_STYLE, { context, tool: 'image' } );
+			const guessedStyle = ( await guessStyle( prompt ) ) || IMAGE_STYLE_NONE;
+			setStyle( guessedStyle );
+			recordTracksEvent( EVENT_GENERATE, { context, tool: 'image', style: guessedStyle } );
+			setIsEnhancingPrompt( false );
+			generateLogo( { prompt, style: guessedStyle } );
+		} else {
+			recordTracksEvent( EVENT_GENERATE, { context, tool: 'image', style } );
+			generateLogo( { prompt, style } );
+		}
 	}, [ context, generateLogo, prompt, style ] );
 
 	const onPromptInput = ( event: React.ChangeEvent< HTMLInputElement > ) => {
@@ -150,10 +179,12 @@ export const Prompt = ( { initialPrompt = '', showStyleSelector = false }: Promp
 		[ context, setStyle, recordTracksEvent ]
 	);
 
-	const imageStyles = getImageStyles();
-	const availableStyles = Object.keys( imageStyles ).filter(
-		( styleKey: ImageStyle ) => styleKey !== IMAGE_STYLE_MONTY_PYTHON
-	);
+	const onKeyDown = ( event: React.KeyboardEvent ) => {
+		if ( event.key === 'Enter' ) {
+			event.preventDefault();
+			onGenerate();
+		}
+	};
 
 	return (
 		<div className="jetpack-ai-logo-generator__prompt">
@@ -171,21 +202,20 @@ export const Prompt = ( { initialPrompt = '', showStyleSelector = false }: Promp
 						{ enhanceButtonLabel }
 					</Button>
 				</div>
-				{ showStyleSelector && availableStyles && (
+				{ showStyleSelector && (
 					<SelectControl
-						// label={ __( 'Style', 'jetpack-ai-client' ) }
 						__nextHasNoMarginBottom
 						value={ style }
-						options={ availableStyles.map( imageStyle => ( {
-							label: imageStyles[ imageStyle ],
-							value: imageStyle,
-						} ) ) }
+						options={ styles }
 						onChange={ updateStyle }
+						disabled={ isBusy || requireUpgrade }
 					/>
 				) }
 			</div>
 			<div className="jetpack-ai-logo-generator__prompt-query">
 				<div
+					role="textbox"
+					tabIndex={ 0 }
 					ref={ inputRef }
 					contentEditable={ ! isBusy && ! requireUpgrade }
 					// The content editable div is expected to be updated by the enhance prompt, so warnings are suppressed
@@ -193,6 +223,7 @@ export const Prompt = ( { initialPrompt = '', showStyleSelector = false }: Promp
 					className="prompt-query__input"
 					onInput={ onPromptInput }
 					onPaste={ onPromptPaste }
+					onKeyDown={ onKeyDown }
 					data-placeholder={ __(
 						'Describe your site or simply ask for a logo specifying some details about it',
 						'jetpack-ai-client'