Jetpack AI: don't generate first logo without details

projects/js-packages/ai-client/changelog/change-jetpack-ai-logo-first-generation-condition

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+AI Client: if site details show empty or default, do not trigger a logo generation, use empty placeholders

projects/js-packages/ai-client/src/logo-generator/components/generator-modal.tsx

@@ -70,6 +70,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 		generateLogo,
 		setContext,
 		tierPlansEnabled,
+		site,
 	} = useLogoGenerator();
 	const { featureFetchError, firstLogoPromptFetchError, clearErrors } = useRequestErrors();
 	const siteId = siteDetails?.ID;
@@ -136,14 +137,25 @@ 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 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 );

projects/js-packages/ai-client/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 }

projects/js-packages/ai-client/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 ) {

projects/js-packages/ai-client/src/logo-generator/components/prompt.tsx

@@ -155,6 +155,13 @@ export const Prompt = ( { initialPrompt = '' }: PromptProps ) => {
 		[ context, setStyle, recordTracksEvent ]
 	);
 
+	const onKeyDown = ( event: React.KeyboardEvent ) => {
+		if ( event.key === 'Enter' ) {
+			event.preventDefault();
+			onGenerate();
+		}
+	};
+
 	return (
 		<div className="jetpack-ai-logo-generator__prompt">
 			<div className="jetpack-ai-logo-generator__prompt-header">
@@ -182,13 +189,16 @@ export const Prompt = ( { initialPrompt = '' }: PromptProps ) => {
 			</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
 					suppressContentEditableWarning
 					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'

projects/js-packages/ai-client/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,