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
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 || );
+ showGuideLine &&
+ ! loading &&
+ ! editRequest &&
+ ( customFooter || (
+
+ ) );
return (
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(
) }
- { value?.length <= 0 && state === 'done' && (
+ { isDone && (
);
} else if ( showGuideLine ) {
- message = ;
+ message = isDone ? (
+
+ ) : (
+
+ );
}
return (
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 ) && (
) }
- { children }
- { showSidebarIcon && (
-
+ { { children }
}
+ { showAIFeedbackThumbs && (
+
) }
);
@@ -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 (
-
+
{ __( 'AI-generated content could be inaccurate or biased.', 'jetpack-ai-client' ) }