AI Assistant bar: fix positioning on mobile (#34476)

* wrap assistant bar to control positioning * always make sure the assistant bar is placed AFTER the toolbar * add changelog entry
Automattic · Dec 13, 2023 · 28036e3 · 28036e3
1 parent 3dfb826
commit 28036e3
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 39 deletions.
diff --git a/projects/plugins/jetpack/changelog/fix-ai-assistant-bar-positioning-mobile b/projects/plugins/jetpack/changelog/fix-ai-assistant-bar-positioning-mobile
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+AI Assistant bar: fix issues introduced by latest block sticky positioning, make sure assistant bar is always AFTER main toolbar
diff --git a/...blocks/ai-assistant/extensions/jetpack-contact-form/components/ai-assistant-bar/index.tsx b/...blocks/ai-assistant/extensions/jetpack-contact-form/components/ai-assistant-bar/index.tsx
@@ -230,42 +230,44 @@ export default function AiAssistantBar( {
 
 	// Assistant bar component.
 	const AiAssistantBarComponent = (
-		<KeyboardShortcuts
-			bindGlobal
-			shortcuts={ {
-				esc: () => {
-					if ( [ 'requesting', 'suggesting' ].includes( requestingState ) ) {
-						handleStopSuggestion();
-					}
-				},
-			} }
-		>
-			<div
-				ref={ wrapperRef }
-				className={ classNames( 'jetpack-ai-assistant__bar', {
-					[ className ]: className,
-					'is-fixed': isAssistantBarFixed,
-					'is-mobile-mode': isMobileMode,
-				} ) }
-				tabIndex={ -1 }
+		<div className="jetpack-ai-assistant__bar-wrapper">
+			<KeyboardShortcuts
+				bindGlobal
+				shortcuts={ {
+					esc: () => {
+						if ( [ 'requesting', 'suggesting' ].includes( requestingState ) ) {
+							handleStopSuggestion();
+						}
+					},
+				} }
 			>
-				{ siteRequireUpgrade && <UpgradePrompt /> }
-				{ ! connected && <ConnectPrompt /> }
-				<AIControl
-					ref={ inputRef }
-					disabled={ siteRequireUpgrade || ! connected }
-					value={ inputValue }
-					placeholder={ isLoading ? loadingPlaceholder : placeholder }
-					onChange={ setInputValue }
-					onSend={ handleSend }
-					onStop={ handleStopSuggestion }
-					state={ requestingState }
-					isTransparent={ siteRequireUpgrade || ! connected }
-					showButtonLabels={ ! isMobileMode }
-					showGuideLine={ showGuideLine }
-				/>
-			</div>
-		</KeyboardShortcuts>
+				<div
+					ref={ wrapperRef }
+					className={ classNames( 'jetpack-ai-assistant__bar', {
+						[ className ]: className,
+						'is-fixed': isAssistantBarFixed,
+						'is-mobile-mode': isMobileMode,
+					} ) }
+					tabIndex={ -1 }
+				>
+					{ siteRequireUpgrade && <UpgradePrompt /> }
+					{ ! connected && <ConnectPrompt /> }
+					<AIControl
+						ref={ inputRef }
+						disabled={ siteRequireUpgrade || ! connected }
+						value={ inputValue }
+						placeholder={ isLoading ? loadingPlaceholder : placeholder }
+						onChange={ setInputValue }
+						onSend={ handleSend }
+						onStop={ handleStopSuggestion }
+						state={ requestingState }
+						isTransparent={ siteRequireUpgrade || ! connected }
+						showButtonLabels={ ! isMobileMode }
+						showGuideLine={ showGuideLine }
+					/>
+				</div>
+			</KeyboardShortcuts>
+		</div>
 	);
 
 	// Check if the Assistant bar should be rendered in the Assistant anchor (fixed mode)

diff --git a/...locks/ai-assistant/extensions/jetpack-contact-form/components/ai-assistant-bar/style.scss b/...locks/ai-assistant/extensions/jetpack-contact-form/components/ai-assistant-bar/style.scss
@@ -4,13 +4,14 @@
     &:not(.is-fixed) {
         position: relative;
         z-index: 30;
-
         margin-top: 10px;
-        background-color: white;
     }
 
     &.is-fixed {
-		border-bottom: 1px solid #e0e0e0;
+		.jetpack-components-ai-control__container-wrapper {
+			position: relative;
+			padding-bottom: 0;
+		}
 
 		.jetpack-components-ai-control__container {
 			border-radius: 0;
@@ -29,4 +30,14 @@
 	display: block;
 	position: sticky;
 	z-index: 31;
+
+	.jetpack-ai-assistant__bar-wrapper {
+		position: relative;
+	}
+}
+
+.jetpack-ai-assistant__bar-wrapper {
+	position: sticky;
+	bottom: 0;
+	z-index: 30;
 }
diff --git a/...ssistant/extensions/jetpack-contact-form/components/ai-assistant-toolbar-button/index.tsx b/...ssistant/extensions/jetpack-contact-form/components/ai-assistant-toolbar-button/index.tsx
@@ -69,7 +69,10 @@ export default function AiAssistantToolbarButton( {
 		let slot = toolbar.parentElement?.querySelector(
 			`.${ AI_ASSISTANT_BAR_SLOT_CLASS }`
 		) as HTMLElement;
+
 		if ( slot ) {
+			// always move the slot right after the toolbar.
+			toolbar.after( slot );
 			return setAnchor( slot );
 		}
 
@@ -81,11 +84,11 @@ export default function AiAssistantToolbarButton( {
 		slot.setAttribute( 'aria-label', __( 'AI Assistant', 'jetpack' ) );
 		slot.setAttribute( 'aria-orientation', 'horizontal' );
 		slot.className = AI_ASSISTANT_BAR_SLOT_CLASS;
-		toolbar.after( slot );
 
 		// Set the top position based on the toolbar height.
 		const toolbarHeight = toolbar.offsetHeight;
 		slot.style.top = `${ toolbarHeight }px`;
+		toolbar.after( slot );
 
 		// Set the anchor where the Assistant Bar will be rendered.
 		setAnchor( slot );