@lobehub/chat 0.70.3 → 0.71.0

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+## [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>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix route.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix route ([2d1e8d6](https://github.com/lobehub/lobe-chat/commit/2d1e8d6))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.70.3](https://github.com/lobehub/lobe-chat/compare/v0.70.2...v0.70.3)
 
 <sup>Released on **2023-09-09**</sup>

package/locales/en_US/common.json

@@ -1,7 +1,7 @@
 {
   "about": "About",
   "advanceSettings": "Advanced Settings",
-  "agentDefaultMessage": "Hello, I'm **{{name}}**. You can start chatting with me right away or go to [Assistant Settings](/chat/{{id}}/setting) to complete my information.",
+  "agentDefaultMessage": "Hello, I'm **{{name}}**. You can start chatting with me right away or go to [Assistant Settings](/chat/setting#session={{id}}) to complete my information.",
   "agentDefaultMessageWithSystemRole": "Hello, I'm **{{name}}**, {{systemRole}}. Let's start chatting!",
   "agentMaxToken": "Max Session Length",
   "agentModel": "Model",
@@ -62,7 +62,7 @@
   "stop": "Stop",
   "tab": {
     "chat": "Chat",
-    "market": "Assistant Market",
+    "market": "Discover",
     "setting": "Settings"
   },
   "temp": "Temporary",

package/locales/ru_RU/common.json

@@ -1,7 +1,7 @@
 {
   "about": "Наш Github",
   "advanceSettings": "Дополнительные настройки",
-  "agentDefaultMessage": "Здравствуйте, я **{{name}}**. Вы можете начать общаться со мной прямо сейчас или перейти на [Assistant Settings](/chat/{{id}}/setting) для моей настройки.",
+  "agentDefaultMessage": "Здравствуйте, я **{{name}}**. Вы можете начать общаться со мной прямо сейчас или перейти на [Assistant Settings](/chat/setting#session={{id}}) для моей настройки.",
   "agentDefaultMessageWithSystemRole": "Здравствуйте, Я **{{name}}**, {{systemRole}}. Давайте начнем общаться!",
   "agentMaxToken": "Максимальная длина запроса",
   "agentModel": "Модель",

package/locales/zh_CN/common.json

@@ -1,7 +1,7 @@
 {
   "about": "关于",
   "advanceSettings": "高级设置",
-  "agentDefaultMessage": "你好，我是 **{{name}}**，你可以立即与我开始对话，也可以前往 [助手设置](/chat/{{id}}/setting) 完善我的信息。",
+  "agentDefaultMessage": "你好，我是 **{{name}}**，你可以立即与我开始对话，也可以前往 [助手设置](/chat/setting#session={{id}}) 完善我的信息。",
   "agentDefaultMessageWithSystemRole": "你好，我是 **{{name}}**，{{systemRole}}，让我们开始对话吧！",
   "agentMaxToken": "会话最大长度",
   "agentModel": "模型",

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.70.3",
-  "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
+  "version": "0.71.0",
+  "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/features/MobileTabBar/index.tsx

@@ -36,7 +36,7 @@ export default memo<{ className?: string }>(({ className }) => {
         icon: (active) => <Icon className={active ? styles.active : undefined} icon={Sticker} />,
         key: 'market',
         onClick: () => {
-          Router.push('/market');
+          Router.push({ hash: '', pathname: `/market` });
         },
         title: t('tab.market'),
       },

package/src/locales/default/common.ts

@@ -2,7 +2,7 @@ export default {
   about: '关于',
   advanceSettings: '高级设置',
   agentDefaultMessage:
-    '你好，我是 **{{name}}**，你可以立即与我开始对话，也可以前往 [助手设置](/chat/{{id}}/setting) 完善我的信息。',
+    '你好，我是 **{{name}}**，你可以立即与我开始对话，也可以前往 [助手设置](/chat/setting#session={{id}}) 完善我的信息。',
   agentDefaultMessageWithSystemRole: '你好，我是 **{{name}}**，{{systemRole}}，让我们开始对话吧！',
   agentMaxToken: '会话最大长度',
   agentModel: '模型',

package/src/pages/chat/features/Header/Mobile.tsx

@@ -24,7 +24,7 @@ const MobileHeader = memo(() => {
   return (
     <MobileNavBar
       center={<MobileNavBarTitle desc={model} title={displayTitle} />}
-      onBackClick={() => Router.push('/chat')}
+      onBackClick={() => Router.push({ hash: null, pathname: `/chat` })}
       right={
         <>
           <ActionIcon icon={LayoutList} onClick={() => toggleConfig()} />

package/src/pages/chat/setting/features/Header/Desktop.tsx

@@ -1,17 +1,15 @@
 import { ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
+import Router from 'next/router';
 import { ReactNode, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useSessionStore } from '@/store/session';
-
 const Header = memo<{ children: ReactNode }>(({ children }) => {
   const { t } = useTranslation('setting');
-  const onBack = useSessionStore((s) => s.switchBackToChat);
 
   return (
     <ChatHeader
       left={<ChatHeaderTitle title={t('header.session')} />}
-      onBackClick={onBack}
+      onBackClick={() => Router.push({ hash: location.hash, pathname: `/chat` })}
       right={children}
       showBackButton
     />

package/src/pages/chat/setting/features/Header/Mobile.tsx

@@ -9,7 +9,7 @@ const Header = memo<{ children: ReactNode }>(({ children }) => {
   return (
     <MobileNavBar
       center={<MobileNavBarTitle title={t('header.session')} />}
-      onBackClick={() => Router.back()}
+      onBackClick={() => Router.push({ hash: location.hash, pathname: `/chat/mobile` })}
       right={children}
       showBackButton
     />

package/src/pages/market/features/Header/Desktop.tsx

@@ -1,53 +1,29 @@
-import { ActionIcon, Logo, SearchBar } from '@lobehub/ui';
+import { ChatHeader, Logo, SearchBar } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { MessageSquarePlus } from 'lucide-react';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { useSessionStore } from '@/store/session';
 
 export const useStyles = createStyles(({ css, token }) => ({
   logo: css`
+    color: ${token.colorText};
     fill: ${token.colorText};
   `,
-  top: css`
-    position: sticky;
-    top: 0;
-  `,
 }));
 
 const Header = memo(() => {
   const { styles } = useStyles();
   const { t } = useTranslation('common');
-  const [keywords, createSession] = useSessionStore((s) => [s.searchKeywords, s.createSession]);
 
   return (
-    <Flexbox className={styles.top} gap={16} padding={16}>
-      <Flexbox distribution={'space-between'} horizontal>
+    <ChatHeader
+      left={
         <Link href={'/'}>
-          <Logo className={styles.logo} size={36} type={'text'} />
+          <Logo className={styles.logo} extra={t('tab.market')} size={36} type={'text'} />
         </Link>
-        <ActionIcon
-          icon={MessageSquarePlus}
-          onClick={createSession}
-          size={{ fontSize: 24 }}
-          style={{ flex: 'none' }}
-          title={t('newAgent')}
-        />
-      </Flexbox>
-      <SearchBar
-        allowClear
-        enableShortKey
-        onChange={(e) => useSessionStore.setState({ searchKeywords: e.target.value })}
-        placeholder={t('searchAgentPlaceholder')}
-        shortKey={'k'}
-        spotlight
-        type={'ghost'}
-        value={keywords}
-      />
-    </Flexbox>
+      }
+      right={<SearchBar allowClear spotlight type={'ghost'} />}
+    />
   );
 });
 

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/useOnFinishHydrationSession.ts

@@ -12,10 +12,9 @@ export const useOnFinishHydrationSession = (
   deps: any[] = [],
 ) => {
   useEffect(() => {
-    const hasRehydrated = useSessionStore.persist.hasHydrated();
     // 只有当水合完毕后再开始做操作
-    if (!hasRehydrated) return;
-
-    fn(useSessionStore.getState());
+    useSessionStore.persist.onFinishHydration(() => {
+      fn(useSessionStore.getState());
+    });
   }, deps);
 };

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

@@ -5,14 +5,13 @@ import { useSessionStore } from '../store';
 export const useSessionHydrated = () => {
   // 根据 sessions 是否有值来判断是否已经初始化
   const hasInited = !!Object.values(useSessionStore.getState().sessions).length;
+
   const [isInit, setInit] = useState(hasInited);
 
   useEffect(() => {
-    const hasRehydrated = useSessionStore.persist.hasHydrated();
-
-    if (hasRehydrated && !isInit) {
-      setInit(true);
-    }
+    useSessionStore.persist.onFinishHydration(() => {
+      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()),
-  };
-};