From ea5869d68b2199d9139539cbff2f4cd38002ed3f Mon Sep 17 00:00:00 2001
From: Douglas <douglas.henri@automattic.com>
Date: Mon, 23 Dec 2024 20:11:05 -0300
Subject: [PATCH 1/3] add thumbs feedfback on Message component

---
 .../src/components/message/index.tsx          | 48 ++++++++++++++-----
 1 file changed, 35 insertions(+), 13 deletions(-)

diff --git a/projects/js-packages/ai-client/src/components/message/index.tsx b/projects/js-packages/ai-client/src/components/message/index.tsx
index 0c5e8482851e5..f7235e7b91d76 100644
--- a/projects/js-packages/ai-client/src/components/message/index.tsx
+++ b/projects/js-packages/ai-client/src/components/message/index.tsx
@@ -4,7 +4,7 @@
 import { ExternalLink, Button } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { Icon, check, arrowRight } from '@wordpress/icons';
+import { Icon, check } from '@wordpress/icons';
 import clsx from 'clsx';
 /**
  * Internal dependencies
@@ -12,6 +12,7 @@ import clsx from 'clsx';
 import './style.scss';
 import errorExclamation from '../../icons/error-exclamation.js';
 import { ERROR_QUOTA_EXCEEDED } from '../../types.js';
+import AiFeedbackThumbs from '../ai-feedback/index.js';
 /**
  * Types
  */
@@ -30,13 +31,22 @@ export type MessageSeverityProp =
 	| typeof MESSAGE_SEVERITY_INFO
 	| null;
 
+type RateProps = {
+	ratedItem?: string;
+	prompt?: string;
+	onRate?: ( rating: string ) => void;
+};
+
 export type MessageProps = {
 	icon?: React.ReactNode;
 	severity?: MessageSeverityProp;
-	showSidebarIcon?: boolean;
-	onSidebarIconClick?: () => void;
+	showAIFeedbackThumbs?: boolean;
 	children: React.ReactNode;
-};
+} & RateProps;
+
+export type GuidelineMessageProps = {
+	showAIFeedbackThumbs?: boolean;
+} & RateProps;
 
 export type OnUpgradeClick = ( event?: React.MouseEvent< HTMLButtonElement > ) => void;
 
@@ -71,8 +81,10 @@ const messageIconsMap = {
 export default function Message( {
 	severity = MESSAGE_SEVERITY_INFO,
 	icon = null,
-	showSidebarIcon = false,
-	onSidebarIconClick = () => {},
+	showAIFeedbackThumbs = false,
+	ratedItem = '',
+	prompt = '',
+	onRate = () => {},
 	children,
 }: MessageProps ): React.ReactElement {
 	return (
@@ -85,11 +97,17 @@ export default function Message( {
 			{ ( messageIconsMap[ severity ] || icon ) && (
 				<Icon icon={ messageIconsMap[ severity ] || icon } />
 			) }
-			<div className="jetpack-ai-assistant__message-content">{ children }</div>
-			{ showSidebarIcon && (
-				<Button className="jetpack-ai-assistant__message-sidebar" onClick={ onSidebarIconClick }>
-					<Icon size={ 20 } icon={ arrowRight } />
-				</Button>
+			{ <div className="jetpack-ai-assistant__message-content">{ children }</div> }
+			{ showAIFeedbackThumbs && (
+				<AiFeedbackThumbs
+					disabled={ false }
+					ratedItem={ ratedItem }
+					feature="ai-assistant"
+					options={ {
+						prompt,
+					} }
+					onRate={ onRate }
+				/>
 			) }
 		</div>
 	);
@@ -111,11 +129,15 @@ function LearnMoreLink(): React.ReactElement {
 /**
  * React component to render a guideline message.
  *
+ * @param {GuidelineMessageProps} props - Component props.
  * @return {React.ReactElement} - Message component.
  */
-export function GuidelineMessage(): React.ReactElement {
+export function GuidelineMessage( {
+	showAIFeedbackThumbs = false,
+	...props
+}: GuidelineMessageProps ): React.ReactElement {
 	return (
-		<Message>
+		<Message showAIFeedbackThumbs={ showAIFeedbackThumbs } { ...props }>
 			<span>
 				{ __( 'AI-generated content could be inaccurate or biased.', 'jetpack-ai-client' ) }
 			</span>

From a7e139a22a92f69bd587b2758b7250b7be43fcf8 Mon Sep 17 00:00:00 2001
From: Douglas <douglas.henri@automattic.com>
Date: Mon, 23 Dec 2024 20:11:51 -0300
Subject: [PATCH 2/3] add thumbs feedback to AI Assistant and extensions

---
 .../ai-control/block-ai-control.tsx           | 11 ++++++++-
 .../ai-control/extension-ai-control.tsx       | 23 +++++++++++++++++--
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/projects/js-packages/ai-client/src/components/ai-control/block-ai-control.tsx b/projects/js-packages/ai-client/src/components/ai-control/block-ai-control.tsx
index 6d25d309e7115..69b0965e1a333 100644
--- a/projects/js-packages/ai-client/src/components/ai-control/block-ai-control.tsx
+++ b/projects/js-packages/ai-client/src/components/ai-control/block-ai-control.tsx
@@ -256,7 +256,16 @@ export function BlockAIControl(
 	);
 
 	const message =
-		showGuideLine && ! loading && ! editRequest && ( customFooter || <GuidelineMessage /> );
+		showGuideLine &&
+		! loading &&
+		! editRequest &&
+		( customFooter || (
+			<GuidelineMessage
+				showAIFeedbackThumbs={ true }
+				ratedItem={ 'ai-assistant' }
+				prompt={ value }
+			/>
+		) );
 
 	return (
 		<AIControl
diff --git a/projects/js-packages/ai-client/src/components/ai-control/extension-ai-control.tsx b/projects/js-packages/ai-client/src/components/ai-control/extension-ai-control.tsx
index c29fc11b63248..7d19aa69abd25 100644
--- a/projects/js-packages/ai-client/src/components/ai-control/extension-ai-control.tsx
+++ b/projects/js-packages/ai-client/src/components/ai-control/extension-ai-control.tsx
@@ -85,6 +85,9 @@ export function ExtensionAIControl(
 	const [ editRequest, setEditRequest ] = useState( false );
 	const [ lastValue, setLastValue ] = useState( value || null );
 	const promptUserInputRef = useRef( null );
+	const isDone = value?.length <= 0 && state === 'done';
+	const [ initialPlaceholder ] = useState( placeholder );
+	const [ prompt, setPrompt ] = useState( null );
 
 	// Pass the ref to forwardRef.
 	useImperativeHandle( ref, () => promptUserInputRef.current );
@@ -95,8 +98,16 @@ export function ExtensionAIControl(
 		}
 	}, [ editRequest ] );
 
+	useEffect( () => {
+		if ( placeholder !== initialPlaceholder ) {
+			// The prompt is used to determine if there was a toolbar action
+			setPrompt( placeholder );
+		}
+	}, [ placeholder ] );
+
 	const sendHandler = useCallback( () => {
 		setLastValue( value );
+		setPrompt( value );
 		setEditRequest( false );
 		onSend?.( value );
 	}, [ onSend, value ] );
@@ -183,7 +194,7 @@ export function ExtensionAIControl(
 							</Button>
 						</div>
 					) }
-					{ value?.length <= 0 && state === 'done' && (
+					{ isDone && (
 						<div className="jetpack-components-ai-control__controls-prompt_button_wrapper">
 							<ButtonGroup>
 								<Button
@@ -233,7 +244,15 @@ export function ExtensionAIControl(
 			/>
 		);
 	} else if ( showGuideLine ) {
-		message = <GuidelineMessage />;
+		message = isDone ? (
+			<GuidelineMessage
+				showAIFeedbackThumbs={ true }
+				ratedItem={ 'ai-assistant' }
+				prompt={ prompt }
+			/>
+		) : (
+			<GuidelineMessage />
+		);
 	}
 
 	return (

From 7fad0795f551cf56388002840878bce9b6f9c458 Mon Sep 17 00:00:00 2001
From: Douglas <douglas.henri@automattic.com>
Date: Mon, 23 Dec 2024 20:28:09 -0300
Subject: [PATCH 3/3] changelog

---
 .../changelog/update-jetpack-ai-thumbs-feedback-ai-assistant  | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 projects/js-packages/ai-client/changelog/update-jetpack-ai-thumbs-feedback-ai-assistant

diff --git a/projects/js-packages/ai-client/changelog/update-jetpack-ai-thumbs-feedback-ai-assistant b/projects/js-packages/ai-client/changelog/update-jetpack-ai-thumbs-feedback-ai-assistant
new file mode 100644
index 0000000000000..2e1df1b460d72
--- /dev/null
+++ b/projects/js-packages/ai-client/changelog/update-jetpack-ai-thumbs-feedback-ai-assistant
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+AI Client: Add thumbs feedback on AI Assistant