diff --git a/routes/ai-home/stage.tsx b/routes/ai-home/stage.tsx
index b756753a7..30ec5fc5c 100644
--- a/routes/ai-home/stage.tsx
+++ b/routes/ai-home/stage.tsx
@@ -5,7 +5,9 @@ import { Page } from '@wordpress/admin-ui';
import {
Button,
ExternalLink,
+ Icon,
Notice,
+ Popover,
Spinner,
ToggleControl,
} from '@wordpress/components';
@@ -534,6 +536,63 @@ const VISUAL_CARD_FEATURES = new Map(
.map( ( f ) => [ f.settingName, f ] as const )
);
+function GlobalEnableControl( {
+ enabled,
+ onToggle,
+ disabled,
+}: {
+ enabled: boolean;
+ onToggle: ( value: boolean ) => void;
+ disabled: boolean;
+} ) {
+ const [ isInfoOpen, setIsInfoOpen ] = useState( false );
+
+ return (
+
+
+
+ );
+}
+
function VisualCardToggle( {
field,
data,
@@ -779,7 +838,7 @@ function AISettingsPage() {
return baseField;
} );
- return [ GLOBAL_FIELD, ...sectionActionsFields, ...featureFields ];
+ return [ ...sectionActionsFields, ...featureFields ];
}, [ featureDefinitions, featureGroups, globalEnabled, handleChange ] );
const form = useMemo< Form >( () => {
@@ -865,23 +924,7 @@ function AISettingsPage() {
}
return {
- fields: [
- {
- id: 'generalSettings',
- label: __( 'General Settings', 'ai' ),
- description: __(
- 'Control whether AI is enabled for your site. When disabled, all features and experiments will be inactive regardless of their individual settings.',
- 'ai'
- ),
- layout: {
- type: 'card',
- withHeader: true,
- isCollapsible: false,
- },
- children: [ GLOBAL_FIELD_ID ],
- },
- ...sectionFields,
- ],
+ fields: sectionFields,
};
}, [ featureDefinitions, featureGroups ] );
@@ -899,6 +942,13 @@ function AISettingsPage() {
) }
actions={
+
+ void handleChange( { [ GLOBAL_FIELD_ID ]: value } )
+ }
+ />
{ __( 'Docs', 'ai' ) }
diff --git a/routes/ai-home/style.scss b/routes/ai-home/style.scss
index da1dbceff..007b7f100 100644
--- a/routes/ai-home/style.scss
+++ b/routes/ai-home/style.scss
@@ -26,9 +26,34 @@
.ai-settings-page__actions {
display: flex;
align-items: center;
+ flex-wrap: wrap;
gap: 16px;
}
+.ai-settings-page__global-control {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+
+ .components-base-control {
+ margin-bottom: 0;
+ }
+
+ .components-form-toggle {
+ margin-left: 8px;
+ }
+}
+
+.ai-settings-page__global-info-button {
+ min-width: auto;
+ padding-inline: 4px !important;
+}
+
+.ai-settings-page__global-info-text {
+ margin: 8px;
+ max-width: 300px;
+}
+
.ai-settings-page__link {
display: inline-flex;
align-items: center;