@automattic/jetpack-ai-client 0.34.5 → 0.34.7

package/build/{logo-generator → src/logo-generator}/components/first-load-screen.js

@@ -6,11 +6,13 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { ImageLoader } from "./image-loader.js";
+import { ImageLoader } from './image-loader.js';
 import './first-load-screen.scss';
 export const FirstLoadScreen = ({ state = 'loadingFeature' }) => {
     const loadingLabel = __('Loading…', 'jetpack-ai-client');
     const analyzingLabel = __('Analyzing your site to create the perfect logo…', 'jetpack-ai-client');
     const generatingLabel = __('Generating logo…', 'jetpack-ai-client');
-    return (_jsxs("div", { className: "jetpack-ai-logo-generator-modal__loading-wrapper", children: [_jsx(ImageLoader, {}), _jsxs("span", { className: "jetpack-ai-logo-generator-modal__loading-message", children: [state === 'loadingFeature' && loadingLabel, state === 'analyzing' && analyzingLabel, state === 'generating' && generatingLabel] })] }));
+    return (_jsxs("div", { className: "jetpack-ai-logo-generator-modal__loading-wrapper", children: [
+            _jsx(ImageLoader, {}), _jsxs("span", { className: "jetpack-ai-logo-generator-modal__loading-message", children: [state === 'loadingFeature' && loadingLabel, state === 'analyzing' && analyzingLabel, state === 'generating' && generatingLabel] })
+        ] }));
 };

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * External dependencies
  */
@@ -12,20 +12,20 @@ import { useState, useEffect, useCallback, useRef } from 'react';
 /**
  * Internal dependencies
  */
-import AiModalFooter from "../../components/ai-modal-footer/index.js";
-import { DEFAULT_LOGO_COST, EVENT_MODAL_OPEN, EVENT_FEEDBACK, EVENT_MODAL_CLOSE, EVENT_GENERATE, } 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";
-import { isLogoHistoryEmpty, clearDeletedMedia } from "../lib/logo-storage.js";
-import { STORE_NAME } from "../store/index.js";
-import { FeatureFetchFailureScreen } from "./feature-fetch-failure-screen.js";
-import { FirstLoadScreen } from "./first-load-screen.js";
-import { HistoryCarousel } from "./history-carousel.js";
-import { LogoPresenter } from "./logo-presenter.js";
-import { Prompt } from "./prompt.js";
-import { UpgradeScreen } from "./upgrade-screen.js";
-import { VisitSiteBanner } from "./visit-site-banner.js";
+import AiModalFooter from '../../components/ai-modal-footer/index.js';
+import { DEFAULT_LOGO_COST, EVENT_MODAL_OPEN, EVENT_FEEDBACK, EVENT_MODAL_CLOSE, EVENT_GENERATE, } 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';
+import { isLogoHistoryEmpty, clearDeletedMedia } from '../lib/logo-storage.js';
+import { STORE_NAME } from '../store/index.js';
+import { FeatureFetchFailureScreen } from './feature-fetch-failure-screen.js';
+import { FirstLoadScreen } from './first-load-screen.js';
+import { HistoryCarousel } from './history-carousel.js';
+import { LogoPresenter } from './logo-presenter.js';
+import { Prompt } from './prompt.js';
+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 = null, siteDetails, context, placement, }) => {
@@ -212,7 +212,11 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload = null,
         body = (_jsx(UpgradeScreen, { onCancel: closeModal, upgradeURL: upgradeURL, reason: needsFeature ? 'feature' : 'requests' }));
     }
     else {
-        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: _jsx(AiModalFooter, { onFeedbackClick: handleFeedbackClick }) })] }))] }));
+        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: _jsx(AiModalFooter, { onFeedbackClick: handleFeedbackClick }) })
+                    ] }))] }));
     }
     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 → src/logo-generator}/components/history-carousel.js

@@ -9,8 +9,8 @@ import clsx from 'clsx';
  * Internal dependencies
  */
 import loader from '../assets/images/loader.gif';
-import { EVENT_NAVIGATE } from "../constants.js";
-import useLogoGenerator from "../hooks/use-logo-generator.js";
+import { EVENT_NAVIGATE } from '../constants.js';
+import useLogoGenerator from '../hooks/use-logo-generator.js';
 import './history-carousel.scss';
 export const HistoryCarousel = () => {
     const { tracks } = useAnalytics();

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * External dependencies
  */
@@ -10,16 +10,16 @@ import debugFactory from 'debug';
 /**
  * Internal dependencies
  */
-import AiFeedbackThumbs from "../../components/ai-feedback/index.js";
-import CheckIcon from "../assets/icons/check.js";
-import LogoIcon from "../assets/icons/logo.js";
-import MediaIcon from "../assets/icons/media.js";
-import { EVENT_SAVE, EVENT_USE } from "../constants.js";
-import useLogoGenerator from "../hooks/use-logo-generator.js";
-import useRequestErrors from "../hooks/use-request-errors.js";
-import { updateLogo } from "../lib/logo-storage.js";
-import { STORE_NAME } from "../store/index.js";
-import { ImageLoader } from "./image-loader.js";
+import AiFeedbackThumbs from '../../components/ai-feedback/index.js';
+import CheckIcon from '../assets/icons/check.js';
+import LogoIcon from '../assets/icons/logo.js';
+import MediaIcon from '../assets/icons/media.js';
+import { EVENT_SAVE, EVENT_USE } from '../constants.js';
+import useLogoGenerator from '../hooks/use-logo-generator.js';
+import useRequestErrors from '../hooks/use-request-errors.js';
+import { updateLogo } from '../lib/logo-storage.js';
+import { STORE_NAME } from '../store/index.js';
+import { ImageLoader } from './image-loader.js';
 import './logo-presenter.scss';
 const debug = debugFactory('jetpack-ai-calypso:logo-presenter');
 const SaveInLibraryButton = ({ siteId }) => {
@@ -54,7 +54,10 @@ const SaveInLibraryButton = ({ siteId }) => {
     };
     const savingLabel = _x('Saving…', 'Logo save button', 'jetpack-ai-client');
     const savedLabel = __('Saved', 'jetpack-ai-client');
-    return !saving && !saved ? (_jsxs(Button, { className: "jetpack-ai-logo-generator-modal-presenter__action", onClick: handleClick, children: [_jsx(Icon, { icon: _jsx(MediaIcon, {}) }), _jsx("span", { className: "action-text", children: __('Save in Library', 'jetpack-ai-client') })] })) : (_jsxs(Button, { className: "jetpack-ai-logo-generator-modal-presenter__action", children: [_jsx(Icon, { icon: saving ? _jsx(MediaIcon, {}) : _jsx(CheckIcon, {}) }), _jsx("span", { className: "action-text", children: saving ? savingLabel : savedLabel })] }));
+    return !saving && !saved ? (_jsxs(Button, { className: "jetpack-ai-logo-generator-modal-presenter__action", onClick: handleClick, children: [
+            _jsx(Icon, { icon: _jsx(MediaIcon, {}) }), _jsx("span", { className: "action-text", children: __('Save in Library', 'jetpack-ai-client') })
+        ] })) : (_jsxs(Button, { className: "jetpack-ai-logo-generator-modal-presenter__action", children: [_jsx(Icon, { icon: saving ? _jsx(MediaIcon, {}) : _jsx(CheckIcon, {}) }), _jsx("span", { className: "action-text", children: saving ? savingLabel : savedLabel })
+        ] }));
 };
 const UseOnSiteButton = ({ onApplyLogo }) => {
     const { tracks } = useAnalytics();
@@ -70,16 +73,24 @@ const UseOnSiteButton = ({ onApplyLogo }) => {
             onApplyLogo?.(selectedLogo?.mediaId);
         }
     };
-    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') })] }));
+    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') })] }));
+    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') })
+        ] }));
 };
 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') })] }));
+    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') })] }));
+    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 RateLogo = ({ disabled, ratedItem, onRate }) => {
     const { logos, selectedLogo } = useLogoGenerator();
@@ -105,10 +116,20 @@ const LogoReady = ({ siteId, logo, onApplyLogo }) => {
             rating,
         });
     };
-    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 }), _jsx(RateLogo, { ratedItem: logo.url, disabled: false, onRate: handleRateLogo })] })] })] }));
+    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 }), _jsx(RateLogo, { ratedItem: logo.url, disabled: false, onRate: handleRateLogo })
+                        ] })
+                ] })
+        ] }));
 };
 const LogoUpdated = ({ logo }) => {
-    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__success-wrapper", children: [_jsx(Icon, { icon: _jsx(CheckIcon, {}) }), _jsx("span", { children: __('Your new logo was set to the block!', 'jetpack-ai-client') })] })] }));
+    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__success-wrapper", children: [
+                    _jsx(Icon, { icon: _jsx(CheckIcon, {}) }), _jsx("span", { children: __('Your new logo was set to the block!', 'jetpack-ai-client') })
+                ] })
+        ] }));
 };
 export const LogoPresenter = ({ logo = null, loading = false, onApplyLogo, logoAccepted = false, siteId, }) => {
     const { isRequestingImage } = useLogoGenerator();
@@ -130,5 +151,7 @@ export const LogoPresenter = ({ logo = null, loading = false, onApplyLogo, logoA
     else {
         logoContent = (_jsx(LogoReady, { siteId: String(siteId), logo: logo, onApplyLogo: onApplyLogo }));
     }
-    return (_jsxs("div", { className: "jetpack-ai-logo-generator-modal-presenter__wrapper", children: [_jsxs("div", { className: "jetpack-ai-logo-generator-modal-presenter", children: [_jsx("div", { className: "jetpack-ai-logo-generator-modal-presenter__content", children: logoContent }), !logoAccepted && (_jsx("div", { className: "jetpack-ai-logo-generator-modal-presenter__rectangle" }))] }), saveToLibraryError && (_jsx("div", { className: "jetpack-ai-logo-generator__prompt-error", children: __('Error saving the logo to your library. Please try again.', 'jetpack-ai-client') })), logoUpdateError && (_jsx("div", { className: "jetpack-ai-logo-generator__prompt-error", children: __('Error applying the logo to your site. Please try again.', 'jetpack-ai-client') }))] }));
+    return (_jsxs("div", { className: "jetpack-ai-logo-generator-modal-presenter__wrapper", children: [
+            _jsxs("div", { className: "jetpack-ai-logo-generator-modal-presenter", children: [
+                    _jsx("div", { className: "jetpack-ai-logo-generator-modal-presenter__content", children: logoContent }), !logoAccepted && (_jsx("div", { className: "jetpack-ai-logo-generator-modal-presenter__rectangle" }))] }), saveToLibraryError && (_jsx("div", { className: "jetpack-ai-logo-generator__prompt-error", children: __('Error saving the logo to your library. Please try again.', 'jetpack-ai-client') })), logoUpdateError && (_jsx("div", { className: "jetpack-ai-logo-generator__prompt-error", children: __('Error applying the logo to your site. Please try again.', 'jetpack-ai-client') }))] }));
 };

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * External dependencies
  */
@@ -11,14 +11,14 @@ import { useCallback, useEffect, useState, useRef } from 'react';
 /**
  * Internal dependencies
  */
-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, 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";
-import { FairUsageNotice } from "./fair-usage-notice.js";
-import { UpgradeNudge } from "./upgrade-nudge.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, 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';
+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 AiModalPromptInput = ({ prompt = '', setPrompt = () => { }, disabled = false, actionDisabled = false, generateHandler = () => { }, placeholder = '', buttonLabel = '', }) => {
@@ -60,9 +60,11 @@ export const AiModalPromptInput = ({ prompt = '', setPrompt = () => { }, disable
             inputRef.current.innerHTML = '';
         }
     };
-    return (_jsxs("div", { className: "jetpack-ai-image-generator__prompt-query", children: [_jsx("div", { role: "textbox", tabIndex: 0, ref: inputRef, contentEditable: !disabled, 
+    return (_jsxs("div", { className: "jetpack-ai-image-generator__prompt-query", children: [
+            _jsx("div", { role: "textbox", tabIndex: 0, ref: inputRef, contentEditable: !disabled, 
                 // 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, onKeyDown: onKeyDown, onKeyUp: onKeyUp, "data-placeholder": placeholder }), _jsx(Button, { variant: "primary", className: "jetpack-ai-image-generator__prompt-submit", onClick: generateHandler, disabled: actionDisabled, children: buttonLabel || __('Generate', 'jetpack-ai-client') })] }));
+                suppressContentEditableWarning: true, className: "prompt-query__input", onInput: onPromptInput, onPaste: onPromptPaste, onKeyDown: onKeyDown, onKeyUp: onKeyUp, "data-placeholder": placeholder }), _jsx(Button, { variant: "primary", className: "jetpack-ai-image-generator__prompt-submit", onClick: generateHandler, disabled: actionDisabled, children: buttonLabel || __('Generate', 'jetpack-ai-client') })
+        ] }));
 };
 export const Prompt = ({ initialPrompt = '' }) => {
     const { tracks } = useAnalytics();
@@ -154,7 +156,16 @@ export const Prompt = ({ initialPrompt = '' }) => {
         setStyle(imageStyle);
         recordTracksEvent(EVENT_SWITCH_STYLE, { context, style: imageStyle });
     }, [context, setStyle, recordTracksEvent]);
-    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, __next40pxDefaultSize: true, value: style, options: styles, onChange: updateStyle, disabled: isBusy || requireUpgrade }))] }), _jsx(AiModalPromptInput, { prompt: prompt, setPrompt: setPrompt, generateHandler: onGenerate, disabled: isBusy || requireUpgrade, actionDisabled: isBusy || requireUpgrade || !hasPrompt, placeholder: __('Describe your site or simply ask for a logo specifying some details about it', '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(
+    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, __next40pxDefaultSize: true, value: style, options: styles, onChange: updateStyle, disabled: isBusy || requireUpgrade }))] }), _jsx(AiModalPromptInput, { prompt: prompt, setPrompt: setPrompt, generateHandler: onGenerate, disabled: isBusy || requireUpgrade, actionDisabled: isBusy || requireUpgrade || !hasPrompt, placeholder: __('Describe your site or simply ask for a logo specifying some details about it', '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: %d is the number of requests
-                                __('%d requests remaining.', 'jetpack-ai-client'), requestsRemaining) }), hasNextTier && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(Button, { variant: "link", href: checkoutUrl, target: "_blank", onClick: onUpgradeClick, children: _jsx("span", { 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') }))] })] }));
+                                __('%d requests remaining.', 'jetpack-ai-client'), requestsRemaining) }), hasNextTier && (_jsxs(_Fragment, { children: ["\u00A0",
+                                    _jsx(Button, { variant: "link", href: checkoutUrl, target: "_blank", onClick: onUpgradeClick, children: _jsx("span", { 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 → src/logo-generator}/components/upgrade-nudge.js

@@ -10,9 +10,9 @@ import { Icon, cautionFilled as warning } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { EVENT_PLACEMENT_UPGRADE_PROMPT, EVENT_UPGRADE } from "../constants.js";
-import { useCheckout } from "../hooks/use-checkout.js";
-import useLogoGenerator from "../hooks/use-logo-generator.js";
+import { EVENT_PLACEMENT_UPGRADE_PROMPT, EVENT_UPGRADE } from '../constants.js';
+import { useCheckout } from '../hooks/use-checkout.js';
+import useLogoGenerator from '../hooks/use-logo-generator.js';
 import './upgrade-nudge.scss';
 export const UpgradeNudge = () => {
     const { tracks } = useAnalytics();
@@ -26,5 +26,9 @@ export const UpgradeNudge = () => {
     const handleUpgradeClick = () => {
         recordTracksEvent(EVENT_UPGRADE, { context, placement: EVENT_PLACEMENT_UPGRADE_PROMPT });
     };
-    return (_jsx("div", { className: "jetpack-upgrade-plan-banner", children: _jsxs("div", { className: "jetpack-upgrade-plan-banner__wrapper", children: [_jsxs("div", { children: [_jsx(Icon, { className: "jetpack-upgrade-plan-banner__icon", icon: warning }), _jsx("span", { className: "jetpack-upgrade-plan-banner__banner-description", children: upgradeMessage })] }), _jsx(Button, { href: checkoutUrl, target: "_blank", className: "is-primary", onClick: handleUpgradeClick, children: _jsx("span", { children: buttonText }) })] }) }));
+    return (_jsx("div", { className: "jetpack-upgrade-plan-banner", children: _jsxs("div", { className: "jetpack-upgrade-plan-banner__wrapper", children: [
+                _jsxs("div", { children: [
+                        _jsx(Icon, { className: "jetpack-upgrade-plan-banner__icon", icon: warning }), _jsx("span", { className: "jetpack-upgrade-plan-banner__banner-description", children: upgradeMessage })
+                    ] }), _jsx(Button, { href: checkoutUrl, target: "_blank", className: "is-primary", onClick: handleUpgradeClick, children: _jsx("span", { children: buttonText }) })
+            ] }) }));
 };

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

@@ -9,8 +9,8 @@ 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";
+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;
@@ -24,5 +24,13 @@ export const UpgradeScreen = ({ onCancel, upgradeURL, reason }) => {
         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: upgradeInfoUrl, target: "_blank", children: _jsx("span", { 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: _jsx("span", { children: __('Cancel', 'jetpack-ai-client') }) }), _jsx(Button, { variant: "primary", href: upgradeURL, target: "_blank", onClick: handleUpgradeClick, children: _jsx("span", { 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: _jsx("span", { 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: _jsx("span", { children: __('Cancel', 'jetpack-ai-client') }) }), _jsx(Button, { variant: "primary", href: upgradeURL, target: "_blank", onClick: handleUpgradeClick, children: _jsx("span", { children: __('Upgrade', 'jetpack-ai-client') }) })
+                ] })
+        ] }));
 };

package/build/src/logo-generator/components/visit-site-banner.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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';
+export const VisitSiteBanner = ({ className = null, onVisitBlankTarget }) => {
+    return (_jsxs("div", { className: clsx('jetpack-ai-logo-generator-modal-visit-site-banner', className), children: [
+            _jsx("div", { className: "jetpack-ai-logo-generator-modal-visit-site-banner__jetpack-logo", children: _jsx("img", { src: jetpackLogo, alt: "Jetpack" }) }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal-visit-site-banner__content", children: [
+                    _jsx("strong", { children: __('Do you want to know all the amazing things you can do with Jetpack AI?', 'jetpack-ai-client') }), _jsx("span", { children: __('Generate and tweak content, create forms, get feedback and much more.', 'jetpack-ai-client') }), _jsx("div", { children: _jsxs(Button, { variant: "link", href: "https://jetpack.com/redirect/?source=logo_generator_learn_more_about_jetpack_ai", target: "_blank", onClick: onVisitBlankTarget ? onVisitBlankTarget : null, children: [
+                                _jsx("span", { children: __('Learn more about Jetpack AI', 'jetpack-ai-client') }), _jsx(Icon, { icon: external, size: 20 })
+                            ] }) })
+                ] })
+        ] }));
+};

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

@@ -7,7 +7,7 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { STORE_NAME } from "../store/index.js";
+import { STORE_NAME } from '../store/index.js';
 export const useCheckout = () => {
     const { nextTier, tierPlansEnabled } = useSelect(select => {
         const selectors = select(STORE_NAME);

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

@@ -6,7 +6,7 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { STORE_NAME } from "../store/index.js";
+import { STORE_NAME } from '../store/index.js';
 const useFairUsageNoticeMessage = () => {
     const { usagePeriod } = useSelect(select => {
         const selectors = select(STORE_NAME);

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

@@ -18,11 +18,11 @@ declare const useLogoGenerator: () => {
     applyLogo: () => Promise<void>;
     generateImage: ({ prompt, style, }: {
         prompt: string;
-        style?: ImageStyle | null;
+        style?: ImageStyle;
     }) => Promise<{
-        data: Array<{
+        data: {
             url: string;
-        }>;
+        }[];
     }>;
     enhancePrompt: ({ prompt }: {
         prompt: string;
@@ -30,7 +30,7 @@ declare const useLogoGenerator: () => {
     storeLogo: (logo: Logo) => void;
     generateLogo: ({ prompt, style, }: {
         prompt: string;
-        style?: ImageStyle | null;
+        style?: ImageStyle;
     }) => Promise<void>;
     setIsEnhancingPrompt: any;
     setIsRequestingImage: any;
@@ -49,6 +49,6 @@ declare const useLogoGenerator: () => {
     isLoadingHistory: boolean;
     setIsLoadingHistory: any;
     imageStyles: ImageStyleObject[];
-    guessStyle: (prompt: string) => Promise<ImageStyle | null>;
+    guessStyle: (prompt: string) => Promise<ImageStyle>;
 };
 export default useLogoGenerator;

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

@@ -7,14 +7,14 @@ 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";
-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";
+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';
+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';
 const debug = debugFactory('jetpack-ai-calypso:use-logo-generator');
 const useLogoGenerator = () => {
     const { setSelectedLogoIndex, setIsSavingLogoToLibrary, setIsApplyingLogo, setIsRequestingImage, setIsEnhancingPrompt, increaseAiAssistantRequestsCount, addLogoToHistory, setContext, setIsLoadingHistory, } = useDispatch(STORE_NAME);
@@ -211,7 +211,7 @@ User request:${prompt}`;
             throw error;
         }
     }, [name, description]);
-    const saveLogo = useCallback(async (logo) => {
+    const saveLogo = useCallback(async logo => {
         setSaveToLibraryError(null);
         try {
             debug('Saving logo for site');

package/build/{logo-generator → src/logo-generator}/hooks/use-request-errors.js

@@ -5,7 +5,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { STORE_NAME } from "../store/index.js";
+import { STORE_NAME } from '../store/index.js';
 const useRequestErrors = () => {
     const { setFeatureFetchError, setFirstLogoPromptFetchError, setEnhancePromptFetchError, setLogoFetchError, setSaveToLibraryError, setLogoUpdateError, } = useDispatch(STORE_NAME);
     const { featureFetchError, firstLogoPromptFetchError, enhancePromptFetchError, logoFetchError, saveToLibraryError, logoUpdateError, } = useSelect(select => {

package/build/src/logo-generator/index.js

@@ -0,0 +1,2 @@
+export * from './components/generator-modal.js';
+export { AiModalPromptInput } from './components/prompt.js';

package/build/{logo-generator → src/logo-generator}/lib/logo-storage.d.ts

@@ -14,7 +14,7 @@ import { RemoveFromStorageProps, SaveToStorageProps, UpdateInStorageProps } from
  * @param {SaveToStorageProps.revisedPrompt} saveToStorageProps.revisedPrompt - The revised prompt of the logo
  * @return {Logo} The logo that was saved
  */
-export declare function stashLogo({ siteId, url, description, mediaId, revisedPrompt, }: SaveToStorageProps): Logo;
+export declare function stashLogo({ siteId, url, description, mediaId, revisedPrompt }: SaveToStorageProps): Logo;
 /**
  * Update an entry in the site's logo history.
  *

package/build/{logo-generator → src/logo-generator}/lib/logo-storage.js

@@ -1,4 +1,4 @@
-import { mediaExists } from "./media-exists.js";
+import { mediaExists } from './media-exists.js';
 const MAX_LOGOS = 10;
 /**
  * Add an entry to the site's logo history.

package/build/{logo-generator → src/logo-generator}/lib/media-exists.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import apiFetch from "../../api-fetch/index.js";
+import apiFetch from '../../api-fetch/index.js';
 /**
  * Uses the media information to confirm it exists or not on the server.
  *

package/build/{logo-generator → src/logo-generator}/lib/set-site-logo.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import wpcomLimitedRequest from "./wpcom-limited-request.js";
+import wpcomLimitedRequest from './wpcom-limited-request.js';
 /**
  * Set the site logo using a backend request.
  *

package/build/{logo-generator → src/logo-generator}/lib/wpcom-limited-request.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import apiFetch from "../../api-fetch/index.js";
+import apiFetch from '../../api-fetch/index.js';
 /**
  * Types
  */

package/build/{logo-generator → src/logo-generator}/store/actions.js

@@ -1,12 +1,12 @@
 /**
  * Internal dependencies
  */
-import { getSiteLogoHistory } from "../lib/logo-storage.js";
-import wpcomLimitedRequest from "../lib/wpcom-limited-request.js";
+import { getSiteLogoHistory } from '../lib/logo-storage.js';
+import wpcomLimitedRequest from '../lib/wpcom-limited-request.js';
 /**
  * Types & Constants
  */
-import { ACTION_INCREASE_AI_ASSISTANT_REQUESTS_COUNT, ACTION_REQUEST_AI_ASSISTANT_FEATURE, ACTION_SET_AI_ASSISTANT_FEATURE_REQUIRE_UPGRADE, ACTION_SET_SITE_DETAILS, ACTION_STORE_AI_ASSISTANT_FEATURE, ACTION_SET_TIER_PLANS_ENABLED, ACTION_SET_SELECTED_LOGO_INDEX, ACTION_ADD_LOGO_TO_HISTORY, ACTION_SET_IS_SAVING_LOGO_TO_LIBRARY, ACTION_SAVE_SELECTED_LOGO, ACTION_SET_IS_REQUESTING_IMAGE, ACTION_SET_IS_APPLYING_LOGO, ACTION_SET_IS_ENHANCING_PROMPT, ACTION_SET_SITE_HISTORY, ACTION_SET_FEATURE_FETCH_ERROR, ACTION_SET_FIRST_LOGO_PROMPT_FETCH_ERROR, ACTION_SET_ENHANCE_PROMPT_FETCH_ERROR, ACTION_SET_LOGO_FETCH_ERROR, ACTION_SET_LOGO_UPDATE_ERROR, ACTION_SET_SAVE_TO_LIBRARY_ERROR, ACTION_SET_CONTEXT, ACTION_SET_IS_LOADING_HISTORY, } from "./constants.js";
+import { ACTION_INCREASE_AI_ASSISTANT_REQUESTS_COUNT, ACTION_REQUEST_AI_ASSISTANT_FEATURE, ACTION_SET_AI_ASSISTANT_FEATURE_REQUIRE_UPGRADE, ACTION_SET_SITE_DETAILS, ACTION_STORE_AI_ASSISTANT_FEATURE, ACTION_SET_TIER_PLANS_ENABLED, ACTION_SET_SELECTED_LOGO_INDEX, ACTION_ADD_LOGO_TO_HISTORY, ACTION_SET_IS_SAVING_LOGO_TO_LIBRARY, ACTION_SAVE_SELECTED_LOGO, ACTION_SET_IS_REQUESTING_IMAGE, ACTION_SET_IS_APPLYING_LOGO, ACTION_SET_IS_ENHANCING_PROMPT, ACTION_SET_SITE_HISTORY, ACTION_SET_FEATURE_FETCH_ERROR, ACTION_SET_FIRST_LOGO_PROMPT_FETCH_ERROR, ACTION_SET_ENHANCE_PROMPT_FETCH_ERROR, ACTION_SET_LOGO_FETCH_ERROR, ACTION_SET_LOGO_UPDATE_ERROR, ACTION_SET_SAVE_TO_LIBRARY_ERROR, ACTION_SET_CONTEXT, ACTION_SET_IS_LOADING_HISTORY, } from './constants.js';
 /**
  * Map the response from the `sites/$site/ai-assistant-feature`
  * endpoint to the AI Assistant feature props.

package/build/{logo-generator → src/logo-generator}/store/index.js

@@ -5,9 +5,9 @@ import { createReduxStore, register } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import actions from "./actions.js";
-import reducer from "./reducer.js";
-import selectors from "./selectors.js";
+import actions from './actions.js';
+import reducer from './reducer.js';
+import selectors from './selectors.js';
 export const STORE_NAME = 'jetpack-ai/logo-generator';
 const jetpackAiLogoGeneratorStore = createReduxStore(STORE_NAME, {
     // @ts-expect-error -- TSCONVERSION

package/build/{logo-generator → src/logo-generator}/store/initial-state.js

@@ -1,7 +1,7 @@
 /**
  * Types & Constants
  */
-import { ASYNC_REQUEST_COUNTDOWN_INIT_VALUE, FREE_PLAN_REQUESTS_LIMIT } from "./constants.js";
+import { ASYNC_REQUEST_COUNTDOWN_INIT_VALUE, FREE_PLAN_REQUESTS_LIMIT } from './constants.js';
 const INITIAL_STATE = {
     siteDetails: {},
     features: {