@lobehub/chat 0.148.3 → 0.148.4

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.148.4](https://github.com/lobehub/lobe-chat/compare/v0.148.3...v0.148.4)
+
+<sup>Released on **2024-04-21**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix model list menu not display correctly.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix model list menu not display correctly, closes [#2133](https://github.com/lobehub/lobe-chat/issues/2133) ([98c844b](https://github.com/lobehub/lobe-chat/commit/98c844b))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.148.3](https://github.com/lobehub/lobe-chat/compare/v0.148.2...v0.148.3)
 
 <sup>Released on **2024-04-21**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.148.3",
+  "version": "0.148.4",
   "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/settings/llm/components/ProviderModelList/Option.tsx

@@ -11,28 +11,32 @@ import { GlobalLLMProviderKey } from '@/types/settings';
 
 import CustomModelOption from './CustomModelOption';
 
-const OptionRender = memo<{ displayName: string; id: string; provider: GlobalLLMProviderKey }>(
-  ({ displayName, id, provider }) => {
-    const model = useGlobalStore((s) => modelProviderSelectors.getModelCardById(id)(s), isEqual);
+interface OptionRenderProps {
+  displayName: string;
+  id: string;
+  isAzure?: boolean;
+  provider: GlobalLLMProviderKey;
+}
+const OptionRender = memo<OptionRenderProps>(({ displayName, id, provider, isAzure }) => {
+  const model = useGlobalStore((s) => modelProviderSelectors.getModelCardById(id)(s), isEqual);
 
-    // if there is isCustom, it means it is a user defined custom model
-    if (model?.isCustom) return <CustomModelOption id={id} provider={provider} />;
+  // if there is isCustom, it means it is a user defined custom model
+  if (model?.isCustom || isAzure) return <CustomModelOption id={id} provider={provider} />;
 
-    return (
-      <Flexbox align={'center'} gap={8} horizontal>
-        <ModelIcon model={id} size={32} />
-        <Flexbox>
-          <Flexbox align={'center'} gap={8} horizontal>
-            {displayName}
-            <ModelInfoTags directionReverse placement={'top'} {...model!} />
-          </Flexbox>
-          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
-            {id}
-          </Typography.Text>
+  return (
+    <Flexbox align={'center'} gap={8} horizontal>
+      <ModelIcon model={id} size={32} />
+      <Flexbox>
+        <Flexbox align={'center'} gap={8} horizontal>
+          {displayName}
+          <ModelInfoTags directionReverse placement={'top'} {...model!} />
         </Flexbox>
+        <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+          {id}
+        </Typography.Text>
       </Flexbox>
-    );
-  },
-);
+    </Flexbox>
+  );
+});
 
 export default OptionRender;

package/src/app/settings/llm/components/ProviderModelList/index.tsx

@@ -111,6 +111,7 @@ const ProviderModelListSelect = memo<CustomModelSelectProps>(
                     <OptionRender
                       displayName={label as string}
                       id={value as string}
+                      isAzure={showAzureDeployName}
                       provider={provider}
                     />
                   );

package/src/layout/GlobalProvider/StoreInitialization.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { memo, useEffect } from 'react';
+import { createStoreUpdater } from 'zustand-utils';
+
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { useEnabledDataSync } from '@/hooks/useSyncData';
+import { useGlobalStore } from '@/store/global';
+
+const StoreInitialization = memo(() => {
+  const [useFetchServerConfig, useFetchUserConfig, useInitPreference] = useGlobalStore((s) => [
+    s.useFetchServerConfig,
+    s.useFetchUserConfig,
+    s.useInitPreference,
+  ]);
+  // init the system preference
+  useInitPreference();
+
+  const { isLoading } = useFetchServerConfig();
+  useFetchUserConfig(!isLoading);
+
+  useEnabledDataSync();
+
+  const useStoreUpdater = createStoreUpdater(useGlobalStore);
+
+  const mobile = useIsMobile();
+  const router = useRouter();
+
+  useStoreUpdater('isMobile', mobile);
+  useStoreUpdater('router', router);
+
+  useEffect(() => {
+    router.prefetch('/chat');
+    router.prefetch('/chat/settings');
+    router.prefetch('/market');
+    router.prefetch('/settings/common');
+    router.prefetch('/settings/agent');
+    router.prefetch('/settings/sync');
+  }, [router]);
+
+  return null;
+});
+
+export default StoreInitialization;

package/src/layout/GlobalProvider/index.tsx

@@ -13,7 +13,7 @@ import { getAntdLocale } from '@/utils/locale';
 
 import AppTheme from './AppTheme';
 import Locale from './Locale';
-import StoreHydration from './StoreHydration';
+import StoreInitialization from './StoreInitialization';
 import StyleRegistry from './StyleRegistry';
 
 let DebugUI: FC = () => null;
@@ -50,7 +50,7 @@ const GlobalLayout = async ({ children }: GlobalLayoutProps) => {
           defaultNeutralColor={neutralColor?.value as any}
           defaultPrimaryColor={primaryColor?.value as any}
         >
-          <StoreHydration />
+          <StoreInitialization />
           {children}
           <DebugUI />
         </AppTheme>

package/src/store/global/slices/common/action.ts

@@ -147,7 +147,7 @@ export const createCommonSlice: StateCreator<
       },
       {
         onSuccess: (syncEnabled) => {
-          set({ syncEnabled });
+          set({ syncEnabled }, false, n('useEnabledSync'));
         },
         revalidateOnFocus: false,
       },
@@ -165,7 +165,7 @@ export const createCommonSlice: StateCreator<
 
           set({ defaultSettings, serverConfig: data }, false, n('initGlobalConfig'));
 
-          get().refreshDefaultModelProviderList();
+          get().refreshDefaultModelProviderList({ trigger: 'fetchServerConfig' });
         }
       },
       revalidateOnFocus: false,
@@ -188,7 +188,7 @@ export const createCommonSlice: StateCreator<
           );
 
           // when get the user config ,refresh the model provider list to the latest
-          get().refreshModelProviderList();
+          get().refreshDefaultModelProviderList({ trigger: 'fetchUserConfig' });
 
           const { language } = settingsSelectors.currentSettings(get());
           if (language === 'auto') {

package/src/store/global/slices/preference/action.ts

@@ -1,11 +1,13 @@
 import { produce } from 'immer';
+import { SWRResponse } from 'swr';
 import type { StateCreator } from 'zustand/vanilla';
 
+import { useClientDataSWR } from '@/libs/swr';
 import type { GlobalStore } from '@/store/global';
 import { merge } from '@/utils/merge';
 import { setNamespace } from '@/utils/storeDebug';
 
-import type { GlobalPreference, GlobalPreferenceState, Guide } from './initialState';
+import type { GlobalPreference, Guide } from './initialState';
 
 const n = setNamespace('preference');
 
@@ -18,7 +20,8 @@ export interface PreferenceAction {
   toggleMobileTopic: (visible?: boolean) => void;
   toggleSystemRole: (visible?: boolean) => void;
   updateGuideState: (guide: Partial<Guide>) => void;
-  updatePreference: (preference: Partial<GlobalPreference>, action?: string) => void;
+  updatePreference: (preference: Partial<GlobalPreference>, action?: any) => void;
+  useInitPreference: () => SWRResponse;
 }
 
 export const createPreferenceSlice: StateCreator<
@@ -31,7 +34,7 @@ export const createPreferenceSlice: StateCreator<
     const showChatSideBar =
       typeof newValue === 'boolean' ? newValue : !get().preference.showChatSideBar;
 
-    get().updatePreference({ showChatSideBar }, n('toggleAgentPanel', newValue) as string);
+    get().updatePreference({ showChatSideBar }, n('toggleAgentPanel', newValue));
   },
   toggleExpandSessionGroup: (id, expand) => {
     const { preference } = get();
@@ -50,13 +53,13 @@ export const createPreferenceSlice: StateCreator<
     const mobileShowTopic =
       typeof newValue === 'boolean' ? newValue : !get().preference.mobileShowTopic;
 
-    get().updatePreference({ mobileShowTopic }, n('toggleMobileTopic', newValue) as string);
+    get().updatePreference({ mobileShowTopic }, n('toggleMobileTopic', newValue));
   },
   toggleSystemRole: (newValue) => {
     const showSystemRole =
       typeof newValue === 'boolean' ? newValue : !get().preference.mobileShowTopic;
 
-    get().updatePreference({ showSystemRole }, n('toggleMobileTopic', newValue) as string);
+    get().updatePreference({ showSystemRole }, n('toggleMobileTopic', newValue));
   },
   updateGuideState: (guide) => {
     const { updatePreference } = get();
@@ -64,12 +67,23 @@ export const createPreferenceSlice: StateCreator<
     updatePreference({ guide: nextGuide });
   },
   updatePreference: (preference, action) => {
-    set(
-      produce((draft: GlobalPreferenceState) => {
-        draft.preference = merge(draft.preference, preference);
-      }),
-      false,
-      action,
-    );
+    const nextPreference = merge(get().preference, preference);
+
+    set({ preference: nextPreference }, false, action || n('updatePreference'));
+
+    get().preferenceStorage.saveToLocalStorage(nextPreference);
   },
+
+  useInitPreference: () =>
+    useClientDataSWR<GlobalPreference>(
+      'preference',
+      () => get().preferenceStorage.getFromLocalStorage(),
+      {
+        onSuccess: (preference) => {
+          if (preference) {
+            set({ preference }, false, n('initPreference'));
+          }
+        },
+      },
+    ),
 });

package/src/store/global/slices/preference/initialState.ts

@@ -1,4 +1,5 @@
 import { SessionDefaultGroup, SessionGroupId } from '@/types/session';
+import { AsyncLocalStorage } from '@/utils/localStorage';
 
 export interface Guide {
   // Topic 引导
@@ -18,6 +19,7 @@ export interface GlobalPreference {
   showSessionPanel?: boolean;
   showSystemRole?: boolean;
   telemetry: boolean | null;
+
   /**
    * whether to use cmd + enter to send message
    */
@@ -26,10 +28,10 @@ export interface GlobalPreference {
 
 export interface GlobalPreferenceState {
   /**
-   *  用户偏好的 UI 状态
-   *  @localStorage
+   * the user preference, which only store in local storage
    */
   preference: GlobalPreference;
+  preferenceStorage: AsyncLocalStorage<GlobalPreference>;
 }
 
 export const initialPreferenceState: GlobalPreferenceState = {
@@ -45,4 +47,5 @@ export const initialPreferenceState: GlobalPreferenceState = {
     telemetry: null,
     useCmdEnterToSend: false,
   },
+  preferenceStorage: new AsyncLocalStorage('LOBE_PREFERENCE'),
 };

package/src/store/global/slices/settings/actions/llm.ts

@@ -20,11 +20,14 @@ import {
 import { GlobalStore } from '@/store/global';
 import { ChatModelCard } from '@/types/llm';
 import { GlobalLLMConfig, GlobalLLMProviderKey } from '@/types/settings';
+import { setNamespace } from '@/utils/storeDebug';
 
 import { CustomModelCardDispatch, customModelCardsReducer } from '../reducers/customModelCard';
 import { modelProviderSelectors } from '../selectors/modelProvider';
 import { settingsSelectors } from '../selectors/settings';
 
+const n = setNamespace('settings');
+
 /**
  * 设置操作
  */
@@ -36,8 +39,8 @@ export interface LLMSettingsAction {
   /**
    * make sure the default model provider list is sync to latest state
    */
-  refreshDefaultModelProviderList: () => void;
-  refreshModelProviderList: () => void;
+  refreshDefaultModelProviderList: (params?: { trigger?: string }) => void;
+  refreshModelProviderList: (params?: { trigger?: string }) => void;
   removeEnabledModels: (provider: GlobalLLMProviderKey, model: string) => Promise<void>;
   setModelProviderConfig: <T extends GlobalLLMProviderKey>(
     provider: T,
@@ -69,7 +72,7 @@ export const llmSettingsSlice: StateCreator<
     await get().setModelProviderConfig(provider, { customModelCards: nextState });
   },
 
-  refreshDefaultModelProviderList: () => {
+  refreshDefaultModelProviderList: (params) => {
     /**
      * Because we have several model cards sources, we need to merge the model cards
      * the priority is below:
@@ -113,12 +116,12 @@ export const llmSettingsSlice: StateCreator<
       ZhiPuProviderCard,
     ];
 
-    set({ defaultModelProviderList }, false, 'refreshDefaultModelProviderList');
+    set({ defaultModelProviderList }, false, n(`refreshDefaultModelList - ${params?.trigger}`));
 
-    get().refreshModelProviderList();
+    get().refreshModelProviderList({ trigger: 'refreshDefaultModelList' });
   },
 
-  refreshModelProviderList: () => {
+  refreshModelProviderList: (params) => {
     const modelProviderList = get().defaultModelProviderList.map((list) => ({
       ...list,
       chatModels: modelProviderSelectors
@@ -136,7 +139,7 @@ export const llmSettingsSlice: StateCreator<
       enabled: modelProviderSelectors.isProviderEnabled(list.id as any)(get()),
     }));
 
-    set({ modelProviderList }, false, 'refreshModelProviderList');
+    set({ modelProviderList }, false, n(`refreshModelList - ${params?.trigger}`));
   },
 
   removeEnabledModels: async (provider, model) => {

package/src/store/global/store.ts

@@ -1,11 +1,10 @@
-import { PersistOptions, devtools, persist, subscribeWithSelector } from 'zustand/middleware';
+import { devtools, 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 { createHyperStorage } from '../middleware/createHyperStorage';
 import { type GlobalState, initialState } from './initialState';
 import { type CommonAction, createCommonSlice } from './slices/common/action';
 import { type PreferenceAction, createPreferenceSlice } from './slices/preference/action';
@@ -22,32 +21,13 @@ const createStore: StateCreator<GlobalStore, [['zustand/devtools', never]]> = (.
   ...createPreferenceSlice(...parameters),
 });
 
-//  ===============  persist 本地缓存中间件配置 ============ //
-type GlobalPersist = Pick<GlobalStore, 'preference' | 'settings'>;
-
-const persistOptions: PersistOptions<GlobalStore, GlobalPersist> = {
-  name: 'LOBE_GLOBAL',
-
-  skipHydration: true,
-
-  storage: createHyperStorage({
-    localStorage: {
-      dbName: 'LobeHub',
-      selectors: ['preference'],
-    },
-  }),
-};
-
 //  ===============  实装 useStore ============ //
 
 export const useGlobalStore = createWithEqualityFn<GlobalStore>()(
-  persist(
-    subscribeWithSelector(
-      devtools(createStore, {
-        name: 'LobeChat_Global' + (isDev ? '_DEV' : ''),
-      }),
-    ),
-    persistOptions,
+  subscribeWithSelector(
+    devtools(createStore, {
+      name: 'LobeChat_Global' + (isDev ? '_DEV' : ''),
+    }),
   ),
   shallow,
 );

package/src/utils/localStorage.ts

@@ -0,0 +1,36 @@
+const PREV_KEY = 'LOBE_GLOBAL';
+
+type StorageKey = 'LOBE_PREFERENCE';
+
+export class AsyncLocalStorage<State> {
+  private storageKey: StorageKey;
+
+  constructor(storageKey: StorageKey) {
+    this.storageKey = storageKey;
+
+    // skip server side rendering
+    if (typeof window === 'undefined') return;
+
+    // migrate old data
+    if (localStorage.getItem(PREV_KEY)) {
+      const data = JSON.parse(localStorage.getItem(PREV_KEY) || '{}');
+
+      const preference = data.state.preference;
+
+      if (data.state?.preference) {
+        localStorage.setItem('LOBE_PREFERENCE', JSON.stringify(preference));
+      }
+      localStorage.removeItem(PREV_KEY);
+    }
+  }
+
+  async saveToLocalStorage(state: object) {
+    const data = await this.getFromLocalStorage();
+
+    localStorage.setItem(this.storageKey, JSON.stringify({ ...data, ...state }));
+  }
+
+  async getFromLocalStorage(key: StorageKey = this.storageKey): Promise<State> {
+    return JSON.parse(localStorage.getItem(key) || '{}');
+  }
+}

package/src/layout/GlobalProvider/StoreHydration.tsx

@@ -1,61 +0,0 @@
-'use client';
-
-import { useResponsive } from 'antd-style';
-import { useRouter } from 'next/navigation';
-import { memo, useEffect } from 'react';
-
-import { useEnabledDataSync } from '@/hooks/useSyncData';
-import { useGlobalStore } from '@/store/global';
-import { useEffectAfterGlobalHydrated } from '@/store/global/hooks/useEffectAfterHydrated';
-
-const StoreHydration = memo(() => {
-  const [useFetchServerConfig, useFetchUserConfig] = useGlobalStore((s) => [
-    s.useFetchServerConfig,
-    s.useFetchUserConfig,
-  ]);
-
-  const { isLoading } = useFetchServerConfig();
-
-  useFetchUserConfig(!isLoading);
-
-  useEnabledDataSync();
-
-  useEffect(() => {
-    // refs: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#hashydrated
-    useGlobalStore.persist.rehydrate();
-  }, []);
-
-  const { mobile } = useResponsive();
-  useEffectAfterGlobalHydrated(
-    (store) => {
-      const prevState = store.getState().isMobile;
-
-      if (prevState !== mobile) {
-        store.setState({ isMobile: mobile });
-      }
-    },
-    [mobile],
-  );
-
-  const router = useRouter();
-
-  useEffectAfterGlobalHydrated(
-    (store) => {
-      store.setState({ router });
-    },
-    [router],
-  );
-
-  useEffect(() => {
-    router.prefetch('/chat');
-    router.prefetch('/chat/settings');
-    router.prefetch('/market');
-    router.prefetch('/settings/common');
-    router.prefetch('/settings/agent');
-    router.prefetch('/settings/sync');
-  }, [router]);
-
-  return null;
-});
-
-export default StoreHydration;

package/src/store/global/hooks/useEffectAfterHydrated.ts

@@ -1,22 +0,0 @@
-import { useEffect } from 'react';
-
-import { useGlobalStore } from '../store';
-
-export const useEffectAfterGlobalHydrated = (
-  fn: (store: typeof useGlobalStore) => void,
-  deps: any[] = [],
-) => {
-  useEffect(() => {
-    const hasRehydrated = useGlobalStore.persist.hasHydrated();
-
-    if (hasRehydrated) {
-      // 等价 useEffect 多次触发
-      fn(useGlobalStore);
-    } else {
-      // 等价于 useEffect 第一次触发
-      useGlobalStore.persist.onFinishHydration(() => {
-        fn(useGlobalStore);
-      });
-    }
-  }, deps);
-};