@automattic/jetpack-ai-client 0.24.3 → 0.25.1

package/CHANGELOG.md

@@ -5,6 +5,19 @@ 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.1] - 2024-12-09
+### Changed
+- AI Assistant: Add disclaimer to image generation modals [#40397]
+- Updated package dependencies. [#40363]
+
+## [0.25.0] - 2024-11-25
+### Added
+- AI Client: split disabled prop to allow disabling input and action button separately [#40210]
+
+### Changed
+- AI Client: fix prompt cursor to text when editable [#40247]
+- Updated package dependencies. [#40288]
+
 ## [0.24.3] - 2024-11-18
 ### Changed
 - AI Client: add effect on AiModalInputPrompt to update/set prompt on prop update [#40113]
@@ -463,6 +476,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.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
 [0.24.3]: https://github.com/Automattic/jetpack-ai-client/compare/v0.24.2...v0.24.3
 [0.24.2]: https://github.com/Automattic/jetpack-ai-client/compare/v0.24.1...v0.24.2
 [0.24.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.24.0...v0.24.1

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

@@ -0,0 +1,20 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+/**
+ * Types
+ */
+import type React from 'react';
+type AiModalFooterProps = {
+    onGuidelinesClick?: () => void;
+    onFeedbackClick?: () => void;
+};
+/**
+ * AiModalFooter component.
+ *
+ * @param {AiModalFooterProps} props - component props.
+ * @return {React.ReactElement} - rendered component.
+ */
+export default function AiModalFooter({ onGuidelinesClick, onFeedbackClick, }: AiModalFooterProps): React.ReactElement;
+export {};

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Icon, info } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+/**
+ * AiModalFooter component.
+ *
+ * @param {AiModalFooterProps} props - component props.
+ * @return {React.ReactElement} - rendered component.
+ */
+export default function AiModalFooter({ onGuidelinesClick, onFeedbackClick, }) {
+    const handleGuidelinesClick = useCallback(() => {
+        onGuidelinesClick?.();
+    }, [onGuidelinesClick]);
+    const handleFeedbackClick = useCallback(() => {
+        onFeedbackClick?.();
+    }, [onFeedbackClick]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "ai-image-modal__footer-disclaimer", children: [_jsx(Icon, { icon: info }), _jsx("span", { children: __('Generated images could be inaccurate, biased or include text.', 'jetpack-ai-client') }), _jsx(Button, { variant: "link", className: "ai-image-modal__guidelines-button", href: "https://jetpack.com/redirect/?source=ai-guidelines", target: "_blank", onClick: handleGuidelinesClick, children: _jsxs("span", { children: [__('Guidelines', 'jetpack-ai-client'), " \u2197"] }) })] }), _jsx(Button, { variant: "link", className: "ai-image-modal__feedback-button", href: "https://jetpack.com/redirect/?source=jetpack-ai-feedback", target: "_blank", onClick: handleFeedbackClick, children: _jsxs("span", { children: [__('Give feedback', 'jetpack-ai-client'), " \u2197"] }) })] }));
+}

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 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';
 export { GuidelineMessage, UpgradeMessage, ErrorMessage, default as FooterMessage, } from './message/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 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';
 export { GuidelineMessage, UpgradeMessage, ErrorMessage, default as FooterMessage, } from './message/index.js';

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

@@ -11,8 +11,7 @@ export declare const MESSAGE_SEVERITY_WARNING = "warning";
 export declare const MESSAGE_SEVERITY_ERROR = "error";
 export declare const MESSAGE_SEVERITY_SUCCESS = "success";
 export declare const MESSAGE_SEVERITY_INFO = "info";
-declare const messageSeverityTypes: readonly ["warning", "error", "success", "info"];
-export type MessageSeverityProp = (typeof messageSeverityTypes)[number] | null;
+export type MessageSeverityProp = typeof MESSAGE_SEVERITY_WARNING | typeof MESSAGE_SEVERITY_ERROR | typeof MESSAGE_SEVERITY_SUCCESS | typeof MESSAGE_SEVERITY_INFO | null;
 export type MessageProps = {
     icon?: React.ReactNode;
     severity?: MessageSeverityProp;
@@ -38,33 +37,32 @@ export type ErrorMessageProps = {
  * React component to render a block message.
  *
  * @param {MessageProps} props - Component props.
- * @return {React.ReactElement }    Banner component.
+ * @return {React.ReactElement}    Banner component.
  */
 export default function Message({ severity, icon, showSidebarIcon, onSidebarIconClick, children, }: MessageProps): React.ReactElement;
 /**
  * React component to render a guideline message.
  *
- * @return {React.ReactElement } - Message component.
+ * @return {React.ReactElement} - Message component.
  */
 export declare function GuidelineMessage(): React.ReactElement;
 /**
  * React component to render a fair usage limit message.
  *
- * @return {React.ReactElement } - Message component.
+ * @return {React.ReactElement} - Message component.
  */
 export declare function FairUsageLimitMessage(): React.ReactElement;
 /**
  * React component to render an upgrade message for free tier users
  *
  * @param {number} requestsRemaining - Number of requests remaining.
- * @return {React.ReactElement } - Message component.
+ * @return {React.ReactElement} - Message component.
  */
 export declare function UpgradeMessage({ requestsRemaining, severity, onUpgradeClick, upgradeUrl, }: UpgradeMessageProps): React.ReactElement;
 /**
  * React component to render an error message
  *
  * @param {number} requestsRemaining - Number of requests remaining.
- * @return {React.ReactElement } - Message component.
+ * @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

@@ -17,12 +17,6 @@ export const MESSAGE_SEVERITY_WARNING = 'warning';
 export const MESSAGE_SEVERITY_ERROR = 'error';
 export const MESSAGE_SEVERITY_SUCCESS = 'success';
 export const MESSAGE_SEVERITY_INFO = 'info';
-const messageSeverityTypes = [
-    MESSAGE_SEVERITY_WARNING,
-    MESSAGE_SEVERITY_ERROR,
-    MESSAGE_SEVERITY_SUCCESS,
-    MESSAGE_SEVERITY_INFO,
-];
 const messageIconsMap = {
     [MESSAGE_SEVERITY_INFO]: null,
     [MESSAGE_SEVERITY_WARNING]: null,
@@ -33,23 +27,31 @@ const messageIconsMap = {
  * React component to render a block message.
  *
  * @param {MessageProps} props - Component props.
- * @return {React.ReactElement }    Banner component.
+ * @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 }) }))] }));
 }
+/**
+ * React component to render a learn more link.
+ *
+ * @return {React.ReactElement} - Learn more link component.
+ */
+function LearnMoreLink() {
+    return (_jsx(ExternalLink, { href: "https://jetpack.com/redirect/?source=ai-guidelines", children: __('Learn more', 'jetpack-ai-client') }));
+}
 /**
  * React component to render a guideline message.
  *
- * @return {React.ReactElement } - Message component.
+ * @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(ExternalLink, { href: "https://automattic.com/ai-guidelines", children: __('Learn more', 'jetpack-ai-client') })] }));
+    return (_jsxs(Message, { 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.
  *
- * @return {React.ReactElement } - Message component.
+ * @return {React.ReactElement} - Message component.
  */
 export function FairUsageLimitMessage() {
     const message = __("You've reached this month's request limit, per our <link>fair usage policy</link>", 'jetpack-ai-client');
@@ -62,7 +64,7 @@ export function FairUsageLimitMessage() {
  * React component to render an upgrade message for free tier users
  *
  * @param {number} requestsRemaining - Number of requests remaining.
- * @return {React.ReactElement } - Message component.
+ * @return {React.ReactElement} - Message component.
  */
 export function UpgradeMessage({ requestsRemaining, severity, onUpgradeClick, upgradeUrl, }) {
     let messageSeverity = severity;
@@ -77,7 +79,7 @@ export function UpgradeMessage({ requestsRemaining, severity, onUpgradeClick, up
  * React component to render an error message
  *
  * @param {number} requestsRemaining - Number of requests remaining.
- * @return {React.ReactElement } - Message component.
+ * @return {React.ReactElement} - Message component.
  */
 export function ErrorMessage({ error, code, onTryAgainClick, onUpgradeClick, upgradeUrl, }) {
     const errorMessage = error || __('Something went wrong', 'jetpack-ai-client');

package/build/ai-client/src/data-flow/context.d.ts

@@ -8,8 +8,7 @@ import React from 'react';
 import SuggestionsEventSource from '../suggestions-event-source/index.js';
 import type { AskQuestionOptionsArgProps } from '../ask-question/index.js';
 import type { RequestingErrorProps } from '../hooks/use-ai-suggestions/index.js';
-import type { PromptProp } from '../types.js';
-import type { RequestingStateProp } from '../types.js';
+import type { PromptProp, RequestingStateProp } from '../types.js';
 export type AiDataContextProps = {
     suggestion: string;
     requestingError: RequestingErrorProps;

package/build/ai-client/src/hooks/use-ai-suggestions/index.d.ts

@@ -3,8 +3,7 @@
  */
 import type { AskQuestionOptionsArgProps } from '../../ask-question/index.js';
 import type SuggestionsEventSource from '../../suggestions-event-source/index.js';
-import type { PromptProp, SuggestionErrorCode } from '../../types.js';
-import type { RequestingStateProp } from '../../types.js';
+import type { PromptProp, SuggestionErrorCode, RequestingStateProp } from '../../types.js';
 export type RequestingErrorProps = {
     code: SuggestionErrorCode;
     message: string;

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

@@ -6,20 +6,19 @@ import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { Modal, Button } from '@wordpress/components';
 import { useDispatch, select } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { external, Icon } from '@wordpress/icons';
 import clsx from 'clsx';
 import debugFactory from 'debug';
 import { useState, useEffect, useCallback, useRef } from 'react';
 /**
  * Internal dependencies
  */
+import AiModalFooter from '../../components/ai-modal-footer/index.js';
 import { DEFAULT_LOGO_COST, EVENT_MODAL_OPEN, EVENT_FEEDBACK, EVENT_MODAL_CLOSE, EVENT_GENERATE, } from '../constants.js';
 import { useCheckout } from '../hooks/use-checkout.js';
 import useLogoGenerator from '../hooks/use-logo-generator.js';
 import useRequestErrors from '../hooks/use-request-errors.js';
 import { isLogoHistoryEmpty, clearDeletedMedia } from '../lib/logo-storage.js';
 import { STORE_NAME } from '../store/index.js';
-// import { FairUsageNotice } from './fair-usage-notice.js';
 import { FeatureFetchFailureScreen } from './feature-fetch-failure-screen.js';
 import { FirstLoadScreen } from './first-load-screen.js';
 import { HistoryCarousel } from './history-carousel.js';
@@ -213,7 +212,7 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload = null,
         body = (_jsx(UpgradeScreen, { onCancel: closeModal, upgradeURL: upgradeURL, reason: needsFeature ? 'feature' : 'requests' }));
     }
     else {
-        body = (_jsxs(_Fragment, { children: [!logoAccepted && _jsx(Prompt, { initialPrompt: initialPrompt }), _jsx(LogoPresenter, { logo: selectedLogo, onApplyLogo: handleApplyLogo, logoAccepted: logoAccepted, siteId: String(siteId) }), logoAccepted ? (_jsxs("div", { className: "jetpack-ai-logo-generator__accept", children: [_jsx(VisitSiteBanner, {}), _jsx("div", { className: "jetpack-ai-logo-generator__accept-actions", children: _jsx(Button, { variant: "primary", onClick: closeModal, children: __('Close', 'jetpack-ai-client') }) })] })) : (_jsxs(_Fragment, { children: [_jsx(HistoryCarousel, {}), _jsx("div", { className: "jetpack-ai-logo-generator__footer", children: _jsxs(Button, { variant: "link", className: "jetpack-ai-logo-generator__feedback-button", href: "https://jetpack.com/redirect/?source=jetpack-ai-feedback", target: "_blank", onClick: handleFeedbackClick, children: [_jsx("span", { children: __('Provide feedback', 'jetpack-ai-client') }), _jsx(Icon, { icon: external, className: "icon" })] }) })] }))] }));
+        body = (_jsxs(_Fragment, { children: [!logoAccepted && _jsx(Prompt, { initialPrompt: initialPrompt }), _jsx(LogoPresenter, { logo: selectedLogo, onApplyLogo: handleApplyLogo, logoAccepted: logoAccepted, siteId: String(siteId) }), logoAccepted ? (_jsxs("div", { className: "jetpack-ai-logo-generator__accept", children: [_jsx(VisitSiteBanner, {}), _jsx("div", { className: "jetpack-ai-logo-generator__accept-actions", children: _jsx(Button, { variant: "primary", onClick: closeModal, children: __('Close', 'jetpack-ai-client') }) })] })) : (_jsxs(_Fragment, { children: [_jsx(HistoryCarousel, {}), _jsx("div", { className: "jetpack-ai-logo-generator__footer", children: _jsx(AiModalFooter, { onFeedbackClick: handleFeedbackClick }) })] }))] }));
     }
     return (_jsx(_Fragment, { children: isOpen && (_jsx(Modal, { className: "jetpack-ai-logo-generator-modal", onRequestClose: closeModal, shouldCloseOnClickOutside: false, shouldCloseOnEsc: false, title: __('Jetpack AI Logo Generator', 'jetpack-ai-client'), children: _jsx("div", { className: clsx('jetpack-ai-logo-generator-modal__body', {
                     'notice-modal': needsFeature || needsMoreRequests || featureFetchError || firstLogoPromptFetchError,

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

@@ -87,7 +87,6 @@ const LogoUpdated = ({ logo }) => {
     return (_jsxs(_Fragment, { children: [_jsx("img", { src: logo.url, alt: logo.description, className: "jetpack-ai-logo-generator-modal-presenter__logo" }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal-presenter__success-wrapper", children: [_jsx(Icon, { icon: _jsx(CheckIcon, {}) }), _jsx("span", { children: __('Your new logo was set to the block!', 'jetpack-ai-client') })] })] }));
 };
 export const LogoPresenter = ({ logo = null, loading = false, onApplyLogo, logoAccepted = false, siteId, }) => {
-    // eslint-disable-next-line @wordpress/no-unused-vars-before-return -- @todo Start extending jetpack-js-tools/eslintrc/react in eslintrc, then we can remove this disable comment.
     const { isRequestingImage } = useLogoGenerator();
     const { saveToLibraryError, logoUpdateError } = useRequestErrors();
     let logoContent;

package/build/ai-client/src/logo-generator/components/prompt.d.ts

@@ -3,14 +3,14 @@ import './prompt.scss';
 type PromptProps = {
     initialPrompt?: string;
 };
-export declare const AiModalPromptInput: ({ prompt, setPrompt, disabled, generateHandler, placeholder, buttonLabel, minPromptLength, }: {
+export declare const AiModalPromptInput: ({ prompt, setPrompt, disabled, actionDisabled, generateHandler, placeholder, buttonLabel, }: {
     prompt: string;
     setPrompt: Dispatch<SetStateAction<string>>;
     disabled: boolean;
+    actionDisabled: boolean;
     generateHandler: () => void;
     placeholder?: string;
     buttonLabel?: string;
-    minPromptLength?: number;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const Prompt: ({ initialPrompt }: PromptProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -21,9 +21,8 @@ import { FairUsageNotice } from './fair-usage-notice.js';
 import { UpgradeNudge } from './upgrade-nudge.js';
 import './prompt.scss';
 const debug = debugFactory('jetpack-ai-calypso:prompt-box');
-export const AiModalPromptInput = ({ prompt = '', setPrompt = () => { }, disabled = false, generateHandler = () => { }, placeholder = '', buttonLabel = '', minPromptLength = null, }) => {
+export const AiModalPromptInput = ({ prompt = '', setPrompt = () => { }, disabled = false, actionDisabled = false, generateHandler = () => { }, placeholder = '', buttonLabel = '', }) => {
     const inputRef = useRef(null);
-    const hasPrompt = prompt?.length >= (minPromptLength === null ? MINIMUM_PROMPT_LENGTH : minPromptLength);
     const onPromptInput = (event) => {
         setPrompt(event.target.textContent || '');
     };
@@ -61,9 +60,9 @@ export const AiModalPromptInput = ({ prompt = '', setPrompt = () => { }, disable
             inputRef.current.innerHTML = '';
         }
     };
-    return (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-query", children: [_jsx("div", { role: "textbox", tabIndex: 0, ref: inputRef, contentEditable: !disabled, 
+    return (_jsxs("div", { className: "jetpack-ai-image-generator__prompt-query", children: [_jsx("div", { role: "textbox", tabIndex: 0, ref: inputRef, contentEditable: !disabled, 
                 // The content editable div is expected to be updated by the enhance prompt, so warnings are suppressed
-                suppressContentEditableWarning: true, className: "prompt-query__input", onInput: onPromptInput, onPaste: onPromptPaste, onKeyDown: onKeyDown, onKeyUp: onKeyUp, "data-placeholder": placeholder }), _jsx(Button, { variant: "primary", className: "jetpack-ai-logo-generator__prompt-submit", onClick: generateHandler, disabled: disabled || !hasPrompt, children: buttonLabel || __('Generate', 'jetpack-ai-client') })] }));
+                suppressContentEditableWarning: true, className: "prompt-query__input", onInput: onPromptInput, onPaste: onPromptPaste, onKeyDown: onKeyDown, onKeyUp: onKeyUp, "data-placeholder": placeholder }), _jsx(Button, { variant: "primary", className: "jetpack-ai-image-generator__prompt-submit", onClick: generateHandler, disabled: actionDisabled, children: buttonLabel || __('Generate', 'jetpack-ai-client') })] }));
 };
 export const Prompt = ({ initialPrompt = '' }) => {
     const { tracks } = useAnalytics();
@@ -155,7 +154,7 @@ export const Prompt = ({ initialPrompt = '' }) => {
         setStyle(imageStyle);
         recordTracksEvent(EVENT_SWITCH_STYLE, { context, style: imageStyle });
     }, [context, setStyle, recordTracksEvent]);
-    return (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt", children: [_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-header", children: [_jsx("div", { className: "jetpack-ai-logo-generator__prompt-label", children: __('Describe your site:', 'jetpack-ai-client') }), _jsx("div", { className: "jetpack-ai-logo-generator__prompt-actions", children: _jsxs(Button, { variant: "link", disabled: isBusy || requireUpgrade || !hasPrompt, onClick: onEnhance, children: [_jsx(AiIcon, {}), enhanceButtonLabel] }) }), showStyleSelector && (_jsx(SelectControl, { __nextHasNoMarginBottom: true, value: style, options: styles, onChange: updateStyle, disabled: isBusy || requireUpgrade }))] }), _jsx(AiModalPromptInput, { prompt: prompt, setPrompt: setPrompt, generateHandler: onGenerate, disabled: isBusy || requireUpgrade, placeholder: __('Describe your site or simply ask for a logo specifying some details about it', 'jetpack-ai-client') }), _jsxs("div", { className: "jetpack-ai-logo-generator__prompt-footer", children: [!isUnlimited && !requireUpgrade && (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-requests", children: [_jsx("div", { children: sprintf(
+    return (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt", children: [_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-header", children: [_jsx("div", { className: "jetpack-ai-logo-generator__prompt-label", children: __('Describe your site:', 'jetpack-ai-client') }), _jsx("div", { className: "jetpack-ai-logo-generator__prompt-actions", children: _jsxs(Button, { variant: "link", disabled: isBusy || requireUpgrade || !hasPrompt, onClick: onEnhance, children: [_jsx(AiIcon, {}), enhanceButtonLabel] }) }), showStyleSelector && (_jsx(SelectControl, { __nextHasNoMarginBottom: true, value: style, options: styles, onChange: updateStyle, disabled: isBusy || requireUpgrade }))] }), _jsx(AiModalPromptInput, { prompt: prompt, setPrompt: setPrompt, generateHandler: onGenerate, disabled: isBusy || requireUpgrade, actionDisabled: isBusy || requireUpgrade || !hasPrompt, placeholder: __('Describe your site or simply ask for a logo specifying some details about it', 'jetpack-ai-client') }), _jsxs("div", { className: "jetpack-ai-logo-generator__prompt-footer", children: [!isUnlimited && !requireUpgrade && (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-requests", children: [_jsx("div", { children: sprintf(
                                 // translators: %u is the number of requests
                                 __('%u requests remaining.', 'jetpack-ai-client'), requestsRemaining) }), hasNextTier && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(Button, { variant: "link", href: checkoutUrl, target: "_blank", onClick: onUpgradeClick, children: __('Upgrade', 'jetpack-ai-client') })] })), "\u00A0", _jsx(Tooltip, { text: __('Logo generation costs 10 requests; prompt enhancement costs 1 request each', 'jetpack-ai-client'), placement: "bottom", children: _jsx(Icon, { className: "prompt-footer__icon", icon: info }) })] })), requireUpgrade && tierPlansEnabled && _jsx(UpgradeNudge, {}), requireUpgrade && !tierPlansEnabled && _jsx(FairUsageNotice, {}), enhancePromptFetchError && (_jsx("div", { className: "jetpack-ai-logo-generator__prompt-error", children: __('Error enhancing prompt. Please try again.', 'jetpack-ai-client') })), logoFetchError && (_jsx("div", { className: "jetpack-ai-logo-generator__prompt-error", children: __('Error generating logo. Please try again.', 'jetpack-ai-client') }))] })] }));
 };

package/build/ai-client/src/logo-generator/lib/logo-storage.js

@@ -119,7 +119,7 @@ export async function clearDeletedMedia(siteId) {
             .filter(({ exists }) => !exists)
             .forEach(({ mediaId }) => removeLogo({ siteId, mediaId }));
     }
-    catch (error) {
+    catch {
         // Assume that the media exists if there was a network error and do nothing to avoid data loss.
     }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.24.3",
+	"version": "0.25.1",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -44,21 +44,21 @@
 	"main": "./build/index.js",
 	"types": "./build/index.d.ts",
 	"dependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.36",
-		"@automattic/jetpack-connection": "^0.35.18",
-		"@automattic/jetpack-shared-extension-utils": "^0.15.17",
+		"@automattic/jetpack-base-styles": "^0.6.38",
+		"@automattic/jetpack-connection": "^0.36.1",
+		"@automattic/jetpack-shared-extension-utils": "^0.16.1",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/react": "18.3.12",
 		"@types/wordpress__block-editor": "11.5.15",
-		"@wordpress/api-fetch": "7.11.0",
-		"@wordpress/blob": "4.11.0",
-		"@wordpress/block-editor": "14.6.0",
-		"@wordpress/components": "28.11.0",
-		"@wordpress/compose": "7.11.0",
-		"@wordpress/data": "10.11.0",
-		"@wordpress/element": "6.11.0",
-		"@wordpress/i18n": "5.11.0",
-		"@wordpress/icons": "10.11.0",
+		"@wordpress/api-fetch": "7.13.0",
+		"@wordpress/blob": "4.13.0",
+		"@wordpress/block-editor": "14.8.0",
+		"@wordpress/components": "28.13.0",
+		"@wordpress/compose": "7.13.0",
+		"@wordpress/data": "10.13.0",
+		"@wordpress/element": "6.13.0",
+		"@wordpress/i18n": "5.13.0",
+		"@wordpress/icons": "10.13.0",
 		"clsx": "2.1.1",
 		"debug": "4.3.4",
 		"markdown-it": "14.0.0",

package/src/api-fetch/index.ts

@@ -8,7 +8,7 @@ import apiFetchMod from '@wordpress/api-fetch';
 // See https://arethetypeswrong.github.io/?p=@wordpress/api-fetch@6.47.0
 // This is a helper to simplify the usage of the api-fetch module on the ai-client package.
 const apiFetch = 'default' in apiFetchMod ? apiFetchMod.default : apiFetchMod;
-// eslint-disable-next-line @typescript-eslint/ban-types
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 type ApiFetchType = typeof apiFetch extends Function ? typeof apiFetch : typeof apiFetchMod;
 
 export default apiFetch as ApiFetchType;

package/src/ask-question/index.ts

@@ -35,7 +35,7 @@ export type AskQuestionOptionsArgProps = {
 	functions?: Array< {
 		name?: string;
 		arguments?: string;
-		// eslint-disable-next-line @typescript-eslint/ban-types
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 		implementation?: Function;
 	} >;
 };

package/src/components/ai-modal-footer/index.tsx

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Icon, info } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+/**
+ * Types
+ */
+import type React from 'react';
+
+type AiModalFooterProps = {
+	onGuidelinesClick?: () => void;
+	onFeedbackClick?: () => void;
+};
+
+/**
+ * AiModalFooter component.
+ *
+ * @param {AiModalFooterProps} props - component props.
+ * @return {React.ReactElement} - rendered component.
+ */
+export default function AiModalFooter( {
+	onGuidelinesClick,
+	onFeedbackClick,
+}: AiModalFooterProps ): React.ReactElement {
+	const handleGuidelinesClick = useCallback( () => {
+		onGuidelinesClick?.();
+	}, [ onGuidelinesClick ] );
+
+	const handleFeedbackClick = useCallback( () => {
+		onFeedbackClick?.();
+	}, [ onFeedbackClick ] );
+
+	return (
+		<>
+			<div className="ai-image-modal__footer-disclaimer">
+				<Icon icon={ info } />
+				<span>
+					{ __(
+						'Generated images could be inaccurate, biased or include text.',
+						'jetpack-ai-client'
+					) }
+				</span>
+				<Button
+					variant="link"
+					className="ai-image-modal__guidelines-button"
+					href="https://jetpack.com/redirect/?source=ai-guidelines"
+					target="_blank"
+					onClick={ handleGuidelinesClick }
+				>
+					<span>{ __( 'Guidelines', 'jetpack-ai-client' ) } ↗</span>
+				</Button>
+			</div>
+			<Button
+				variant="link"
+				className="ai-image-modal__feedback-button"
+				href="https://jetpack.com/redirect/?source=jetpack-ai-feedback"
+				target="_blank"
+				onClick={ handleFeedbackClick }
+			>
+				<span>{ __( 'Give feedback', 'jetpack-ai-client' ) } ↗</span>
+			</Button>
+		</>
+	);
+}

package/src/components/ai-modal-footer/style.scss

@@ -0,0 +1,15 @@
+.ai-image-modal__footer-disclaimer {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	color: var( --jp-gray-50 );
+	fill: var( --jp-gray-50 );
+
+	.components-button.is-link {
+		color: var( --jp-gray-50 );
+	}
+}
+
+.ai-image-modal__feedback-button.components-button.is-link {
+	text-decoration: none;
+}

package/src/components/index.ts

@@ -1,6 +1,7 @@
 export { AIControl, BlockAIControl, ExtensionAIControl } from './ai-control/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';
 export {
 	GuidelineMessage,
 	UpgradeMessage,

package/src/components/message/index.tsx

@@ -23,14 +23,12 @@ export const MESSAGE_SEVERITY_ERROR = 'error';
 export const MESSAGE_SEVERITY_SUCCESS = 'success';
 export const MESSAGE_SEVERITY_INFO = 'info';
 
-const messageSeverityTypes = [
-	MESSAGE_SEVERITY_WARNING,
-	MESSAGE_SEVERITY_ERROR,
-	MESSAGE_SEVERITY_SUCCESS,
-	MESSAGE_SEVERITY_INFO,
-] as const;
-
-export type MessageSeverityProp = ( typeof messageSeverityTypes )[ number ] | null;
+export type MessageSeverityProp =
+	| typeof MESSAGE_SEVERITY_WARNING
+	| typeof MESSAGE_SEVERITY_ERROR
+	| typeof MESSAGE_SEVERITY_SUCCESS
+	| typeof MESSAGE_SEVERITY_INFO
+	| null;
 
 export type MessageProps = {
 	icon?: React.ReactNode;
@@ -68,7 +66,7 @@ const messageIconsMap = {
  * React component to render a block message.
  *
  * @param {MessageProps} props - Component props.
- * @return {React.ReactElement }    Banner component.
+ * @return {React.ReactElement}    Banner component.
  */
 export default function Message( {
 	severity = MESSAGE_SEVERITY_INFO,
@@ -97,10 +95,23 @@ export default function Message( {
 	);
 }
 
+/**
+ * React component to render a learn more link.
+ *
+ * @return {React.ReactElement} - Learn more link component.
+ */
+function LearnMoreLink(): React.ReactElement {
+	return (
+		<ExternalLink href="https://jetpack.com/redirect/?source=ai-guidelines">
+			{ __( 'Learn more', 'jetpack-ai-client' ) }
+		</ExternalLink>
+	);
+}
+
 /**
  * React component to render a guideline message.
  *
- * @return {React.ReactElement } - Message component.
+ * @return {React.ReactElement} - Message component.
  */
 export function GuidelineMessage(): React.ReactElement {
 	return (
@@ -108,9 +119,7 @@ export function GuidelineMessage(): React.ReactElement {
 			<span>
 				{ __( 'AI-generated content could be inaccurate or biased.', 'jetpack-ai-client' ) }
 			</span>
-			<ExternalLink href="https://automattic.com/ai-guidelines">
-				{ __( 'Learn more', 'jetpack-ai-client' ) }
-			</ExternalLink>
+			<LearnMoreLink />
 		</Message>
 	);
 }
@@ -118,7 +127,7 @@ export function GuidelineMessage(): React.ReactElement {
 /**
  * React component to render a fair usage limit message.
  *
- * @return {React.ReactElement } - Message component.
+ * @return {React.ReactElement} - Message component.
  */
 export function FairUsageLimitMessage(): React.ReactElement {
 	const message = __(
@@ -138,7 +147,7 @@ export function FairUsageLimitMessage(): React.ReactElement {
  * React component to render an upgrade message for free tier users
  *
  * @param {number} requestsRemaining - Number of requests remaining.
- * @return {React.ReactElement } - Message component.
+ * @return {React.ReactElement} - Message component.
  */
 export function UpgradeMessage( {
 	requestsRemaining,
@@ -177,7 +186,7 @@ export function UpgradeMessage( {
  * React component to render an error message
  *
  * @param {number} requestsRemaining - Number of requests remaining.
- * @return {React.ReactElement } - Message component.
+ * @return {React.ReactElement} - Message component.
  */
 export function ErrorMessage( {
 	error,

package/src/data-flow/context.tsx

@@ -8,8 +8,7 @@ import React, { createContext } from 'react';
 import SuggestionsEventSource from '../suggestions-event-source/index.js';
 import type { AskQuestionOptionsArgProps } from '../ask-question/index.js';
 import type { RequestingErrorProps } from '../hooks/use-ai-suggestions/index.js';
-import type { PromptProp } from '../types.js';
-import type { RequestingStateProp } from '../types.js';
+import type { PromptProp, RequestingStateProp } from '../types.js';
 
 export type AiDataContextProps = {
 	/*

package/src/hooks/use-ai-suggestions/index.ts

@@ -21,8 +21,7 @@ import {
  */
 import type { AskQuestionOptionsArgProps } from '../../ask-question/index.js';
 import type SuggestionsEventSource from '../../suggestions-event-source/index.js';
-import type { PromptProp, SuggestionErrorCode } from '../../types.js';
-import type { RequestingStateProp } from '../../types.js';
+import type { PromptProp, SuggestionErrorCode, RequestingStateProp } from '../../types.js';
 
 export type RequestingErrorProps = {
 	/*

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

@@ -18,19 +18,6 @@
 			height: 100%;
 		}
 	}
-
-	.components-button {
-		&:focus:not(:disabled):not(.is-primary) {
-			box-shadow: 0 0 0 2px var(--color-link, #3858e9);
-		}
-
-		&.is-link {
-			text-decoration: none;
-			&:not(:disabled) {
-				color: var(--color-link, #3858e9);
-			}
-		}
-	}
 }
 
 .jetpack-ai-logo-generator-modal__body {
@@ -52,17 +39,7 @@
 
 .jetpack-ai-logo-generator__footer {
 	display: flex;
-
-	.jetpack-ai-logo-generator__feedback-button {
-		display: flex;
-		gap: 4px;
-		align-items: center;
-		margin-top: 8px;
-
-		.icon {
-			color: var(--studio-gray-20);
-		}
-	}
+	justify-content: space-between;
 }
 
 .jetpack-ai-logo-generator-modal__notice-message-wrapper {

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

@@ -5,13 +5,13 @@ import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { Modal, Button } from '@wordpress/components';
 import { useDispatch, select } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { external, Icon } from '@wordpress/icons';
 import clsx from 'clsx';
 import debugFactory from 'debug';
 import { useState, useEffect, useCallback, useRef } from 'react';
 /**
  * Internal dependencies
  */
+import AiModalFooter from '../../components/ai-modal-footer/index.js';
 import {
 	DEFAULT_LOGO_COST,
 	EVENT_MODAL_OPEN,
@@ -24,7 +24,6 @@ import useLogoGenerator from '../hooks/use-logo-generator.js';
 import useRequestErrors from '../hooks/use-request-errors.js';
 import { isLogoHistoryEmpty, clearDeletedMedia } from '../lib/logo-storage.js';
 import { STORE_NAME } from '../store/index.js';
-// import { FairUsageNotice } from './fair-usage-notice.js';
 import { FeatureFetchFailureScreen } from './feature-fetch-failure-screen.js';
 import { FirstLoadScreen } from './first-load-screen.js';
 import { HistoryCarousel } from './history-carousel.js';
@@ -303,16 +302,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 					<>
 						<HistoryCarousel />
 						<div className="jetpack-ai-logo-generator__footer">
-							<Button
-								variant="link"
-								className="jetpack-ai-logo-generator__feedback-button"
-								href="https://jetpack.com/redirect/?source=jetpack-ai-feedback"
-								target="_blank"
-								onClick={ handleFeedbackClick }
-							>
-								<span>{ __( 'Provide feedback', 'jetpack-ai-client' ) }</span>
-								<Icon icon={ external } className="icon" />
-							</Button>
+							<AiModalFooter onFeedbackClick={ handleFeedbackClick } />
 						</div>
 					</>
 				) }

package/src/logo-generator/components/logo-presenter.scss

@@ -4,6 +4,20 @@
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
+
+	.components-button {
+		&:focus:not(:disabled):not(.is-primary) {
+			box-shadow: 0 0 0 2px var(--color-link, #3858e9);
+		}
+
+		&.is-link {
+			text-decoration: none;
+
+			&:not(:disabled) {
+				color: var(--color-link, #3858e9);
+			}
+		}
+	}
 }
 
 .jetpack-ai-logo-generator-modal-presenter {

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

@@ -200,7 +200,6 @@ export const LogoPresenter: React.FC< LogoPresenterProps > = ( {
 	logoAccepted = false,
 	siteId,
 } ) => {
-	// eslint-disable-next-line @wordpress/no-unused-vars-before-return -- @todo Start extending jetpack-js-tools/eslintrc/react in eslintrc, then we can remove this disable comment.
 	const { isRequestingImage } = useLogoGenerator();
 	const { saveToLibraryError, logoUpdateError } = useRequestErrors();
 

package/src/logo-generator/components/prompt.scss

@@ -5,6 +5,20 @@
 	flex-direction: column;
 	gap: 8px;
 	font-size: var(--font-body-small);
+
+	.components-button {
+		&:focus:not(:disabled):not(.is-primary) {
+			box-shadow: 0 0 0 2px var(--color-link, #3858e9);
+		}
+
+		&.is-link {
+			text-decoration: none;
+
+			&:not(:disabled) {
+				color: var(--color-link, #3858e9);
+			}
+		}
+	}
 }
 
 .jetpack-ai-logo-generator__prompt-header {
@@ -30,7 +44,7 @@
 	}
 }
 
-.jetpack-ai-logo-generator__prompt-query {
+.jetpack-ai-image-generator__prompt-query {
 	display: flex;
 	padding: 8px 8px 8px var(--grid-unit-15, 16px);
 	justify-content: space-between;
@@ -64,6 +78,10 @@
 			color: var(--studio-gray-50, #646970);
 		}
 
+		&:not([contentEditable="false"]) {
+			cursor: text;
+		}
+
 		&[data-placeholder]:empty::before {
 			content: attr(data-placeholder);
 			color: var(--studio-gray-50, #646970);

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

@@ -6,8 +6,7 @@ import { Button, Tooltip, SelectControl } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, info } from '@wordpress/icons';
 import debugFactory from 'debug';
-import { useCallback, useEffect, useState, useRef } from 'react';
-import { Dispatch, SetStateAction } from 'react';
+import { useCallback, useEffect, useState, useRef, Dispatch, SetStateAction } from 'react';
 /**
  * Internal dependencies
  */
@@ -42,22 +41,20 @@ export const AiModalPromptInput = ( {
 	prompt = '',
 	setPrompt = () => {},
 	disabled = false,
+	actionDisabled = false,
 	generateHandler = () => {},
 	placeholder = '',
 	buttonLabel = '',
-	minPromptLength = null,
 }: {
 	prompt: string;
 	setPrompt: Dispatch< SetStateAction< string > >;
 	disabled: boolean;
+	actionDisabled: boolean;
 	generateHandler: () => void;
 	placeholder?: string;
 	buttonLabel?: string;
-	minPromptLength?: number;
 } ) => {
 	const inputRef = useRef< HTMLDivElement | null >( null );
-	const hasPrompt =
-		prompt?.length >= ( minPromptLength === null ? MINIMUM_PROMPT_LENGTH : minPromptLength );
 
 	const onPromptInput = ( event: React.ChangeEvent< HTMLInputElement > ) => {
 		setPrompt( event.target.textContent || '' );
@@ -106,7 +103,7 @@ export const AiModalPromptInput = ( {
 	};
 
 	return (
-		<div className="jetpack-ai-logo-generator__prompt-query">
+		<div className="jetpack-ai-image-generator__prompt-query">
 			<div
 				role="textbox"
 				tabIndex={ 0 }
@@ -123,9 +120,9 @@ export const AiModalPromptInput = ( {
 			></div>
 			<Button
 				variant="primary"
-				className="jetpack-ai-logo-generator__prompt-submit"
+				className="jetpack-ai-image-generator__prompt-submit"
 				onClick={ generateHandler }
-				disabled={ disabled || ! hasPrompt }
+				disabled={ actionDisabled }
 			>
 				{ buttonLabel || __( 'Generate', 'jetpack-ai-client' ) }
 			</Button>
@@ -283,6 +280,7 @@ export const Prompt = ( { initialPrompt = '' }: PromptProps ) => {
 				setPrompt={ setPrompt }
 				generateHandler={ onGenerate }
 				disabled={ isBusy || requireUpgrade }
+				actionDisabled={ isBusy || requireUpgrade || ! hasPrompt }
 				placeholder={ __(
 					'Describe your site or simply ask for a logo specifying some details about it',
 					'jetpack-ai-client'

package/src/logo-generator/lib/logo-storage.ts

@@ -162,7 +162,7 @@ export async function clearDeletedMedia( siteId: string ) {
 		responses
 			.filter( ( { exists } ) => ! exists )
 			.forEach( ( { mediaId } ) => removeLogo( { siteId, mediaId } ) );
-	} catch ( error ) {
+	} catch {
 		// Assume that the media exists if there was a network error and do nothing to avoid data loss.
 	}
 }