♻️ refactor: refactor keyVaults and rename endpoint to baseURL (l…

…obehub#2673)

* ♻️ refactor: refactor endpoint to baseURL

* ✅ test: fix test

* 🚨 ci: fix lint

* ✅ test: fix migration test

* 🗃️ refactor: refactor the user setting client db

src/app/(main)/chat/settings/features/SubmitAgentButton/SubmitAgentModal.tsx

@@ -17,15 +17,15 @@ import { agentSelectors } from '@/store/agent/selectors';
 import { useSessionStore } from '@/store/session';
 import { sessionMetaSelectors } from '@/store/session/selectors';
 import { useUserStore } from '@/store/user';
-import { settingsSelectors } from '@/store/user/selectors';
+import { userGeneralSettingsSelectors } from '@/store/user/selectors';
 
 const SubmitAgentModal = memo<ModalProps>(({ open, onCancel }) => {
   const { t } = useTranslation('setting');
   const [identifier, setIdentifier] = useState('');
   const systemRole = useAgentStore(agentSelectors.currentAgentSystemRole);
   const theme = useTheme();
   const meta = useSessionStore(sessionMetaSelectors.currentAgentMeta, isEqual);
-  const language = useUserStore((s) => settingsSelectors.currentSettings(s).language);
+  const language = useUserStore((s) => userGeneralSettingsSelectors.currentLanguage(s));
 
   const isMetaPass = Boolean(
     meta && meta.title && meta.description && (meta.tags as string[])?.length > 0 && meta.avatar,
@@ -46,7 +46,7 @@ const SubmitAgentModal = memo<ModalProps>(({ open, onCancel }) => {
       '### tags',
       (meta.tags as string[]).join(', '),
       '### locale',
-      language === 'auto' ? navigator.language : language,
+      language,
     ].join('\n\n');
 
     const url = qs.stringifyUrl({

src/app/(main)/settings/common/features/Common.tsx

@@ -110,7 +110,7 @@ const Common = memo(() => {
         desc: t('settingSystem.accessCode.desc'),
         hidden: !showAccessCodeConfig,
         label: t('settingSystem.accessCode.title'),
-        name: 'password',
+        name: ['keyVaults', 'password'],
       },
       {
         children: isSignedIn ? (

src/app/(main)/settings/common/features/Theme/ThemeSwatches/ThemeSwatchesNeutral.tsx

@@ -8,17 +8,17 @@ import {
 import { memo } from 'react';
 
 import { useUserStore } from '@/store/user';
-import { settingsSelectors } from '@/store/user/selectors';
+import { userGeneralSettingsSelectors } from '@/store/user/selectors';
 
 const ThemeSwatchesNeutral = memo(() => {
-  const [neutralColor, setSettings] = useUserStore((s) => [
-    settingsSelectors.currentSettings(s).neutralColor,
-    s.setSettings,
+  const [neutralColor, updateGeneralConfig] = useUserStore((s) => [
+    userGeneralSettingsSelectors.neutralColor(s),
+    s.updateGeneralConfig,
   ]);
 
   const handleSelect = (v: any) => {
     const name = findCustomThemeName('neutral', v) as NeutralColors;
-    setSettings({ neutralColor: name || '' });
+    updateGeneralConfig({ neutralColor: name || '' });
   };
 
   return (

src/app/(main)/settings/common/features/Theme/ThemeSwatches/ThemeSwatchesPrimary.tsx

@@ -8,17 +8,17 @@ import {
 import { memo } from 'react';
 
 import { useUserStore } from '@/store/user';
-import { settingsSelectors } from '@/store/user/selectors';
+import { userGeneralSettingsSelectors } from '@/store/user/selectors';
 
 const ThemeSwatchesPrimary = memo(() => {
-  const [primaryColor, setSettings] = useUserStore((s) => [
-    settingsSelectors.currentSettings(s).primaryColor,
-    s.setSettings,
+  const [primaryColor, updateGeneralConfig] = useUserStore((s) => [
+    userGeneralSettingsSelectors.primaryColor(s),
+    s.updateGeneralConfig,
   ]);
 
   const handleSelect = (v: any) => {
     const name = findCustomThemeName('primary', v) as PrimaryColors;
-    setSettings({ primaryColor: name || '' });
+    updateGeneralConfig({ primaryColor: name || '' });
   };
 
   return (

src/app/(main)/settings/common/features/Theme/index.tsx

@@ -14,7 +14,7 @@ import { imageUrl } from '@/const/url';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { localeOptions } from '@/locales/resources';
 import { useUserStore } from '@/store/user';
-import { settingsSelectors } from '@/store/user/selectors';
+import { settingsSelectors, userGeneralSettingsSelectors } from '@/store/user/selectors';
 import { switchLang } from '@/utils/client/switchLang';
 
 import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from './ThemeSwatches';
@@ -25,6 +25,7 @@ const Theme = memo(() => {
   const { t } = useTranslation('setting');
   const [form] = Form.useForm();
   const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
+  const themeMode = useUserStore(userGeneralSettingsSelectors.currentThemeMode);
   const [setThemeMode, setSettings] = useUserStore((s) => [s.switchThemeMode, s.setSettings]);
 
   useSyncSettings(form);
@@ -40,7 +41,7 @@ const Theme = memo(() => {
       {
         children: (
           <SelectWithImg
-            defaultValue={settings.themeMode}
+            defaultValue={themeMode}
             height={60}
             onChange={setThemeMode}
             options={[
@@ -78,7 +79,7 @@ const Theme = memo(() => {
           />
         ),
         label: t('settingTheme.lang.title'),
-        name: 'language',
+        name: ['general', 'language'],
       },
       {
         children: (
@@ -113,7 +114,7 @@ const Theme = memo(() => {
         ),
         desc: t('settingTheme.fontSize.desc'),
         label: t('settingTheme.fontSize.title'),
-        name: 'fontSize',
+        name: ['general', 'fontSize'],
       },
       {
         children: <ThemeSwatchesPrimary />,

src/app/(main)/settings/llm/Azure/index.tsx

@@ -13,7 +13,7 @@ import { useUserStore } from '@/store/user';
 import { modelProviderSelectors } from '@/store/user/selectors';
 
 import ProviderConfig from '../components/ProviderConfig';
-import { LLMProviderApiTokenKey, LLMProviderBaseUrlKey, LLMProviderConfigKey } from '../const';
+import { KeyVaultsConfigKey, LLMProviderApiTokenKey } from '../const';
 
 const useStyles = createStyles(({ css, token }) => ({
   markdown: css`
@@ -57,13 +57,13 @@ const AzureOpenAIProvider = memo(() => {
           ),
           desc: t('azure.token.desc'),
           label: t('azure.token.title'),
-          name: [LLMProviderConfigKey, providerKey, LLMProviderApiTokenKey],
+          name: [KeyVaultsConfigKey, providerKey, LLMProviderApiTokenKey],
         },
         {
           children: <Input allowClear placeholder={t('azure.endpoint.placeholder')} />,
           desc: t('azure.endpoint.desc'),
           label: t('azure.endpoint.title'),
-          name: [LLMProviderConfigKey, providerKey, LLMProviderBaseUrlKey],
+          name: [KeyVaultsConfigKey, providerKey, 'endpoint'],
         },
         {
           children: (
@@ -85,7 +85,7 @@ const AzureOpenAIProvider = memo(() => {
             </Markdown>
           ),
           label: t('azure.azureApiVersion.title'),
-          name: [LLMProviderConfigKey, providerKey, 'apiVersion'],
+          name: [KeyVaultsConfigKey, providerKey, 'apiVersion'],
         },
       ]}
       checkModel={checkModel}

src/app/(main)/settings/llm/Bedrock/index.tsx

@@ -10,7 +10,7 @@ import { ModelProvider } from '@/libs/agent-runtime';
 import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import ProviderConfig from '../components/ProviderConfig';
-import { LLMProviderConfigKey } from '../const';
+import { KeyVaultsConfigKey } from '../const';
 
 const providerKey: GlobalLLMProviderKey = 'bedrock';
 
@@ -29,7 +29,7 @@ const BedrockProvider = memo(() => {
           ),
           desc: t(`${providerKey}.accessKeyId.desc`),
           label: t(`${providerKey}.accessKeyId.title`),
-          name: [LLMProviderConfigKey, providerKey, 'accessKeyId'],
+          name: [KeyVaultsConfigKey, providerKey, 'accessKeyId'],
         },
         {
           children: (
@@ -40,7 +40,7 @@ const BedrockProvider = memo(() => {
           ),
           desc: t(`${providerKey}.secretAccessKey.desc`),
           label: t(`${providerKey}.secretAccessKey.title`),
-          name: [LLMProviderConfigKey, providerKey, 'secretAccessKey'],
+          name: [KeyVaultsConfigKey, providerKey, 'secretAccessKey'],
         },
         {
           children: (
@@ -55,7 +55,7 @@ const BedrockProvider = memo(() => {
           ),
           desc: t(`${providerKey}.region.desc`),
           label: t(`${providerKey}.region.title`),
-          name: [LLMProviderConfigKey, providerKey, 'region'],
+          name: [KeyVaultsConfigKey, providerKey, 'region'],
         },
       ]}
       checkModel={'anthropic.claude-instant-v1'}

src/app/(main)/settings/llm/Ollama/Checker.tsx

@@ -27,7 +27,7 @@ const OllamaChecker = memo(() => {
   );
 
   const checkConnection = () => {
-    mutate();
+    mutate().catch();
   };
 
   const isMobile = useIsMobile();

src/app/(main)/settings/llm/components/ProviderConfig/index.tsx

@@ -10,14 +10,15 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
 import {
+  KeyVaultsConfigKey,
   LLMProviderApiTokenKey,
   LLMProviderBaseUrlKey,
   LLMProviderConfigKey,
   LLMProviderModelListKey,
 } from '@/app/(main)/settings/llm/const';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { useUserStore } from '@/store/user';
-import { modelConfigSelectors } from '@/store/user/selectors';
+import { keyVaultsConfigSelectors, modelConfigSelectors } from '@/store/user/selectors';
 import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import Checker from '../Checker';
@@ -100,7 +101,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
       s.setSettings,
       modelConfigSelectors.isProviderEnabled(provider)(s),
       modelConfigSelectors.isProviderFetchOnClient(provider)(s),
-      modelConfigSelectors.isProviderEndpointNotEmpty(provider)(s),
+      keyVaultsConfigSelectors.isProviderEndpointNotEmpty(provider)(s),
     ]);
 
     useSyncSettings(form);
@@ -117,7 +118,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
             ),
             desc: modelT(`${provider}.token.desc` as any),
             label: modelT(`${provider}.token.title` as any),
-            name: [LLMProviderConfigKey, provider, LLMProviderApiTokenKey],
+            name: [KeyVaultsConfigKey, provider, LLMProviderApiTokenKey],
           },
         ];
 
@@ -128,7 +129,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
         children: <Input allowClear placeholder={proxyUrl?.placeholder} />,
         desc: proxyUrl?.desc || t('llm.proxyUrl.desc'),
         label: proxyUrl?.title || t('llm.proxyUrl.title'),
-        name: [LLMProviderConfigKey, provider, LLMProviderBaseUrlKey],
+        name: [KeyVaultsConfigKey, provider, LLMProviderBaseUrlKey],
       },
       (showBrowserRequest || (showEndpoint && isProviderEndpointNotEmpty)) && {
         children: (

src/app/(main)/settings/llm/const.ts

@@ -1,4 +1,5 @@
 export const LLMProviderConfigKey = 'languageModel';
+export const KeyVaultsConfigKey = 'keyVaults';
 
 /**
  * we use this key to define default api key
@@ -10,7 +11,7 @@ export const LLMProviderApiTokenKey = 'apiKey';
  * we use this key to define the baseURL
  * equal OPENAI_PROXY_URL
  */
-export const LLMProviderBaseUrlKey = 'endpoint';
+export const LLMProviderBaseUrlKey = 'baseURL';
 
 /**
  * we use this key to define the custom model name

src/const/settings/common.ts

@@ -1,6 +1,6 @@
-import { UserGeneralSettings } from '@/types/user/settings';
+import { UserGeneralConfig } from '@/types/user/settings';
 
-export const DEFAULT_COMMON_SETTINGS: UserGeneralSettings = {
+export const DEFAULT_COMMON_SETTINGS: UserGeneralConfig = {
   fontSize: 14,
   language: 'auto',
   password: '',

src/const/settings/index.ts

@@ -18,10 +18,11 @@ export * from './tts';
 
 export const DEFAULT_SETTINGS: UserSettings = {
   defaultAgent: DEFAULT_AGENT,
+  general: DEFAULT_COMMON_SETTINGS,
+  keyVaults: {},
   languageModel: DEFAULT_LLM_CONFIG,
   sync: DEFAULT_SYNC_CONFIG,
   systemAgent: DEFAULT_SYSTEM_AGENT_CONFIG,
   tool: DEFAULT_TOOL_CONFIG,
   tts: DEFAULT_TTS_CONFIG,
-  ...DEFAULT_COMMON_SETTINGS,
 };

src/const/settings/llm.ts

@@ -21,85 +21,66 @@ import { UserModelProviderConfig } from '@/types/user/settings';
 
 export const DEFAULT_LLM_CONFIG: UserModelProviderConfig = {
   anthropic: {
-    apiKey: '',
     enabled: false,
     enabledModels: filterEnabledModels(AnthropicProviderCard),
   },
   azure: {
-    apiKey: '',
     enabled: false,
-    endpoint: '',
   },
   bedrock: {
-    accessKeyId: '',
     enabled: false,
     enabledModels: filterEnabledModels(BedrockProviderCard),
-    region: 'us-east-1',
-    secretAccessKey: '',
   },
   deepseek: {
-    apiKey: '',
     enabled: false,
     enabledModels: filterEnabledModels(DeepSeekProviderCard),
   },
   google: {
-    apiKey: '',
     enabled: false,
     enabledModels: filterEnabledModels(GoogleProviderCard),
   },
   groq: {
-    apiKey: '',
     enabled: false,
     enabledModels: filterEnabledModels(GroqProviderCard),
   },
   minimax: {
-    apiKey: '',
     enabled: false,
     enabledModels: filterEnabledModels(MinimaxProviderCard),
   },
   mistral: {
-    apiKey: '',
     enabled: false,
     enabledModels: filterEnabledModels(MistralProviderCard),
   },
   moonshot: {
-    apiKey: '',
     enabled: false,
     enabledModels: filterEnabledModels(MoonshotProviderCard),
   },
   ollama: {
     enabled: true,
     enabledModels: filterEnabledModels(OllamaProviderCard),
-    endpoint: '',
     fetchOnClient: true,
   },
   openai: {
-    apiKey: '',
     enabled: true,
     enabledModels: filterEnabledModels(OpenAIProviderCard),
   },
   openrouter: {
-    apiKey: '',
     enabled: false,
     enabledModels: filterEnabledModels(OpenRouterProviderCard),
   },
   perplexity: {
-    apiKey: '',
     enabled: false,
     enabledModels: filterEnabledModels(PerplexityProviderCard),
   },
   togetherai: {
-    apiKey: '',
     enabled: false,
     enabledModels: filterEnabledModels(TogetherAIProviderCard),
   },
   zeroone: {
-    apiKey: '',
     enabled: false,
     enabledModels: filterEnabledModels(ZeroOneProviderCard),
   },
   zhipu: {
-    apiKey: '',
     enabled: false,
     enabledModels: filterEnabledModels(ZhiPuProviderCard),
   },