@automattic/jetpack-ai-client 0.15.0 → 0.16.0

package/CHANGELOG.md

@@ -5,6 +5,14 @@ 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.16.0] - 2024-07-29
+### Added
+- AI Logo Generator: support placement property on the generator modal, for tracking purposes. [#38574]
+
+### Fixed
+- AI Logo Generator: make the initial prompt update when the site name and description are fully laoded from store. [#38491]
+- AI Logo Generator: provide the saved media ID on the save logo callback. [#38552]
+
 ## [0.15.0] - 2024-07-22
 ### Added
 - Jetpack AI: Add logo generator codebase to the ai-client package. [#38391]
@@ -358,6 +366,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.16.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.15.0...v0.16.0
 [0.15.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.14.6...v0.15.0
 [0.14.6]: https://github.com/Automattic/jetpack-ai-client/compare/v0.14.5...v0.14.6
 [0.14.5]: https://github.com/Automattic/jetpack-ai-client/compare/v0.14.4...v0.14.5

package/build/logo-generator/components/generator-modal.js

@@ -13,7 +13,7 @@ import { useState, useEffect, useCallback, useRef } from 'react';
 /**
  * Internal dependencies
  */
-import { DEFAULT_LOGO_COST, EVENT_MODAL_OPEN, EVENT_FEEDBACK, EVENT_MODAL_CLOSE, EVENT_PLACEMENT_QUICK_LINKS, EVENT_GENERATE, } from '../constants.js';
+import { DEFAULT_LOGO_COST, EVENT_MODAL_OPEN, EVENT_FEEDBACK, EVENT_MODAL_CLOSE, EVENT_GENERATE, } from '../constants.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';
@@ -27,7 +27,7 @@ import { UpgradeScreen } from './upgrade-screen.js';
 import { VisitSiteBanner } from './visit-site-banner.js';
 import './generator-modal.scss';
 const debug = debugFactory('jetpack-ai-calypso:generator-modal');
-export const GeneratorModal = ({ isOpen, onClose, siteDetails, context, }) => {
+export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, siteDetails, context, placement, }) => {
     const { tracks } = useAnalytics();
     const { recordEvent: recordTracksEvent } = tracks;
     const { setSiteDetails, fetchAiAssistantFeature, loadLogoHistory } = useDispatch(STORE_NAME);
@@ -41,7 +41,6 @@ export const GeneratorModal = ({ isOpen, onClose, siteDetails, context, }) => {
     const { selectedLogo, getAiAssistantFeature, generateFirstPrompt, generateLogo, setContext } = useLogoGenerator();
     const { featureFetchError, firstLogoPromptFetchError, clearErrors } = useRequestErrors();
     const siteId = siteDetails?.ID;
-    const siteURL = siteDetails?.URL;
     const [logoAccepted, setLogoAccepted] = useState(false);
     // First fetch the feature data so we have the most up-to-date info from the backend.
     const feature = getAiAssistantFeature();
@@ -115,9 +114,9 @@ export const GeneratorModal = ({ isOpen, onClose, siteDetails, context, }) => {
     ]);
     const handleModalOpen = useCallback(async () => {
         setContext(context);
-        recordTracksEvent(EVENT_MODAL_OPEN, { context, placement: EVENT_PLACEMENT_QUICK_LINKS });
+        recordTracksEvent(EVENT_MODAL_OPEN, { context, placement });
         initializeModal();
-    }, [setContext, context, initializeModal]);
+    }, [setContext, context, placement, initializeModal]);
     const closeModal = () => {
         // Reset the state when the modal is closed, so we trigger the modal initialization again when it's opened.
         needsToHandleModalOpen.current = true;
@@ -127,17 +126,11 @@ export const GeneratorModal = ({ isOpen, onClose, siteDetails, context, }) => {
         setNeedsMoreRequests(false);
         clearErrors();
         setLogoAccepted(false);
-        recordTracksEvent(EVENT_MODAL_CLOSE, { context, placement: EVENT_PLACEMENT_QUICK_LINKS });
+        recordTracksEvent(EVENT_MODAL_CLOSE, { context, placement });
     };
-    const handleApplyLogo = () => {
+    const handleApplyLogo = (mediaId) => {
         setLogoAccepted(true);
-    };
-    const handleCloseAndReload = () => {
-        closeModal();
-        setTimeout(() => {
-            // Reload the page to update the logo.
-            window.location.reload();
-        }, 1000);
+        onApplyLogo?.(mediaId);
     };
     const handleFeedbackClick = () => {
         recordTracksEvent(EVENT_FEEDBACK, { context });
@@ -176,9 +169,9 @@ export const GeneratorModal = ({ isOpen, onClose, siteDetails, context, }) => {
         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, { siteURL: siteURL, onVisitBlankTarget: handleCloseAndReload }), _jsxs("div", { className: "jetpack-ai-logo-generator__accept-actions", children: [_jsx(Button, { variant: "link", onClick: handleCloseAndReload, children: __('Close and refresh', 'jetpack-ai-client') }), _jsx(Button, { href: siteURL, variant: "primary", children: __('Visit site', '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, { onVisitBlankTarget: closeModal }), _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" })] }) })] }))] }));
     }
-    return (_jsx(_Fragment, { children: isOpen && (_jsx(Modal, { className: "jetpack-ai-logo-generator-modal", onRequestClose: logoAccepted ? handleCloseAndReload : closeModal, shouldCloseOnClickOutside: false, shouldCloseOnEsc: false, title: __('Jetpack AI Logo Generator', 'jetpack-ai-client'), children: _jsx("div", { className: clsx('jetpack-ai-logo-generator-modal__body', {
+    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,
                 }), children: body }) })) }));
 };

package/build/logo-generator/components/logo-presenter.js

@@ -55,36 +55,30 @@ const SaveInLibraryButton = ({ siteId }) => {
     const savedLabel = __('Saved', 'jetpack-ai-client');
     return !saving && !saved ? (_jsxs(Button, { className: "jetpack-ai-logo-generator-modal-presenter__action", onClick: handleClick, children: [_jsx(Icon, { icon: _jsx(MediaIcon, {}) }), _jsx("span", { className: "action-text", children: __('Save in Library', 'jetpack-ai-client') })] })) : (_jsxs("button", { className: "jetpack-ai-logo-generator-modal-presenter__action", children: [_jsx(Icon, { icon: saving ? _jsx(MediaIcon, {}) : _jsx(CheckIcon, {}) }), _jsx("span", { className: "action-text", children: saving ? savingLabel : savedLabel })] }));
 };
-const UseOnSiteButton = ({ onApplyLogo }) => {
+const UseOnSiteButton = ({ onApplyLogo, }) => {
     const { tracks } = useAnalytics();
     const { recordEvent: recordTracksEvent } = tracks;
-    const { applyLogo, isSavingLogoToLibrary, isApplyingLogo, selectedLogo, logos, selectedLogoIndex, context, } = useLogoGenerator();
+    const { isSavingLogoToLibrary, selectedLogo, logos, selectedLogoIndex, context } = useLogoGenerator();
     const handleClick = async () => {
-        if (!isApplyingLogo && !isSavingLogoToLibrary) {
+        if (!isSavingLogoToLibrary) {
             recordTracksEvent(EVENT_USE, {
                 context,
                 logos_count: logos.length,
                 selected_logo: selectedLogoIndex != null ? selectedLogoIndex + 1 : 0,
             });
-            try {
-                await applyLogo();
-                onApplyLogo();
-            }
-            catch (error) {
-                debug('Error applying logo', error);
-            }
+            onApplyLogo?.(selectedLogo?.mediaId);
         }
     };
-    return isApplyingLogo && !isSavingLogoToLibrary ? (_jsxs("button", { className: "jetpack-ai-logo-generator-modal-presenter__action", children: [_jsx(Icon, { icon: _jsx(LogoIcon, {}) }), _jsx("span", { className: "action-text", children: __('Applying logo…', 'jetpack-ai-client') })] })) : (_jsxs(Button, { className: "jetpack-ai-logo-generator-modal-presenter__action", onClick: handleClick, disabled: isSavingLogoToLibrary || !selectedLogo?.mediaId, children: [_jsx(Icon, { icon: _jsx(LogoIcon, {}) }), _jsx("span", { className: "action-text", children: __('Use on Site', 'jetpack-ai-client') })] }));
+    return (_jsxs(Button, { className: "jetpack-ai-logo-generator-modal-presenter__action", onClick: handleClick, disabled: isSavingLogoToLibrary || !selectedLogo?.mediaId, children: [_jsx(Icon, { icon: _jsx(LogoIcon, {}) }), _jsx("span", { className: "action-text", children: __('Use on block', 'jetpack-ai-client') })] }));
 };
 const LogoLoading = () => {
     return (_jsxs(_Fragment, { children: [_jsx(ImageLoader, { className: "jetpack-ai-logo-generator-modal-presenter__logo" }), _jsx("span", { className: "jetpack-ai-logo-generator-modal-presenter__loading-text", children: __('Generating new logo…', 'jetpack-ai-client') })] }));
 };
-const LogoReady = ({ siteId, logo, onApplyLogo, }) => {
+const LogoReady = ({ siteId, logo, onApplyLogo }) => {
     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__action-wrapper", children: [_jsx("span", { className: "jetpack-ai-logo-generator-modal-presenter__description", children: logo.description }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal-presenter__actions", children: [_jsx(SaveInLibraryButton, { siteId: siteId }), _jsx(UseOnSiteButton, { onApplyLogo: onApplyLogo })] })] })] }));
 };
 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 logo has been successfully updated!', 'jetpack-ai-client') })] })] }));
+    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, }) => {
     const { isRequestingImage } = useLogoGenerator();

package/build/logo-generator/components/visit-site-banner.d.ts

@@ -5,6 +5,5 @@ import './visit-site-banner.scss';
 import type React from 'react';
 export declare const VisitSiteBanner: React.FC<{
     className?: string;
-    siteURL?: string;
     onVisitBlankTarget: () => void;
 }>;

package/build/logo-generator/components/visit-site-banner.js

@@ -11,6 +11,6 @@ import clsx from 'clsx';
  */
 import jetpackLogo from '../assets/images/jetpack-logo.svg';
 import './visit-site-banner.scss';
-export const VisitSiteBanner = ({ className = null, siteURL = '#', onVisitBlankTarget }) => {
-    return (_jsxs("div", { className: clsx('jetpack-ai-logo-generator-modal-visit-site-banner', className), children: [_jsx("div", { className: "jetpack-ai-logo-generator-modal-visit-site-banner__jetpack-logo", children: _jsx("img", { src: jetpackLogo, alt: "Jetpack" }) }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal-visit-site-banner__content", children: [_jsx("strong", { children: __('Do you want to know all the amazing things you can do with Jetpack AI?', 'jetpack-ai-client') }), _jsx("span", { children: __('Generate and tweak content, create forms, get feedback and much more.', 'jetpack-ai-client') }), _jsx("div", { children: _jsxs(Button, { variant: "link", href: siteURL, target: "_blank", onClick: onVisitBlankTarget, children: [__('Visit website', 'jetpack-ai-client'), _jsx(Icon, { icon: external, size: 20 })] }) })] })] }));
+export const VisitSiteBanner = ({ className = null, onVisitBlankTarget }) => {
+    return (_jsxs("div", { className: clsx('jetpack-ai-logo-generator-modal-visit-site-banner', className), children: [_jsx("div", { className: "jetpack-ai-logo-generator-modal-visit-site-banner__jetpack-logo", children: _jsx("img", { src: jetpackLogo, alt: "Jetpack" }) }), _jsxs("div", { className: "jetpack-ai-logo-generator-modal-visit-site-banner__content", children: [_jsx("strong", { children: __('Do you want to know all the amazing things you can do with Jetpack AI?', 'jetpack-ai-client') }), _jsx("span", { children: __('Generate and tweak content, create forms, get feedback and much more.', 'jetpack-ai-client') }), _jsx("div", { children: _jsxs(Button, { variant: "link", href: "https://jetpack.com/redirect/?source=logo_generator_learn_more_about_jetpack_ai", target: "_blank", onClick: onVisitBlankTarget, children: [__('Learn more about Jetpack AI', 'jetpack-ai-client'), _jsx(Icon, { icon: external, size: 20 })] }) })] })] }));
 };

package/build/logo-generator/hooks/use-logo-generator.js

@@ -78,7 +78,7 @@ Site description: ${description}`;
             setFirstLogoPromptFetchError(error);
             throw error;
         }
-    }, [setFirstLogoPromptFetchError, increaseAiAssistantRequestsCount]);
+    }, [setFirstLogoPromptFetchError, increaseAiAssistantRequestsCount, name, description]);
     const enhancePrompt = async function ({ prompt }) {
         setEnhancePromptFetchError(null);
         increaseAiAssistantRequestsCount();

package/build/logo-generator/lib/wpcom-limited-request.js

@@ -7,7 +7,6 @@ import apiFetch from '../../api-fetch/index.js';
  */
 const MAX_CONCURRENT_REQUESTS = 5;
 let concurrentCounter = 0;
-let lastCallTimestamp = null;
 /**
  * Concurrency-limited request to wpcom-proxy-request.
  * @param { object } params - The request params, as expected by apiFetch.
@@ -20,13 +19,6 @@ export default async function wpcomLimitedRequest(params) {
         concurrentCounter -= 1;
         throw new Error('Too many requests');
     }
-    const now = Date.now();
-    // Check if the last call was made less than 100 milliseconds ago
-    if (lastCallTimestamp && now - lastCallTimestamp < 100) {
-        concurrentCounter -= 1;
-        throw new Error('Too many requests');
-    }
-    lastCallTimestamp = now; // Update the timestamp
     return apiFetch(params).finally(() => {
         concurrentCounter -= 1;
     });

package/build/logo-generator/types.d.ts

@@ -13,12 +13,14 @@ export interface GeneratorModalProps {
     siteDetails?: SiteDetails;
     isOpen: boolean;
     onClose: () => void;
+    onApplyLogo: (mediaId: number) => void;
     context: string;
+    placement: string;
 }
 export interface LogoPresenterProps {
     logo?: Logo;
     loading?: boolean;
-    onApplyLogo: () => void;
+    onApplyLogo: (mediaId: number) => void;
     logoAccepted?: boolean;
     siteId: string | number;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.15.0",
+	"version": "0.16.0",
 	"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,7 +44,7 @@
 	"dependencies": {
 		"@automattic/jetpack-base-styles": "^0.6.28",
 		"@automattic/jetpack-connection": "^0.34.1",
-		"@automattic/jetpack-shared-extension-utils": "^0.14.19",
+		"@automattic/jetpack-shared-extension-utils": "^0.15.0",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/react": "18.3.1",
 		"@types/wordpress__block-editor": "11.5.14",

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

@@ -17,7 +17,6 @@ import {
 	EVENT_MODAL_OPEN,
 	EVENT_FEEDBACK,
 	EVENT_MODAL_CLOSE,
-	EVENT_PLACEMENT_QUICK_LINKS,
 	EVENT_GENERATE,
 } from '../constants.js';
 import useLogoGenerator from '../hooks/use-logo-generator.js';
@@ -43,8 +42,10 @@ const debug = debugFactory( 'jetpack-ai-calypso:generator-modal' );
 export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 	isOpen,
 	onClose,
+	onApplyLogo,
 	siteDetails,
 	context,
+	placement,
 } ) => {
 	const { tracks } = useAnalytics();
 	const { recordEvent: recordTracksEvent } = tracks;
@@ -62,7 +63,6 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 		useLogoGenerator();
 	const { featureFetchError, firstLogoPromptFetchError, clearErrors } = useRequestErrors();
 	const siteId = siteDetails?.ID;
-	const siteURL = siteDetails?.URL;
 	const [ logoAccepted, setLogoAccepted ] = useState( false );
 
 	// First fetch the feature data so we have the most up-to-date info from the backend.
@@ -148,10 +148,10 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 
 	const handleModalOpen = useCallback( async () => {
 		setContext( context );
-		recordTracksEvent( EVENT_MODAL_OPEN, { context, placement: EVENT_PLACEMENT_QUICK_LINKS } );
+		recordTracksEvent( EVENT_MODAL_OPEN, { context, placement } );
 
 		initializeModal();
-	}, [ setContext, context, initializeModal ] );
+	}, [ setContext, context, placement, initializeModal ] );
 
 	const closeModal = () => {
 		// Reset the state when the modal is closed, so we trigger the modal initialization again when it's opened.
@@ -162,20 +162,12 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 		setNeedsMoreRequests( false );
 		clearErrors();
 		setLogoAccepted( false );
-		recordTracksEvent( EVENT_MODAL_CLOSE, { context, placement: EVENT_PLACEMENT_QUICK_LINKS } );
+		recordTracksEvent( EVENT_MODAL_CLOSE, { context, placement } );
 	};
 
-	const handleApplyLogo = () => {
+	const handleApplyLogo = ( mediaId: number ) => {
 		setLogoAccepted( true );
-	};
-
-	const handleCloseAndReload = () => {
-		closeModal();
-
-		setTimeout( () => {
-			// Reload the page to update the logo.
-			window.location.reload();
-		}, 1000 );
+		onApplyLogo?.( mediaId );
 	};
 
 	const handleFeedbackClick = () => {
@@ -235,13 +227,10 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 				/>
 				{ logoAccepted ? (
 					<div className="jetpack-ai-logo-generator__accept">
-						<VisitSiteBanner siteURL={ siteURL } onVisitBlankTarget={ handleCloseAndReload } />
+						<VisitSiteBanner onVisitBlankTarget={ closeModal } />
 						<div className="jetpack-ai-logo-generator__accept-actions">
-							<Button variant="link" onClick={ handleCloseAndReload }>
-								{ __( 'Close and refresh', 'jetpack-ai-client' ) }
-							</Button>
-							<Button href={ siteURL } variant="primary">
-								{ __( 'Visit site', 'jetpack-ai-client' ) }
+							<Button variant="primary" onClick={ closeModal }>
+								{ __( 'Close', 'jetpack-ai-client' ) }
 							</Button>
 						</div>
 					</div>
@@ -271,7 +260,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 			{ isOpen && (
 				<Modal
 					className="jetpack-ai-logo-generator-modal"
-					onRequestClose={ logoAccepted ? handleCloseAndReload : closeModal }
+					onRequestClose={ closeModal }
 					shouldCloseOnClickOutside={ false }
 					shouldCloseOnEsc={ false }
 					title={ __( 'Jetpack AI Logo Generator', 'jetpack-ai-client' ) }

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

@@ -86,49 +86,34 @@ const SaveInLibraryButton: React.FC< { siteId: string } > = ( { siteId } ) => {
 	);
 };
 
-const UseOnSiteButton: React.FC< { onApplyLogo: () => void } > = ( { onApplyLogo } ) => {
+const UseOnSiteButton: React.FC< { onApplyLogo: ( mediaId: number ) => void } > = ( {
+	onApplyLogo,
+} ) => {
 	const { tracks } = useAnalytics();
 	const { recordEvent: recordTracksEvent } = tracks;
-	const {
-		applyLogo,
-		isSavingLogoToLibrary,
-		isApplyingLogo,
-		selectedLogo,
-		logos,
-		selectedLogoIndex,
-		context,
-	} = useLogoGenerator();
+	const { isSavingLogoToLibrary, selectedLogo, logos, selectedLogoIndex, context } =
+		useLogoGenerator();
 
 	const handleClick = async () => {
-		if ( ! isApplyingLogo && ! isSavingLogoToLibrary ) {
+		if ( ! isSavingLogoToLibrary ) {
 			recordTracksEvent( EVENT_USE, {
 				context,
 				logos_count: logos.length,
 				selected_logo: selectedLogoIndex != null ? selectedLogoIndex + 1 : 0,
 			} );
 
-			try {
-				await applyLogo();
-				onApplyLogo();
-			} catch ( error ) {
-				debug( 'Error applying logo', error );
-			}
+			onApplyLogo?.( selectedLogo?.mediaId );
 		}
 	};
 
-	return isApplyingLogo && ! isSavingLogoToLibrary ? (
-		<button className="jetpack-ai-logo-generator-modal-presenter__action">
-			<Icon icon={ <LogoIcon /> } />
-			<span className="action-text">{ __( 'Applying logo…', 'jetpack-ai-client' ) }</span>
-		</button>
-	) : (
+	return (
 		<Button
 			className="jetpack-ai-logo-generator-modal-presenter__action"
 			onClick={ handleClick }
 			disabled={ isSavingLogoToLibrary || ! selectedLogo?.mediaId }
 		>
 			<Icon icon={ <LogoIcon /> } />
-			<span className="action-text">{ __( 'Use on Site', 'jetpack-ai-client' ) }</span>
+			<span className="action-text">{ __( 'Use on block', 'jetpack-ai-client' ) }</span>
 		</Button>
 	);
 };
@@ -144,11 +129,11 @@ const LogoLoading: React.FC = () => {
 	);
 };
 
-const LogoReady: React.FC< { siteId: string; logo: Logo; onApplyLogo: () => void } > = ( {
-	siteId,
-	logo,
-	onApplyLogo,
-} ) => {
+const LogoReady: React.FC< {
+	siteId: string;
+	logo: Logo;
+	onApplyLogo: ( mediaId: number ) => void;
+} > = ( { siteId, logo, onApplyLogo } ) => {
 	return (
 		<>
 			<img
@@ -179,7 +164,7 @@ const LogoUpdated: React.FC< { logo: Logo } > = ( { logo } ) => {
 			/>
 			<div className="jetpack-ai-logo-generator-modal-presenter__success-wrapper">
 				<Icon icon={ <CheckIcon /> } />
-				<span>{ __( 'Your logo has been successfully updated!', 'jetpack-ai-client' ) }</span>
+				<span>{ __( 'Your new logo was set to the block!', 'jetpack-ai-client' ) }</span>
 			</div>
 		</>
 	);

package/src/logo-generator/components/visit-site-banner.tsx

@@ -17,9 +17,8 @@ import type React from 'react';
 
 export const VisitSiteBanner: React.FC< {
 	className?: string;
-	siteURL?: string;
 	onVisitBlankTarget: () => void;
-} > = ( { className = null, siteURL = '#', onVisitBlankTarget } ) => {
+} > = ( { className = null, onVisitBlankTarget } ) => {
 	return (
 		<div className={ clsx( 'jetpack-ai-logo-generator-modal-visit-site-banner', className ) }>
 			<div className="jetpack-ai-logo-generator-modal-visit-site-banner__jetpack-logo">
@@ -39,8 +38,13 @@ export const VisitSiteBanner: React.FC< {
 					) }
 				</span>
 				<div>
-					<Button variant="link" href={ siteURL } target="_blank" onClick={ onVisitBlankTarget }>
-						{ __( 'Visit website', 'jetpack-ai-client' ) }
+					<Button
+						variant="link"
+						href="https://jetpack.com/redirect/?source=logo_generator_learn_more_about_jetpack_ai"
+						target="_blank"
+						onClick={ onVisitBlankTarget }
+					>
+						{ __( 'Learn more about Jetpack AI', 'jetpack-ai-client' ) }
 						<Icon icon={ external } size={ 20 } />
 					</Button>
 				</div>

package/src/logo-generator/hooks/use-logo-generator.ts

@@ -128,7 +128,7 @@ Site description: ${ description }`;
 				throw error;
 			}
 		},
-		[ setFirstLogoPromptFetchError, increaseAiAssistantRequestsCount ]
+		[ setFirstLogoPromptFetchError, increaseAiAssistantRequestsCount, name, description ]
 	);
 
 	const enhancePrompt = async function ( { prompt }: { prompt: string } ): Promise< string > {

package/src/logo-generator/lib/wpcom-limited-request.ts

@@ -9,7 +9,6 @@ import apiFetch from '../../api-fetch/index.js';
 const MAX_CONCURRENT_REQUESTS = 5;
 
 let concurrentCounter = 0;
-let lastCallTimestamp: number | null = null;
 
 /**
  * Concurrency-limited request to wpcom-proxy-request.
@@ -25,16 +24,6 @@ export default async function wpcomLimitedRequest< T >( params: object ): Promis
 		throw new Error( 'Too many requests' );
 	}
 
-	const now = Date.now();
-
-	// Check if the last call was made less than 100 milliseconds ago
-	if ( lastCallTimestamp && now - lastCallTimestamp < 100 ) {
-		concurrentCounter -= 1;
-		throw new Error( 'Too many requests' );
-	}
-
-	lastCallTimestamp = now; // Update the timestamp
-
 	return apiFetch< T >( params ).finally( () => {
 		concurrentCounter -= 1;
 	} );

package/src/logo-generator/types.ts

@@ -15,13 +15,15 @@ export interface GeneratorModalProps {
 	siteDetails?: SiteDetails;
 	isOpen: boolean;
 	onClose: () => void;
+	onApplyLogo: ( mediaId: number ) => void;
 	context: string;
+	placement: string;
 }
 
 export interface LogoPresenterProps {
 	logo?: Logo;
 	loading?: boolean;
-	onApplyLogo: () => void;
+	onApplyLogo: ( mediaId: number ) => void;
 	logoAccepted?: boolean;
 	siteId: string | number;
 }