@automattic/jetpack-ai-client 0.25.2 → 0.25.4

package/CHANGELOG.md

@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.25.4] - 2024-12-30
+### Added
+- AI Client: Add thumbs feedback on AI Assistant. [#40728]
+
+### Changed
+- AI Client: Move prompt types and update thumbs feedback event. [#40746]
+
+## [0.25.3] - 2024-12-23
+### Added
+- Jetpack AI: Add thumbs up/down component to AI logo generator. [#40610]
+
 ## [0.25.2] - 2024-12-16
 ### Changed
 - Updated package dependencies. [#40564]
@@ -483,6 +494,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - AI Client: stop using smart document visibility handling on the fetchEventSource library, so it does not restart the completion when changing tabs. [#32004]
 - Updated package dependencies. [#31468] [#31659] [#31785]
 
+[0.25.4]: https://github.com/Automattic/jetpack-ai-client/compare/v0.25.3...v0.25.4
+[0.25.3]: https://github.com/Automattic/jetpack-ai-client/compare/v0.25.2...v0.25.3
 [0.25.2]: https://github.com/Automattic/jetpack-ai-client/compare/v0.25.1...v0.25.2
 [0.25.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.25.0...v0.25.1
 [0.25.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.24.3...v0.25.0

package/build/ai-client/src/components/ai-control/block-ai-control.d.ts

@@ -24,6 +24,7 @@ type BlockAIControlProps = {
     showRemove?: boolean;
     banner?: ReactElement;
     error?: ReactElement;
+    lastAction?: string;
 };
 /**
  * BlockAIControl component. Used by the AI Assistant block, adding logic and components to the base AIControl component.
@@ -32,6 +33,6 @@ type BlockAIControlProps = {
  * @param {React.MutableRefObject} ref   - Ref to the component
  * @return {ReactElement}             Rendered component
  */
-export declare function BlockAIControl({ disabled, value, placeholder, showAccept, acceptLabel, showButtonLabels, isTransparent, state, showGuideLine, customFooter, onChange, onSend, onStop, onAccept, onDiscard, showRemove, banner, error, }: BlockAIControlProps, ref: React.MutableRefObject<HTMLInputElement>): ReactElement;
+export declare function BlockAIControl({ disabled, value, placeholder, showAccept, acceptLabel, showButtonLabels, isTransparent, state, showGuideLine, customFooter, onChange, onSend, onStop, onAccept, onDiscard, showRemove, banner, error, lastAction, }: BlockAIControlProps, ref: React.MutableRefObject<HTMLInputElement>): ReactElement;
 declare const _default: React.ForwardRefExoticComponent<BlockAIControlProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/build/ai-client/src/components/ai-control/block-ai-control.js

@@ -23,7 +23,7 @@ const debug = debugFactory('jetpack-ai-client:block-ai-control');
  * @param {React.MutableRefObject} ref   - Ref to the component
  * @return {ReactElement}             Rendered component
  */
-export function BlockAIControl({ disabled = false, value = '', placeholder = '', showAccept = false, acceptLabel = __('Accept', 'jetpack-ai-client'), showButtonLabels = true, isTransparent = false, state = 'init', showGuideLine = false, customFooter = null, onChange, onSend, onStop, onAccept, onDiscard, showRemove = false, banner = null, error = null, }, ref) {
+export function BlockAIControl({ disabled = false, value = '', placeholder = '', showAccept = false, acceptLabel = __('Accept', 'jetpack-ai-client'), showButtonLabels = true, isTransparent = false, state = 'init', showGuideLine = false, customFooter = null, onChange, onSend, onStop, onAccept, onDiscard, showRemove = false, banner = null, error = null, lastAction, }, ref) {
     const loading = state === 'requesting' || state === 'suggesting';
     const [editRequest, setEditRequest] = useState(false);
     const [lastValue, setLastValue] = useState(value || null);
@@ -76,7 +76,15 @@ export function BlockAIControl({ disabled = false, value = '', placeholder = '',
         target: promptUserInputRef,
     });
     const actions = (_jsxs(_Fragment, { children: [(!showAccept || editRequest) && (_jsx("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: !loading ? (_jsxs(_Fragment, { children: [editRequest && (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: cancelEdit, variant: "secondary", label: __('Cancel', 'jetpack-ai-client'), children: showButtonLabels ? (__('Cancel', 'jetpack-ai-client')) : (_jsx(Icon, { icon: closeSmall })) })), showRemove && !editRequest && !value?.length && onDiscard && (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: discardHandler, variant: "secondary", label: __('Cancel', 'jetpack-ai-client'), children: showButtonLabels ? (__('Cancel', 'jetpack-ai-client')) : (_jsx(Icon, { icon: closeSmall })) })), value?.length > 0 && (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: sendHandler, variant: "primary", disabled: !value?.length || disabled, label: __('Send request', 'jetpack-ai-client'), children: showButtonLabels ? (__('Generate', 'jetpack-ai-client')) : (_jsx(Icon, { icon: arrowUp })) }))] })) : (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: onStop, variant: "secondary", label: __('Stop request', 'jetpack-ai-client'), children: showButtonLabels ? (__('Stop', 'jetpack-ai-client')) : (_jsx(Icon, { icon: closeSmall })) })) })), showAccept && !editRequest && (_jsxs("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: [(value?.length > 0 || lastValue === null) && (_jsxs(ButtonGroup, { children: [_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", label: __('Discard', 'jetpack-ai-client'), onClick: discardHandler, tooltipPosition: "top", children: _jsx(Icon, { icon: trash }) }), _jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", label: __('Regenerate', 'jetpack-ai-client'), onClick: () => onSend?.(value), tooltipPosition: "top", disabled: !value?.length || value === null || disabled, children: _jsx(Icon, { icon: regenerate }) })] })), _jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: onAccept, variant: "primary", label: acceptLabel, children: showButtonLabels ? acceptLabel : _jsx(Icon, { icon: check }) })] }))] }));
-    const message = showGuideLine && !loading && !editRequest && (customFooter || _jsx(GuidelineMessage, {}));
+    const message = showGuideLine &&
+        !loading &&
+        !editRequest &&
+        (customFooter || (_jsx(GuidelineMessage, { aiFeedbackThumbsOptions: {
+                showAIFeedbackThumbs: true,
+                ratedItem: 'ai-assistant',
+                prompt: lastAction,
+                block: 'ai-assistant',
+            } })));
     return (_jsx(AIControl, { disabled: disabled || loading, value: value, placeholder: placeholder, isTransparent: isTransparent, state: state, onChange: changeHandler, banner: banner, error: error, actions: actions, message: message, promptUserInputRef: promptUserInputRef }));
 }
 export default forwardRef(BlockAIControl);

package/build/ai-client/src/components/ai-control/extension-ai-control.d.ts

@@ -27,6 +27,8 @@ type ExtensionAIControlProps = {
     onUndo?: () => void;
     onUpgrade?: (event: MouseEvent<HTMLButtonElement>) => void;
     onTryAgain?: () => void;
+    lastAction?: string;
+    blockType: string;
 };
 /**
  * ExtensionAIControl component. Used by the AI Assistant inline extensions, adding logic and components to the base AIControl component.
@@ -35,6 +37,6 @@ type ExtensionAIControlProps = {
  * @param {React.MutableRefObject}  ref   - Ref to the component
  * @return {ReactElement}                 Rendered component
  */
-export declare function ExtensionAIControl({ className, disabled, value, placeholder, showButtonLabels, isTransparent, state, showGuideLine, error, requestsRemaining, showUpgradeMessage, showFairUsageMessage, upgradeUrl, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, onTryAgain, }: ExtensionAIControlProps, ref: React.MutableRefObject<HTMLInputElement>): ReactElement;
+export declare function ExtensionAIControl({ className, disabled, value, placeholder, showButtonLabels, isTransparent, state, showGuideLine, error, requestsRemaining, showUpgradeMessage, showFairUsageMessage, upgradeUrl, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, onTryAgain, lastAction, blockType, }: ExtensionAIControlProps, ref: React.MutableRefObject<HTMLInputElement>): ReactElement;
 declare const _default: React.ForwardRefExoticComponent<ExtensionAIControlProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/build/ai-client/src/components/ai-control/extension-ai-control.js

@@ -21,11 +21,12 @@ import './style.scss';
  * @param {React.MutableRefObject}  ref   - Ref to the component
  * @return {ReactElement}                 Rendered component
  */
-export function ExtensionAIControl({ className, disabled = false, value = '', placeholder = '', showButtonLabels = true, isTransparent = false, state = 'init', showGuideLine = false, error, requestsRemaining, showUpgradeMessage = false, showFairUsageMessage = false, upgradeUrl, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, onTryAgain, }, ref) {
+export function ExtensionAIControl({ className, disabled = false, value = '', placeholder = '', showButtonLabels = true, isTransparent = false, state = 'init', showGuideLine = false, error, requestsRemaining, showUpgradeMessage = false, showFairUsageMessage = false, upgradeUrl, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, onTryAgain, lastAction, blockType, }, ref) {
     const loading = state === 'requesting' || state === 'suggesting';
     const [editRequest, setEditRequest] = useState(false);
     const [lastValue, setLastValue] = useState(value || null);
     const promptUserInputRef = useRef(null);
+    const isDone = value?.length <= 0 && state === 'done';
     // Pass the ref to forwardRef.
     useImperativeHandle(ref, () => promptUserInputRef.current);
     useEffect(() => {
@@ -73,7 +74,7 @@ export function ExtensionAIControl({ className, disabled = false, value = '', pl
     }, {
         target: promptUserInputRef,
     });
-    const actions = (_jsx(_Fragment, { children: loading ? (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: stopHandler, variant: "secondary", label: __('Stop request', 'jetpack-ai-client'), children: showButtonLabels ? __('Stop', 'jetpack-ai-client') : _jsx(Icon, { icon: closeSmall }) })) : (_jsxs(_Fragment, { children: [value?.length > 0 && (_jsx("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: _jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: sendHandler, variant: "primary", disabled: !value?.length || disabled, label: __('Send request', 'jetpack-ai-client'), children: showButtonLabels ? (__('Generate', 'jetpack-ai-client')) : (_jsx(Icon, { icon: arrowUp })) }) })), value?.length <= 0 && state === 'done' && (_jsx("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: _jsxs(ButtonGroup, { children: [_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", label: __('Undo', 'jetpack-ai-client'), onClick: undoHandler, tooltipPosition: "top", children: _jsx(Icon, { icon: undo }) }), _jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", label: __('Close', 'jetpack-ai-client'), onClick: closeHandler, variant: "tertiary", children: __('Close', 'jetpack-ai-client') })] }) }))] })) }));
+    const actions = (_jsx(_Fragment, { children: loading ? (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: stopHandler, variant: "secondary", label: __('Stop request', 'jetpack-ai-client'), children: showButtonLabels ? __('Stop', 'jetpack-ai-client') : _jsx(Icon, { icon: closeSmall }) })) : (_jsxs(_Fragment, { children: [value?.length > 0 && (_jsx("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: _jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: sendHandler, variant: "primary", disabled: !value?.length || disabled, label: __('Send request', 'jetpack-ai-client'), children: showButtonLabels ? (__('Generate', 'jetpack-ai-client')) : (_jsx(Icon, { icon: arrowUp })) }) })), isDone && (_jsx("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: _jsxs(ButtonGroup, { children: [_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", label: __('Undo', 'jetpack-ai-client'), onClick: undoHandler, tooltipPosition: "top", children: _jsx(Icon, { icon: undo }) }), _jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", label: __('Close', 'jetpack-ai-client'), onClick: closeHandler, variant: "tertiary", children: __('Close', 'jetpack-ai-client') })] }) }))] })) }));
     let message = null;
     if (error?.message) {
         message = (_jsx(ErrorMessage, { error: error.message, code: error.code, onTryAgainClick: tryAgainHandler, onUpgradeClick: upgradeHandler, upgradeUrl: upgradeUrl }));
@@ -85,7 +86,12 @@ export function ExtensionAIControl({ className, disabled = false, value = '', pl
         message = (_jsx(UpgradeMessage, { requestsRemaining: requestsRemaining, onUpgradeClick: upgradeHandler, upgradeUrl: upgradeUrl }));
     }
     else if (showGuideLine) {
-        message = _jsx(GuidelineMessage, {});
+        message = isDone ? (_jsx(GuidelineMessage, { aiFeedbackThumbsOptions: {
+                showAIFeedbackThumbs: true,
+                ratedItem: 'ai-assistant',
+                prompt: lastAction,
+                block: blockType,
+            } })) : (_jsx(GuidelineMessage, {}));
     }
     return (_jsx(AIControl, { className: className, disabled: disabled || loading, value: value, placeholder: placeholder, isTransparent: isTransparent, state: state, onChange: changeHandler, actions: actions, message: message, promptUserInputRef: promptUserInputRef, wrapperRef: wrapperRef }));
 }

package/build/ai-client/src/components/ai-feedback/index.d.ts

@@ -0,0 +1,27 @@
+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;
+        block?: string | null;
+    };
+    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 {};

package/build/ai-client/src/components/ai-feedback/index.js

@@ -0,0 +1,71 @@
+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,
+                block: options.block || 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'),
+                    }) }) })] }));
+}

package/build/ai-client/src/components/index.d.ts

@@ -1,4 +1,5 @@
 export { AIControl, BlockAIControl, ExtensionAIControl } from './ai-control/index.js';
+export { default as AiFeedbackThumbs } from './ai-feedback/index.js';
 export { default as AiStatusIndicator } from './ai-status-indicator/index.js';
 export { default as AudioDurationDisplay } from './audio-duration-display/index.js';
 export { default as AiModalFooter } from './ai-modal-footer/index.js';

package/build/ai-client/src/components/index.js

@@ -1,4 +1,5 @@
 export { AIControl, BlockAIControl, ExtensionAIControl } from './ai-control/index.js';
+export { default as AiFeedbackThumbs } from './ai-feedback/index.js';
 export { default as AiStatusIndicator } from './ai-status-indicator/index.js';
 export { default as AudioDurationDisplay } from './audio-duration-display/index.js';
 export { default as AiModalFooter } from './ai-modal-footer/index.js';

package/build/ai-client/src/components/message/index.d.ts

@@ -12,13 +12,22 @@ export declare const MESSAGE_SEVERITY_ERROR = "error";
 export declare const MESSAGE_SEVERITY_SUCCESS = "success";
 export declare const MESSAGE_SEVERITY_INFO = "info";
 export type MessageSeverityProp = typeof MESSAGE_SEVERITY_WARNING | typeof MESSAGE_SEVERITY_ERROR | typeof MESSAGE_SEVERITY_SUCCESS | typeof MESSAGE_SEVERITY_INFO | null;
+type AiFeedbackThumbsOptions = {
+    showAIFeedbackThumbs?: boolean;
+    ratedItem?: string;
+    prompt?: string;
+    block?: string | null;
+    onRate?: (rating: string) => void;
+};
 export type MessageProps = {
     icon?: React.ReactNode;
     severity?: MessageSeverityProp;
-    showSidebarIcon?: boolean;
-    onSidebarIconClick?: () => void;
+    aiFeedbackThumbsOptions?: AiFeedbackThumbsOptions;
     children: React.ReactNode;
 };
+export type GuidelineMessageProps = {
+    aiFeedbackThumbsOptions?: AiFeedbackThumbsOptions;
+};
 export type OnUpgradeClick = (event?: React.MouseEvent<HTMLButtonElement>) => void;
 export type UpgradeMessageProps = {
     requestsRemaining: number;
@@ -39,13 +48,14 @@ export type ErrorMessageProps = {
  * @param {MessageProps} props - Component props.
  * @return {React.ReactElement}    Banner component.
  */
-export default function Message({ severity, icon, showSidebarIcon, onSidebarIconClick, children, }: MessageProps): React.ReactElement;
+export default function Message({ severity, icon, aiFeedbackThumbsOptions, children, }: MessageProps): React.ReactElement;
 /**
  * React component to render a guideline message.
  *
+ * @param {GuidelineMessageProps} props - Component props.
  * @return {React.ReactElement} - Message component.
  */
-export declare function GuidelineMessage(): React.ReactElement;
+export declare function GuidelineMessage({ aiFeedbackThumbsOptions, }: GuidelineMessageProps): React.ReactElement;
 /**
  * React component to render a fair usage limit message.
  *
@@ -66,3 +76,4 @@ export declare function UpgradeMessage({ requestsRemaining, severity, onUpgradeC
  * @return {React.ReactElement} - Message component.
  */
 export declare function ErrorMessage({ error, code, onTryAgainClick, onUpgradeClick, upgradeUrl, }: ErrorMessageProps): React.ReactElement;
+export {};

package/build/ai-client/src/components/message/index.js

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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
@@ -13,6 +13,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';
 export const MESSAGE_SEVERITY_WARNING = 'warning';
 export const MESSAGE_SEVERITY_ERROR = 'error';
 export const MESSAGE_SEVERITY_SUCCESS = 'success';
@@ -29,8 +30,17 @@ const messageIconsMap = {
  * @param {MessageProps} props - Component props.
  * @return {React.ReactElement}    Banner component.
  */
-export default function Message({ severity = MESSAGE_SEVERITY_INFO, icon = null, showSidebarIcon = false, onSidebarIconClick = () => { }, children, }) {
-    return (_jsxs("div", { className: clsx('jetpack-ai-assistant__message', `jetpack-ai-assistant__message-severity-${severity}`), children: [(messageIconsMap[severity] || icon) && (_jsx(Icon, { icon: messageIconsMap[severity] || icon })), _jsx("div", { className: "jetpack-ai-assistant__message-content", children: children }), showSidebarIcon && (_jsx(Button, { className: "jetpack-ai-assistant__message-sidebar", onClick: onSidebarIconClick, children: _jsx(Icon, { size: 20, icon: arrowRight }) }))] }));
+export default function Message({ severity = MESSAGE_SEVERITY_INFO, icon = null, aiFeedbackThumbsOptions = {
+    showAIFeedbackThumbs: false,
+    ratedItem: '',
+    prompt: '',
+    block: null,
+    onRate: () => { },
+}, children, }) {
+    return (_jsxs("div", { className: clsx('jetpack-ai-assistant__message', `jetpack-ai-assistant__message-severity-${severity}`), children: [(messageIconsMap[severity] || icon) && (_jsx(Icon, { icon: messageIconsMap[severity] || icon })), _jsx("div", { className: "jetpack-ai-assistant__message-content", children: children }), aiFeedbackThumbsOptions.showAIFeedbackThumbs && aiFeedbackThumbsOptions.prompt && (_jsx(AiFeedbackThumbs, { disabled: false, ratedItem: aiFeedbackThumbsOptions.ratedItem, feature: "ai-assistant", options: {
+                    prompt: aiFeedbackThumbsOptions.prompt,
+                    block: aiFeedbackThumbsOptions.block,
+                }, onRate: aiFeedbackThumbsOptions.onRate }))] }));
 }
 /**
  * React component to render a learn more link.
@@ -43,10 +53,17 @@ function LearnMoreLink() {
 /**
  * React component to render a guideline message.
  *
+ * @param {GuidelineMessageProps} props - Component props.
  * @return {React.ReactElement} - Message component.
  */
-export function GuidelineMessage() {
-    return (_jsxs(Message, { children: [_jsx("span", { children: __('AI-generated content could be inaccurate or biased.', 'jetpack-ai-client') }), _jsx(LearnMoreLink, {})] }));
+export function GuidelineMessage({ aiFeedbackThumbsOptions = {
+    showAIFeedbackThumbs: false,
+    ratedItem: '',
+    prompt: '',
+    block: null,
+    onRate: () => { },
+}, }) {
+    return (_jsxs(Message, { aiFeedbackThumbsOptions: aiFeedbackThumbsOptions, children: [_jsx("span", { children: __('AI-generated content could be inaccurate or biased.', 'jetpack-ai-client') }), _jsx(LearnMoreLink, {})] }));
 }
 /**
  * React component to render a fair usage limit message.

package/build/ai-client/src/constants.d.ts

@@ -0,0 +1,106 @@
+export declare const LANGUAGE_MAP: {
+    en: {
+        label: string;
+    };
+    es: {
+        label: string;
+    };
+    fr: {
+        label: string;
+    };
+    de: {
+        label: string;
+    };
+    it: {
+        label: string;
+    };
+    pt: {
+        label: string;
+    };
+    ru: {
+        label: string;
+    };
+    zh: {
+        label: string;
+    };
+    ja: {
+        label: string;
+    };
+    ar: {
+        label: string;
+    };
+    hi: {
+        label: string;
+    };
+    ko: {
+        label: string;
+    };
+};
+export declare const PROMPT_TONES_MAP: {
+    formal: {
+        label: string;
+        emoji: string;
+    };
+    informal: {
+        label: string;
+        emoji: string;
+    };
+    optimistic: {
+        label: string;
+        emoji: string;
+    };
+    humorous: {
+        label: string;
+        emoji: string;
+    };
+    serious: {
+        label: string;
+        emoji: string;
+    };
+    skeptical: {
+        label: string;
+        emoji: string;
+    };
+    empathetic: {
+        label: string;
+        emoji: string;
+    };
+    confident: {
+        label: string;
+        emoji: string;
+    };
+    passionate: {
+        label: string;
+        emoji: string;
+    };
+    provocative: {
+        label: string;
+        emoji: string;
+    };
+};
+export declare const PROMPT_TYPE_SUMMARY_BY_TITLE: "titleSummary";
+export declare const PROMPT_TYPE_CONTINUE: "continue";
+export declare const PROMPT_TYPE_SIMPLIFY: "simplify";
+export declare const PROMPT_TYPE_CORRECT_SPELLING: "correctSpelling";
+export declare const PROMPT_TYPE_GENERATE_TITLE: "generateTitle";
+export declare const PROMPT_TYPE_MAKE_LONGER: "makeLonger";
+export declare const PROMPT_TYPE_MAKE_SHORTER: "makeShorter";
+export declare const PROMPT_TYPE_CHANGE_TONE: "changeTone";
+export declare const PROMPT_TYPE_SUMMARIZE: "summarize";
+export declare const PROMPT_TYPE_CHANGE_LANGUAGE: "changeLanguage";
+export declare const PROMPT_TYPE_USER_PROMPT: "userPrompt";
+export declare const PROMPT_TYPE_JETPACK_FORM_CUSTOM_PROMPT: "jetpackFormCustomPrompt";
+export declare const PROMPT_TYPE_TRANSFORM_LIST_TO_TABLE: "transformListToTable";
+export declare const PROMPT_TYPE_WRITE_POST_FROM_LIST: "writePostFromList";
+export declare const TRANSLATE_LABEL: string;
+export declare const TONE_LABEL: string;
+export declare const CORRECT_SPELLING_LABEL: string;
+export declare const SIMPLIFY_LABEL: string;
+export declare const SUMMARIZE_LABEL: string;
+export declare const MAKE_SHORTER_LABEL: string;
+export declare const MAKE_LONGER_LABEL: string;
+export declare const TURN_LIST_INTO_TABLE_LABEL: string;
+export declare const WRITE_POST_FROM_LIST_LABEL: string;
+export declare const GENERATE_TITLE_LABEL: string;
+export declare const SUMMARY_BASED_ON_TITLE_LABEL: string;
+export declare const CONTINUE_LABEL: string;

package/build/ai-client/src/constants.js

@@ -0,0 +1,113 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+// Mappings
+export const LANGUAGE_MAP = {
+    en: {
+        label: __('English', 'jetpack-ai-client'),
+    },
+    es: {
+        label: __('Spanish', 'jetpack-ai-client'),
+    },
+    fr: {
+        label: __('French', 'jetpack-ai-client'),
+    },
+    de: {
+        label: __('German', 'jetpack-ai-client'),
+    },
+    it: {
+        label: __('Italian', 'jetpack-ai-client'),
+    },
+    pt: {
+        label: __('Portuguese', 'jetpack-ai-client'),
+    },
+    ru: {
+        label: __('Russian', 'jetpack-ai-client'),
+    },
+    zh: {
+        label: __('Chinese', 'jetpack-ai-client'),
+    },
+    ja: {
+        label: __('Japanese', 'jetpack-ai-client'),
+    },
+    ar: {
+        label: __('Arabic', 'jetpack-ai-client'),
+    },
+    hi: {
+        label: __('Hindi', 'jetpack-ai-client'),
+    },
+    ko: {
+        label: __('Korean', 'jetpack-ai-client'),
+    },
+};
+export const PROMPT_TONES_MAP = {
+    formal: {
+        label: __('Formal', 'jetpack-ai-client'),
+        emoji: '🎩',
+    },
+    informal: {
+        label: __('Informal', 'jetpack-ai-client'),
+        emoji: '😊',
+    },
+    optimistic: {
+        label: __('Optimistic', 'jetpack-ai-client'),
+        emoji: '😃',
+    },
+    humorous: {
+        label: __('Humorous', 'jetpack-ai-client'),
+        emoji: '😂',
+    },
+    serious: {
+        label: __('Serious', 'jetpack-ai-client'),
+        emoji: '😐',
+    },
+    skeptical: {
+        label: __('Skeptical', 'jetpack-ai-client'),
+        emoji: '🤨',
+    },
+    empathetic: {
+        label: __('Empathetic', 'jetpack-ai-client'),
+        emoji: '💗',
+    },
+    confident: {
+        label: __('Confident', 'jetpack-ai-client'),
+        emoji: '😎',
+    },
+    passionate: {
+        label: __('Passionate', 'jetpack-ai-client'),
+        emoji: '❤️',
+    },
+    provocative: {
+        label: __('Provocative', 'jetpack-ai-client'),
+        emoji: '🔥',
+    },
+};
+// Prompt types
+export const PROMPT_TYPE_SUMMARY_BY_TITLE = 'titleSummary';
+export const PROMPT_TYPE_CONTINUE = 'continue';
+export const PROMPT_TYPE_SIMPLIFY = 'simplify';
+export const PROMPT_TYPE_CORRECT_SPELLING = 'correctSpelling';
+export const PROMPT_TYPE_GENERATE_TITLE = 'generateTitle';
+export const PROMPT_TYPE_MAKE_LONGER = 'makeLonger';
+export const PROMPT_TYPE_MAKE_SHORTER = 'makeShorter';
+export const PROMPT_TYPE_CHANGE_TONE = 'changeTone';
+export const PROMPT_TYPE_SUMMARIZE = 'summarize';
+export const PROMPT_TYPE_CHANGE_LANGUAGE = 'changeLanguage';
+export const PROMPT_TYPE_USER_PROMPT = 'userPrompt';
+export const PROMPT_TYPE_JETPACK_FORM_CUSTOM_PROMPT = 'jetpackFormCustomPrompt';
+export const PROMPT_TYPE_TRANSFORM_LIST_TO_TABLE = 'transformListToTable';
+export const PROMPT_TYPE_WRITE_POST_FROM_LIST = 'writePostFromList';
+// Human-readable labels
+export const TRANSLATE_LABEL = __('Translate', 'jetpack-ai-client');
+export const TONE_LABEL = __('Change tone', 'jetpack-ai-client');
+export const CORRECT_SPELLING_LABEL = __('Correct spelling and grammar', 'jetpack-ai-client');
+export const SIMPLIFY_LABEL = __('Simplify', 'jetpack-ai-client');
+export const SUMMARIZE_LABEL = __('Summarize', 'jetpack-ai-client');
+export const MAKE_SHORTER_LABEL = __('Make shorter', 'jetpack-ai-client');
+export const MAKE_LONGER_LABEL = __('Expand', 'jetpack-ai-client');
+export const TURN_LIST_INTO_TABLE_LABEL = __('Turn list into a table', 'jetpack-ai-client');
+export const WRITE_POST_FROM_LIST_LABEL = __('Write a post from this list', 'jetpack-ai-client');
+export const GENERATE_TITLE_LABEL = __('Generate a post title', 'jetpack-ai-client');
+export const SUMMARY_BASED_ON_TITLE_LABEL = __('Summary based on title', 'jetpack-ai-client');
+export const CONTINUE_LABEL = __('Continue writing', 'jetpack-ai-client');

package/build/ai-client/src/index.d.ts

@@ -15,4 +15,5 @@ export * from './components/index.js';
 export * from './data-flow/index.js';
 export * from './types.js';
 export * from './libs/index.js';
+export * from './constants.js';
 export * from './logo-generator/index.js';

package/build/ai-client/src/index.js

@@ -36,6 +36,10 @@ export * from './types.js';
  * Libs
  */
 export * from './libs/index.js';
+/*
+ * Constants
+ */
+export * from './constants.js';
 /*
  * Logo Generator
  */

package/build/ai-client/src/libs/index.d.ts

@@ -1,2 +1,3 @@
 export { MarkdownToHTML, HTMLToMarkdown, renderHTMLFromMarkdown, renderMarkdownFromHTML, fixes, } from './markdown/index.js';
 export type { RenderHTMLRules } from './markdown/index.js';
+export { mapActionToHumanText } from './map-action-to-human-text.js';

package/build/ai-client/src/libs/index.js

@@ -1 +1,2 @@
 export { MarkdownToHTML, HTMLToMarkdown, renderHTMLFromMarkdown, renderMarkdownFromHTML, fixes, } from './markdown/index.js';
+export { mapActionToHumanText } from './map-action-to-human-text.js';

package/build/ai-client/src/libs/map-action-to-human-text.d.ts

@@ -0,0 +1,13 @@
+type MapActionToHumanTextOptions = {
+    language?: string;
+    tone?: string;
+};
+/**
+ * Maps an action to a human-readable text.
+ *
+ * @param  action  - The action to map.
+ * @param  options - The options for the mapping.
+ * @return {string} The human-readable text.
+ */
+export declare function mapActionToHumanText(action: string, options?: MapActionToHumanTextOptions): string | null;
+export {};