@lobehub/chat 0.70.4 → 0.71.1

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # 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>
+
+#### ✨ Features
+
+- **misc**: Migrate localStorage to indexedDB.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Migrate localStorage to indexedDB, closes [#160](https://github.com/lobehub/lobe-chat/issues/160) ([7f96deb](https://github.com/lobehub/lobe-chat/commit/7f96deb))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.70.4](https://github.com/lobehub/lobe-chat/compare/v0.70.3...v0.70.4)
 
 <sup>Released on **2023-09-09**</sup>

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.70.4",
-  "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
+  "version": "0.71.1",
+  "description": "Lobe Chat is an open-source chatbot client using Vercel AI SDK, Typescript and Next.js",
   "keywords": [
     "chatbot",
     "ChatGPT",
-    "LangChain",
+    "LobeHub",
     "typescript",
-    "Next.js"
+    "Vercel AI SDK",
+    "Next.js",
+    "OpenAI"
   ],
   "homepage": "https://github.com/lobehub/lobe-chat",
   "bugs": {
@@ -80,12 +82,13 @@
     "fast-deep-equal": "^3",
     "gpt-tokenizer": "^2",
     "i18next": "^23",
+    "idb-keyval": "^6",
     "immer": "^10",
     "lodash-es": "^4",
     "lucide-react": "latest",
     "nanoid": "^4",
     "next": "13.4.7",
-    "openai": "^4.4.0",
+    "openai": "^4.5.0",
     "polished": "^4",
     "react": "^18",
     "react-dom": "^18",

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/global/hooks/useHydrated.ts

@@ -9,11 +9,9 @@ export const useGlobalHydrated = () => {
   const [isInit, setInit] = useState(hasInited);
 
   useEffect(() => {
-    const hasRehydrated = useGlobalStore.persist.hasHydrated();
-
-    if (hasRehydrated && !isInit) {
-      setInit(true);
-    }
+    useGlobalStore.persist.onFinishHydration(() => {
+      if (!isInit) setInit(true);
+    });
   }, []);
 
   return isInit;

package/src/store/global/hooks/useOnFinishHydrationGlobal.ts

@@ -9,10 +9,8 @@ import { GlobalStore, useGlobalStore } from '../store';
  */
 export const useOnFinishHydrationGlobal = (fn: (state: GlobalStore) => void, deps: any[] = []) => {
   useEffect(() => {
-    const hasRehydrated = useGlobalStore.persist.hasHydrated();
-    // 只有当水合完毕后再开始做操作
-    if (!hasRehydrated) return;
-
-    fn(useGlobalStore.getState());
+    useGlobalStore.persist.onFinishHydration(() => {
+      fn(useGlobalStore.getState());
+    });
   }, deps);
 };

package/src/store/middleware/createHyperStorage/index.ts

@@ -1,28 +1,40 @@
-import { isEmpty } from 'lodash-es';
 import { PersistStorage } from 'zustand/middleware';
 import { StorageValue } from 'zustand/middleware/persist';
 
+import { createIndexedDB } from './indexedDB';
 import { createKeyMapper } from './keyMapper';
+import { createLocalStorage } from './localStorage';
 import { HyperStorageOptions } from './type';
-import { createUrlSearch } from './urlSearch';
+import { creatUrlStorage } from './urlStorage';
 
 export const createHyperStorage = <T extends object>(
   options: HyperStorageOptions,
 ): PersistStorage<T> => {
   const hasUrl = !!options.url;
-
-  const { setUrlSearch, getUrlSearch } = createUrlSearch(options.url?.mode);
+  const useIndexedDB = options.localStorage?.mode === 'indexedDB';
+  const dbName = options.localStorage?.dbName || 'indexedDB';
 
   const { mapStateKeyToStorageKey, getStateKeyFromStorageKey } = createKeyMapper(options);
 
+  const indexedDB = createIndexedDB(dbName);
+  const localStorage = createLocalStorage();
+  const urlStorage = creatUrlStorage(options.url?.mode);
   return {
-    getItem: (name): StorageValue<T> => {
+    getItem: async (name): Promise<StorageValue<T>> => {
       const state: any = {};
       let version: number | undefined;
+
       // ============== 处理 Local Storage  ============== //
-      const string = localStorage.getItem(name);
-      if (string) {
-        const localState: StorageValue<T> = JSON.parse(string);
+      let localState: StorageValue<T> | undefined;
+
+      // 如果使用 indexedDB，优先从 indexedDB 中获取
+      if (useIndexedDB) {
+        localState = await indexedDB.getItem(name);
+      }
+      // 如果 indexedDB 中不存在，则再试试 localStorage
+      if (!localState) localState = localStorage.getItem(name);
+
+      if (localState) {
         version = localState.version;
         for (const [k, v] of Object.entries(localState.state)) {
           const key = getStateKeyFromStorageKey(k, 'localStorage');
@@ -33,31 +45,39 @@ export const createHyperStorage = <T extends object>(
       // ============== 处理 URL Storage  ============== //
       // 不从 URL 中获取 version，由于 url 状态是临时态 不作为版本控制的依据
       if (hasUrl) {
-        const searchParameters = new URLSearchParams(getUrlSearch());
-
-        for (const [k, v] of searchParameters.entries()) {
-          const key = getStateKeyFromStorageKey(k, 'url');
-          // 当存在 UrlSelector 逻辑，且 key 有效时，才将状态加入终态 state
-          if (hasUrl && key) {
-            state[key] = v;
+        const urlState = urlStorage.getItem();
+
+        if (urlState) {
+          for (const [k, v] of Object.entries(urlState.state)) {
+            const key = getStateKeyFromStorageKey(k, 'url');
+            // 当存在 UrlSelector 逻辑，且 key 有效时，才将状态加入终态 state
+            if (hasUrl && key) {
+              state[key] = v;
+            }
           }
         }
       }
 
       return { state, version };
     },
-    removeItem: (key): void => {
+    removeItem: async (key) => {
+      // ============== 处理 Local Storage  ============== //
+
+      if (useIndexedDB) {
+        await indexedDB.removeItem(key);
+      } else {
+        localStorage.removeItem(key);
+      }
+
       // ============== 处理 URL Storage  ============== //
       if (hasUrl) {
-        const searchParameters = new URLSearchParams(getUrlSearch());
-
         const storageKey = getStateKeyFromStorageKey(key, 'url');
-        if (storageKey) searchParameters.delete(storageKey);
 
-        setUrlSearch(searchParameters);
+        urlStorage.removeItem(storageKey);
       }
     },
-    setItem: (name, newValue) => {
+
+    setItem: async (name, newValue) => {
       // ============== 处理 Local Storage  ============== //
       const localState: Record<string, any> = {};
       for (const [k, v] of Object.entries(newValue.state)) {
@@ -65,30 +85,24 @@ export const createHyperStorage = <T extends object>(
         if (localKey) localState[localKey] = v;
       }
 
-      localStorage.setItem(name, JSON.stringify({ ...newValue, state: localState }));
+      if (useIndexedDB) {
+        await indexedDB.setItem(name, localState, newValue.version);
+      } else {
+        localStorage.setItem(name, localState, newValue.version);
+      }
 
       // ============== 处理 URL Storage  ============== //
       if (hasUrl) {
-        const searchParameters = new URLSearchParams(getUrlSearch());
-
-        for (const [k, v] of Object.entries(newValue.state)) {
-          const urlKey = mapStateKeyToStorageKey(k, 'url');
-
-          if (!urlKey) continue;
-
-          if (isEmpty(v)) {
-            searchParameters.delete(urlKey);
-            continue;
-          }
-
-          if (typeof v === 'string') {
-            searchParameters.set(urlKey, v);
-          } else {
-            searchParameters.set(urlKey, JSON.stringify(v));
-          }
-        }
-
-        setUrlSearch(searchParameters);
+        // 转换 key 为目标 key
+        const finalEntries = Object.entries(newValue.state)
+          .map(([k, v]) => {
+            const urlKey = mapStateKeyToStorageKey(k, 'url');
+            if (!urlKey) return undefined;
+            return [urlKey, v];
+          })
+          .filter(Boolean) as [string, any][];
+
+        urlStorage.setItem(name, Object.fromEntries(finalEntries));
       }
     },
   };

package/src/store/middleware/createHyperStorage/indexedDB.ts

@@ -0,0 +1,26 @@
+import { createStore, delMany, getMany, setMany } from 'idb-keyval';
+import { StorageValue } from 'zustand/middleware/persist';
+
+export const createIndexedDB = <State extends any>(dbName: string = 'indexedDB') => ({
+  getItem: async <T extends State>(name: string): Promise<StorageValue<T> | undefined> => {
+    const [version, state] = await getMany(['version', 'state'], createStore(dbName, name));
+
+    if (!state) return undefined;
+
+    return { state, version };
+  },
+  removeItem: async (name: string) => {
+    await delMany(['version', 'state'], createStore(dbName, name));
+  },
+  setItem: async (name: string, state: any, version: number | undefined) => {
+    const store = createStore(dbName, name);
+
+    await setMany(
+      [
+        ['version', version],
+        ['state', state],
+      ],
+      store,
+    );
+  },
+});

package/src/store/middleware/createHyperStorage/localStorage.ts

@@ -0,0 +1,17 @@
+import { StorageValue } from 'zustand/middleware/persist';
+
+export const createLocalStorage = <State extends any>() => ({
+  getItem: <T extends State>(name: string): StorageValue<T> | undefined => {
+    const string = localStorage.getItem(name);
+
+    if (string) return JSON.parse(string) as StorageValue<T>;
+
+    return undefined;
+  },
+  removeItem: (name: string) => {
+    localStorage.removeItem(name);
+  },
+  setItem: <T extends State>(name: string, state: T, version: number | undefined) => {
+    localStorage.setItem(name, JSON.stringify({ state, version }));
+  },
+});

package/src/store/middleware/createHyperStorage/type.ts

@@ -2,6 +2,11 @@ export type StorageSelector = string | Record<string, string>;
 
 export interface HyperStorageOptions {
   localStorage?: {
+    dbName?: string;
+    /**
+     * @default 'localStorage'
+     */
+    mode?: 'indexedDB' | 'localStorage';
     selectors: StorageSelector[];
   };
   url?: {

package/src/store/middleware/createHyperStorage/urlStorage.ts

@@ -0,0 +1,60 @@
+import { isEmpty } from 'lodash-es';
+import { StorageValue } from 'zustand/middleware/persist';
+
+interface UrlSearchHelper {
+  getUrlSearch: () => string;
+  setUrlSearch: (params: URLSearchParams) => void;
+}
+
+const createUrlSearch = (mode: 'search' | 'hash' = 'hash'): UrlSearchHelper => {
+  if (mode === 'hash')
+    return {
+      getUrlSearch: () => location.hash.slice(1),
+      setUrlSearch: (params: URLSearchParams) => (location.hash = params.toString()),
+    };
+
+  return {
+    getUrlSearch: () => location.search.slice(1),
+    setUrlSearch: (params: URLSearchParams) => (location.search = params.toString()),
+  };
+};
+
+export const creatUrlStorage = <State extends object>(mode: 'hash' | 'search' = 'hash') => {
+  const { setUrlSearch, getUrlSearch } = createUrlSearch(mode);
+
+  return {
+    getItem: <T extends State>(): StorageValue<T> | undefined => {
+      const searchParameters = new URLSearchParams(getUrlSearch());
+
+      if (searchParameters.size === 0) return undefined;
+
+      const state = Object.fromEntries(searchParameters.entries()) as T;
+
+      return { state };
+    },
+    removeItem: (key?: string) => {
+      const searchParameters = new URLSearchParams(getUrlSearch());
+      if (key) searchParameters.delete(key);
+
+      setUrlSearch(searchParameters);
+    },
+    setItem: <T extends State>(name: string, state: T) => {
+      const searchParameters = new URLSearchParams(getUrlSearch());
+
+      for (const [urlKey, v] of Object.entries(state)) {
+        if (isEmpty(v)) {
+          searchParameters.delete(urlKey);
+          continue;
+        }
+
+        if (typeof v === 'string') {
+          searchParameters.set(urlKey, v);
+        } else {
+          searchParameters.set(urlKey, JSON.stringify(v));
+        }
+      }
+
+      setUrlSearch(searchParameters);
+    },
+  };
+};

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,17 +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(() => {
-    const hasRehydrated = useSessionStore.persist.hasHydrated();
     // 只有当水合完毕后再开始做操作
-    if (!hasRehydrated) return;
-
-    fn(useSessionStore.getState());
-  }, deps);
+    useSessionStore.persist.onFinishHydration(() => {
+      fn(useSessionStore.getState());
+    });
+  }, []);
 };

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

@@ -1,19 +1,17 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { useSessionStore } from '../store';
+import { useOnFinishHydrationSession } from './useOnFinishHydrationSession';
 
 export const useSessionHydrated = () => {
   // 根据 sessions 是否有值来判断是否已经初始化
   const hasInited = !!Object.values(useSessionStore.getState().sessions).length;
-  const [isInit, setInit] = useState(hasInited);
 
-  useEffect(() => {
-    const hasRehydrated = useSessionStore.persist.hasHydrated();
+  const [isInit, setInit] = useState(hasInited);
 
-    if (hasRehydrated && !isInit) {
-      setInit(true);
-    }
-  }, []);
+  useOnFinishHydrationSession(() => {
+    if (!isInit) setInit(true);
+  });
 
   return isInit;
 };

package/src/store/session/store.ts

@@ -33,6 +33,8 @@ const persistOptions: PersistOptions<SessionStore> = {
 
   storage: createHyperStorage({
     localStorage: {
+      dbName: 'LobeHub',
+      mode: 'indexedDB',
       selectors: ['inbox', 'sessions'],
     },
     url: {

package/src/store/middleware/createHyperStorage/urlSearch.ts

@@ -1,17 +0,0 @@
-interface UrlSearchHelper {
-  getUrlSearch: () => string;
-  setUrlSearch: (params: URLSearchParams) => void;
-}
-
-export const createUrlSearch = (mode: 'search' | 'hash' = 'hash'): UrlSearchHelper => {
-  if (mode === 'hash')
-    return {
-      getUrlSearch: () => location.hash.slice(1),
-      setUrlSearch: (params: URLSearchParams) => (location.hash = params.toString()),
-    };
-
-  return {
-    getUrlSearch: () => location.search.slice(1),
-    setUrlSearch: (params: URLSearchParams) => (location.search = params.toString()),
-  };
-};