feat(ui): add runtime config for app and company names (#1272)

Author: PetrBulanek

apps/beeai-ui/.env.example

@@ -5,18 +5,18 @@ API_URL=
 # All feature flags default to false
 FEATURE_FLAGS='{"Variables":true,"Providers":true,"ModelProviders":true,"MCPOAuth":true,"MCP":true}'
 
+# Default: 'BeeAI'
+APP_NAME=
+
+# Default: undefined
+COMPANY_NAME=
+
 # Default: 'http://localhost:3000'
 NEXT_PUBLIC_BASE_URL=
 
 # Default: ''
 NEXT_PUBLIC_BASE_PATH=
 
-# Default: 'BeeAI'
-NEXT_PUBLIC_APP_NAME=
-
-# Default: undefined
-NEXT_PUBLIC_COMPANY_NAME=
-
 # Default: '/bee.svg'
 NEXT_PUBLIC_APP_FAVICON_SVG=
 

apps/beeai-ui/src/api/index.ts

@@ -7,16 +7,16 @@ import type { Middleware } from 'openapi-fetch';
 import createClient from 'openapi-fetch';
 
 import { ensureToken } from '#app/(auth)/rsc.tsx';
+import { runtimeConfig } from '#contexts/App/runtime-config.ts';
 import { getBaseUrl } from '#utils/api/getBaseUrl.ts';
-import { OIDC_ENABLED } from '#utils/constants.ts';
 
 import type { paths } from './schema';
 
 const authMiddleware: Middleware = {
   async onRequest({ request }) {
     let accessToken: string | undefined = undefined;
 
-    if (OIDC_ENABLED) {
+    if (runtimeConfig.isAuthEnabled) {
       const token = await ensureToken(request);
 
       if (token?.access_token) {

apps/beeai-ui/src/app/(auth)/auth.ts

@@ -7,7 +7,7 @@ import NextAuth from 'next-auth';
 import type { Provider } from 'next-auth/providers';
 
 import { getProviderConstructor } from '#app/(auth)/providers/providers.ts';
-import { OIDC_ENABLED } from '#utils/constants.ts';
+import { runtimeConfig } from '#contexts/App/runtime-config.ts';
 import { routes } from '#utils/router.ts';
 
 import type { ProviderConfig } from './types';
@@ -19,7 +19,9 @@ const providers: Provider[] = [];
 
 export const AUTH_COOKIE_NAME = 'beeai-platform';
 
-if (OIDC_ENABLED) {
+const { isAuthEnabled } = runtimeConfig;
+
+if (isAuthEnabled) {
   try {
     const providersJson = process.env.OIDC_PROVIDERS;
     if (!providersJson) {
@@ -68,7 +70,7 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
   session: { strategy: 'jwt' },
   trustHost: true,
   // Prevents nextauth errors when authentication is disabled and NEXTAUTH_SECRET is not provided
-  secret: OIDC_ENABLED ? process.env.NEXTAUTH_SECRET : 'dummy_secret',
+  secret: isAuthEnabled ? process.env.NEXTAUTH_SECRET : 'dummy_secret',
   cookies: {
     sessionToken: {
       name: AUTH_COOKIE_NAME,
@@ -81,7 +83,7 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
   },
   callbacks: {
     authorized: ({ auth }) => {
-      return OIDC_ENABLED ? Boolean(auth) : true;
+      return isAuthEnabled ? Boolean(auth) : true;
     },
     jwt: async ({ token, account, trigger, session }) => {
       if (trigger === 'update') {

apps/beeai-ui/src/app/(auth)/rsc.tsx

@@ -6,12 +6,12 @@
 import { cookies } from 'next/headers';
 import { getToken } from 'next-auth/jwt';
 
-import { OIDC_ENABLED } from '#utils/constants.ts';
+import { runtimeConfig } from '#contexts/App/runtime-config.ts';
 
 import { auth, AUTH_COOKIE_NAME } from './auth';
 
 export const ensureToken = async (request: Request) => {
-  if (!OIDC_ENABLED) {
+  if (!runtimeConfig.isAuthEnabled) {
     return null;
   }
 

apps/beeai-ui/src/app/api/[...path]/route.ts

@@ -7,7 +7,8 @@ import { redirect } from 'next/navigation';
 import type { NextRequest } from 'next/server';
 
 import { ensureToken } from '#app/(auth)/rsc.tsx';
-import { API_URL, OIDC_ENABLED } from '#utils/constants.ts';
+import { runtimeConfig } from '#contexts/App/runtime-config.ts';
+import { API_URL } from '#utils/constants.ts';
 import { routes } from '#utils/router.ts';
 
 import { transformAgentManifestBody } from './body-transformers';
@@ -31,7 +32,7 @@ async function handler(request: NextRequest, context: RouteContext) {
   }
   targetUrl += search;
 
-  if (OIDC_ENABLED) {
+  if (runtimeConfig.isAuthEnabled) {
     const token = await ensureToken(request);
 
     if (!token) {

apps/beeai-ui/src/app/layout.tsx

@@ -8,9 +8,9 @@ import '#styles/style.scss';
 import type { Metadata } from 'next';
 
 import { AppProvider } from '#contexts/App/AppProvider.tsx';
+import { runtimeConfig } from '#contexts/App/runtime-config.ts';
 import Providers from '#providers.tsx';
-import { APP_FAVICON_SVG, APP_NAME, BASE_PATH, OIDC_ENABLED } from '#utils/constants.ts';
-import { parseFeatureFlags } from '#utils/feature-flags.ts';
+import { APP_FAVICON_SVG, BASE_PATH } from '#utils/constants.ts';
 
 const darkModeScript = `
 (() => {
@@ -34,7 +34,7 @@ const darkModeScript = `
 const icon = `${BASE_PATH}${APP_FAVICON_SVG}`;
 
 export const metadata: Metadata = {
-  title: APP_NAME,
+  title: runtimeConfig.appName,
   icons: {
     icon: icon,
     shortcut: icon,
@@ -52,7 +52,7 @@ export default function RootLayout({
         <script dangerouslySetInnerHTML={{ __html: darkModeScript }} />
       </head>
       <body>
-        <AppProvider featureFlags={parseFeatureFlags(process.env.FEATURE_FLAGS)} isAuthEnabled={OIDC_ENABLED}>
+        <AppProvider config={runtimeConfig}>
           <Providers>{children}</Providers>
         </AppProvider>
       </body>

apps/beeai-ui/src/components/AppHeader/AppName.tsx

@@ -3,16 +3,20 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { APP_NAME, COMPANY_NAME } from '#utils/constants.ts';
+import { useApp } from '#contexts/App/index.ts';
 
 import classes from './AppName.module.scss';
 
 export function AppName() {
+  const {
+    config: { appName, companyName },
+  } = useApp();
+
   return (
     <span className={classes.root}>
-      {COMPANY_NAME && <span className={classes.companyName}>{COMPANY_NAME}</span>}
+      {companyName && <span className={classes.companyName}>{companyName}</span>}
 
-      <span className={classes.appName}>{APP_NAME}</span>
+      <span className={classes.appName}>{appName}</span>
     </span>
   );
 }

apps/beeai-ui/src/components/UserNav/UserNav.tsx

@@ -22,7 +22,10 @@ import classes from './UserNav.module.scss';
 
 export function UserNav() {
   const { transitionTo } = useRouteTransition();
-  const { setNavigationOpen, isAuthEnabled } = useApp();
+  const {
+    setNavigationOpen,
+    config: { isAuthEnabled },
+  } = useApp();
   const isMaxUp = useBreakpointUp('max');
 
   const items: NavItem[] = useMemo(

apps/beeai-ui/src/contexts/App/AppProvider.tsx

@@ -7,17 +7,14 @@
 import type { PropsWithChildren } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 
-import type { FeatureFlags } from '#utils/feature-flags.ts';
-
 import { AppContext } from './app-context';
-import type { SidePanelVariant } from './types';
+import type { RuntimeConfig, SidePanelVariant } from './types';
 
 interface Props {
-  featureFlags: FeatureFlags;
-  isAuthEnabled: boolean;
+  config: RuntimeConfig;
 }
 
-export function AppProvider({ featureFlags, isAuthEnabled, children }: PropsWithChildren<Props>) {
+export function AppProvider({ config, children }: PropsWithChildren<Props>) {
   const [navigationOpen, setNavigationOpen] = useState(false);
   const [closeNavOnClickOutside, setCloseNavOnClickOutside] = useState(false);
   const [activeSidePanel, setActiveSidePanel] = useState<SidePanelVariant | null>(null);
@@ -32,25 +29,16 @@ export function AppProvider({ featureFlags, isAuthEnabled, children }: PropsWith
 
   const contextValue = useMemo(
     () => ({
-      featureFlags,
+      config,
       navigationOpen,
       closeNavOnClickOutside,
       activeSidePanel,
-      isAuthEnabled,
       setNavigationOpen,
       setCloseNavOnClickOutside,
       openSidePanel,
       closeSidePanel,
     }),
-    [
-      featureFlags,
-      navigationOpen,
-      closeNavOnClickOutside,
-      activeSidePanel,
-      isAuthEnabled,
-      openSidePanel,
-      closeSidePanel,
-    ],
+    [config, navigationOpen, closeNavOnClickOutside, activeSidePanel, openSidePanel, closeSidePanel],
   );
 
   return <AppContext.Provider value={contextValue}>{children}</AppContext.Provider>;

apps/beeai-ui/src/contexts/App/app-context.ts

@@ -7,18 +7,15 @@
 
 import { createContext, type Dispatch, type SetStateAction } from 'react';
 
-import type { FeatureFlags } from '#utils/feature-flags.ts';
-
-import type { SidePanelVariant } from './types';
+import type { RuntimeConfig, SidePanelVariant } from './types';
 
 export const AppContext = createContext<AppContextValue | undefined>(undefined);
 
 interface AppContextValue {
-  featureFlags: FeatureFlags;
+  config: RuntimeConfig;
   navigationOpen: boolean;
   closeNavOnClickOutside: boolean;
   activeSidePanel: SidePanelVariant | null;
-  isAuthEnabled: boolean;
   setNavigationOpen: Dispatch<SetStateAction<boolean>>;
   setCloseNavOnClickOutside: Dispatch<SetStateAction<boolean>>;
   openSidePanel: (variant: SidePanelVariant) => void;