-
Notifications
You must be signed in to change notification settings - Fork 800
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Jetpack AI: Add thumbs up/down component to AI logo generator (#40610)
* Jetpack AI: Add thumbs up/down component to AI logo generator * changelog * Attemp #1 to fix some build errors * changelog * add base-styles to jetpack ai client * move AiFeedbackThumbs to ai client * avoid multiple events on same rating * store rating with other logo information * fix issue with persisting ratings with modal open * add mediaLibraryId, prompt and revisedPrompt to event --------- Co-authored-by: Douglas <[email protected]>
- Loading branch information
Showing
16 changed files
with
232 additions
and
86 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
4 changes: 4 additions & 0 deletions
4
projects/js-packages/ai-client/changelog/change-jetpack-ai-rate-logo-generator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| Significance: patch | ||
| Type: added | ||
|
|
||
| Jetpack AI: Add thumbs up/down component to AI logo generator |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
133 changes: 133 additions & 0 deletions
133
projects/js-packages/ai-client/src/components/ai-feedback/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 4 additions & 0 deletions
4
projects/plugins/jetpack/changelog/change-jetpack-ai-rate-logo-generator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| Significance: patch | ||
| Type: other | ||
|
|
||
| Jetpack AI: Add thumbs up/down component to AI logo generator |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.