♻️ refactor: refactor feature flags store to server config store (lob…

…ehub#2263) * 🚚 refactor: rename featureFlag store to serverConfig store * 🚚 refactor: use serverConfigSelectors to replace commonSelectors * 🎨 chore: clean code
ipoly · Jul 29, 2024 · 276c8c1 · 276c8c1
1 parent 1c038fb
commit 276c8c1
Show file tree

Hide file tree

Showing 30 changed files with 382 additions and 216 deletions.
diff --git a/src/app/chat/(desktop)/features/ChatHeader/HeaderAction.tsx b/src/app/chat/(desktop)/features/ChatHeader/HeaderAction.tsx
@@ -4,8 +4,8 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
-import { featureFlagsSelectors, useFeatureFlagStore } from '@/store/featureFlags';
 import { useGlobalStore } from '@/store/global';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
 import SettingButton from '../../../features/SettingButton';
 import ShareButton from '../../../features/ShareButton';
@@ -18,7 +18,7 @@ const HeaderAction = memo(() => {
     s.toggleChatSideBar,
   ]);
 
-  const { isAgentEditable } = useFeatureFlagStore(featureFlagsSelectors);
+  const { isAgentEditable } = useServerConfigStore(featureFlagsSelectors);
 
   return (
     <>

diff --git a/src/app/chat/(desktop)/features/SideBar/index.tsx b/src/app/chat/(desktop)/features/SideBar/index.tsx
@@ -6,8 +6,8 @@ import { memo } from 'react';
 import TopicListContent from '@/app/chat/features/TopicListContent';
 import SafeSpacing from '@/components/SafeSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
-import { featureFlagsSelectors, useFeatureFlagStore } from '@/store/featureFlags';
 import { useGlobalStore } from '@/store/global';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 
@@ -35,7 +35,7 @@ const Desktop = memo(() => {
     s.toggleChatSideBar,
   ]);
 
-  const { isAgentEditable: showSystemRole } = useFeatureFlagStore(featureFlagsSelectors);
+  const { isAgentEditable: showSystemRole } = useServerConfigStore(featureFlagsSelectors);
   const isInbox = useSessionStore(sessionSelectors.isInboxSession);
 
   return (

diff --git a/src/app/chat/(mobile)/features/SessionHeader.tsx b/src/app/chat/(mobile)/features/SessionHeader.tsx
@@ -7,9 +7,9 @@ import { Flexbox } from 'react-layout-kit';
 
 import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import SyncStatusInspector from '@/features/SyncStatusInspector';
-import { featureFlagsSelectors, useFeatureFlagStore } from '@/store/featureFlags';
 import { useGlobalStore } from '@/store/global';
 import { commonSelectors } from '@/store/global/selectors';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useSessionStore } from '@/store/session';
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
 
@@ -27,7 +27,7 @@ const Header = memo(() => {
   const [createSession] = useSessionStore((s) => [s.createSession]);
   const router = useRouter();
   const avatar = useGlobalStore(commonSelectors.userAvatar);
-  const { showCreateSession } = useFeatureFlagStore(featureFlagsSelectors);
+  const { showCreateSession } = useServerConfigStore(featureFlagsSelectors);
 
   return (
     <MobileNavBar

diff --git a/src/app/chat/(mobile)/mobile/ChatHeader/index.tsx b/src/app/chat/(mobile)/mobile/ChatHeader/index.tsx
@@ -2,7 +2,7 @@ import { MobileNavBar } from '@lobehub/ui';
 import { useRouter } from 'next/navigation';
 import { memo, useState } from 'react';
 
-import { featureFlagsSelectors, useFeatureFlagStore } from '@/store/featureFlags';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
 import SettingButton from '../../../features/SettingButton';
 import ShareButton from '../../../features/ShareButton';
@@ -12,7 +12,7 @@ const MobileHeader = memo(() => {
   const router = useRouter();
   const [open, setOpen] = useState(false);
 
-  const { isAgentEditable } = useFeatureFlagStore(featureFlagsSelectors);
+  const { isAgentEditable } = useServerConfigStore(featureFlagsSelectors);
 
   // const items: MenuProps['items'] = [
   //   {

diff --git a/src/app/chat/_layout/Desktop/SessionHeader.tsx b/src/app/chat/_layout/Desktop/SessionHeader.tsx
@@ -8,7 +8,7 @@ import { Flexbox } from 'react-layout-kit';
 import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import SyncStatusTag from '@/features/SyncStatusInspector';
 import { useActionSWR } from '@/libs/swr';
-import { featureFlagsSelectors, useFeatureFlagStore } from '@/store/featureFlags';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useSessionStore } from '@/store/session';
 
 import SessionSearchBar from '../../features/SessionSearchBar';
@@ -27,7 +27,7 @@ const Header = memo(() => {
   const { styles } = useStyles();
   const { t } = useTranslation('chat');
   const [createSession] = useSessionStore((s) => [s.createSession]);
-  const { enableWebrtc, showCreateSession } = useFeatureFlagStore(featureFlagsSelectors);
+  const { enableWebrtc, showCreateSession } = useServerConfigStore(featureFlagsSelectors);
 
   const { mutate, isValidating } = useActionSWR('session.createSession', () => createSession());
 

diff --git a/src/app/chat/features/PluginTag/index.tsx b/src/app/chat/features/PluginTag/index.tsx
@@ -5,7 +5,7 @@ import isEqual from 'fast-deep-equal';
 import { LucideToyBrick } from 'lucide-react';
 import { memo } from 'react';
 
-import { featureFlagsSelectors, useFeatureFlagStore } from '@/store/featureFlags';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { toolSelectors } from '@/store/tool/selectors';
 
@@ -16,7 +16,7 @@ export interface PluginTagProps {
 }
 
 const PluginTag = memo<PluginTagProps>(({ plugins }) => {
-  const { showDalle } = useFeatureFlagStore(featureFlagsSelectors);
+  const { showDalle } = useServerConfigStore(featureFlagsSelectors);
   const list = useToolStore(toolSelectors.metaList(showDalle), isEqual);
   const displayPlugin = useToolStore(toolSelectors.getMetaById(plugins[0]), isEqual);
 

diff --git a/src/app/chat/features/SessionListContent/List/index.tsx b/src/app/chat/features/SessionListContent/List/index.tsx
@@ -7,7 +7,7 @@ import { Center } from 'react-layout-kit';
 import LazyLoad from 'react-lazy-load';
 
 import { SESSION_CHAT_URL } from '@/const/url';
-import { featureFlagsSelectors, useFeatureFlagStore } from '@/store/featureFlags';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { LobeAgentSession } from '@/types/session';
@@ -30,7 +30,7 @@ interface SessionListProps {
 const SessionList = memo<SessionListProps>(({ dataSource, groupId, showAddButton = true }) => {
   const { t } = useTranslation('chat');
   const isInit = useSessionStore((s) => sessionSelectors.isSessionListInit(s));
-  const { showCreateSession } = useFeatureFlagStore(featureFlagsSelectors);
+  const { showCreateSession } = useServerConfigStore(featureFlagsSelectors);
   const { styles } = useStyles();
 
   const { mobile } = useResponsive();

diff --git a/src/app/chat/features/TelemetryNotification/index.tsx b/src/app/chat/features/TelemetryNotification/index.tsx
@@ -10,7 +10,8 @@ import { Flexbox } from 'react-layout-kit';
 
 import { PRIVACY_URL } from '@/const/url';
 import { useGlobalStore } from '@/store/global';
-import { commonSelectors } from '@/store/global/selectors';
+import { useServerConfigStore } from '@/store/serverConfig';
+import { serverConfigSelectors } from '@/store/serverConfig/selectors';
 
 const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   container: css`
@@ -55,8 +56,9 @@ const TelemetryNotification = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { styles, theme, cx } = useStyles();
 
   const { t } = useTranslation('common');
-  const [shouldCheck, useCheckTrace, updatePreference] = useGlobalStore((s) => [
-    commonSelectors.enabledTelemetryChat(s),
+  const shouldCheck = useServerConfigStore(serverConfigSelectors.enabledTelemetryChat);
+
+  const [useCheckTrace, updatePreference] = useGlobalStore((s) => [
     s.useCheckTrace,
     s.updatePreference,
   ]);

diff --git a/src/app/settings/about/page.tsx b/src/app/settings/about/page.tsx
@@ -6,8 +6,8 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import PageTitle from '@/components/PageTitle';
-import { useGlobalStore } from '@/store/global';
-import { commonSelectors } from '@/store/global/selectors';
+import { useServerConfigStore } from '@/store/serverConfig';
+import { serverConfigSelectors } from '@/store/serverConfig/selectors';
 
 import AboutList from './AboutList';
 import Analytics from './Analytics';
@@ -23,7 +23,7 @@ export default memo(() => {
   const { t } = useTranslation('setting');
 
   const { styles } = useStyles();
-  const enabledTelemetryChat = useGlobalStore(commonSelectors.enabledTelemetryChat);
+  const enabledTelemetryChat = useServerConfigStore(serverConfigSelectors.enabledTelemetryChat);
 
   return (
     <>

diff --git a/src/app/settings/features/SettingList/index.tsx b/src/app/settings/features/SettingList/index.tsx
@@ -3,8 +3,8 @@ import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { featureFlagsSelectors, useFeatureFlagStore } from '@/store/featureFlags';
 import { SettingsTabs } from '@/store/global/initialState';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
 import Item from './Item';
 
@@ -21,7 +21,7 @@ export interface SettingListProps {
 
 const SettingList = memo<SettingListProps>(({ activeTab, mobile }) => {
   const { t } = useTranslation('setting');
-  const { enableWebrtc, showLLM } = useFeatureFlagStore(featureFlagsSelectors);
+  const { enableWebrtc, showLLM } = useServerConfigStore(featureFlagsSelectors);
 
   const items = [
     { icon: Settings2, label: t('tab.common'), value: SettingsTabs.Common },

diff --git a/src/app/settings/llm/OpenAI/index.tsx b/src/app/settings/llm/OpenAI/index.tsx
@@ -1,12 +1,12 @@
 import { OpenAI } from '@lobehub/icons';
 import { memo } from 'react';
 
-import { featureFlagsSelectors, useFeatureFlagStore } from '@/store/featureFlags';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
 import ProviderConfig from '../components/ProviderConfig';
 
 const OpenAIProvider = memo(() => {
-  const { showOpenAIProxyUrl, showOpenAIApiKey } = useFeatureFlagStore(featureFlagsSelectors);
+  const { showOpenAIProxyUrl, showOpenAIApiKey } = useServerConfigStore(featureFlagsSelectors);
 
   return (
     <ProviderConfig

diff --git a/src/features/AgentSetting/AgentPlugin/index.tsx b/src/features/AgentSetting/AgentPlugin/index.tsx
@@ -9,7 +9,7 @@ import { Center, Flexbox } from 'react-layout-kit';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import PluginStore from '@/features/PluginStore';
 import PluginTag from '@/features/PluginStore/PluginItem/PluginTag';
-import { featureFlagsSelectors, useFeatureFlagStore } from '@/store/featureFlags';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { toolSelectors } from '@/store/tool/selectors';
 
@@ -29,7 +29,7 @@ const AgentPlugin = memo(() => {
     s.toggleAgentPlugin,
   ]);
 
-  const { showDalle } = useFeatureFlagStore(featureFlagsSelectors);
+  const { showDalle } = useServerConfigStore(featureFlagsSelectors);
   const installedPlugins = useToolStore(toolSelectors.metaList(showDalle), isEqual);
   const useFetchInstalledPlugins = useToolStore((s) => s.useFetchInstalledPlugins);
 

diff --git a/src/features/ChatInput/ActionBar/Tools/index.tsx b/src/features/ChatInput/ActionBar/Tools/index.tsx
@@ -11,9 +11,9 @@ import { Flexbox } from 'react-layout-kit';
 import PluginStore from '@/features/PluginStore';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
-import { featureFlagsSelectors, useFeatureFlagStore } from '@/store/featureFlags';
 import { useGlobalStore } from '@/store/global';
 import { modelProviderSelectors } from '@/store/global/selectors';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { builtinToolSelectors, pluginSelectors } from '@/store/tool/selectors';
 
@@ -35,7 +35,7 @@ const useStyles = createStyles(({ css, prefixCls }) => ({
 const Tools = memo(() => {
   const { t } = useTranslation('setting');
   const list = useToolStore(pluginSelectors.installedPluginMetaList, isEqual);
-  const { showDalle } = useFeatureFlagStore(featureFlagsSelectors);
+  const { showDalle } = useServerConfigStore(featureFlagsSelectors);
   const builtinList = useToolStore(builtinToolSelectors.metaList(showDalle), isEqual);
 
   const enablePluginCount = useAgentStore(

diff --git a/src/features/Conversation/Error/InvalidAccessCode.tsx b/src/features/Conversation/Error/InvalidAccessCode.tsx
@@ -6,8 +6,8 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { useGlobalStore } from '@/store/global';
-import { commonSelectors } from '@/store/global/selectors';
+import { useServerConfigStore } from '@/store/serverConfig';
+import { serverConfigSelectors } from '@/store/serverConfig/selectors';
 
 import APIKeyForm from './APIKeyForm';
 import AccessCodeForm from './AccessCodeForm';
@@ -27,7 +27,7 @@ interface InvalidAccessCodeProps {
 
 const InvalidAccessCode = memo<InvalidAccessCodeProps>(({ id, provider }) => {
   const { t } = useTranslation('error');
-  const isEnabledOAuth = useGlobalStore(commonSelectors.enabledOAuthSSO);
+  const isEnabledOAuth = useServerConfigStore(serverConfigSelectors.enabledOAuthSSO);
   const defaultTab = isEnabledOAuth ? Tab.Oauth : Tab.Password;
   const [mode, setMode] = useState<Tab>(defaultTab);
 

diff --git a/src/layout/GlobalProvider/index.tsx b/src/layout/GlobalProvider/index.tsx
@@ -10,7 +10,8 @@ import {
   LOBE_THEME_NEUTRAL_COLOR,
   LOBE_THEME_PRIMARY_COLOR,
 } from '@/const/theme';
-import { FeatureFlagStoreProvider } from '@/store/featureFlags';
+import { getServerGlobalConfig } from '@/server/globalConfig';
+import { ServerConfigStoreProvider } from '@/store/serverConfig';
 import { getAntdLocale } from '@/utils/locale';
 
 import AppTheme from './AppTheme';
@@ -46,6 +47,7 @@ const GlobalLayout = async ({ children }: GlobalLayoutProps) => {
 
   // get default feature flags to use with ssr
   const serverFeatureFlags = getServerFeatureFlagsValue();
+  const serverConfig = getServerGlobalConfig();
   return (
     <StyleRegistry>
       <Locale antdLocale={antdLocale} defaultLang={defaultLang?.value}>
@@ -55,9 +57,9 @@ const GlobalLayout = async ({ children }: GlobalLayoutProps) => {
           defaultPrimaryColor={primaryColor?.value as any}
         >
           <StoreInitialization />
-          <FeatureFlagStoreProvider featureFlags={serverFeatureFlags}>
+          <ServerConfigStoreProvider featureFlags={serverFeatureFlags} serverConfig={serverConfig}>
             {children}
-          </FeatureFlagStoreProvider>
+          </ServerConfigStoreProvider>
           <DebugUI />
         </AppTheme>
       </Locale>