✨(front) add a useFeatureFlag hook

Add a hook to know if a feature is enabled or not
(AI Features, Interop Features, etc.)

Author: jbpenrath

src/frontend/src/features/layouts/components/thread-view/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from "react"
-import { useAIFeaturesConfig } from "@/features/utils/ai-config";
+import { FEATURE_KEYS, useFeatureFlag } from "@/hooks/use-feature";
 import { ActionBar } from "./components/thread-action-bar"
 import { ThreadMessage } from "./components/thread-message"
 import { useMailboxContext } from "@/features/providers/mailbox"
@@ -49,8 +49,7 @@ export const ThreadView = () => {
         });
         return rootMessages
     }, [messages]);
-    const aiConfig = useAIFeaturesConfig();
-    const isAISummaryEnabled = aiConfig.isAISummaryEnabled;
+    const isAISummaryEnabled = useFeatureFlag(FEATURE_KEYS.AI_SUMMARY);
 
     /**
      * If we are in the trash view, we only want to show trashed messages

src/frontend/src/features/utils/ai-config.ts

@@ -0,0 +1,29 @@
+import { useConfig } from "@/features/providers/config";
+
+export enum FEATURE_KEYS {
+    DRIVE = 'drive',
+    AI = 'ai',
+    AI_SUMMARY = 'ai_summary',
+}
+
+/**
+ * A hook to check if a feature is enabled.
+ *
+ * Several features like ai features or interoperability can be
+ * enabled/disabled according to the config. This utility hook
+ * to know the state of a feature with ease.
+ */
+export const useFeatureFlag = (featureKey: FEATURE_KEYS) => {
+    const config = useConfig();
+
+    switch (featureKey) {
+        case FEATURE_KEYS.DRIVE:
+            return config.DRIVE !== undefined;
+        case FEATURE_KEYS.AI:
+            return config.AI_ENABLED === true;
+        case FEATURE_KEYS.AI_SUMMARY:
+            return config.AI_ENABLED === true && config.AI_FEATURE_SUMMARY_ENABLED === true;
+        default:
+            throw new Error(`Unknown feature key: ${featureKey}`);
+    }
+}