@automattic/jetpack-ai-client 0.25.7 → 0.26.1

package/build/components/ai-image/general-purpose-image.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+/**
+ * The type for the callback function that is called when the user selects an image.
+ */
+type SetImageCallbackProps = {
+    id: number;
+    url: string;
+};
+type GeneralPurposeImageProps = {
+    placement: string;
+    onClose?: () => void;
+    onSetImage?: (image: SetImageCallbackProps) => void;
+};
+/**
+ * GeneralPurposeImage component
+ * @param {GeneralPurposeImageProps} props - The component properties.
+ * @return {React.ReactElement} - rendered component.
+ */
+export default function GeneralPurposeImage({ placement, onClose, onSetImage, }: GeneralPurposeImageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/ai-image/general-purpose-image.js

@@ -0,0 +1,184 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { useAnalytics, PLAN_TYPE_UNLIMITED, usePlanType, } from '@automattic/jetpack-shared-extension-utils';
+import { Button } from '@wordpress/components';
+import { useCallback, useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import debugFactory from 'debug';
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+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 { IMAGE_GENERATION_MODEL_STABLE_DIFFUSION, IMAGE_GENERATION_MODEL_DALL_E_3, GENERAL_IMAGE_FEATURE_NAME, } from './types.js';
+const debug = debugFactory('jetpack-ai:general-purpose-image');
+/**
+ * GeneralPurposeImage component
+ * @param {GeneralPurposeImageProps} props - The component properties.
+ * @return {React.ReactElement} - rendered component.
+ */
+export default function GeneralPurposeImage({ placement, onClose = () => { }, onSetImage = () => { }, }) {
+    const [isFeaturedImageModalVisible, setIsFeaturedImageModalVisible] = useState(true);
+    const siteType = useSiteType();
+    const postContent = usePostContent();
+    const { saveToMediaLibrary } = useSaveToMediaLibrary();
+    const { tracks } = useAnalytics();
+    const { recordEvent } = tracks;
+    const [prompt, setPrompt] = useState('');
+    // Get feature data
+    const { requireUpgrade, requestsCount, requestsLimit, currentTier, costs } = useAiFeature();
+    const planType = usePlanType(currentTier);
+    const generalImageCost = costs?.[GENERAL_IMAGE_FEATURE_NAME]?.activeModel ?? 10;
+    const generalImageActiveModel = generalImageCost === costs?.[GENERAL_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 < generalImageCost;
+    const { current, setCurrent, processImageGeneration, handlePreviousImage, handleNextImage, currentImage, currentPointer, images, pointer, imageStyles, guessStyle, } = useAiImage({
+        cost: generalImageCost,
+        autoStart: false,
+        type: 'general-image-generation',
+        feature: GENERAL_IMAGE_FEATURE_NAME,
+    });
+    const hasPrompt = prompt.length >= 3;
+    const disableInput = notEnoughRequests || currentPointer?.generating || requireUpgrade;
+    const disableAction = disableInput || !hasPrompt;
+    const handleModalClose = useCallback(() => {
+        setIsFeaturedImageModalVisible(false);
+        onClose?.();
+    }, [onClose]);
+    const handleGenerate = useCallback(async ({ userPrompt, style }) => {
+        debug('handleGenerate', userPrompt, style);
+        // track the generate image event
+        recordEvent('jetpack_ai_general_image_generation_generate_image', {
+            placement,
+            model: generalImageActiveModel,
+            site_type: siteType,
+            style,
+        });
+        processImageGeneration({ userPrompt, postContent, notEnoughRequests, style }).catch(error => {
+            recordEvent('jetpack_ai_general_image_generation_error', {
+                placement,
+                error: error?.message,
+                model: generalImageActiveModel,
+                site_type: siteType,
+                style,
+            });
+        });
+    }, [
+        recordEvent,
+        placement,
+        generalImageActiveModel,
+        siteType,
+        processImageGeneration,
+        postContent,
+        notEnoughRequests,
+    ]);
+    const handleRegenerate = useCallback(({ userPrompt, style }) => {
+        debug('handleRegenerate', userPrompt);
+        // track the regenerate image event
+        recordEvent('jetpack_ai_general_image_generation_generate_another_image', {
+            placement,
+            model: generalImageActiveModel,
+            site_type: siteType,
+            style,
+        });
+        setCurrent(crrt => crrt + 1);
+        processImageGeneration({ userPrompt, postContent, notEnoughRequests, style }).catch(error => {
+            recordEvent('jetpack_ai_general_image_generation_error', {
+                placement,
+                error: error?.message,
+                model: generalImageActiveModel,
+                site_type: siteType,
+            });
+        });
+    }, [
+        recordEvent,
+        placement,
+        generalImageActiveModel,
+        siteType,
+        processImageGeneration,
+        postContent,
+        notEnoughRequests,
+        setCurrent,
+    ]);
+    const handleTryAgain = useCallback(({ userPrompt, style }) => {
+        debug('handleTryAgain', userPrompt);
+        // track the try again event
+        recordEvent('jetpack_ai_general_image_generation_try_again', {
+            placement,
+            model: generalImageActiveModel,
+            site_type: siteType,
+            style,
+        });
+        processImageGeneration({ userPrompt, postContent, notEnoughRequests, style }).catch(error => {
+            recordEvent('jetpack_ai_general_image_generation_error', {
+                placement,
+                error: error?.message,
+                model: generalImageActiveModel,
+                site_type: siteType,
+            });
+        });
+    }, [
+        recordEvent,
+        placement,
+        generalImageActiveModel,
+        siteType,
+        processImageGeneration,
+        postContent,
+        notEnoughRequests,
+    ]);
+    const handleAccept = useCallback(() => {
+        // track the accept/use image event
+        recordEvent('jetpack_ai_general_image_generation_use_image', {
+            placement,
+            model: generalImageActiveModel,
+            site_type: siteType,
+        });
+        const setImage = image => {
+            onSetImage?.({ id: image.id, url: image.url });
+            handleModalClose();
+        };
+        // 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) {
+            setImage({
+                id: currentImage?.libraryId,
+                url: currentImage?.libraryUrl,
+            });
+        }
+        else {
+            saveToMediaLibrary(currentImage?.image).then(image => {
+                setImage(image);
+            });
+        }
+    }, [
+        recordEvent,
+        placement,
+        generalImageActiveModel,
+        siteType,
+        currentImage?.libraryId,
+        currentImage?.libraryUrl,
+        currentImage?.image,
+        onSetImage,
+        handleModalClose,
+        saveToMediaLibrary,
+    ]);
+    const generateAgainText = __('Generate another image', 'jetpack-ai-client');
+    const generateText = __('Generate', 'jetpack-ai-client');
+    const upgradeDescription = notEnoughRequests
+        ? sprintf(
+        // Translators: %d is the cost of generating a featured image.
+        __("Image generation costs %d requests per image. You don't have enough requests to generate another image.", 'jetpack-ai-client'), generalImageCost)
+        : null;
+    const acceptButton = (_jsx(Button, { onClick: handleAccept, variant: "primary", disabled: !currentImage?.image || currentImage?.generating, children: __('Insert image', 'jetpack-ai-client') }));
+    return (_jsx(AiImageModal, { postContent: true, images: images, currentIndex: current, title: __('Generate an image with AI', 'jetpack-ai-client'), cost: generalImageCost, open: isFeaturedImageModalVisible, placement: placement, onClose: handleModalClose, onTryAgain: handleTryAgain, onGenerate: pointer?.current > 0 ? 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 image you'd like to create and select a style.", 'jetpack-ai-client'), imageStyles: imageStyles, onGuessStyle: guessStyle, prompt: prompt, setPrompt: setPrompt, inputDisabled: disableInput, actionDisabled: disableAction }));
+}

package/build/components/ai-image/hooks/use-ai-image.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { ImageStyleObject, ImageStyle } from '../../../hooks/use-image-generator/constants.js';
+/**
+ * Types
+ */
+import { FEATURED_IMAGE_FEATURE_NAME, GENERAL_IMAGE_FEATURE_NAME } from '../types.js';
+import type { CarrouselImageData, CarrouselImages } from '../components/carrousel.js';
+type AiImageType = 'featured-image-generation' | 'general-image-generation';
+type AiImageFeature = typeof FEATURED_IMAGE_FEATURE_NAME | typeof GENERAL_IMAGE_FEATURE_NAME;
+export type ImageResponse = {
+    image?: string;
+    libraryId?: string;
+    libraryUrl?: string;
+    revisedPrompt?: string;
+};
+type ProcessImageGenerationProps = {
+    userPrompt?: string | null;
+    postContent?: string | null;
+    notEnoughRequests: boolean;
+    style?: string;
+};
+type UseAiImageProps = {
+    feature: AiImageFeature;
+    type: AiImageType;
+    cost: number;
+    autoStart?: boolean;
+    previousMediaId?: number;
+};
+/**
+ * Hook to get properties for AiImage
+ *
+ * @param {UseAiImageProps} props - The component properties.
+ * @return {UseAiImageReturn} - Object containing properties for AiImage.
+ */
+export default function useAiImage({ feature, type, cost, autoStart, previousMediaId, }: UseAiImageProps): {
+    current: number;
+    setCurrent: React.Dispatch<React.SetStateAction<number>>;
+    processImageGeneration: ({ userPrompt, postContent, notEnoughRequests, style, }: ProcessImageGenerationProps) => Promise<ImageResponse>;
+    handlePreviousImage: () => void;
+    handleNextImage: () => void;
+    currentImage: CarrouselImageData;
+    currentPointer: CarrouselImageData;
+    images: CarrouselImages;
+    pointer: React.MutableRefObject<number>;
+    imageStyles: ImageStyleObject[];
+    guessStyle: (prompt: string, requestType?: string, content?: string) => Promise<ImageStyle | null>;
+};
+export {};

package/build/components/ai-image/hooks/use-ai-image.js

@@ -0,0 +1,219 @@
+/**
+ * External dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { cleanForSlug } from '@wordpress/url';
+/**
+ * Internal dependencies
+ */
+import askQuestionSync from '../../../ask-question/sync.js';
+import useAiFeature from '../../../hooks/use-ai-feature/index.js';
+import useImageGenerator from '../../../hooks/use-image-generator/index.js';
+import useSaveToMediaLibrary from '../../../hooks/use-save-to-media-library.js';
+/**
+ * Types
+ */
+import { FEATURED_IMAGE_FEATURE_NAME, } from '../types.js';
+/**
+ * Hook to get properties for AiImage
+ *
+ * @param {UseAiImageProps} props - The component properties.
+ * @return {UseAiImageReturn} - Object containing properties for AiImage.
+ */
+export default function useAiImage({ feature, type, cost, autoStart = true, previousMediaId, }) {
+    const { generateImageWithParameters } = useImageGenerator();
+    const { increaseRequestsCount, featuresControl } = useAiFeature();
+    const { saveToMediaLibrary } = useSaveToMediaLibrary();
+    const { createNotice } = useDispatch('core/notices');
+    /* Images Control */
+    // pointer keeps track of request/generation iteration
+    const pointer = useRef(0);
+    // and current keeps track of what is the image exposed at the moment
+    // TODO: should current be any relevant here? It's just modal/carrousel logic after all
+    const [current, setCurrent] = useState(0);
+    const [images, setImages] = useState([{ generating: autoStart }]);
+    // map feature-to-control prop, if this goes over 2 options, make a hook for it
+    const featureControl = feature === FEATURED_IMAGE_FEATURE_NAME ? 'featured-image' : 'image';
+    const imageFeatureControl = featuresControl?.[featureControl];
+    const imageStyles = imageFeatureControl?.styles;
+    /* Merge the image data with the new data. */
+    const updateImages = useCallback((data, index) => {
+        setImages(currentImages => {
+            const newImages = [...currentImages];
+            newImages[index] = {
+                ...newImages[index],
+                ...data,
+            };
+            return newImages;
+        });
+    }, []);
+    // the selec/useEffect combo...
+    const loadedMedia = useSelect((select) => select('core')?.getMedia?.(previousMediaId), [previousMediaId]);
+    useEffect(() => {
+        if (loadedMedia) {
+            updateImages({
+                image: loadedMedia.source_url,
+                libraryId: loadedMedia.id,
+                libraryUrl: loadedMedia.source_url,
+                generating: false,
+            }, pointer.current);
+        }
+    }, [loadedMedia, updateImages]);
+    /*
+     * Function to show a snackbar notice on the editor.
+     */
+    const showSnackbarNotice = useCallback((message) => {
+        createNotice('success', message, {
+            type: 'snackbar',
+            isDismissible: true,
+        });
+    }, [createNotice]);
+    /*
+     * Function to update the requests count after a featured image generation.
+     */
+    const updateRequestsCount = useCallback(() => {
+        increaseRequestsCount(cost);
+    }, [increaseRequestsCount, cost]);
+    /*
+     * Function to suggest a name for the image based on the user prompt.
+     */
+    const getImageNameSuggestion = useCallback((userPrompt) => {
+        if (!userPrompt) {
+            return 'image.png';
+        }
+        const truncatedPrompt = userPrompt.split(' ').slice(0, 10).join(' ');
+        return cleanForSlug(truncatedPrompt) + '.png';
+    }, []);
+    /*
+     * Function to generate a new image with the current value of the post content.
+     */
+    const processImageGeneration = useCallback(({ userPrompt, postContent, notEnoughRequests, style = null, }) => {
+        return new Promise((resolve, reject) => {
+            if (previousMediaId && pointer.current === 0) {
+                pointer.current++;
+            }
+            updateImages({ generating: true, error: null }, pointer.current);
+            // Ensure the site has enough requests to generate the image.
+            if (notEnoughRequests) {
+                updateImages({
+                    generating: false,
+                    error: new Error(__("You don't have enough requests to generate another image.", 'jetpack-ai-client')),
+                }, pointer.current);
+                resolve({});
+                return;
+            }
+            /**
+             * Make a generic call to backend and let it decide the model.
+             */
+            const generateImagePromise = generateImageWithParameters({
+                feature,
+                size: '1792x1024',
+                responseFormat: 'b64_json',
+                messages: [
+                    {
+                        role: 'jetpack-ai',
+                        context: {
+                            type,
+                            request: userPrompt ? userPrompt : null,
+                            content: postContent,
+                            style,
+                        },
+                    },
+                ],
+                style: style || '',
+            });
+            const name = getImageNameSuggestion(userPrompt);
+            generateImagePromise
+                .then(result => {
+                if (result.data.length > 0) {
+                    const image = 'data:image/png;base64,' + result.data[0].b64_json;
+                    const prompt = userPrompt || null;
+                    const revisedPrompt = result.data[0].revised_prompt || null;
+                    updateImages({ image, prompt, revisedPrompt }, pointer.current);
+                    updateRequestsCount();
+                    saveToMediaLibrary(image, name)
+                        .then(savedImage => {
+                        showSnackbarNotice(__('Image saved to media library.', 'jetpack-ai-client'));
+                        updateImages({ libraryId: savedImage?.id, libraryUrl: savedImage?.url, generating: false }, pointer.current);
+                        pointer.current += 1;
+                        resolve({
+                            image,
+                            libraryId: savedImage?.id,
+                            libraryUrl: savedImage?.url,
+                            revisedPrompt,
+                        });
+                    })
+                        .catch(() => {
+                        updateImages({ generating: false }, pointer.current);
+                        pointer.current += 1;
+                        resolve({ image });
+                    });
+                }
+            })
+                .catch(e => {
+                updateImages({ generating: false, error: e }, pointer.current);
+                reject(e);
+            });
+        });
+    }, [
+        updateImages,
+        generateImageWithParameters,
+        feature,
+        type,
+        updateRequestsCount,
+        saveToMediaLibrary,
+        showSnackbarNotice,
+        getImageNameSuggestion,
+        previousMediaId,
+    ]);
+    const handlePreviousImage = useCallback(() => {
+        setCurrent(Math.max(current - 1, 0));
+    }, [current]);
+    const handleNextImage = useCallback(() => {
+        setCurrent(Math.min(current + 1, images.length - 1));
+    }, [current, images.length]);
+    const guessStyle = useCallback(async function (prompt, requestType = '', content = '') {
+        if (!imageStyles || !imageStyles.length) {
+            return null;
+        }
+        const messages = [
+            {
+                role: 'jetpack-ai',
+                context: {
+                    type: requestType || 'general-image-guess-style',
+                    request: prompt,
+                    content,
+                },
+            },
+        ];
+        try {
+            const style = await askQuestionSync(messages, { feature: 'jetpack-ai-image-generator' });
+            if (!style) {
+                return null;
+            }
+            const styleObject = imageStyles.find(({ value }) => value === style);
+            if (!styleObject) {
+                return null;
+            }
+            return styleObject.value;
+        }
+        catch (error) {
+            Promise.reject(error);
+        }
+    }, [imageStyles]);
+    return {
+        current,
+        setCurrent,
+        processImageGeneration,
+        handlePreviousImage,
+        handleNextImage,
+        currentImage: images[current],
+        currentPointer: images[pointer.current],
+        images,
+        pointer,
+        imageStyles,
+        guessStyle,
+    };
+}

package/build/components/ai-image/hooks/use-site-type.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Hook to get the type of site.
+ *
+ * @return {string} - The type of site.
+ */
+export default function useSiteType(): string;

package/build/components/ai-image/hooks/use-site-type.js

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import { isAtomicSite, isSimpleSite } from '@automattic/jetpack-shared-extension-utils';
+import { useState } from '@wordpress/element';
+/**
+ * Hook to get the type of site.
+ *
+ * @return {string} - The type of site.
+ */
+export default function useSiteType() {
+    const getSiteType = () => {
+        if (isAtomicSite()) {
+            return 'atomic';
+        }
+        if (isSimpleSite()) {
+            return 'simple';
+        }
+        return 'jetpack';
+    };
+    const [siteType] = useState(getSiteType());
+    return siteType;
+}

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

@@ -0,0 +1,4 @@
+import FeaturedImage from './featured-image.js';
+import GeneralPurposeImage from './general-purpose-image.js';
+import { PLACEMENT_MEDIA_SOURCE_DROPDOWN, PLACEMENT_BLOCK_PLACEHOLDER_BUTTON } from './types.js';
+export { FeaturedImage, PLACEMENT_MEDIA_SOURCE_DROPDOWN, PLACEMENT_BLOCK_PLACEHOLDER_BUTTON, GeneralPurposeImage, };

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

@@ -0,0 +1,4 @@
+import FeaturedImage from './featured-image.js';
+import GeneralPurposeImage from './general-purpose-image.js';
+import { PLACEMENT_MEDIA_SOURCE_DROPDOWN, PLACEMENT_BLOCK_PLACEHOLDER_BUTTON } from './types.js';
+export { FeaturedImage, PLACEMENT_MEDIA_SOURCE_DROPDOWN, PLACEMENT_BLOCK_PLACEHOLDER_BUTTON, GeneralPurposeImage, };

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

@@ -0,0 +1,16 @@
+export declare const FEATURED_IMAGE_FEATURE_NAME: "featured-post-image";
+export declare const GENERAL_IMAGE_FEATURE_NAME: "general-image";
+export declare const IMAGE_GENERATION_MODEL_STABLE_DIFFUSION: "stable-diffusion";
+export declare const IMAGE_GENERATION_MODEL_DALL_E_3: "dall-e-3";
+export declare const PLACEMENT_MEDIA_SOURCE_DROPDOWN: "media-source-dropdown";
+export declare const PLACEMENT_BLOCK_PLACEHOLDER_BUTTON: "block-placeholder-button";
+export interface EditorSelectors {
+    getEditedPostAttribute: (attribute: string) => number;
+    isEditorPanelOpened: (panel: string) => boolean;
+}
+export interface CoreSelectors {
+    getMedia: (mediaId: number) => {
+        id: number;
+        source_url: string;
+    } | null;
+}

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

@@ -0,0 +1,6 @@
+export const FEATURED_IMAGE_FEATURE_NAME = 'featured-post-image';
+export const GENERAL_IMAGE_FEATURE_NAME = 'general-image';
+export const IMAGE_GENERATION_MODEL_STABLE_DIFFUSION = 'stable-diffusion';
+export const IMAGE_GENERATION_MODEL_DALL_E_3 = 'dall-e-3';
+export const PLACEMENT_MEDIA_SOURCE_DROPDOWN = 'media-source-dropdown';
+export const PLACEMENT_BLOCK_PLACEHOLDER_BUTTON = 'block-placeholder-button';

package/build/{ai-client/src/components → components}/index.d.ts

@@ -1,6 +1,10 @@
 export { AIControl, BlockAIControl, ExtensionAIControl } from './ai-control/index.js';
 export { default as AiFeedbackThumbs } from './ai-feedback/index.js';
+export { default as AiIcon, AiSVG } from './ai-icon/index.js';
+export { FeaturedImage, GeneralPurposeImage, PLACEMENT_MEDIA_SOURCE_DROPDOWN, PLACEMENT_BLOCK_PLACEHOLDER_BUTTON, } from './ai-image/index.js';
 export { default as AiStatusIndicator } from './ai-status-indicator/index.js';
 export { default as AudioDurationDisplay } from './audio-duration-display/index.js';
 export { default as AiModalFooter } from './ai-modal-footer/index.js';
 export { GuidelineMessage, UpgradeMessage, ErrorMessage, default as FooterMessage, } from './message/index.js';
+export { default as AiAssistantModal } from './modal/index.js';
+export { default as QuotaExceededMessage, FairUsageNotice, } from './quota-exceeded-message/index.js';

package/build/{ai-client/src/components → components}/index.js

@@ -1,6 +1,10 @@
 export { AIControl, BlockAIControl, ExtensionAIControl } from './ai-control/index.js';
 export { default as AiFeedbackThumbs } from './ai-feedback/index.js';
+export { default as AiIcon, AiSVG } from './ai-icon/index.js';
+export { FeaturedImage, GeneralPurposeImage, PLACEMENT_MEDIA_SOURCE_DROPDOWN, PLACEMENT_BLOCK_PLACEHOLDER_BUTTON, } from './ai-image/index.js';
 export { default as AiStatusIndicator } from './ai-status-indicator/index.js';
 export { default as AudioDurationDisplay } from './audio-duration-display/index.js';
 export { default as AiModalFooter } from './ai-modal-footer/index.js';
 export { GuidelineMessage, UpgradeMessage, ErrorMessage, default as FooterMessage, } from './message/index.js';
+export { default as AiAssistantModal } from './modal/index.js';
+export { default as QuotaExceededMessage, FairUsageNotice, } from './quota-exceeded-message/index.js';

package/build/components/modal/index.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" resolution-mode="require"/>
+import type { RequestingStateProp } from '../../types.js';
+import './style.scss';
+type AiAssistantModalProps = {
+    children: React.ReactNode;
+    handleClose: () => void;
+    hideHeader?: boolean;
+    requestingState?: RequestingStateProp;
+    title?: string;
+    maxWidth?: number;
+};
+/**
+ * AiAssistantModal component
+ * @param {AiAssistantModalProps} props - The component properties.
+ * @return {React.ReactElement} - rendered component.
+ */
+export default function AiAssistantModal({ children, handleClose, hideHeader, requestingState, title, maxWidth, }: AiAssistantModalProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/modal/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { Modal, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { close } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+import AiStatusIndicator from '../ai-status-indicator/index.js';
+import './style.scss';
+const ModalHeader = ({ requestingState, onClose, title, }) => {
+    return (_jsxs("div", { className: "ai-assistant-modal__header", children: [_jsxs("div", { className: "ai-assistant-modal__title-wrapper", children: [_jsx(AiStatusIndicator, { state: requestingState }), _jsx("h1", { className: "ai-assistant-modal__title", children: title })] }), _jsx(Button, { icon: close, label: __('Close', 'jetpack-ai-client'), onClick: onClose })] }));
+};
+/**
+ * AiAssistantModal component
+ * @param {AiAssistantModalProps} props - The component properties.
+ * @return {React.ReactElement} - rendered component.
+ */
+export default function AiAssistantModal({ children, handleClose, hideHeader = true, requestingState = 'init', title = __('AI Assistant', 'jetpack-ai-client'), maxWidth = 720, }) {
+    return (_jsx(Modal, { __experimentalHideHeader: hideHeader, className: "ai-assistant-modal", shouldCloseOnClickOutside: false, onRequestClose: handleClose, children: _jsxs("div", { className: "ai-assistant-modal__content", style: { maxWidth }, children: [_jsx(ModalHeader, { requestingState: requestingState, onClose: handleClose, title: title }), _jsx("hr", { className: "ai-assistant-modal__divider" }), children] }) }));
+}

package/build/components/quota-exceeded-message/index.d.ts

@@ -0,0 +1,13 @@
+import './style.scss';
+type FairUsageNoticeProps = {
+    variant?: 'error' | 'muted';
+};
+/**
+ * The fair usage notice component.
+ * @param {FairUsageNoticeProps}         props         - Fair usage notice component props.
+ * @param {FairUsageNoticeProps.variant} props.variant - The variant of the notice to render.
+ * @return {ReactElement} the Notice component with the fair usage message.
+ */
+export declare const FairUsageNotice: ({ variant }: FairUsageNoticeProps) => import("react/jsx-runtime").JSX.Element;
+declare const QuotaExceededMessage: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default QuotaExceededMessage;