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 && (
+ {
{ 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' ) }