Jetpack AI: Adding AI feedback component and implementing on carousel (…

…#40488)

* Jetpack AI: Adding AI feedback component and implementing it on the image carousel

* changelog

* Removing isDisabled and shouldBeDisabled in favor or regular ol' disabled

projects/plugins/jetpack/changelog/update-jetpack-ai-feedback-component

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Jetpack AI: Adding AI feedback component and implementing it on the image carousel

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-feedback/index.tsx

@@ -0,0 +1,58 @@
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { thumbsUp, thumbsDown } from '@wordpress/icons';
+import clsx from 'clsx';
+import { useState } from 'react';
+import { getFeatureAvailability } from '../../../../blocks/ai-assistant/lib/utils/get-feature-availability';
+
+import './style.scss';
+
+export default function AiFeedbackThumbs( { disabled = false, iconSize = 24, ratedItem } ) {
+	const [ itemsRated, setItemsRated ] = useState( {} );
+
+	const rateAI = ( isThumbsUp: boolean ) => {
+		const aiRating = isThumbsUp ? 'thumbs-up' : 'thumbs-down';
+
+		setItemsRated( {
+			...itemsRated,
+			[ ratedItem ]: aiRating,
+		} );
+
+		// calls to Tracks or whatever else can be made here
+	};
+
+	const checkThumb = ( thumbValue: string ) => {
+		if ( ! itemsRated[ ratedItem ] ) {
+			return false;
+		}
+
+		return itemsRated[ ratedItem ] === thumbValue;
+	};
+
+	return getFeatureAvailability( 'ai-response-feedback' ) ? (
+		<div className="ai-assistant-feedback__selection">
+			<Button
+				aria-label={ __( 'Good Response', 'jetpack' ) }
+				disabled={ disabled }
+				icon={ thumbsUp }
+				onClick={ () => rateAI( true ) }
+				iconSize={ iconSize }
+				showTooltip={ false }
+				className={ clsx( { 'ai-assistant-feedback__thumb-selected': checkThumb( 'thumbs-up' ) } ) }
+			/>
+			<Button
+				aria-label={ __( 'Bad Response', 'jetpack' ) }
+				disabled={ disabled }
+				icon={ thumbsDown }
+				onClick={ () => rateAI( false ) }
+				iconSize={ iconSize }
+				showTooltip={ false }
+				className={ clsx( {
+					'ai-assistant-feedback__thumb-selected': checkThumb( 'thumbs-down' ),
+				} ) }
+			/>
+		</div>
+	) : (
+		<></>
+	);
+}

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/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));
+	}
+}

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/components/carrousel.scss

@@ -95,12 +95,18 @@
 			margin-top: 8px;
 		}
 
+		&-footer-left {
+			display: flex;
+			width: 25%;
+		}
+
 		&-counter {
 			display: flex;
 			justify-content: flex-start;
 			align-items: center;
 			font-size: 13px;
 			padding: 6px 0;
+			width: 50%;
 
 			.ai-carrousel {
 				&__prev,

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/components/carrousel.tsx

@@ -8,6 +8,7 @@ import clsx from 'clsx';
 /**
  * Internal dependencies
  */
+import AiFeedbackThumbs from '../../ai-feedback';
 import AiIcon from '../../ai-icon';
 import './carrousel.scss';
 
@@ -86,6 +87,23 @@ export default function Carrousel( {
 
 	const actual = current === 0 && total === 0 ? 0 : current + 1;
 
+	const aiFeedbackDisabled = imageData => {
+		const { image, generating, error } = imageData;
+
+		// disable if there's an empty modal
+		if ( ! image && ! generating && ! error ) {
+			return true;
+		}
+
+		// also disable if we're generating or have an error
+		if ( generating || error ) {
+			return true;
+		}
+
+		// otherwise we're fine
+		return false;
+	};
+
 	return (
 		<div className="ai-assistant-image__carrousel">
 			<div className="ai-assistant-image__carrousel-images">
@@ -142,11 +160,20 @@ export default function Carrousel( {
 				{ images.length > 1 && nextButton }
 			</div>
 			<div className="ai-assistant-image__carrousel-footer">
-				<div className="ai-assistant-image__carrousel-counter">
-					{ prevButton }
-					{ actual } / { total }
-					{ nextButton }
+				<div className="ai-assistant-image__carrousel-footer-left">
+					<div className="ai-assistant-image__carrousel-counter">
+						{ prevButton }
+						{ actual } / { total }
+						{ nextButton }
+					</div>
+
+					<AiFeedbackThumbs
+						disabled={ aiFeedbackDisabled( images[ current ] ) }
+						ratedItem={ images[ current ].libraryUrl || '' }
+						iconSize={ 20 }
+					/>
 				</div>
+
 				<div className="ai-assistant-image__carrousel-actions">{ actions }</div>
 			</div>
 		</div>