feat: add FeatureFlagProvider

apps/nextjs/src/app/layout.tsx

@@ -20,6 +20,7 @@ import "@/app/theme-config.css";
 import { Providers } from "@/components/AppComponents/Chat//providers";
 import { AnalyticsProvider } from "@/components/ContextProviders/AnalyticsProvider";
 import { CookieConsentProvider } from "@/components/ContextProviders/CookieConsentProvider";
+import { FeatureFlagProvider } from "@/components/ContextProviders/FeatureFlagProvider";
 import FontProvider from "@/components/ContextProviders/FontProvider";
 import { GleapProvider } from "@/components/ContextProviders/GleapProvider";
 import { WebDebuggerPosition } from "@/lib/avo/Avo";
@@ -118,7 +119,13 @@ export default async function RootLayout({
                         }}
                         bootstrappedFeatures={bootstrappedFeatures}
                       >
-                        <GleapProvider>{children}</GleapProvider>
+                        <GleapProvider>
+                          <FeatureFlagProvider
+                            bootstrappedFeatures={bootstrappedFeatures}
+                          >
+                            {children}
+                          </FeatureFlagProvider>
+                        </GleapProvider>
                       </AnalyticsProvider>
                     </CookieConsentProvider>
                   </Providers>

apps/nextjs/src/components/ContextProviders/FeatureFlagProvider.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import type { ReactNode } from "react";
+import {
+  useMemo,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useRef,
+} from "react";
+
+import { aiLogger } from "@oakai/logger";
+
+import useAnalytics from "@/lib/analytics/useAnalytics";
+
+const log = aiLogger("feature-flags");
+
+export interface FeatureFlagContextProps {
+  bootstrappedFeatures: Record<string, string | boolean>;
+}
+
+const FeatureFlagContext = createContext<FeatureFlagContextProps>({
+  bootstrappedFeatures: {},
+});
+
+export interface FeatureFlagProviderProps {
+  children: ReactNode;
+  bootstrappedFeatures: Record<string, string | boolean>;
+}
+
+export const FeatureFlagProvider = ({
+  children,
+  bootstrappedFeatures,
+}: FeatureFlagProviderProps) => {
+  const value = useMemo(
+    () => ({ bootstrappedFeatures }),
+    [bootstrappedFeatures],
+  );
+
+  return (
+    <FeatureFlagContext.Provider value={value}>
+      {children}
+    </FeatureFlagContext.Provider>
+  );
+};
+
+export const useClientSideFeatureFlag = (flag: string) => {
+  const context = useContext(FeatureFlagContext);
+
+  const { posthogAiBetaClient: posthog } = useAnalytics();
+  const hasLogged = useRef(false);
+
+  const [posthogFeatureFlag, setPosthogFeatureFlag] = useState<
+    boolean | string | undefined
+  >();
+
+  const bootstrappedFlag = context.bootstrappedFeatures[flag];
+
+  useEffect(() => {
+    return posthog.onFeatureFlags(() => {
+      const updatedValue = posthog.isFeatureEnabled(flag);
+      if (updatedValue !== bootstrappedFlag) {
+        log.info(`Updating ${flag} to ${updatedValue}`);
+        setPosthogFeatureFlag(updatedValue);
+      }
+    });
+  }, [posthog, flag, bootstrappedFlag]);
+
+  const isDebug = process.env.NEXT_PUBLIC_POSTHOG_DEBUG === "true";
+  if (isDebug) {
+    if (!hasLogged.current) {
+      hasLogged.current = true;
+      log.info(`Feature flag ${flag} is enabled in debug mode`);
+    }
+    return true;
+  }
+
+  // NOTE: This will flash from the bootstrapped value to the posthog value
+  //       only on page load within 1 minute of toggling a flag
+  return posthogFeatureFlag ?? bootstrappedFlag ?? false;
+};