@automattic/jetpack-ai-client 0.25.1 → 0.25.3

package/CHANGELOG.md

@@ -5,22 +5,33 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.25.3] - 2024-12-23
+### Added
+- Jetpack AI: Add thumbs up/down component to AI logo generator [#40610]
+
+## [0.25.2] - 2024-12-16
+### Changed
+- Updated package dependencies. [#40564]
+
+### Fixed
+- Fixed lints following ESLint rule changes for TS. [#40584]
+
 ## [0.25.1] - 2024-12-09
 ### Changed
-- AI Assistant: Add disclaimer to image generation modals [#40397]
+- AI Assistant: Add disclaimer to image generation modals. [#40397]
 - Updated package dependencies. [#40363]
 
 ## [0.25.0] - 2024-11-25
 ### Added
-- AI Client: split disabled prop to allow disabling input and action button separately [#40210]
+- AI Client: split disabled prop to allow disabling input and action button separately. [#40210]
 
 ### Changed
-- AI Client: fix prompt cursor to text when editable [#40247]
+- AI Client: fix prompt cursor to text when editable. [#40247]
 - Updated package dependencies. [#40288]
 
 ## [0.24.3] - 2024-11-18
 ### Changed
-- AI Client: add effect on AiModalInputPrompt to update/set prompt on prop update [#40113]
+- AI Client: add effect on AiModalInputPrompt to update/set prompt on prop update. [#40113]
 
 ## [0.24.2] - 2024-11-11
 ### Changed
@@ -476,6 +487,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - AI Client: stop using smart document visibility handling on the fetchEventSource library, so it does not restart the completion when changing tabs. [#32004]
 - Updated package dependencies. [#31468] [#31659] [#31785]
 
+[0.25.3]: https://github.com/Automattic/jetpack-ai-client/compare/v0.25.2...v0.25.3
+[0.25.2]: https://github.com/Automattic/jetpack-ai-client/compare/v0.25.1...v0.25.2
 [0.25.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.25.0...v0.25.1
 [0.25.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.24.3...v0.25.0
 [0.24.3]: https://github.com/Automattic/jetpack-ai-client/compare/v0.24.2...v0.24.3

package/build/ai-client/src/components/ai-feedback/index.d.ts

@@ -0,0 +1,26 @@
+import './style.scss';
+/**
+ * Types
+ */
+import type React from 'react';
+type AiFeedbackThumbsProps = {
+    disabled?: boolean;
+    iconSize?: number;
+    ratedItem?: string;
+    feature?: string;
+    savedRatings?: Record<string, string>;
+    options?: {
+        mediaLibraryId?: number;
+        prompt?: string;
+        revisedPrompt?: string;
+    };
+    onRate?: (rating: string) => void;
+};
+/**
+ * AiFeedbackThumbs component.
+ *
+ * @param {AiFeedbackThumbsProps} props - component props.
+ * @return {React.ReactElement} - rendered component.
+ */
+export default function AiFeedbackThumbs({ disabled, iconSize, ratedItem, feature, savedRatings, options, onRate, }: AiFeedbackThumbsProps): React.ReactElement;
+export {};

package/build/ai-client/src/components/ai-feedback/index.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { useAnalytics, getJetpackExtensionAvailability, } from '@automattic/jetpack-shared-extension-utils';
+import { Button, Tooltip } from '@wordpress/components';
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { thumbsUp, thumbsDown } from '@wordpress/icons';
+import clsx from 'clsx';
+/*
+ * Internal dependencies
+ */
+import './style.scss';
+/**
+ * Get the availability of a feature.
+ *
+ * @param {string} feature - The feature to check availability for.
+ * @return {boolean}       - Whether the feature is available.
+ */
+function getFeatureAvailability(feature) {
+    return getJetpackExtensionAvailability(feature).available === true;
+}
+/**
+ * AiFeedbackThumbs component.
+ *
+ * @param {AiFeedbackThumbsProps} props - component props.
+ * @return {React.ReactElement} - rendered component.
+ */
+export default function AiFeedbackThumbs({ disabled = false, iconSize = 24, ratedItem = '', feature = '', savedRatings = {}, options = {}, onRate, }) {
+    if (!getFeatureAvailability('ai-response-feedback')) {
+        return null;
+    }
+    const [itemsRated, setItemsRated] = useState({});
+    const { tracks } = useAnalytics();
+    useEffect(() => {
+        const newItemsRated = { ...savedRatings, ...itemsRated };
+        if (JSON.stringify(newItemsRated) !== JSON.stringify(itemsRated)) {
+            setItemsRated(newItemsRated);
+        }
+    }, [savedRatings]);
+    const checkThumb = (thumbValue) => {
+        if (!itemsRated[ratedItem]) {
+            return false;
+        }
+        return itemsRated[ratedItem] === thumbValue;
+    };
+    const rateAI = (isThumbsUp) => {
+        const aiRating = isThumbsUp ? 'thumbs-up' : 'thumbs-down';
+        if (!checkThumb(aiRating)) {
+            setItemsRated({
+                ...itemsRated,
+                [ratedItem]: aiRating,
+            });
+            onRate?.(aiRating);
+            tracks.recordEvent('jetpack_ai_feedback', {
+                type: feature,
+                rating: aiRating,
+                mediaLibraryId: options.mediaLibraryId || null,
+                prompt: options.prompt || null,
+                revisedPrompt: options.revisedPrompt || null,
+            });
+        }
+    };
+    return (_jsxs("div", { className: "ai-assistant-feedback__selection", children: [_jsx(Tooltip, { text: __('I like this', 'jetpack-ai-client'), children: _jsx(Button, { disabled: disabled, icon: thumbsUp, onClick: () => rateAI(true), iconSize: iconSize, showTooltip: false, className: clsx({
+                        'ai-assistant-feedback__thumb-selected': checkThumb('thumbs-up'),
+                    }) }) }), _jsx(Tooltip, { text: __("I don't find this useful", 'jetpack-ai-client'), children: _jsx(Button, { disabled: disabled, icon: thumbsDown, onClick: () => rateAI(false), iconSize: iconSize, showTooltip: false, className: clsx({
+                        'ai-assistant-feedback__thumb-selected': checkThumb('thumbs-down'),
+                    }) }) })] }));
+}

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

@@ -1,4 +1,5 @@
 export { AIControl, BlockAIControl, ExtensionAIControl } from './ai-control/index.js';
+export { default as AiFeedbackThumbs } from './ai-feedback/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';

package/build/ai-client/src/components/index.js

@@ -1,4 +1,5 @@
 export { AIControl, BlockAIControl, ExtensionAIControl } from './ai-control/index.js';
+export { default as AiFeedbackThumbs } from './ai-feedback/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';

package/build/ai-client/src/logo-generator/components/fair-usage-notice.d.ts

@@ -5,7 +5,7 @@ type FairUsageNoticeProps = {
  * 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.
+ * @return the Notice component with the fair usage message.
  */
 export declare const FairUsageNotice: ({ variant }: FairUsageNoticeProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/build/ai-client/src/logo-generator/components/fair-usage-notice.js

@@ -5,7 +5,7 @@ import useFairUsageNoticeMessage from '../hooks/use-fair-usage-notice-message.js
  * 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.
+ * @return the Notice component with the fair usage message.
  */
 export const FairUsageNotice = ({ variant = 'error' }) => {
     const useFairUsageNoticeMessageElement = useFairUsageNoticeMessage();

package/build/ai-client/src/logo-generator/components/logo-presenter.js

@@ -10,6 +10,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';
@@ -80,8 +81,31 @@ const LogoFetching = () => {
 const LogoEmpty = () => {
     return (_jsxs(_Fragment, { children: [_jsx("div", { style: { width: 0, height: '229px' } }), _jsx("span", { className: "jetpack-ai-logo-generator-modal-presenter__loading-text", children: __('Once you generate a logo, it will show up here', 'jetpack-ai-client') })] }));
 };
+const RateLogo = ({ 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 (_jsx(AiFeedbackThumbs, { disabled: disabled, ratedItem: ratedItem, feature: "logo-generator", savedRatings: savedRatings, options: {
+            mediaLibraryId: selectedLogo.mediaId,
+            prompt: selectedLogo.description,
+        }, onRate: onRate }));
+};
 const LogoReady = ({ siteId, logo, onApplyLogo }) => {
-    return (_jsxs(_Fragment, { children: [_jsx("img", { src: logo.url, alt: logo.description, className: "jetpack-ai-logo-generator-modal-presenter__logo" }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal-presenter__action-wrapper", children: [_jsx("span", { className: "jetpack-ai-logo-generator-modal-presenter__description", children: logo.description }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal-presenter__actions", children: [_jsx(SaveInLibraryButton, { siteId: siteId }), _jsx(UseOnSiteButton, { onApplyLogo: onApplyLogo })] })] })] }));
+    const handleRateLogo = (rating) => {
+        // Update localStorage
+        updateLogo({
+            siteId,
+            url: logo.url,
+            newUrl: logo.url,
+            mediaId: logo.mediaId,
+            rating,
+        });
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("img", { src: logo.url, alt: logo.description, className: "jetpack-ai-logo-generator-modal-presenter__logo" }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal-presenter__action-wrapper", children: [_jsx("span", { className: "jetpack-ai-logo-generator-modal-presenter__description", children: logo.description }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal-presenter__actions", children: [_jsx(SaveInLibraryButton, { siteId: siteId }), _jsx(UseOnSiteButton, { onApplyLogo: onApplyLogo }), _jsx(RateLogo, { ratedItem: logo.url, disabled: false, onRate: handleRateLogo })] })] })] }));
 };
 const LogoUpdated = ({ logo }) => {
     return (_jsxs(_Fragment, { children: [_jsx("img", { src: logo.url, alt: logo.description, className: "jetpack-ai-logo-generator-modal-presenter__logo" }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal-presenter__success-wrapper", children: [_jsx(Icon, { icon: _jsx(CheckIcon, {}) }), _jsx("span", { children: __('Your new logo was set to the block!', 'jetpack-ai-client') })] })] }));

package/build/ai-client/src/logo-generator/hooks/use-fair-usage-notice-message.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
-declare const useFairUsageNoticeMessage: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+import { type Element } from '@wordpress/element';
+declare const useFairUsageNoticeMessage: () => Element;
 export default useFairUsageNoticeMessage;

package/build/ai-client/src/logo-generator/hooks/use-logo-generator.js

@@ -285,10 +285,12 @@ User request:${prompt}`;
                 increaseAiAssistantRequestsCount(-logoGenerationCost);
                 throw error;
             }
+            const revisedPrompt = image.data[0].revised_prompt || null;
             // response_format=url returns object with url, otherwise b64_json
             const logo = {
                 url: 'data:image/png;base64,' + image.data[0].b64_json,
                 description: prompt,
+                revisedPrompt,
             };
             try {
                 const savedLogo = await saveLogo(logo);
@@ -296,6 +298,7 @@ User request:${prompt}`;
                     url: savedLogo.mediaURL,
                     description: prompt,
                     mediaId: savedLogo.mediaId,
+                    revisedPrompt,
                 });
             }
             catch (error) {

package/build/ai-client/src/logo-generator/lib/logo-storage.d.ts

@@ -6,15 +6,15 @@ import { RemoveFromStorageProps, SaveToStorageProps, UpdateInStorageProps } from
 /**
  * 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 declare function stashLogo({ siteId, url, description, mediaId }: SaveToStorageProps): Logo;
+export declare function stashLogo({ siteId, url, description, mediaId, revisedPrompt, }: SaveToStorageProps): Logo;
 /**
  * Update an entry in the site's logo history.
  *
@@ -23,9 +23,10 @@ export declare function stashLogo({ siteId, url, description, mediaId }: SaveToS
  * @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 declare function updateLogo({ siteId, url, newUrl, mediaId }: UpdateInStorageProps): Logo;
+export declare function updateLogo({ siteId, url, newUrl, mediaId, rating }: UpdateInStorageProps): Logo;
 /**
  * Get the logo history for a site.
  *

package/build/ai-client/src/logo-generator/lib/logo-storage.js

@@ -3,20 +3,21 @@ 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 }) {
+export function stashLogo({ siteId, url, description, mediaId, revisedPrompt, }) {
     const storedContent = getSiteLogoHistory(siteId);
     const logo = {
         url,
         description,
         mediaId,
+        revisedPrompt,
     };
     storedContent.push(logo);
     localStorage.setItem(`logo-history-${siteId}`, JSON.stringify(storedContent.slice(-MAX_LOGOS)));
@@ -30,14 +31,16 @@ export function stashLogo({ siteId, url, description, mediaId }) {
  * @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 }) {
+export function updateLogo({ siteId, url, newUrl, mediaId, rating }) {
     const storedContent = getSiteLogoHistory(siteId);
     const index = storedContent.findIndex(logo => logo.url === url);
     if (index > -1) {
         storedContent[index].url = newUrl;
         storedContent[index].mediaId = mediaId;
+        storedContent[index].rating = rating;
     }
     localStorage.setItem(`logo-history-${siteId}`, JSON.stringify(storedContent.slice(-MAX_LOGOS)));
     return storedContent[index];
@@ -68,6 +71,7 @@ export function getSiteLogoHistory(siteId) {
         url: logo.url,
         description: logo.description,
         mediaId: logo.mediaId,
+        rating: logo.rating,
     }));
     return storedContent;
 }

package/build/ai-client/src/logo-generator/store/reducer.d.ts

@@ -1,4 +1,4 @@
-import type { AiFeatureStateProps, LogoGeneratorStateProp, RequestError } from './types.js';
+import type { AiFeatureStateProps, RequestError } from './types.js';
 import type { SiteDetails } from '../types.js';
 /**
  * Reducer for the Logo Generator store.
@@ -27,7 +27,7 @@ import type { SiteDetails } from '../types.js';
  * @param {boolean}                                                         action.isLoadingHistory      - Whether the history is being loaded
  * @return {LogoGeneratorStateProp} The new state
  */
-export default function reducer(state: LogoGeneratorStateProp, action: {
+export default function reducer(state: import("./types.js").LogoGeneratorStateProp, action: {
     type: string;
     feature?: AiFeatureStateProps;
     count?: number;

package/build/ai-client/src/logo-generator/store/types.d.ts

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

package/build/ai-client/src/logo-generator/types.d.ts

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

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.25.1",
+	"version": "0.25.3",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -44,21 +44,22 @@
 	"main": "./build/index.js",
 	"types": "./build/index.d.ts",
 	"dependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.38",
-		"@automattic/jetpack-connection": "^0.36.1",
-		"@automattic/jetpack-shared-extension-utils": "^0.16.1",
+		"@automattic/jetpack-base-styles": "^0.6.39",
+		"@automattic/jetpack-connection": "^0.36.2",
+		"@automattic/jetpack-shared-extension-utils": "^0.16.2",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/react": "18.3.12",
 		"@types/wordpress__block-editor": "11.5.15",
-		"@wordpress/api-fetch": "7.13.0",
-		"@wordpress/blob": "4.13.0",
-		"@wordpress/block-editor": "14.8.0",
-		"@wordpress/components": "28.13.0",
-		"@wordpress/compose": "7.13.0",
-		"@wordpress/data": "10.13.0",
-		"@wordpress/element": "6.13.0",
-		"@wordpress/i18n": "5.13.0",
-		"@wordpress/icons": "10.13.0",
+		"@wordpress/api-fetch": "7.14.0",
+		"@wordpress/base-styles": "5.14.0",
+		"@wordpress/blob": "4.14.0",
+		"@wordpress/block-editor": "14.9.0",
+		"@wordpress/components": "29.0.0",
+		"@wordpress/compose": "7.14.0",
+		"@wordpress/data": "10.14.0",
+		"@wordpress/element": "6.14.0",
+		"@wordpress/i18n": "5.14.0",
+		"@wordpress/icons": "10.14.0",
 		"clsx": "2.1.1",
 		"debug": "4.3.4",
 		"markdown-it": "14.0.0",

package/src/components/ai-feedback/index.tsx

@@ -0,0 +1,133 @@
+/**
+ * External dependencies
+ */
+import {
+	useAnalytics,
+	getJetpackExtensionAvailability,
+} from '@automattic/jetpack-shared-extension-utils';
+import { Button, Tooltip } from '@wordpress/components';
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { thumbsUp, thumbsDown } from '@wordpress/icons';
+import clsx from 'clsx';
+/*
+ * Internal dependencies
+ */
+import './style.scss';
+/**
+ * Types
+ */
+import type React from 'react';
+
+type AiFeedbackThumbsProps = {
+	disabled?: boolean;
+	iconSize?: number;
+	ratedItem?: string;
+	feature?: string;
+	savedRatings?: Record< string, string >;
+	options?: {
+		mediaLibraryId?: number;
+		prompt?: string;
+		revisedPrompt?: string;
+	};
+	onRate?: ( rating: string ) => void;
+};
+
+/**
+ * Get the availability of a feature.
+ *
+ * @param {string} feature - The feature to check availability for.
+ * @return {boolean}       - Whether the feature is available.
+ */
+function getFeatureAvailability( feature: string ): boolean {
+	return getJetpackExtensionAvailability( feature ).available === true;
+}
+
+/**
+ * AiFeedbackThumbs component.
+ *
+ * @param {AiFeedbackThumbsProps} props - component props.
+ * @return {React.ReactElement} - rendered component.
+ */
+export default function AiFeedbackThumbs( {
+	disabled = false,
+	iconSize = 24,
+	ratedItem = '',
+	feature = '',
+	savedRatings = {},
+	options = {},
+	onRate,
+}: AiFeedbackThumbsProps ): React.ReactElement {
+	if ( ! getFeatureAvailability( 'ai-response-feedback' ) ) {
+		return null;
+	}
+
+	const [ itemsRated, setItemsRated ] = useState( {} );
+	const { tracks } = useAnalytics();
+
+	useEffect( () => {
+		const newItemsRated = { ...savedRatings, ...itemsRated };
+
+		if ( JSON.stringify( newItemsRated ) !== JSON.stringify( itemsRated ) ) {
+			setItemsRated( newItemsRated );
+		}
+	}, [ savedRatings ] );
+
+	const checkThumb = ( thumbValue: string ) => {
+		if ( ! itemsRated[ ratedItem ] ) {
+			return false;
+		}
+
+		return itemsRated[ ratedItem ] === thumbValue;
+	};
+
+	const rateAI = ( isThumbsUp: boolean ) => {
+		const aiRating = isThumbsUp ? 'thumbs-up' : 'thumbs-down';
+
+		if ( ! checkThumb( aiRating ) ) {
+			setItemsRated( {
+				...itemsRated,
+				[ ratedItem ]: aiRating,
+			} );
+
+			onRate?.( aiRating );
+
+			tracks.recordEvent( 'jetpack_ai_feedback', {
+				type: feature,
+				rating: aiRating,
+				mediaLibraryId: options.mediaLibraryId || null,
+				prompt: options.prompt || null,
+				revisedPrompt: options.revisedPrompt || null,
+			} );
+		}
+	};
+
+	return (
+		<div className="ai-assistant-feedback__selection">
+			<Tooltip text={ __( 'I like this', 'jetpack-ai-client' ) }>
+				<Button
+					disabled={ disabled }
+					icon={ thumbsUp }
+					onClick={ () => rateAI( true ) }
+					iconSize={ iconSize }
+					showTooltip={ false }
+					className={ clsx( {
+						'ai-assistant-feedback__thumb-selected': checkThumb( 'thumbs-up' ),
+					} ) }
+				/>
+			</Tooltip>
+			<Tooltip text={ __( "I don't find this useful", 'jetpack-ai-client' ) }>
+				<Button
+					disabled={ disabled }
+					icon={ thumbsDown }
+					onClick={ () => rateAI( false ) }
+					iconSize={ iconSize }
+					showTooltip={ false }
+					className={ clsx( {
+						'ai-assistant-feedback__thumb-selected': checkThumb( 'thumbs-down' ),
+					} ) }
+				/>
+			</Tooltip>
+		</div>
+	);
+}

package/src/components/ai-feedback/style.scss

@@ -0,0 +1,16 @@
+@import "@wordpress/base-styles/colors";
+
+.ai-assistant-feedback {
+	&__selection {
+		display: flex;
+
+		.components-button.has-icon {
+			padding: 0;
+			min-width: 28px;
+		}
+	}
+
+	&__thumb-selected {
+		color: var( --wp-components-color-accent, var( --wp-admin-theme-color, #3858e9 ) );
+	}
+}

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export { AIControl, BlockAIControl, ExtensionAIControl } from './ai-control/index.js';
+export { default as AiFeedbackThumbs } from './ai-feedback/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';

package/src/logo-generator/components/fair-usage-notice.tsx

@@ -1,9 +1,5 @@
 import { Notice } from '@wordpress/components';
 import useFairUsageNoticeMessage from '../hooks/use-fair-usage-notice-message.js';
-/**
- * Types
- */
-import type { ReactElement } from 'react';
 
 type FairUsageNoticeProps = {
 	variant?: 'error' | 'muted';
@@ -13,7 +9,7 @@ type FairUsageNoticeProps = {
  * 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.
+ * @return the Notice component with the fair usage message.
  */
 export const FairUsageNotice = ( { variant = 'error' }: FairUsageNoticeProps ) => {
 	const useFairUsageNoticeMessageElement = useFairUsageNoticeMessage();

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-fair-usage-notice-message.tsx

@@ -1,5 +1,5 @@
 import { useSelect } from '@wordpress/data';
-import { createInterpolateElement } from '@wordpress/element';
+import { createInterpolateElement, type Element } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import getRedirectUrl from '../../../../components/tools/jp-redirect/index.js';
 /**
@@ -11,7 +11,7 @@ import { STORE_NAME } from '../store/index.js';
  */
 import type { Selectors } from '../store/types.js';
 
-const useFairUsageNoticeMessage = () => {
+const useFairUsageNoticeMessage = (): Element => {
 	const { usagePeriod } = useSelect( select => {
 		const selectors: Selectors = select( STORE_NAME );
 		return {

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/reducer.ts

@@ -30,12 +30,7 @@ import {
 	ACTION_SET_IS_LOADING_HISTORY,
 } from './constants.js';
 import INITIAL_STATE from './initial-state.js';
-import type {
-	AiFeatureStateProps,
-	LogoGeneratorStateProp,
-	RequestError,
-	TierLimitProp,
-} from './types.js';
+import type { AiFeatureStateProps, RequestError, TierLimitProp } from './types.js';
 import type { SiteDetails } from '../types.js';
 
 /**

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 = {