@automattic/jetpack-ai-client 0.22.0 → 0.24.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.24.0] - 2024-10-29
+### Added
+- AI Client: export image generator hook constants [#39917]
+
+## [0.23.0] - 2024-10-28
+### Changed
+- AI Client: Decouple prompt input as component and export it for reusability. [#39864]
+- AI Client: Make reload handler prop optional. [#39848]
+
+### Fixed
+- AI Client: Fix initial state being mapped even when fetch fails. [#39846]
+
 ## [0.22.0] - 2024-10-21
 ### Changed
 - AI Client: Add types for AI assistant feature payload data branch featuresControl. [#39826]
@@ -439,6 +451,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.24.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.23.0...v0.24.0
+[0.23.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.22.0...v0.23.0
 [0.22.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.21.0...v0.22.0
 [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

package/build/ai-client/src/index.d.ts

@@ -9,6 +9,7 @@ export { default as useAudioTranscription } from './hooks/use-audio-transcriptio
 export { default as useTranscriptionPostProcessing } from './hooks/use-transcription-post-processing/index.js';
 export { default as useAudioValidation } from './hooks/use-audio-validation/index.js';
 export { default as useImageGenerator } from './hooks/use-image-generator/index.js';
+export * from './hooks/use-image-generator/constants.js';
 export * from './icons/index.js';
 export * from './components/index.js';
 export * from './data-flow/index.js';

package/build/ai-client/src/index.js

@@ -15,6 +15,7 @@ export { default as useAudioTranscription } from './hooks/use-audio-transcriptio
 export { default as useTranscriptionPostProcessing } from './hooks/use-transcription-post-processing/index.js';
 export { default as useAudioValidation } from './hooks/use-audio-validation/index.js';
 export { default as useImageGenerator } from './hooks/use-image-generator/index.js';
+export * from './hooks/use-image-generator/constants.js';
 /*
  * Components: Icons
  */

package/build/ai-client/src/logo-generator/components/feature-fetch-failure-screen.d.ts

@@ -4,5 +4,5 @@
 import type React from 'react';
 export declare const FeatureFetchFailureScreen: React.FC<{
     onCancel: () => void;
-    onRetry: () => void;
+    onRetry?: () => void;
 }>;

package/build/ai-client/src/logo-generator/components/feature-fetch-failure-screen.js

@@ -6,5 +6,6 @@ import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 export const FeatureFetchFailureScreen = ({ onCancel, onRetry }) => {
     const errorMessage = __('We are sorry. There was an error loading your Jetpack AI plan data. Please, try again.', 'jetpack-ai-client');
-    return (_jsxs("div", { className: "jetpack-ai-logo-generator-modal__notice-message-wrapper", children: [_jsx("div", { className: "jetpack-ai-logo-generator-modal__notice-message", children: _jsx("span", { className: "jetpack-ai-logo-generator-modal__loading-message", children: errorMessage }) }), _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", onClick: onRetry, children: __('Try again', 'jetpack-ai-client') })] })] }));
+    const errorMessageWithoutRetry = __('We are sorry. There was an error loading your Jetpack AI plan data. Please, reload the page and try again.', 'jetpack-ai-client');
+    return (_jsxs("div", { className: "jetpack-ai-logo-generator-modal__notice-message-wrapper", children: [_jsx("div", { className: "jetpack-ai-logo-generator-modal__notice-message", children: _jsx("span", { className: "jetpack-ai-logo-generator-modal__loading-message", children: onRetry ? errorMessage : errorMessageWithoutRetry }) }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal__notice-actions", children: [_jsx(Button, { variant: "tertiary", onClick: onCancel, children: __('Cancel', 'jetpack-ai-client') }), onRetry && (_jsx(Button, { variant: "primary", onClick: onRetry, children: __('Try again', 'jetpack-ai-client') }))] })] }));
 };

package/build/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, }) => {
+export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload = null, siteDetails, context, placement, }) => {
     const { tracks } = useAnalytics();
     const { recordEvent: recordTracksEvent } = tracks;
     const { setSiteDetails, fetchAiAssistantFeature, loadLogoHistory, setIsLoadingHistory } = useDispatch(STORE_NAME);
@@ -41,7 +41,7 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDet
     const [needsFeature, setNeedsFeature] = useState(false);
     const [needsMoreRequests, setNeedsMoreRequests] = useState(false);
     const { selectedLogo, getAiAssistantFeature, generateFirstPrompt, generateLogo, setContext, tierPlansEnabled, site, requireUpgrade, } = useLogoGenerator();
-    const { featureFetchError, firstLogoPromptFetchError, clearErrors } = useRequestErrors();
+    const { featureFetchError, setFeatureFetchError, firstLogoPromptFetchError, clearErrors } = useRequestErrors();
     const siteId = siteDetails?.ID;
     const [logoAccepted, setLogoAccepted] = useState(false);
     const { nextTierCheckoutURL: upgradeURL } = useCheckout();
@@ -70,6 +70,13 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDet
      */
     const initializeModal = useCallback(async () => {
         try {
+            if (!siteId) {
+                throw new Error('Site ID is missing');
+            }
+            if (!feature?.featuresControl?.['logo-generator']?.enabled) {
+                setFeatureFetchError('Failed to fetch feature data');
+                throw new Error('Failed to fetch feature data');
+            }
             const hasHistory = !isLogoHistoryEmpty(String(siteId));
             const logoCost = feature?.costs?.['jetpack-ai-logo-generator']?.logo ?? DEFAULT_LOGO_COST;
             const promptCreationCost = 1;
@@ -86,9 +93,9 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDet
                     ? currentLimit - currentUsage < logoCost + promptCreationCost
                     : currentLimit < currentUsage);
             // If the site requires an upgrade, show the upgrade screen immediately.
-            setNeedsFeature(currentLimit === 0);
+            setNeedsFeature(currentValue === 0);
             setNeedsMoreRequests(siteNeedsMoreRequests);
-            if (currentLimit === 0 || siteNeedsMoreRequests) {
+            if (currentValue === 0 || siteNeedsMoreRequests) {
                 setLoadingState(null);
                 return;
             }
@@ -135,6 +142,7 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDet
         isLogoHistoryEmpty,
         siteId,
         requireUpgrade,
+        setFeatureFetchError,
     ]);
     const handleModalOpen = useCallback(async () => {
         setContext(context);
@@ -153,6 +161,14 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDet
         setIsLoadingHistory(false);
         recordTracksEvent(EVENT_MODAL_CLOSE, { context, placement });
     };
+    const handleReload = useCallback(() => {
+        if (!onReload) {
+            return;
+        }
+        closeModal();
+        requestedFeatureData.current = false;
+        onReload();
+    }, [onReload, closeModal]);
     const handleApplyLogo = (mediaId) => {
         setLogoAccepted(true);
         onApplyLogo?.(mediaId);
@@ -177,7 +193,7 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDet
     // Handles modal opening logic
     useEffect(() => {
         // While the modal is not open, the siteId is not set, or the feature data is not available, do nothing.
-        if (!isOpen || !siteId || !feature?.costs) {
+        if (!isOpen) {
             return;
         }
         // Prevent multiple calls of the handleModalOpen function
@@ -185,16 +201,13 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDet
             needsToHandleModalOpen.current = false;
             handleModalOpen();
         }
-    }, [isOpen, siteId, handleModalOpen, feature]);
+    }, [isOpen, handleModalOpen]);
     let body;
     if (loadingState) {
         body = _jsx(FirstLoadScreen, { state: loadingState });
     }
     else if (featureFetchError || firstLogoPromptFetchError) {
-        body = (_jsx(FeatureFetchFailureScreen, { onCancel: closeModal, onRetry: () => {
-                closeModal();
-                onReload?.();
-            } }));
+        body = (_jsx(FeatureFetchFailureScreen, { onCancel: closeModal, onRetry: onReload ? handleReload : null }));
     }
     else if (needsFeature || needsMoreRequests) {
         body = (_jsx(UpgradeScreen, { onCancel: closeModal, upgradeURL: upgradeURL, reason: needsFeature ? 'feature' : 'requests' }));

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

@@ -1,6 +1,15 @@
+import { Dispatch, SetStateAction } from 'react';
 import './prompt.scss';
 type PromptProps = {
     initialPrompt?: string;
 };
+export declare const AiModalPromptInput: ({ prompt, setPrompt, disabled, generateHandler, placeholder, buttonLabel, }: {
+    prompt: string;
+    setPrompt: Dispatch<SetStateAction<string>>;
+    disabled: boolean;
+    generateHandler: () => void;
+    placeholder?: string;
+    buttonLabel?: string;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Prompt: ({ initialPrompt }: PromptProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -21,6 +21,36 @@ 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, generateHandler = () => { }, placeholder = '', buttonLabel = '', }) => {
+    const inputRef = useRef(null);
+    const hasPrompt = prompt?.length >= MINIMUM_PROMPT_LENGTH;
+    const onPromptInput = (event) => {
+        setPrompt(event.target.textContent || '');
+    };
+    const onPromptPaste = (event) => {
+        event.preventDefault();
+        const selection = event.currentTarget.ownerDocument.getSelection();
+        if (!selection || !selection.rangeCount) {
+            return;
+        }
+        // Paste plain text only
+        const text = event.clipboardData.getData('text/plain');
+        selection.deleteFromDocument();
+        const range = selection.getRangeAt(0);
+        range.insertNode(document.createTextNode(text));
+        selection.collapseToEnd();
+        setPrompt(inputRef.current?.textContent || '');
+    };
+    const onKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            generateHandler();
+        }
+    };
+    return (_jsxs("div", { className: "jetpack-ai-logo-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, "data-placeholder": placeholder }), _jsx(Button, { variant: "primary", className: "jetpack-ai-logo-generator__prompt-submit", onClick: generateHandler, disabled: disabled || !hasPrompt, children: buttonLabel || __('Generate', 'jetpack-ai-client') })] }));
+};
 export const Prompt = ({ initialPrompt = '' }) => {
     const { tracks } = useAnalytics();
     const { recordEvent: recordTracksEvent } = tracks;
@@ -70,7 +100,7 @@ export const Prompt = ({ initialPrompt = '' }) => {
         }
     }, [prompt]);
     useEffect(() => {
-        if (imageStyles.length > 0) {
+        if (imageStyles && imageStyles.length > 0) {
             // Sort styles to have "None" and "Auto" first
             setStyles([
                 imageStyles.find(({ value }) => value === IMAGE_STYLE_NONE),
@@ -103,23 +133,6 @@ export const Prompt = ({ initialPrompt = '' }) => {
             generateLogo({ prompt, style });
         }
     }, [context, generateLogo, prompt, style]);
-    const onPromptInput = (event) => {
-        setPrompt(event.target.textContent || '');
-    };
-    const onPromptPaste = (event) => {
-        event.preventDefault();
-        const selection = event.currentTarget.ownerDocument.getSelection();
-        if (!selection || !selection.rangeCount) {
-            return;
-        }
-        // Paste plain text only
-        const text = event.clipboardData.getData('text/plain');
-        selection.deleteFromDocument();
-        const range = selection.getRangeAt(0);
-        range.insertNode(document.createTextNode(text));
-        selection.collapseToEnd();
-        setPrompt(inputRef.current?.textContent || '');
-    };
     const onUpgradeClick = () => {
         recordTracksEvent(EVENT_UPGRADE, { context, placement: EVENT_PLACEMENT_INPUT_FOOTER });
     };
@@ -128,15 +141,7 @@ export const Prompt = ({ initialPrompt = '' }) => {
         setStyle(imageStyle);
         recordTracksEvent(EVENT_SWITCH_STYLE, { context, style: imageStyle });
     }, [context, setStyle, recordTracksEvent]);
-    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, 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(
+    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 }))] }), _jsx(AiModalPromptInput, { prompt: prompt, setPrompt: setPrompt, generateHandler: onGenerate, disabled: isBusy || requireUpgrade, 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: %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/ai-client/src/logo-generator/hooks/use-logo-generator.js

@@ -45,7 +45,7 @@ const useLogoGenerator = () => {
     const aiAssistantFeatureData = getAiAssistantFeature(siteId);
     const logoGenerationCost = aiAssistantFeatureData?.costs?.['jetpack-ai-logo-generator']?.logo;
     const logoGeneratorControl = aiAssistantFeatureData?.featuresControl?.['logo-generator'];
-    const imageStyles = logoGeneratorControl?.styles;
+    const imageStyles = logoGeneratorControl?.styles || [];
     const generateFirstPrompt = useCallback(async function () {
         setFirstLogoPromptFetchError(null);
         increaseAiAssistantRequestsCount();

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

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

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

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

package/build/ai-client/src/logo-generator/store/actions.js

@@ -56,6 +56,9 @@ const actions = {
                     path: '/wpcom/v2/jetpack-ai/ai-assistant-feature',
                     query: 'force=wpcom',
                 });
+                if (response.data) {
+                    throw new Error('Failed to fetch');
+                }
                 // Store the feature in the store.
                 dispatch(actions.storeAiAssistantFeature(mapAiFeatureResponseToAiFeatureProps(response)));
             }

package/build/ai-client/src/logo-generator/store/reducer.d.ts

@@ -214,6 +214,38 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
     history: import("./types.js").Logo[];
     selectedLogoIndex: number;
 } | {
+    features: {
+        aiAssistantFeature: {
+            _meta: {
+                isRequesting: boolean;
+                asyncRequestCountdown: number;
+                asyncRequestTimerId: number;
+                isRequestingImage: boolean;
+            };
+            hasFeature: boolean;
+            isOverLimit: boolean;
+            requestsCount: number;
+            requestsLimit: number;
+            requireUpgrade: boolean;
+            errorMessage?: string;
+            errorCode?: string;
+            upgradeType: import("./types.js").UpgradeTypeProp;
+            currentTier?: import("./types.js").TierProp;
+            usagePeriod?: {
+                currentStart: string;
+                nextStart: string;
+                requestsCount: number;
+            };
+            nextTier?: import("./types.js").TierProp;
+            tierPlansEnabled?: boolean;
+            costs?: {
+                'jetpack-ai-logo-generator': {
+                    logo: number;
+                };
+            };
+            featuresControl?: import("./types.js").FeaturesControl;
+        };
+    };
     _meta: {
         featureFetchError: RequestError;
         isSavingLogoToLibrary?: boolean;
@@ -229,9 +261,6 @@ export default function reducer(state: LogoGeneratorStateProp, action: {
         isLoadingHistory?: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
-    features: {
-        aiAssistantFeature?: AiFeatureStateProps;
-    };
     history: import("./types.js").Logo[];
     selectedLogoIndex: number;
 } | {

package/build/ai-client/src/logo-generator/store/reducer.js

@@ -236,6 +236,16 @@ export default function reducer(state = INITIAL_STATE, action) {
         case ACTION_SET_FEATURE_FETCH_ERROR:
             return {
                 ...state,
+                features: {
+                    ...state.features,
+                    aiAssistantFeature: {
+                        ...state?.features?.aiAssistantFeature,
+                        _meta: {
+                            ...state?.features?.aiAssistantFeature?._meta,
+                            isRequesting: false,
+                        },
+                    },
+                },
                 _meta: {
                     ...(state._meta ?? {}),
                     featureFetchError: action.error,

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

@@ -172,6 +172,7 @@ export type AiAssistantFeatureEndpointResponseProps = {
         };
     };
     'features-control'?: FeaturesControl;
+    data?: string;
 };
 export type SaveLogo = (logo: Logo) => Promise<{
     mediaId: number;

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

@@ -14,7 +14,7 @@ export interface GeneratorModalProps {
     isOpen: boolean;
     onClose: () => void;
     onApplyLogo: (mediaId: number) => void;
-    onReload: () => void;
+    onReload?: () => void;
     context: string;
     placement: string;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.22.0",
+	"version": "0.24.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": {

package/src/index.ts

@@ -16,6 +16,7 @@ export { default as useAudioTranscription } from './hooks/use-audio-transcriptio
 export { default as useTranscriptionPostProcessing } from './hooks/use-transcription-post-processing/index.js';
 export { default as useAudioValidation } from './hooks/use-audio-validation/index.js';
 export { default as useImageGenerator } from './hooks/use-image-generator/index.js';
+export * from './hooks/use-image-generator/constants.js';
 
 /*
  * Components: Icons

package/src/logo-generator/components/feature-fetch-failure-screen.tsx

@@ -10,25 +10,34 @@ import type React from 'react';
 
 export const FeatureFetchFailureScreen: React.FC< {
 	onCancel: () => void;
-	onRetry: () => void;
+	onRetry?: () => void;
 } > = ( { onCancel, onRetry } ) => {
 	const errorMessage = __(
 		'We are sorry. There was an error loading your Jetpack AI plan data. Please, try again.',
 		'jetpack-ai-client'
 	);
 
+	const errorMessageWithoutRetry = __(
+		'We are sorry. There was an error loading your Jetpack AI plan data. Please, reload the page and try again.',
+		'jetpack-ai-client'
+	);
+
 	return (
 		<div className="jetpack-ai-logo-generator-modal__notice-message-wrapper">
 			<div className="jetpack-ai-logo-generator-modal__notice-message">
-				<span className="jetpack-ai-logo-generator-modal__loading-message">{ errorMessage }</span>
+				<span className="jetpack-ai-logo-generator-modal__loading-message">
+					{ onRetry ? errorMessage : errorMessageWithoutRetry }
+				</span>
 			</div>
 			<div className="jetpack-ai-logo-generator-modal__notice-actions">
 				<Button variant="tertiary" onClick={ onCancel }>
 					{ __( 'Cancel', 'jetpack-ai-client' ) }
 				</Button>
-				<Button variant="primary" onClick={ onRetry }>
-					{ __( 'Try again', 'jetpack-ai-client' ) }
-				</Button>
+				{ onRetry && (
+					<Button variant="primary" onClick={ onRetry }>
+						{ __( 'Try again', 'jetpack-ai-client' ) }
+					</Button>
+				) }
 			</div>
 		</div>
 	);

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

@@ -45,7 +45,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 	isOpen,
 	onClose,
 	onApplyLogo,
-	onReload,
+	onReload = null,
 	siteDetails,
 	context,
 	placement,
@@ -73,7 +73,8 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 		site,
 		requireUpgrade,
 	} = useLogoGenerator();
-	const { featureFetchError, firstLogoPromptFetchError, clearErrors } = useRequestErrors();
+	const { featureFetchError, setFeatureFetchError, firstLogoPromptFetchError, clearErrors } =
+		useRequestErrors();
 	const siteId = siteDetails?.ID;
 	const [ logoAccepted, setLogoAccepted ] = useState( false );
 	const { nextTierCheckoutURL: upgradeURL } = useCheckout();
@@ -105,6 +106,15 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 	 */
 	const initializeModal = useCallback( async () => {
 		try {
+			if ( ! siteId ) {
+				throw new Error( 'Site ID is missing' );
+			}
+
+			if ( ! feature?.featuresControl?.[ 'logo-generator' ]?.enabled ) {
+				setFeatureFetchError( 'Failed to fetch feature data' );
+				throw new Error( 'Failed to fetch feature data' );
+			}
+
 			const hasHistory = ! isLogoHistoryEmpty( String( siteId ) );
 
 			const logoCost = feature?.costs?.[ 'jetpack-ai-logo-generator' ]?.logo ?? DEFAULT_LOGO_COST;
@@ -125,10 +135,10 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 					: currentLimit < currentUsage );
 
 			// If the site requires an upgrade, show the upgrade screen immediately.
-			setNeedsFeature( currentLimit === 0 );
+			setNeedsFeature( currentValue === 0 );
 			setNeedsMoreRequests( siteNeedsMoreRequests );
 
-			if ( currentLimit === 0 || siteNeedsMoreRequests ) {
+			if ( currentValue === 0 || siteNeedsMoreRequests ) {
 				setLoadingState( null );
 				return;
 			}
@@ -179,6 +189,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 		isLogoHistoryEmpty,
 		siteId,
 		requireUpgrade,
+		setFeatureFetchError,
 	] );
 
 	const handleModalOpen = useCallback( async () => {
@@ -201,6 +212,15 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 		recordTracksEvent( EVENT_MODAL_CLOSE, { context, placement } );
 	};
 
+	const handleReload = useCallback( () => {
+		if ( ! onReload ) {
+			return;
+		}
+		closeModal();
+		requestedFeatureData.current = false;
+		onReload();
+	}, [ onReload, closeModal ] );
+
 	const handleApplyLogo = ( mediaId: number ) => {
 		setLogoAccepted( true );
 		onApplyLogo?.( mediaId );
@@ -229,7 +249,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 	// Handles modal opening logic
 	useEffect( () => {
 		// While the modal is not open, the siteId is not set, or the feature data is not available, do nothing.
-		if ( ! isOpen || ! siteId || ! feature?.costs ) {
+		if ( ! isOpen ) {
 			return;
 		}
 
@@ -238,7 +258,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 			needsToHandleModalOpen.current = false;
 			handleModalOpen();
 		}
-	}, [ isOpen, siteId, handleModalOpen, feature ] );
+	}, [ isOpen, handleModalOpen ] );
 
 	let body: React.ReactNode;
 
@@ -248,10 +268,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 		body = (
 			<FeatureFetchFailureScreen
 				onCancel={ closeModal }
-				onRetry={ () => {
-					closeModal();
-					onReload?.();
-				} }
+				onRetry={ onReload ? handleReload : null }
 			/>
 		);
 	} else if ( needsFeature || needsMoreRequests ) {

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

@@ -69,7 +69,7 @@
 			color: var(--studio-gray-50, #646970);
 		}
 
-		&[data-placeholder]:empty:focus::before {
+		&[data-placeholder]:empty:focus::before:not([contentEditable="false"]) {
 			content: "";
 		}
 	}

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

@@ -7,6 +7,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { Icon, info } from '@wordpress/icons';
 import debugFactory from 'debug';
 import { useCallback, useEffect, useState, useRef } from 'react';
+import { Dispatch, SetStateAction } from 'react';
 /**
  * Internal dependencies
  */
@@ -37,6 +38,81 @@ type PromptProps = {
 	initialPrompt?: string;
 };
 
+export const AiModalPromptInput = ( {
+	prompt = '',
+	setPrompt = () => {},
+	disabled = false,
+	generateHandler = () => {},
+	placeholder = '',
+	buttonLabel = '',
+}: {
+	prompt: string;
+	setPrompt: Dispatch< SetStateAction< string > >;
+	disabled: boolean;
+	generateHandler: () => void;
+	placeholder?: string;
+	buttonLabel?: string;
+} ) => {
+	const inputRef = useRef< HTMLDivElement | null >( null );
+	const hasPrompt = prompt?.length >= MINIMUM_PROMPT_LENGTH;
+
+	const onPromptInput = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		setPrompt( event.target.textContent || '' );
+	};
+
+	const onPromptPaste = ( event: React.ClipboardEvent< HTMLInputElement > ) => {
+		event.preventDefault();
+
+		const selection = event.currentTarget.ownerDocument.getSelection();
+		if ( ! selection || ! selection.rangeCount ) {
+			return;
+		}
+
+		// Paste plain text only
+		const text = event.clipboardData.getData( 'text/plain' );
+
+		selection.deleteFromDocument();
+		const range = selection.getRangeAt( 0 );
+		range.insertNode( document.createTextNode( text ) );
+		selection.collapseToEnd();
+
+		setPrompt( inputRef.current?.textContent || '' );
+	};
+
+	const onKeyDown = ( event: React.KeyboardEvent ) => {
+		if ( event.key === 'Enter' ) {
+			event.preventDefault();
+			generateHandler();
+		}
+	};
+
+	return (
+		<div className="jetpack-ai-logo-generator__prompt-query">
+			<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
+				className="prompt-query__input"
+				onInput={ onPromptInput }
+				onPaste={ onPromptPaste }
+				onKeyDown={ onKeyDown }
+				data-placeholder={ placeholder }
+			></div>
+			<Button
+				variant="primary"
+				className="jetpack-ai-logo-generator__prompt-submit"
+				onClick={ generateHandler }
+				disabled={ disabled || ! hasPrompt }
+			>
+				{ buttonLabel || __( 'Generate', 'jetpack-ai-client' ) }
+			</Button>
+		</div>
+	);
+};
+
 export const Prompt = ( { initialPrompt = '' }: PromptProps ) => {
 	const { tracks } = useAnalytics();
 	const { recordEvent: recordTracksEvent } = tracks;
@@ -107,7 +183,7 @@ export const Prompt = ( { initialPrompt = '' }: PromptProps ) => {
 	}, [ prompt ] );
 
 	useEffect( () => {
-		if ( imageStyles.length > 0 ) {
+		if ( imageStyles && imageStyles.length > 0 ) {
 			// Sort styles to have "None" and "Auto" first
 			setStyles(
 				[
@@ -143,29 +219,6 @@ export const Prompt = ( { initialPrompt = '' }: PromptProps ) => {
 		}
 	}, [ context, generateLogo, prompt, style ] );
 
-	const onPromptInput = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-		setPrompt( event.target.textContent || '' );
-	};
-
-	const onPromptPaste = ( event: React.ClipboardEvent< HTMLInputElement > ) => {
-		event.preventDefault();
-
-		const selection = event.currentTarget.ownerDocument.getSelection();
-		if ( ! selection || ! selection.rangeCount ) {
-			return;
-		}
-
-		// Paste plain text only
-		const text = event.clipboardData.getData( 'text/plain' );
-
-		selection.deleteFromDocument();
-		const range = selection.getRangeAt( 0 );
-		range.insertNode( document.createTextNode( text ) );
-		selection.collapseToEnd();
-
-		setPrompt( inputRef.current?.textContent || '' );
-	};
-
 	const onUpgradeClick = () => {
 		recordTracksEvent( EVENT_UPGRADE, { context, placement: EVENT_PLACEMENT_INPUT_FOOTER } );
 	};
@@ -179,13 +232,6 @@ 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">
@@ -212,32 +258,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'
-					) }
-				></div>
-				<Button
-					variant="primary"
-					className="jetpack-ai-logo-generator__prompt-submit"
-					onClick={ onGenerate }
-					disabled={ isBusy || requireUpgrade || ! hasPrompt }
-				>
-					{ __( 'Generate', 'jetpack-ai-client' ) }
-				</Button>
-			</div>
+			<AiModalPromptInput
+				prompt={ prompt }
+				setPrompt={ setPrompt }
+				generateHandler={ onGenerate }
+				disabled={ isBusy || requireUpgrade }
+				placeholder={ __(
+					'Describe your site or simply ask for a logo specifying some details about it',
+					'jetpack-ai-client'
+				) }
+			/>
 			<div className="jetpack-ai-logo-generator__prompt-footer">
 				{ ! isUnlimited && ! requireUpgrade && (
 					<div className="jetpack-ai-logo-generator__prompt-requests">

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

@@ -92,7 +92,7 @@ const useLogoGenerator = () => {
 	const logoGeneratorControl = aiAssistantFeatureData?.featuresControl?.[
 		'logo-generator'
 	] as LogoGeneratorFeatureControl;
-	const imageStyles: Array< ImageStyleObject > = logoGeneratorControl?.styles;
+	const imageStyles: Array< ImageStyleObject > = logoGeneratorControl?.styles || [];
 
 	const generateFirstPrompt = useCallback(
 		async function (): Promise< string > {

package/src/logo-generator/index.ts

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

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

@@ -93,6 +93,10 @@ const actions = {
 					query: 'force=wpcom',
 				} );
 
+				if ( response.data ) {
+					throw new Error( 'Failed to fetch' );
+				}
+
 				// Store the feature in the store.
 				dispatch(
 					actions.storeAiAssistantFeature( mapAiFeatureResponseToAiFeatureProps( response ) )

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

@@ -325,6 +325,16 @@ export default function reducer(
 		case ACTION_SET_FEATURE_FETCH_ERROR:
 			return {
 				...state,
+				features: {
+					...state.features,
+					aiAssistantFeature: {
+						...state?.features?.aiAssistantFeature,
+						_meta: {
+							...state?.features?.aiAssistantFeature?._meta,
+							isRequesting: false,
+						},
+					},
+				},
 				_meta: {
 					...( state._meta ?? {} ),
 					featureFetchError: action.error,

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

@@ -220,6 +220,7 @@ export type AiAssistantFeatureEndpointResponseProps = {
 		};
 	};
 	'features-control'?: FeaturesControl;
+	data?: string; // when WP responds with a 200 status code but it's the error wrap
 };
 
 export type SaveLogo = ( logo: Logo ) => Promise< { mediaId: number; mediaURL: string } >;

package/src/logo-generator/types.ts

@@ -16,7 +16,7 @@ export interface GeneratorModalProps {
 	isOpen: boolean;
 	onClose: () => void;
 	onApplyLogo: ( mediaId: number ) => void;
-	onReload: () => void;
+	onReload?: () => void;
 	context: string;
 	placement: string;
 }