@automattic/jetpack-ai-client 0.14.6 → 0.15.0

package/CHANGELOG.md

@@ -5,6 +5,13 @@ 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.15.0] - 2024-07-22
+### Added
+- Jetpack AI: Add logo generator codebase to the ai-client package. [#38391]
+
+### Changed
+- Update and export askQuestionSync. [#38344]
+
 ## [0.14.6] - 2024-07-15
 ### Added
 - AI Client: Filter suggestions starting with llama artifacts [#38208]
@@ -351,6 +358,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.15.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.14.6...v0.15.0
 [0.14.6]: https://github.com/Automattic/jetpack-ai-client/compare/v0.14.5...v0.14.6
 [0.14.5]: https://github.com/Automattic/jetpack-ai-client/compare/v0.14.4...v0.14.5
 [0.14.4]: https://github.com/Automattic/jetpack-ai-client/compare/v0.14.3...v0.14.4

package/build/ask-question/sync.d.ts

@@ -3,13 +3,7 @@ import type { PromptProp } from '../types.js';
 /**
  * The response data from the AI assistant when doing a sync, not-streamed question.
  */
-export type ResponseData = {
-    choices: Array<{
-        message: {
-            content: string;
-        };
-    }>;
-};
+export type ResponseData = string;
 /**
  * A function that asks a question without streaming.
  *
@@ -27,4 +21,4 @@ export type ResponseData = {
  *    const content = responseData.choices[ 0 ].message.content;
  * } );
  */
-export default function askQuestionSync(question: PromptProp, { postId, feature, model }?: AskQuestionOptionsArgProps): Promise<ResponseData>;
+export default function askQuestionSync(question: PromptProp, options?: AskQuestionOptionsArgProps): Promise<ResponseData>;

package/build/ask-question/sync.js

@@ -24,12 +24,8 @@ const debug = debugFactory('jetpack-ai-client:ask-question-sync');
  *    const content = responseData.choices[ 0 ].message.content;
  * } );
  */
-export default async function askQuestionSync(question, { postId = null, feature, model } = {}) {
-    debug('Asking question with no streaming: %o. options: %o', question, {
-        postId,
-        feature,
-        model,
-    });
+export default async function askQuestionSync(question, options = {}) {
+    debug('Asking question with no streaming: %o. options: %o', question, options);
     /**
      * The URL to the AI assistant query endpoint.
      */
@@ -42,25 +38,30 @@ export default async function askQuestionSync(question, { postId = null, feature
         debug('Error getting token: %o', error);
         return Promise.reject(error);
     }
+    const messages = Array.isArray(question) ? { messages: question } : { question: question };
     const body = {
-        question: question,
+        ...messages,
+        ...options,
         stream: false,
-        postId,
-        feature,
-        model,
     };
     const headers = {
         Authorization: `Bearer ${token}`,
         'Content-Type': 'application/json',
     };
-    const data = await fetch(URL, {
-        method: 'POST',
-        headers,
-        body: JSON.stringify(body),
-    }).then(response => response.json());
-    if (data?.data?.status && data?.data?.status > 200) {
-        debug('Error generating prompt: %o', data);
-        return Promise.reject(data);
+    try {
+        const data = await fetch(URL, {
+            method: 'POST',
+            headers,
+            body: JSON.stringify(body),
+        }).then(response => response.json());
+        if (data?.data?.status && data?.data?.status > 200) {
+            debug('Error generating prompt: %o', data);
+            return Promise.reject(data);
+        }
+        return data.choices?.[0]?.message?.content;
+    }
+    catch (error) {
+        debug('Error asking question: %o', error);
+        return Promise.reject(error);
     }
-    return data;
 }

package/build/hooks/use-image-generator/index.js

@@ -126,7 +126,7 @@ const getStableDiffusionImageGenerationPrompt = async (postContent, userPrompt,
      * Request the prompt on the AI Assistant endpoint
      */
     const data = await askQuestionSync(prompt, { feature });
-    return data.choices?.[0]?.message?.content;
+    return data;
 };
 const useImageGenerator = () => {
     const executeImageGeneration = async function (parameters) {

package/build/hooks/use-save-to-media-library/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Hook to save an image to the media library.
+ *
+ * @returns {object} Object with the loading state and the function to save the image to the media library.
+ */
+export default function useSaveToMediaLibrary(): {
+    isLoading: boolean;
+    saveToMediaLibrary: (url: string, name?: string) => Promise<{
+        id: string;
+        url: string;
+    }>;
+};

package/build/hooks/use-save-to-media-library/index.js

@@ -0,0 +1,74 @@
+/**
+ * External dependencies
+ */
+import { isBlobURL } from '@wordpress/blob';
+import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import debugFactory from 'debug';
+const debug = debugFactory('ai-client:save-to-media-library');
+/**
+ * Hook to save an image to the media library.
+ *
+ * @returns {object} Object with the loading state and the function to save the image to the media library.
+ */
+export default function useSaveToMediaLibrary() {
+    const [isLoading, setIsLoading] = useState(false);
+    const { getSettings } = useSelect(select => select('core/block-editor'), []);
+    const saveToMediaLibrary = (url, name) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const settings = getSettings();
+        return new Promise((resolve, reject) => {
+            setIsLoading(true);
+            debug('Fetching image from URL');
+            fetch(url)
+                .then(response => {
+                debug('Transforming response to blob');
+                response
+                    .blob()
+                    .then((blob) => {
+                    debug('Uploading blob to media library');
+                    const filesList = Array();
+                    if (name) {
+                        filesList.push(new File([blob], name));
+                    }
+                    else {
+                        filesList.push(blob);
+                    }
+                    settings.mediaUpload({
+                        allowedTypes: ['image'],
+                        filesList,
+                        onFileChange([image]) {
+                            if (isBlobURL(image?.url)) {
+                                return;
+                            }
+                            if (image) {
+                                debug('Image uploaded to media library', image);
+                                resolve(image);
+                            }
+                            setIsLoading(false);
+                        },
+                        onError(message) {
+                            debug('Error uploading image to media library:', message);
+                            reject(message);
+                            setIsLoading(false);
+                        },
+                    });
+                })
+                    .catch(e => {
+                    debug('Error transforming response to blob:', e?.message);
+                    reject(e?.message);
+                    setIsLoading(false);
+                });
+            })
+                .catch(e => {
+                debug('Error fetching image from URL:', e?.message);
+                reject(e?.message);
+                setIsLoading(false);
+            });
+        });
+    };
+    return {
+        isLoading,
+        saveToMediaLibrary,
+    };
+}

package/build/index.d.ts

@@ -1,6 +1,7 @@
 export { default as requestJwt } from './jwt/index.js';
 export { default as SuggestionsEventSource } from './suggestions-event-source/index.js';
 export { default as askQuestion } from './ask-question/index.js';
+export { default as askQuestionSync } from './ask-question/sync.js';
 export { default as transcribeAudio } from './audio-transcription/index.js';
 export { default as useAiSuggestions, getErrorData } from './hooks/use-ai-suggestions/index.js';
 export { default as useMediaRecording } from './hooks/use-media-recording/index.js';
@@ -13,3 +14,4 @@ export * from './components/index.js';
 export * from './data-flow/index.js';
 export * from './types.js';
 export * from './libs/index.js';
+export * from './logo-generator/index.js';

package/build/index.js

@@ -4,6 +4,7 @@
 export { default as requestJwt } from './jwt/index.js';
 export { default as SuggestionsEventSource } from './suggestions-event-source/index.js';
 export { default as askQuestion } from './ask-question/index.js';
+export { default as askQuestionSync } from './ask-question/sync.js';
 export { default as transcribeAudio } from './audio-transcription/index.js';
 /*
  * Hooks
@@ -34,3 +35,7 @@ export * from './types.js';
  * Libs
  */
 export * from './libs/index.js';
+/*
+ * Logo Generator
+ */
+export * from './logo-generator/index.js';

package/build/libs/index.d.ts

@@ -1,2 +1,2 @@
-export { MarkdownToHTML, HTMLToMarkdown, renderHTMLFromMarkdown, renderMarkdownFromHTML, } from './markdown/index.js';
+export { MarkdownToHTML, HTMLToMarkdown, renderHTMLFromMarkdown, renderMarkdownFromHTML, fixes, } from './markdown/index.js';
 export type { RenderHTMLRules } from './markdown/index.js';

package/build/libs/index.js

@@ -1 +1 @@
-export { MarkdownToHTML, HTMLToMarkdown, renderHTMLFromMarkdown, renderMarkdownFromHTML, } from './markdown/index.js';
+export { MarkdownToHTML, HTMLToMarkdown, renderHTMLFromMarkdown, renderMarkdownFromHTML, fixes, } from './markdown/index.js';

package/build/libs/markdown/index.d.ts

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import HTMLToMarkdown from './html-to-markdown.js';
-import MarkdownToHTML from './markdown-to-html.js';
+import MarkdownToHTML, { fixes } from './markdown-to-html.js';
 /**
  * Types
  */
@@ -16,4 +16,4 @@ declare const renderHTMLFromMarkdown: ({ content, rules, extension, }: {
 declare const renderMarkdownFromHTML: ({ content }: {
     content: string;
 }) => string;
-export { MarkdownToHTML, HTMLToMarkdown, renderHTMLFromMarkdown, renderMarkdownFromHTML };
+export { MarkdownToHTML, HTMLToMarkdown, renderHTMLFromMarkdown, renderMarkdownFromHTML, fixes };

package/build/libs/markdown/index.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import HTMLToMarkdown from './html-to-markdown.js';
-import MarkdownToHTML from './markdown-to-html.js';
+import MarkdownToHTML, { fixes } from './markdown-to-html.js';
 const defaultMarkdownConverter = new MarkdownToHTML();
 const defaultHTMLConverter = new HTMLToMarkdown();
 const renderHTMLFromMarkdown = ({ content, rules, extension, }) => {
@@ -11,4 +11,4 @@ const renderHTMLFromMarkdown = ({ content, rules, extension, }) => {
 const renderMarkdownFromHTML = ({ content }) => {
     return defaultHTMLConverter.render({ content });
 };
-export { MarkdownToHTML, HTMLToMarkdown, renderHTMLFromMarkdown, renderMarkdownFromHTML };
+export { MarkdownToHTML, HTMLToMarkdown, renderHTMLFromMarkdown, renderMarkdownFromHTML, fixes };

package/build/libs/markdown/markdown-to-html.d.ts

@@ -6,7 +6,13 @@ import MarkdownIt from 'markdown-it';
  * Types
  */
 import type { Options } from 'markdown-it';
-export type Fix = 'list' | 'paragraph' | 'listItem';
+export type Fix = 'list' | 'paragraph' | 'listItem' | 'table';
+type Fixes = {
+    [key in Fix]: (content: string, extension?: boolean, options?: {
+        [key: string]: unknown;
+    }) => string;
+};
+export declare const fixes: Fixes;
 export default class MarkdownToHTML {
     markdownConverter: MarkdownIt;
     constructor(options?: Options);
@@ -24,3 +30,4 @@ export default class MarkdownToHTML {
         extension?: boolean;
     }): string;
 }
+export {};

package/build/libs/markdown/markdown-to-html.js

@@ -19,7 +19,7 @@ const addListComments = (content) => {
         .replaceAll('<ul>', '<!-- wp:list --><ul>')
         .replaceAll('</ul>', '</ul><!-- /wp:list -->'));
 };
-const fixes = {
+export const fixes = {
     list: (content, extension = false) => {
         // Fix list indentation
         const fixedIndentation = content
@@ -43,6 +43,15 @@ const fixes = {
         // Fix encoding of <br /> tags
         return content.replaceAll(/\s*&lt;br \/&gt;\s*/g, '<br />');
     },
+    table: (content, extension = false, { hasFixedLayout = false }) => {
+        if (!extension) {
+            return content;
+        }
+        if (content.startsWith('<!-- wp:table')) {
+            return content;
+        }
+        return `<!-- wp:table { "hasFixedLayout":${hasFixedLayout ? 'true' : 'false'} } -->${content}<!-- /wp:table -->`;
+    },
 };
 const defaultMarkdownItOptions = {
     breaks: true,

package/build/logo-generator/assets/icons/ai.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import './icons.scss';
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/build/logo-generator/assets/icons/ai.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Internal dependencies
+ */
+import './icons.scss';
+export default () => {
+    return (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "jetpack-ai-logo-generator-icon", children: [_jsx("path", { d: "M6.99976 3.99994L7.84828 6.15141L9.99976 6.99994L7.84828 7.84847L6.99976 9.99994L6.15123 7.84847L3.99976 6.99994L6.15123 6.15141L6.99976 3.99994Z" }), _jsx("path", { d: "M16 4L17.1314 6.86863L20 8L17.1314 9.13137L16 12L14.8686 9.13137L12 8L14.8686 6.86863L16 4Z" }), _jsx("path", { d: "M11 10L12.4142 13.5858L16 15L12.4142 16.4142L11 20L9.58579 16.4142L6 15L9.58579 13.5858L11 10Z" })] }));
+};

package/build/logo-generator/assets/icons/check.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import './icons.scss';
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/build/logo-generator/assets/icons/check.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Internal dependencies
+ */
+import './icons.scss';
+export default () => {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "jetpack-ai-logo-generator-icon", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.9291 7.96836L10.7308 17.6492L6.2145 14.2911L7.10952 13.0873L10.4221 15.5504L16.7253 7.07333L17.9291 7.96836Z" }) }));
+};

package/build/logo-generator/assets/icons/logo.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import './icons.scss';
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/build/logo-generator/assets/icons/logo.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Internal dependencies
+ */
+import './icons.scss';
+export default () => {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "jetpack-ai-logo-generator-icon", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.2927 13.7485C18.5014 17.0423 15.5366 19.4901 12 19.4901C8.92508 19.4901 6.28236 17.6396 5.12469 14.9915L8.79556 12.8139L12.2508 14.0309C12.482 14.1123 12.7383 14.0756 12.9374 13.9327L15.8243 11.8601L15.9039 11.8992C16.1998 12.0451 16.6072 12.249 17.0533 12.4807C17.8331 12.8857 18.6946 13.3572 19.2927 13.7485ZM19.499 12.1129C18.9341 11.7788 18.3001 11.4379 17.7447 11.1495C17.287 10.9118 16.8698 10.7031 16.5672 10.5539C16.4158 10.4792 16.2928 10.4193 16.2074 10.378L16.1085 10.3303L16.0824 10.3177L16.0729 10.3132C15.8261 10.1954 15.5347 10.2214 15.3126 10.3809L12.3802 12.4861L8.9634 11.2827C8.75395 11.2089 8.52258 11.2318 8.3316 11.3451L4.65716 13.5248C4.55414 13.0294 4.5 12.5161 4.5 11.9901C4.5 7.84798 7.85786 4.49011 12 4.49011C16.1421 4.49011 19.5 7.84798 19.5 11.9901C19.5 12.0311 19.4997 12.072 19.499 12.1129ZM21 11.9901C21 16.9607 16.9706 20.9901 12 20.9901C7.02944 20.9901 3 16.9607 3 11.9901C3 7.01955 7.02944 2.99011 12 2.99011C16.9706 2.99011 21 7.01955 21 11.9901Z" }) }));
+};

package/build/logo-generator/assets/icons/media.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import './icons.scss';
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/build/logo-generator/assets/icons/media.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Internal dependencies
+ */
+import './icons.scss';
+export default () => {
+    return (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "jetpack-ai-logo-generator-icon", children: [_jsx("path", { d: "M7 6.49011L11 8.99011L7 11.4901V6.49011Z" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5 2.99011C3.89543 2.99011 3 3.88554 3 4.99011V18.9901C3 20.0947 3.89543 20.9901 5 20.9901H19C20.1046 20.9901 21 20.0947 21 18.9901V4.99011C21 3.88554 20.1046 2.99011 19 2.99011H5ZM19 4.49011H5C4.72386 4.49011 4.5 4.71397 4.5 4.99011V15.6973L8.12953 13.0508C8.38061 12.8677 8.71858 12.8584 8.97934 13.0274L11.906 14.9243L15.4772 11.4524C15.7683 11.1694 16.2317 11.1694 16.5228 11.4524L19.5 14.3469V4.99011C19.5 4.71397 19.2761 4.49011 19 4.49011ZM4.5 18.9901V17.5537L8.59643 14.5667L11.5921 16.5084C11.8857 16.6987 12.2719 16.6607 12.5228 16.4167L16 13.0361L19.4772 16.4167L19.5 16.3933V18.9901C19.5 19.2663 19.2761 19.4901 19 19.4901H5C4.72386 19.4901 4.5 19.2663 4.5 18.9901Z" })] }));
+};

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

@@ -0,0 +1,8 @@
+/**
+ * Types
+ */
+import type React from 'react';
+export declare const FeatureFetchFailureScreen: React.FC<{
+    onCancel: () => void;
+    onRetry: () => void;
+}>;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+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 account settings. 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') })] })] }));
+};

package/build/logo-generator/components/first-load-screen.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './first-load-screen.scss';
+export declare const FirstLoadScreen: React.FC<{
+    state?: 'loadingFeature' | 'analyzing' | 'generating';
+}>;

package/build/logo-generator/components/first-load-screen.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+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] })] }));
+};

package/build/logo-generator/components/generator-modal.d.ts

@@ -0,0 +1,7 @@
+import './generator-modal.scss';
+/**
+ * Types
+ */
+import type { GeneratorModalProps } from '../types.js';
+import type React from 'react';
+export declare const GeneratorModal: React.FC<GeneratorModalProps>;

package/build/logo-generator/components/generator-modal.js

@@ -0,0 +1,184 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
+import { Modal, Button } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { external, Icon } from '@wordpress/icons';
+import clsx from 'clsx';
+import debugFactory from 'debug';
+import { useState, useEffect, useCallback, useRef } from 'react';
+/**
+ * Internal dependencies
+ */
+import { DEFAULT_LOGO_COST, EVENT_MODAL_OPEN, EVENT_FEEDBACK, EVENT_MODAL_CLOSE, EVENT_PLACEMENT_QUICK_LINKS, EVENT_GENERATE, } from '../constants.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, siteDetails, context, }) => {
+    const { tracks } = useAnalytics();
+    const { recordEvent: recordTracksEvent } = tracks;
+    const { setSiteDetails, fetchAiAssistantFeature, loadLogoHistory } = useDispatch(STORE_NAME);
+    const [loadingState, setLoadingState] = useState(null);
+    const [initialPrompt, setInitialPrompt] = useState();
+    const needsToHandleModalOpen = useRef(true);
+    const requestedFeatureData = useRef(false);
+    const [needsFeature, setNeedsFeature] = useState(false);
+    const [needsMoreRequests, setNeedsMoreRequests] = useState(false);
+    const [upgradeURL, setUpgradeURL] = useState('');
+    const { selectedLogo, getAiAssistantFeature, generateFirstPrompt, generateLogo, setContext } = useLogoGenerator();
+    const { featureFetchError, firstLogoPromptFetchError, clearErrors } = useRequestErrors();
+    const siteId = siteDetails?.ID;
+    const siteURL = siteDetails?.URL;
+    const [logoAccepted, setLogoAccepted] = useState(false);
+    // First fetch the feature data so we have the most up-to-date info from the backend.
+    const feature = getAiAssistantFeature();
+    const generateFirstLogo = useCallback(async () => {
+        try {
+            // First generate the prompt based on the site's data.
+            setLoadingState('analyzing');
+            recordTracksEvent(EVENT_GENERATE, { context, tool: 'first-prompt' });
+            const prompt = await generateFirstPrompt();
+            setInitialPrompt(prompt);
+            // Then generate the logo based on the prompt.
+            setLoadingState('generating');
+            await generateLogo({ prompt });
+            setLoadingState(null);
+        }
+        catch (error) {
+            debug('Error generating first logo', error);
+            setLoadingState(null);
+        }
+    }, [context, generateFirstPrompt, generateLogo]);
+    /*
+     * Called ONCE to check the feature data to make sure the site is allowed to do the generation.
+     * Also, checks site history and trigger a new generation in case there are no logos to present.
+     */
+    const initializeModal = useCallback(async () => {
+        try {
+            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 currentUsage = feature?.usagePeriod?.requestsCount || 0;
+            const isUnlimited = currentLimit === 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 &&
+                !hasNoNextTier &&
+                !hasHistory &&
+                currentLimit - currentUsage < logoCost + promptCreationCost;
+            // If the site requires an upgrade, set the upgrade URL and show the upgrade screen immediately.
+            setNeedsFeature(!feature?.hasFeature ?? true);
+            setNeedsMoreRequests(siteNeedsMoreRequests);
+            if (!feature?.hasFeature || siteNeedsMoreRequests) {
+                const siteUpgradeURL = new URL(`${location.origin}/checkout/${siteDetails?.domain}/${feature?.nextTier?.slug}`);
+                siteUpgradeURL.searchParams.set('redirect_to', location.href);
+                setUpgradeURL(siteUpgradeURL.toString());
+                setLoadingState(null);
+                return;
+            }
+            // Load the logo history and clear any deleted media.
+            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))) {
+                setLoadingState(null);
+                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();
+        }
+        catch (error) {
+            debug('Error fetching feature', error);
+            setLoadingState(null);
+        }
+    }, [
+        feature,
+        generateFirstLogo,
+        loadLogoHistory,
+        clearDeletedMedia,
+        isLogoHistoryEmpty,
+        siteId,
+    ]);
+    const handleModalOpen = useCallback(async () => {
+        setContext(context);
+        recordTracksEvent(EVENT_MODAL_OPEN, { context, placement: EVENT_PLACEMENT_QUICK_LINKS });
+        initializeModal();
+    }, [setContext, context, initializeModal]);
+    const closeModal = () => {
+        // Reset the state when the modal is closed, so we trigger the modal initialization again when it's opened.
+        needsToHandleModalOpen.current = true;
+        onClose();
+        setLoadingState(null);
+        setNeedsFeature(false);
+        setNeedsMoreRequests(false);
+        clearErrors();
+        setLogoAccepted(false);
+        recordTracksEvent(EVENT_MODAL_CLOSE, { context, placement: EVENT_PLACEMENT_QUICK_LINKS });
+    };
+    const handleApplyLogo = () => {
+        setLogoAccepted(true);
+    };
+    const handleCloseAndReload = () => {
+        closeModal();
+        setTimeout(() => {
+            // Reload the page to update the logo.
+            window.location.reload();
+        }, 1000);
+    };
+    const handleFeedbackClick = () => {
+        recordTracksEvent(EVENT_FEEDBACK, { context });
+    };
+    // Set site details when siteId changes
+    useEffect(() => {
+        if (siteId) {
+            setSiteDetails(siteDetails);
+        }
+        // When the site details are set, we need to fetch the feature data.
+        if (!requestedFeatureData.current) {
+            requestedFeatureData.current = true;
+            fetchAiAssistantFeature();
+        }
+    }, [siteId, siteDetails, setSiteDetails]);
+    // 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) {
+            return;
+        }
+        // Prevent multiple calls of the handleModalOpen function
+        if (needsToHandleModalOpen.current) {
+            needsToHandleModalOpen.current = false;
+            handleModalOpen();
+        }
+    }, [isOpen, siteId, handleModalOpen, feature]);
+    let body;
+    if (loadingState) {
+        body = _jsx(FirstLoadScreen, { state: loadingState });
+    }
+    else if (featureFetchError || firstLogoPromptFetchError) {
+        body = _jsx(FeatureFetchFailureScreen, { onCancel: closeModal, onRetry: initializeModal });
+    }
+    else if (needsFeature || needsMoreRequests) {
+        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, { siteURL: siteURL, onVisitBlankTarget: handleCloseAndReload }), _jsxs("div", { className: "jetpack-ai-logo-generator__accept-actions", children: [_jsx(Button, { variant: "link", onClick: handleCloseAndReload, children: __('Close and refresh', 'jetpack-ai-client') }), _jsx(Button, { href: siteURL, variant: "primary", children: __('Visit site', '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: logoAccepted ? handleCloseAndReload : 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,
+                }), children: body }) })) }));
+};

package/build/logo-generator/components/history-carousel.d.ts

@@ -0,0 +1,6 @@
+import './history-carousel.scss';
+/**
+ * Types
+ */
+import type React from 'react';
+export declare const HistoryCarousel: React.FC;