@automattic/jetpack-ai-client 0.25.6 → 0.26.0

package/CHANGELOG.md

@@ -5,6 +5,17 @@ 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.26.0] - 2025-02-10
+### Added
+- Add shared components from ai-assistant-plugin [#41078]
+
+### Changed
+- Updated package dependencies. [#41491] [#41577]
+
+## [0.25.7] - 2025-01-27
+### Changed
+- Internal updates.
+
 ## [0.25.6] - 2025-01-20
 ### Changed
 - Updated package dependencies. [#41099]
@@ -506,6 +517,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - AI Client: stop using smart document visibility handling on the fetchEventSource library, so it does not restart the completion when changing tabs. [#32004]
 - Updated package dependencies. [#31468] [#31659] [#31785]
 
+[0.26.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.25.7...v0.26.0
+[0.25.7]: https://github.com/Automattic/jetpack-ai-client/compare/v0.25.6...v0.25.7
 [0.25.6]: https://github.com/Automattic/jetpack-ai-client/compare/v0.25.5...v0.25.6
 [0.25.5]: https://github.com/Automattic/jetpack-ai-client/compare/v0.25.4...v0.25.5
 [0.25.4]: https://github.com/Automattic/jetpack-ai-client/compare/v0.25.3...v0.25.4

package/build/components/ai-icon/index.d.ts

@@ -0,0 +1,10 @@
+export declare const AiSVG: import("react/jsx-runtime").JSX.Element;
+/**
+ * AiIcon component
+ * @param {string} className - The wrapper class name.
+ * @return {React.ReactElement} The `AiIcon` component.
+ */
+export default function AiIcon({ className, size }: {
+    className?: string;
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/build/components/ai-icon/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { G, Path, SVG, Rect } from '@wordpress/components';
+import { Icon } from '@wordpress/icons';
+import { Defs } from '@wordpress/primitives';
+export const AiSVG = (_jsxs(SVG, { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsxs(G, { clipPath: "url(#clip0_4479_1006)", children: [_jsx(Path, { d: "M7.87488 0L10.1022 5.64753L15.7498 7.87488L10.1022 10.1022L7.87488 15.7498L5.64753 10.1022L0 7.87488L5.64753 5.64753L7.87488 0Z", fill: "#A7AAAD" }), _jsx(Path, { d: "M31.4998 0L34.4696 7.53004L41.9997 10.4998L34.4696 13.4696L31.4998 20.9997L28.53 13.4696L21 10.4998L28.53 7.53004L31.4998 0Z", fill: "#A7AAAD" }), _jsx(Path, { d: "M18.3748 15.7496L22.0871 25.1621L31.4996 28.8744L22.0871 32.5866L18.3748 41.9992L14.6625 32.5866L5.25 28.8744L14.6625 25.1621L18.3748 15.7496Z", fill: "#A7AAAD" })] }), _jsx(Defs, { children: _jsx("clipPath", { id: "clip0_4479_1006", children: _jsx(Rect, { width: "41.9997", height: "41.9992", fill: "white" }) }) })] }));
+/**
+ * AiIcon component
+ * @param {string} className - The wrapper class name.
+ * @return {React.ReactElement} The `AiIcon` component.
+ */
+export default function AiIcon({ className, size = 42 }) {
+    return _jsx(Icon, { icon: AiSVG, width: size, height: size, className: className });
+}

package/build/components/ai-image/components/ai-image-modal.d.ts

@@ -0,0 +1,57 @@
+/// <reference types="react" resolution-mode="require"/>
+/**
+ * Internal dependencies
+ */
+import { ImageStyleObject, ImageStyle } from '../../../hooks/use-image-generator/constants.js';
+import { CarrouselImages } from './carrousel.js';
+import './ai-image-modal.scss';
+type AiImageModalProps = {
+    title: string;
+    cost: number;
+    open: boolean;
+    placement: string;
+    images: CarrouselImages;
+    currentIndex: number;
+    onClose: () => void;
+    onTryAgain: ({ userPrompt, style }: {
+        userPrompt?: string;
+        style?: string;
+    }) => void;
+    onGenerate: ({ userPrompt, style }: {
+        userPrompt?: string;
+        style?: string;
+    }) => void;
+    generating: boolean;
+    notEnoughRequests: boolean;
+    requireUpgrade: boolean;
+    currentLimit: number;
+    currentUsage: number;
+    isUnlimited: boolean;
+    upgradeDescription: string;
+    hasError: boolean;
+    postContent?: string | boolean | null;
+    handlePreviousImage: () => void;
+    handleNextImage: () => void;
+    acceptButton: React.JSX.Element;
+    autoStart?: boolean;
+    autoStartAction?: ({ userPrompt, style }: {
+        userPrompt?: string;
+        style?: string;
+    }) => void;
+    generateButtonLabel: string;
+    instructionsPlaceholder: string;
+    imageStyles?: Array<ImageStyleObject>;
+    onGuessStyle?: (userPrompt: string) => Promise<ImageStyle>;
+    prompt?: string;
+    setPrompt?: (userPrompt: string) => void;
+    initialStyle?: ImageStyle;
+    inputDisabled?: boolean;
+    actionDisabled?: boolean;
+};
+/**
+ * AiImageModal component
+ * @param {AiImageModalProps} props - The component properties.
+ * @return {React.ReactElement} - rendered component.
+ */
+export default function AiImageModal({ title, cost, open, images, currentIndex, onClose, onTryAgain, onGenerate, generating, notEnoughRequests, requireUpgrade, currentLimit, currentUsage, isUnlimited, upgradeDescription, hasError, handlePreviousImage, handleNextImage, acceptButton, autoStart, autoStartAction, instructionsPlaceholder, imageStyles, onGuessStyle, prompt, setPrompt, initialStyle, inputDisabled, actionDisabled, }: AiImageModalProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/ai-image/components/ai-image-modal.js

@@ -0,0 +1,92 @@
+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 { SelectControl } from '@wordpress/components';
+import { useCallback, useRef, useState, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import debugFactory from 'debug';
+/**
+ * Internal dependencies
+ */
+import { IMAGE_STYLE_NONE, IMAGE_STYLE_AUTO, } from '../../../hooks/use-image-generator/constants.js';
+import { AiModalPromptInput } from '../../../logo-generator/index.js';
+import AiModalFooter from '../../ai-modal-footer/index.js';
+import AiAssistantModal from '../../modal/index.js';
+import QuotaExceededMessage from '../../quota-exceeded-message/index.js';
+import Carrousel from './carrousel.js';
+import UsageCounter from './usage-counter.js';
+import './ai-image-modal.scss';
+const FEATURED_IMAGE_UPGRADE_PROMPT_PLACEMENT = 'ai-image-generator';
+const debug = debugFactory('jetpack-ai-client:ai-image-modal');
+/**
+ * AiImageModal component
+ * @param {AiImageModalProps} props - The component properties.
+ * @return {React.ReactElement} - rendered component.
+ */
+export default function AiImageModal({ title, cost, open, images, currentIndex = 0, onClose = null, onTryAgain = null, onGenerate = null, generating = false, notEnoughRequests = false, requireUpgrade = false, currentLimit = null, currentUsage = null, isUnlimited = false, upgradeDescription = null, hasError = false, handlePreviousImage = () => { }, handleNextImage = () => { }, acceptButton = null, autoStart = false, autoStartAction = null, instructionsPlaceholder = null, imageStyles = [], onGuessStyle = null, prompt = '', setPrompt = () => { }, initialStyle = null, inputDisabled = false, actionDisabled = false, }) {
+    const { tracks } = useAnalytics();
+    const { recordEvent: recordTracksEvent } = tracks;
+    const triggeredAutoGeneration = useRef(false);
+    const [showStyleSelector, setShowStyleSelector] = useState(false);
+    const [style, setStyle] = useState(null);
+    const [styles, setStyles] = useState(imageStyles || []);
+    const handleTryAgain = useCallback(() => {
+        onTryAgain?.({ userPrompt: prompt, style });
+    }, [onTryAgain, prompt, style]);
+    const handleGenerate = useCallback(async () => {
+        if (style === IMAGE_STYLE_AUTO && onGuessStyle) {
+            recordTracksEvent('jetpack_ai_general_image_guess_style', {
+                context: 'block-editor',
+                tool: 'image',
+            });
+            const guessedStyle = (await onGuessStyle(prompt)) || IMAGE_STYLE_NONE;
+            setStyle(guessedStyle);
+            debug('guessed style', guessedStyle);
+            onGenerate?.({ userPrompt: prompt, style: guessedStyle });
+        }
+        else {
+            onGenerate?.({ userPrompt: prompt, style });
+        }
+    }, [onGenerate, prompt, style, onGuessStyle, recordTracksEvent]);
+    const updateStyle = useCallback((imageStyle) => {
+        debug('change style', imageStyle);
+        setStyle(imageStyle);
+        recordTracksEvent('jetpack_ai_image_generator_switch_style', {
+            context: 'block-editor',
+            style: imageStyle,
+        });
+    }, [setStyle, recordTracksEvent]);
+    // Controllers
+    const upgradePromptVisible = (requireUpgrade || notEnoughRequests) && !generating;
+    const counterVisible = Boolean(!isUnlimited && cost && currentLimit);
+    const generateLabel = __('Generate', 'jetpack-ai-client');
+    const tryAgainLabel = __('Try again', 'jetpack-ai-client');
+    /**
+     * Trigger image generation automatically.
+     */
+    useEffect(() => {
+        if (autoStart && open) {
+            if (!triggeredAutoGeneration.current) {
+                triggeredAutoGeneration.current = true;
+                autoStartAction?.({});
+            }
+        }
+    }, [autoStart, autoStartAction, open]);
+    // initialize styles dropdown
+    useEffect(() => {
+        if (imageStyles && imageStyles.length > 0) {
+            // Sort styles to have "None" and "Auto" first
+            setStyles([
+                imageStyles.find(({ value }) => value === IMAGE_STYLE_NONE),
+                imageStyles.find(({ value }) => value === IMAGE_STYLE_AUTO),
+                ...imageStyles.filter(({ value }) => ![IMAGE_STYLE_NONE, IMAGE_STYLE_AUTO].includes(value)),
+            ].filter(v => v) // simplest way to get rid of empty values
+            );
+            setShowStyleSelector(true);
+            setStyle(initialStyle || IMAGE_STYLE_NONE);
+        }
+    }, [imageStyles, initialStyle]);
+    return (_jsx(_Fragment, { children: open && (_jsxs(AiAssistantModal, { handleClose: onClose, title: title, children: [_jsxs("div", { className: "ai-image-modal__content", children: [showStyleSelector && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 16 }, children: [_jsx("div", { style: { fontWeight: 500, flexGrow: 1 }, children: __('Generate image', 'jetpack-ai-client') }), _jsx("div", { children: _jsx(SelectControl, { __nextHasNoMarginBottom: true, value: style, options: styles, onChange: updateStyle }) })] })), _jsx(AiModalPromptInput, { prompt: prompt, setPrompt: setPrompt, disabled: inputDisabled, actionDisabled: actionDisabled, generateHandler: hasError ? handleTryAgain : handleGenerate, placeholder: instructionsPlaceholder, buttonLabel: hasError ? tryAgainLabel : generateLabel }), upgradePromptVisible && (_jsx(QuotaExceededMessage, { description: upgradeDescription, placement: FEATURED_IMAGE_UPGRADE_PROMPT_PLACEMENT, useLightNudge: true })), _jsx("div", { className: "ai-image-modal__actions", children: _jsx("div", { className: "ai-image-modal__actions-left", children: counterVisible && (_jsx(UsageCounter, { cost: cost, currentLimit: currentLimit, currentUsage: currentUsage })) }) }), _jsx("div", { className: "ai-image-modal__image-canvas", children: _jsx(Carrousel, { images: images, current: currentIndex, handlePreviousImage: handlePreviousImage, handleNextImage: handleNextImage, actions: acceptButton }) })] }), _jsx("div", { className: "ai-image-modal__footer", children: _jsx(AiModalFooter, {}) })] })) }));
+}

package/build/components/ai-image/components/carrousel.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" resolution-mode="require"/>
+import './carrousel.scss';
+export type CarrouselImageData = {
+    image?: string;
+    libraryId?: number | string;
+    prompt?: string;
+    revisedPrompt?: string;
+    libraryUrl?: string;
+    generating?: boolean;
+    error?: {
+        message: string;
+    };
+};
+export type CarrouselImages = CarrouselImageData[];
+type CarrouselProps = {
+    images: CarrouselImages;
+    current: number;
+    handlePreviousImage: () => void;
+    handleNextImage: () => void;
+    actions?: React.JSX.Element;
+};
+/**
+ * Carrousel component
+ * @param {CarrouselProps} props - The component properties.
+ * @return {React.ReactElement} - rendered component.
+ */
+export default function Carrousel({ images, current, handlePreviousImage, handleNextImage, actions, }: CarrouselProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/ai-image/components/carrousel.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { Spinner } from '@wordpress/components';
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
+import clsx from 'clsx';
+/**
+ * Internal dependencies
+ */
+import AiFeedbackThumbs from '../../ai-feedback/index.js';
+import AiIcon from '../../ai-icon/index.js';
+import './carrousel.scss';
+/**
+ * BlankImage component
+ * @param {BlankImageProps} props - The component properties.
+ * @return {React.ReactElement} - rendered component.
+ */
+function BlankImage({ children, isDotted = false, contentClassName = '' }) {
+    const blankImage = (_jsx("img", { className: "ai-assistant-image__carrousel-image", src: "data:image/svg+xml;utf8,<svg viewBox='0 0 1 1' width='1024' height='768' xmlns='http://www.w3.org/2000/svg'><path d='M0 0 L1 0 L1 1 L0 1 L0 0 Z' fill='none' /></svg>", alt: "" }));
+    return (_jsxs("div", { className: "ai-assistant-image__blank", children: [blankImage, _jsx("div", { className: clsx('ai-assistant-image__blank-content', contentClassName, {
+                    'is-dotted': isDotted,
+                }), children: children })] }));
+}
+/**
+ * Carrousel component
+ * @param {CarrouselProps} props - The component properties.
+ * @return {React.ReactElement} - rendered component.
+ */
+export default function Carrousel({ images, current, handlePreviousImage, handleNextImage, actions = null, }) {
+    const [imageFeedbackDisabled, setImageFeedbackDisabled] = useState(false);
+    const prevButton = (_jsx("button", { className: "ai-carrousel__prev", onClick: handlePreviousImage, children: _jsx(Icon, { icon: chevronLeft, className: clsx('ai-carrousel__prev-icon', {
+                'is-disabled': current === 0,
+            }) }) }));
+    const nextButton = (_jsx("button", { className: "ai-carrousel__next", onClick: handleNextImage, children: _jsx(Icon, { icon: chevronRight, className: clsx('ai-carrousel__next-icon', {
+                'is-disabled': current + 1 === images.length,
+            }) }) }));
+    const total = images?.filter?.(item => item?.generating || Object.hasOwn(item, 'image') || Object.hasOwn(item, 'libraryId'))?.length;
+    const actual = current === 0 && total === 0 ? 0 : current + 1;
+    useEffect(() => {
+        const imageData = images[current];
+        if (!imageData) {
+            setImageFeedbackDisabled(true);
+        }
+        const { image, generating, error } = imageData || {};
+        // disable if there's an empty modal
+        if (!image && !generating && !error) {
+            return setImageFeedbackDisabled(true);
+        }
+        // also disable if we're generating or have an error
+        if (generating || error) {
+            return setImageFeedbackDisabled(true);
+        }
+        setImageFeedbackDisabled(false);
+    }, [current, images]);
+    return (_jsxs("div", { className: "ai-assistant-image__carrousel", children: [_jsxs("div", { className: "ai-assistant-image__carrousel-images", children: [images.length > 1 && prevButton, images.map(({ image, generating, error, revisedPrompt, libraryUrl }, index) => (_jsx("div", { className: clsx('ai-assistant-image__carrousel-image-container', {
+                            'is-current': current === index,
+                            'is-prev': current > index,
+                        }), children: generating ? (_jsxs(BlankImage, { contentClassName: "ai-assistant-image__loading", children: [__('Creating image…', 'jetpack-ai-client'), _jsx(Spinner, { style: {
+                                        width: '50px',
+                                        height: '50px',
+                                    } })] })) : (_jsx(_Fragment, { children: error ? (_jsx(BlankImage, { isDotted: true, children: _jsxs("div", { className: "ai-assistant-image__error", children: [__('An error occurred while generating the image. Please, try again!', 'jetpack-ai-client'), error?.message && (_jsx("span", { className: "ai-assistant-image__error-message", children: error?.message }))] }) })) : (_jsx(_Fragment, { children: !generating && !image && !libraryUrl ? (_jsx(BlankImage, { children: _jsx(AiIcon, {}) })) : (_jsx("img", { className: "ai-assistant-image__carrousel-image", src: image || libraryUrl, alt: revisedPrompt })) })) })) }, `image:` + index))), images.length > 1 && nextButton] }), _jsxs("div", { className: "ai-assistant-image__carrousel-footer", children: [_jsxs("div", { className: "ai-assistant-image__carrousel-footer-left", children: [_jsxs("div", { className: "ai-assistant-image__carrousel-counter", children: [prevButton, actual, " / ", total, nextButton] }), _jsx(AiFeedbackThumbs, { disabled: imageFeedbackDisabled, ratedItem: images[current]?.libraryUrl || '', iconSize: 20, options: {
+                                    mediaLibraryId: Number(images[current].libraryId),
+                                    prompt: images[current].prompt,
+                                    revisedPrompt: images[current].revisedPrompt,
+                                }, feature: "image-generator" })] }), _jsx("div", { className: "ai-assistant-image__carrousel-actions", children: actions })] })] }));
+}

package/build/components/ai-image/components/usage-counter.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import './usage-counter.scss';
+type UsageCounterProps = {
+    currentLimit: number;
+    currentUsage: number;
+    cost: number;
+};
+/**
+ * UsageCounter component
+ * @param {UsageCounterProps} props - The component properties.
+ * @return {React.ReactElement} - rendered component.
+ */
+export default function UsageCounter({ currentLimit, currentUsage, cost }: UsageCounterProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/ai-image/components/usage-counter.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { createInterpolateElement } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import './usage-counter.scss';
+/**
+ * UsageCounter component
+ * @param {UsageCounterProps} props - The component properties.
+ * @return {React.ReactElement} - rendered component.
+ */
+export default function UsageCounter({ currentLimit, currentUsage, cost }) {
+    const requestsBalance = currentLimit - currentUsage;
+    const requestsNeeded = createInterpolateElement(
+    // Translators: %d is the cost of one image.
+    sprintf(__('Requests needed: <counter>%d</counter>', 'jetpack-ai-client'), cost), {
+        counter: _jsx("span", {}),
+    });
+    const requestsAvailable = createInterpolateElement(sprintf(
+    // Translators: %d is the current requests balance.
+    __('Requests available: <counter>%d</counter>', 'jetpack-ai-client'), requestsBalance), {
+        counter: requestsBalance < cost ? (_jsx("span", { className: "ai-assistant-featured-image__usage-counter-no-limit" })) : (_jsx("strong", {})),
+    });
+    return (_jsxs("div", { className: "ai-assistant-featured-image__usage-counter", children: [_jsx("span", { children: requestsNeeded }), _jsx("span", { children: requestsAvailable })] }));
+}

package/build/components/ai-image/featured-image.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+type FeaturedImageProps = {
+    busy: boolean;
+    disabled: boolean;
+    placement: string;
+    onClose?: () => void;
+};
+/**
+ * FeaturedImage component
+ * @param {FeaturedImageProps} props - The component properties.
+ * @return {React.ReactElement} - rendered component.
+ */
+export default function FeaturedImage({ busy, disabled, placement, onClose, }: FeaturedImageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/ai-image/featured-image.js

@@ -0,0 +1,278 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { useAnalytics, PLAN_TYPE_UNLIMITED, usePlanType, } from '@automattic/jetpack-shared-extension-utils';
+import { Button } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { useCallback, useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import debugFactory from 'debug';
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { PLACEMENT_JETPACK_SIDEBAR, PLACEMENT_DOCUMENT_SETTINGS } from '../../constants.js';
+import useAiFeature from '../../hooks/use-ai-feature/index.js';
+import usePostContent from '../../hooks/use-post-content.js';
+import useSaveToMediaLibrary from '../../hooks/use-save-to-media-library.js';
+import AiImageModal from './components/ai-image-modal.js';
+import useAiImage from './hooks/use-ai-image.js';
+import useSiteType from './hooks/use-site-type.js';
+import { FEATURED_IMAGE_FEATURE_NAME, IMAGE_GENERATION_MODEL_STABLE_DIFFUSION, IMAGE_GENERATION_MODEL_DALL_E_3, PLACEMENT_MEDIA_SOURCE_DROPDOWN, } from './types.js';
+const debug = debugFactory('jetpack-ai-client:featured-image');
+/**
+ * FeaturedImage component
+ * @param {FeaturedImageProps} props - The component properties.
+ * @return {React.ReactElement} - rendered component.
+ */
+export default function FeaturedImage({ busy, disabled, placement, onClose = () => { }, }) {
+    const [isFeaturedImageModalVisible, setIsFeaturedImageModalVisible] = useState(placement === PLACEMENT_MEDIA_SOURCE_DROPDOWN);
+    const siteType = useSiteType();
+    const postContent = usePostContent();
+    const { postTitle, postFeaturedMediaId, isEditorPanelOpened } = useSelect(select => {
+        return {
+            postTitle: select(editorStore).getEditedPostAttribute('title'),
+            postFeaturedMediaId: select(editorStore).getEditedPostAttribute('featured_media'),
+            isEditorPanelOpened: select(editorStore).isEditorPanelOpened ??
+                select('core/edit-post').isEditorPanelOpened,
+        };
+    }, []);
+    const { saveToMediaLibrary } = useSaveToMediaLibrary();
+    const { tracks } = useAnalytics();
+    const { recordEvent } = tracks;
+    const [requestStyle, setRequestStyle] = useState(null);
+    const [prompt, setPrompt] = useState('');
+    // Editor actions
+    const { enableComplementaryArea } = useDispatch('core/interface');
+    const { clearSelectedBlock } = useDispatch('core/block-editor');
+    const { toggleEditorPanelOpened: toggleEditorPanelOpenedFromEditPost } = useDispatch('core/edit-post');
+    const { editPost, toggleEditorPanelOpened: toggleEditorPanelOpenedFromEditor } = useDispatch(editorStore);
+    // Get feature data
+    const { requireUpgrade, requestsCount, requestsLimit, currentTier, costs } = useAiFeature();
+    const planType = usePlanType(currentTier);
+    const featuredImageCost = costs?.[FEATURED_IMAGE_FEATURE_NAME]?.activeModel ?? 10;
+    const featuredImageActiveModel = featuredImageCost === costs?.[FEATURED_IMAGE_FEATURE_NAME]?.stableDiffusion
+        ? IMAGE_GENERATION_MODEL_STABLE_DIFFUSION
+        : IMAGE_GENERATION_MODEL_DALL_E_3;
+    const isUnlimited = planType === PLAN_TYPE_UNLIMITED;
+    const requestsBalance = requestsLimit - requestsCount;
+    const notEnoughRequests = requestsBalance < featuredImageCost;
+    // Handle deprecation and move of toggle action from edit-post.
+    // https://github.com/WordPress/gutenberg/blob/fe4d8cb936df52945c01c1863f7b87b58b7cc69f/packages/edit-post/CHANGELOG.md?plain=1#L19
+    const toggleEditorPanelOpened = toggleEditorPanelOpenedFromEditor ?? toggleEditorPanelOpenedFromEditPost;
+    const { pointer, current, setCurrent, processImageGeneration, handlePreviousImage, handleNextImage, currentImage, currentPointer, images, imageStyles, guessStyle, } = useAiImage({
+        autoStart: false,
+        cost: featuredImageCost,
+        type: 'featured-image-generation',
+        feature: FEATURED_IMAGE_FEATURE_NAME,
+        previousMediaId: postFeaturedMediaId,
+    });
+    const handleModalClose = useCallback(() => {
+        setIsFeaturedImageModalVisible(false);
+        onClose?.();
+    }, [onClose]);
+    const handleModalOpen = useCallback(() => {
+        setIsFeaturedImageModalVisible(true);
+    }, []);
+    /**
+     * Handle the guess style for the image. It is reworked here to include the post content.
+     */
+    const handleGuessStyle = useCallback(userPrompt => {
+        const content = postTitle + '\n\n' + postContent;
+        return guessStyle(userPrompt, 'featured-image-guess-style', content);
+    }, [postContent, postTitle, guessStyle]);
+    const handleGenerate = useCallback(({ userPrompt, style, }) => {
+        // track the generate image event
+        recordEvent('jetpack_ai_featured_image_generation_generate_image', {
+            placement,
+            model: featuredImageActiveModel,
+            site_type: siteType,
+            style,
+            userPrompt,
+        });
+        setIsFeaturedImageModalVisible(true);
+        return processImageGeneration({
+            userPrompt,
+            postContent: postTitle + '\n\n' + postContent,
+            notEnoughRequests,
+            style,
+        }).catch(error => {
+            recordEvent('jetpack_ai_featured_image_generation_error', {
+                placement,
+                error: error?.message,
+                model: featuredImageActiveModel,
+                site_type: siteType,
+                style,
+            });
+        });
+    }, [
+        recordEvent,
+        placement,
+        featuredImageActiveModel,
+        siteType,
+        processImageGeneration,
+        postContent,
+        notEnoughRequests,
+        postTitle,
+    ]);
+    const handleFirstGenerate = useCallback(async () => {
+        currentPointer.generating = true;
+        const guessedStyle = await handleGuessStyle('');
+        setRequestStyle(guessedStyle);
+        const response = await handleGenerate({ userPrompt: '', style: guessedStyle });
+        if (response) {
+            debug('handleFirstGenerate', response.revisedPrompt);
+            setPrompt(response.revisedPrompt || '');
+        }
+    }, [currentPointer, handleGenerate, handleGuessStyle]);
+    const handleRegenerate = useCallback(({ userPrompt, style }) => {
+        // track the regenerate image event
+        recordEvent('jetpack_ai_featured_image_generation_generate_another_image', {
+            placement,
+            model: featuredImageActiveModel,
+            site_type: siteType,
+            style: style,
+        });
+        setCurrent(() => images.length);
+        processImageGeneration({
+            userPrompt,
+            postContent: postTitle + '\n\n' + postContent,
+            notEnoughRequests,
+            style,
+        }).catch(error => {
+            recordEvent('jetpack_ai_featured_image_generation_error', {
+                placement,
+                error: error?.message,
+                model: featuredImageActiveModel,
+                site_type: siteType,
+                style,
+                userPrompt,
+            });
+        });
+    }, [
+        recordEvent,
+        placement,
+        featuredImageActiveModel,
+        siteType,
+        setCurrent,
+        processImageGeneration,
+        postTitle,
+        postContent,
+        notEnoughRequests,
+        images,
+    ]);
+    const handleTryAgain = useCallback(({ userPrompt, style }) => {
+        // track the try again event
+        recordEvent('jetpack_ai_featured_image_generation_try_again', {
+            placement,
+            model: featuredImageActiveModel,
+            site_type: siteType,
+            style,
+        });
+        processImageGeneration({
+            userPrompt,
+            postContent: postTitle + '\n\n' + postContent,
+            notEnoughRequests,
+            style,
+        }).catch(error => {
+            recordEvent('jetpack_ai_featured_image_generation_error', {
+                placement,
+                error: error?.message,
+                model: featuredImageActiveModel,
+                site_type: siteType,
+                style,
+            });
+        });
+    }, [
+        recordEvent,
+        placement,
+        featuredImageActiveModel,
+        siteType,
+        processImageGeneration,
+        postContent,
+        notEnoughRequests,
+        postTitle,
+    ]);
+    const triggerComplementaryArea = useCallback(() => {
+        // clear any block selection, because selected blocks have precedence on settings sidebar
+        clearSelectedBlock();
+        return enableComplementaryArea('core/edit-post', 'edit-post/document');
+    }, [clearSelectedBlock, enableComplementaryArea]);
+    const handleAccept = useCallback(() => {
+        // track the accept/use image event
+        recordEvent('jetpack_ai_featured_image_generation_use_image', {
+            placement,
+            model: featuredImageActiveModel,
+            site_type: siteType,
+        });
+        const setAsFeaturedImage = image => {
+            editPost({ featured_media: image });
+            handleModalClose();
+            // Open the featured image panel for users to see the new image.
+            setTimeout(() => {
+                const isFeaturedImagePanelOpened = isEditorPanelOpened('featured-image');
+                const isPostStatusPanelOpened = isEditorPanelOpened('post-status');
+                // open the complementary area and then trigger the featured image panel.
+                triggerComplementaryArea().then(() => {
+                    if (!isFeaturedImagePanelOpened) {
+                        toggleEditorPanelOpened('featured-image');
+                    }
+                    // handle the case where the featured image panel is not present
+                    if (!isPostStatusPanelOpened) {
+                        toggleEditorPanelOpened('post-status');
+                    }
+                });
+            }, 500);
+        };
+        // If the image is already in the media library, use it directly, if it failed for some reason
+        // save it to the media library and then use it.
+        if (currentImage?.libraryId) {
+            setAsFeaturedImage(currentImage?.libraryId);
+        }
+        else {
+            saveToMediaLibrary(currentImage?.image)
+                .then(image => {
+                setAsFeaturedImage(image?.id);
+            })
+                .catch(error => {
+                recordEvent('jetpack_ai_featured_image_saving_error', {
+                    placement,
+                    error: error?.message,
+                    model: featuredImageActiveModel,
+                    site_type: siteType,
+                });
+            });
+        }
+    }, [
+        recordEvent,
+        placement,
+        featuredImageActiveModel,
+        siteType,
+        currentImage?.libraryId,
+        currentImage?.image,
+        editPost,
+        handleModalClose,
+        isEditorPanelOpened,
+        triggerComplementaryArea,
+        toggleEditorPanelOpened,
+        saveToMediaLibrary,
+    ]);
+    const generateAgainText = __('Generate another image', 'jetpack-ai-client');
+    const generateText = __('Generate', 'jetpack-ai-client');
+    const hasContent = postContent.trim?.() || postTitle.trim?.() ? true : false;
+    const hasPrompt = hasContent ? prompt.length >= 0 : prompt.length >= 3;
+    const disableInput = notEnoughRequests || currentPointer?.generating || requireUpgrade;
+    const disableAction = disableInput || (!hasContent && !hasPrompt);
+    const upgradeDescription = notEnoughRequests
+        ? sprintf(
+        // Translators: %d is the cost of generating a featured image.
+        __("Featured image generation costs %d requests per image. You don't have enough requests to generate another image.", 'jetpack-ai-client'), featuredImageCost)
+        : null;
+    const acceptButton = (_jsx(Button, { onClick: handleAccept, variant: "primary", disabled: !currentImage?.image ||
+            currentImage?.generating ||
+            currentImage?.libraryId === postFeaturedMediaId, children: __('Set as featured image', 'jetpack-ai-client') }));
+    return (_jsxs(_Fragment, { children: [(placement === PLACEMENT_JETPACK_SIDEBAR ||
+                placement === PLACEMENT_DOCUMENT_SETTINGS) && (_jsxs(_Fragment, { children: [_jsx("p", { className: "jetpack-ai-assistant__help-text", children: __('Based on your post content.', 'jetpack-ai-client') }), _jsx(Button, { onClick: handleModalOpen, isBusy: busy, disabled: disabled || notEnoughRequests, variant: "secondary", __next40pxDefaultSize: true, children: __('Generate image', 'jetpack-ai-client') })] })), _jsx(AiImageModal, { postContent: hasContent, autoStart: hasContent && !postFeaturedMediaId, autoStartAction: handleFirstGenerate, images: images, currentIndex: current, title: __('Generate a featured image with AI', 'jetpack-ai-client'), cost: featuredImageCost, open: isFeaturedImageModalVisible, placement: placement, onClose: handleModalClose, onTryAgain: handleTryAgain, onGenerate: pointer?.current > 0 || postFeaturedMediaId ? handleRegenerate : handleGenerate, generating: currentPointer?.generating, notEnoughRequests: notEnoughRequests, requireUpgrade: requireUpgrade, upgradeDescription: upgradeDescription, currentLimit: requestsLimit, currentUsage: requestsCount, isUnlimited: isUnlimited, hasError: Boolean(currentPointer?.error), handlePreviousImage: handlePreviousImage, handleNextImage: handleNextImage, acceptButton: acceptButton, generateButtonLabel: pointer?.current > 0 ? generateAgainText : generateText, instructionsPlaceholder: __("Describe the featured image you'd like to create and select a style.", 'jetpack-ai-client'), imageStyles: imageStyles, onGuessStyle: handleGuessStyle, prompt: prompt, setPrompt: setPrompt, initialStyle: requestStyle, inputDisabled: disableInput, actionDisabled: disableAction })] }));
+}