@lobehub/chat 0.161.13 → 0.161.14

package/.github/ISSUE_TEMPLATE/1_bug_report.yml

@@ -3,16 +3,15 @@ description: 'Report an bug'
 title: '[Bug] '
 labels: ['🐛 Bug']
 body:
-  - type: dropdown
+  - type: checkboxes
     attributes:
       label: '📦 Environment'
       options:
-        - Unselected
-        - Official
-        - Official Preview
-        - Vercel / Zeabur / Sealos
-        - Docker
-        - Other
+        - label: 'Official'
+        - label: 'Official Preview'
+        - label: 'Vercel / Zeabur / Sealos'
+        - label: 'Docker'
+        - label: 'Other'
     validations:
       required: true
   - type: input
@@ -21,30 +20,28 @@ body:
     validations:
       required: true
   
-  - type: dropdown
+  - type: checkboxes
     attributes:
       label: '💻 Operating System'
       options:
-        - Unselected
-        - Windows
-        - macOS
-        - Ubuntu
-        - Other Linux
-        - iOS
-        - Android
-        - Other
+        - label: 'Windows'
+        - label: 'macOS'
+        - label: 'Ubuntu'
+        - label: 'Other Linux'
+        - label: 'iOS'
+        - label: 'Android'
+        - label: 'Other'
     validations:
       required: true
-  - type: dropdown
+  - type: checkboxes
     attributes:
       label: '🌐 Browser'
       options:
-        - Unselected
-        - Chrome
-        - Edge
-        - Safari
-        - Firefox
-        - Other
+        - label: 'Chrome'
+        - label: 'Edge'
+        - label: 'Safari'
+        - label: 'Firefox'
+        - label: 'Other'
     validations:
       required: true
   - type: textarea

package/.github/ISSUE_TEMPLATE/1_bug_report_cn.yml

@@ -3,16 +3,15 @@ description: '反馈一个问题缺陷'
 title: '[Bug] '
 labels: ['🐛 Bug']
 body:
-  - type: dropdown
+  - type: checkboxes
     attributes:
       label: '📦 部署环境'
       options:
-        - 待选择
-        - Official
-        - Official Preview
-        - Vercel / Zeabur / Sealos
-        - Docker
-        - Other
+        - label: 'Official'
+        - label: 'Official Preview'
+        - label: 'Vercel / Zeabur / Sealos'
+        - label: 'Docker'
+        - label: 'Other'
     validations:
       required: true
   - type: input
@@ -21,30 +20,28 @@ body:
     validations:
       required: true
 
-  - type: dropdown
+  - type: checkboxes
     attributes:
       label: '💻 系统环境'
       options:
-        - 待选择
-        - Windows
-        - macOS
-        - Ubuntu
-        - Other Linux
-        - iOS
-        - Android
-        - Other
+        - label: 'Windows'
+        - label: 'macOS'
+        - label: 'Ubuntu'
+        - label: 'Other Linux'
+        - label: 'iOS'
+        - label: 'Android'
+        - label: 'Other'
     validations:
       required: true
-  - type: dropdown
+  - type: checkboxes
     attributes:
       label: '🌐 浏览器'
       options:
-        - 待选择
-        - Chrome
-        - Edge
-        - Safari
-        - Firefox
-        - Other
+        - label: 'Chrome'
+        - label: 'Edge'
+        - label: 'Safari'
+        - label: 'Firefox'
+        - label: 'Other'
     validations:
       required: true
   - type: textarea

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.161.14](https://github.com/lobehub/lobe-chat/compare/v0.161.13...v0.161.14)
+
+<sup>Released on **2024-05-24**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor the global app status and fix PWA installer.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor the global app status and fix PWA installer, closes [#2637](https://github.com/lobehub/lobe-chat/issues/2637) ([1f70305](https://github.com/lobehub/lobe-chat/commit/1f70305))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.161.13](https://github.com/lobehub/lobe-chat/compare/v0.161.12...v0.161.13)
 
 <sup>Released on **2024-05-24**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.161.13",
+  "version": "0.161.14",
   "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",
@@ -95,10 +95,10 @@
     "@google/generative-ai": "^0.11.3",
     "@icons-pack/react-simple-icons": "^9.5.0",
     "@khmyznikov/pwa-install": "^0.3.9",
-    "@lobehub/chat-plugin-sdk": "latest",
-    "@lobehub/chat-plugins-gateway": "latest",
+    "@lobehub/chat-plugin-sdk": "^1.32.3",
+    "@lobehub/chat-plugins-gateway": "^1.9.0",
     "@lobehub/icons": "^1.22.0",
-    "@lobehub/tts": "latest",
+    "@lobehub/tts": "^1.24.1",
     "@lobehub/ui": "^1.139.0",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@next/third-parties": "^14.2.3",

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/index.tsx

@@ -10,6 +10,7 @@ import {
   HEADER_HEIGHT,
 } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
 
 import Footer from './Footer';
 import Head from './Header';
@@ -19,8 +20,8 @@ const DesktopChatInput = memo(() => {
   const [expand, setExpand] = useState<boolean>(false);
 
   const [inputHeight, updatePreference] = useGlobalStore((s) => [
-    s.preference.inputHeight,
-    s.updatePreference,
+    systemStatusSelectors.inputHeight(s),
+    s.updateSystemStatus,
   ]);
 
   return (

package/src/app/(main)/chat/(workspace)/@topic/features/SystemRole/SystemRoleContent.tsx

@@ -15,6 +15,7 @@ import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useGlobalStore } from '@/store/global';
 import { ChatSettingsTabs } from '@/store/global/initialState';
+import { systemStatusSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
 import { sessionMetaSelectors, sessionSelectors } from '@/store/session/selectors';
 
@@ -35,7 +36,7 @@ const SystemRole = memo(() => {
   ]);
 
   const [showSystemRole, toggleSystemRole] = useGlobalStore((s) => [
-    s.preference.showSystemRole,
+    systemStatusSelectors.showSystemRole(s),
     s.toggleSystemRole,
   ]);
 

package/src/app/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/HeaderAction.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 
 import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
 import SettingButton from '../../../features/SettingButton';
@@ -16,7 +17,7 @@ const HeaderAction = memo(() => {
   const { t } = useTranslation('chat');
 
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
-    s.preference.showChatSideBar,
+    systemStatusSelectors.showChatSideBar(s),
     s.toggleChatSideBar,
   ]);
 

package/src/app/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/Main.tsx

@@ -7,13 +7,14 @@ import { Suspense, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { useInitAgentConfig } from '@/app/(main)/chat/(workspace)/_layout/useInitAgentConfig';
 import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
 import { sessionMetaSelectors, sessionSelectors } from '@/store/session/selectors';
 
+import { useInitAgentConfig } from '../../useInitAgentConfig';
 import Tags from './Tags';
 
 const Main = memo(() => {
@@ -34,7 +35,8 @@ const Main = memo(() => {
 
   const displayTitle = isInbox ? t('inbox.title') : title;
   const displayDesc = isInbox ? t('inbox.desc') : description;
-  const showSessionPanel = useGlobalStore((s) => s.preference.showSessionPanel);
+  const showSessionPanel = useGlobalStore(systemStatusSelectors.showSessionPanel);
+  const updateSystemStatus = useGlobalStore((s) => s.updateSystemStatus);
 
   return !init ? (
     <Flexbox horizontal>
@@ -52,10 +54,9 @@ const Main = memo(() => {
           aria-label={t('agentsAndConversations')}
           icon={showSessionPanel ? PanelLeftClose : PanelLeftOpen}
           onClick={() => {
-            const currentShowSessionPanel = useGlobalStore.getState().preference.showSessionPanel;
-            useGlobalStore.getState().updatePreference({
-              sessionsWidth: currentShowSessionPanel ? 0 : 320,
-              showSessionPanel: !currentShowSessionPanel,
+            updateSystemStatus({
+              sessionsWidth: showSessionPanel ? 0 : 320,
+              showSessionPanel: !showSessionPanel,
             });
           }}
           size={DESKTOP_HEADER_ICON_SIZE}

package/src/app/(main)/chat/(workspace)/_layout/Desktop/TopicPanel.tsx

@@ -8,6 +8,7 @@ import { PropsWithChildren, memo, useEffect, useState } from 'react';
 import SafeSpacing from '@/components/SafeSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
 
 const useStyles = createStyles(({ css, token }) => ({
   content: css`
@@ -28,10 +29,10 @@ const TopicPanel = memo(({ children }: PropsWithChildren) => {
   const { styles } = useStyles();
   const { md = true, lg = true } = useResponsive();
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
-    s.preference.showChatSideBar,
+    systemStatusSelectors.showChatSideBar(s),
     s.toggleChatSideBar,
-    s.isPreferenceInit,
   ]);
+
   const [cacheExpand, setCacheExpand] = useState<boolean>(Boolean(showAgentSettings));
 
   const handleExpand = (expand: boolean) => {

package/src/app/(main)/chat/(workspace)/_layout/Mobile/TopicModal.tsx

@@ -5,12 +5,13 @@ import { PropsWithChildren, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
 
 import { useWorkspaceModal } from '../../features/useWorkspaceModal';
 
 const Topics = memo(({ children }: PropsWithChildren) => {
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
-    s.preference.mobileShowTopic,
+    systemStatusSelectors.mobileShowTopic(s),
     s.toggleMobileTopic,
   ]);
   const [open, setOpen] = useWorkspaceModal(showAgentSettings, toggleConfig);

package/src/app/(main)/chat/@session/features/SessionListContent/DefaultMode.tsx

@@ -4,7 +4,7 @@ import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useGlobalStore } from '@/store/global';
-import { preferenceSelectors } from '@/store/global/selectors';
+import { systemStatusSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { SessionDefaultGroup } from '@/types/session';
@@ -30,9 +30,9 @@ const DefaultMode = memo(() => {
   const customSessionGroups = useSessionStore(sessionSelectors.customSessionGroups, isEqual);
   const pinnedSessions = useSessionStore(sessionSelectors.pinnedSessions, isEqual);
 
-  const [sessionGroupKeys, updatePreference] = useGlobalStore((s) => [
-    preferenceSelectors.sessionGroupKeys(s),
-    s.updatePreference,
+  const [sessionGroupKeys, updateSystemStatus] = useGlobalStore((s) => [
+    systemStatusSelectors.sessionGroupKeys(s),
+    s.updateSystemStatus,
   ]);
 
   const items = useMemo(
@@ -80,7 +80,7 @@ const DefaultMode = memo(() => {
         onChange={(keys) => {
           const expandSessionGroupKeys = typeof keys === 'string' ? [keys] : keys;
 
-          updatePreference({ expandSessionGroupKeys });
+          updateSystemStatus({ expandSessionGroupKeys });
         }}
       />
       {activeGroupId && (

package/src/app/(main)/chat/_layout/Desktop/SessionPanel.tsx

@@ -7,6 +7,7 @@ import { PropsWithChildren, memo, useEffect, useState } from 'react';
 
 import { FOLDER_WIDTH } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
 
 export const useStyles = createStyles(({ css, token }) => ({
   panel: css`
@@ -21,10 +22,11 @@ const SessionPanel = memo<PropsWithChildren>(({ children }) => {
 
   const { styles } = useStyles();
   const [sessionsWidth, sessionExpandable, updatePreference] = useGlobalStore((s) => [
-    s.preference.sessionsWidth,
-    s.preference.showSessionPanel,
-    s.updatePreference,
+    systemStatusSelectors.sessionWidth(s),
+    systemStatusSelectors.showSessionPanel(s),
+    s.updateSystemStatus,
   ]);
+
   const [cacheExpand, setCacheExpand] = useState<boolean>(Boolean(sessionExpandable));
   const [tmpWidth, setWidth] = useState(sessionsWidth);
   if (tmpWidth !== sessionsWidth) setWidth(sessionsWidth);

package/src/features/PWAInstall/index.tsx

@@ -1,11 +1,15 @@
 'use client';
 
 import dynamic from 'next/dynamic';
-import { memo } from 'react';
+import { memo, useEffect, useLayoutEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { PWA_INSTALL_ID } from '@/const/layoutTokens';
+import { usePWAInstall } from '@/hooks/usePWAInstall';
 import { usePlatform } from '@/hooks/usePlatform';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+import { useUserStore } from '@/store/user';
 
 // @ts-ignore
 const PWA: any = dynamic(() => import('@khmyznikov/pwa-install/dist/pwa-install.react.js'), {
@@ -15,6 +19,52 @@ const PWA: any = dynamic(() => import('@khmyznikov/pwa-install/dist/pwa-install.
 const PWAInstall = memo(() => {
   const { t } = useTranslation('metadata');
   const { isPWA } = usePlatform();
+
+  const { install, canInstall } = usePWAInstall();
+
+  const isShowPWAGuide = useUserStore((s) => s.isShowPWAGuide);
+  const [hidePWAInstaller, updateSystemStatus] = useGlobalStore((s) => [
+    systemStatusSelectors.hidePWAInstaller(s),
+    s.updateSystemStatus,
+  ]);
+
+  // we need to make the pwa installer hidden by default
+  useLayoutEffect(() => {
+    sessionStorage.setItem('pwa-hide-install', 'true');
+  }, []);
+
+  const pwaInstall =
+    // eslint-disable-next-line unicorn/prefer-query-selector
+    typeof window === 'undefined' ? undefined : document.getElementById(PWA_INSTALL_ID);
+
+  // add an event listener to control the user close installer action
+  useEffect(() => {
+    if (!pwaInstall) return;
+
+    const handler = (e: Event) => {
+      const event = e as CustomEvent;
+
+      // it means user hide installer
+      if (event.detail.message === 'dismissed') {
+        updateSystemStatus({ hidePWAInstaller: true });
+      }
+    };
+
+    pwaInstall.addEventListener('pwa-user-choice-result-event', handler);
+    return () => {
+      pwaInstall.removeEventListener('pwa-user-choice-result-event', handler);
+    };
+  }, [pwaInstall]);
+
+  // trigger the PWA guide on demand
+  useEffect(() => {
+    if (!canInstall || hidePWAInstaller) return;
+
+    if (isShowPWAGuide) {
+      install();
+    }
+  }, [canInstall, hidePWAInstaller, isShowPWAGuide]);
+
   if (isPWA) return null;
   return <PWA description={t('chat.description')} id={PWA_INSTALL_ID} />;
 });

package/src/layout/GlobalProvider/StoreInitialization.tsx

@@ -24,11 +24,11 @@ const StoreInitialization = memo(() => {
 
   const { serverConfig } = useServerConfigStore();
 
-  const useInitGlobalPreference = useGlobalStore((s) => s.useInitGlobalPreference);
+  const useInitSystemStatus = useGlobalStore((s) => s.useInitSystemStatus);
 
   const useFetchDefaultAgentConfig = useAgentStore((s) => s.useFetchDefaultAgentConfig);
   // init the system preference
-  useInitGlobalPreference();
+  useInitSystemStatus();
   useFetchDefaultAgentConfig();
 
   useInitUserState(isLogin, serverConfig, {

package/src/store/global/action.test.ts

@@ -34,11 +34,11 @@ describe('createPreferenceSlice', () => {
       const { result } = renderHook(() => useGlobalStore());
 
       act(() => {
-        useGlobalStore.getState().updatePreference({ showChatSideBar: false });
+        useGlobalStore.getState().updateSystemStatus({ showChatSideBar: false });
         result.current.toggleChatSideBar();
       });
 
-      expect(result.current.preference.showChatSideBar).toBe(true);
+      expect(result.current.status.showChatSideBar).toBe(true);
     });
   });
 
@@ -48,10 +48,11 @@ describe('createPreferenceSlice', () => {
       const groupId = 'group-id';
 
       act(() => {
+        useGlobalStore.setState({ isStatusInit: true });
         result.current.toggleExpandSessionGroup(groupId, true);
       });
 
-      expect(result.current.preference.expandSessionGroupKeys).toContain(groupId);
+      expect(result.current.status.expandSessionGroupKeys).toContain(groupId);
     });
   });
 
@@ -60,10 +61,11 @@ describe('createPreferenceSlice', () => {
       const { result } = renderHook(() => useGlobalStore());
 
       act(() => {
+        useGlobalStore.setState({ isStatusInit: true });
         result.current.toggleMobileTopic();
       });
 
-      expect(result.current.preference.mobileShowTopic).toBe(true);
+      expect(result.current.status.mobileShowTopic).toBe(true);
     });
   });
 
@@ -72,23 +74,24 @@ describe('createPreferenceSlice', () => {
       const { result } = renderHook(() => useGlobalStore());
 
       act(() => {
+        useGlobalStore.setState({ isStatusInit: true });
         result.current.toggleSystemRole(true);
       });
 
-      expect(result.current.preference.showSystemRole).toBe(true);
+      expect(result.current.status.showSystemRole).toBe(true);
     });
   });
 
   describe('updatePreference', () => {
-    it('should update preference', () => {
+    it('should update status', () => {
       const { result } = renderHook(() => useGlobalStore());
-      const preference = { inputHeight: 200 };
+      const status = { inputHeight: 200 };
 
       act(() => {
-        result.current.updatePreference(preference);
+        result.current.updateSystemStatus(status);
       });
 
-      expect(result.current.preference.inputHeight).toEqual(200);
+      expect(result.current.status.inputHeight).toEqual(200);
     });
   });
 
@@ -144,13 +147,12 @@ describe('createPreferenceSlice', () => {
   });
 
   describe('useInitGlobalPreference', () => {
-    it('should init global preference if there is empty object', async () => {
-      vi.spyOn(
-        useGlobalStore.getState().preferenceStorage,
-        'getFromLocalStorage',
-      ).mockReturnValueOnce({} as any);
+    it('should init global status if there is empty object', async () => {
+      vi.spyOn(useGlobalStore.getState().statusStorage, 'getFromLocalStorage').mockReturnValueOnce(
+        {} as any,
+      );
 
-      const { result } = renderHook(() => useGlobalStore().useInitGlobalPreference(), {
+      const { result } = renderHook(() => useGlobalStore().useInitSystemStatus(), {
         wrapper: withSWR,
       });
 
@@ -158,17 +160,16 @@ describe('createPreferenceSlice', () => {
         expect(result.current.data).toEqual({});
       });
 
-      expect(useGlobalStore.getState().preference).toEqual(initialState.preference);
+      expect(useGlobalStore.getState().status).toEqual(initialState.status);
     });
 
     it('should update with data', async () => {
       const { result } = renderHook(() => useGlobalStore());
-      vi.spyOn(
-        useGlobalStore.getState().preferenceStorage,
-        'getFromLocalStorage',
-      ).mockReturnValueOnce({ inputHeight: 300 } as any);
+      vi.spyOn(useGlobalStore.getState().statusStorage, 'getFromLocalStorage').mockReturnValueOnce({
+        inputHeight: 300,
+      } as any);
 
-      const { result: hooks } = renderHook(() => result.current.useInitGlobalPreference(), {
+      const { result: hooks } = renderHook(() => result.current.useInitSystemStatus(), {
         wrapper: withSWR,
       });
 
@@ -176,7 +177,7 @@ describe('createPreferenceSlice', () => {
         expect(hooks.current.data).toEqual({ inputHeight: 300 });
       });
 
-      expect(result.current.preference.inputHeight).toEqual(300);
+      expect(result.current.status.inputHeight).toEqual(300);
     });
   });
 });

package/src/store/global/action.ts

@@ -13,9 +13,9 @@ import type { GlobalStore } from '@/store/global/index';
 import { merge } from '@/utils/merge';
 import { setNamespace } from '@/utils/storeDebug';
 
-import type { GlobalPreference } from './initialState';
+import type { SystemStatus } from './initialState';
 
-const n = setNamespace('preference');
+const n = setNamespace('g');
 
 /**
  * 设置操作
@@ -26,9 +26,9 @@ export interface GlobalStoreAction {
   toggleExpandSessionGroup: (id: string, expand: boolean) => void;
   toggleMobileTopic: (visible?: boolean) => void;
   toggleSystemRole: (visible?: boolean) => void;
-  updatePreference: (preference: Partial<GlobalPreference>, action?: any) => void;
+  updateSystemStatus: (status: Partial<SystemStatus>, action?: any) => void;
   useCheckLatestVersion: (enabledCheck?: boolean) => SWRResponse<string>;
-  useInitGlobalPreference: () => SWRResponse;
+  useInitSystemStatus: () => SWRResponse;
 }
 
 export const globalActionSlice: StateCreator<
@@ -42,13 +42,13 @@ export const globalActionSlice: StateCreator<
   },
   toggleChatSideBar: (newValue) => {
     const showChatSideBar =
-      typeof newValue === 'boolean' ? newValue : !get().preference.showChatSideBar;
+      typeof newValue === 'boolean' ? newValue : !get().status.showChatSideBar;
 
-    get().updatePreference({ showChatSideBar }, n('toggleAgentPanel', newValue));
+    get().updateSystemStatus({ showChatSideBar }, n('toggleAgentPanel', newValue));
   },
   toggleExpandSessionGroup: (id, expand) => {
-    const { preference } = get();
-    const nextExpandSessionGroup = produce(preference.expandSessionGroupKeys, (draft: string[]) => {
+    const { status } = get();
+    const nextExpandSessionGroup = produce(status.expandSessionGroupKeys, (draft: string[]) => {
       if (expand) {
         if (draft.includes(id)) return;
         draft.push(id);
@@ -57,26 +57,29 @@ export const globalActionSlice: StateCreator<
         if (index !== -1) draft.splice(index, 1);
       }
     });
-    get().updatePreference({ expandSessionGroupKeys: nextExpandSessionGroup });
+    get().updateSystemStatus({ expandSessionGroupKeys: nextExpandSessionGroup });
   },
   toggleMobileTopic: (newValue) => {
     const mobileShowTopic =
-      typeof newValue === 'boolean' ? newValue : !get().preference.mobileShowTopic;
+      typeof newValue === 'boolean' ? newValue : !get().status.mobileShowTopic;
 
-    get().updatePreference({ mobileShowTopic }, n('toggleMobileTopic', newValue));
+    get().updateSystemStatus({ mobileShowTopic }, n('toggleMobileTopic', newValue));
   },
   toggleSystemRole: (newValue) => {
-    const showSystemRole =
-      typeof newValue === 'boolean' ? newValue : !get().preference.mobileShowTopic;
+    const showSystemRole = typeof newValue === 'boolean' ? newValue : !get().status.mobileShowTopic;
 
-    get().updatePreference({ showSystemRole }, n('toggleMobileTopic', newValue));
+    get().updateSystemStatus({ showSystemRole }, n('toggleMobileTopic', newValue));
   },
-  updatePreference: (preference, action) => {
-    const nextPreference = merge(get().preference, preference);
+  updateSystemStatus: (status, action) => {
+    // Status cannot be modified when it is not initialized
+    if (!get().isStatusInit) return;
 
-    set({ preference: nextPreference }, false, action || n('updatePreference'));
+    const nextStatus = merge(get().status, status);
+    if (isEqual(get().status, nextStatus)) return;
 
-    get().preferenceStorage.saveToLocalStorage(nextPreference);
+    set({ status: nextStatus }, false, action || n('updateSystemStatus'));
+
+    get().statusStorage.saveToLocalStorage(nextStatus);
   },
 
   useCheckLatestVersion: (enabledCheck = true) =>
@@ -89,19 +92,15 @@ export const globalActionSlice: StateCreator<
       },
     }),
 
-  useInitGlobalPreference: () =>
-    useClientDataSWR<GlobalPreference>(
-      'initGlobalPreference',
-      () => get().preferenceStorage.getFromLocalStorage(),
+  useInitSystemStatus: () =>
+    useClientDataSWR<SystemStatus>(
+      'initSystemStatus',
+      () => get().statusStorage.getFromLocalStorage(),
       {
-        onSuccess: (preference) => {
-          const nextPreference = merge(get().preference, preference);
-
-          set({ isPreferenceInit: true });
-
-          if (isEqual(get().preference, nextPreference)) return;
+        onSuccess: (status) => {
+          set({ isStatusInit: true }, false, 'setStatusInit');
 
-          set({ preference: nextPreference }, false, n('initPreference'));
+          get().updateSystemStatus(status, 'initSystemStatus');
         },
       },
     ),

package/src/store/global/initialState.ts

@@ -29,9 +29,10 @@ export enum SettingsTabs {
   TTS = 'tts',
 }
 
-export interface GlobalPreference {
+export interface SystemStatus {
   // which sessionGroup should expand
   expandSessionGroupKeys: string[];
+  hidePWAInstaller?: boolean;
   inputHeight: number;
   mobileShowTopic?: boolean;
   sessionsWidth: number;
@@ -40,37 +41,32 @@ export interface GlobalPreference {
   showSystemRole?: boolean;
 }
 
-export interface GlobalPreferenceState {
-  /**
-   * the user preference, which only store in local storage
-   */
-  preference: GlobalPreference;
-  preferenceStorage: AsyncLocalStorage<GlobalPreference>;
-}
-
-export interface GlobalCommonState {
+export interface GlobalState {
   hasNewVersion?: boolean;
   isMobile?: boolean;
-  isPreferenceInit?: boolean;
+  isStatusInit?: boolean;
   latestVersion?: string;
   router?: AppRouterInstance;
   sidebarKey: SidebarTabKey;
+  status: SystemStatus;
+  statusStorage: AsyncLocalStorage<SystemStatus>;
 }
 
-export type GlobalState = GlobalCommonState & GlobalPreferenceState;
+export const INITIAL_STATUS = {
+  expandSessionGroupKeys: [SessionDefaultGroup.Pinned, SessionDefaultGroup.Default],
+  hidePWAInstaller: false,
+  inputHeight: 200,
+  mobileShowTopic: false,
+  sessionsWidth: 320,
+  showChatSideBar: true,
+  showSessionPanel: true,
+  showSystemRole: false,
+} satisfies SystemStatus;
 
 export const initialState: GlobalState = {
   isMobile: false,
-  isPreferenceInit: false,
-  preference: {
-    expandSessionGroupKeys: [SessionDefaultGroup.Pinned, SessionDefaultGroup.Default],
-    inputHeight: 200,
-    mobileShowTopic: false,
-    sessionsWidth: 320,
-    showChatSideBar: true,
-    showSessionPanel: true,
-    showSystemRole: false,
-  },
-  preferenceStorage: new AsyncLocalStorage('LOBE_GLOBAL_PREFERENCE'),
+  isStatusInit: false,
   sidebarKey: SidebarTabKey.Chat,
+  status: INITIAL_STATUS,
+  statusStorage: new AsyncLocalStorage('LOBE_SYSTEM_STATUS'),
 };

package/src/store/global/selectors.ts

@@ -1,9 +1,26 @@
 import { GlobalStore } from '@/store/global';
-import { SessionDefaultGroup } from '@/types/session';
+
+import { INITIAL_STATUS } from './initialState';
 
 const sessionGroupKeys = (s: GlobalStore): string[] =>
-  s.preference.expandSessionGroupKeys || [SessionDefaultGroup.Pinned, SessionDefaultGroup.Default];
+  s.status.expandSessionGroupKeys || INITIAL_STATUS.expandSessionGroupKeys;
+
+const showSystemRole = (s: GlobalStore) => s.status.showSystemRole;
+const mobileShowTopic = (s: GlobalStore) => s.status.mobileShowTopic;
+const showChatSideBar = (s: GlobalStore) => s.status.showChatSideBar;
+const showSessionPanel = (s: GlobalStore) => s.status.showSessionPanel;
+const hidePWAInstaller = (s: GlobalStore) => s.status.hidePWAInstaller;
+
+const sessionWidth = (s: GlobalStore) => s.status.sessionsWidth;
+const inputHeight = (s: GlobalStore) => s.status.inputHeight;
 
-export const preferenceSelectors = {
+export const systemStatusSelectors = {
+  hidePWAInstaller,
+  inputHeight,
+  mobileShowTopic,
   sessionGroupKeys,
+  sessionWidth,
+  showChatSideBar,
+  showSessionPanel,
+  showSystemRole,
 };

package/src/utils/localStorage.ts

@@ -2,7 +2,7 @@ const PREV_KEY = 'LOBE_GLOBAL';
 
 // LOBE_PREFERENCE for userStore
 // LOBE_GLOBAL_PREFERENCE for globalStore
-type StorageKey = 'LOBE_PREFERENCE' | 'LOBE_GLOBAL_PREFERENCE';
+type StorageKey = 'LOBE_PREFERENCE' | 'LOBE_SYSTEM_STATUS';
 
 export class AsyncLocalStorage<State> {
   private storageKey: StorageKey;