@automattic/jetpack-ai-client 0.20.1 → 0.21.0

package/CHANGELOG.md

@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.21.0] - 2024-10-14
+### Added
+- AI Client: Add image styles 'auto' and 'none' to the logo generator. Order styles so those are on top in the dropdown selector. [#39689]
+- AI Client: Add prompt processing and style guess function for logo generator [#39712]
+
+### Changed
+- AI Client: Change plans limit to use and accept new 3000 value. [#39705]
+- AI Client: Change upgrade copy edit and redirect URL. [#39671]
+- AI Client: If site details show empty or default, do not trigger a logo generation, use empty placeholders. [#39536]
+- AI Client: Remove provision of image styles via flag prop and internal definition, take it from ai-assistant-feature payload now. [#39589]
+- Updated package dependencies. [#39669] [#39707]
+
 ## [0.20.1] - 2024-10-07
 ### Changed
 - Updated package dependencies. [#39594]
@@ -423,6 +435,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.21.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.20.1...v0.21.0
 [0.20.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.20.0...v0.20.1
 [0.20.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.19.0...v0.20.0
 [0.19.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.18.1...v0.19.0

package/build/{hooks → ai-client/src/hooks}/use-image-generator/constants.d.ts

@@ -16,24 +16,10 @@ export declare const IMAGE_STYLE_3D_MODEL = "3d-model";
 export declare const IMAGE_STYLE_PIXEL_ART = "pixel-art";
 export declare const IMAGE_STYLE_TEXTURE = "texture";
 export declare const IMAGE_STYLE_MONTY_PYTHON = "monty-python";
-export declare const IMAGE_STYLE_LABELS: {
-    enhance: string;
-    anime: string;
-    photographic: string;
-    "digital-art": string;
-    comicbook: string;
-    "fantasy-art": string;
-    "analog-film": string;
-    neonpunk: string;
-    isometric: string;
-    lowpoly: string;
-    origami: string;
-    "line-art": string;
-    "craft-clay": string;
-    cinematic: string;
-    "3d-model": string;
-    "pixel-art": string;
-    texture: string;
-    "monty-python": string;
+export declare const IMAGE_STYLE_AUTO = "auto";
+export declare const IMAGE_STYLE_NONE = "none";
+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 ImageStyleObject = {
+    label: string;
+    value: ImageStyle;
 };
-export type ImageStyle = keyof typeof IMAGE_STYLE_LABELS;

package/build/ai-client/src/hooks/use-image-generator/constants.js

@@ -0,0 +1,21 @@
+// 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_AUTO = 'auto';
+export const IMAGE_STYLE_NONE = 'none';

package/build/{hooks → ai-client/src/hooks}/use-image-generator/index.d.ts

@@ -19,7 +19,6 @@ declare const useImageGenerator: () => {
         userPrompt?: string;
     }) => Promise<ImageGenerationResponse>;
     generateImageWithParameters: (parameters: object) => Promise<ImageGenerationResponse>;
-    getImageStyles: () => object;
 };
 export default useImageGenerator;
 export * from './constants.js';

package/build/{hooks → ai-client/src/hooks}/use-image-generator/index.js

@@ -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');
 /**
  * Cut the post content on a given lenght so the total length of the prompt is not longer than 4000 characters.
@@ -196,19 +195,10 @@ const useImageGenerator = () => {
             return Promise.reject(error);
         }
     };
-    /**
-     * Get available styles.
-     *
-     * @return {object} with the styles {key:label} for the image generation.
-     */
-    const getImageStyles = function () {
-        return IMAGE_STYLE_LABELS;
-    };
     return {
         generateImage,
         generateImageWithStableDiffusion,
         generateImageWithParameters: executeImageGeneration,
-        getImageStyles,
     };
 };
 export default useImageGenerator;

package/build/{logo-generator → ai-client/src/logo-generator}/components/generator-modal.js

@@ -29,7 +29,7 @@ import { UpgradeScreen } from './upgrade-screen.js';
 import { VisitSiteBanner } from './visit-site-banner.js';
 import './generator-modal.scss';
 const debug = debugFactory('jetpack-ai-calypso:generator-modal');
-export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDetails, context, placement, showStyleSelector, }) => {
+export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDetails, context, placement, }) => {
     const { tracks } = useAnalytics();
     const { recordEvent: recordTracksEvent } = tracks;
     const { setSiteDetails, fetchAiAssistantFeature, loadLogoHistory, setIsLoadingHistory } = useDispatch(STORE_NAME);
@@ -40,7 +40,7 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDet
     const requestedFeatureData = useRef(false);
     const [needsFeature, setNeedsFeature] = useState(false);
     const [needsMoreRequests, setNeedsMoreRequests] = useState(false);
-    const { selectedLogo, getAiAssistantFeature, generateFirstPrompt, generateLogo, setContext, tierPlansEnabled, } = useLogoGenerator();
+    const { selectedLogo, getAiAssistantFeature, generateFirstPrompt, generateLogo, setContext, tierPlansEnabled, site, requireUpgrade, } = useLogoGenerator();
     const { featureFetchError, firstLogoPromptFetchError, clearErrors } = useRequestErrors();
     const siteId = siteDetails?.ID;
     const [logoAccepted, setLogoAccepted] = useState(false);
@@ -73,9 +73,10 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDet
             const hasHistory = !isLogoHistoryEmpty(String(siteId));
             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.
             const siteNeedsMoreRequests = !isUnlimited &&
@@ -96,13 +97,30 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDet
             await clearDeletedMedia(String(siteId));
             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);
@@ -116,6 +134,7 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDet
         clearDeletedMedia,
         isLogoHistoryEmpty,
         siteId,
+        requireUpgrade,
     ]);
     const handleModalOpen = useCallback(async () => {
         setContext(context);
@@ -181,7 +200,7 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDet
         body = (_jsx(UpgradeScreen, { onCancel: closeModal, upgradeURL: upgradeURL, reason: needsFeature ? 'feature' : 'requests' }));
     }
     else {
-        body = (_jsxs(_Fragment, { children: [!logoAccepted && (_jsx(Prompt, { initialPrompt: initialPrompt, showStyleSelector: showStyleSelector })), _jsx(LogoPresenter, { logo: selectedLogo, onApplyLogo: handleApplyLogo, logoAccepted: logoAccepted, siteId: String(siteId) }), logoAccepted ? (_jsxs("div", { className: "jetpack-ai-logo-generator__accept", children: [_jsx(VisitSiteBanner, {}), _jsx("div", { className: "jetpack-ai-logo-generator__accept-actions", children: _jsx(Button, { variant: "primary", onClick: closeModal, children: __('Close', 'jetpack-ai-client') }) })] })) : (_jsxs(_Fragment, { children: [_jsx(HistoryCarousel, {}), _jsx("div", { className: "jetpack-ai-logo-generator__footer", children: _jsxs(Button, { variant: "link", className: "jetpack-ai-logo-generator__feedback-button", href: "https://jetpack.com/redirect/?source=jetpack-ai-feedback", target: "_blank", onClick: handleFeedbackClick, children: [_jsx("span", { children: __('Provide feedback', 'jetpack-ai-client') }), _jsx(Icon, { icon: external, className: "icon" })] }) })] }))] }));
+        body = (_jsxs(_Fragment, { children: [!logoAccepted && _jsx(Prompt, { initialPrompt: initialPrompt }), _jsx(LogoPresenter, { logo: selectedLogo, onApplyLogo: handleApplyLogo, logoAccepted: logoAccepted, siteId: String(siteId) }), logoAccepted ? (_jsxs("div", { className: "jetpack-ai-logo-generator__accept", children: [_jsx(VisitSiteBanner, {}), _jsx("div", { className: "jetpack-ai-logo-generator__accept-actions", children: _jsx(Button, { variant: "primary", onClick: closeModal, children: __('Close', 'jetpack-ai-client') }) })] })) : (_jsxs(_Fragment, { children: [_jsx(HistoryCarousel, {}), _jsx("div", { className: "jetpack-ai-logo-generator__footer", children: _jsxs(Button, { variant: "link", className: "jetpack-ai-logo-generator__feedback-button", href: "https://jetpack.com/redirect/?source=jetpack-ai-feedback", target: "_blank", onClick: handleFeedbackClick, children: [_jsx("span", { children: __('Provide feedback', 'jetpack-ai-client') }), _jsx(Icon, { icon: external, className: "icon" })] }) })] }))] }));
     }
     return (_jsx(_Fragment, { children: isOpen && (_jsx(Modal, { className: "jetpack-ai-logo-generator-modal", onRequestClose: closeModal, shouldCloseOnClickOutside: false, shouldCloseOnEsc: false, title: __('Jetpack AI Logo Generator', 'jetpack-ai-client'), children: _jsx("div", { className: clsx('jetpack-ai-logo-generator-modal__body', {
                     'notice-modal': needsFeature || needsMoreRequests || featureFetchError || firstLogoPromptFetchError,

package/build/{logo-generator → ai-client/src/logo-generator}/components/history-carousel.js

@@ -31,7 +31,7 @@ export const HistoryCarousel = () => {
         }
         return thumbnailURL.toString();
     };
-    return (_jsxs("div", { className: "jetpack-ai-logo-generator__carousel", children: [!logos.length && isLoadingHistory && (_jsx(Button, { disabled: true, className: clsx('jetpack-ai-logo-generator__carousel-logo'), children: _jsx("img", { height: "48", width: "48", src: loader, alt: 'loading' }) })), logos.map((logo, index) => (_jsx(Button, { className: clsx('jetpack-ai-logo-generator__carousel-logo', {
+    return (_jsxs("div", { className: "jetpack-ai-logo-generator__carousel", children: [!logos.length && isLoadingHistory && (_jsx(Button, { disabled: true, className: clsx('jetpack-ai-logo-generator__carousel-logo'), children: _jsx("img", { height: "48", width: "48", src: loader, alt: 'loading' }) })), !logos.length && !isLoadingHistory && _jsx("div", { children: "\u00A0" }), logos.map((logo, index) => (_jsx(Button, { className: clsx('jetpack-ai-logo-generator__carousel-logo', {
                     'is-selected': logo.url === selectedLogo.url,
                 }), onClick: () => handleClick(index), children: _jsx("img", { src: thumbnailFrom(logo.url), alt: logo.description }) }, logo.url)))] }));
 };

package/build/{logo-generator → ai-client/src/logo-generator}/components/logo-presenter.js

@@ -69,7 +69,7 @@ const UseOnSiteButton = ({ onApplyLogo, }) => {
             onApplyLogo?.(selectedLogo?.mediaId);
         }
     };
-    return (_jsxs(Button, { className: "jetpack-ai-logo-generator-modal-presenter__action", onClick: handleClick, disabled: isSavingLogoToLibrary || !selectedLogo?.mediaId, children: [_jsx(Icon, { icon: _jsx(LogoIcon, {}) }), _jsx("span", { className: "action-text", children: __('Use on block', 'jetpack-ai-client') })] }));
+    return (_jsxs(Button, { className: "jetpack-ai-logo-generator-modal-presenter__action", onClick: handleClick, disabled: isSavingLogoToLibrary || !selectedLogo?.mediaId, variant: "secondary", children: [_jsx(Icon, { icon: _jsx(LogoIcon, {}) }), _jsx("span", { className: "action-text", children: __('Use on block', 'jetpack-ai-client') })] }));
 };
 const LogoLoading = () => {
     return (_jsxs(_Fragment, { children: [_jsx(ImageLoader, { className: "jetpack-ai-logo-generator-modal-presenter__logo" }), _jsx("span", { className: "jetpack-ai-logo-generator-modal-presenter__loading-text", children: __('Generating new logo…', 'jetpack-ai-client') })] }));
@@ -77,6 +77,9 @@ const LogoLoading = () => {
 const LogoFetching = () => {
     return (_jsxs(_Fragment, { children: [_jsx(ImageLoader, { className: "jetpack-ai-logo-generator-modal-presenter__logo" }), _jsx("span", { className: "jetpack-ai-logo-generator-modal-presenter__loading-text", children: __('Fetching previous logos…', 'jetpack-ai-client') })] }));
 };
+const LogoEmpty = () => {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: { width: 0, height: '229px' } }), _jsx("span", { className: "jetpack-ai-logo-generator-modal-presenter__loading-text", children: __('Once you generate a logo, it will show up here', 'jetpack-ai-client') })] }));
+};
 const LogoReady = ({ siteId, logo, onApplyLogo }) => {
     return (_jsxs(_Fragment, { children: [_jsx("img", { src: logo.url, alt: logo.description, className: "jetpack-ai-logo-generator-modal-presenter__logo" }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal-presenter__action-wrapper", children: [_jsx("span", { className: "jetpack-ai-logo-generator-modal-presenter__description", children: logo.description }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal-presenter__actions", children: [_jsx(SaveInLibraryButton, { siteId: siteId }), _jsx(UseOnSiteButton, { onApplyLogo: onApplyLogo })] })] })] }));
 };
@@ -88,7 +91,10 @@ export const LogoPresenter = ({ logo = null, loading = false, onApplyLogo, logoA
     const { isRequestingImage } = useLogoGenerator();
     const { saveToLibraryError, logoUpdateError } = useRequestErrors();
     let logoContent;
-    if (!logo) {
+    if (!logo && !isRequestingImage) {
+        logoContent = _jsx(LogoEmpty, {});
+    }
+    else if (!logo) {
         debug('No logo provided, history still loading or logo being generated');
         logoContent = _jsx(LogoFetching, {});
     }

package/build/ai-client/src/logo-generator/components/prompt.d.ts

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

package/build/{logo-generator → ai-client/src/logo-generator}/components/prompt.js

@@ -11,9 +11,9 @@ 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, MINIMUM_PROMPT_LENGTH, EVENT_UPGRADE, EVENT_PLACEMENT_INPUT_FOOTER, EVENT_SWITCH_STYLE, } from '../constants.js';
+import { EVENT_GENERATE, MINIMUM_PROMPT_LENGTH, 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';
 import useRequestErrors from '../hooks/use-request-errors.js';
@@ -21,7 +21,7 @@ import { FairUsageNotice } from './fair-usage-notice.js';
 import { UpgradeNudge } from './upgrade-nudge.js';
 import './prompt.scss';
 const debug = debugFactory('jetpack-ai-calypso:prompt-box');
-export const Prompt = ({ initialPrompt = '', showStyleSelector = false }) => {
+export const Prompt = ({ initialPrompt = '' }) => {
     const { tracks } = useAnalytics();
     const { recordEvent: recordTracksEvent } = tracks;
     const [prompt, setPrompt] = useState(initialPrompt);
@@ -29,8 +29,10 @@ export const Prompt = ({ initialPrompt = '', showStyleSelector = false }) => {
     const { enhancePromptFetchError, logoFetchError } = useRequestErrors();
     const { nextTierCheckoutURL: checkoutUrl, hasNextTier } = useCheckout();
     const hasPrompt = prompt?.length >= MINIMUM_PROMPT_LENGTH;
-    const [style, setStyle] = useState(showStyleSelector ? IMAGE_STYLE_LINE_ART : null);
-    const { generateLogo, enhancePrompt, setIsEnhancingPrompt, isBusy, isEnhancingPrompt, site, getAiAssistantFeature, requireUpgrade, context, tierPlansEnabled, getImageStyles, } = useLogoGenerator();
+    const [showStyleSelector, setShowStyleSelector] = useState(false);
+    const [style, setStyle] = useState(null);
+    const [styles, setStyles] = useState([]);
+    const { generateLogo, enhancePrompt, setIsEnhancingPrompt, isBusy, isEnhancingPrompt, site, getAiAssistantFeature, requireUpgrade, context, tierPlansEnabled, imageStyles, guessStyle, } = useLogoGenerator();
     const enhancingLabel = __('Enhancing…', 'jetpack-ai-client');
     const enhanceLabel = __('Enhance prompt', 'jetpack-ai-client');
     const enhanceButtonLabel = isEnhancingPrompt ? enhancingLabel : enhanceLabel;
@@ -67,10 +69,39 @@ export const Prompt = ({ initialPrompt = '', showStyleSelector = false }) => {
             inputRef.current.textContent = prompt;
         }
     }, [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) => {
         setPrompt(event.target.textContent || '');
@@ -97,18 +128,15 @@ export const Prompt = ({ initialPrompt = '', showStyleSelector = false }) => {
         setStyle(imageStyle);
         recordTracksEvent(EVENT_SWITCH_STYLE, { context, style: imageStyle });
     }, [context, setStyle, recordTracksEvent]);
-    const imageStyles = getImageStyles();
-    const availableStyles = Object.keys(imageStyles).filter((styleKey) => styleKey !== IMAGE_STYLE_MONTY_PYTHON);
-    return (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt", children: [_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-header", children: [_jsx("div", { className: "jetpack-ai-logo-generator__prompt-label", children: __('Describe your site:', 'jetpack-ai-client') }), _jsx("div", { className: "jetpack-ai-logo-generator__prompt-actions", children: _jsxs(Button, { variant: "link", disabled: isBusy || requireUpgrade || !hasPrompt, onClick: onEnhance, children: [_jsx(AiIcon, {}), enhanceButtonLabel] }) }), showStyleSelector && availableStyles && (_jsx(SelectControl
-                    // label={ __( 'Style', 'jetpack-ai-client' ) }
-                    , { 
-                        // label={ __( 'Style', 'jetpack-ai-client' ) }
-                        __nextHasNoMarginBottom: true, value: style, options: availableStyles.map(imageStyle => ({
-                            label: imageStyles[imageStyle],
-                            value: imageStyle,
-                        })), onChange: updateStyle }))] }), _jsxs("div", { className: "jetpack-ai-logo-generator__prompt-query", children: [_jsx("div", { ref: inputRef, contentEditable: !isBusy && !requireUpgrade, 
+    const onKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            onGenerate();
+        }
+    };
+    return (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt", children: [_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-header", children: [_jsx("div", { className: "jetpack-ai-logo-generator__prompt-label", children: __('Describe your site:', 'jetpack-ai-client') }), _jsx("div", { className: "jetpack-ai-logo-generator__prompt-actions", children: _jsxs(Button, { variant: "link", disabled: isBusy || requireUpgrade || !hasPrompt, onClick: onEnhance, children: [_jsx(AiIcon, {}), enhanceButtonLabel] }) }), showStyleSelector && (_jsx(SelectControl, { __nextHasNoMarginBottom: true, value: style, options: styles, onChange: updateStyle, disabled: isBusy || requireUpgrade }))] }), _jsxs("div", { className: "jetpack-ai-logo-generator__prompt-query", children: [_jsx("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: true, 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') }), _jsx(Button, { variant: "primary", className: "jetpack-ai-logo-generator__prompt-submit", onClick: onGenerate, disabled: isBusy || requireUpgrade || !hasPrompt, children: __('Generate', 'jetpack-ai-client') })] }), _jsxs("div", { className: "jetpack-ai-logo-generator__prompt-footer", children: [!isUnlimited && !requireUpgrade && (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-requests", children: [_jsx("div", { children: sprintf(
+                        suppressContentEditableWarning: true, 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') }), _jsx(Button, { variant: "primary", className: "jetpack-ai-logo-generator__prompt-submit", onClick: onGenerate, disabled: isBusy || requireUpgrade || !hasPrompt, children: __('Generate', 'jetpack-ai-client') })] }), _jsxs("div", { className: "jetpack-ai-logo-generator__prompt-footer", children: [!isUnlimited && !requireUpgrade && (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-requests", children: [_jsx("div", { children: sprintf(
                                 // translators: %u is the number of requests
                                 __('%u requests remaining.', 'jetpack-ai-client'), requestsRemaining) }), hasNextTier && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(Button, { variant: "link", href: checkoutUrl, target: "_blank", onClick: onUpgradeClick, children: __('Upgrade', 'jetpack-ai-client') })] })), "\u00A0", _jsx(Tooltip, { text: __('Logo generation costs 10 requests; prompt enhancement costs 1 request each', 'jetpack-ai-client'), placement: "bottom", children: _jsx(Icon, { className: "prompt-footer__icon", icon: info }) })] })), requireUpgrade && tierPlansEnabled && _jsx(UpgradeNudge, {}), requireUpgrade && !tierPlansEnabled && _jsx(FairUsageNotice, {}), enhancePromptFetchError && (_jsx("div", { className: "jetpack-ai-logo-generator__prompt-error", children: __('Error enhancing prompt. Please try again.', 'jetpack-ai-client') })), logoFetchError && (_jsx("div", { className: "jetpack-ai-logo-generator__prompt-error", children: __('Error generating logo. Please try again.', 'jetpack-ai-client') }))] })] }));
 };

package/build/{logo-generator → ai-client/src/logo-generator}/components/upgrade-screen.js

@@ -8,17 +8,21 @@ 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';
 export const UpgradeScreen = ({ 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.', 'jetpack-ai-client');
+    const upgradeMessageFeature = __('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');
     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 upgradeInfoUrl = getRedirectUrl('ai-logo-generator-fair-usage-policy', {
+        anchor: 'usage-limitations-and-upgrades',
+    });
     const { context } = useLogoGenerator();
     const handleUpgradeClick = () => {
         recordTracksEvent(EVENT_UPGRADE, { context, placement: EVENT_PLACEMENT_FREE_USER_SCREEN });
         onCancel();
     };
-    return (_jsxs("div", { className: "jetpack-ai-logo-generator-modal__notice-message-wrapper", children: [_jsxs("div", { className: "jetpack-ai-logo-generator-modal__notice-message", children: [_jsx("span", { className: "jetpack-ai-logo-generator-modal__loading-message", children: reason === 'feature' ? upgradeMessageFeature : upgradeMessageRequests }), "\u00A0", _jsx(Button, { variant: "link", href: "https://jetpack.com/ai/", target: "_blank", children: __('Learn more about Jetpack AI.', 'jetpack-ai-client') })] }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal__notice-actions", children: [_jsx(Button, { variant: "tertiary", onClick: onCancel, children: __('Cancel', 'jetpack-ai-client') }), _jsx(Button, { variant: "primary", href: upgradeURL, target: "_blank", onClick: handleUpgradeClick, children: __('Upgrade', 'jetpack-ai-client') })] })] }));
+    return (_jsxs("div", { className: "jetpack-ai-logo-generator-modal__notice-message-wrapper", children: [_jsxs("div", { className: "jetpack-ai-logo-generator-modal__notice-message", children: [_jsx("span", { className: "jetpack-ai-logo-generator-modal__loading-message", children: reason === 'feature' ? upgradeMessageFeature : upgradeMessageRequests }), "\u00A0", _jsx(Button, { variant: "link", href: upgradeInfoUrl, target: "_blank", children: __('Learn more about Jetpack AI.', 'jetpack-ai-client') })] }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal__notice-actions", children: [_jsx(Button, { variant: "tertiary", onClick: onCancel, children: __('Cancel', 'jetpack-ai-client') }), _jsx(Button, { variant: "primary", href: upgradeURL, target: "_blank", onClick: handleUpgradeClick, children: __('Upgrade', 'jetpack-ai-client') })] })] }));
 };

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

@@ -9,6 +9,7 @@ export declare const EVENT_NAVIGATE = "jetpack_ai_logo_generator_navigate";
 export declare const EVENT_FEEDBACK = "jetpack_ai_logo_generator_feedback";
 export declare const EVENT_UPGRADE = "jetpack_ai_upgrade_button";
 export declare const EVENT_SWITCH_STYLE = "jetpack_ai_logo_generator_switch_style";
+export declare const EVENT_GUESS_STYLE = "jetpack_ai_logo_generator_guess_style";
 export declare const EVENT_PLACEMENT_QUICK_LINKS = "quick_links";
 export declare const EVENT_PLACEMENT_INPUT_FOOTER = "input_footer";
 export declare const EVENT_PLACEMENT_FREE_USER_SCREEN = "free_user_screen";

package/build/{logo-generator → ai-client/src/logo-generator}/constants.js

@@ -10,6 +10,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';
 export const EVENT_PLACEMENT_INPUT_FOOTER = 'input_footer';

package/build/{logo-generator → ai-client/src/logo-generator}/hooks/use-checkout.js

@@ -3,12 +3,10 @@
  */
 import { isAtomicSite, isSimpleSite, getSiteFragment, } from '@automattic/jetpack-shared-extension-utils';
 import { useSelect } from '@wordpress/data';
-import debugFactory from 'debug';
 /**
  * Internal dependencies
  */
 import { STORE_NAME } from '../store/index.js';
-const debug = debugFactory('ai-client:logo-generator:use-checkout');
 export const useCheckout = () => {
     const { nextTier, tierPlansEnabled } = useSelect(select => {
         const selectors = select(STORE_NAME);
@@ -38,7 +36,6 @@ export const useCheckout = () => {
         checkoutUrl.searchParams.set('query', `redirect_to=${encodeURIComponent(wpcomRedirectToURL)}`);
     }
     const nextTierCheckoutURL = checkoutUrl.toString();
-    debug('Next tier checkout URL: ', nextTierCheckoutURL);
     return {
         nextTierCheckoutURL,
         hasNextTier: !!nextTier,

package/build/{logo-generator → ai-client/src/logo-generator}/hooks/use-fair-usage-notice-message.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 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
  */
@@ -35,8 +36,11 @@ const useFairUsageNoticeMessage = () => {
     const nextUsagePeriodStartDateString = getFormattedUsagePeriodStartDate(usagePeriod);
     // 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: (_jsx("a", { href: "https://jetpack.com/redirect/?source=ai-logo-generator-fair-usage-policy", target: "_blank", rel: "noreferrer" })),
+        link: _jsx("a", { href: upgradeInfoUrl, target: "_blank", rel: "noreferrer" }),
     });
     return fairUsageNoticeMessageElement;
 };

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

@@ -1,7 +1,7 @@
 /**
  * Types
  */
-import type { ImageStyle } from '../../hooks/use-image-generator/constants.js';
+import type { ImageStyle, ImageStyleObject } from '../../hooks/use-image-generator/constants.js';
 import type { Logo, SaveLogo } from '../store/types.js';
 declare const useLogoGenerator: () => {
     logos: Logo[];
@@ -48,6 +48,7 @@ declare const useLogoGenerator: () => {
     tierPlansEnabled: boolean;
     isLoadingHistory: boolean;
     setIsLoadingHistory: any;
-    getImageStyles: () => object;
+    imageStyles: ImageStyleObject[];
+    guessStyle: (prompt: string) => Promise<ImageStyle | null>;
 };
 export default useLogoGenerator;

package/build/{logo-generator → ai-client/src/logo-generator}/hooks/use-logo-generator.js

@@ -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';
@@ -37,12 +38,14 @@ const useLogoGenerator = () => {
         };
     }, []);
     const { setFirstLogoPromptFetchError, setEnhancePromptFetchError, setLogoFetchError, setSaveToLibraryError, setLogoUpdateError, } = useRequestErrors();
-    const { generateImageWithParameters, getImageStyles } = useImageGenerator();
+    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 logoGeneratorControl = aiAssistantFeatureData?.featuresControl?.['logo-generator'];
+    const imageStyles = logoGeneratorControl?.styles;
     const generateFirstPrompt = useCallback(async function () {
         setFirstLogoPromptFetchError(null);
         increaseAiAssistantRequestsCount();
@@ -127,6 +130,38 @@ For example: user's prompt: A logo for an ice cream shop. Returned prompt: A log
             throw error;
         }
     };
+    const guessStyle = useCallback(async function (prompt) {
+        setLogoFetchError(null);
+        if (!imageStyles || !imageStyles.length) {
+            return null;
+        }
+        const messages = [
+            {
+                role: 'jetpack-ai',
+                context: {
+                    type: 'ai-assistant-guess-logo-style',
+                    request: prompt,
+                    name,
+                    description,
+                },
+            },
+        ];
+        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, }) {
         setLogoFetchError(null);
         try {
@@ -134,6 +169,9 @@ For example: user's prompt: A logo for an ice cream shop. Returned prompt: A log
             if (!tokenData || !tokenData.token) {
                 throw new Error('No token provided');
             }
+            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.
@@ -146,6 +184,21 @@ The image should contain a single icon, without variations, color palettes or di
 User request:${prompt}`;
             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
@@ -157,7 +210,7 @@ User request:${prompt}`;
             setLogoFetchError(error);
             throw error;
         }
-    }, []);
+    }, [name, description]);
     const saveLogo = useCallback(async (logo) => {
         setSaveToLibraryError(null);
         try {
@@ -287,7 +340,8 @@ User request:${prompt}`;
         tierPlansEnabled,
         isLoadingHistory,
         setIsLoadingHistory,
-        getImageStyles,
+        imageStyles,
+        guessStyle,
     };
 };
 export default useLogoGenerator;

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

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

package/build/{logo-generator → ai-client/src/logo-generator}/store/constants.js

@@ -15,7 +15,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';