@automattic/jetpack-ai-client 0.14.6 → 0.16.0

package/src/logo-generator/lib/logo-storage.ts

@@ -0,0 +1,166 @@
+/**
+ * Types
+ */
+import { Logo } from '../store/types.js';
+import { RemoveFromStorageProps, SaveToStorageProps, UpdateInStorageProps } from '../types.js';
+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 }: SaveToStorageProps ) {
+	const storedContent = getSiteLogoHistory( siteId );
+
+	const logo: 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 }: UpdateInStorageProps ) {
+	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: string ) {
+	const storedString = localStorage.getItem( `logo-history-${ siteId }` );
+	let storedContent: Logo[] = 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: string ) {
+	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 }: RemoveFromStorageProps ) {
+	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: string ) {
+	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 ) ) as {
+			mediaId: Logo[ 'mediaId' ];
+			exists: boolean;
+		}[];
+
+		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/src/logo-generator/lib/media-exists.ts

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import apiFetch from '../../api-fetch/index.js';
+/**
+ * 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 async function mediaExists( { mediaId }: CheckMediaProps ): Promise< boolean > {
+	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 as { data?: { status?: number } } )?.data?.status;
+
+		if ( status === 404 ) {
+			return false;
+		}
+
+		throw error;
+	}
+}

package/src/logo-generator/lib/set-site-logo.ts

@@ -0,0 +1,32 @@
+/**
+ * Internal dependencies
+ */
+import wpcomLimitedRequest from './wpcom-limited-request.js';
+/**
+ * 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 async function setSiteLogo( { siteId, imageId }: SetSiteLogoProps ) {
+	const body = {
+		site_logo: imageId,
+		site_icon: imageId,
+	};
+
+	return wpcomLimitedRequest< SetSiteLogoResponseProps >( {
+		path: `/sites/${ String( siteId ) }/settings`,
+		apiVersion: 'v2',
+		apiNamespace: 'wp/v2',
+		body,
+		query: 'source=jetpack-ai',
+		method: 'POST',
+	} );
+}

package/src/logo-generator/lib/wpcom-limited-request.ts

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import apiFetch from '../../api-fetch/index.js';
+/**
+ * Types
+ */
+
+const MAX_CONCURRENT_REQUESTS = 5;
+
+let concurrentCounter = 0;
+
+/**
+ * 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< T >( params: object ): Promise< T > {
+	concurrentCounter += 1;
+
+	if ( concurrentCounter > MAX_CONCURRENT_REQUESTS ) {
+		concurrentCounter -= 1;
+		throw new Error( 'Too many requests' );
+	}
+
+	return apiFetch< T >( params ).finally( () => {
+		concurrentCounter -= 1;
+	} );
+}

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

@@ -0,0 +1,251 @@
+/**
+ * Internal dependencies
+ */
+import { getSiteLogoHistory } from '../lib/logo-storage.js';
+import wpcomLimitedRequest from '../lib/wpcom-limited-request.js';
+/**
+ * Types & Constants
+ */
+import {
+	ACTION_INCREASE_AI_ASSISTANT_REQUESTS_COUNT,
+	ACTION_REQUEST_AI_ASSISTANT_FEATURE,
+	ACTION_SET_AI_ASSISTANT_FEATURE_REQUIRE_UPGRADE,
+	ACTION_SET_SITE_DETAILS,
+	ACTION_STORE_AI_ASSISTANT_FEATURE,
+	ACTION_SET_TIER_PLANS_ENABLED,
+	ACTION_SET_SELECTED_LOGO_INDEX,
+	ACTION_ADD_LOGO_TO_HISTORY,
+	ACTION_SET_IS_SAVING_LOGO_TO_LIBRARY,
+	ACTION_SAVE_SELECTED_LOGO,
+	ACTION_SET_IS_REQUESTING_IMAGE,
+	ACTION_SET_IS_APPLYING_LOGO,
+	ACTION_SET_IS_ENHANCING_PROMPT,
+	ACTION_SET_SITE_HISTORY,
+	ACTION_SET_FEATURE_FETCH_ERROR,
+	ACTION_SET_FIRST_LOGO_PROMPT_FETCH_ERROR,
+	ACTION_SET_ENHANCE_PROMPT_FETCH_ERROR,
+	ACTION_SET_LOGO_FETCH_ERROR,
+	ACTION_SET_LOGO_UPDATE_ERROR,
+	ACTION_SET_SAVE_TO_LIBRARY_ERROR,
+	ACTION_SET_CONTEXT,
+} from './constants.js';
+import type {
+	AiFeatureProps,
+	AiAssistantFeatureEndpointResponseProps,
+	Logo,
+	RequestError,
+} from './types.js';
+import type { SiteDetails } from '../types.js';
+
+/**
+ * Map the response from the `sites/$site/ai-assistant-feature`
+ * endpoint to the AI Assistant feature props.
+ * @param { AiAssistantFeatureEndpointResponseProps } response - The response from the endpoint.
+ * @returns { AiFeatureProps }                                       The AI Assistant feature props.
+ */
+export function mapAiFeatureResponseToAiFeatureProps(
+	response: AiAssistantFeatureEndpointResponseProps
+): AiFeatureProps {
+	return {
+		hasFeature: !! response[ 'has-feature' ],
+		isOverLimit: !! response[ 'is-over-limit' ],
+		requestsCount: response[ 'requests-count' ],
+		requestsLimit: response[ 'requests-limit' ],
+		requireUpgrade: !! response[ 'site-require-upgrade' ],
+		errorMessage: response[ 'error-message' ],
+		errorCode: response[ 'error-code' ],
+		upgradeType: response[ 'upgrade-type' ],
+		usagePeriod: {
+			currentStart: response[ 'usage-period' ]?.[ 'current-start' ],
+			nextStart: response[ 'usage-period' ]?.[ 'next-start' ],
+			requestsCount: response[ 'usage-period' ]?.[ 'requests-count' ] || 0,
+		},
+		currentTier: response[ 'current-tier' ],
+		nextTier: response[ 'next-tier' ],
+		tierPlansEnabled: !! response[ 'tier-plans-enabled' ],
+		costs: response.costs,
+	};
+}
+
+const actions = {
+	storeAiAssistantFeature( feature: AiFeatureProps ) {
+		return {
+			type: ACTION_STORE_AI_ASSISTANT_FEATURE,
+			feature,
+		};
+	},
+
+	/**
+	 * Thunk action to fetch the AI Assistant feature from the API.
+	 * @returns {Function} The thunk action.
+	 */
+	fetchAiAssistantFeature() {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		return async ( { dispatch }: { dispatch: any } ) => {
+			// Dispatch isFetching action.
+			dispatch( { type: ACTION_REQUEST_AI_ASSISTANT_FEATURE } );
+
+			try {
+				const response: AiAssistantFeatureEndpointResponseProps = await wpcomLimitedRequest( {
+					path: '/wpcom/v2/jetpack-ai/ai-assistant-feature',
+					query: 'force=wpcom',
+				} );
+
+				// Store the feature in the store.
+				dispatch(
+					actions.storeAiAssistantFeature( mapAiFeatureResponseToAiFeatureProps( response ) )
+				);
+			} catch ( err ) {
+				// Mark the fetch as failed.
+				dispatch( { type: ACTION_SET_FEATURE_FETCH_ERROR, error: err } );
+			}
+		};
+	},
+
+	/**
+	 * This thunk action is used to increase
+	 * the requests count for the current usage period.
+	 * @param {number} count - The number of requests to increase. Default is 1.
+	 * @returns {Function}     The thunk action.
+	 */
+	increaseAiAssistantRequestsCount( count: number = 1 ) {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		return ( { dispatch }: { dispatch: any } ) => {
+			dispatch( {
+				type: ACTION_INCREASE_AI_ASSISTANT_REQUESTS_COUNT,
+				count,
+			} );
+		};
+	},
+
+	setAiAssistantFeatureRequireUpgrade( requireUpgrade: boolean = true ) {
+		return {
+			type: ACTION_SET_AI_ASSISTANT_FEATURE_REQUIRE_UPGRADE,
+			requireUpgrade,
+		};
+	},
+
+	setTierPlansEnabled( tierPlansEnabled: boolean = true ) {
+		return {
+			type: ACTION_SET_TIER_PLANS_ENABLED,
+			tierPlansEnabled,
+		};
+	},
+
+	setSiteDetails( siteDetails: SiteDetails ) {
+		return {
+			type: ACTION_SET_SITE_DETAILS,
+			siteDetails,
+		};
+	},
+
+	setSelectedLogoIndex( selectedLogoIndex: number ) {
+		return {
+			type: ACTION_SET_SELECTED_LOGO_INDEX,
+			selectedLogoIndex,
+		};
+	},
+
+	addLogoToHistory( logo: Logo ) {
+		return {
+			type: ACTION_ADD_LOGO_TO_HISTORY,
+			logo,
+		};
+	},
+
+	setIsSavingLogoToLibrary( isSavingLogoToLibrary: boolean ) {
+		return {
+			type: ACTION_SET_IS_SAVING_LOGO_TO_LIBRARY,
+			isSavingLogoToLibrary,
+		};
+	},
+
+	setIsApplyingLogo( isApplyingLogo: boolean ) {
+		return {
+			type: ACTION_SET_IS_APPLYING_LOGO,
+			isApplyingLogo,
+		};
+	},
+
+	updateSelectedLogo( mediaId: string, url: string ) {
+		return {
+			type: ACTION_SAVE_SELECTED_LOGO,
+			mediaId,
+			url,
+		};
+	},
+
+	setIsRequestingImage( isRequestingImage: boolean ) {
+		return {
+			type: ACTION_SET_IS_REQUESTING_IMAGE,
+			isRequestingImage,
+		};
+	},
+
+	setIsEnhancingPrompt( isEnhancingPrompt: boolean ) {
+		return {
+			type: ACTION_SET_IS_ENHANCING_PROMPT,
+			isEnhancingPrompt,
+		};
+	},
+
+	loadLogoHistory( siteId: string ) {
+		const history = getSiteLogoHistory( siteId );
+
+		return {
+			type: ACTION_SET_SITE_HISTORY,
+			history,
+		};
+	},
+
+	setFeatureFetchError( error: RequestError ) {
+		return {
+			type: ACTION_SET_FEATURE_FETCH_ERROR,
+			error,
+		};
+	},
+
+	setFirstLogoPromptFetchError( error: RequestError ) {
+		return {
+			type: ACTION_SET_FIRST_LOGO_PROMPT_FETCH_ERROR,
+			error,
+		};
+	},
+
+	setEnhancePromptFetchError( error: RequestError ) {
+		return {
+			type: ACTION_SET_ENHANCE_PROMPT_FETCH_ERROR,
+			error,
+		};
+	},
+
+	setLogoFetchError( error: RequestError ) {
+		return {
+			type: ACTION_SET_LOGO_FETCH_ERROR,
+			error,
+		};
+	},
+
+	setSaveToLibraryError( error: RequestError ) {
+		return {
+			type: ACTION_SET_SAVE_TO_LIBRARY_ERROR,
+			error,
+		};
+	},
+
+	setLogoUpdateError( error: RequestError ) {
+		return {
+			type: ACTION_SET_LOGO_UPDATE_ERROR,
+			error,
+		};
+	},
+
+	setContext( context: string ) {
+		return {
+			type: ACTION_SET_CONTEXT,
+			context,
+		};
+	},
+};
+
+export default actions;

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

@@ -0,0 +1,49 @@
+/**
+ * AI Assistant feature actions
+ */
+export const ACTION_STORE_AI_ASSISTANT_FEATURE = 'STORE_AI_ASSISTANT_FEATURE';
+export const ACTION_REQUEST_AI_ASSISTANT_FEATURE = 'REQUEST_AI_ASSISTANT_FEATURE';
+export const ACTION_INCREASE_AI_ASSISTANT_REQUESTS_COUNT = 'INCREASE_AI_ASSISTANT_REQUESTS_COUNT';
+export const ACTION_SET_AI_ASSISTANT_FEATURE_REQUIRE_UPGRADE =
+	'SET_AI_ASSISTANT_FEATURE_REQUIRE_UPGRADE';
+export const ACTION_SET_TIER_PLANS_ENABLED = 'SET_TIER_PLANS_ENABLED';
+export const ACTION_SET_SITE_DETAILS = 'SET_SITE_DETAILS';
+
+/**
+ * Endpoints
+ */
+export const ENDPOINT_AI_ASSISTANT_FEATURE = '/wpcom/v2/jetpack-ai/ai-assistant-feature';
+
+/**
+ * New AI Assistant feature async request
+ */
+export const FREE_PLAN_REQUESTS_LIMIT = 20;
+export const UNLIMITED_PLAN_REQUESTS_LIMIT = 999999999;
+export const ASYNC_REQUEST_COUNTDOWN_INIT_VALUE = 3;
+export const NEW_ASYNC_REQUEST_TIMER_INTERVAL = 5000;
+export const ACTION_DECREASE_NEW_ASYNC_REQUEST_COUNTDOWN = 'DECREASE_NEW_ASYNC_REQUEST_COUNTDOWN';
+export const ACTION_ENQUEUE_ASYNC_REQUEST = 'ENQUEUE_ASYNC_COUNTDOWN_REQUEST';
+export const ACTION_DEQUEUE_ASYNC_REQUEST = 'DEQUEUE_ASYNC_COUNTDOWN_REQUEST';
+
+/**
+ * Logo generator actions
+ */
+export const ACTION_SET_CONTEXT = 'SET_CONTEXT';
+export const ACTION_SET_SELECTED_LOGO_INDEX = 'SET_SELECTED_LOGO_INDEX';
+export const ACTION_ADD_LOGO_TO_HISTORY = 'ADD_LOGO_TO_HISTORY';
+export const ACTION_SET_IS_SAVING_LOGO_TO_LIBRARY = 'SET_IS_SAVING_LOGO_TO_LIBRARY';
+export const ACTION_SET_IS_APPLYING_LOGO = 'SET_IS_APPLYING_LOGO';
+export const ACTION_SAVE_SELECTED_LOGO = 'SAVE_SELECTED_LOGO';
+export const ACTION_SET_IS_REQUESTING_IMAGE = 'SET_IS_REQUESTING_IMAGE';
+export const ACTION_SET_IS_ENHANCING_PROMPT = 'SET_IS_ENHANCING_PROMPT';
+export const ACTION_SET_SITE_HISTORY = 'SET_SITE_HISTORY';
+
+/**
+ * Logo generator error actions
+ */
+export const ACTION_SET_FEATURE_FETCH_ERROR = 'SET_FEATURE_FETCH_ERROR';
+export const ACTION_SET_FIRST_LOGO_PROMPT_FETCH_ERROR = 'SET_FIRST_LOGO_PROMPT_FETCH_ERROR';
+export const ACTION_SET_ENHANCE_PROMPT_FETCH_ERROR = 'SET_ENHANCE_PROMPT_FETCH_ERROR';
+export const ACTION_SET_LOGO_FETCH_ERROR = 'SET_LOGO_FETCH_ERROR';
+export const ACTION_SET_SAVE_TO_LIBRARY_ERROR = 'SET_SAVE_TO_LIBRARY_ERROR';
+export const ACTION_SET_LOGO_UPDATE_ERROR = 'SET_LOGO_UPDATE_ERROR';

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

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { createReduxStore, register } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+import actions from './actions.js';
+import reducer from './reducer.js';
+import selectors from './selectors.js';
+
+export const STORE_NAME = 'jetpack-ai/logo-generator';
+
+const jetpackAiLogoGeneratorStore = createReduxStore( STORE_NAME, {
+	// @ts-expect-error -- TSCONVERSION
+	__experimentalUseThunks: true,
+
+	actions,
+
+	reducer,
+
+	selectors,
+} );
+
+register( jetpackAiLogoGeneratorStore );

package/src/logo-generator/store/initial-state.ts

@@ -0,0 +1,43 @@
+/**
+ * Types & Constants
+ */
+import { ASYNC_REQUEST_COUNTDOWN_INIT_VALUE, FREE_PLAN_REQUESTS_LIMIT } from './constants.js';
+import { LogoGeneratorStateProp } from './types.js';
+
+const INITIAL_STATE: LogoGeneratorStateProp = {
+	siteDetails: {},
+	features: {
+		aiAssistantFeature: {
+			hasFeature: true,
+			isOverLimit: false,
+			requestsCount: 0,
+			requestsLimit: FREE_PLAN_REQUESTS_LIMIT,
+			requireUpgrade: false,
+			errorMessage: '',
+			errorCode: '',
+			upgradeType: 'default',
+			currentTier: {
+				slug: 'ai-assistant-tier-free',
+				value: 0,
+				limit: 20,
+			},
+			usagePeriod: {
+				currentStart: '',
+				nextStart: '',
+				requestsCount: 0,
+			},
+			nextTier: null,
+			tierPlansEnabled: false,
+			_meta: {
+				isRequesting: false,
+				asyncRequestCountdown: ASYNC_REQUEST_COUNTDOWN_INIT_VALUE,
+				asyncRequestTimerId: 0,
+				isRequestingImage: false,
+			},
+		},
+	},
+	history: [],
+	selectedLogoIndex: 0,
+};
+
+export default INITIAL_STATE;