add mediaLibraryId, prompt and revisedPrompt to event

Automattic · Dec 20, 2024 · 2180c1c · 2180c1c
1 parent 691c09a
commit 2180c1c
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 13 deletions.
diff --git a/projects/js-packages/ai-client/src/components/ai-feedback/index.tsx b/projects/js-packages/ai-client/src/components/ai-feedback/index.tsx
@@ -25,6 +25,11 @@ type AiFeedbackThumbsProps = {
 	ratedItem?: string;
 	feature?: string;
 	savedRatings?: Record< string, string >;
+	options?: {
+		mediaLibraryId?: number;
+		prompt?: string;
+		revisedPrompt?: string;
+	};
 	onRate?: ( rating: string ) => void;
 };
 
@@ -50,6 +55,7 @@ export default function AiFeedbackThumbs( {
 	ratedItem = '',
 	feature = '',
 	savedRatings = {},
+	options = {},
 	onRate,
 }: AiFeedbackThumbsProps ): React.ReactElement {
 	if ( ! getFeatureAvailability( 'ai-response-feedback' ) ) {
@@ -60,7 +66,11 @@ export default function AiFeedbackThumbs( {
 	const { tracks } = useAnalytics();
 
 	useEffect( () => {
-		setItemsRated( { ...savedRatings, ...itemsRated } );
+		const newItemsRated = { ...savedRatings, ...itemsRated };
+
+		if ( JSON.stringify( newItemsRated ) !== JSON.stringify( itemsRated ) ) {
+			setItemsRated( newItemsRated );
+		}
 	}, [ savedRatings ] );
 
 	const checkThumb = ( thumbValue: string ) => {
@@ -85,6 +95,9 @@ export default function AiFeedbackThumbs( {
 			tracks.recordEvent( 'jetpack_ai_feedback', {
 				type: feature,
 				rating: aiRating,
+				mediaLibraryId: options.mediaLibraryId || null,
+				prompt: options.prompt || null,
+				revisedPrompt: options.revisedPrompt || null,
 			} );
 		}
 	};

diff --git a/projects/js-packages/ai-client/src/logo-generator/components/logo-presenter.tsx b/projects/js-packages/ai-client/src/logo-generator/components/logo-presenter.tsx
@@ -158,7 +158,7 @@ const RateLogo: React.FC< {
 	ratedItem: string;
 	onRate: ( rating: string ) => void;
 } > = ( { disabled, ratedItem, onRate } ) => {
-	const { logos } = useLogoGenerator();
+	const { logos, selectedLogo } = useLogoGenerator();
 	const savedRatings = logos
 		.filter( logo => logo.rating )
 		.reduce( ( acc, logo ) => {
@@ -172,6 +172,10 @@ const RateLogo: React.FC< {
 			ratedItem={ ratedItem }
 			feature="logo-generator"
 			savedRatings={ savedRatings }
+			options={ {
+				mediaLibraryId: selectedLogo.mediaId,
+				prompt: selectedLogo.description,
+			} }
 			onRate={ onRate }
 		/>
 	);

diff --git a/projects/js-packages/ai-client/src/logo-generator/hooks/use-logo-generator.ts b/projects/js-packages/ai-client/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 );

diff --git a/projects/js-packages/ai-client/src/logo-generator/lib/logo-storage.ts b/projects/js-packages/ai-client/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 );

diff --git a/projects/js-packages/ai-client/src/logo-generator/store/types.ts b/projects/js-packages/ai-client/src/logo-generator/store/types.ts
@@ -141,6 +141,7 @@ export type Logo = {
 	description: string;
 	mediaId?: number;
 	rating?: string;
+	revisedPrompt?: string;
 };
 
 export type RequestError = string | Error | null;

diff --git a/...tpack/extensions/plugins/ai-assistant-plugin/components/ai-image/components/carrousel.tsx b/...tpack/extensions/plugins/ai-assistant-plugin/components/ai-image/components/carrousel.tsx
@@ -15,6 +15,8 @@ import './carrousel.scss';
 export type CarrouselImageData = {
 	image?: string;
 	libraryId?: number | string;
+	prompt?: string;
+	revisedPrompt?: string;
 	libraryUrl?: string;
 	generating?: boolean;
 	error?: {
@@ -108,7 +110,7 @@ export default function Carrousel( {
 		<div className="ai-assistant-image__carrousel">
 			<div className="ai-assistant-image__carrousel-images">
 				{ images.length > 1 && prevButton }
-				{ images.map( ( { image, generating, error }, index ) => (
+				{ images.map( ( { image, generating, error, revisedPrompt }, index ) => (
 					<div
 						key={ `image:` + index }
 						className={ clsx( 'ai-assistant-image__carrousel-image-container', {
@@ -149,7 +151,11 @@ export default function Carrousel( {
 												<AiIcon />
 											</BlankImage>
 										) : (
-											<img className="ai-assistant-image__carrousel-image" src={ image } alt="" />
+											<img
+												className="ai-assistant-image__carrousel-image"
+												src={ image }
+												alt={ revisedPrompt }
+											/>
 										) }
 									</>
 								) }
@@ -171,6 +177,11 @@ export default function Carrousel( {
 						disabled={ aiFeedbackDisabled( images[ current ] ) }
 						ratedItem={ images[ current ].libraryUrl || '' }
 						iconSize={ 20 }
+						options={ {
+							mediaLibraryId: Number( images[ current ].libraryId ),
+							prompt: images[ current ].prompt,
+							revisedPrompt: images[ current ].revisedPrompt,
+						} }
 						feature="image-generator"
 					/>
 				</div>

diff --git a/.../jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/hooks/use-ai-image.ts b/.../jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/hooks/use-ai-image.ts
@@ -167,7 +167,9 @@ export default function useAiImage( {
 					.then( result => {
 						if ( result.data.length > 0 ) {
 							const image = 'data:image/png;base64,' + result.data[ 0 ].b64_json;
-							updateImages( { image }, pointer.current );
+							const prompt = userPrompt || null;
+							const revisedPrompt = result.data[ 0 ].revised_prompt || null;
+							updateImages( { image, prompt, revisedPrompt }, pointer.current );
 							updateRequestsCount();
 							saveToMediaLibrary( image, name )
 								.then( savedImage => {
@@ -181,7 +183,7 @@ export default function useAiImage( {
 										image,
 										libraryId: savedImage?.id,
 										libraryUrl: savedImage?.url,
-										revisedPrompt: result.data[ 0 ].revised_prompt || '',
+										revisedPrompt,
 									} );
 								} )
 								.catch( () => {