@lobehub/chat 0.120.3 → 0.120.5

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

@@ -3,6 +3,8 @@ import { gt } from 'semver';
 import useSWR, { SWRResponse } from 'swr';
 import type { StateCreator } from 'zustand/vanilla';
 
+import { INBOX_SESSION_ID } from '@/const/session';
+import { SESSION_CHAT_URL } from '@/const/url';
 import { CURRENT_VERSION } from '@/const/version';
 import { globalService } from '@/services/global';
 import type { GlobalStore } from '@/store/global';
@@ -18,6 +20,7 @@ const n = setNamespace('settings');
  * 设置操作
  */
 export interface CommonAction {
+  switchBackToChat: (sessionId?: string) => void;
   /**
    * 切换侧边栏选项
    * @param key - 选中的侧边栏选项
@@ -38,6 +41,9 @@ export const createCommonSlice: StateCreator<
   [],
   CommonAction
 > = (set, get) => ({
+  switchBackToChat: (sessionId) => {
+    get().router?.push(SESSION_CHAT_URL(sessionId || INBOX_SESSION_ID, get().isMobile));
+  },
   switchSideBar: (key) => {
     set({ sidebarKey: key }, false, n('switchSideBar', key));
   },

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

@@ -1,3 +1,5 @@
+import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
+
 export enum SidebarTabKey {
   Chat = 'chat',
   Market = 'market',
@@ -33,17 +35,20 @@ export interface GlobalPreference {
 
 export interface GlobalCommonState {
   hasNewVersion?: boolean;
+  isMobile?: boolean;
   latestVersion?: string;
   /**
    *  用户偏好的 UI 状态
    *  @localStorage
    */
   preference: GlobalPreference;
+  router?: AppRouterInstance;
   settingsTab: SettingsTabs;
   sidebarKey: SidebarTabKey;
 }
 
 export const initialCommonState: GlobalCommonState = {
+  isMobile: false,
   preference: {
     guide: {},
     inputHeight: 200,

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

@@ -0,0 +1,117 @@
+import { act, renderHook } from '@testing-library/react';
+import { DeepPartial } from 'utility-types';
+import { describe, expect, it, vi } from 'vitest';
+
+import { DEFAULT_AGENT, DEFAULT_SETTINGS } from '@/const/settings';
+import { useGlobalStore } from '@/store/global';
+import { SettingsTabs } from '@/store/global/initialState';
+import { LobeAgentSettings } from '@/types/session';
+import { GlobalSettings, OpenAIConfig } from '@/types/settings';
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+vi.mock('@/utils/uuid', () => ({
+  nanoid: vi.fn(() => 'unique-id'),
+}));
+
+describe('SettingsAction', () => {
+  describe('importAppSettings', () => {
+    it('should import app settings', () => {
+      const { result } = renderHook(() => useGlobalStore());
+      const newSettings: GlobalSettings = {
+        ...DEFAULT_SETTINGS,
+        themeMode: 'dark',
+      };
+
+      act(() => {
+        result.current.importAppSettings(newSettings);
+      });
+
+      expect(result.current.settings).toEqual(newSettings);
+    });
+  });
+
+  describe('resetSettings', () => {
+    it('should reset settings to default', () => {
+      const { result } = renderHook(() => useGlobalStore());
+
+      act(() => {
+        result.current.resetSettings();
+      });
+
+      expect(result.current.settings).toEqual(DEFAULT_SETTINGS);
+    });
+  });
+
+  describe('setOpenAIConfig', () => {
+    it('should set OpenAI configuration', () => {
+      const { result } = renderHook(() => useGlobalStore());
+      const openAIConfig: Partial<OpenAIConfig> = { OPENAI_API_KEY: 'test' };
+
+      act(() => {
+        result.current.setOpenAIConfig(openAIConfig);
+      });
+
+      expect(result.current.settings.languageModel.openAI.OPENAI_API_KEY).toEqual(
+        openAIConfig.OPENAI_API_KEY,
+      );
+    });
+  });
+
+  describe('setSettings', () => {
+    it('should set partial settings', () => {
+      const { result } = renderHook(() => useGlobalStore());
+      const partialSettings: Partial<GlobalSettings> = { themeMode: 'dark' };
+
+      act(() => {
+        result.current.setSettings(partialSettings);
+      });
+
+      expect(result.current.settings.themeMode).toEqual('dark');
+    });
+  });
+
+  describe('switchSettingTabs', () => {
+    it('should switch settings tabs', () => {
+      const { result } = renderHook(() => useGlobalStore());
+
+      act(() => {
+        result.current.switchSettingTabs(SettingsTabs.Agent);
+      });
+
+      expect(result.current.settingsTab).toEqual(SettingsTabs.Agent);
+    });
+  });
+
+  describe('switchThemeMode', () => {
+    it('should switch theme mode', () => {
+      const { result } = renderHook(() => useGlobalStore());
+
+      act(() => {
+        result.current.switchThemeMode('light');
+      });
+
+      expect(result.current.settings.themeMode).toEqual('light');
+    });
+  });
+
+  describe('updateDefaultAgent', () => {
+    it('should update default agent settings', () => {
+      const { result } = renderHook(() => useGlobalStore());
+      const updatedAgent: DeepPartial<LobeAgentSettings> = {
+        meta: { title: 'docs' },
+      };
+
+      act(() => {
+        result.current.updateDefaultAgent(updatedAgent);
+      });
+
+      expect(result.current.settings.defaultAgent).toEqual({
+        ...DEFAULT_AGENT,
+        ...updatedAgent,
+      });
+    });
+  });
+});

package/src/store/session/index.ts

@@ -1,3 +1,2 @@
-export * from './hooks';
 export type { SessionStore } from './store';
 export { useSessionStore } from './store';

package/src/store/session/initialState.ts

@@ -10,9 +10,13 @@ export interface SessionState {
    * @description 当前正在编辑或查看的会话
    */
   activeId: string;
-  fetchSessionsLoading: boolean;
   isMobile?: boolean;
   isSearching: boolean;
+  isSessionsFirstFetchFinished: boolean;
+  /**
+   * 后续看看是否可以将 router 部分的逻辑移出去
+   * @deprecated
+   */
   router?: AppRouterInstance;
   searchKeywords: string;
   searchSessions: LobeAgentSession[];
@@ -21,9 +25,9 @@ export interface SessionState {
 
 export const initialState: SessionStoreState = {
   activeId: 'inbox',
-  fetchSessionsLoading: true,
   isMobile: false,
   isSearching: false,
+  isSessionsFirstFetchFinished: false,
   searchKeywords: '',
   searchSessions: [],
   sessions: [],

package/src/store/session/slices/agent/selectors.ts

@@ -78,7 +78,9 @@ const currentAgentMeta = (s: SessionStore): MetaData => {
   const defaultMeta = {
     avatar: isInbox ? DEFAULT_INBOX_AVATAR : DEFAULT_AVATAR,
     backgroundColor: DEFAULT_BACKGROUND_COLOR,
-    description: isInbox ? t('inbox.desc') : currentAgentSystemRole(s) || t('noDescription'),
+    description: isInbox
+      ? t('inbox.desc', { ns: 'chat' })
+      : currentAgentSystemRole(s) || t('noDescription'),
     title: isInbox ? t('inbox.title', { ns: 'chat' }) : t('defaultSession'),
   };
 

package/src/store/session/slices/session/action.ts

@@ -46,10 +46,6 @@ export interface SessionAction {
   duplicateSession: (id: string) => Promise<void>;
   /**
    * Pins or unpins a session.
-   *
-   * @param {string} id - The ID of the session to pin or unpin.
-   * @param {boolean} [pinned] - Optional. If set to true, it pins the session. If set to false or omitted, it unpins the session.
-   * @returns {Promise<void>} A promise that resolves when the session is successfully pinned or unpinned.
    */
   pinSession: (id: string, pinned?: boolean) => Promise<void>;
   /**
@@ -61,7 +57,6 @@ export interface SessionAction {
    * @param id - sessionId
    */
   removeSession: (id: string) => void;
-  switchBackToChat: () => void;
   /**
    * switch session url
    */
@@ -80,7 +75,9 @@ export const createSessionSlice: StateCreator<
   SessionAction
 > = (set, get) => ({
   activeSession: (sessionId) => {
-    set({ activeId: sessionId }, false, n('activeSession'));
+    if (get().activeId === sessionId) return;
+
+    set({ activeId: sessionId }, false, n(`activeSession/${sessionId}`));
   },
 
   clearSessions: async () => {
@@ -121,7 +118,7 @@ export const createSessionSlice: StateCreator<
 
     // duplicate Session Error
     if (!newId) {
-      message.error('复制失败');
+      message.error(t('copyFail', { ns: 'common' }));
       return;
     }
 
@@ -147,30 +144,29 @@ export const createSessionSlice: StateCreator<
       get().switchSession();
     }
   },
-
-  switchBackToChat: () => {
-    const { activeId, router } = get();
-
-    const id = activeId || INBOX_SESSION_ID;
-
-    get().activeSession(id);
-
-    router?.push(SESSION_CHAT_URL(id, get().isMobile));
-  },
   switchSession: (sessionId = INBOX_SESSION_ID) => {
     const { isMobile, router } = get();
 
     get().activeSession(sessionId);
 
+    // TODO: 后续可以把 router 移除
     router?.push(SESSION_CHAT_URL(sessionId, isMobile));
   },
 
   useFetchSessions: () =>
     useSWR<LobeSessions>(FETCH_SESSIONS_KEY, sessionService.getSessions, {
       onSuccess: (data) => {
+        // 由于 https://github.com/lobehub/lobe-chat/pull/541 的关系
+        // 只有触发了 refreshSessions 才会更新 sessions，进而触发页面 rerender
+        // 因此这里不能补充判断，否则会导致页面不更新
+        // TODO：后续的根本解法应该是解除 inbox 和 session 的数据耦合
+        // 避免互相依赖的情况出现
+
+        // if (get().isSessionsFirstFetchFinished && isEqual(get().sessions, data)) return;
+
         set(
           {
-            fetchSessionsLoading: false,
+            isSessionsFirstFetchFinished: true,
             sessions: data,
           },
           false,

package/src/store/session/slices/session/selectors/list.ts

@@ -49,6 +49,11 @@ const hasCustomAgents = (s: SessionStore) => defaultSessions(s).length > 0;
 
 const isInboxSession = (s: SessionStore) => s.activeId === INBOX_SESSION_ID;
 
+const isSessionListInit = (s: SessionStore) => s.isSessionsFirstFetchFinished;
+
+// use to judge whether a session is fully activated
+const isSomeSessionActive = (s: SessionStore) => !!s.activeId && isSessionListInit(s);
+
 export const sessionSelectors = {
   currentSession,
   currentSessionSafe,
@@ -57,6 +62,8 @@ export const sessionSelectors = {
   hasCustomAgents,
   hasPinnedSessionList,
   isInboxSession,
+  isSessionListInit,
+  isSomeSessionActive,
   pinnedSessionList,
   searchSessions,
   unpinnedSessionList,

package/src/store/session/store.ts

@@ -1,13 +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 { isInStandaloneMode } from '@/utils/matchMedia';
-import { isMobileScreen } from '@/utils/screen';
 
-import { createHyperStorage } from '../middleware/createHyperStorage';
 import { SessionStoreState, initialState } from './initialState';
 import { AgentAction, createAgentSlice } from './slices/agent/action';
 import { SessionAction, createSessionSlice } from './slices/session/action';
@@ -21,51 +18,13 @@ const createStore: StateCreator<SessionStore, [['zustand/devtools', never]]> = (
   ...createSessionSlice(...parameters),
 });
 
-//  ===============  persist 本地缓存中间件配置 ============ //
-
-const persistOptions: PersistOptions<SessionStore> = {
-  name: 'LOBE_CHAT',
-
-  // 手动控制 Hydration ，避免 ssr 报错
-  skipHydration: true,
-
-  storage: createHyperStorage(() => {
-    const isMobileAndPWA = isMobileScreen() && isInStandaloneMode();
-
-    const selectors = [
-      // map state key to storage key
-      { activeId: 'session' },
-    ];
-
-    if (isMobileAndPWA)
-      return {
-        localStorage: {
-          selectors,
-        },
-      };
-
-    return {
-      localStorage: false,
-      url: {
-        mode: 'hash',
-        selectors,
-      },
-    };
-  }),
-
-  version: 2,
-};
-
 //  ===============  实装 useStore ============ //
 
 export const useSessionStore = createWithEqualityFn<SessionStore>()(
-  persist(
-    subscribeWithSelector(
-      devtools(createStore, {
-        name: 'LobeChat_Session' + (isDev ? '_DEV' : ''),
-      }),
-    ),
-    persistOptions,
+  subscribeWithSelector(
+    devtools(createStore, {
+      name: 'LobeChat_Session' + (isDev ? '_DEV' : ''),
+    }),
   ),
   shallow,
 );

package/src/styles/global.ts

@@ -8,7 +8,7 @@ export default ({ prefixCls }: { prefixCls: string }) => css`
     position: relative;
     overscroll-behavior: none;
     height: 100% !important;
-    min-height: 100% !important;
+    max-height: 100dvh !important;
 
     ::-webkit-scrollbar {
       display: none;

package/src/app/chat/(mobile)/layout.mobile.tsx

@@ -1,17 +0,0 @@
-'use client';
-
-import { PropsWithChildren, memo } from 'react';
-
-import SessionHeader from '@/app/chat/(mobile)/features/SessionHeader';
-import AppLayoutMobile from '@/layout/AppLayout.mobile';
-import { useSwitchSideBarOnInit } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/initialState';
-
-export default memo(({ children }: PropsWithChildren) => {
-  useSwitchSideBarOnInit(SidebarTabKey.Chat);
-  return (
-    <AppLayoutMobile navBar={<SessionHeader />} showTabBar>
-      {children}
-    </AppLayoutMobile>
-  );
-});

package/src/app/chat/(mobile)/mobile/index.tsx

@@ -1,30 +0,0 @@
-'use client';
-
-import dynamic from 'next/dynamic';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import Conversation from '@/features/Conversation';
-import { useSessionStore } from '@/store/session';
-
-import ChatInput from '../features/ChatInput';
-import Layout from './layout.mobile';
-
-const TopicList = dynamic(() => import('../features/TopicList'));
-
-const Chat = memo(() => {
-  // due to mobile side don't have sessionList, so we need to fetch sessions here
-  // refs: https://github.com/lobehub/lobe-chat/pull/541
-  const useFetchSessions = useSessionStore((s) => s.useFetchSessions);
-  useFetchSessions();
-
-  return (
-    <Layout>
-      <Flexbox height={'calc(100% - 44px)'} horizontal>
-        <Conversation chatInput={<ChatInput />} mobile />
-        <TopicList />
-      </Flexbox>
-    </Layout>
-  );
-});
-export default Chat;

package/src/app/chat/(mobile)/mobile/layout.mobile.tsx

@@ -1,11 +0,0 @@
-'use client';
-
-import { PropsWithChildren } from 'react';
-
-import AppLayoutMobile from '@/layout/AppLayout.mobile';
-
-import ChatHeader from '../features/ChatHeader';
-
-export default ({ children }: PropsWithChildren) => (
-  <AppLayoutMobile navBar={<ChatHeader />}>{children}</AppLayoutMobile>
-);

package/src/store/session/hooks/index.ts

@@ -1,4 +0,0 @@
-export * from './useEffectAfterHydrated';
-export * from './useOnFinishHydrationSession';
-export * from './useSessionChatInit';
-export * from './useSessionHydrated';

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

@@ -1,27 +0,0 @@
-import { useEffect } from 'react';
-
-import { SessionStore, useSessionStore } from '../store';
-
-export const useEffectAfterSessionHydrated = (
-  fn: (session: typeof useSessionStore, store: SessionStore) => void,
-  deps: any[] = [],
-) => {
-  // const hasTrigger = useRef(false);
-  useEffect(() => {
-    const hasRehydrated = useSessionStore.persist.hasHydrated();
-
-    if (hasRehydrated) {
-      // equal useEffect triggered multi-time
-      fn(useSessionStore, useSessionStore.getState());
-    } else {
-      // keep onFinishHydration just are triggered only once
-      // if (hasTrigger.current) return;
-      //
-      // hasTrigger.current = true;
-      // equal useEffect first trigger
-      useSessionStore.persist.onFinishHydration(() => {
-        fn(useSessionStore, useSessionStore.getState());
-      });
-    }
-  }, deps);
-};

package/src/store/session/hooks/useOnFinishHydrationSession.ts

@@ -1,19 +0,0 @@
-import { useEffect } from 'react';
-import { StoreApi, UseBoundStore } from 'zustand';
-
-import { SessionStore, useSessionStore } from '../store';
-
-/**
- * 当 Session 水合完毕后才会执行的 useEffect
- * @param fn
- */
-export const useOnFinishHydrationSession = (
-  fn: (state: SessionStore, store: UseBoundStore<StoreApi<SessionStore>>) => void,
-) => {
-  useEffect(() => {
-    // 只有当水合完毕后再开始做操作
-    useSessionStore.persist.onFinishHydration(() => {
-      fn(useSessionStore.getState(), useSessionStore);
-    });
-  }, []);
-};

package/src/store/session/hooks/useSessionChatInit.ts

@@ -1,12 +0,0 @@
-import { useSessionStore } from '../store';
-import { useSessionHydrated } from './useSessionHydrated';
-
-/**
- * 用于判断某个会话是否完全被激活
- */
-export const useSessionChatInit = () => {
-  const sessionHydrated = useSessionHydrated();
-  const [hasActive] = useSessionStore((s) => [!!s.activeId]);
-
-  return sessionHydrated && hasActive;
-};

package/src/store/session/hooks/useSessionHydrated.ts

@@ -1,13 +0,0 @@
-import { useSessionStore } from '../store';
-
-export const useSessionHydrated = () => {
-  const [fetchSessionsLoading, useFetchSessions] = useSessionStore((s) => [
-    s.fetchSessionsLoading,
-
-    s.useFetchSessions,
-  ]);
-
-  const { isLoading } = useFetchSessions();
-
-  return !(isLoading || fetchSessionsLoading);
-};