AI Excerpt: add a fallback for ToggleGroupControl components (#33115)

* add a experimental component fallback * check also RadioControl component availability * changelog
Automattic · Sep 15, 2023 · 3dfbeb3 · 3dfbeb3
1 parent f5388dc
commit 3dfbeb3
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 1 deletion.
diff --git a/projects/plugins/jetpack/changelog/update-ai-experpt-add-model-selector-fallback b/projects/plugins/jetpack/changelog/update-ai-experpt-add-model-selector-fallback
@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+AI Excerpt: add a fallback for ToggleGroupControl components
diff --git a/projects/plugins/jetpack/extensions/shared/components/ai-model-selector-control/index.tsx b/projects/plugins/jetpack/extensions/shared/components/ai-model-selector-control/index.tsx
@@ -3,6 +3,7 @@
  */
 import { AI_MODEL_GPT_3_5_Turbo_16K, AI_MODEL_GPT_4 } from '@automattic/jetpack-ai-client';
 import {
+	RadioControl,
 	__experimentalToggleGroupControl as ToggleGroupControl, // eslint-disable-line wpcalypso/no-unsafe-wp-apis
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption, // eslint-disable-line wpcalypso/no-unsafe-wp-apis
 } from '@wordpress/components';
@@ -32,6 +33,26 @@ export default function AiModelSelectorControl( {
 			  )
 			: __( 'The fastest model, great for most everyday tasks.', 'jetpack' );
 
+	/*
+	 * Add a fallback for the ToggleGroupControlOption component,
+	 * since it is experimental and might not be available in all versions of Gutenberg.
+	 */
+	if ( ! ToggleGroupControlOption || ! ToggleGroupControl ) {
+		return (
+			<RadioControl
+				label={ __( 'Model', 'jetpack' ) }
+				className="ai-model-selector-control__radio-control"
+				selected={ model }
+				options={ [
+					{ label: __( 'GPT-3.5 Turbo', 'jetpack' ), value: AI_MODEL_GPT_3_5_Turbo_16K },
+					{ label: __( 'GPT-4', 'jetpack' ), value: AI_MODEL_GPT_4 },
+				] }
+				onChange={ onModelChange }
+				help={ help }
+			/>
+		);
+	}
+
 	return (
 		<ToggleGroupControl
 			isBlock
@@ -42,7 +63,6 @@ export default function AiModelSelectorControl( {
 			help={ help }
 		>
 			<ToggleGroupControlOption
-				title={ __( 'GPT-3.5 Turbo', 'jetpack' ) }
 				label={ __( 'GTP-3.5 Turbo', 'jetpack' ) }
 				value={ AI_MODEL_GPT_3_5_Turbo_16K }
 			/>

diff --git a/projects/plugins/jetpack/extensions/shared/components/ai-model-selector-control/style.scss b/projects/plugins/jetpack/extensions/shared/components/ai-model-selector-control/style.scss
@@ -12,4 +12,8 @@
 	.components-base-control {
 		margin-bottom: 12px;
 	}
+}
+
+.ai-model-selector-control__radio-control .components-flex {
+	gap: 8px;
 }