AI Assistant: Display AI sidebar on first highlight hover (#38468)

* rename localStorage entries * show sidebar on first hover * changelog * check if section is already open * move hover event to highlight instead of popover * remove async
Automattic · Jul 23, 2024 · ece8721 · ece8721
1 parent 52cfd31
commit ece8721
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 6 deletions.
diff --git a/projects/plugins/jetpack/changelog/update-jetpack-ai-breve-first-hover b/projects/plugins/jetpack/changelog/update-jetpack-ai-breve-first-hover
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+AI Assistant: Display AI sidebar on first highlight hover
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
@@ -175,6 +175,7 @@ export default function AiAssistantPluginSidebar() {
 					onToggle={ isOpen => {
 						isOpen && panelToggleTracker( PLACEMENT_JETPACK_SIDEBAR );
 					} }
+					className="jetpack-ai-assistant-panel"
 				>
 					<JetpackAndSettingsContent
 						placement={ PLACEMENT_JETPACK_SIDEBAR }

diff --git a/...lugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/events.ts b/...lugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/events.ts
@@ -5,6 +5,7 @@ import { dispatch, select } from '@wordpress/data';
 /**
  * Internal dependencies
  */
+import { showAiAssistantSection } from '../utils/show-ai-assistant-section';
 import getContainer from './container';
 import features from './index';
 /**
@@ -15,7 +16,16 @@ import type { BreveDispatch, Anchor, BreveSelect } from '../types';
 let highlightTimeout: number;
 let anchorTimeout: number;
 
-function handleMouseEnter( e: MouseEvent ) {
+let isFirstHover = ! localStorage.getItem( 'jetpack-ai-breve-first-hover' );
+
+async function handleMouseEnter( e: MouseEvent ) {
+	if ( isFirstHover ) {
+		await showAiAssistantSection();
+
+		isFirstHover = false;
+		localStorage.setItem( 'jetpack-ai-breve-first-hover', 'false' );
+	}
+
 	clearTimeout( highlightTimeout );
 	clearTimeout( anchorTimeout );
 

diff --git a/.../plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/reducer.ts b/.../plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/reducer.ts
@@ -7,9 +7,9 @@ import { combineReducers } from '@wordpress/data';
  */
 import type { BreveState } from '../types';
 
-const enabledFromLocalStorage = window.localStorage.getItem( 'jetpack-ai-proofread-enabled' );
+const enabledFromLocalStorage = window.localStorage.getItem( 'jetpack-ai-breve-enabled' );
 const disabledFeaturesFromLocalStorage = window.localStorage.getItem(
-	'jetpack-ai-proofread-disabled-features'
+	'jetpack-ai-breve-disabled-features'
 );
 const initialConfiguration = {
 	enabled: enabledFromLocalStorage === 'true' || enabledFromLocalStorage === null,
@@ -24,7 +24,7 @@ export function configuration(
 	switch ( action.type ) {
 		case 'SET_PROOFREAD_ENABLED': {
 			const enabled = action?.enabled !== undefined ? action?.enabled : ! state?.enabled;
-			window.localStorage.setItem( 'jetpack-ai-proofread-enabled', String( enabled ) );
+			window.localStorage.setItem( 'jetpack-ai-breve-enabled', String( enabled ) );
 
 			return {
 				...state,
@@ -35,7 +35,7 @@ export function configuration(
 		case 'ENABLE_FEATURE': {
 			const disabled = ( state.disabled ?? [] ).filter( feature => feature !== action.feature );
 			window.localStorage.setItem(
-				'jetpack-ai-proofread-disabled-features',
+				'jetpack-ai-breve-disabled-features',
 				JSON.stringify( disabled )
 			);
 
@@ -48,7 +48,7 @@ export function configuration(
 		case 'DISABLE_FEATURE': {
 			const disabled = [ ...( state.disabled ?? [] ), action.feature ];
 			window.localStorage.setItem(
-				'jetpack-ai-proofread-disabled-features',
+				'jetpack-ai-breve-disabled-features',
 				JSON.stringify( disabled )
 			);
 

diff --git a/...xtensions/plugins/ai-assistant-plugin/components/breve/utils/show-ai-assistant-section.ts b/...xtensions/plugins/ai-assistant-plugin/components/breve/utils/show-ai-assistant-section.ts
@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { dispatch } from '@wordpress/data';
+
+export const showAiAssistantSection = async () => {
+	const { clearSelectedBlock } = dispatch( 'core/block-editor' );
+	const { enableComplementaryArea } = dispatch( 'core/interface' ) as {
+		enableComplementaryArea: ( area: string, slot: string ) => Promise< void >;
+	};
+
+	// Clear any block selection, because selected blocks have precedence on settings sidebar
+	clearSelectedBlock();
+	await enableComplementaryArea( 'core/edit-post', 'jetpack-sidebar/jetpack' );
+
+	const panel = document.querySelector( '.jetpack-ai-assistant-panel' );
+	const isAlreadyOpen = panel?.classList.contains( 'is-opened' );
+	const button: HTMLElement | null | undefined = panel?.querySelector( 'h2 button' );
+
+	if ( isAlreadyOpen ) {
+		// Close it before opening it to ensure the content is scrolled to view
+		button?.click();
+	}
+
+	setTimeout( () => {
+		button?.click();
+	}, 50 );
+};