@lobehub/chat 0.82.9 → 0.83.1

package/src/app/settings/features/SideBar/List.tsx

@@ -1,6 +1,6 @@
 import { useResponsive } from 'antd-style';
 import { Bot, Settings2, Webhook } from 'lucide-react';
-import { useRouter } from 'next/navigation';
+import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -11,9 +11,9 @@ import Item from './Item';
 
 const List = memo(() => {
   const { t } = useTranslation('setting');
-  const tab = useGlobalStore((s) => s.settingsTab);
-  const router = useRouter();
+  const [tab, switchSettingTabs] = useGlobalStore((s) => [s.settingsTab, s.switchSettingTabs]);
   const { mobile } = useResponsive();
+
   const items = [
     { icon: Settings2, label: t('tab.common'), value: SettingsTabs.Common },
     { icon: Webhook, label: t('tab.llm'), value: SettingsTabs.LLM },
@@ -21,9 +21,15 @@ const List = memo(() => {
   ];
 
   return items.map(({ value, icon, label }) => (
-    <div key={value} onClick={() => router.push(`/settings/${value}`)}>
+    <Link
+      href={`/settings/${value}`}
+      key={value}
+      onClick={() => {
+        switchSettingTabs(value);
+      }}
+    >
       <Item active={mobile ? false : tab === value} icon={icon} label={label} />
-    </div>
+    </Link>
   ));
 });
 

package/src/app/settings/llm/LLM/index.tsx

@@ -9,7 +9,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
-import { globalSelectors, useEffectAfterGlobalHydrated, useGlobalStore } from '@/store/global';
+import { settingsSelectors, useEffectAfterGlobalHydrated, useGlobalStore } from '@/store/global';
 
 import Checker from './Checker';
 
@@ -42,7 +42,7 @@ const LLM = memo(() => {
   const [setSettings] = useGlobalStore((s) => [s.setSettings]);
 
   useEffectAfterGlobalHydrated((store) => {
-    const settings = globalSelectors.currentSettings(store.getState());
+    const settings = settingsSelectors.currentSettings(store.getState());
 
     form.setFieldsValue(settings);
   }, []);

package/src/app/settings/llm/page.tsx

@@ -1,7 +1,20 @@
-import Page from './index';
+'use client';
 
-const Index = () => {
-  return <Page />;
-};
+import { memo } from 'react';
 
-export default Index;
+import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
+import { SettingsTabs } from '@/store/global/initialState';
+
+import Layout from '../index';
+import LLM from './LLM';
+
+const LLMSetting = memo(() => {
+  useSwitchSideBarOnInit(SettingsTabs.LLM);
+  return (
+    <Layout>
+      <LLM />
+    </Layout>
+  );
+});
+
+export default LLMSetting;

package/src/config/client.ts

@@ -21,6 +21,10 @@ declare global {
       NEXT_PUBLIC_POSTHOG_KEY: string;
       NEXT_PUBLIC_POSTHOG_HOST: string;
       NEXT_PUBLIC_POSTHOG_DEBUG: string;
+
+      NEXT_PUBLIC_I18N_DEBUG: string;
+      NEXT_PUBLIC_I18N_DEBUG_BROWSER: string;
+      NEXT_PUBLIC_I18N_DEBUG_SERVER: string;
     }
   }
 }
@@ -29,18 +33,27 @@ export const getClientConfig = () => ({
   AGENTS_INDEX_URL: process.env.AGENTS_INDEX_URL,
   PLUGINS_INDEX_URL: process.env.PLUGINS_INDEX_URL,
 
+  // Vercel Analytics
   ANALYTICS_VERCEL: process.env.NEXT_PUBLIC_ANALYTICS_VERCEL !== '0',
   VERCEL_DEBUG: process.env.NEXT_PUBLIC_VERCEL_DEBUG === '1',
 
+  // Plausible Analytics
   ANALYTICS_PLAUSIBLE: process.env.NEXT_PUBLIC_ANALYTICS_PLAUSIBLE === '1',
   PLAUSIBLE_DOMAIN: process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN,
 
+  // Mixpanel Analytics
   ANALYTICS_MIXPANEL: process.env.NEXT_PUBLIC_ANALYTICS_MIXPANEL === '1',
   MIXPANEL_PROJECT_TOKEN: process.env.NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN,
   MIXPANEL_DEBUG: process.env.NEXT_PUBLIC_MIXPANEL_DEBUG === '1',
 
+  // Posthog Analytics
   ANALYTICS_POSTHOG: process.env.NEXT_PUBLIC_ANALYTICS_POSTHOG === '1',
   POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY,
   POSTHOG_HOST: process.env.NEXT_PUBLIC_POSTHOG_HOST,
   POSTHOG_DEBUG: process.env.NEXT_PUBLIC_POSTHOG_DEBUG === '1',
+
+  // i18n debug mode
+  I18N_DEBUG: process.env.NEXT_PUBLIC_I18N_DEBUG === '1',
+  I18N_DEBUG_BROWSER: process.env.NEXT_PUBLIC_I18N_DEBUG_BROWSER === '1',
+  I18N_DEBUG_SERVER: process.env.NEXT_PUBLIC_I18N_DEBUG_SERVER === '1',
 });

package/src/const/locale.ts

@@ -0,0 +1,9 @@
+import { localeOptions } from '@/locales/options';
+import { Locales } from '@/locales/resources';
+
+export const DEFAULT_LANG = 'en-US';
+export const LOBE_LOCALE_COOKIE = 'LOBE_LOCALE';
+
+export const checkLang = (lang: Locales) => {
+  return lang === DEFAULT_LANG || !localeOptions.map((o) => o.value).includes(lang);
+};

package/src/const/settings.ts

@@ -12,7 +12,7 @@ import {
 export const DEFAULT_BASE_SETTINGS: GlobalBaseSettings = {
   avatar: '',
   fontSize: 14,
-  language: 'en-US',
+  language: 'auto',
   password: '',
   themeMode: 'auto',
 };

package/src/const/url.ts

@@ -1,10 +1,10 @@
 import urlJoin from 'url-join';
 
 import { getClientConfig } from '@/config/client';
-import { localeOptions } from '@/locales/options';
 import { Locales } from '@/locales/resources';
 
 import pkg from '../../package.json';
+import { DEFAULT_LANG, checkLang } from './locale';
 import { INBOX_SESSION_ID } from './session';
 
 export const GITHUB = pkg.homepage;
@@ -16,11 +16,6 @@ export const DISCORD = 'https://discord.gg/AYFPHvv2jT';
 export const PLUGINS_INDEX_URL =
   getClientConfig().PLUGINS_INDEX_URL ?? 'https://chat-plugins.lobehub.com';
 
-export const DEFAULT_LANG = 'en-US';
-
-export const checkLang = (lang: Locales) => {
-  return lang === DEFAULT_LANG || !localeOptions.map((o) => o.value).includes(lang);
-};
 export const getPluginIndexJSON = (lang: Locales = DEFAULT_LANG, baseUrl = PLUGINS_INDEX_URL) => {
   if (checkLang(lang)) return baseUrl;
 

package/src/helpers/export.ts

@@ -1,4 +1,4 @@
-import { globalSelectors, useGlobalStore } from '@/store/global';
+import { settingsSelectors, useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { createConfigFile, exportConfigFile } from '@/utils/config';
@@ -6,7 +6,7 @@ import { createConfigFile, exportConfigFile } from '@/utils/config';
 const getSessions = () => sessionSelectors.exportSessions(useSessionStore.getState());
 const getSession = (id: string) => sessionSelectors.getSessionById(id)(useSessionStore.getState());
 
-const getSettings = () => globalSelectors.exportSettings(useGlobalStore.getState());
+const getSettings = () => settingsSelectors.exportSettings(useGlobalStore.getState());
 
 // =============   导出所有角色   ============= //
 

package/src/layout/GlobalLayout/Locale.tsx

@@ -0,0 +1,44 @@
+import { ConfigProvider } from 'antd';
+import Zh_CN from 'antd/locale/zh_CN';
+import { PropsWithChildren, memo, useState } from 'react';
+
+import { createI18nNext } from '@/locales/create';
+import { useOnFinishHydrationGlobal } from '@/store/global';
+import { isOnServerSide } from '@/utils/env';
+import { switchLang } from '@/utils/switchLang';
+
+interface LocaleLayoutProps extends PropsWithChildren {
+  lang?: string;
+}
+
+const InnerLocale = memo<LocaleLayoutProps>(({ children, lang }) => {
+  const [i18n] = useState(createI18nNext(lang));
+
+  // if run on server side, init i18n instance everytime
+  if (isOnServerSide) {
+    i18n.init();
+  } else {
+    // if on browser side, init i18n instance only once
+    if (!i18n.instance.isInitialized)
+      // console.log('locale', lang);
+      i18n.init().then(() => {
+        // console.log('inited.');
+      });
+  }
+
+  useOnFinishHydrationGlobal((s) => {
+    if (s.settings.language === 'auto') {
+      switchLang('auto');
+    }
+  }, []);
+
+  return <ConfigProvider locale={Zh_CN}>{children}</ConfigProvider>;
+});
+
+// const Locale = memo<LocaleLayoutProps>((props) => (
+//   <Suspense fallback={<Loading />}>
+//     <InnerLocale {...props} />
+//   </Suspense>
+// ));
+
+export default InnerLocale;

package/src/layout/GlobalLayout/LocaleLoading.tsx

@@ -0,0 +1,21 @@
+import { Icon } from '@lobehub/ui';
+import { Loader2 } from 'lucide-react';
+import { memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+const Loading = memo(() => (
+  <div
+    style={{
+      backdropFilter: 'blur(3px)',
+      height: '100vh',
+      width: '100vw',
+      zIndex: 100,
+    }}
+  >
+    <Center flex={1} gap={12} width={'100%'}>
+      <Icon icon={Loader2} spin />
+    </Center>
+  </div>
+));
+
+export default Loading;

package/src/layout/GlobalLayout/StoreHydration.tsx

@@ -0,0 +1,28 @@
+import { useRouter } from 'next/navigation';
+import { memo, useEffect } from 'react';
+
+import { useGlobalStore } from '@/store/global';
+import { usePluginStore } from '@/store/plugin';
+import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
+
+const StoreHydration = memo(() => {
+  const router = useRouter();
+
+  useEffect(() => {
+    // refs: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#hashydrated
+    useSessionStore.persist.rehydrate();
+    useGlobalStore.persist.rehydrate();
+    usePluginStore.persist.rehydrate();
+  }, []);
+
+  useOnFinishHydrationSession((s, store) => {
+    usePluginStore.getState().checkLocalEnabledPlugins(s.sessions);
+
+    // add router instance to store
+    store.setState({ router });
+  });
+
+  return null;
+});
+
+export default StoreHydration;

package/src/layout/GlobalLayout/index.tsx

@@ -1,56 +1,44 @@
 'use client';
 
-import { App, ConfigProvider } from 'antd';
+import { App } from 'antd';
+import { createStyles } from 'antd-style';
 import 'antd/dist/reset.css';
-import Zh_CN from 'antd/locale/zh_CN';
-import { useRouter } from 'next/navigation';
-import { PropsWithChildren, memo, useEffect } from 'react';
+import { PropsWithChildren, memo } from 'react';
 
-import AppTheme, { AppThemeProps } from '@/components/AppTheme';
-import { createI18nNext } from '@/locales/create';
-import { useGlobalStore, useOnFinishHydrationGlobal } from '@/store/global';
-import { usePluginStore } from '@/store/plugin';
-import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
-import { switchLang } from '@/utils/switchLang';
+import AppTheme, { AppThemeProps } from './AppTheme';
+import Locale from './Locale';
+import StoreHydration from './StoreHydration';
 
-import { useStyles } from './style';
+const useStyles = createStyles(({ css, token }) => ({
+  bg: css`
+    overflow-y: scroll;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 
-const i18n = createI18nNext();
+    height: 100%;
 
-const Layout = memo<PropsWithChildren>(({ children }) => {
-  const { styles } = useStyles();
-
-  const router = useRouter();
-
-  useEffect(() => {
-    // refs: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#hashydrated
-    useSessionStore.persist.rehydrate();
-    useGlobalStore.persist.rehydrate();
-    usePluginStore.persist.rehydrate();
-  }, []);
-
-  useOnFinishHydrationGlobal((state) => {
-    i18n.then(() => switchLang(state.settings.language));
-  });
+    background: ${token.colorBgLayout};
+  `,
+}));
 
-  useOnFinishHydrationSession((s, store) => {
-    usePluginStore.getState().checkLocalEnabledPlugins(s.sessions);
-
-    // add router instance to store
-    store.setState({ router });
-  });
+const Container = memo<PropsWithChildren>(({ children }) => {
+  const { styles } = useStyles();
 
-  return (
-    <ConfigProvider locale={Zh_CN}>
-      <App className={styles.bg}>{children}</App>
-    </ConfigProvider>
-  );
+  return <App className={styles.bg}>{children}</App>;
 });
 
-const ThemeWrapper = ({ children, ...theme }: AppThemeProps) => (
+interface GlobalLayoutProps extends AppThemeProps {
+  defaultLang?: string;
+}
+
+const GlobalLayout = ({ children, defaultLang, ...theme }: GlobalLayoutProps) => (
   <AppTheme {...theme}>
-    <Layout>{children}</Layout>
+    <Locale lang={defaultLang}>
+      <StoreHydration />
+      <Container>{children}</Container>
+    </Locale>
   </AppTheme>
 );
 
-export default ThemeWrapper;
+export default GlobalLayout;

package/src/locales/create.ts

@@ -1,36 +1,53 @@
 import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
-import { isArray } from 'lodash-es';
 import { initReactI18next } from 'react-i18next';
 
+import { getClientConfig } from '@/config/client';
+import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/const/locale';
+import resources from '@/locales/resources';
 import type { Namespaces } from '@/types/locale';
+import { isOnServerSide } from '@/utils/env';
 
-import resources from './resources';
+const { I18N_DEBUG, I18N_DEBUG_BROWSER, I18N_DEBUG_SERVER } = getClientConfig();
+const debugMode = I18N_DEBUG ?? isOnServerSide ? I18N_DEBUG_SERVER : I18N_DEBUG_BROWSER;
 
-const isDev = process.env.NODE_ENV === 'development';
+export const createI18nNext = (lang?: string) => {
+  const ns: Namespaces[] = [
+    'error',
+    'common',
+    'empty',
+    'error',
+    'market',
+    'plugin',
+    'setting',
+    'welcome',
+  ];
 
-export const createI18nNext = (params: { namespace?: Namespaces[] | Namespaces } = {}) => {
-  const { namespace } = params;
+  const instance = i18n.use(initReactI18next).use(LanguageDetector);
+  //  not find a good way to handle suspense loading
+  // .use(
+  //   resourcesToBackend(
+  //     isDev ? resources : (lng: string, ns: string) => import(`../../locales/${lng}/${ns}.json`),
+  //   ),
+  // )
 
-  const ns: Namespaces[] = isArray(namespace)
-    ? ['error', 'common', ...namespace]
-    : (['error', 'common', namespace].filter(Boolean) as Namespaces[]);
-
-  return i18n
-    .use(LanguageDetector)
-    .use(initReactI18next)
-    .init({
-      debug: isDev,
-      defaultNS: ns,
-      detection: {
-        caches: [],
-      },
-      fallbackLng: isDev ? 'zh-CN' : 'en-US',
-      interpolation: {
-        escapeValue: false,
-      },
-      lng: isDev ? 'zh-CN' : 'en-US',
-      ns,
-      resources,
-    });
+  return {
+    init: () =>
+      instance.init({
+        debug: debugMode,
+        defaultNS: ['error', 'common'],
+        detection: {
+          caches: ['cookie'],
+          lookupCookie: LOBE_LOCALE_COOKIE,
+        },
+        fallbackLng: DEFAULT_LANG,
+        interpolation: {
+          escapeValue: false,
+        },
+        lng: lang,
+        ns,
+        resources,
+      }),
+    instance,
+  };
 };

package/src/locales/default/setting.ts

@@ -198,7 +198,8 @@ export default {
       title: '字体大小',
     },
     lang: {
-      title: '语言设置',
+      autoMode: '跟随系统',
+      title: '语言',
     },
     neutralColor: {
       desc: '不同色彩倾向的灰阶自定义',

package/src/locales/options.ts

@@ -1,11 +1,10 @@
-import type { SelectProps } from 'antd';
 
 import type { Locales } from '@/types/locale';
 
-type LocaleOptions = SelectProps['options'] &
-  {
-    value: Locales;
-  }[];
+type LocaleOptions = {
+  label: string;
+  value: Locales;
+}[];
 
 export const localeOptions: LocaleOptions = [
   {
@@ -25,3 +24,5 @@ export const localeOptions: LocaleOptions = [
     value: 'ru-RU',
   },
 ] as LocaleOptions;
+
+export const supportLangs: string[] = localeOptions.map((i) => i.value);

package/src/services/agentMarket.ts

@@ -1,11 +1,11 @@
-import { getAgentIndexJSON, getAgentJSON } from '@/const/url';
-import { useGlobalStore } from '@/store/global';
+import { getAgentJSON } from '@/const/url';
+import { settingsSelectors, useGlobalStore } from '@/store/global';
 
 /**
  * 请求助手列表
  */
 export const getAgentList = async () => {
-  const res = await fetch(getAgentIndexJSON(useGlobalStore.getState().settings.language));
+  const res = await fetch(settingsSelectors.currentLanguage(useGlobalStore.getState()));
 
   return res.json();
 };
@@ -15,7 +15,9 @@ export const getAgentList = async () => {
  */
 export const getAgentManifest = async (identifier?: string) => {
   if (!identifier) return;
-  const res = await fetch(getAgentJSON(identifier, useGlobalStore.getState().settings.language));
+  const res = await fetch(
+    getAgentJSON(identifier, settingsSelectors.currentLanguage(useGlobalStore.getState())),
+  );
 
   return res.json();
 };

package/src/services/pluginMarket.ts

@@ -1,11 +1,11 @@
 import { getPluginIndexJSON } from '@/const/url';
-import { useGlobalStore } from '@/store/global';
+import { settingsSelectors, useGlobalStore } from '@/store/global';
 
 /**
  * fetch Plugin Market List
  */
 export const getPluginList = async () => {
-  const url = getPluginIndexJSON(useGlobalStore.getState().settings.language);
+  const url = getPluginIndexJSON(settingsSelectors.currentLanguage(useGlobalStore.getState()));
 
   const res = await fetch(url);
 

package/src/store/global/hooks/useSwitchSettingsOnInit.ts

@@ -1,9 +1,12 @@
+import { useOnFinishHydrationGlobal } from '@/store/global';
+
 import { SettingsTabs } from '../initialState';
-import { useGlobalStore } from '../store';
 
 /**
  * 切换设置侧边栏选项
  */
 export const useSwitchSideBarOnInit = (key: SettingsTabs) => {
-  useGlobalStore.getState().switchSettingTabs(key);
+  useOnFinishHydrationGlobal((store) => {
+    store.switchSettingTabs(key);
+  });
 };

package/src/store/global/{selectors.test.ts → selectors/settings.test.ts}

@@ -1,9 +1,9 @@
 import { LanguageModel } from '@/types/llm';
 
-import { globalSelectors } from './selectors';
-import { GlobalStore } from './store';
+import { GlobalStore } from '../store';
+import { settingsSelectors } from './settings';
 
-describe('globalSelectors', () => {
+describe('settingsSelectors', () => {
   describe('currentSettings', () => {
     it('should merge DEFAULT_SETTINGS and s.settings correctly', () => {
       const s = {
@@ -36,7 +36,7 @@ describe('globalSelectors', () => {
         },
       } as unknown as GlobalStore;
 
-      const result = globalSelectors.currentSettings(s);
+      const result = settingsSelectors.currentSettings(s);
 
       expect(result).toEqual({
         avatar: 'avatar.jpg',
@@ -93,7 +93,7 @@ describe('globalSelectors', () => {
   //       },
   //     };
   //
-  //     const result = globalSelectors.defaultAgent(s);
+  //     const result = settingsSelectors.defaultAgent(s);
   //
   //
   //
@@ -114,9 +114,9 @@ describe('globalSelectors', () => {
   //       },
   //     };
   //
-  //     const result = globalSelectors.defaultAgentConfig(s);
+  //     const result = settingsSelectors.defaultAgentConfig(s);
   //
-  //     const defaultAgent = globalSelectors.defaultAgent(s);
+  //     const defaultAgent = settingsSelectors.defaultAgent(s);
   //     const expected = merge({}, DEFAULT_AGENT_CONFIG, defaultAgent.config);
   //
   //     expect(result).toEqual(expected);
@@ -136,9 +136,9 @@ describe('globalSelectors', () => {
   //       },
   //     };
   //
-  //     const result = globalSelectors.defaultAgentMeta(s);
+  //     const result = settingsSelectors.defaultAgentMeta(s);
   //
-  //     const defaultAgent = globalSelectors.defaultAgent(s);
+  //     const defaultAgent = settingsSelectors.defaultAgent(s);
   //     const expected = merge({}, DEFAULT_AGENT_META, defaultAgent.meta);
   //
   //     expect(result).toEqual(expected);
@@ -183,7 +183,7 @@ describe('globalSelectors', () => {
   //       },
   //     };
   //
-  //     const result = globalSelectors.exportSettings(s);
+  //     const result = settingsSelectors.exportSettings(s);
   //
   //     const expected = {
   //       avatar: 'avatar.jpg',
@@ -255,7 +255,7 @@ describe('globalSelectors', () => {
   //       },
   //     };
   //
-  //     const result = globalSelectors.exportSettings(s);
+  //     const result = settingsSelectors.exportSettings(s);
   //
   //     expect(result).toBeInstanceOf(GlobalSettings);
   //   });

package/src/store/global/selectors/settings.ts

@@ -0,0 +1,44 @@
+import { DEFAULT_AGENT_META } from '@/const/meta';
+import { DEFAULT_AGENT, DEFAULT_AGENT_CONFIG, DEFAULT_SETTINGS } from '@/const/settings';
+import { Locales } from '@/locales/resources';
+import { GlobalSettings } from '@/types/settings';
+import { merge } from '@/utils/merge';
+
+import { GlobalStore } from '../store';
+
+const currentSettings = (s: GlobalStore) => merge(DEFAULT_SETTINGS, s.settings);
+
+const defaultAgent = (s: GlobalStore) => merge(DEFAULT_AGENT, s.settings.defaultAgent);
+
+const defaultAgentConfig = (s: GlobalStore) => merge(DEFAULT_AGENT_CONFIG, defaultAgent(s).config);
+
+const defaultAgentMeta = (s: GlobalStore) => merge(DEFAULT_AGENT_META, defaultAgent(s).meta);
+
+const openAIAPIKeySelectors = (s: GlobalStore) =>
+  s.settings.languageModel.openAI.OPENAI_API_KEY || s.settings.OPENAI_API_KEY;
+
+export const exportSettings = (s: GlobalStore) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { OPENAI_API_KEY: _, password: __, ...settings } = s.settings;
+
+  return settings as GlobalSettings;
+};
+
+const currentLanguage = (s: GlobalStore) => {
+  const locale = s.settings.language;
+  if (locale === 'auto') {
+    return navigator.language as Locales;
+  }
+
+  return locale;
+};
+
+export const settingsSelectors = {
+  currentLanguage,
+  currentSettings,
+  defaultAgent,
+  defaultAgentConfig,
+  defaultAgentMeta,
+  exportSettings,
+  openAIAPI: openAIAPIKeySelectors,
+};