@automattic/jetpack-ai-client 0.14.6 → 0.15.0

package/build/logo-generator/hooks/use-logo-generator.js

@@ -0,0 +1,286 @@
+/**
+ * External dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import debugFactory from 'debug';
+import { useCallback } from 'react';
+/**
+ * Internal dependencies
+ */
+import useImageGenerator from '../../hooks/use-image-generator/index.js';
+import useSaveToMediaLibrary from '../../hooks/use-save-to-media-library/index.js';
+import requestJwt from '../../jwt/index.js';
+import { stashLogo } from '../lib/logo-storage.js';
+import { setSiteLogo } from '../lib/set-site-logo.js';
+import { STORE_NAME } from '../store/index.js';
+import useRequestErrors from './use-request-errors.js';
+const debug = debugFactory('jetpack-ai-calypso:use-logo-generator');
+const useLogoGenerator = () => {
+    const { setSelectedLogoIndex, setIsSavingLogoToLibrary, setIsApplyingLogo, setIsRequestingImage, setIsEnhancingPrompt, increaseAiAssistantRequestsCount, addLogoToHistory, setContext, } = useDispatch(STORE_NAME);
+    const { logos, selectedLogoIndex, selectedLogo, siteDetails, isSavingLogoToLibrary, isApplyingLogo, isEnhancingPrompt, isBusy, isRequestingImage, getAiAssistantFeature, requireUpgrade, context, } = useSelect(select => {
+        const selectors = select(STORE_NAME);
+        return {
+            logos: selectors.getLogos(),
+            selectedLogoIndex: selectors.getSelectedLogoIndex(),
+            selectedLogo: selectors.getSelectedLogo(),
+            siteDetails: selectors.getSiteDetails(),
+            isSavingLogoToLibrary: selectors.getIsSavingLogoToLibrary(),
+            isApplyingLogo: selectors.getIsApplyingLogo(),
+            isRequestingImage: selectors.getIsRequestingImage(),
+            isEnhancingPrompt: selectors.getIsEnhancingPrompt(),
+            isBusy: selectors.getIsBusy(),
+            getAiAssistantFeature: selectors.getAiAssistantFeature,
+            requireUpgrade: selectors.getRequireUpgrade(),
+            context: selectors.getContext(),
+        };
+    }, []);
+    const { setFirstLogoPromptFetchError, setEnhancePromptFetchError, setLogoFetchError, setSaveToLibraryError, setLogoUpdateError, } = useRequestErrors();
+    const { generateImageWithParameters } = useImageGenerator();
+    const { saveToMediaLibrary } = useSaveToMediaLibrary();
+    const { ID = null, name = null, description = null } = siteDetails || {};
+    const siteId = ID ? String(ID) : null;
+    const aiAssistantFeatureData = getAiAssistantFeature(siteId);
+    const logoGenerationCost = aiAssistantFeatureData?.costs?.['jetpack-ai-logo-generator']?.logo;
+    const generateFirstPrompt = useCallback(async function () {
+        setFirstLogoPromptFetchError(null);
+        increaseAiAssistantRequestsCount();
+        try {
+            const tokenData = await requestJwt();
+            if (!tokenData || !tokenData.token) {
+                throw new Error('No token provided');
+            }
+            debug('Generating first prompt for site');
+            const firstPromptGenerationPrompt = `Generate a simple and short prompt asking for a logo based on the site's name and description, keeping the same language.
+Example for a site named "The minimalist fashion blog", described as "Daily inspiration for all things fashion": A logo for a minimalist fashion site focused on daily sartorial inspiration with a clean and modern aesthetic that is sleek and sophisticated.
+Another example, now for a site called "El observatorio de aves", described as "Un sitio dedicado a nuestros compañeros y compañeras entusiastas de la observación de aves.": Un logo para un sitio web dedicado a la observación de aves,  capturando la esencia de la naturaleza y la pasión por la avifauna en un diseño elegante y representativo, reflejando una estética natural y apasionada por la vida silvestre.
+
+Site name: ${name}
+Site description: ${description}`;
+            const body = {
+                question: firstPromptGenerationPrompt,
+                feature: 'jetpack-ai-logo-generator',
+                stream: false,
+            };
+            const URL = 'https://public-api.wordpress.com/wpcom/v2/jetpack-ai-query';
+            const headers = {
+                Authorization: `Bearer ${tokenData.token}`,
+                'Content-Type': 'application/json',
+            };
+            const data = await fetch(URL, {
+                method: 'POST',
+                headers,
+                body: JSON.stringify(body),
+            }).then(response => response.json());
+            return data?.choices?.[0]?.message?.content;
+        }
+        catch (error) {
+            increaseAiAssistantRequestsCount(-1);
+            setFirstLogoPromptFetchError(error);
+            throw error;
+        }
+    }, [setFirstLogoPromptFetchError, increaseAiAssistantRequestsCount]);
+    const enhancePrompt = async function ({ prompt }) {
+        setEnhancePromptFetchError(null);
+        increaseAiAssistantRequestsCount();
+        try {
+            const tokenData = await requestJwt();
+            if (!tokenData || !tokenData.token) {
+                throw new Error('No token provided');
+            }
+            debug('Enhancing prompt', prompt);
+            const systemMessage = `Enhance the prompt you receive.
+The prompt is meant for generating a logo. Return the same prompt enhanced, and make each enhancement wrapped in brackets.
+Do not add any mention to text, letters, typography or the name of the site in the prompt.
+For example: user's prompt: A logo for an ice cream shop. Returned prompt: A logo for an ice cream shop [that is pink] [and vibrant].`;
+            const messages = [
+                {
+                    role: 'system',
+                    content: systemMessage,
+                },
+                {
+                    role: 'user',
+                    content: prompt,
+                },
+            ];
+            const body = {
+                messages,
+                feature: 'jetpack-ai-logo-generator',
+                stream: false,
+            };
+            const URL = 'https://public-api.wordpress.com/wpcom/v2/jetpack-ai-query';
+            const headers = {
+                Authorization: `Bearer ${tokenData.token}`,
+                'Content-Type': 'application/json',
+            };
+            const data = await fetch(URL, {
+                method: 'POST',
+                headers,
+                body: JSON.stringify(body),
+            }).then(response => response.json());
+            return data?.choices?.[0]?.message?.content;
+        }
+        catch (error) {
+            increaseAiAssistantRequestsCount(-1);
+            setEnhancePromptFetchError(error);
+            throw error;
+        }
+    };
+    const generateImage = useCallback(async function ({ prompt, }) {
+        setLogoFetchError(null);
+        try {
+            const tokenData = await requestJwt();
+            if (!tokenData || !tokenData.token) {
+                throw new Error('No token provided');
+            }
+            debug('Generating image with prompt', prompt);
+            const imageGenerationPrompt = `I NEED to test how the tool works with extremely simple prompts. DO NOT add any detail, just use it AS-IS:
+Create a single text-free iconic vector logo that symbolically represents the user request, using abstract or symbolic imagery.
+The design should be modern, with either a vivid color scheme full of gradients or a color scheme that's monochromatic. Use any of those styles based on the user request mood.
+Ensure the logo is set against a clean solid background.
+Ensure the logo works in small sizes.
+The imagery in the logo should subtly hint at the mood of the user request but DO NOT use any text, letters, or the name of the site on the imagery.
+The image should contain a single icon, without variations, color palettes or different versions.
+
+User request:${prompt}`;
+            const body = {
+                prompt: imageGenerationPrompt,
+                feature: 'jetpack-ai-logo-generator',
+                response_format: 'b64_json',
+            };
+            const data = await generateImageWithParameters(body);
+            return data;
+        }
+        catch (error) {
+            setLogoFetchError(error);
+            throw error;
+        }
+    }, []);
+    const saveLogo = useCallback(async (logo) => {
+        setSaveToLibraryError(null);
+        try {
+            debug('Saving logo for site');
+            // If the logo is already saved, return its mediaId and mediaURL.
+            if (logo.mediaId) {
+                return { mediaId: logo.mediaId, mediaURL: logo.url };
+            }
+            const savedLogo = {
+                mediaId: 0,
+                mediaURL: '',
+            };
+            setIsSavingLogoToLibrary(true);
+            const { id: mediaId, url: mediaURL } = await saveToMediaLibrary(logo.url, 'site-logo.png');
+            savedLogo.mediaId = parseInt(mediaId);
+            savedLogo.mediaURL = mediaURL;
+            return savedLogo;
+        }
+        catch (error) {
+            setSaveToLibraryError(error);
+            throw error;
+        }
+        finally {
+            setIsSavingLogoToLibrary(false);
+        }
+    }, [setIsSavingLogoToLibrary, setSaveToLibraryError]);
+    const applyLogo = useCallback(async () => {
+        setLogoUpdateError(null);
+        try {
+            if (!siteId || !selectedLogo) {
+                throw new Error('Missing siteId or logo');
+            }
+            debug('Applying logo for site', siteId);
+            setIsApplyingLogo(true);
+            const { mediaId } = selectedLogo;
+            if (!mediaId) {
+                throw new Error('Missing mediaId');
+            }
+            await setSiteLogo({
+                siteId: siteId,
+                imageId: String(mediaId),
+            });
+        }
+        catch (error) {
+            setLogoUpdateError(error);
+            throw error;
+        }
+        finally {
+            setIsApplyingLogo(false);
+        }
+    }, [selectedLogo, setIsApplyingLogo, setLogoUpdateError, siteId]);
+    const storeLogo = useCallback((logo) => {
+        addLogoToHistory(logo);
+        stashLogo({ ...logo, siteId: String(siteId) });
+    }, [siteId, addLogoToHistory, stashLogo]);
+    const generateLogo = useCallback(async function ({ prompt }) {
+        debug('Generating logo for site');
+        setIsRequestingImage(true);
+        try {
+            if (!logoGenerationCost) {
+                throw new Error('Missing cost information');
+            }
+            increaseAiAssistantRequestsCount(logoGenerationCost);
+            let image;
+            try {
+                image = await generateImage({ prompt });
+                if (!image || !image.data.length) {
+                    throw new Error('No image returned');
+                }
+            }
+            catch (error) {
+                increaseAiAssistantRequestsCount(-logoGenerationCost);
+                throw error;
+            }
+            // response_format=url returns object with url, otherwise b64_json
+            const logo = {
+                url: 'data:image/png;base64,' + image.data[0].b64_json,
+                description: prompt,
+            };
+            try {
+                const savedLogo = await saveLogo(logo);
+                storeLogo({
+                    url: savedLogo.mediaURL,
+                    description: prompt,
+                    mediaId: savedLogo.mediaId,
+                });
+            }
+            catch (error) {
+                storeLogo(logo);
+                throw error;
+            }
+        }
+        finally {
+            setIsRequestingImage(false);
+        }
+    }, [logoGenerationCost, increaseAiAssistantRequestsCount, saveLogo, storeLogo, generateImage]);
+    return {
+        logos,
+        selectedLogoIndex,
+        selectedLogo,
+        setSelectedLogoIndex,
+        site: {
+            id: siteId,
+            name,
+            description,
+        },
+        generateFirstPrompt,
+        saveLogo,
+        applyLogo,
+        generateImage,
+        enhancePrompt,
+        storeLogo,
+        generateLogo,
+        setIsEnhancingPrompt,
+        setIsRequestingImage,
+        setIsSavingLogoToLibrary,
+        setIsApplyingLogo,
+        setContext,
+        isEnhancingPrompt,
+        isRequestingImage,
+        isSavingLogoToLibrary,
+        isApplyingLogo,
+        isBusy,
+        getAiAssistantFeature,
+        requireUpgrade,
+        context,
+    };
+};
+export default useLogoGenerator;

package/build/logo-generator/hooks/use-request-errors.d.ts

@@ -0,0 +1,16 @@
+declare const useRequestErrors: () => {
+    setFeatureFetchError: any;
+    setFirstLogoPromptFetchError: any;
+    setEnhancePromptFetchError: any;
+    setLogoFetchError: any;
+    setSaveToLibraryError: any;
+    setLogoUpdateError: any;
+    clearErrors: () => void;
+    featureFetchError: import("../store/types.js").RequestError;
+    firstLogoPromptFetchError: import("../store/types.js").RequestError;
+    enhancePromptFetchError: import("../store/types.js").RequestError;
+    logoFetchError: import("../store/types.js").RequestError;
+    saveToLibraryError: import("../store/types.js").RequestError;
+    logoUpdateError: import("../store/types.js").RequestError;
+};
+export default useRequestErrors;

package/build/logo-generator/hooks/use-request-errors.js

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+import { STORE_NAME } from '../store/index.js';
+const useRequestErrors = () => {
+    const { setFeatureFetchError, setFirstLogoPromptFetchError, setEnhancePromptFetchError, setLogoFetchError, setSaveToLibraryError, setLogoUpdateError, } = useDispatch(STORE_NAME);
+    const { featureFetchError, firstLogoPromptFetchError, enhancePromptFetchError, logoFetchError, saveToLibraryError, logoUpdateError, } = useSelect(select => {
+        const selectors = select(STORE_NAME);
+        return {
+            featureFetchError: selectors.getFeatureFetchError(),
+            firstLogoPromptFetchError: selectors.getFirstLogoPromptFetchError(),
+            enhancePromptFetchError: selectors.getEnhancePromptFetchError(),
+            logoFetchError: selectors.getLogoFetchError(),
+            saveToLibraryError: selectors.getSaveToLibraryError(),
+            logoUpdateError: selectors.getLogoUpdateError(),
+        };
+    }, []);
+    const clearErrors = () => {
+        setFeatureFetchError(null);
+        setFirstLogoPromptFetchError(null);
+        setEnhancePromptFetchError(null);
+        setLogoFetchError(null);
+        setSaveToLibraryError(null);
+        setLogoUpdateError(null);
+    };
+    return {
+        setFeatureFetchError,
+        setFirstLogoPromptFetchError,
+        setEnhancePromptFetchError,
+        setLogoFetchError,
+        setSaveToLibraryError,
+        setLogoUpdateError,
+        clearErrors,
+        featureFetchError,
+        firstLogoPromptFetchError,
+        enhancePromptFetchError,
+        logoFetchError,
+        saveToLibraryError,
+        logoUpdateError,
+    };
+};
+export default useRequestErrors;

package/build/logo-generator/index.d.ts

@@ -0,0 +1 @@
+export * from './components/generator-modal.js';

package/build/logo-generator/index.js

@@ -0,0 +1 @@
+export * from './components/generator-modal.js';

package/build/logo-generator/lib/logo-storage.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Types
+ */
+import { Logo } from '../store/types.js';
+import { RemoveFromStorageProps, SaveToStorageProps, UpdateInStorageProps } from '../types.js';
+/**
+ * Add an entry to the site's logo history.
+ *
+ * @param {SaveToStorageProps} saveToStorageProps - The properties to save to storage
+ * @param {SaveToStorageProps.siteId} saveToStorageProps.siteId - The site ID
+ * @param {SaveToStorageProps.url} saveToStorageProps.url - The URL of the logo
+ * @param {SaveToStorageProps.description} saveToStorageProps.description - The description of the logo, based on the prompt used to generate it
+ * @param {SaveToStorageProps.mediaId} saveToStorageProps.mediaId - The media ID of the logo on the backend
+ *
+ * @returns {Logo} The logo that was saved
+ */
+export declare function stashLogo({ siteId, url, description, mediaId }: SaveToStorageProps): Logo;
+/**
+ * Update an entry in the site's logo history.
+ *
+ * @param {UpdateInStorageProps} updateInStorageProps - The properties to update in storage
+ * @param {UpdateInStorageProps.siteId} updateInStorageProps.siteId - The site ID
+ * @param {UpdateInStorageProps.url} updateInStorageProps.url - The URL of the logo to update
+ * @param {UpdateInStorageProps.newUrl} updateInStorageProps.newUrl - The new URL of the logo
+ * @param {UpdateInStorageProps.mediaId} updateInStorageProps.mediaId - The new media ID of the logo
+ * @returns {Logo} The logo that was updated
+ */
+export declare function updateLogo({ siteId, url, newUrl, mediaId }: UpdateInStorageProps): Logo;
+/**
+ * Get the logo history for a site.
+ *
+ * @param {string} siteId - The site ID to get the logo history for
+ * @returns {Logo[]} The logo history for the site
+ */
+export declare function getSiteLogoHistory(siteId: string): Logo[];
+/**
+ * Check if the logo history for a site is empty.
+ *
+ * @param {string }siteId - The site ID to check the logo history for
+ * @returns {boolean} Whether the logo history for the site is empty
+ */
+export declare function isLogoHistoryEmpty(siteId: string): boolean;
+/**
+ * Remove an entry from the site's logo history.
+ *
+ * @param {RemoveFromStorageProps} removeFromStorageProps - The properties to remove from storage
+ * @param {RemoveFromStorageProps.siteId} removeFromStorageProps.siteId - The site ID
+ * @param {RemoveFromStorageProps.mediaId} removeFromStorageProps.mediaId - The media ID of the logo to remove
+ * @returns {void}
+ */
+export declare function removeLogo({ siteId, mediaId }: RemoveFromStorageProps): void;
+/**
+ * Clear deleted media from the site's logo history, checking if the media still exists on the backend.
+ *
+ * @param {string} siteId - The site ID to clear deleted media for
+ * @returns {Promise<void>}
+ */
+export declare function clearDeletedMedia(siteId: string): Promise<void>;

package/build/logo-generator/lib/logo-storage.js

@@ -0,0 +1,123 @@
+import { mediaExists } from './media-exists.js';
+const MAX_LOGOS = 10;
+/**
+ * Add an entry to the site's logo history.
+ *
+ * @param {SaveToStorageProps} saveToStorageProps - The properties to save to storage
+ * @param {SaveToStorageProps.siteId} saveToStorageProps.siteId - The site ID
+ * @param {SaveToStorageProps.url} saveToStorageProps.url - The URL of the logo
+ * @param {SaveToStorageProps.description} saveToStorageProps.description - The description of the logo, based on the prompt used to generate it
+ * @param {SaveToStorageProps.mediaId} saveToStorageProps.mediaId - The media ID of the logo on the backend
+ *
+ * @returns {Logo} The logo that was saved
+ */
+export function stashLogo({ siteId, url, description, mediaId }) {
+    const storedContent = getSiteLogoHistory(siteId);
+    const logo = {
+        url,
+        description,
+        mediaId,
+    };
+    storedContent.push(logo);
+    localStorage.setItem(`logo-history-${siteId}`, JSON.stringify(storedContent.slice(-MAX_LOGOS)));
+    return logo;
+}
+/**
+ * Update an entry in the site's logo history.
+ *
+ * @param {UpdateInStorageProps} updateInStorageProps - The properties to update in storage
+ * @param {UpdateInStorageProps.siteId} updateInStorageProps.siteId - The site ID
+ * @param {UpdateInStorageProps.url} updateInStorageProps.url - The URL of the logo to update
+ * @param {UpdateInStorageProps.newUrl} updateInStorageProps.newUrl - The new URL of the logo
+ * @param {UpdateInStorageProps.mediaId} updateInStorageProps.mediaId - The new media ID of the logo
+ * @returns {Logo} The logo that was updated
+ */
+export function updateLogo({ siteId, url, newUrl, mediaId }) {
+    const storedContent = getSiteLogoHistory(siteId);
+    const index = storedContent.findIndex(logo => logo.url === url);
+    if (index > -1) {
+        storedContent[index].url = newUrl;
+        storedContent[index].mediaId = mediaId;
+    }
+    localStorage.setItem(`logo-history-${siteId}`, JSON.stringify(storedContent.slice(-MAX_LOGOS)));
+    return storedContent[index];
+}
+/**
+ * Get the logo history for a site.
+ *
+ * @param {string} siteId - The site ID to get the logo history for
+ * @returns {Logo[]} The logo history for the site
+ */
+export function getSiteLogoHistory(siteId) {
+    const storedString = localStorage.getItem(`logo-history-${siteId}`);
+    let storedContent = storedString ? JSON.parse(storedString) : [];
+    // Ensure that the stored content is an array
+    if (!Array.isArray(storedContent)) {
+        storedContent = [];
+    }
+    // Ensure a maximum of 10 logos are stored
+    storedContent = storedContent.slice(-MAX_LOGOS);
+    // Ensure that the stored content is an array of Logo objects
+    storedContent = storedContent
+        .filter(logo => {
+        return (typeof logo === 'object' &&
+            typeof logo.url === 'string' &&
+            typeof logo.description === 'string');
+    })
+        .map(logo => ({
+        url: logo.url,
+        description: logo.description,
+        mediaId: logo.mediaId,
+    }));
+    return storedContent;
+}
+/**
+ * Check if the logo history for a site is empty.
+ *
+ * @param {string }siteId - The site ID to check the logo history for
+ * @returns {boolean} Whether the logo history for the site is empty
+ */
+export function isLogoHistoryEmpty(siteId) {
+    const storedContent = getSiteLogoHistory(siteId);
+    return storedContent.length === 0;
+}
+/**
+ * Remove an entry from the site's logo history.
+ *
+ * @param {RemoveFromStorageProps} removeFromStorageProps - The properties to remove from storage
+ * @param {RemoveFromStorageProps.siteId} removeFromStorageProps.siteId - The site ID
+ * @param {RemoveFromStorageProps.mediaId} removeFromStorageProps.mediaId - The media ID of the logo to remove
+ * @returns {void}
+ */
+export function removeLogo({ siteId, mediaId }) {
+    const storedContent = getSiteLogoHistory(siteId);
+    const index = storedContent.findIndex(logo => logo.mediaId === mediaId);
+    if (index === -1) {
+        return;
+    }
+    storedContent.splice(index, 1);
+    localStorage.setItem(`logo-history-${siteId}`, JSON.stringify(storedContent));
+}
+/**
+ * Clear deleted media from the site's logo history, checking if the media still exists on the backend.
+ *
+ * @param {string} siteId - The site ID to clear deleted media for
+ * @returns {Promise<void>}
+ */
+export async function clearDeletedMedia(siteId) {
+    const storedContent = getSiteLogoHistory(siteId);
+    const checks = storedContent
+        .filter(({ mediaId }) => mediaId !== undefined)
+        .map(({ mediaId }) => new Promise((resolve, reject) => {
+        mediaExists({ siteId, mediaId })
+            .then(exists => resolve({ mediaId, exists }))
+            .catch(error => reject(error));
+    }));
+    try {
+        const responses = (await Promise.all(checks));
+        responses
+            .filter(({ exists }) => !exists)
+            .forEach(({ mediaId }) => removeLogo({ siteId, mediaId }));
+    }
+    catch (error) { } // Assume that the media exists if there was a network error and do nothing to avoid data loss.
+}

package/build/logo-generator/lib/media-exists.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Types
+ */
+import type { CheckMediaProps } from '../types.js';
+/**
+ * Uses the media information to confirm it exists or not on the server.
+ *
+ * @param {CheckMediaProps} checkMediaProps - the media details to check
+ * @param {CheckMediaProps.mediaId} checkMediaProps.mediaId - the id of the media to check
+ * @returns {Promise<boolean>} - true if the media exists, false otherwise
+ */
+export declare function mediaExists({ mediaId }: CheckMediaProps): Promise<boolean>;

package/build/logo-generator/lib/media-exists.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import apiFetch from '../../api-fetch/index.js';
+/**
+ * Uses the media information to confirm it exists or not on the server.
+ *
+ * @param {CheckMediaProps} checkMediaProps - the media details to check
+ * @param {CheckMediaProps.mediaId} checkMediaProps.mediaId - the id of the media to check
+ * @returns {Promise<boolean>} - true if the media exists, false otherwise
+ */
+export async function mediaExists({ mediaId }) {
+    const id = Number(mediaId);
+    if (Number.isNaN(id)) {
+        return false;
+    }
+    try {
+        // Using apiFetch directly here because we don't want to limit the number of concurrent media checks
+        // We store at most 10 logos in the local storage, so the number of concurrent requests should be limited
+        await apiFetch({
+            path: `/wp/v2/media/${Number(mediaId)}`,
+            method: 'GET',
+        });
+        return true;
+    }
+    catch (error) {
+        const status = error?.data?.status;
+        if (status === 404) {
+            return false;
+        }
+        throw error;
+    }
+}

package/build/logo-generator/lib/set-site-logo.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Types
+ */
+import type { SetSiteLogoProps, SetSiteLogoResponseProps } from '../types.js';
+/**
+ * Set the site logo using a backend request.
+ *
+ * @param {SetSiteLogoProps} setSiteLogoProps - The properties to set the site logo
+ * @param {SetSiteLogoProps.siteId} setSiteLogoProps.siteId - The site ID
+ * @param {SetSiteLogoProps.imageId} setSiteLogoProps.imageId - The image ID to set as the site logo
+ * @returns {Promise<SetSiteLogoResponseProps>} The response from the request
+ */
+export declare function setSiteLogo({ siteId, imageId }: SetSiteLogoProps): Promise<SetSiteLogoResponseProps>;

package/build/logo-generator/lib/set-site-logo.js

@@ -0,0 +1,26 @@
+/**
+ * Internal dependencies
+ */
+import wpcomLimitedRequest from './wpcom-limited-request.js';
+/**
+ * Set the site logo using a backend request.
+ *
+ * @param {SetSiteLogoProps} setSiteLogoProps - The properties to set the site logo
+ * @param {SetSiteLogoProps.siteId} setSiteLogoProps.siteId - The site ID
+ * @param {SetSiteLogoProps.imageId} setSiteLogoProps.imageId - The image ID to set as the site logo
+ * @returns {Promise<SetSiteLogoResponseProps>} The response from the request
+ */
+export async function setSiteLogo({ siteId, imageId }) {
+    const body = {
+        site_logo: imageId,
+        site_icon: imageId,
+    };
+    return wpcomLimitedRequest({
+        path: `/sites/${String(siteId)}/settings`,
+        apiVersion: 'v2',
+        apiNamespace: 'wp/v2',
+        body,
+        query: 'source=jetpack-ai',
+        method: 'POST',
+    });
+}

package/build/logo-generator/lib/wpcom-limited-request.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Concurrency-limited request to wpcom-proxy-request.
+ * @param { object } params - The request params, as expected by apiFetch.
+ * @returns { Promise }                   The response.
+ * @throws { Error }                      If there are too many concurrent requests.
+ */
+export default function wpcomLimitedRequest<T>(params: object): Promise<T>;

package/build/logo-generator/lib/wpcom-limited-request.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import apiFetch from '../../api-fetch/index.js';
+/**
+ * Types
+ */
+const MAX_CONCURRENT_REQUESTS = 5;
+let concurrentCounter = 0;
+let lastCallTimestamp = null;
+/**
+ * Concurrency-limited request to wpcom-proxy-request.
+ * @param { object } params - The request params, as expected by apiFetch.
+ * @returns { Promise }                   The response.
+ * @throws { Error }                      If there are too many concurrent requests.
+ */
+export default async function wpcomLimitedRequest(params) {
+    concurrentCounter += 1;
+    if (concurrentCounter > MAX_CONCURRENT_REQUESTS) {
+        concurrentCounter -= 1;
+        throw new Error('Too many requests');
+    }
+    const now = Date.now();
+    // Check if the last call was made less than 100 milliseconds ago
+    if (lastCallTimestamp && now - lastCallTimestamp < 100) {
+        concurrentCounter -= 1;
+        throw new Error('Too many requests');
+    }
+    lastCallTimestamp = now; // Update the timestamp
+    return apiFetch(params).finally(() => {
+        concurrentCounter -= 1;
+    });
+}