feat(core): move enable ai to feature flag (#8195)

packages/frontend/core/src/components/affine/ai-onboarding/index.tsx

@@ -1,5 +1,4 @@
-import { EditorSettingService } from '@affine/core/modules/editor-settting';
-import { useLiveData, useService } from '@toeverything/infra';
+import { FeatureFlagService, useService } from '@toeverything/infra';
 import { Suspense, useCallback, useEffect, useState } from 'react';
 
 import { AIOnboardingEdgeless } from './edgeless.dialog';
@@ -30,10 +29,8 @@ const useDismiss = (key: AIOnboardingType) => {
 export const WorkspaceAIOnboarding = () => {
   const [dismissGeneral] = useDismiss(AIOnboardingType.GENERAL);
   const [dismissLocal] = useDismiss(AIOnboardingType.LOCAL);
-  const editorSettingService = useService(EditorSettingService);
-  const enableAI = useLiveData(
-    editorSettingService.editorSetting.settings$.map(s => s.enableAI)
-  );
+  const featureFlagService = useService(FeatureFlagService);
+  const enableAI = featureFlagService.flags.enable_ai.value;
 
   return (
     <Suspense>
@@ -45,10 +42,8 @@ export const WorkspaceAIOnboarding = () => {
 
 export const PageAIOnboarding = () => {
   const [dismissEdgeless] = useDismiss(AIOnboardingType.EDGELESS);
-  const editorSettingService = useService(EditorSettingService);
-  const enableAI = useLiveData(
-    editorSettingService.editorSetting.settings$.map(s => s.enableAI)
-  );
+  const featureFlagService = useService(FeatureFlagService);
+  const enableAI = featureFlagService.flags.enable_ai.value;
 
   return (
     <Suspense>

packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/general.tsx

@@ -26,7 +26,11 @@ import {
 import { useI18n } from '@affine/i18n';
 import type { DocMode } from '@blocksuite/blocks';
 import { DoneIcon, SearchIcon } from '@blocksuite/icons/rc';
-import { useLiveData, useServices } from '@toeverything/infra';
+import {
+  FeatureFlagService,
+  useLiveData,
+  useServices,
+} from '@toeverything/infra';
 import clsx from 'clsx';
 import {
   type ChangeEvent,
@@ -398,15 +402,15 @@ export const SpellCheckSettings = () => {
 const AISettings = () => {
   const t = useI18n();
   const { openConfirmModal } = useConfirmModal();
-  const { editorSettingService } = useServices({ EditorSettingService });
+  const { featureFlagService } = useServices({ FeatureFlagService });
 
-  const settings = useLiveData(editorSettingService.editorSetting.settings$);
+  const enableAI = useLiveData(featureFlagService.flags.enable_ai.$);
 
   const onAIChange = useCallback(
     (checked: boolean) => {
-      editorSettingService.editorSetting.set('enableAI', checked);
+      featureFlagService.flags.enable_ai.set(checked); // this will trigger page reload, see `FeatureFlagService`
     },
-    [editorSettingService]
+    [featureFlagService]
   );
   const onToggleAI = useCallback(
     (checked: boolean) => {
@@ -421,7 +425,11 @@ const AISettings = () => {
           : t[
               'com.affine.settings.editorSettings.general.ai.disable.description'
             ](),
-        confirmText: checked ? t['Enable']() : t['Disable'](),
+        confirmText: checked
+          ? t['com.affine.settings.editorSettings.general.ai.enable.confirm']()
+          : t[
+              'com.affine.settings.editorSettings.general.ai.disable.confirm'
+            ](),
         cancelText: t['Cancel'](),
         onConfirm: () => onAIChange(checked),
         confirmButtonOptions: {
@@ -437,7 +445,7 @@ const AISettings = () => {
       name={t['com.affine.settings.editorSettings.general.ai.title']()}
       desc={t['com.affine.settings.editorSettings.general.ai.description']()}
     >
-      <Switch checked={settings.enableAI} onChange={onToggleAI} />
+      <Switch checked={enableAI} onChange={onToggleAI} />
     </SettingRow>
   );
 };

packages/frontend/core/src/components/affine/setting-modal/general-setting/experimental-features/index.tsx

@@ -120,7 +120,7 @@ const ExperimentalFeaturesItem = ({ flag }: { flag: Flag }) => {
       : feedbackLink[flag.feedbackType]
     : undefined;
 
-  if (flag.configurable === false) {
+  if (flag.configurable === false || flag.hide) {
     return null;
   }
 

packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx

@@ -13,6 +13,7 @@ import type { Doc } from '@blocksuite/store';
 import {
   DocService,
   DocsService,
+  FeatureFlagService,
   useFramework,
   useLiveData,
   useService,
@@ -71,14 +72,14 @@ const usePatchSpecs = (page: Doc, shared: boolean, mode: DocMode) => {
     peekViewService,
     docService,
     docsService,
-    editorSettingService,
     editorService,
+    featureFlagService,
   } = useServices({
     PeekViewService,
     DocService,
     DocsService,
-    EditorSettingService,
     EditorService,
+    FeatureFlagService,
   });
   const framework = useFramework();
   const referenceRenderer: ReferenceReactRenderer = useMemo(() => {
@@ -101,12 +102,11 @@ const usePatchSpecs = (page: Doc, shared: boolean, mode: DocMode) => {
   }, [mode, page.collection]);
 
   const specs = useMemo(() => {
-    const enableAI =
-      editorSettingService.editorSetting.settings$.value.enableAI;
+    const enableAI = featureFlagService.flags.enable_ai.value;
     return mode === 'edgeless'
       ? createEdgelessModeSpecs(framework, enableAI)
       : createPageModeSpecs(framework, enableAI);
-  }, [editorSettingService, mode, framework]);
+  }, [featureFlagService, mode, framework]);
 
   const confirmModal = useConfirmModal();
   const patchedSpecs = useMemo(() => {