@lobehub/chat 0.142.4 → 0.142.5

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 # Changelog
 
+### [Version 0.142.5](https://github.com/lobehub/lobe-chat/compare/v0.142.4...v0.142.5)
+
+<sup>Released on **2024-03-26**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix mobile click, fix mobile click issue.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix mobile click ([3775b28](https://github.com/lobehub/lobe-chat/commit/3775b28))
+- **misc**: Fix mobile click issue, closes [#1744](https://github.com/lobehub/lobe-chat/issues/1744) ([a6b1234](https://github.com/lobehub/lobe-chat/commit/a6b1234))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.142.4](https://github.com/lobehub/lobe-chat/compare/v0.142.3...v0.142.4)
 
 <sup>Released on **2024-03-26**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.142.4",
+  "version": "0.142.5",
   "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/chat/(mobile)/mobile/page.tsx

@@ -7,6 +7,7 @@ import { Flexbox } from 'react-layout-kit';
 import Conversation from '@/features/Conversation';
 import { useSessionStore } from '@/store/session';
 
+import SessionHydration from '../../components/SessionHydration';
 import TelemetryNotification from '../../features/TelemetryNotification';
 import ChatInput from '../features/ChatInput';
 import ChatHeader from './ChatHeader';
@@ -27,6 +28,7 @@ const Chat = memo(() => {
         <TopicList />
         <TelemetryNotification mobile />
       </Flexbox>
+      <SessionHydration />
     </>
   );
 });

package/src/app/chat/components/SessionHydration/index.tsx

@@ -1,9 +1,8 @@
 'use client';
 
 import { useResponsive } from 'antd-style';
-import { useRouter } from 'next/navigation';
 import { useQueryState } from 'nuqs';
-import { parseAsString } from 'nuqs/parsers';
+import { parseAsString } from 'nuqs/server';
 import { memo, useEffect } from 'react';
 import { createStoreUpdater } from 'zustand-utils';
 
@@ -16,10 +15,6 @@ const SessionHydration = memo(() => {
   const { mobile } = useResponsive();
   useStoreUpdater('isMobile', mobile);
 
-  const router = useRouter();
-  // TODO: 后续可以把 router 从 useSessionStore 移除
-  useStoreUpdater('router', router);
-
   // two-way bindings the url and session store
   const [session, setSession] = useQueryState(
     'session',

package/src/app/chat/features/SessionListContent/Inbox/index.tsx

@@ -1,4 +1,3 @@
-import { useResponsive } from 'antd-style';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -6,24 +5,18 @@ import { useTranslation } from 'react-i18next';
 import { DEFAULT_INBOX_AVATAR } from '@/const/meta';
 import { INBOX_SESSION_ID } from '@/const/session';
 import { SESSION_CHAT_URL } from '@/const/url';
+import { useIsMobile } from '@/hooks/useIsMobile';
 import { useSessionStore } from '@/store/session';
 
 import ListItem from '../ListItem';
 
 const Inbox = memo(() => {
   const { t } = useTranslation('chat');
-  const { mobile } = useResponsive();
-  const [activeId, switchSession] = useSessionStore((s) => [s.activeId, s.switchSession]);
+  const mobile = useIsMobile();
+  const activeId = useSessionStore((s) => s.activeId);
 
   return (
-    <Link
-      aria-label={t('inbox.title')}
-      href={SESSION_CHAT_URL(INBOX_SESSION_ID, mobile)}
-      onClick={(e) => {
-        e.preventDefault();
-        switchSession(INBOX_SESSION_ID);
-      }}
-    >
+    <Link aria-label={t('inbox.title')} href={SESSION_CHAT_URL(INBOX_SESSION_ID, mobile)}>
       <ListItem
         active={activeId === INBOX_SESSION_ID}
         avatar={DEFAULT_INBOX_AVATAR}

package/src/app/chat/features/SessionListContent/List/index.tsx

@@ -24,11 +24,7 @@ interface SessionListProps {
   showAddButton?: boolean;
 }
 const SessionList = memo<SessionListProps>(({ dataSource, groupId, showAddButton = true }) => {
-  const [activeSession, switchSession, isInit] = useSessionStore((s) => [
-    s.activeSession,
-    s.switchSession,
-    sessionSelectors.isSessionListInit(s),
-  ]);
+  const isInit = useSessionStore((s) => sessionSelectors.isSessionListInit(s));
   const { styles } = useStyles();
 
   const { mobile } = useResponsive();
@@ -38,15 +34,7 @@ const SessionList = memo<SessionListProps>(({ dataSource, groupId, showAddButton
   ) : dataSource.length > 0 ? (
     dataSource.map(({ id }) => (
       <LazyLoad className={styles} key={id}>
-        <Link
-          aria-label={id}
-          href={SESSION_CHAT_URL(id, mobile)}
-          onClick={(e) => {
-            e.preventDefault();
-            if (mobile) switchSession(id);
-            else activeSession(id);
-          }}
-        >
+        <Link aria-label={id} href={SESSION_CHAT_URL(id, mobile)}>
           <SessionItem id={id} />
         </Link>
       </LazyLoad>

package/src/app/home/Redirect.tsx

@@ -5,7 +5,6 @@ import { memo, useEffect } from 'react';
 
 import { messageService } from '@/services/message';
 import { sessionService } from '@/services/session';
-import { useSessionStore } from '@/store/session';
 
 const checkHasConversation = async () => {
   const hasMessages = await messageService.hasMessages();
@@ -15,14 +14,11 @@ const checkHasConversation = async () => {
 
 const Redirect = memo(() => {
   const router = useRouter();
-  const [switchSession] = useSessionStore((s) => [s.switchSession]);
 
   useEffect(() => {
     checkHasConversation().then((hasData) => {
       if (hasData) {
         router.replace('/chat');
-
-        switchSession();
       } else {
         router.replace('/welcome');
       }

package/src/app/settings/_layout/Desktop/index.tsx

@@ -14,7 +14,7 @@ const Desktop = memo<PropsWithChildren>(({ children }) => (
     <SideBar />
     <Flexbox flex={1} height={'100%'} style={{ position: 'relative' }}>
       <Header />
-      <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'scroll' }}>
+      <Flexbox align={'center'} flex={1} padding={24} style={{ overflowY: 'scroll' }}>
         <SafeSpacing />
         <Center gap={16} width={'100%'}>
           {children}

package/src/app/welcome/features/Banner/index.tsx

@@ -10,7 +10,6 @@ import { Flexbox } from 'react-layout-kit';
 
 import DataImporter from '@/features/DataImporter';
 import { useGlobalStore } from '@/store/global';
-import { useSessionStore } from '@/store/session';
 
 import Hero from './Hero';
 import { useStyles } from './style';
@@ -19,7 +18,6 @@ const Banner = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('welcome');
   const router = useRouter();
   const { styles } = useStyles();
-  const [switchSession] = useSessionStore((s) => [s.switchSession]);
   const [switchBackToChat, isMobile] = useGlobalStore((s) => [s.switchBackToChat, s.isMobile]);
 
   return (
@@ -36,7 +34,7 @@ const Banner = memo<{ mobile?: boolean }>(({ mobile }) => {
       >
         <DataImporter
           onFinishImport={() => {
-            switchSession();
+            router.push('/chat');
           }}
         >
           <Button block={mobile} size={'large'}>

package/src/hooks/useIsMobile.ts

@@ -1,7 +1,8 @@
 import { useResponsive } from 'antd-style';
+import { useMemo } from 'react';
 
 export const useIsMobile = (): boolean => {
   const { mobile } = useResponsive();
 
-  return !!mobile;
+  return useMemo(() => !!mobile, [mobile]);
 };

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

@@ -31,9 +31,6 @@ beforeEach(() => {
   vi.clearAllMocks();
   useSessionStore.setState({
     refreshSessions: mockRefresh,
-    router: {
-      push: mockRouterPush,
-    } as unknown as AppRouterInstance,
   });
 });
 
@@ -72,9 +69,6 @@ describe('SessionAction', () => {
       expect(call[1]).toMatchObject({ config: { displayMode: 'docs' } });
 
       expect(createdSessionId).toBe(newSessionId);
-      expect(mockRouterPush).toHaveBeenCalledWith(
-        SESSION_CHAT_URL(newSessionId, result.current.isMobile),
-      );
     });
 
     it('should create a new session but not switch to it if isSwitchSession is false', async () => {
@@ -131,35 +125,6 @@ describe('SessionAction', () => {
     });
   });
 
-  describe('switchSession', () => {
-    it('should switch to the provided session id', async () => {
-      const { result } = renderHook(() => useSessionStore());
-      const sessionId = 'session-id';
-
-      act(() => {
-        result.current.switchSession(sessionId);
-      });
-
-      expect(result.current.activeId).toBe(sessionId);
-      expect(mockRouterPush).toHaveBeenCalledWith(
-        SESSION_CHAT_URL(sessionId, result.current.isMobile),
-      );
-    });
-
-    it('should switch to the inbox session id if none is provided', async () => {
-      const { result } = renderHook(() => useSessionStore());
-
-      act(() => {
-        result.current.switchSession();
-      });
-
-      expect(result.current.activeId).toBe(INBOX_SESSION_ID);
-      expect(mockRouterPush).toHaveBeenCalledWith(
-        SESSION_CHAT_URL(INBOX_SESSION_ID, result.current.isMobile),
-      );
-    });
-  });
-
   describe('activeSession', () => {
     it('should set the provided session id as active', async () => {
       const { result } = renderHook(() => useSessionStore());

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

@@ -5,7 +5,6 @@ import { DeepPartial } from 'utility-types';
 import { StateCreator } from 'zustand/vanilla';
 
 import { INBOX_SESSION_ID } from '@/const/session';
-import { SESSION_CHAT_URL } from '@/const/url';
 import { useClientDataSWR } from '@/libs/swr';
 import { sessionService } from '@/services/session';
 import { useGlobalStore } from '@/store/global';
@@ -56,10 +55,6 @@ export interface SessionAction {
    * @param id - sessionId
    */
   removeSession: (id: string) => void;
-  /**
-   * switch session url
-   */
-  switchSession: (sessionId?: string) => void;
   /**
    * A custom hook that uses SWR to fetch sessions data.
    */
@@ -86,9 +81,9 @@ export const createSessionSlice: StateCreator<
   },
 
   createSession: async (agent, isSwitchSession = true) => {
-    const { switchSession, refreshSessions } = get();
+    const { activeSession, refreshSessions } = get();
 
-    // 合并 settings 里的 defaultAgent
+    // merge the defaultAgent in settings
     const defaultAgent = merge(
       initLobeSession,
       settingsSelectors.defaultAgent(useGlobalStore.getState()),
@@ -99,14 +94,14 @@ export const createSessionSlice: StateCreator<
     const id = await sessionService.createNewSession(LobeSessionType.Agent, newSession);
     await refreshSessions();
 
-    // 创建后是否跳转到对应会话，默认跳转
-    if (isSwitchSession) switchSession(id);
+    // Whether to goto  to the new session after creation, the default is to switch to
+    if (isSwitchSession) activeSession(id);
 
     return id;
   },
 
   duplicateSession: async (id) => {
-    const { switchSession, refreshSessions } = get();
+    const { activeSession, refreshSessions } = get();
     const session = sessionSelectors.getSessionById(id)(get());
 
     if (!session) return;
@@ -123,7 +118,7 @@ export const createSessionSlice: StateCreator<
     }
 
     await refreshSessions();
-    switchSession(newId);
+    activeSession(newId);
   },
 
   pinSession: async (sessionId, pinned) => {
@@ -140,20 +135,12 @@ export const createSessionSlice: StateCreator<
     await sessionService.removeSession(sessionId);
     await get().refreshSessions();
 
+    // If the active session deleted, switch to the inbox session
     if (sessionId === get().activeId) {
-      get().switchSession();
+      get().activeSession(INBOX_SESSION_ID);
     }
   },
 
-  switchSession: (sessionId = INBOX_SESSION_ID) => {
-    const { isMobile, router } = get();
-
-    get().activeSession(sessionId);
-
-    // TODO: 后续可以把 router 移除
-    router?.push(SESSION_CHAT_URL(sessionId, isMobile));
-  },
-
   useFetchSessions: () =>
     useClientDataSWR<ChatSessionList>(FETCH_SESSIONS_KEY, sessionService.getSessionsWithGroup, {
       onSuccess: (data) => {

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

@@ -1,5 +1,3 @@
-import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
-
 import { DEFAULT_AGENT_META } from '@/const/meta';
 import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
 import { CustomSessionGroup, LobeAgentSession, LobeSessionType } from '@/types/session';
@@ -25,11 +23,6 @@ export interface SessionState {
   isSearching: boolean;
   isSessionsFirstFetchFinished: boolean;
   pinnedSessions: LobeAgentSession[];
-  /**
-   * 后续看看是否可以将 router 部分的逻辑移出去
-   * @deprecated
-   */
-  router?: AppRouterInstance;
   searchKeywords: string;
   searchSessions: LobeAgentSession[];
   /**