🐛 fix: fix model list menu not display correctly (#2133)

* ♻️ refactor: remove preference hydration

* 🐛 fix: fix model-list menu not display correctly

* 🐛 fix: fix azure not show the deployment name

* ♻️ refactor: rename the StoreHydration

Author: arvinxx

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;

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}
                     />
                   );

src/layout/GlobalProvider/StoreHydration.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;

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

src/layout/GlobalProvider/index.tsx

@@ -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') {

src/store/global/hooks/useEffectAfterHydrated.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,26 +53,37 @@ 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();
     const nextGuide = merge(get().preference.guide, guide);
     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'));
+          }
+        },
+      },
+    ),
 });

src/store/global/slices/common/action.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'),
 };