-
Notifications
You must be signed in to change notification settings - Fork 0
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 <douglas.henri@automattic.com> Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/12438109162 Upstream-Ref: Automattic/jetpack@fc13aac
- Loading branch information
Showing
20 changed files
with
376 additions
and
26 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| 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; | ||
| }; | ||
| /** | ||
| * AiFeedbackThumbs component. | ||
| * | ||
| * @param {AiFeedbackThumbsProps} props - component props. | ||
| * @return {React.ReactElement} - rendered component. | ||
| */ | ||
| export default function AiFeedbackThumbs({ disabled, iconSize, ratedItem, feature, savedRatings, options, onRate, }: AiFeedbackThumbsProps): React.ReactElement; | ||
| export {}; |
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,70 @@ | ||
| import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; | ||
| /** | ||
| * 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'; | ||
| /** | ||
| * 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) { | ||
| 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, }) { | ||
| 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) => { | ||
| if (!itemsRated[ratedItem]) { | ||
| return false; | ||
| } | ||
| return itemsRated[ratedItem] === thumbValue; | ||
| }; | ||
| const rateAI = (isThumbsUp) => { | ||
| 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 (_jsxs("div", { className: "ai-assistant-feedback__selection", children: [_jsx(Tooltip, { text: __('I like this', 'jetpack-ai-client'), children: _jsx(Button, { disabled: disabled, icon: thumbsUp, onClick: () => rateAI(true), iconSize: iconSize, showTooltip: false, className: clsx({ | ||
| 'ai-assistant-feedback__thumb-selected': checkThumb('thumbs-up'), | ||
| }) }) }), _jsx(Tooltip, { text: __("I don't find this useful", 'jetpack-ai-client'), children: _jsx(Button, { disabled: disabled, icon: thumbsDown, onClick: () => rateAI(false), iconSize: iconSize, showTooltip: false, className: clsx({ | ||
| 'ai-assistant-feedback__thumb-selected': checkThumb('thumbs-down'), | ||
| }) }) })] })); | ||
| } |
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
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
Oops, something went wrong.