@automattic/jetpack-ai-client 0.25.2 → 0.25.4

package/src/constants.ts

@@ -0,0 +1,116 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+// Mappings
+export const LANGUAGE_MAP = {
+	en: {
+		label: __( 'English', 'jetpack-ai-client' ),
+	},
+	es: {
+		label: __( 'Spanish', 'jetpack-ai-client' ),
+	},
+	fr: {
+		label: __( 'French', 'jetpack-ai-client' ),
+	},
+	de: {
+		label: __( 'German', 'jetpack-ai-client' ),
+	},
+	it: {
+		label: __( 'Italian', 'jetpack-ai-client' ),
+	},
+	pt: {
+		label: __( 'Portuguese', 'jetpack-ai-client' ),
+	},
+	ru: {
+		label: __( 'Russian', 'jetpack-ai-client' ),
+	},
+	zh: {
+		label: __( 'Chinese', 'jetpack-ai-client' ),
+	},
+	ja: {
+		label: __( 'Japanese', 'jetpack-ai-client' ),
+	},
+	ar: {
+		label: __( 'Arabic', 'jetpack-ai-client' ),
+	},
+	hi: {
+		label: __( 'Hindi', 'jetpack-ai-client' ),
+	},
+	ko: {
+		label: __( 'Korean', 'jetpack-ai-client' ),
+	},
+};
+export const PROMPT_TONES_MAP = {
+	formal: {
+		label: __( 'Formal', 'jetpack-ai-client' ),
+		emoji: '🎩',
+	},
+	informal: {
+		label: __( 'Informal', 'jetpack-ai-client' ),
+		emoji: '😊',
+	},
+	optimistic: {
+		label: __( 'Optimistic', 'jetpack-ai-client' ),
+		emoji: '😃',
+	},
+	humorous: {
+		label: __( 'Humorous', 'jetpack-ai-client' ),
+		emoji: '😂',
+	},
+	serious: {
+		label: __( 'Serious', 'jetpack-ai-client' ),
+		emoji: '😐',
+	},
+	skeptical: {
+		label: __( 'Skeptical', 'jetpack-ai-client' ),
+		emoji: '🤨',
+	},
+	empathetic: {
+		label: __( 'Empathetic', 'jetpack-ai-client' ),
+		emoji: '💗',
+	},
+	confident: {
+		label: __( 'Confident', 'jetpack-ai-client' ),
+		emoji: '😎',
+	},
+	passionate: {
+		label: __( 'Passionate', 'jetpack-ai-client' ),
+		emoji: '❤️',
+	},
+	provocative: {
+		label: __( 'Provocative', 'jetpack-ai-client' ),
+		emoji: '🔥',
+	},
+};
+
+// Prompt types
+export const PROMPT_TYPE_SUMMARY_BY_TITLE = 'titleSummary' as const;
+export const PROMPT_TYPE_CONTINUE = 'continue' as const;
+export const PROMPT_TYPE_SIMPLIFY = 'simplify' as const;
+export const PROMPT_TYPE_CORRECT_SPELLING = 'correctSpelling' as const;
+export const PROMPT_TYPE_GENERATE_TITLE = 'generateTitle' as const;
+export const PROMPT_TYPE_MAKE_LONGER = 'makeLonger' as const;
+export const PROMPT_TYPE_MAKE_SHORTER = 'makeShorter' as const;
+export const PROMPT_TYPE_CHANGE_TONE = 'changeTone' as const;
+export const PROMPT_TYPE_SUMMARIZE = 'summarize' as const;
+export const PROMPT_TYPE_CHANGE_LANGUAGE = 'changeLanguage' as const;
+export const PROMPT_TYPE_USER_PROMPT = 'userPrompt' as const;
+export const PROMPT_TYPE_JETPACK_FORM_CUSTOM_PROMPT = 'jetpackFormCustomPrompt' as const;
+export const PROMPT_TYPE_TRANSFORM_LIST_TO_TABLE = 'transformListToTable' as const;
+export const PROMPT_TYPE_WRITE_POST_FROM_LIST = 'writePostFromList' as const;
+
+// Human-readable labels
+export const TRANSLATE_LABEL = __( 'Translate', 'jetpack-ai-client' );
+export const TONE_LABEL = __( 'Change tone', 'jetpack-ai-client' );
+export const CORRECT_SPELLING_LABEL = __( 'Correct spelling and grammar', 'jetpack-ai-client' );
+export const SIMPLIFY_LABEL = __( 'Simplify', 'jetpack-ai-client' );
+export const SUMMARIZE_LABEL = __( 'Summarize', 'jetpack-ai-client' );
+export const MAKE_SHORTER_LABEL = __( 'Make shorter', 'jetpack-ai-client' );
+export const MAKE_LONGER_LABEL = __( 'Expand', 'jetpack-ai-client' );
+export const TURN_LIST_INTO_TABLE_LABEL = __( 'Turn list into a table', 'jetpack-ai-client' );
+export const WRITE_POST_FROM_LIST_LABEL = __( 'Write a post from this list', 'jetpack-ai-client' );
+export const GENERATE_TITLE_LABEL = __( 'Generate a post title', 'jetpack-ai-client' );
+export const SUMMARY_BASED_ON_TITLE_LABEL = __( 'Summary based on title', 'jetpack-ai-client' );
+export const CONTINUE_LABEL = __( 'Continue writing', 'jetpack-ai-client' );

package/src/index.ts

@@ -43,6 +43,11 @@ export * from './types.js';
  */
 export * from './libs/index.js';
 
+/*
+ * Constants
+ */
+export * from './constants.js';
+
 /*
  * Logo Generator
  */

package/src/libs/index.ts

@@ -7,3 +7,5 @@ export {
 } from './markdown/index.js';
 
 export type { RenderHTMLRules } from './markdown/index.js';
+
+export { mapActionToHumanText } from './map-action-to-human-text.js';

package/src/libs/map-action-to-human-text.ts

@@ -0,0 +1,77 @@
+import {
+	LANGUAGE_MAP,
+	PROMPT_TONES_MAP,
+	PROMPT_TYPE_CHANGE_LANGUAGE,
+	PROMPT_TYPE_CHANGE_TONE,
+	PROMPT_TYPE_CONTINUE,
+	PROMPT_TYPE_CORRECT_SPELLING,
+	PROMPT_TYPE_GENERATE_TITLE,
+	PROMPT_TYPE_MAKE_LONGER,
+	PROMPT_TYPE_MAKE_SHORTER,
+	PROMPT_TYPE_SIMPLIFY,
+	PROMPT_TYPE_SUMMARIZE,
+	PROMPT_TYPE_SUMMARY_BY_TITLE,
+	PROMPT_TYPE_TRANSFORM_LIST_TO_TABLE,
+	PROMPT_TYPE_WRITE_POST_FROM_LIST,
+	CONTINUE_LABEL,
+	CORRECT_SPELLING_LABEL,
+	GENERATE_TITLE_LABEL,
+	MAKE_LONGER_LABEL,
+	MAKE_SHORTER_LABEL,
+	SIMPLIFY_LABEL,
+	SUMMARIZE_LABEL,
+	SUMMARY_BASED_ON_TITLE_LABEL,
+	TONE_LABEL,
+	TRANSLATE_LABEL,
+	TURN_LIST_INTO_TABLE_LABEL,
+	WRITE_POST_FROM_LIST_LABEL,
+} from '../constants.js';
+
+type MapActionToHumanTextOptions = {
+	language?: string;
+	tone?: string;
+};
+
+/**
+ * Maps an action to a human-readable text.
+ *
+ * @param  action  - The action to map.
+ * @param  options - The options for the mapping.
+ * @return {string} The human-readable text.
+ */
+export function mapActionToHumanText(
+	action: string,
+	options: MapActionToHumanTextOptions = {}
+): string | null {
+	const { language, tone } = options;
+	const languageCode = language?.split( ' (' )[ 0 ];
+
+	switch ( action ) {
+		case PROMPT_TYPE_CHANGE_LANGUAGE:
+			return `${ TRANSLATE_LABEL }: ${ LANGUAGE_MAP[ languageCode ].label }`;
+		case PROMPT_TYPE_CHANGE_TONE:
+			return `${ TONE_LABEL }: ${ PROMPT_TONES_MAP[ tone ].label }`;
+		case PROMPT_TYPE_CORRECT_SPELLING:
+			return CORRECT_SPELLING_LABEL;
+		case PROMPT_TYPE_SIMPLIFY:
+			return SIMPLIFY_LABEL;
+		case PROMPT_TYPE_SUMMARIZE:
+			return SUMMARIZE_LABEL;
+		case PROMPT_TYPE_MAKE_LONGER:
+			return MAKE_LONGER_LABEL;
+		case PROMPT_TYPE_MAKE_SHORTER:
+			return MAKE_SHORTER_LABEL;
+		case PROMPT_TYPE_TRANSFORM_LIST_TO_TABLE:
+			return TURN_LIST_INTO_TABLE_LABEL;
+		case PROMPT_TYPE_WRITE_POST_FROM_LIST:
+			return WRITE_POST_FROM_LIST_LABEL;
+		case PROMPT_TYPE_GENERATE_TITLE:
+			return GENERATE_TITLE_LABEL;
+		case PROMPT_TYPE_SUMMARY_BY_TITLE:
+			return SUMMARY_BASED_ON_TITLE_LABEL;
+		case PROMPT_TYPE_CONTINUE:
+			return CONTINUE_LABEL;
+		default:
+			return null;
+	}
+}

package/src/logo-generator/components/logo-presenter.tsx

@@ -9,6 +9,7 @@ import debugFactory from 'debug';
 /**
  * Internal dependencies
  */
+import AiFeedbackThumbs from '../../components/ai-feedback/index.js';
 import CheckIcon from '../assets/icons/check.js';
 import LogoIcon from '../assets/icons/logo.js';
 import MediaIcon from '../assets/icons/media.js';
@@ -152,11 +153,50 @@ const LogoEmpty: React.FC = () => {
 	);
 };
 
+const RateLogo: React.FC< {
+	disabled: boolean;
+	ratedItem: string;
+	onRate: ( rating: string ) => void;
+} > = ( { disabled, ratedItem, onRate } ) => {
+	const { logos, selectedLogo } = useLogoGenerator();
+	const savedRatings = logos
+		.filter( logo => logo.rating )
+		.reduce( ( acc, logo ) => {
+			acc[ logo.url ] = logo.rating;
+			return acc;
+		}, {} );
+
+	return (
+		<AiFeedbackThumbs
+			disabled={ disabled }
+			ratedItem={ ratedItem }
+			feature="logo-generator"
+			savedRatings={ savedRatings }
+			options={ {
+				mediaLibraryId: selectedLogo.mediaId,
+				prompt: selectedLogo.description,
+			} }
+			onRate={ onRate }
+		/>
+	);
+};
+
 const LogoReady: React.FC< {
 	siteId: string;
 	logo: Logo;
 	onApplyLogo: ( mediaId: number ) => void;
 } > = ( { siteId, logo, onApplyLogo } ) => {
+	const handleRateLogo = ( rating: string ) => {
+		// Update localStorage
+		updateLogo( {
+			siteId,
+			url: logo.url,
+			newUrl: logo.url,
+			mediaId: logo.mediaId,
+			rating,
+		} );
+	};
+
 	return (
 		<>
 			<img
@@ -171,6 +211,7 @@ const LogoReady: React.FC< {
 				<div className="jetpack-ai-logo-generator-modal-presenter__actions">
 					<SaveInLibraryButton siteId={ siteId } />
 					<UseOnSiteButton onApplyLogo={ onApplyLogo } />
+					<RateLogo ratedItem={ logo.url } disabled={ false } onRate={ handleRateLogo } />
 				</div>
 			</div>
 		</>

package/src/logo-generator/hooks/use-logo-generator.ts

@@ -412,10 +412,13 @@ User request:${ prompt }`;
 					throw error;
 				}
 
+				const revisedPrompt = image.data[ 0 ].revised_prompt || null;
+
 				// response_format=url returns object with url, otherwise b64_json
 				const logo: Logo = {
 					url: 'data:image/png;base64,' + image.data[ 0 ].b64_json,
 					description: prompt,
+					revisedPrompt,
 				};
 
 				try {
@@ -424,6 +427,7 @@ User request:${ prompt }`;
 						url: savedLogo.mediaURL,
 						description: prompt,
 						mediaId: savedLogo.mediaId,
+						revisedPrompt,
 					} );
 				} catch ( error ) {
 					storeLogo( logo );

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

@@ -10,21 +10,28 @@ 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
- *
+ * @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
+ * @param {SaveToStorageProps.revisedPrompt} saveToStorageProps.revisedPrompt - The revised prompt of the logo
  * @return {Logo} The logo that was saved
  */
-export function stashLogo( { siteId, url, description, mediaId }: SaveToStorageProps ) {
+export function stashLogo( {
+	siteId,
+	url,
+	description,
+	mediaId,
+	revisedPrompt,
+}: SaveToStorageProps ) {
 	const storedContent = getSiteLogoHistory( siteId );
 
 	const logo: Logo = {
 		url,
 		description,
 		mediaId,
+		revisedPrompt,
 	};
 
 	storedContent.push( logo );
@@ -45,9 +52,10 @@ export function stashLogo( { siteId, url, description, mediaId }: SaveToStorageP
  * @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
+ * @param {UpdateInStorageProps.rating}  updateInStorageProps.rating  - The new rating of the logo
  * @return {Logo} The logo that was updated
  */
-export function updateLogo( { siteId, url, newUrl, mediaId }: UpdateInStorageProps ) {
+export function updateLogo( { siteId, url, newUrl, mediaId, rating }: UpdateInStorageProps ) {
 	const storedContent = getSiteLogoHistory( siteId );
 
 	const index = storedContent.findIndex( logo => logo.url === url );
@@ -55,6 +63,7 @@ export function updateLogo( { siteId, url, newUrl, mediaId }: UpdateInStoragePro
 	if ( index > -1 ) {
 		storedContent[ index ].url = newUrl;
 		storedContent[ index ].mediaId = mediaId;
+		storedContent[ index ].rating = rating;
 	}
 
 	localStorage.setItem(
@@ -96,6 +105,7 @@ export function getSiteLogoHistory( siteId: string ) {
 			url: logo.url,
 			description: logo.description,
 			mediaId: logo.mediaId,
+			rating: logo.rating,
 		} ) );
 
 	return storedContent;

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

@@ -140,6 +140,8 @@ export type Logo = {
 	url: string;
 	description: string;
 	mediaId?: number;
+	rating?: string;
+	revisedPrompt?: string;
 };
 
 export type RequestError = string | Error | null;

package/src/logo-generator/types.ts

@@ -92,6 +92,7 @@ export type UpdateInStorageProps = {
 	url: Logo[ 'url' ];
 	newUrl: Logo[ 'url' ];
 	mediaId: Logo[ 'mediaId' ];
+	rating?: Logo[ 'rating' ];
 };
 
 export type RemoveFromStorageProps = {