AI Title Optimization: Handle cancel action and mobile improvements (#…

…37080)
Automattic · Apr 25, 2024 · c9ef747 · c9ef747
1 parent 61f67a9
commit c9ef747
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 16 deletions.
diff --git a/projects/plugins/jetpack/changelog/add-title-optimization-cancel b/projects/plugins/jetpack/changelog/add-title-optimization-cancel
@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Add cancel action for Title Optimization
diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/modal/style.scss b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/modal/style.scss
@@ -6,7 +6,9 @@
 	&__content {
 		display: flex;
 		flex-direction: column;
-		width: 100vw;
+		@media screen and (min-width: 960px) {
+			width: 100vw;
+		}
 	}
 
 	&__header {

diff --git a/...ns/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/index.tsx b/...ns/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/index.tsx
@@ -53,7 +53,7 @@ export default function TitleOptimization( {
 		[ increaseAiAssistantRequestsCount ]
 	);
 
-	const { request } = useAiSuggestions( {
+	const { request, stopSuggestion } = useAiSuggestions( {
 		onDone: handleDone,
 		onError: () => {
 			setGenerating( false );
@@ -95,6 +95,11 @@ export default function TitleOptimization( {
 		[ autosave, editPost, selected, toggleTitleOptimizationModal ]
 	);
 
+	const handleClose = useCallback( () => {
+		toggleTitleOptimizationModal();
+		stopSuggestion();
+	}, [ stopSuggestion, toggleTitleOptimizationModal ] );
+
 	return (
 		<div>
 			<p>{ __( 'Use AI to optimize key details of your post.', 'jetpack' ) }</p>
@@ -107,11 +112,7 @@ export default function TitleOptimization( {
 				{ __( 'Improve title', 'jetpack' ) }
 			</Button>
 			{ isTitleOptimizationModalVisible && (
-				<AiAssistantModal
-					handleClose={ toggleTitleOptimizationModal }
-					title={ modalTitle }
-					maxWidth={ 512 }
-				>
+				<AiAssistantModal handleClose={ handleClose } title={ modalTitle } maxWidth={ 512 }>
 					{ generating ? (
 						<div className="jetpack-ai-title-optimization__loading">
 							<Spinner

diff --git a/...plugins/ai-assistant-plugin/components/title-optimization/title-optimization-options.scss b/...plugins/ai-assistant-plugin/components/title-optimization/title-optimization-options.scss
@@ -13,6 +13,13 @@
 		margin-top: 8px;
 	}
 
+	&-input {
+		@media screen and (max-width: 600px) {
+			min-width: 10%;
+		}
+	}
+
+
 	&-content {
 		display: flex;
 		flex-direction: column;

diff --git a/.../plugins/ai-assistant-plugin/components/title-optimization/title-optimization-options.tsx b/.../plugins/ai-assistant-plugin/components/title-optimization/title-optimization-options.tsx
@@ -27,15 +27,16 @@ export default function TitleOptimizationOptions( {
 					className="jetpack-ai-title-optimization__option"
 					key={ `${ titleOptimizationId }-${ index }` }
 				>
-					<input
-						id={ `${ titleOptimizationId }-${ index }` }
-						className="jetpack-ai-title-optimization__option-input"
-						type="radio"
-						name={ titleOptimizationId }
-						value={ option.value }
-						onChange={ onChangeValue }
-						checked={ option.value === selected }
-					/>
+					<div className="jetpack-ai-title-optimization__option-input">
+						<input
+							id={ `${ titleOptimizationId }-${ index }` }
+							type="radio"
+							name={ titleOptimizationId }
+							value={ option.value }
+							onChange={ onChangeValue }
+							checked={ option.value === selected }
+						/>
+					</div>
 					<div className="jetpack-ai-title-optimization__option-content">
 						<label
 							className="jetpack-ai-title-optimization__option-label"