@lobehub/chat 0.161.21 → 0.161.22

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.161.22](https://github.com/lobehub/lobe-chat/compare/v0.161.21...v0.161.22)
+
+<sup>Released on **2024-05-26**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix connection checker.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix connection checker, closes [#2672](https://github.com/lobehub/lobe-chat/issues/2672) ([bef8926](https://github.com/lobehub/lobe-chat/commit/bef8926))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.161.21](https://github.com/lobehub/lobe-chat/compare/v0.161.20...v0.161.21)
 
 <sup>Released on **2024-05-26**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.161.21",
+  "version": "0.161.22",
   "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/llm/Bedrock/index.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { ModelProvider } from '@/libs/agent-runtime';
-import { GlobalLLMProviderKey } from '@/types/settings';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import ProviderConfig from '../components/ProviderConfig';
 import { LLMProviderConfigKey } from '../const';

package/src/app/(main)/settings/llm/components/Checker.tsx

@@ -50,10 +50,19 @@ const Checker = memo<ConnectionCheckerProps>(({ model, provider }) => {
   const [error, setError] = useState<ChatMessageError | undefined>();
 
   const checkConnection = async () => {
-    const data = await chatService.fetchPresetTaskResult({
+    let isError = false;
+
+    await chatService.fetchPresetTaskResult({
       onError: (_, rawError) => {
         setError(rawError);
         setPass(false);
+        isError = true;
+      },
+      onFinish: async () => {
+        if (!isError) {
+          setError(undefined);
+          setPass(true);
+        }
       },
       onLoadingChange: (loading) => {
         setLoading(loading);
@@ -74,11 +83,6 @@ const Checker = memo<ConnectionCheckerProps>(({ model, provider }) => {
         traceName: TraceNameMap.ConnectivityChecker,
       },
     });
-
-    if (data) {
-      setError(undefined);
-      setPass(true);
-    }
   };
   const isMobile = useIsMobile();
 

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

@@ -18,7 +18,7 @@ import {
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { useUserStore } from '@/store/user';
 import { modelConfigSelectors } from '@/store/user/selectors';
-import { GlobalLLMProviderKey } from '@/types/settings';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import Checker from '../Checker';
 import ProviderModelListSelect from '../ProviderModelList';

package/src/app/(main)/settings/llm/components/ProviderModelList/CustomModelOption.tsx

@@ -10,7 +10,7 @@ import ModelIcon from '@/components/ModelIcon';
 import { ModelInfoTags } from '@/components/ModelSelect';
 import { useUserStore } from '@/store/user';
 import { modelConfigSelectors } from '@/store/user/selectors';
-import { GlobalLLMProviderKey } from '@/types/settings';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 interface CustomModelOptionProps {
   id: string;

package/src/app/(main)/settings/llm/components/ProviderModelList/ModelFetcher.tsx

@@ -13,7 +13,7 @@ import {
   modelProviderSelectors,
   settingsSelectors,
 } from '@/store/user/selectors';
-import { GlobalLLMProviderKey } from '@/types/settings';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 const useStyles = createStyles(({ css, token }) => ({
   hover: css`

package/src/app/(main)/settings/llm/components/ProviderModelList/Option.tsx

@@ -11,7 +11,7 @@ import ModelIcon from '@/components/ModelIcon';
 import { ModelInfoTags } from '@/components/ModelSelect';
 import { useUserStore } from '@/store/user';
 import { modelProviderSelectors } from '@/store/user/selectors';
-import { GlobalLLMProviderKey } from '@/types/settings';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import CustomModelOption from './CustomModelOption';
 

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

@@ -9,7 +9,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useUserStore } from '@/store/user';
 import { modelProviderSelectors } from '@/store/user/selectors';
-import { GlobalLLMProviderKey } from '@/types/settings';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import ModelConfigModal from './ModelConfigModal';
 import ModelFetcher from './ModelFetcher';

package/src/const/settings/agent.ts

@@ -1,7 +1,7 @@
 import { DEFAULT_AGENT_META } from '@/const/meta';
 import { ModelProvider } from '@/libs/agent-runtime';
 import { LobeAgentChatConfig, LobeAgentConfig, LobeAgentTTSConfig } from '@/types/agent';
-import { GlobalDefaultAgent } from '@/types/settings';
+import { UserDefaultAgent } from '@/types/user/settings';
 
 export const DEFAUTT_AGENT_TTS_CONFIG: LobeAgentTTSConfig = {
   showAllLocaleVoice: false,
@@ -34,7 +34,7 @@ export const DEFAULT_AGENT_CONFIG: LobeAgentConfig = {
   tts: DEFAUTT_AGENT_TTS_CONFIG,
 };
 
-export const DEFAULT_AGENT: GlobalDefaultAgent = {
+export const DEFAULT_AGENT: UserDefaultAgent = {
   config: DEFAULT_AGENT_CONFIG,
   meta: DEFAULT_AGENT_META,
 };

package/src/const/settings/common.ts

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

package/src/const/settings/index.ts

@@ -1,4 +1,4 @@
-import { GlobalSettings } from '@/types/settings';
+import { UserSettings } from '@/types/user/settings';
 
 import { DEFAULT_AGENT } from './agent';
 import { DEFAULT_COMMON_SETTINGS } from './common';
@@ -16,7 +16,7 @@ export * from './systemAgent';
 export * from './tool';
 export * from './tts';
 
-export const DEFAULT_SETTINGS: GlobalSettings = {
+export const DEFAULT_SETTINGS: UserSettings = {
   defaultAgent: DEFAULT_AGENT,
   languageModel: DEFAULT_LLM_CONFIG,
   sync: DEFAULT_SYNC_CONFIG,

package/src/const/settings/llm.ts

@@ -17,9 +17,9 @@ import {
   filterEnabledModels,
 } from '@/config/modelProviders';
 import { ModelProvider } from '@/libs/agent-runtime';
-import { GlobalLLMConfig } from '@/types/settings';
+import { UserModelProviderConfig } from '@/types/user/settings';
 
-export const DEFAULT_LLM_CONFIG: GlobalLLMConfig = {
+export const DEFAULT_LLM_CONFIG: UserModelProviderConfig = {
   anthropic: {
     apiKey: '',
     enabled: false,

package/src/const/settings/sync.ts

@@ -1,5 +1,5 @@
-import { GlobalSyncSettings } from '@/types/settings';
+import { UserSyncSettings } from '@/types/user/settings';
 
-export const DEFAULT_SYNC_CONFIG: GlobalSyncSettings = {
+export const DEFAULT_SYNC_CONFIG: UserSyncSettings = {
   webrtc: { enabled: false },
 };

package/src/const/settings/systemAgent.ts

@@ -1,4 +1,4 @@
-import { GlobalSystemAgentConfig, GlobalTranslationConfig } from '@/types/settings';
+import { UserSystemAgentConfig, GlobalTranslationConfig } from '@/types/user/settings';
 
 import { DEFAULT_MODEL, DEFAULT_PROVIDER } from './llm';
 
@@ -7,6 +7,6 @@ export const DEFAULT_TRANSLATION_CONFIG: GlobalTranslationConfig = {
   provider: DEFAULT_PROVIDER,
 };
 
-export const DEFAULT_SYSTEM_AGENT_CONFIG: GlobalSystemAgentConfig = {
+export const DEFAULT_SYSTEM_AGENT_CONFIG: UserSystemAgentConfig = {
   translation: DEFAULT_TRANSLATION_CONFIG,
 };

package/src/const/settings/tts.ts

@@ -1,6 +1,6 @@
-import { GlobalTTSConfig } from '@/types/settings';
+import { UserTTSConfig } from '@/types/user/settings';
 
-export const DEFAULT_TTS_CONFIG: GlobalTTSConfig = {
+export const DEFAULT_TTS_CONFIG: UserTTSConfig = {
   openAI: {
     sttModel: 'whisper-1',
     ttsModel: 'tts-1',

package/src/database/client/core/migrations/migrateSettingsToUser/type.ts

@@ -3,7 +3,7 @@ import type { ThemeMode } from 'antd-style';
 import { LobeAgentTTSConfig } from '@/types/agent';
 import { FewShots, LLMParams } from '@/types/llm';
 import { MetaData } from '@/types/meta';
-import { STTServer } from '@/types/settings';
+import { STTServer } from '@/types/user/settings';
 
 interface V4LobeAgentConfig {
   autoCreateTopicThreshold: number;

package/src/database/client/models/__tests__/user.test.ts

@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
-import { GlobalSettings } from '@/types/settings';
+import { UserSettings } from '@/types/user/settings';
 
 import { UserModel } from '../user';
 

package/src/database/client/models/user.ts

@@ -2,7 +2,7 @@ import { DeepPartial } from 'utility-types';
 
 import { BaseModel } from '@/database/client/core';
 import { LobeAgentConfig } from '@/types/agent';
-import { GlobalSettings } from '@/types/settings';
+import { UserSettings } from '@/types/user/settings';
 import { uuid } from '@/utils/uuid';
 
 import { DB_User, DB_UserSchema } from '../schemas/user';
@@ -42,7 +42,7 @@ class _UserModel extends BaseModel {
 
   // **************** Update *************** //
 
-  async updateSettings(settings: DeepPartial<GlobalSettings>) {
+  async updateSettings(settings: DeepPartial<UserSettings>) {
     const user = await this.getUser();
 
     return this.update(user.id, { settings: settings as any });

package/src/features/Conversation/Error/APIKeyForm/ProviderApiKeyForm.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
-import { GlobalLLMProviderKey } from '@/types/settings';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import { FormAction } from '../style';
 

package/src/features/Conversation/Error/APIKeyForm/index.tsx

@@ -5,7 +5,7 @@ import { Center, Flexbox } from 'react-layout-kit';
 
 import { ModelProvider } from '@/libs/agent-runtime';
 import { useChatStore } from '@/store/chat';
-import { GlobalLLMProviderKey } from '@/types/settings';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import BedrockForm from './Bedrock';
 import ProviderApiKeyForm from './ProviderApiKeyForm';

package/src/features/Conversation/components/BubblesLoading.tsx

@@ -1,52 +1,60 @@
-import { useTheme } from 'antd-style';
+import { css, cx, useTheme } from 'antd-style';
+import { Center } from 'react-layout-kit';
+
+const container = css`
+  circle {
+    animation: bubble 1.5s cubic-bezier(0.05, 0.2, 0.35, 1) infinite;
+  }
+
+  circle:nth-child(2) {
+    animation-delay: 0.3s;
+  }
+
+  circle:nth-child(3) {
+    animation-delay: 0.6s;
+  }
+
+  @keyframes bubble {
+    0% {
+      opacity: 1;
+
+      /* transform: translateY(0); */
+    }
+
+    25% {
+      opacity: 0.5;
+
+      /* transform: translateY(-4px); */
+    }
+
+    75% {
+      opacity: 0.25;
+
+      /* transform: translateY(4px); */
+    }
+
+    to {
+      opacity: 1;
+
+      /* transform: translateY(0); */
+    }
+  }
+`;
 
 const Svg = () => (
-  <svg viewBox="0 0 32 24" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="0" cy="12" r="0" transform="translate(8 0)">
-      <animate
-        attributeName="r"
-        begin="0"
-        calcMode="spline"
-        dur="1.2s"
-        keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8"
-        keyTimes="0;0.2;0.7;1"
-        repeatCount="indefinite"
-        values="0; 4; 0; 0"
-      />
-    </circle>
-    <circle cx="0" cy="12" r="0" transform="translate(16 0)">
-      <animate
-        attributeName="r"
-        begin="0.3"
-        calcMode="spline"
-        dur="1.2s"
-        keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8"
-        keyTimes="0;0.2;0.7;1"
-        repeatCount="indefinite"
-        values="0; 4; 0; 0"
-      />
-    </circle>
-    <circle cx="0" cy="12" r="0" transform="translate(24 0)">
-      <animate
-        attributeName="r"
-        begin="0.6"
-        calcMode="spline"
-        dur="1.2s"
-        keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8"
-        keyTimes="0;0.2;0.7;1"
-        repeatCount="indefinite"
-        values="0; 4; 0; 0"
-      />
-    </circle>
+  <svg className={cx(container)} viewBox="0 0 60 32" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="7" cy="16" r="6"></circle>
+    <circle cx="30" cy="16" r="6"></circle>
+    <circle cx="53" cy="16" r="6"></circle>
   </svg>
 );
 
 const BubblesLoading = () => {
-  const { colorTextTertiary } = useTheme();
+  const theme = useTheme();
   return (
-    <div style={{ fill: colorTextTertiary, height: 24, width: 32 }}>
+    <Center style={{ fill: theme.colorTextSecondary, height: 24, width: 32 }}>
       <Svg />
-    </div>
+    </Center>
   );
 };
 

package/src/services/__tests__/share.test.ts

@@ -2,8 +2,8 @@ import { DeepPartial } from 'utility-types';
 import { Mock, afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { LOBE_URL_IMPORT_NAME } from '@/const/url';
-import { GlobalSettings } from '@/types/settings';
 import { ShareGPTConversation } from '@/types/share';
+import { UserSettings } from '@/types/user/settings';
 import { parseMarkdown } from '@/utils/parseMarkdown';
 
 import { SHARE_GPT_URL, shareService } from '../share';
@@ -91,7 +91,7 @@ describe('ShareGPTService', () => {
 describe('ShareViaUrl', () => {
   describe('createShareSettingsUrl', () => {
     it('should create a share settings URL with the provided settings', () => {
-      const settings: DeepPartial<GlobalSettings> = {
+      const settings: DeepPartial<UserSettings> = {
         languageModel: {
           openai: {
             apiKey: 'user-key',

package/src/services/_auth.test.ts

@@ -3,7 +3,7 @@ import { describe, expect, it, vi } from 'vitest';
 
 import { ModelProvider } from '@/libs/agent-runtime';
 import { useUserStore } from '@/store/user';
-import { GlobalLLMConfig, GlobalLLMProviderKey } from '@/types/settings';
+import { UserModelProviderConfig, GlobalLLMProviderKey } from '@/types/user/settings';
 
 import { getProviderAuthPayload } from './_auth';
 
@@ -21,7 +21,7 @@ vi.mock('zustand/traditional');
 
 const setModelProviderConfig = <T extends GlobalLLMProviderKey>(
   provider: T,
-  config: Partial<GlobalLLMConfig[T]>,
+  config: Partial<UserModelProviderConfig[T]>,
 ) => {
   useUserStore.setState({
     settings: { languageModel: { [provider]: config } },

package/src/services/config.ts

@@ -8,8 +8,8 @@ import { settingsSelectors } from '@/store/user/selectors';
 import { ConfigFile } from '@/types/exportConfig';
 import { ChatMessage } from '@/types/message';
 import { LobeSessions, SessionGroupItem } from '@/types/session';
-import { GlobalSettings } from '@/types/settings';
 import { ChatTopic } from '@/types/topic';
+import { UserSettings } from '@/types/user/settings';
 import { createConfigFile, exportConfigFile } from '@/utils/config';
 
 export interface ImportResult {
@@ -35,7 +35,7 @@ class ConfigService {
   importMessages = async (messages: ChatMessage[]) => {
     return messageService.batchCreateMessages(messages);
   };
-  importSettings = async (settings: GlobalSettings) => {
+  importSettings = async (settings: UserSettings) => {
     useUserStore.getState().importAppSettings(settings);
   };
   importTopics = async (topics: ChatTopic[]) => {

package/src/services/share.ts

@@ -1,8 +1,8 @@
 import { DeepPartial } from 'utility-types';
 
 import { LOBE_URL_IMPORT_NAME } from '@/const/url';
-import { GlobalSettings } from '@/types/settings';
 import { ShareGPTConversation } from '@/types/share';
+import { UserSettings } from '@/types/user/settings';
 import { withBasePath } from '@/utils/basePath';
 import { parseMarkdown } from '@/utils/parseMarkdown';
 
@@ -40,7 +40,7 @@ class ShareService {
    * @param settings - The settings object to be encoded in the URL.
    * @returns The share settings URL.
    */
-  public createShareSettingsUrl(settings: DeepPartial<GlobalSettings>) {
+  public createShareSettingsUrl(settings: DeepPartial<UserSettings>) {
     return withBasePath(`/?${LOBE_URL_IMPORT_NAME}=${encodeURI(JSON.stringify(settings))}`);
   }
 
@@ -51,7 +51,7 @@ class ShareService {
    */
   public decodeShareSettings(settings: string) {
     try {
-      return { data: JSON.parse(settings) as DeepPartial<GlobalSettings> };
+      return { data: JSON.parse(settings) as DeepPartial<UserSettings> };
     } catch (e) {
       return { message: JSON.stringify(e) };
     }

package/src/services/user/client.test.ts

@@ -2,8 +2,8 @@ import { DeepPartial } from 'utility-types';
 import { Mock, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { UserModel } from '@/database/client/models/user';
-import { GlobalSettings } from '@/types/settings';
 import { UserPreference } from '@/types/user';
+import { UserSettings } from '@/types/user/settings';
 import { AsyncLocalStorage } from '@/utils/localStorage';
 
 import { ClientService } from './client';
@@ -19,7 +19,7 @@ vi.mock('@/database/client/models/user', () => ({
 
 const mockUser = {
   avatar: 'avatar.png',
-  settings: { themeMode: 'light' } as unknown as GlobalSettings,
+  settings: { themeMode: 'light' } as unknown as UserSettings,
   uuid: 'user-id',
 };
 
@@ -58,7 +58,7 @@ describe('ClientService', () => {
   });
 
   it('should update user settings correctly', async () => {
-    const settingsPatch: DeepPartial<GlobalSettings> = { themeMode: 'dark' };
+    const settingsPatch: DeepPartial<UserSettings> = { themeMode: 'dark' };
     (UserModel.updateSettings as Mock).mockResolvedValue(undefined);
 
     await clientService.updateUserSettings(settingsPatch);

package/src/services/user/client.ts

@@ -3,8 +3,8 @@ import { DeepPartial } from 'utility-types';
 import { MessageModel } from '@/database/client/models/message';
 import { SessionModel } from '@/database/client/models/session';
 import { UserModel } from '@/database/client/models/user';
-import { GlobalSettings } from '@/types/settings';
 import { UserInitializationState, UserPreference } from '@/types/user';
+import { UserSettings } from '@/types/user/settings';
 import { AsyncLocalStorage } from '@/utils/localStorage';
 
 import { IUserService } from './type';
@@ -28,12 +28,12 @@ export class ClientService implements IUserService {
       hasConversation: messageCount > 0 || sessionCount > 0,
       isOnboard: true,
       preference: await this.preferenceStorage.getFromLocalStorage(),
-      settings: user.settings as GlobalSettings,
+      settings: user.settings as UserSettings,
       userId: user.uuid,
     };
   }
 
-  updateUserSettings = async (patch: DeepPartial<GlobalSettings>) => {
+  updateUserSettings = async (patch: DeepPartial<UserSettings>) => {
     return UserModel.updateSettings(patch);
   };
 

package/src/services/user/type.ts

@@ -1,11 +1,11 @@
 import { DeepPartial } from 'utility-types';
 
-import { GlobalSettings } from '@/types/settings';
 import { UserInitializationState, UserPreference } from '@/types/user';
+import { UserSettings } from '@/types/user/settings';
 
 export interface IUserService {
   getUserState: () => Promise<UserInitializationState>;
   resetUserSettings: () => Promise<any>;
   updatePreference: (preference: UserPreference) => Promise<any>;
-  updateUserSettings: (patch: DeepPartial<GlobalSettings>) => Promise<any>;
+  updateUserSettings: (patch: DeepPartial<UserSettings>) => Promise<any>;
 }

package/src/store/agent/store.ts

@@ -1,10 +1,8 @@
-import { devtools } from 'zustand/middleware';
 import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 import { StateCreator } from 'zustand/vanilla';
 
-import { isDev } from '@/utils/env';
-
+import { createDevtools } from '../middleware/createDevtools';
 import { SessionStoreState, initialState } from './initialState';
 import { AgentChatAction, createChatSlice } from './slices/chat/action';
 
@@ -19,9 +17,6 @@ const createStore: StateCreator<AgentStore, [['zustand/devtools', never]]> = (..
 
 //  ===============  implement useStore ============ //
 
-export const useAgentStore = createWithEqualityFn<AgentStore>()(
-  devtools(createStore, {
-    name: 'LobeChat_Agent' + (isDev ? '_DEV' : ''),
-  }),
-  shallow,
-);
+const devtools = createDevtools('agent');
+
+export const useAgentStore = createWithEqualityFn<AgentStore>()(devtools(createStore), shallow);

package/src/store/chat/store.ts

@@ -1,10 +1,9 @@
-import { devtools, subscribeWithSelector } from 'zustand/middleware';
+import { subscribeWithSelector } from 'zustand/middleware';
 import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 import { StateCreator } from 'zustand/vanilla';
 
-import { isDev } from '@/utils/env';
-
+import { createDevtools } from '../middleware/createDevtools';
 import { ChatStoreState, initialState } from './initialState';
 import { ChatBuiltinToolAction, chatToolSlice } from './slices/builtinTool/action';
 import { ChatEnhanceAction, chatEnhance } from './slices/enchance/action';
@@ -37,12 +36,9 @@ const createStore: StateCreator<ChatStore, [['zustand/devtools', never]]> = (...
 });
 
 //  ===============  实装 useStore ============ //
+const devtools = createDevtools('chat');
 
 export const useChatStore = createWithEqualityFn<ChatStore>()(
-  subscribeWithSelector(
-    devtools(createStore, {
-      name: 'LobeChat_Chat' + (isDev ? '_DEV' : ''),
-    }),
-  ),
+  subscribeWithSelector(devtools(createStore)),
   shallow,
 );

package/src/store/file/store.ts

@@ -1,10 +1,8 @@
-import { devtools } from 'zustand/middleware';
 import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 import { StateCreator } from 'zustand/vanilla';
 
-import { isDev } from '@/utils/env';
-
+import { createDevtools } from '../middleware/createDevtools';
 import { FilesStoreState, initialState } from './initialState';
 import { FileAction, createFileSlice } from './slices/images';
 import { TTSFileAction, createTTSFileSlice } from './slices/tts';
@@ -20,10 +18,6 @@ const createStore: StateCreator<FileStore, [['zustand/devtools', never]]> = (...
 });
 
 //  ===============  实装 useStore ============ //
+const devtools = createDevtools('file');
 
-export const useFileStore = createWithEqualityFn<FileStore>()(
-  devtools(createStore, {
-    name: 'LobeChat_File' + (isDev ? '_DEV' : ''),
-  }),
-  shallow,
-);
+export const useFileStore = createWithEqualityFn<FileStore>()(devtools(createStore), shallow);