@lobehub/chat 0.161.9 → 0.161.11

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

@@ -40,56 +40,4 @@ describe('createPreferenceSlice', () => {
       expect(result.current.preference.hideSyncAlert).toEqual(true);
     });
   });
-
-  describe('useInitPreference', () => {
-    it('should return false when userId is empty', async () => {
-      const { result } = renderHook(() => useUserStore());
-
-      vi.spyOn(userService, 'getPreference').mockResolvedValueOnce({} as any);
-
-      const { result: prefernce } = renderHook(() => result.current.useInitPreference(), {
-        wrapper: withSWR,
-      });
-
-      await waitFor(() => {
-        expect(prefernce.current.data).toEqual({});
-        expect(result.current.isPreferenceInit).toBeTruthy();
-      });
-    });
-    it('should return default preference when local storage is empty', async () => {
-      const { result } = renderHook(() => useUserStore());
-
-      vi.spyOn(userService, 'getPreference').mockResolvedValueOnce({} as any);
-
-      renderHook(() => result.current.useInitPreference(), {
-        wrapper: withSWR,
-      });
-
-      await waitFor(() => {
-        expect(result.current.preference).toEqual(DEFAULT_PREFERENCE);
-        expect(result.current.isPreferenceInit).toBeTruthy();
-      });
-    });
-
-    it('should return saved preference when local storage has data', async () => {
-      const { result } = renderHook(() => useUserStore());
-      const savedPreference: UserPreference = {
-        ...DEFAULT_PREFERENCE,
-        hideSyncAlert: true,
-        guide: { topic: false, moveSettingsToAvatar: true },
-      };
-
-      vi.spyOn(userService, 'getPreference').mockResolvedValueOnce(savedPreference);
-
-      const { result: prefernce } = renderHook(() => result.current.useInitPreference(), {
-        wrapper: withSWR,
-      });
-
-      await waitFor(() => {
-        expect(prefernce.current.data).toEqual(savedPreference);
-        expect(result.current.isPreferenceInit).toBeTruthy();
-        expect(result.current.preference).toEqual(savedPreference);
-      });
-    });
-  });
 });

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

@@ -1,8 +1,5 @@
-import { SWRResponse } from 'swr';
 import type { StateCreator } from 'zustand/vanilla';
 
-import { DEFAULT_PREFERENCE } from '@/const/user';
-import { useClientDataSWR } from '@/libs/swr';
 import { userService } from '@/services/user';
 import type { UserStore } from '@/store/user';
 import { UserGuide, UserPreference } from '@/types/user';
@@ -14,7 +11,6 @@ const n = setNamespace('preference');
 export interface PreferenceAction {
   updateGuideState: (guide: Partial<UserGuide>) => Promise<void>;
   updatePreference: (preference: Partial<UserPreference>, action?: any) => Promise<void>;
-  useInitPreference: () => SWRResponse;
 }
 
 export const createPreferenceSlice: StateCreator<
@@ -28,6 +24,7 @@ export const createPreferenceSlice: StateCreator<
     const nextGuide = merge(get().preference.guide, guide);
     await updatePreference({ guide: nextGuide });
   },
+
   updatePreference: async (preference, action) => {
     const nextPreference = merge(get().preference, preference);
 
@@ -35,17 +32,4 @@ export const createPreferenceSlice: StateCreator<
 
     await userService.updatePreference(nextPreference);
   },
-
-  useInitPreference: () =>
-    useClientDataSWR<UserPreference>('initUserPreference', userService.getPreference, {
-      onSuccess: (preference) => {
-        const isEmpty = Object.keys(preference).length === 0;
-
-        set(
-          { isPreferenceInit: true, preference: isEmpty ? DEFAULT_PREFERENCE : preference },
-          false,
-          n('initPreference'),
-        );
-      },
-    }),
 });

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

@@ -1,18 +1,13 @@
 import { DEFAULT_PREFERENCE } from '@/const/user';
 import { UserPreference } from '@/types/user';
-import { AsyncLocalStorage } from '@/utils/localStorage';
 
 export interface UserPreferenceState {
-  isPreferenceInit: boolean;
   /**
    * the user preference, which only store in local storage
    */
   preference: UserPreference;
-  preferenceStorage: AsyncLocalStorage<UserPreference>;
 }
 
 export const initialPreferenceState: UserPreferenceState = {
-  isPreferenceInit: false,
   preference: DEFAULT_PREFERENCE,
-  preferenceStorage: new AsyncLocalStorage('LOBE_PREFERENCE'),
 };

package/src/store/user/slices/preference/selectors.test.ts

@@ -72,10 +72,10 @@ describe('preferenceSelectors', () => {
 
   describe('isPreferenceInit', () => {
     it('should return the value of isPreferenceInit state', () => {
-      store.isPreferenceInit = true;
+      store.isUserStateInit = true;
       expect(preferenceSelectors.isPreferenceInit(store)).toBe(true);
 
-      store.isPreferenceInit = false;
+      store.isUserStateInit = false;
       expect(preferenceSelectors.isPreferenceInit(store)).toBe(false);
     });
   });

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

@@ -8,7 +8,7 @@ const hideSyncAlert = (s: UserStore) => s.preference.hideSyncAlert;
 
 const hideSettingsMoveGuide = (s: UserStore) => s.preference.guide?.moveSettingsToAvatar;
 
-const isPreferenceInit = (s: UserStore) => s.isPreferenceInit;
+const isPreferenceInit = (s: UserStore) => s.isUserStateInit;
 
 export const preferenceSelectors = {
   hideSettingsMoveGuide,

package/src/store/user/slices/settings/{actions/general.ts → action.ts}

@@ -12,7 +12,7 @@ import { switchLang } from '@/utils/client/switchLang';
 import { difference } from '@/utils/difference';
 import { merge } from '@/utils/merge';
 
-export interface GeneralSettingsAction {
+export interface UserSettingsAction {
   importAppSettings: (settings: GlobalSettings) => Promise<void>;
   resetSettings: () => Promise<void>;
   setSettings: (settings: DeepPartial<GlobalSettings>) => Promise<void>;
@@ -22,11 +22,11 @@ export interface GeneralSettingsAction {
   updateDefaultAgent: (agent: DeepPartial<LobeAgentSettings>) => Promise<void>;
 }
 
-export const generalSettingsSlice: StateCreator<
+export const createSettingsSlice: StateCreator<
   UserStore,
   [['zustand/devtools', never]],
   [],
-  GeneralSettingsAction
+  UserSettingsAction
 > = (set, get) => ({
   importAppSettings: async (importAppSettings) => {
     const { setSettings } = get();
@@ -37,7 +37,7 @@ export const generalSettingsSlice: StateCreator<
   },
   resetSettings: async () => {
     await userService.resetUserSettings();
-    await get().refreshUserConfig();
+    await get().refreshUserState();
   },
   setSettings: async (settings) => {
     const { settings: prevSetting, defaultSettings } = get();
@@ -49,7 +49,7 @@ export const generalSettingsSlice: StateCreator<
     const diffs = difference(nextSettings, defaultSettings);
 
     await userService.updateUserSettings(diffs);
-    await get().refreshUserConfig();
+    await get().refreshUserState();
   },
   setTranslationSystemAgent: async (provider, model) => {
     await get().setSettings({

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

@@ -1,26 +1,14 @@
 import { DeepPartial } from 'utility-types';
 
-import { DEFAULT_MODEL_PROVIDER_LIST } from '@/config/modelProviders';
 import { DEFAULT_SETTINGS } from '@/const/settings';
-import { ModelProviderCard } from '@/types/llm';
-import { GlobalServerConfig } from '@/types/serverConfig';
 import { GlobalSettings } from '@/types/settings';
 
 export interface UserSettingsState {
-  defaultModelProviderList: ModelProviderCard[];
   defaultSettings: GlobalSettings;
-  editingCustomCardModel?: { id: string; provider: string } | undefined;
-  modelProviderList: ModelProviderCard[];
-  serverConfig: GlobalServerConfig;
   settings: DeepPartial<GlobalSettings>;
 }
 
 export const initialSettingsState: UserSettingsState = {
-  defaultModelProviderList: DEFAULT_MODEL_PROVIDER_LIST,
   defaultSettings: DEFAULT_SETTINGS,
-  modelProviderList: DEFAULT_MODEL_PROVIDER_LIST,
-  serverConfig: {
-    telemetry: {},
-  },
   settings: {},
 };

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

@@ -1,5 +1,2 @@
-export { modelConfigSelectors } from './modelConfig';
-export { modelProviderSelectors } from './modelProvider';
 export { settingsSelectors } from './settings';
-export { syncSettingsSelectors } from './sync';
 export { systemAgentSelectors } from './systemAgent';

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

@@ -107,9 +107,17 @@ describe('createSyncSlice', () => {
 
   describe('useEnabledSync', () => {
     it('should return false when userId is empty', async () => {
-      const { result } = renderHook(() => useUserStore().useEnabledSync(true, undefined, vi.fn()), {
-        wrapper: withSWR,
-      });
+      const { result } = renderHook(
+        () =>
+          useUserStore().useEnabledSync(true, {
+            userEnableSync: true,
+            userId: undefined,
+            onEvent: vi.fn(),
+          }),
+        {
+          wrapper: withSWR,
+        },
+      );
 
       await waitFor(() => expect(result.current.data).toBe(false));
     });
@@ -118,7 +126,13 @@ describe('createSyncSlice', () => {
       const disableSyncSpy = vi.spyOn(syncService, 'disableSync').mockResolvedValueOnce(false);
 
       const { result } = renderHook(
-        () => useUserStore().useEnabledSync(false, 'user-id', vi.fn()),
+        () =>
+          useUserStore().useEnabledSync(true, {
+            userEnableSync: false,
+            userId: 'user-id',
+            onEvent: vi.fn(),
+          }),
+
         { wrapper: withSWR },
       );
 
@@ -137,7 +151,7 @@ describe('createSyncSlice', () => {
       result.current.triggerEnableSync = triggerEnableSyncSpy;
 
       const { result: swrResult } = renderHook(
-        () => result.current.useEnabledSync(true, userId, onEvent),
+        () => result.current.useEnabledSync(true, { userEnableSync: true, userId, onEvent }),
         {
           wrapper: withSWR,
         },

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

@@ -8,7 +8,7 @@ import { browserInfo } from '@/utils/platform';
 import { setNamespace } from '@/utils/storeDebug';
 
 import { userProfileSelectors } from '../auth/selectors';
-import { syncSettingsSelectors } from '../settings/selectors';
+import { syncSettingsSelectors } from './selectors';
 
 const n = setNamespace('sync');
 
@@ -19,9 +19,12 @@ export interface SyncAction {
   refreshConnection: (onEvent: OnSyncEvent) => Promise<void>;
   triggerEnableSync: (userId: string, onEvent: OnSyncEvent) => Promise<boolean>;
   useEnabledSync: (
-    userEnableSync: boolean,
-    userId: string | undefined,
-    onEvent: OnSyncEvent,
+    systemEnable: boolean | undefined,
+    params: {
+      onEvent: OnSyncEvent;
+      userEnableSync: boolean;
+      userId: string | undefined;
+    },
   ) => SWRResponse;
 }
 
@@ -72,9 +75,9 @@ export const createSyncSlice: StateCreator<
     });
   },
 
-  useEnabledSync: (userEnableSync, userId, onEvent) =>
+  useEnabledSync: (systemEnable, { userEnableSync, userId, onEvent }) =>
     useSWR<boolean>(
-      ['enableSync', userEnableSync, userId],
+      systemEnable ? ['enableSync', userEnableSync, userId] : null,
       async () => {
         // if user don't enable sync or no userId ,don't start sync
         if (!userId) return false;

package/src/store/user/slices/{settings/selectors/sync.ts → sync/selectors.ts}

@@ -1,5 +1,5 @@
-import { UserStore } from '../../../store';
-import { currentSettings } from './settings';
+import { UserStore } from '../../store';
+import { currentSettings } from '../settings/selectors/settings';
 
 const webrtcConfig = (s: UserStore) => currentSettings(s).sync.webrtc;
 const webrtcChannelName = (s: UserStore) => webrtcConfig(s).channelName;

package/src/store/user/store.ts

@@ -8,16 +8,18 @@ import { isDev } from '@/utils/env';
 import { type UserState, initialState } from './initialState';
 import { type UserAuthAction, createAuthSlice } from './slices/auth/action';
 import { type CommonAction, createCommonSlice } from './slices/common/action';
+import { type ModelListAction, createModelListSlice } from './slices/modelList/action';
 import { type PreferenceAction, createPreferenceSlice } from './slices/preference/action';
-import { type SettingsAction, createSettingsSlice } from './slices/settings/actions';
+import { type UserSettingsAction, createSettingsSlice } from './slices/settings/action';
 import { type SyncAction, createSyncSlice } from './slices/sync/action';
 
 //  ===============  聚合 createStoreFn ============ //
 
 export type UserStore = SyncAction &
   UserState &
-  SettingsAction &
+  UserSettingsAction &
   PreferenceAction &
+  ModelListAction &
   UserAuthAction &
   CommonAction;
 
@@ -28,6 +30,7 @@ const createStore: StateCreator<UserStore, [['zustand/devtools', never]]> = (...
   ...createPreferenceSlice(...parameters),
   ...createAuthSlice(...parameters),
   ...createCommonSlice(...parameters),
+  ...createModelListSlice(...parameters),
 });
 
 //  ===============  实装 useStore ============ //

package/src/types/serverConfig.ts

@@ -13,12 +13,14 @@ export interface ServerModelProviderConfig {
   serverModelCards?: ChatModelCard[];
 }
 
+export type ServerLanguageModel = Partial<Record<GlobalLLMProviderKey, ServerModelProviderConfig>>;
+
 export interface GlobalServerConfig {
   defaultAgent?: DeepPartial<GlobalDefaultAgent>;
   enableUploadFileToServer?: boolean;
   enabledAccessCode?: boolean;
   enabledOAuthSSO?: boolean;
-  languageModel?: Partial<Record<GlobalLLMProviderKey, ServerModelProviderConfig>>;
+  languageModel?: ServerLanguageModel;
   telemetry: {
     langfuse?: boolean;
   };

package/src/types/user/index.ts

@@ -1,3 +1,7 @@
+import { DeepPartial } from 'utility-types';
+
+import { GlobalSettings } from '@/types/settings';
+
 export interface LobeUser {
   avatar?: string;
   email?: string | null;
@@ -27,3 +31,12 @@ export interface UserPreference {
    */
   useCmdEnterToSend?: boolean;
 }
+
+export interface UserInitializationState {
+  avatar?: string;
+  canEnableTrace?: boolean;
+  isOnboard?: boolean;
+  preference: UserPreference;
+  settings: DeepPartial<GlobalSettings>;
+  userId: string;
+}

package/src/utils/parseModels.test.ts

@@ -1,6 +1,9 @@
 import { describe, expect, it } from 'vitest';
 
-import { parseModelString } from './parseModels';
+import { LOBE_DEFAULT_MODEL_LIST, OpenAIProviderCard } from '@/config/modelProviders';
+import { ChatModelCard } from '@/types/llm';
+
+import { parseModelString, transformToChatModelCards } from './parseModels';
 
 describe('parseModelString', () => {
   it('custom deletion, addition, and renaming of models', () => {
@@ -67,6 +70,29 @@ describe('parseModelString', () => {
       ]);
     });
 
+    it('should have file with builtin models like gpt-4-0125-preview', () => {
+      const result = parseModelString(
+        '-all,+gpt-4-0125-preview=ChatGPT-4<128000:fc:file>,+gpt-4-turbo-2024-04-09=ChatGPT-4 Vision<128000:fc:vision:file>',
+      );
+      expect(result.add).toEqual([
+        {
+          displayName: 'ChatGPT-4',
+          files: true,
+          functionCall: true,
+          id: 'gpt-4-0125-preview',
+          tokens: 128000,
+        },
+        {
+          displayName: 'ChatGPT-4 Vision',
+          files: true,
+          functionCall: true,
+          id: 'gpt-4-turbo-2024-04-09',
+          tokens: 128000,
+          vision: true,
+        },
+      ]);
+    });
+
     it('should handle empty extension capability value', () => {
       const result = parseModelString('model1<1024:>');
       expect(result.add[0]).toEqual({ id: 'model1', tokens: 1024 });
@@ -168,3 +194,97 @@ describe('parseModelString', () => {
     });
   });
 });
+
+describe('transformToChatModelCards', () => {
+  const defaultChatModels: ChatModelCard[] = [
+    { id: 'model1', displayName: 'Model 1', enabled: true },
+    { id: 'model2', displayName: 'Model 2', enabled: false },
+  ];
+
+  it('should return undefined when modelString is empty', () => {
+    const result = transformToChatModelCards({
+      modelString: '',
+      defaultChatModels,
+    });
+    expect(result).toBeUndefined();
+  });
+
+  it('should remove all models when removeAll is true', () => {
+    const result = transformToChatModelCards({
+      modelString: '-all',
+      defaultChatModels,
+    });
+    expect(result).toEqual([]);
+  });
+
+  it('should remove specified models', () => {
+    const result = transformToChatModelCards({
+      modelString: '-model1',
+      defaultChatModels,
+    });
+    expect(result).toEqual([{ id: 'model2', displayName: 'Model 2', enabled: false }]);
+  });
+
+  it('should add a new known model', () => {
+    const knownModel = LOBE_DEFAULT_MODEL_LIST[0];
+    const result = transformToChatModelCards({
+      modelString: `${knownModel.id}`,
+      defaultChatModels,
+    });
+    expect(result).toContainEqual({
+      ...knownModel,
+      displayName: knownModel.displayName || knownModel.id,
+      enabled: true,
+    });
+  });
+
+  it('should update an existing known model', () => {
+    const knownModel = LOBE_DEFAULT_MODEL_LIST[0];
+    const result = transformToChatModelCards({
+      modelString: `+${knownModel.id}=Updated Model`,
+      defaultChatModels: [knownModel],
+    });
+    expect(result![0]).toEqual({ ...knownModel, displayName: 'Updated Model', enabled: true });
+  });
+
+  it('should add a new custom model', () => {
+    const result = transformToChatModelCards({
+      modelString: '+custom_model=Custom Model',
+      defaultChatModels,
+    });
+    expect(result).toContainEqual({
+      id: 'custom_model',
+      displayName: 'Custom Model',
+      enabled: true,
+    });
+  });
+
+  it('should have file with builtin models like gpt-4-0125-preview', () => {
+    const result = transformToChatModelCards({
+      modelString:
+        '-all,+gpt-4-0125-preview=ChatGPT-4<128000:fc:file>,+gpt-4-turbo-2024-04-09=ChatGPT-4 Vision<128000:fc:vision:file>',
+      defaultChatModels: OpenAIProviderCard.chatModels,
+    });
+
+    expect(result).toEqual([
+      {
+        displayName: 'ChatGPT-4',
+        files: true,
+        functionCall: true,
+        enabled: true,
+        id: 'gpt-4-0125-preview',
+        tokens: 128000,
+      },
+      {
+        description: 'GPT-4 Turbo 视觉版 (240409)',
+        displayName: 'ChatGPT-4 Vision',
+        files: true,
+        functionCall: true,
+        enabled: true,
+        id: 'gpt-4-turbo-2024-04-09',
+        tokens: 128000,
+        vision: true,
+      },
+    ]);
+  });
+});

package/src/utils/parseModels.ts

@@ -114,17 +114,22 @@ export const transformToChatModelCards = ({
 
       // if the model is known, update it based on the known model
       if (knownModel) {
-        const modelInList = draft.find((model) => model.id === toAddModel.id);
+        const index = draft.findIndex((model) => model.id === toAddModel.id);
+        const modelInList = draft[index];
 
         // if the model is already in chatModels, update it
         if (modelInList) {
-          // if (modelInList.hidden) delete modelInList.hidden;
-          modelInList.enabled = true;
-          if (toAddModel.displayName) modelInList.displayName = toAddModel.displayName;
+          draft[index] = {
+            ...modelInList,
+            ...toAddModel,
+            displayName: toAddModel.displayName || modelInList.displayName || modelInList.id,
+            enabled: true,
+          };
         } else {
           // if the model is not in chatModels, add it
           draft.push({
             ...knownModel,
+            ...toAddModel,
             displayName: toAddModel.displayName || knownModel.displayName || knownModel.id,
             enabled: true,
           });

package/src/utils/platform.test.ts

@@ -0,0 +1,83 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { isSonomaOrLaterSafari } from './platform';
+
+describe('isSonomaOrLaterSafari', () => {
+  beforeEach(() => {
+    // 重置 navigator 对象
+    vi.stubGlobal('navigator', {
+      userAgent:
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.4 Safari/605.1.15',
+      maxTouchPoints: 0,
+    });
+  });
+
+  it('should return false when userAgent is not Macintosh', () => {
+    vi.stubGlobal('navigator', { userAgent: 'Windows NT 10.0; Win64; x64' });
+    expect(isSonomaOrLaterSafari()).toBe(false);
+  });
+
+  it('should return false when navigator.maxTouchPoints > 0', () => {
+    Object.defineProperty(navigator, 'maxTouchPoints', { value: 1 });
+    expect(isSonomaOrLaterSafari()).toBe(false);
+  });
+
+  it('should return false when Safari version < 17', () => {
+    vi.stubGlobal('navigator', {
+      userAgent:
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.4 Safari/605.1.15',
+    });
+    expect(isSonomaOrLaterSafari()).toBe(false);
+  });
+
+  it('should return false when audio codec check fails', () => {
+    vi.stubGlobal('navigator', {
+      userAgent:
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15',
+    });
+    vi.spyOn(document, 'createElement').mockReturnValueOnce({
+      canPlayType: vi.fn().mockReturnValue(''),
+    } as any);
+    vi.stubGlobal(
+      'OffscreenCanvas',
+      class {
+        getContext = vi.fn().mockReturnValueOnce(null);
+      },
+    );
+    expect(isSonomaOrLaterSafari()).toBe(false);
+  });
+
+  it('should return false when WebGL check fails', () => {
+    vi.stubGlobal('navigator', {
+      userAgent:
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15',
+    });
+    vi.spyOn(document, 'createElement').mockReturnValueOnce({
+      canPlayType: vi.fn().mockReturnValue('maybe'),
+    } as any);
+    vi.stubGlobal(
+      'OffscreenCanvas',
+      class {
+        getContext = vi.fn().mockReturnValueOnce(null);
+      },
+    );
+    expect(isSonomaOrLaterSafari()).toBe(false);
+  });
+
+  it('should return true when all checks pass', () => {
+    vi.stubGlobal('navigator', {
+      userAgent:
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15',
+    });
+    vi.spyOn(document, 'createElement').mockReturnValueOnce({
+      canPlayType: vi.fn().mockReturnValue('maybe'),
+    } as any);
+    vi.stubGlobal(
+      'OffscreenCanvas',
+      class {
+        getContext = vi.fn().mockReturnValueOnce({});
+      },
+    );
+    expect(isSonomaOrLaterSafari()).toBe(true);
+  });
+});

package/src/utils/platform.ts

@@ -1,7 +1,9 @@
 import UAParser from 'ua-parser-js';
 
-const getParser = () => {
-  if (typeof window === 'undefined') return new UAParser('Node');
+import { isOnServerSide } from '@/utils/env';
+
+export const getParser = () => {
+  if (isOnServerSide) return new UAParser('Node');
 
   let ua = navigator.userAgent;
   return new UAParser(ua);
@@ -22,3 +24,32 @@ export const browserInfo = {
 };
 
 export const isMacOS = () => getPlatform() === 'Mac OS';
+
+export const isInStandaloneMode = () => {
+  if (isOnServerSide) return false;
+  return (
+    window.matchMedia('(display-mode: standalone)').matches ||
+    ('standalone' in navigator && (navigator as any).standalone === true)
+  );
+};
+
+export const isSonomaOrLaterSafari = () => {
+  if (isOnServerSide) return false;
+
+  // refs: https://github.com/khmyznikov/pwa-install/blob/0904788b9d0e34399846f6cb7dbb5efeabb62c20/src/utils.ts#L24
+  const userAgent = navigator.userAgent.toLowerCase();
+  if (navigator.maxTouchPoints || !/macintosh/.test(userAgent)) return false;
+
+  // check safari version >= 17
+  const version = /version\/(\d{2})\./.exec(userAgent);
+  if (!version || !version[1] || !(parseInt(version[1]) >= 17)) return false;
+
+  try {
+    // hacky way to detect Sonoma
+    const audioCheck = document.createElement('audio').canPlayType('audio/wav; codecs="1"');
+    const webGLCheck = new OffscreenCanvas(1, 1).getContext('webgl');
+    return Boolean(audioCheck) && Boolean(webGLCheck);
+  } catch {
+    return false;
+  }
+};