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;