@lobehub/chat 0.162.8 → 0.162.10

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.162.10](https://github.com/lobehub/lobe-chat/compare/v0.162.9...v0.162.10)
+
+<sup>Released on **2024-05-29**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor the config import for server import.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor the config import for server import, closes [#2718](https://github.com/lobehub/lobe-chat/issues/2718) ([d4ee64b](https://github.com/lobehub/lobe-chat/commit/d4ee64b))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [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.10",
   "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/database/client/schemas/message.ts

@@ -34,7 +34,7 @@ export const DB_MessageSchema = z.object({
 
   fromModel: z.string().optional(),
   fromProvider: z.string().optional(),
-  translate: TranslateSchema.optional().or(z.literal(false)),
+  translate: TranslateSchema.optional().or(z.literal(false)).or(z.null()),
   tts: z.any().optional(),
 
   traceId: z.string().optional(),

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/features/DataImporter/index.tsx

@@ -4,14 +4,15 @@ import { Icon } from '@lobehub/ui';
 import { Button, Result, Table, Upload } from 'antd';
 import { createStyles } from 'antd-style';
 import { CheckCircle, ImportIcon } from 'lucide-react';
-import React, { ReactNode, memo, useState } from 'react';
+import React, { ReactNode, memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import DataStyleModal from '@/components/DataStyleModal';
-import { useImportConfig } from '@/hooks/useImportConfig';
 import { ImportResult, ImportResults } from '@/services/config';
 
+import { useImportConfig } from './useImportConfig';
+
 const useStyles = createStyles(({ css, token }) => {
   const size = 28;
 
@@ -145,12 +146,29 @@ interface DataImporterProps {
 }
 const DataImporter = memo<DataImporterProps>(({ children, onFinishImport }) => {
   const { t } = useTranslation('common');
-  const { importConfig } = useImportConfig();
+  const importConfig = useImportConfig();
   const [duration, setDuration] = useState(0);
   const [importState, setImportState] = useState(ImportState.Start);
   const [importData, setImportData] = useState<ImportResults | undefined>();
   const { styles } = useStyles();
 
+  const dataSource = useMemo(() => {
+    if (!importData) return;
+
+    const { type, ...res } = importData;
+
+    if (type === 'settings') return;
+
+    return Object.entries(res)
+      .filter(([, v]) => !!v)
+      .map(([item, value]: [string, ImportResult]) => ({
+        added: value.added,
+        error: value.errors,
+        skips: value.skips,
+        title: t(`importModal.result.${item as keyof ImportResults}`),
+      }));
+  }, [importData]);
+
   return (
     <>
       <DataStyleModal
@@ -187,7 +205,7 @@ const DataImporter = memo<DataImporterProps>(({ children, onFinishImport }) => {
               style={{ paddingBlock: 24 }}
               subTitle={
                 // if there is no importData, means it's only import the settings
-                !importData ? (
+                !dataSource ? (
                   t('importModal.finish.onlySettings')
                 ) : (
                   <Flexbox gap={16} width={400}>
@@ -200,14 +218,7 @@ const DataImporter = memo<DataImporterProps>(({ children, onFinishImport }) => {
                         { dataIndex: 'skips', title: t('importModal.result.skips') },
                         { dataIndex: 'error', title: t('importModal.result.errors') },
                       ]}
-                      dataSource={Object.entries(importData).map(
-                        ([item, value]: [string, ImportResult]) => ({
-                          added: value.added,
-                          error: value.errors,
-                          skips: value.skips,
-                          title: t(`importModal.result.${item as keyof ImportResults}`),
-                        }),
-                      )}
+                      dataSource={dataSource}
                       pagination={false}
                       size={'small'}
                     />

package/src/features/DataImporter/useImportConfig.ts

@@ -0,0 +1,27 @@
+import { useCallback } from 'react';
+
+import { ImportResults, configService } from '@/services/config';
+import { useChatStore } from '@/store/chat';
+import { useSessionStore } from '@/store/session';
+import { importConfigFile } from '@/utils/config';
+
+export const useImportConfig = () => {
+  const refreshSessions = useSessionStore((s) => s.refreshSessions);
+  const [refreshMessages, refreshTopics] = useChatStore((s) => [s.refreshMessages, s.refreshTopic]);
+
+  return useCallback(
+    async (file: File) =>
+      new Promise<ImportResults | undefined>((resolve) => {
+        importConfigFile(file, async (config) => {
+          const data = await configService.importConfigState(config);
+
+          await refreshSessions();
+          await refreshMessages();
+          await refreshTopics();
+
+          resolve(data);
+        });
+      }),
+    [],
+  );
+};

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/layout/GlobalProvider/StoreInitialization.tsx

@@ -5,7 +5,6 @@ import { memo, useEffect } from 'react';
 import { createStoreUpdater } from 'zustand-utils';
 
 import { LOBE_URL_IMPORT_NAME } from '@/const/url';
-import { useImportConfig } from '@/hooks/useImportConfig';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useEnabledDataSync } from '@/hooks/useSyncData';
 import { useAgentStore } from '@/store/agent';
@@ -17,9 +16,10 @@ import { authSelectors } from '@/store/user/selectors';
 const StoreInitialization = memo(() => {
   const router = useRouter();
 
-  const [useInitUserState, isLogin] = useUserStore((s) => [
-    s.useInitUserState,
+  const [isLogin, useInitUserState, importUrlShareSettings] = useUserStore((s) => [
     authSelectors.isLogin(s),
+    s.useInitUserState,
+    s.importUrlShareSettings,
   ]);
 
   const { serverConfig } = useServerConfigStore();
@@ -52,10 +52,9 @@ const StoreInitialization = memo(() => {
   useStoreUpdater('router', router);
 
   // Import settings from the url
-  const { importSettings } = useImportConfig();
   const searchParam = useSearchParams().get(LOBE_URL_IMPORT_NAME);
   useEffect(() => {
-    importSettings(searchParam);
+    importUrlShareSettings(searchParam);
   }, [searchParam]);
 
   // useEffect(() => {

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/config.ts

@@ -1,3 +1,4 @@
+import { importService } from '@/services/import';
 import { messageService } from '@/services/message';
 import { sessionService } from '@/services/session';
 import { topicService } from '@/services/topic';
@@ -6,10 +7,6 @@ import { sessionSelectors } from '@/store/session/selectors';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 import { ConfigFile } from '@/types/exportConfig';
-import { ChatMessage } from '@/types/message';
-import { LobeSessions, SessionGroupItem } from '@/types/session';
-import { ChatTopic } from '@/types/topic';
-import { UserSettings } from '@/types/user/settings';
 import { createConfigFile, exportConfigFile } from '@/utils/config';
 
 export interface ImportResult {
@@ -20,71 +17,30 @@ export interface ImportResult {
 export interface ImportResults {
   messages?: ImportResult;
   sessionGroups?: ImportResult;
-  sessions: ImportResult;
+  sessions?: ImportResult;
   topics?: ImportResult;
+  type?: string;
 }
 
 class ConfigService {
-  /**
-   * import sessions from files
-   * @param sessions
-   */
-  importSessions = async (sessions: LobeSessions) => {
-    return await sessionService.batchCreateSessions(sessions);
-  };
-  importMessages = async (messages: ChatMessage[]) => {
-    return messageService.batchCreateMessages(messages);
-  };
-  importSettings = async (settings: UserSettings) => {
-    useUserStore.getState().importAppSettings(settings);
-  };
-  importTopics = async (topics: ChatTopic[]) => {
-    return topicService.batchCreateTopics(topics);
-  };
-  importSessionGroups = async (sessionGroups: SessionGroupItem[]) => {
-    return sessionService.batchCreateSessionGroups(sessionGroups || []);
-  };
-
-  importConfigState = async (config: ConfigFile): Promise<ImportResults | undefined> => {
-    switch (config.exportType) {
-      case 'settings': {
-        await this.importSettings(config.state.settings);
-
-        break;
-      }
-
-      case 'agents': {
-        const sessionGroups = await this.importSessionGroups(config.state.sessionGroups);
-
-        const data = await this.importSessions(config.state.sessions);
-        return {
-          sessionGroups: this.mapImportResult(sessionGroups),
-          sessions: this.mapImportResult(data),
-        };
-      }
-
-      case 'all': {
-        await this.importSettings(config.state.settings);
-      }
-      // all and sessions have the same data process, so we can fall through
-
-      // eslint-disable-next-line no-fallthrough
-      case 'sessions': {
-        const sessionGroups = await this.importSessionGroups(config.state.sessionGroups);
-        const sessions = await this.importSessions(config.state.sessions);
-        const topics = await this.importTopics(config.state.topics);
-        const messages = await this.importMessages(config.state.messages);
-
-        return {
-          messages: this.mapImportResult(messages),
-          sessionGroups: this.mapImportResult(sessionGroups),
-          sessions: this.mapImportResult(sessions),
-          topics: this.mapImportResult(topics),
-        };
-      }
+  importConfigState = async (config: ConfigFile): Promise<ImportResults> => {
+    if (config.exportType === 'settings') {
+      await importService.importSettings(config.state.settings);
+      return { type: 'settings' };
     }
+
+    const data = await importService.importData({
+      messages: (config.state as any).messages || [],
+      sessionGroups: (config.state as any).sessionGroups || [],
+      sessions: (config.state as any).sessions || [],
+      topics: (config.state as any).topics || [],
+    });
+
+    return { ...data, type: config.exportType };
   };
 
+  // TODO: Seperate export feature into a new service like importService
+
   /**
    * export all agents
    */
@@ -190,18 +146,6 @@ class ConfigService {
 
   private getAgent = (id: string) =>
     sessionSelectors.getSessionById(id)(useSessionStore.getState());
-
-  private mapImportResult = (input: {
-    added: number;
-    errors?: Error[];
-    skips: string[];
-  }): ImportResult => {
-    return {
-      added: input.added,
-      errors: input.errors?.length || 0,
-      skips: input.skips.length,
-    };
-  };
 }
 
 export const configService = new ConfigService();

package/src/services/import/client.ts

@@ -0,0 +1,62 @@
+import { MessageModel } from '@/database/client/models/message';
+import { SessionModel } from '@/database/client/models/session';
+import { SessionGroupModel } from '@/database/client/models/sessionGroup';
+import { TopicModel } from '@/database/client/models/topic';
+import { ImportResult, ImportResults } from '@/services/config';
+import { useUserStore } from '@/store/user';
+import { ConfigStateSessions } from '@/types/exportConfig';
+import { UserSettings } from '@/types/user/settings';
+
+export class ClientService {
+  importSettings = async (settings: UserSettings) => {
+    await useUserStore.getState().importAppSettings(settings);
+  };
+
+  importData = async (config: ConfigStateSessions): Promise<ImportResults> => {
+    const { messages, sessionGroups, sessions, topics } = config;
+
+    let messageResult: ImportResult | undefined;
+    let sessionResult: ImportResult | undefined;
+    let sessionGroupResult: ImportResult | undefined;
+    let topicResult: ImportResult | undefined;
+
+    if (messages.length > 0) {
+      const res = await MessageModel.batchCreate(messages);
+      messageResult = this.mapImportResult(res);
+    }
+
+    if (sessionGroups.length > 0) {
+      const res = await SessionGroupModel.batchCreate(sessionGroups);
+      sessionGroupResult = this.mapImportResult(res);
+    }
+
+    if (topics.length > 0) {
+      const res = await TopicModel.batchCreate(topics as any);
+      topicResult = this.mapImportResult(res);
+    }
+
+    if (sessions.length > 0) {
+      const data = await SessionModel.batchCreate(sessions);
+      sessionResult = this.mapImportResult(data);
+    }
+
+    return {
+      messages: messageResult,
+      sessionGroups: sessionGroupResult,
+      sessions: sessionResult,
+      topics: topicResult,
+    };
+  };
+
+  private mapImportResult = (input: {
+    added: number;
+    errors?: Error[];
+    skips: string[];
+  }): ImportResult => {
+    return {
+      added: input.added,
+      errors: input.errors?.length || 0,
+      skips: input.skips.length,
+    };
+  };
+}

package/src/services/import/index.ts

@@ -0,0 +1,3 @@
+import { ClientService } from './client';
+
+export const importService = new ClientService();

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

@@ -3,6 +3,7 @@ import isEqual from 'fast-deep-equal';
 import { DeepPartial } from 'utility-types';
 import type { StateCreator } from 'zustand/vanilla';
 
+import { shareService } from '@/services/share';
 import { userService } from '@/services/user';
 import type { UserStore } from '@/store/user';
 import { LocaleMode } from '@/types/locale';
@@ -14,6 +15,8 @@ import { merge } from '@/utils/merge';
 
 export interface UserSettingsAction {
   importAppSettings: (settings: UserSettings) => Promise<void>;
+  importUrlShareSettings: (settingsParams: string | null) => Promise<void>;
+  internal_createSignal: () => AbortController;
   resetSettings: () => Promise<void>;
   setSettings: (settings: DeepPartial<UserSettings>) => Promise<void>;
   switchLocale: (locale: LocaleMode) => Promise<void>;
@@ -21,6 +24,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 +39,33 @@ export const createSettingsSlice: StateCreator<
 
     await setSettings(importAppSettings);
   },
+
+  /**
+   * Import settings from a string in json format
+   */
+  importUrlShareSettings: async (settingsParams: string | null) => {
+    if (settingsParams) {
+      const importSettings = shareService.decodeShareSettings(settingsParams);
+      if (importSettings?.message || !importSettings?.data) {
+        // handle some error
+        return;
+      }
+
+      await get().setSettings(importSettings.data);
+    }
+  },
+
+  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 +78,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/message/index.ts

@@ -38,7 +38,7 @@ export interface ChatMessage extends BaseDataModel {
     fromModel?: string;
     fromProvider?: string;
     // 翻译
-    translate?: ChatTranslate | false;
+    translate?: ChatTranslate | false | null;
     // TTS
     tts?: ChatTTS;
   } & Record<string, any>;

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;

package/src/hooks/useImportConfig.ts

@@ -1,45 +0,0 @@
-import { useMemo } from 'react';
-
-import { ImportResults, configService } from '@/services/config';
-import { shareService } from '@/services/share';
-import { useChatStore } from '@/store/chat';
-import { useSessionStore } from '@/store/session';
-import { useUserStore } from '@/store/user';
-import { importConfigFile } from '@/utils/config';
-
-export const useImportConfig = () => {
-  const refreshSessions = useSessionStore((s) => s.refreshSessions);
-  const [refreshMessages, refreshTopics] = useChatStore((s) => [s.refreshMessages, s.refreshTopic]);
-  const [setSettings] = useUserStore((s) => [s.setSettings]);
-
-  const importConfig = async (file: File) =>
-    new Promise<ImportResults | undefined>((resolve) => {
-      importConfigFile(file, async (config) => {
-        const data = await configService.importConfigState(config);
-
-        await refreshSessions();
-        await refreshMessages();
-        await refreshTopics();
-
-        resolve(data);
-      });
-    });
-
-  /**
-   * Import settings from a string in json format
-   * @param settingsParams
-   * @returns
-   */
-  const importSettings = (settingsParams: string | null) => {
-    if (settingsParams) {
-      const importSettings = shareService.decodeShareSettings(settingsParams);
-      if (importSettings?.message || !importSettings?.data) {
-        // handle some error
-        return;
-      }
-      setSettings(importSettings.data);
-    }
-  };
-
-  return useMemo(() => ({ importConfig, importSettings }), []);
-};