@automattic/jetpack-ai-client 0.25.0 → 0.25.2

package/CHANGELOG.md

@@ -5,17 +5,29 @@ 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.2] - 2024-12-16
+### Changed
+- Updated package dependencies. [#40564]
+
+### Fixed
+- Fixed lints following ESLint rule changes for TS. [#40584]
+
+## [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]
+- 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]
+- 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]
+- AI Client: add effect on AiModalInputPrompt to update/set prompt on prop update. [#40113]
 
 ## [0.24.2] - 2024-11-11
 ### Changed
@@ -471,6 +483,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.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
 [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

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/fair-usage-notice.d.ts

@@ -5,7 +5,7 @@ type FairUsageNoticeProps = {
  * The fair usage notice component.
  * @param {FairUsageNoticeProps}         props         - Fair usage notice component props.
  * @param {FairUsageNoticeProps.variant} props.variant - The variant of the notice to render.
- * @return {ReactElement} the Notice component with the fair usage message.
+ * @return the Notice component with the fair usage message.
  */
 export declare const FairUsageNotice: ({ variant }: FairUsageNoticeProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/build/ai-client/src/logo-generator/components/fair-usage-notice.js

@@ -5,7 +5,7 @@ import useFairUsageNoticeMessage from '../hooks/use-fair-usage-notice-message.js
  * The fair usage notice component.
  * @param {FairUsageNoticeProps}         props         - Fair usage notice component props.
  * @param {FairUsageNoticeProps.variant} props.variant - The variant of the notice to render.
- * @return {ReactElement} the Notice component with the fair usage message.
+ * @return the Notice component with the fair usage message.
  */
 export const FairUsageNotice = ({ variant = 'error' }) => {
     const useFairUsageNoticeMessageElement = useFairUsageNoticeMessage();

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.js

@@ -60,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: actionDisabled, 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();

package/build/ai-client/src/logo-generator/hooks/use-fair-usage-notice-message.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
-declare const useFairUsageNoticeMessage: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+import { type Element } from '@wordpress/element';
+declare const useFairUsageNoticeMessage: () => Element;
 export default useFairUsageNoticeMessage;

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/build/ai-client/src/logo-generator/store/reducer.d.ts

@@ -1,4 +1,4 @@
-import type { AiFeatureStateProps, LogoGeneratorStateProp, RequestError } from './types.js';
+import type { AiFeatureStateProps, RequestError } from './types.js';
 import type { SiteDetails } from '../types.js';
 /**
  * Reducer for the Logo Generator store.
@@ -27,7 +27,7 @@ import type { SiteDetails } from '../types.js';
  * @param {boolean}                                                         action.isLoadingHistory      - Whether the history is being loaded
  * @return {LogoGeneratorStateProp} The new state
  */
-export default function reducer(state: LogoGeneratorStateProp, action: {
+export default function reducer(state: import("./types.js").LogoGeneratorStateProp, action: {
     type: string;
     feature?: AiFeatureStateProps;
     count?: number;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.25.0",
+	"version": "0.25.2",
 	"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.37",
-		"@automattic/jetpack-connection": "^0.35.19",
-		"@automattic/jetpack-shared-extension-utils": "^0.15.18",
+		"@automattic/jetpack-base-styles": "^0.6.39",
+		"@automattic/jetpack-connection": "^0.36.2",
+		"@automattic/jetpack-shared-extension-utils": "^0.16.2",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/react": "18.3.12",
 		"@types/wordpress__block-editor": "11.5.15",
-		"@wordpress/api-fetch": "7.12.0",
-		"@wordpress/blob": "4.12.0",
-		"@wordpress/block-editor": "14.7.0",
-		"@wordpress/components": "28.12.0",
-		"@wordpress/compose": "7.12.0",
-		"@wordpress/data": "10.12.0",
-		"@wordpress/element": "6.12.0",
-		"@wordpress/i18n": "5.12.0",
-		"@wordpress/icons": "10.12.0",
+		"@wordpress/api-fetch": "7.14.0",
+		"@wordpress/blob": "4.14.0",
+		"@wordpress/block-editor": "14.9.0",
+		"@wordpress/components": "29.0.0",
+		"@wordpress/compose": "7.14.0",
+		"@wordpress/data": "10.14.0",
+		"@wordpress/element": "6.14.0",
+		"@wordpress/i18n": "5.14.0",
+		"@wordpress/icons": "10.14.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/fair-usage-notice.tsx

@@ -1,9 +1,5 @@
 import { Notice } from '@wordpress/components';
 import useFairUsageNoticeMessage from '../hooks/use-fair-usage-notice-message.js';
-/**
- * Types
- */
-import type { ReactElement } from 'react';
 
 type FairUsageNoticeProps = {
 	variant?: 'error' | 'muted';
@@ -13,7 +9,7 @@ type FairUsageNoticeProps = {
  * The fair usage notice component.
  * @param {FairUsageNoticeProps}         props         - Fair usage notice component props.
  * @param {FairUsageNoticeProps.variant} props.variant - The variant of the notice to render.
- * @return {ReactElement} the Notice component with the fair usage message.
+ * @return the Notice component with the fair usage message.
  */
 export const FairUsageNotice = ( { variant = 'error' }: FairUsageNoticeProps ) => {
 	const useFairUsageNoticeMessageElement = useFairUsageNoticeMessage();

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;

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
  */
@@ -104,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 }
@@ -121,7 +120,7 @@ export const AiModalPromptInput = ( {
 			></div>
 			<Button
 				variant="primary"
-				className="jetpack-ai-logo-generator__prompt-submit"
+				className="jetpack-ai-image-generator__prompt-submit"
 				onClick={ generateHandler }
 				disabled={ actionDisabled }
 			>

package/src/logo-generator/hooks/use-fair-usage-notice-message.tsx

@@ -1,5 +1,5 @@
 import { useSelect } from '@wordpress/data';
-import { createInterpolateElement } from '@wordpress/element';
+import { createInterpolateElement, type Element } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import getRedirectUrl from '../../../../components/tools/jp-redirect/index.js';
 /**
@@ -11,7 +11,7 @@ import { STORE_NAME } from '../store/index.js';
  */
 import type { Selectors } from '../store/types.js';
 
-const useFairUsageNoticeMessage = () => {
+const useFairUsageNoticeMessage = (): Element => {
 	const { usagePeriod } = useSelect( select => {
 		const selectors: Selectors = select( STORE_NAME );
 		return {

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.
 	}
 }

package/src/logo-generator/store/reducer.ts

@@ -30,12 +30,7 @@ import {
 	ACTION_SET_IS_LOADING_HISTORY,
 } from './constants.js';
 import INITIAL_STATE from './initial-state.js';
-import type {
-	AiFeatureStateProps,
-	LogoGeneratorStateProp,
-	RequestError,
-	TierLimitProp,
-} from './types.js';
+import type { AiFeatureStateProps, RequestError, TierLimitProp } from './types.js';
 import type { SiteDetails } from '../types.js';
 
 /**