@automattic/jetpack-ai-client 0.25.3 → 0.25.5

package/CHANGELOG.md

@@ -5,9 +5,24 @@ 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.5] - 2025-01-06
+### Changed
+- Updated package dependencies. [#40798] [#40810] [#40811] [#40841]
+
+### Fixed
+- AI Client: Add style parameter to first logo generator so it doesn't fall in a DALL-E situation. [#40807]
+- Jetpack AI: Switch tracking data to camel_case to maintain Tracks' required property format. [#40774]
+
+## [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]
+- Jetpack AI: Add thumbs up/down component to AI logo generator. [#40610]
 
 ## [0.25.2] - 2024-12-16
 ### Changed
@@ -487,6 +502,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.5]: https://github.com/Automattic/jetpack-ai-client/compare/v0.25.4...v0.25.5
+[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

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

@@ -13,6 +13,7 @@ type AiFeedbackThumbsProps = {
         mediaLibraryId?: number;
         prompt?: string;
         revisedPrompt?: string;
+        block?: string | null;
     };
     onRate?: (rating: string) => void;
 };

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

@@ -56,9 +56,10 @@ export default function AiFeedbackThumbs({ disabled = false, iconSize = 24, rate
             tracks.recordEvent('jetpack_ai_feedback', {
                 type: feature,
                 rating: aiRating,
-                mediaLibraryId: options.mediaLibraryId || null,
+                media_library_id: options.mediaLibraryId || null,
                 prompt: options.prompt || null,
-                revisedPrompt: options.revisedPrompt || null,
+                revised_prompt: options.revisedPrompt || null,
+                block: options.block || null,
             });
         }
     };

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 {};

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

@@ -0,0 +1,40 @@
+import { LANGUAGE_MAP, PROMPT_TONES_MAP, PROMPT_TYPE_CHANGE_LANGUAGE, PROMPT_TYPE_CHANGE_TONE, PROMPT_TYPE_CONTINUE, PROMPT_TYPE_CORRECT_SPELLING, PROMPT_TYPE_GENERATE_TITLE, PROMPT_TYPE_MAKE_LONGER, PROMPT_TYPE_MAKE_SHORTER, PROMPT_TYPE_SIMPLIFY, PROMPT_TYPE_SUMMARIZE, PROMPT_TYPE_SUMMARY_BY_TITLE, PROMPT_TYPE_TRANSFORM_LIST_TO_TABLE, PROMPT_TYPE_WRITE_POST_FROM_LIST, CONTINUE_LABEL, CORRECT_SPELLING_LABEL, GENERATE_TITLE_LABEL, MAKE_LONGER_LABEL, MAKE_SHORTER_LABEL, SIMPLIFY_LABEL, SUMMARIZE_LABEL, SUMMARY_BASED_ON_TITLE_LABEL, TONE_LABEL, TRANSLATE_LABEL, TURN_LIST_INTO_TABLE_LABEL, WRITE_POST_FROM_LIST_LABEL, } from '../constants.js';
+/**
+ * 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 function mapActionToHumanText(action, options = {}) {
+    const { language, tone } = options;
+    const languageCode = language?.split(' (')[0];
+    switch (action) {
+        case PROMPT_TYPE_CHANGE_LANGUAGE:
+            return `${TRANSLATE_LABEL}: ${LANGUAGE_MAP[languageCode].label}`;
+        case PROMPT_TYPE_CHANGE_TONE:
+            return `${TONE_LABEL}: ${PROMPT_TONES_MAP[tone].label}`;
+        case PROMPT_TYPE_CORRECT_SPELLING:
+            return CORRECT_SPELLING_LABEL;
+        case PROMPT_TYPE_SIMPLIFY:
+            return SIMPLIFY_LABEL;
+        case PROMPT_TYPE_SUMMARIZE:
+            return SUMMARIZE_LABEL;
+        case PROMPT_TYPE_MAKE_LONGER:
+            return MAKE_LONGER_LABEL;
+        case PROMPT_TYPE_MAKE_SHORTER:
+            return MAKE_SHORTER_LABEL;
+        case PROMPT_TYPE_TRANSFORM_LIST_TO_TABLE:
+            return TURN_LIST_INTO_TABLE_LABEL;
+        case PROMPT_TYPE_WRITE_POST_FROM_LIST:
+            return WRITE_POST_FROM_LIST_LABEL;
+        case PROMPT_TYPE_GENERATE_TITLE:
+            return GENERATE_TITLE_LABEL;
+        case PROMPT_TYPE_SUMMARY_BY_TITLE:
+            return SUMMARY_BASED_ON_TITLE_LABEL;
+        case PROMPT_TYPE_CONTINUE:
+            return CONTINUE_LABEL;
+        default:
+            return null;
+    }
+}

package/build/ai-client/src/logo-generator/components/generator-modal.js

@@ -55,7 +55,7 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload = null,
             setInitialPrompt(prompt);
             // Then generate the logo based on the prompt.
             setLoadingState('generating');
-            await generateLogo({ prompt });
+            await generateLogo({ prompt, style: 'none' });
             setLoadingState(null);
         }
         catch (error) {

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.25.3",
+	"version": "0.25.5",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -24,15 +24,15 @@
 	},
 	"type": "module",
 	"devDependencies": {
-		"@storybook/addon-actions": "8.3.5",
-		"@storybook/blocks": "8.3.5",
-		"@storybook/preview-api": "8.3.5",
-		"@storybook/react": "8.3.5",
+		"@storybook/addon-actions": "8.4.7",
+		"@storybook/blocks": "8.4.7",
+		"@storybook/preview-api": "8.4.7",
+		"@storybook/react": "8.4.7",
 		"@types/markdown-it": "14.1.2",
 		"@types/turndown": "5.0.5",
 		"jest": "^29.6.2",
 		"jest-environment-jsdom": "29.7.0",
-		"storybook": "8.3.5",
+		"storybook": "8.4.7",
 		"typescript": "5.0.4"
 	},
 	"exports": {
@@ -45,11 +45,11 @@
 	"types": "./build/index.d.ts",
 	"dependencies": {
 		"@automattic/jetpack-base-styles": "^0.6.39",
-		"@automattic/jetpack-connection": "^0.36.2",
-		"@automattic/jetpack-shared-extension-utils": "^0.16.2",
+		"@automattic/jetpack-connection": "^0.36.3",
+		"@automattic/jetpack-shared-extension-utils": "^0.16.3",
 		"@microsoft/fetch-event-source": "2.0.1",
-		"@types/react": "18.3.12",
-		"@types/wordpress__block-editor": "11.5.15",
+		"@types/react": "18.3.18",
+		"@types/wordpress__block-editor": "11.5.16",
 		"@wordpress/api-fetch": "7.14.0",
 		"@wordpress/base-styles": "5.14.0",
 		"@wordpress/blob": "4.14.0",
@@ -61,8 +61,8 @@
 		"@wordpress/i18n": "5.14.0",
 		"@wordpress/icons": "10.14.0",
 		"clsx": "2.1.1",
-		"debug": "4.3.4",
-		"markdown-it": "14.0.0",
+		"debug": "4.4.0",
+		"markdown-it": "14.1.0",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"turndown": "7.1.2"

package/src/components/ai-control/block-ai-control.tsx

@@ -46,6 +46,7 @@ type BlockAIControlProps = {
 	showRemove?: boolean;
 	banner?: ReactElement;
 	error?: ReactElement;
+	lastAction?: string;
 };
 
 const debug = debugFactory( 'jetpack-ai-client:block-ai-control' );
@@ -77,6 +78,7 @@ export function BlockAIControl(
 		showRemove = false,
 		banner = null,
 		error = null,
+		lastAction,
 	}: BlockAIControlProps,
 	ref: React.MutableRefObject< HTMLInputElement >
 ): ReactElement {
@@ -256,7 +258,19 @@ export function BlockAIControl(
 	);
 
 	const message =
-		showGuideLine && ! loading && ! editRequest && ( customFooter || <GuidelineMessage /> );
+		showGuideLine &&
+		! loading &&
+		! editRequest &&
+		( customFooter || (
+			<GuidelineMessage
+				aiFeedbackThumbsOptions={ {
+					showAIFeedbackThumbs: true,
+					ratedItem: 'ai-assistant',
+					prompt: lastAction,
+					block: 'ai-assistant',
+				} }
+			/>
+		) );
 
 	return (
 		<AIControl

package/src/components/ai-control/extension-ai-control.tsx

@@ -46,6 +46,8 @@ type ExtensionAIControlProps = {
 	onUndo?: () => void;
 	onUpgrade?: ( event: MouseEvent< HTMLButtonElement > ) => void;
 	onTryAgain?: () => void;
+	lastAction?: string;
+	blockType: string;
 };
 
 /**
@@ -78,6 +80,8 @@ export function ExtensionAIControl(
 		onUndo,
 		onUpgrade,
 		onTryAgain,
+		lastAction,
+		blockType,
 	}: ExtensionAIControlProps,
 	ref: React.MutableRefObject< HTMLInputElement >
 ): ReactElement {
@@ -85,6 +89,7 @@ export function ExtensionAIControl(
 	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 );
@@ -183,7 +188,7 @@ export function ExtensionAIControl(
 							</Button>
 						</div>
 					) }
-					{ value?.length <= 0 && state === 'done' && (
+					{ isDone && (
 						<div className="jetpack-components-ai-control__controls-prompt_button_wrapper">
 							<ButtonGroup>
 								<Button
@@ -233,7 +238,18 @@ export function ExtensionAIControl(
 			/>
 		);
 	} else if ( showGuideLine ) {
-		message = <GuidelineMessage />;
+		message = isDone ? (
+			<GuidelineMessage
+				aiFeedbackThumbsOptions={ {
+					showAIFeedbackThumbs: true,
+					ratedItem: 'ai-assistant',
+					prompt: lastAction,
+					block: blockType,
+				} }
+			/>
+		) : (
+			<GuidelineMessage />
+		);
 	}
 
 	return (

package/src/components/ai-feedback/index.tsx

@@ -29,6 +29,7 @@ type AiFeedbackThumbsProps = {
 		mediaLibraryId?: number;
 		prompt?: string;
 		revisedPrompt?: string;
+		block?: string | null;
 	};
 	onRate?: ( rating: string ) => void;
 };
@@ -95,9 +96,10 @@ export default function AiFeedbackThumbs( {
 			tracks.recordEvent( 'jetpack_ai_feedback', {
 				type: feature,
 				rating: aiRating,
-				mediaLibraryId: options.mediaLibraryId || null,
+				media_library_id: options.mediaLibraryId || null,
 				prompt: options.prompt || null,
-				revisedPrompt: options.revisedPrompt || null,
+				revised_prompt: options.revisedPrompt || null,
+				block: options.block || null,
 			} );
 		}
 	};

package/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,14 +31,25 @@ export type MessageSeverityProp =
 	| 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 = {
@@ -71,8 +83,13 @@ const messageIconsMap = {
 export default function Message( {
 	severity = MESSAGE_SEVERITY_INFO,
 	icon = null,
-	showSidebarIcon = false,
-	onSidebarIconClick = () => {},
+	aiFeedbackThumbsOptions = {
+		showAIFeedbackThumbs: false,
+		ratedItem: '',
+		prompt: '',
+		block: null,
+		onRate: () => {},
+	},
 	children,
 }: MessageProps ): React.ReactElement {
 	return (
@@ -85,11 +102,18 @@ export default function Message( {
 			{ ( messageIconsMap[ severity ] || icon ) && (
 				<Icon icon={ messageIconsMap[ severity ] || icon } />
 			) }
-			<div className="jetpack-ai-assistant__message-content">{ children }</div>
-			{ showSidebarIcon && (
-				<Button className="jetpack-ai-assistant__message-sidebar" onClick={ onSidebarIconClick }>
-					<Icon size={ 20 } icon={ arrowRight } />
-				</Button>
+			{ <div className="jetpack-ai-assistant__message-content">{ children }</div> }
+			{ aiFeedbackThumbsOptions.showAIFeedbackThumbs && aiFeedbackThumbsOptions.prompt && (
+				<AiFeedbackThumbs
+					disabled={ false }
+					ratedItem={ aiFeedbackThumbsOptions.ratedItem }
+					feature="ai-assistant"
+					options={ {
+						prompt: aiFeedbackThumbsOptions.prompt,
+						block: aiFeedbackThumbsOptions.block,
+					} }
+					onRate={ aiFeedbackThumbsOptions.onRate }
+				/>
 			) }
 		</div>
 	);
@@ -111,11 +135,20 @@ 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( {
+	aiFeedbackThumbsOptions = {
+		showAIFeedbackThumbs: false,
+		ratedItem: '',
+		prompt: '',
+		block: null,
+		onRate: () => {},
+	},
+}: GuidelineMessageProps ): React.ReactElement {
 	return (
-		<Message>
+		<Message aiFeedbackThumbsOptions={ aiFeedbackThumbsOptions }>
 			<span>
 				{ __( 'AI-generated content could be inaccurate or biased.', 'jetpack-ai-client' ) }
 			</span>

package/src/constants.ts

@@ -0,0 +1,116 @@
+/**
+ * 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' as const;
+export const PROMPT_TYPE_CONTINUE = 'continue' as const;
+export const PROMPT_TYPE_SIMPLIFY = 'simplify' as const;
+export const PROMPT_TYPE_CORRECT_SPELLING = 'correctSpelling' as const;
+export const PROMPT_TYPE_GENERATE_TITLE = 'generateTitle' as const;
+export const PROMPT_TYPE_MAKE_LONGER = 'makeLonger' as const;
+export const PROMPT_TYPE_MAKE_SHORTER = 'makeShorter' as const;
+export const PROMPT_TYPE_CHANGE_TONE = 'changeTone' as const;
+export const PROMPT_TYPE_SUMMARIZE = 'summarize' as const;
+export const PROMPT_TYPE_CHANGE_LANGUAGE = 'changeLanguage' as const;
+export const PROMPT_TYPE_USER_PROMPT = 'userPrompt' as const;
+export const PROMPT_TYPE_JETPACK_FORM_CUSTOM_PROMPT = 'jetpackFormCustomPrompt' as const;
+export const PROMPT_TYPE_TRANSFORM_LIST_TO_TABLE = 'transformListToTable' as const;
+export const PROMPT_TYPE_WRITE_POST_FROM_LIST = 'writePostFromList' as const;
+
+// 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/src/index.ts

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

package/src/libs/index.ts

@@ -7,3 +7,5 @@ export {
 } from './markdown/index.js';
 
 export type { RenderHTMLRules } from './markdown/index.js';
+
+export { mapActionToHumanText } from './map-action-to-human-text.js';

package/src/libs/map-action-to-human-text.ts

@@ -0,0 +1,77 @@
+import {
+	LANGUAGE_MAP,
+	PROMPT_TONES_MAP,
+	PROMPT_TYPE_CHANGE_LANGUAGE,
+	PROMPT_TYPE_CHANGE_TONE,
+	PROMPT_TYPE_CONTINUE,
+	PROMPT_TYPE_CORRECT_SPELLING,
+	PROMPT_TYPE_GENERATE_TITLE,
+	PROMPT_TYPE_MAKE_LONGER,
+	PROMPT_TYPE_MAKE_SHORTER,
+	PROMPT_TYPE_SIMPLIFY,
+	PROMPT_TYPE_SUMMARIZE,
+	PROMPT_TYPE_SUMMARY_BY_TITLE,
+	PROMPT_TYPE_TRANSFORM_LIST_TO_TABLE,
+	PROMPT_TYPE_WRITE_POST_FROM_LIST,
+	CONTINUE_LABEL,
+	CORRECT_SPELLING_LABEL,
+	GENERATE_TITLE_LABEL,
+	MAKE_LONGER_LABEL,
+	MAKE_SHORTER_LABEL,
+	SIMPLIFY_LABEL,
+	SUMMARIZE_LABEL,
+	SUMMARY_BASED_ON_TITLE_LABEL,
+	TONE_LABEL,
+	TRANSLATE_LABEL,
+	TURN_LIST_INTO_TABLE_LABEL,
+	WRITE_POST_FROM_LIST_LABEL,
+} from '../constants.js';
+
+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 function mapActionToHumanText(
+	action: string,
+	options: MapActionToHumanTextOptions = {}
+): string | null {
+	const { language, tone } = options;
+	const languageCode = language?.split( ' (' )[ 0 ];
+
+	switch ( action ) {
+		case PROMPT_TYPE_CHANGE_LANGUAGE:
+			return `${ TRANSLATE_LABEL }: ${ LANGUAGE_MAP[ languageCode ].label }`;
+		case PROMPT_TYPE_CHANGE_TONE:
+			return `${ TONE_LABEL }: ${ PROMPT_TONES_MAP[ tone ].label }`;
+		case PROMPT_TYPE_CORRECT_SPELLING:
+			return CORRECT_SPELLING_LABEL;
+		case PROMPT_TYPE_SIMPLIFY:
+			return SIMPLIFY_LABEL;
+		case PROMPT_TYPE_SUMMARIZE:
+			return SUMMARIZE_LABEL;
+		case PROMPT_TYPE_MAKE_LONGER:
+			return MAKE_LONGER_LABEL;
+		case PROMPT_TYPE_MAKE_SHORTER:
+			return MAKE_SHORTER_LABEL;
+		case PROMPT_TYPE_TRANSFORM_LIST_TO_TABLE:
+			return TURN_LIST_INTO_TABLE_LABEL;
+		case PROMPT_TYPE_WRITE_POST_FROM_LIST:
+			return WRITE_POST_FROM_LIST_LABEL;
+		case PROMPT_TYPE_GENERATE_TITLE:
+			return GENERATE_TITLE_LABEL;
+		case PROMPT_TYPE_SUMMARY_BY_TITLE:
+			return SUMMARY_BASED_ON_TITLE_LABEL;
+		case PROMPT_TYPE_CONTINUE:
+			return CONTINUE_LABEL;
+		default:
+			return null;
+	}
+}

package/src/logo-generator/components/generator-modal.tsx

@@ -91,7 +91,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 
 			// Then generate the logo based on the prompt.
 			setLoadingState( 'generating' );
-			await generateLogo( { prompt } );
+			await generateLogo( { prompt, style: 'none' } );
 			setLoadingState( null );
 		} catch ( error ) {
 			debug( 'Error generating first logo', error );