AI Logo Generator: open logo generator modal when logo block extensio…

…n is clicked (#38491) * Connect the generator modal using sample site details * Fetch site settings to set the proper site details * Changelog * Remove the temporary logo generator entry point from the sidebar * Include site name and description as dependencies so the prompt gets updated * changelog * Version bump
Automattic · Jul 24, 2024 · 7b777bd · 7b777bd
1 parent 904df75
commit 7b777bd
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 45 deletions.
diff --git a/...-packages/ai-client/changelog/update-jetpack-ai-connect-logo-generator-to-block-extension b/...-packages/ai-client/changelog/update-jetpack-ai-connect-logo-generator-to-block-extension
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+AI Logo Generator: make the initial prompt update when the site name and description are fully laoded from store.
diff --git a/projects/js-packages/ai-client/package.json b/projects/js-packages/ai-client/package.json
@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.15.0",
+	"version": "0.15.1-alpha",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {

diff --git a/projects/js-packages/ai-client/src/logo-generator/hooks/use-logo-generator.ts b/projects/js-packages/ai-client/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 > {

diff --git a/...cts/plugins/jetpack/changelog/update-jetpack-ai-connect-logo-generator-to-block-extension b/...cts/plugins/jetpack/changelog/update-jetpack-ai-connect-logo-generator-to-block-extension
@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Jetpack AI: connect the site logo block extension to AI Logo Generator modal.
diff --git a/projects/plugins/jetpack/extensions/extended-blocks/core-site-logo/index.tsx b/projects/plugins/jetpack/extensions/extended-blocks/core-site-logo/index.tsx
@@ -1,19 +1,47 @@
 /*
  * External dependencies
  */
+import { GeneratorModal } from '@automattic/jetpack-ai-client';
 import { BlockControls } from '@wordpress/block-editor';
-import { Modal } from '@wordpress/components';
 import { createHigherOrderComponent } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
 import { useCallback, useEffect, useState } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
-import { __ } from '@wordpress/i18n';
 /*
  * Internal dependencies
  */
 import { getFeatureAvailability } from '../../blocks/ai-assistant/lib/utils/get-feature-availability';
 import AiToolbarButton from './components/ai-toolbar-button.js';
 import { SITE_LOGO_BLOCK_AI_EXTENSION } from './constants.js';
 
+/**
+ * Mininal type definition for the core select function.
+ */
+type CoreSelect = {
+	getEntityRecord: (
+		kind: string,
+		name: string
+	) => {
+		url: string;
+		title: string;
+		description: string;
+	};
+};
+
+const useSiteDetails = () => {
+	const siteSettings = useSelect( select => {
+		return ( select( 'core' ) as CoreSelect ).getEntityRecord( 'root', 'site' );
+	}, [] );
+
+	return {
+		ID: parseInt( window?.Jetpack_Editor_Initial_State?.wpcomBlogId ),
+		URL: siteSettings?.url,
+		domain: window?.Jetpack_Editor_Initial_State?.siteFragment,
+		name: siteSettings?.title,
+		description: siteSettings?.description,
+	};
+};
+
 /**
  * HOC to add the AI button on the Site Logo toolbar.
  */
@@ -36,17 +64,20 @@ const siteLogoEditWithAiComponents = createHigherOrderComponent( BlockEdit => {
 			};
 		}, [ closeModal ] );
 
+		const siteDetails = useSiteDetails();
+
 		return (
 			<>
 				<BlockEdit { ...props } />
 				<BlockControls group="block">
 					<AiToolbarButton clickHandler={ showModal } />
 				</BlockControls>
-				{ isLogoGeneratorModalVisible && (
-					<Modal title={ __( 'Coming soon', 'jetpack' ) } onRequestClose={ closeModal }>
-						<p>{ __( 'Coming soon', 'jetpack' ) }</p>
-					</Modal>
-				) }
+				<GeneratorModal
+					isOpen={ isLogoGeneratorModalVisible }
+					onClose={ closeModal }
+					context="block-editor"
+					siteDetails={ siteDetails }
+				/>
 			</>
 		);
 	};

diff --git a/...k/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx b/...k/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx
@@ -1,15 +1,13 @@
 /**
  * External dependencies
  */
-import { GeneratorModal } from '@automattic/jetpack-ai-client';
 import { JetpackEditorPanelLogo } from '@automattic/jetpack-shared-extension-utils';
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
-import { PanelBody, PanelRow, BaseControl, Button } from '@wordpress/components';
+import { PanelBody, PanelRow, BaseControl } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { PluginPrePublishPanel, PluginDocumentSettingPanel } from '@wordpress/edit-post';
 import { store as editorStore } from '@wordpress/editor';
-import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import debugFactory from 'debug';
 import React from 'react';
@@ -18,7 +16,6 @@ import React from 'react';
  */
 import useAICheckout from '../../../../blocks/ai-assistant/hooks/use-ai-checkout';
 import useAiFeature from '../../../../blocks/ai-assistant/hooks/use-ai-feature';
-import { getFeatureAvailability } from '../../../../blocks/ai-assistant/lib/utils/get-feature-availability';
 import JetpackPluginSidebar from '../../../../shared/jetpack-plugin-sidebar';
 import { FeaturedImage } from '../ai-image';
 import { Breve, registerBreveHighlights, Highlight } from '../breve';
@@ -53,22 +50,12 @@ const isAITitleOptimizationAvailable =
 	window?.Jetpack_Editor_Initial_State?.available_blocks?.[ 'ai-title-optimization' ]?.available ||
 	false;
 
-const siteDetails = {
-	ID: parseInt( window?.Jetpack_Editor_Initial_State?.wpcomBlogId ),
-	URL: window?.Jetpack_Editor_Initial_State?.siteFragment,
-	domain: window?.Jetpack_Editor_Initial_State?.siteFragment,
-	name: '',
-	description: '',
-};
-
 const JetpackAndSettingsContent = ( {
 	placement,
 	requireUpgrade,
 	upgradeType,
 }: JetpackSettingsContentProps ) => {
-	const isLogoGeneratorAvailable = getFeatureAvailability( 'ai-assistant-site-logo-support' );
 	const { checkoutUrl } = useAICheckout();
-	const [ showLogoGeneratorModal, setShowLogoGeneratorModal ] = useState( false );
 
 	return (
 		<>
@@ -105,28 +92,6 @@ const JetpackAndSettingsContent = ( {
 					<Upgrade placement={ placement } type={ upgradeType } upgradeUrl={ checkoutUrl } />
 				</PanelRow>
 			) }
-			{ isLogoGeneratorAvailable && (
-				<PanelRow className="jetpack-ai-logo-generator-control__header">
-					<BaseControl label={ __( 'AI Logo Generator', 'jetpack' ) }>
-						<GeneratorModal
-							isOpen={ showLogoGeneratorModal }
-							onClose={ () => setShowLogoGeneratorModal( false ) }
-							context="jetpack-ai-sidebar"
-							siteDetails={ siteDetails }
-						/>
-
-						<p>
-							{ __(
-								'Experimental panel to trigger the logo generator modal. Will be dropped after the extension is ready.',
-								'jetpack'
-							) }
-						</p>
-						<Button variant="secondary" onClick={ () => setShowLogoGeneratorModal( true ) }>
-							{ __( 'Generate Logo', 'jetpack' ) }
-						</Button>
-					</BaseControl>
-				</PanelRow>
-			) }
 			{ isUsagePanelAvailable && (
 				<PanelRow>
 					<UsagePanel placement={ placement } />