extensions flag inside settings page

src/app/components/settings/settings.component.html

@@ -81,4 +81,17 @@
       Language Picker
     </mat-checkbox>
   </mat-expansion-panel>
+
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>
+      <mat-panel-title>Extensions</mat-panel-title>
+    </mat-expansion-panel-header>
+
+    <mat-checkbox
+      [ngModel]="aiExtensions$ | async"
+      (change)="onToggleAiExtensions($event)"
+    >
+      Enable AI Extensions
+    </mat-checkbox>
+  </mat-expansion-panel>
 </mat-accordion>

src/app/components/settings/settings.component.ts

@@ -30,7 +30,7 @@ import {
   OauthConfigModel
 } from '@alfresco/adf-core';
 import { Validators, FormGroup, FormBuilder } from '@angular/forms';
-import { Observable } from 'rxjs';
+import { Observable, BehaviorSubject } from 'rxjs';
 import { Store } from '@ngrx/store';
 import { AppStore } from '../../store/states';
 import {
@@ -64,6 +64,7 @@ export class SettingsComponent implements OnInit {
   appName$: Observable<string>;
   headerColor$: Observable<string>;
   languagePicker$: Observable<boolean>;
+  aiExtensions$: Observable<boolean>;
 
   constructor(
     private store: Store<AppStore>,
@@ -82,6 +83,10 @@ export class SettingsComponent implements OnInit {
   }
 
   ngOnInit() {
+    this.aiExtensions$ = new BehaviorSubject(
+      this.storage.getItem('ai') === 'true'
+    );
+
     this.form = this.fb.group({
       ecmHost: [
         '',
@@ -132,4 +137,8 @@ export class SettingsComponent implements OnInit {
     this.storage.setItem('languagePicker', event.checked.toString());
     this.store.dispatch(new SetLanguagePickerAction(event.checked));
   }
+
+  onToggleAiExtensions(event: MatCheckboxChange) {
+    this.storage.setItem('ai', event.checked.toString());
+  }
 }