AI Assistant: fix block to bottom when content exceeds the viewport h…

…eight (#34452) * fix ai block to bottom when content exceeds the viewport height * add outside wrapper * move positioning directive to outside wrapper * adjust bottom space for outside wrapper
Automattic · Dec 18, 2023 · d8447bd · d8447bd
1 parent e0c09f6
commit d8447bd
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 87 deletions.
diff --git a/projects/js-packages/ai-client/changelog/add-ai-assistant-fix-to-bottom b/projects/js-packages/ai-client/changelog/add-ai-assistant-fix-to-bottom
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+AI Assistant: make container fix to bottom when content is too large to fit the viewport
diff --git a/projects/js-packages/ai-client/src/components/ai-control/index.tsx b/projects/js-packages/ai-client/src/components/ai-control/index.tsx
@@ -155,115 +155,117 @@ export function AIControl(
 	);
 
 	return (
-		<div className="jetpack-components-ai-control__container">
-			<div
-				className={ classNames( 'jetpack-components-ai-control__wrapper', {
-					'is-transparent': isTransparent,
-				} ) }
-			>
-				<AiStatusIndicator state={ state } />
+		<div className="jetpack-components-ai-control__container-wrapper">
+			<div className="jetpack-components-ai-control__container">
+				<div
+					className={ classNames( 'jetpack-components-ai-control__wrapper', {
+						'is-transparent': isTransparent,
+					} ) }
+				>
+					<AiStatusIndicator state={ state } />
 
-				<div className="jetpack-components-ai-control__input-wrapper">
-					<PlainText
-						value={ value }
-						onChange={ changeHandler }
-						placeholder={ placeholder }
-						className="jetpack-components-ai-control__input"
-						disabled={ loading || disabled }
-						ref={ promptUserInputRef }
-					/>
-				</div>
+					<div className="jetpack-components-ai-control__input-wrapper">
+						<PlainText
+							value={ value }
+							onChange={ changeHandler }
+							placeholder={ placeholder }
+							className="jetpack-components-ai-control__input"
+							disabled={ loading || disabled }
+							ref={ promptUserInputRef }
+						/>
+					</div>
+
+					{ ( ! showAccept || editRequest ) && value?.length > 0 && (
+						<div className="jetpack-components-ai-control__controls-prompt_button_wrapper">
+							{ ! loading ? (
+								<>
+									{ editRequest && (
+										<Button
+											className="jetpack-components-ai-control__controls-prompt_button"
+											onClick={ () => setEditRequest( false ) }
+											variant="secondary"
+											label={ __( 'Cancel', 'jetpack-ai-client' ) }
+										>
+											{ showButtonLabels ? (
+												__( 'Cancel', 'jetpack-ai-client' )
+											) : (
+												<Icon icon={ closeSmall } />
+											) }
+										</Button>
+									) }
 
-				{ ( ! showAccept || editRequest ) && value?.length > 0 && (
-					<div className="jetpack-components-ai-control__controls-prompt_button_wrapper">
-						{ ! loading ? (
-							<>
-								{ editRequest && (
 									<Button
 										className="jetpack-components-ai-control__controls-prompt_button"
-										onClick={ () => setEditRequest( false ) }
-										variant="secondary"
-										label={ __( 'Cancel', 'jetpack-ai-client' ) }
+										onClick={ sendRequest }
+										variant="primary"
+										disabled={ ! value?.length || disabled }
+										label={ __( 'Send request', 'jetpack-ai-client' ) }
 									>
 										{ showButtonLabels ? (
-											__( 'Cancel', 'jetpack-ai-client' )
+											__( 'Generate', 'jetpack-ai-client' )
 										) : (
-											<Icon icon={ closeSmall } />
+											<Icon icon={ arrowUp } />
 										) }
 									</Button>
-								) }
-
+								</>
+							) : (
 								<Button
 									className="jetpack-components-ai-control__controls-prompt_button"
-									onClick={ sendRequest }
-									variant="primary"
-									disabled={ ! value?.length || disabled }
-									label={ __( 'Send request', 'jetpack-ai-client' ) }
+									onClick={ onStop }
+									variant="secondary"
+									label={ __( 'Stop request', 'jetpack-ai-client' ) }
 								>
 									{ showButtonLabels ? (
-										__( 'Generate', 'jetpack-ai-client' )
+										__( 'Stop', 'jetpack-ai-client' )
 									) : (
-										<Icon icon={ arrowUp } />
+										<Icon icon={ closeSmall } />
 									) }
 								</Button>
-							</>
-						) : (
-							<Button
-								className="jetpack-components-ai-control__controls-prompt_button"
-								onClick={ onStop }
-								variant="secondary"
-								label={ __( 'Stop request', 'jetpack-ai-client' ) }
-							>
-								{ showButtonLabels ? (
-									__( 'Stop', 'jetpack-ai-client' )
-								) : (
-									<Icon icon={ closeSmall } />
-								) }
-							</Button>
-						) }
-					</div>
-				) }
+							) }
+						</div>
+					) }
 
-				{ showAccept && ! editRequest && value?.length > 0 && (
-					<div className="jetpack-components-ai-control__controls-prompt_button_wrapper">
-						<ButtonGroup>
-							<Button
-								className="jetpack-components-ai-control__controls-prompt_button"
-								label={ __( 'Back to edit', 'jetpack-ai-client' ) }
-								onClick={ () => setEditRequest( true ) }
-								tooltipPosition="top"
-							>
-								<Icon icon={ arrowLeft } />
-							</Button>
-							<Button
-								className="jetpack-components-ai-control__controls-prompt_button"
-								label={ __( 'Discard', 'jetpack-ai-client' ) }
-								onClick={ discardHandler }
-								tooltipPosition="top"
-							>
-								<Icon icon={ trash } />
-							</Button>
+					{ showAccept && ! editRequest && value?.length > 0 && (
+						<div className="jetpack-components-ai-control__controls-prompt_button_wrapper">
+							<ButtonGroup>
+								<Button
+									className="jetpack-components-ai-control__controls-prompt_button"
+									label={ __( 'Back to edit', 'jetpack-ai-client' ) }
+									onClick={ () => setEditRequest( true ) }
+									tooltipPosition="top"
+								>
+									<Icon icon={ arrowLeft } />
+								</Button>
+								<Button
+									className="jetpack-components-ai-control__controls-prompt_button"
+									label={ __( 'Discard', 'jetpack-ai-client' ) }
+									onClick={ discardHandler }
+									tooltipPosition="top"
+								>
+									<Icon icon={ trash } />
+								</Button>
+								<Button
+									className="jetpack-components-ai-control__controls-prompt_button"
+									label={ __( 'Regenerate', 'jetpack-ai-client' ) }
+									onClick={ () => onSend?.( value ) }
+									tooltipPosition="top"
+								>
+									<Icon icon={ reusableBlock } />
+								</Button>
+							</ButtonGroup>
 							<Button
 								className="jetpack-components-ai-control__controls-prompt_button"
-								label={ __( 'Regenerate', 'jetpack-ai-client' ) }
-								onClick={ () => onSend?.( value ) }
-								tooltipPosition="top"
+								onClick={ onAccept }
+								variant="primary"
+								label={ acceptLabel }
 							>
-								<Icon icon={ reusableBlock } />
+								{ showButtonLabels ? acceptLabel : <Icon icon={ check } /> }
 							</Button>
-						</ButtonGroup>
-						<Button
-							className="jetpack-components-ai-control__controls-prompt_button"
-							onClick={ onAccept }
-							variant="primary"
-							label={ acceptLabel }
-						>
-							{ showButtonLabels ? acceptLabel : <Icon icon={ check } /> }
-						</Button>
-					</div>
-				) }
+						</div>
+					) }
+				</div>
+				{ showGuideLine && ! loading && ! editRequest && <GuidelineMessage /> }
 			</div>
-			{ showGuideLine && ! loading && ! editRequest && <GuidelineMessage /> }
 		</div>
 	);
 }

diff --git a/projects/js-packages/ai-client/src/components/ai-control/style.scss b/projects/js-packages/ai-client/src/components/ai-control/style.scss
@@ -2,6 +2,12 @@
 
 // AI CONTROL
 
+.jetpack-components-ai-control__container-wrapper {
+	position: sticky;
+	bottom: 0;
+	padding-bottom: 16px;
+}
+
 .jetpack-components-ai-control__container {
 	color: var( --jp-gray-80 );
 	background-color: var( --jp-white );