@lobehub/chat 0.162.8 → 0.162.9

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.162.9](https://github.com/lobehub/lobe-chat/compare/v0.162.8...v0.162.9)
+
+<sup>Released on **2024-05-29**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor the settings to add optimistic updating.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor the settings to add optimistic updating, closes [#2709](https://github.com/lobehub/lobe-chat/issues/2709) ([fade53e](https://github.com/lobehub/lobe-chat/commit/fade53e))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.162.8](https://github.com/lobehub/lobe-chat/compare/v0.162.7...v0.162.8)
 
 <sup>Released on **2024-05-28**</sup>

package/README.md

@@ -262,14 +262,14 @@ Our marketplace is not just a showcase platform but also a collaborative space.
 
 <!-- AGENT LIST -->
 
-| Recent Submits                                                                                                                                                               | Description                                                                                                                                                                                                                                                                                                               |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Dart/Flutter Dev](https://chat-preview.lobehub.com/market?agent=dart-flutter)<br/><sup>By **[rezmeplxrf](https://github.com/rezmeplxrf)** on **2024-05-28**</sup>           | Dart/Flutter Expert. Never nest more than 3 levels deep. Use riverpod, flutter_riverpod, riverpod_hook, flutter_hook for state management.<br/>`dart` `flutter` `development` `state-management` `riverpod`                                                                                                               |
-| [C# .NET Technology Expert](https://chat-preview.lobehub.com/market?agent=dotnet-expert)<br/><sup>By **[johnnyqian](https://github.com/johnnyqian)** on **2024-05-28**</sup> | C# .NET Technology Expert<br/>`net` `developer` `net-core` `azure` `c` `microsoft` `sql-server` `entity-framework` `ef` `ef-core`                                                                                                                                                                                         |
-| [Daily Assistant](https://chat-preview.lobehub.com/market?agent=junior-helper)<br/><sup>By **[Qinks6](https://github.com/Qinks6)** on **2024-05-28**</sup>                   | A cute little helper that can search and draw<br/>`assistant` `search` `drawing` `information-retrieval` `user-interaction`                                                                                                                                                                                               |
-| [Node.js Optimizer](https://chat-preview.lobehub.com/market?agent=node-js-devoloper)<br/><sup>By **[chrisuhg](https://github.com/chrisuhg)** on **2024-05-28**</sup>         | Specializes in Node.js code review, performance optimization, asynchronous programming, error handling, code refactoring, dependency management, security enhancement, test coverage, and documentation writing.<br/>`node-js` `code-optimization` `performance-optimization` `asynchronous-programming` `error-handling` |
-
-> 📊 Total agents: [<kbd>**279**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+| Recent Submits                                                                                                                                                               | Description                                                                                                                                                                                                                                                                                                          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Dart/Flutter Dev](https://chat-preview.lobehub.com/market?agent=dart-flutter)<br/><sup>By **[rezmeplxrf](https://github.com/rezmeplxrf)** on **2024-05-28**</sup>           | Dart/Flutter Expert. Never nest more than 3 levels deep. Use riverpod, flutter_riverpod, riverpod_hook, flutter_hook for state management.<br/>`dart` `flutter` `development` `state-management` `riverpod`                                                                                                          |
+| [C# .NET Technology Expert](https://chat-preview.lobehub.com/market?agent=dotnet-expert)<br/><sup>By **[johnnyqian](https://github.com/johnnyqian)** on **2024-05-28**</sup> | C# .NET Technology Expert<br/>`net` `developer` `net-core` `azure` `c` `microsoft` `sql-server` `entity-framework` `ef` `ef-core`                                                                                                                                                                                    |
+| [Christian Missionary](https://chat-preview.lobehub.com/market?agent=jesus-missionary)<br/><sup>By **[epochaudio](https://github.com/epochaudio)** on **2024-05-28**</sup>   | As a missionary of Jesus, I will enlighten your understanding and practical application of God's word based on the teachings of the Bible. Whether in times of confusion or seeking spiritual growth, I am here to serve you by this source of wisdom.<br/>`bible-teaching` `christian-mission` `theology-preaching` |
+| [Daily Assistant](https://chat-preview.lobehub.com/market?agent=junior-helper)<br/><sup>By **[Qinks6](https://github.com/Qinks6)** on **2024-05-28**</sup>                   | A cute little helper that can search and draw<br/>`assistant` `search` `drawing` `information-retrieval` `user-interaction`                                                                                                                                                                                          |
+
+> 📊 Total agents: [<kbd>**280**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

package/README.zh-CN.md

@@ -250,14 +250,14 @@ LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地
 
 <!-- AGENT LIST -->
 
-| 最近新增                                                                                                                                                            | 助手说明                                                                                                                                                                    |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Dart/Flutter Dev](https://chat-preview.lobehub.com/market?agent=dart-flutter)<br/><sup>By **[rezmeplxrf](https://github.com/rezmeplxrf)** on **2024-05-28**</sup>  | Dart/Flutter 전문가. 3단계 이상 중첩하지 않음. 상태 관리에 riverpod, flutter_riverpod, riverpod_hook, flutter_hook 사용.<br/>`dart` `flutter` `개발` `상태-관리` `riverpod` |
-| [C# .NET 技术专家](https://chat-preview.lobehub.com/market?agent=dotnet-expert)<br/><sup>By **[johnnyqian](https://github.com/johnnyqian)** on **2024-05-28**</sup> | C# .NET 技术专家<br/>`net` `developer` `net-core` `azure` `c` `microsoft` `sql-server` `entity-framework` `ef` `ef-core`                                                    |
-| [日常小助手](https://chat-preview.lobehub.com/market?agent=junior-helper)<br/><sup>By **[Qinks6](https://github.com/Qinks6)** on **2024-05-28**</sup>               | 一个能搜索、能画图的小可爱<br/>`助手` `搜索` `绘图` `信息查询` `用户交互`                                                                                                   |
-| [Node.js 优化师](https://chat-preview.lobehub.com/market?agent=node-js-devoloper)<br/><sup>By **[chrisuhg](https://github.com/chrisuhg)** on **2024-05-28**</sup>   | 擅长 Node.js 代码审查、性能优化、异步编程、错误处理、代码重构、依赖管理、安全增强、测试覆盖率和文档编写。<br/>`node-js` `代码优化` `性能优化` `异步编程` `错误处理`         |
-
-> 📊 Total agents: [<kbd>**279**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+| 最近新增                                                                                                                                                            | 助手说明                                                                                                                                                                        |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Dart/Flutter Dev](https://chat-preview.lobehub.com/market?agent=dart-flutter)<br/><sup>By **[rezmeplxrf](https://github.com/rezmeplxrf)** on **2024-05-28**</sup>  | Dart/Flutter 전문가. 3단계 이상 중첩하지 않음. 상태 관리에 riverpod, flutter_riverpod, riverpod_hook, flutter_hook 사용.<br/>`dart` `flutter` `개발` `상태-관리` `riverpod`     |
+| [C# .NET 技术专家](https://chat-preview.lobehub.com/market?agent=dotnet-expert)<br/><sup>By **[johnnyqian](https://github.com/johnnyqian)** on **2024-05-28**</sup> | C# .NET 技术专家<br/>`net` `developer` `net-core` `azure` `c` `microsoft` `sql-server` `entity-framework` `ef` `ef-core`                                                        |
+| [基督传教士](https://chat-preview.lobehub.com/market?agent=jesus-missionary)<br/><sup>By **[epochaudio](https://github.com/epochaudio)** on **2024-05-28**</sup>    | 作为一名耶稣传教士，我将依据圣经教导以启迪你对神的话语的理解和实际运用。无论是在困惑还是寻求灵性成长的过程中，我都在这智慧的源泉旁为你服务<br/>`圣经教学` `基督传教` `神学布道` |
+| [日常小助手](https://chat-preview.lobehub.com/market?agent=junior-helper)<br/><sup>By **[Qinks6](https://github.com/Qinks6)** on **2024-05-28**</sup>               | 一个能搜索、能画图的小可爱<br/>`助手` `搜索` `绘图` `信息查询` `用户交互`                                                                                                       |
+
+> 📊 Total agents: [<kbd>**280**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.162.8",
+  "version": "0.162.9",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

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

@@ -41,7 +41,6 @@ const Theme = memo(() => {
       {
         children: (
           <SelectWithImg
-            defaultValue={themeMode}
             height={60}
             onChange={setThemeMode}
             options={[
@@ -65,6 +64,7 @@ const Theme = memo(() => {
               },
             ]}
             unoptimized={false}
+            value={themeMode}
             width={100}
           />
         ),

package/src/features/Conversation/Error/AccessCodeForm.tsx

@@ -5,7 +5,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useChatStore } from '@/store/chat';
 import { useUserStore } from '@/store/user';
-import { settingsSelectors } from '@/store/user/selectors';
+import { keyVaultsConfigSelectors } from '@/store/user/selectors';
 
 import { FormAction } from './style';
 
@@ -16,7 +16,7 @@ interface AccessCodeFormProps {
 const AccessCodeForm = memo<AccessCodeFormProps>(({ id }) => {
   const { t } = useTranslation('error');
   const [password, updateKeyVaults] = useUserStore((s) => [
-    settingsSelectors.password(s),
+    keyVaultsConfigSelectors.password(s),
     s.updateKeyVaults,
   ]);
   const [resend, deleteMessage] = useChatStore((s) => [s.regenerateMessage, s.deleteMessage]);

package/src/hooks/_header.ts

@@ -1,11 +1,11 @@
 import { LOBE_CHAT_ACCESS_CODE, OPENAI_API_KEY_HEADER_KEY, OPENAI_END_POINT } from '@/const/fetch';
 import { useUserStore } from '@/store/user';
-import {
-  keyVaultsConfigSelectors,
-  settingsSelectors,
-} from '@/store/user/selectors';
+import { keyVaultsConfigSelectors } from '@/store/user/selectors';
 
-// TODO: Need to be removed after tts refactor
+/**
+ * TODO: Need to be removed after tts refactor
+ * @deprecated
+ */
 // eslint-disable-next-line no-undef
 export const createHeaderWithOpenAI = (header?: HeadersInit): HeadersInit => {
   const openai = keyVaultsConfigSelectors.openAIConfig(useUserStore.getState());
@@ -16,7 +16,7 @@ export const createHeaderWithOpenAI = (header?: HeadersInit): HeadersInit => {
   // eslint-disable-next-line no-undef
   return {
     ...header,
-    [LOBE_CHAT_ACCESS_CODE]: settingsSelectors.password(useUserStore.getState()),
+    [LOBE_CHAT_ACCESS_CODE]: keyVaultsConfigSelectors.password(useUserStore.getState()),
     [OPENAI_API_KEY_HEADER_KEY]: apiKey,
     [OPENAI_END_POINT]: endpoint,
   };

package/src/services/_auth.ts

@@ -1,11 +1,7 @@
 import { JWTPayload, LOBE_CHAT_AUTH_HEADER } from '@/const/auth';
 import { ModelProvider } from '@/libs/agent-runtime';
 import { useUserStore } from '@/store/user';
-import {
-  keyVaultsConfigSelectors,
-  settingsSelectors,
-  userProfileSelectors,
-} from '@/store/user/selectors';
+import { keyVaultsConfigSelectors, userProfileSelectors } from '@/store/user/selectors';
 import { GlobalLLMProviderKey } from '@/types/user/settings';
 import { createJWT } from '@/utils/jwt';
 
@@ -51,7 +47,7 @@ export const getProviderAuthPayload = (provider: string) => {
 };
 
 const createAuthTokenWithPayload = async (payload = {}) => {
-  const accessCode = settingsSelectors.password(useUserStore.getState());
+  const accessCode = keyVaultsConfigSelectors.password(useUserStore.getState());
   const userId = userProfileSelectors.userId(useUserStore.getState());
 
   return await createJWT<JWTPayload>({ accessCode, userId, ...payload });

package/src/services/_header.ts

@@ -1,9 +1,6 @@
 import { LOBE_CHAT_ACCESS_CODE, OPENAI_API_KEY_HEADER_KEY, OPENAI_END_POINT } from '@/const/fetch';
 import { useUserStore } from '@/store/user';
-import {
-  keyVaultsConfigSelectors,
-  settingsSelectors,
-} from '@/store/user/selectors';
+import { keyVaultsConfigSelectors } from '@/store/user/selectors';
 
 /**
  * TODO: Need to be removed after tts refactor
@@ -16,7 +13,7 @@ export const createHeaderWithOpenAI = (header?: HeadersInit): HeadersInit => {
   // eslint-disable-next-line no-undef
   return {
     ...header,
-    [LOBE_CHAT_ACCESS_CODE]: settingsSelectors.password(useUserStore.getState()),
+    [LOBE_CHAT_ACCESS_CODE]: keyVaultsConfigSelectors.password(useUserStore.getState()),
     [OPENAI_API_KEY_HEADER_KEY]: openAIConfig.apiKey || '',
     [OPENAI_END_POINT]: openAIConfig.baseURL || '',
   };

package/src/services/user/client.ts

@@ -33,7 +33,8 @@ export class ClientService implements IUserService {
     };
   }
 
-  updateUserSettings = async (patch: DeepPartial<UserSettings>) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  updateUserSettings = async (patch: DeepPartial<UserSettings>, _?: any) => {
     return UserModel.updateSettings(patch);
   };
 

package/src/store/tool/slices/plugin/action.ts

@@ -53,7 +53,7 @@ export const createPluginSlice: StateCreator<
     const previousSettings = pluginSelectors.getPluginSettingsById(id)(get());
     const nextSettings = merge(previousSettings, settings);
 
-    set({ updatePluginSettingsSignal: newSignal });
+    set({ updatePluginSettingsSignal: newSignal }, false, 'create new Signal');
     await pluginService.updatePluginSettings(id, nextSettings, newSignal.signal);
 
     await get().refreshPlugins();

package/src/store/user/slices/modelList/action.test.ts

@@ -32,11 +32,10 @@ describe('LLMSettingsSliceAction', () => {
       });
 
       // Assert that updateUserSettings was called with the correct OpenAI configuration
-      expect(userService.updateUserSettings).toHaveBeenCalledWith({
-        languageModel: {
-          openai: openAIConfig,
-        },
-      });
+      expect(userService.updateUserSettings).toHaveBeenCalledWith(
+        { languageModel: { openai: openAIConfig } },
+        expect.any(AbortSignal),
+      );
     });
   });
 
@@ -212,11 +211,10 @@ describe('LLMSettingsSliceAction', () => {
         await result.current.removeEnabledModels('azure', model);
       });
 
-      expect(spyOn).toHaveBeenCalledWith({
-        languageModel: {
-          azure: { enabledModels: ['gpt-4'] },
-        },
-      });
+      expect(spyOn).toHaveBeenCalledWith(
+        { languageModel: { azure: { enabledModels: ['gpt-4'] } } },
+        expect.any(AbortSignal),
+      );
     });
   });
 
@@ -250,11 +248,10 @@ describe('LLMSettingsSliceAction', () => {
         await result.current.toggleProviderEnabled('minimax', true);
       });
 
-      expect(userService.updateUserSettings).toHaveBeenCalledWith({
-        languageModel: {
-          minimax: { enabled: true },
-        },
-      });
+      expect(userService.updateUserSettings).toHaveBeenCalledWith(
+        { languageModel: { minimax: { enabled: true } } },
+        expect.any(AbortSignal),
+      );
     });
 
     it('should disable the provider', async () => {
@@ -265,11 +262,10 @@ describe('LLMSettingsSliceAction', () => {
         await result.current.toggleProviderEnabled(provider, false);
       });
 
-      expect(userService.updateUserSettings).toHaveBeenCalledWith({
-        languageModel: {
-          openai: { enabled: false },
-        },
-      });
+      expect(userService.updateUserSettings).toHaveBeenCalledWith(
+        { languageModel: { openai: { enabled: false } } },
+        expect.any(AbortSignal),
+      );
     });
   });
 
@@ -285,15 +281,18 @@ describe('LLMSettingsSliceAction', () => {
         await result.current.updateEnabledModels(provider, modelKeys, options);
       });
 
-      expect(userService.updateUserSettings).toHaveBeenCalledWith({
-        languageModel: {
-          openai: {
-            customModelCards: [{ id: 'custom-model' }],
-            // TODO：目标单测中需要包含下面这一行
-            // enabledModels: ['gpt-3.5-turbo', 'custom-model'],
+      expect(userService.updateUserSettings).toHaveBeenCalledWith(
+        {
+          languageModel: {
+            openai: {
+              customModelCards: [{ id: 'custom-model' }],
+              // TODO：目标单测中需要包含下面这一行
+              // enabledModels: ['gpt-3.5-turbo', 'custom-model'],
+            },
           },
         },
-      });
+        expect.any(AbortSignal),
+      );
     });
 
     it('should not add removed model to customModelCards', async () => {
@@ -316,11 +315,12 @@ describe('LLMSettingsSliceAction', () => {
         await result.current.updateEnabledModels(provider, modelKeys, options);
       });
 
-      expect(userService.updateUserSettings).toHaveBeenCalledWith({
-        languageModel: {
-          openai: { enabledModels: ['gpt-3.5-turbo'] },
+      expect(userService.updateUserSettings).toHaveBeenCalledWith(
+        {
+          languageModel: { openai: { enabledModels: ['gpt-3.5-turbo'] } },
         },
-      });
+        expect.any(AbortSignal),
+      );
     });
   });
 

package/src/store/user/slices/modelList/selectors/keyVaults.ts

@@ -1,9 +1,14 @@
 import { UserStore } from '@/store/user';
-import { GlobalLLMProviderKey, OpenAICompatibleKeyVault } from '@/types/user/settings';
+import {
+  GlobalLLMProviderKey,
+  OpenAICompatibleKeyVault,
+  UserKeyVaults,
+} from '@/types/user/settings';
 
 import { currentSettings } from '../../settings/selectors/settings';
 
-export const keyVaultsSettings = (s: UserStore) => currentSettings(s).keyVaults;
+export const keyVaultsSettings = (s: UserStore): UserKeyVaults =>
+  currentSettings(s).keyVaults || {};
 
 const openAIConfig = (s: UserStore) => keyVaultsSettings(s).openai || {};
 const bedrockConfig = (s: UserStore) => keyVaultsSettings(s).bedrock || {};
@@ -15,6 +20,8 @@ const getVaultByProvider = (provider: GlobalLLMProviderKey) => (s: UserStore) =>
 const isProviderEndpointNotEmpty = (provider: string) => (s: UserStore) =>
   !!getVaultByProvider(provider as GlobalLLMProviderKey)(s)?.baseURL;
 
+const password = (s: UserStore) => keyVaultsSettings(s).password || '';
+
 export const keyVaultsConfigSelectors = {
   azureConfig,
   bedrockConfig,
@@ -22,4 +29,5 @@ export const keyVaultsConfigSelectors = {
   isProviderEndpointNotEmpty,
   ollamaConfig,
   openAIConfig,
+  password,
 };

package/src/store/user/slices/settings/action.test.ts

@@ -40,9 +40,10 @@ describe('SettingsAction', () => {
       expect(setSettingsSpy).toHaveBeenCalledWith(newSettings);
 
       // Assert that the state has been updated
-      expect(userService.updateUserSettings).toHaveBeenCalledWith({
-        general: { themeMode: 'dark' },
-      });
+      expect(userService.updateUserSettings).toHaveBeenCalledWith(
+        { general: { themeMode: 'dark' } },
+        expect.any(AbortSignal),
+      );
 
       // Restore the spy
       setSettingsSpy.mockRestore();
@@ -77,7 +78,10 @@ describe('SettingsAction', () => {
       });
 
       // Assert that updateUserSettings was called with the correct settings
-      expect(userService.updateUserSettings).toHaveBeenCalledWith(partialSettings);
+      expect(userService.updateUserSettings).toHaveBeenCalledWith(
+        partialSettings,
+        expect.any(AbortSignal),
+      );
     });
   });
 
@@ -92,9 +96,10 @@ describe('SettingsAction', () => {
       });
 
       // Assert that updateUserSettings was called with the correct theme mode
-      expect(userService.updateUserSettings).toHaveBeenCalledWith({
-        general: { themeMode },
-      });
+      expect(userService.updateUserSettings).toHaveBeenCalledWith(
+        { general: { themeMode } },
+        expect.any(AbortSignal),
+      );
     });
   });
 
@@ -111,7 +116,10 @@ describe('SettingsAction', () => {
       });
 
       // Assert that updateUserSettings was called with the merged agent settings
-      expect(userService.updateUserSettings).toHaveBeenCalledWith({ defaultAgent: updatedAgent });
+      expect(userService.updateUserSettings).toHaveBeenCalledWith(
+        { defaultAgent: updatedAgent },
+        expect.any(AbortSignal),
+      );
     });
   });
 
@@ -136,7 +144,10 @@ describe('SettingsAction', () => {
       });
 
       // Assert that updateUserSettings was called with the correct settings
-      expect(userService.updateUserSettings).toHaveBeenCalledWith(systemAgentSettings);
+      expect(userService.updateUserSettings).toHaveBeenCalledWith(
+        systemAgentSettings,
+        expect.any(AbortSignal),
+      );
     });
   });
 });

package/src/store/user/slices/settings/action.ts

@@ -14,6 +14,8 @@ import { merge } from '@/utils/merge';
 
 export interface UserSettingsAction {
   importAppSettings: (settings: UserSettings) => Promise<void>;
+  internal_createSignal: () => AbortController;
+
   resetSettings: () => Promise<void>;
   setSettings: (settings: DeepPartial<UserSettings>) => Promise<void>;
   switchLocale: (locale: LocaleMode) => Promise<void>;
@@ -21,6 +23,7 @@ export interface UserSettingsAction {
   updateDefaultAgent: (agent: DeepPartial<LobeAgentSettings>) => Promise<void>;
   updateGeneralConfig: (settings: Partial<UserGeneralConfig>) => Promise<void>;
   updateKeyVaults: (settings: Partial<UserKeyVaults>) => Promise<void>;
+
   updateSystemAgent: (key: string, value: { model: string; provider: string }) => Promise<void>;
 }
 
@@ -35,6 +38,18 @@ export const createSettingsSlice: StateCreator<
 
     await setSettings(importAppSettings);
   },
+
+  internal_createSignal: () => {
+    const abortController = get().updateSettingsSignal;
+    if (abortController && !abortController.signal.aborted) abortController.abort('canceled');
+
+    const newSignal = new AbortController();
+
+    set({ updateSettingsSignal: newSignal }, false, 'signalForUpdateSettings');
+
+    return newSignal;
+  },
+
   resetSettings: async () => {
     await userService.resetUserSettings();
     await get().refreshUserState();
@@ -47,8 +62,10 @@ export const createSettingsSlice: StateCreator<
     if (isEqual(prevSetting, nextSettings)) return;
 
     const diffs = difference(nextSettings, defaultSettings);
+    set({ settings: diffs }, false, 'optimistic_updateSettings');
 
-    await userService.updateUserSettings(diffs);
+    const abortController = get().internal_createSignal();
+    await userService.updateUserSettings(diffs, abortController.signal);
     await get().refreshUserState();
   },
   switchLocale: async (locale) => {

package/src/store/user/slices/settings/initialState.ts

@@ -6,6 +6,7 @@ import { UserSettings } from '@/types/user/settings';
 export interface UserSettingsState {
   defaultSettings: UserSettings;
   settings: DeepPartial<UserSettings>;
+  updateSettingsSignal?: AbortController;
 }
 
 export const initialSettingsState: UserSettingsState = {

package/src/store/user/slices/settings/selectors/settings.ts

@@ -8,6 +8,7 @@ import {
 import {
   GlobalLLMProviderKey,
   ProviderConfig,
+  UserModelProviderConfig,
   UserSettings,
 } from '@/types/user/settings';
 import { merge } from '@/utils/merge';
@@ -16,14 +17,11 @@ import { UserStore } from '../../../store';
 
 export const currentSettings = (s: UserStore): UserSettings => merge(s.defaultSettings, s.settings);
 
-export const currentLLMSettings = (s: UserStore) => currentSettings(s).languageModel;
+export const currentLLMSettings = (s: UserStore): UserModelProviderConfig =>
+  currentSettings(s).languageModel || {};
 
 export const getProviderConfigById = (provider: string) => (s: UserStore) =>
-  currentLLMSettings(s)[provider as GlobalLLMProviderKey] as
-    | ProviderConfig
-    | undefined;
-
-const password = (s: UserStore) => currentSettings(s).keyVaults.password || '';
+  currentLLMSettings(s)[provider as GlobalLLMProviderKey] as ProviderConfig | undefined;
 
 const currentTTS = (s: UserStore) => merge(DEFAULT_TTS_CONFIG, currentSettings(s).tts);
 
@@ -50,6 +48,5 @@ export const settingsSelectors = {
   defaultAgentMeta,
   exportSettings,
   isDalleAutoGenerating,
-  password,
   providerConfig: getProviderConfigById,
 };

package/src/store/user/slices/sync/selectors.ts

@@ -1,10 +1,16 @@
+import { DEFAULT_SYNC_CONFIG } from '@/const/settings/sync';
+import { UserSyncSettings } from '@/types/user/settings';
+
 import { UserStore } from '../../store';
 import { currentSettings } from '../settings/selectors/settings';
 
-const webrtcConfig = (s: UserStore) => currentSettings(s).sync.webrtc;
+const syncConfig = (s: UserStore): UserSyncSettings =>
+  currentSettings(s).sync || DEFAULT_SYNC_CONFIG;
+
+const webrtcConfig = (s: UserStore) => syncConfig(s).webrtc;
 const webrtcChannelName = (s: UserStore) => webrtcConfig(s).channelName;
 const enableWebRTC = (s: UserStore) => webrtcConfig(s).enabled;
-const deviceName = (s: UserStore) => currentSettings(s).sync.deviceName;
+const deviceName = (s: UserStore) => syncConfig(s).deviceName;
 
 export const syncSettingsSelectors = {
   deviceName,

package/src/types/user/settings/index.ts

@@ -25,7 +25,7 @@ export interface UserSettings {
   general: UserGeneralConfig;
   keyVaults: UserKeyVaults;
   languageModel: UserModelProviderConfig;
-  sync: UserSyncSettings;
+  sync?: UserSyncSettings;
   systemAgent: UserSystemAgentConfig;
   tool: UserToolConfig;
   tts: UserTTSConfig;