@lobehub/chat 0.71.0 → 0.71.1

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.71.1](https://github.com/lobehub/lobe-chat/compare/v0.71.0...v0.71.1)
+
+<sup>Released on **2023-09-09**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix mobile route.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix mobile route, closes [#165](https://github.com/lobehub/lobe-chat/issues/165) ([d5e03b6](https://github.com/lobehub/lobe-chat/commit/d5e03b6))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.71.0](https://github.com/lobehub/lobe-chat/compare/v0.70.4...v0.71.0)
 
 <sup>Released on **2023-09-09**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.71.0",
+  "version": "0.71.1",
   "description": "Lobe Chat is an open-source chatbot client using Vercel AI SDK, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/src/layout/AppMobileLayout.tsx

@@ -6,7 +6,6 @@ import { Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import MobileTabBar from '@/features/MobileTabBar';
-import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
 
 const useStyles = createStyles(({ css, cx, stylish }) => ({
   container: cx(
@@ -49,10 +48,6 @@ const AppMobileLayout = memo<AppMobileLayoutProps>(
   ({ children, showTabBar, navBar, style, className }) => {
     const { styles, cx } = useStyles();
 
-    useOnFinishHydrationSession(() => {
-      useSessionStore.setState({ isMobile: true });
-    }, []);
-
     return (
       <>
         <Head>

package/src/pages/chat/index.page.tsx

@@ -4,6 +4,7 @@ import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { useSessionStore } from '@/store/session';
+import { useEffectAfterSessionHydrated } from '@/store/session/hooks';
 import { agentSelectors } from '@/store/session/selectors';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
@@ -22,6 +23,13 @@ const Chat = memo(() => {
   const pageTitle = genSiteHeadTitle([avatar, title].filter(Boolean).join(' '));
   const RenderLayout = mobile ? MobileLayout : DesktopLayout;
 
+  useEffectAfterSessionHydrated(
+    (store) => {
+      store.setState({ isMobile: mobile });
+    },
+    [mobile],
+  );
+
   return (
     <>
       <Head>

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

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

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

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+
+import { useSessionStore } from '../store';
+
+export const useEffectAfterSessionHydrated = (
+  fn: (session: typeof useSessionStore) => void,
+  deps: any[] = [],
+) => {
+  useEffect(() => {
+    const hasRehydrated = useSessionStore.persist.hasHydrated();
+
+    if (hasRehydrated) {
+      // 等价 useEffect 多次触发
+      fn(useSessionStore);
+    } else {
+      // 等价于 useEffect 第一次触发
+      useSessionStore.persist.onFinishHydration(() => {
+        fn(useSessionStore);
+      });
+    }
+  }, deps);
+};

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

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

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

@@ -1,6 +1,7 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { useSessionStore } from '../store';
+import { useOnFinishHydrationSession } from './useOnFinishHydrationSession';
 
 export const useSessionHydrated = () => {
   // 根据 sessions 是否有值来判断是否已经初始化
@@ -8,11 +9,9 @@ export const useSessionHydrated = () => {
 
   const [isInit, setInit] = useState(hasInited);
 
-  useEffect(() => {
-    useSessionStore.persist.onFinishHydration(() => {
-      if (!isInit) setInit(true);
-    });
-  }, []);
+  useOnFinishHydrationSession(() => {
+    if (!isInit) setInit(true);
+  });
 
   return isInit;
 };