@lobehub/chat 0.69.1 → 0.70.1

package/.github/workflows/contributor-help.yml

@@ -1,9 +1,7 @@
 name: Contributor Helper
 
 on:
-  # 🌏 Think about the planet! No need to update stats too frequently
   schedule: [{ cron: '0 18 * * *' }]
-  # 💡 The following line lets you run workflow manually from the action tab!
   workflow_dispatch:
 jobs:
   contributor:
@@ -21,8 +19,8 @@ jobs:
       - name: Commit and push if changed
         run: |-
           git diff
-          git config --global user.email "actions@github.com"
-          git config --global user.name "github-actions"
+          git config --global user.name "lobehubbot"
+          git config --global user.email "i@lobehub.com"
           git pull
           git add -A
           git commit -m "🤖 docs: Auto update contributors" || exit 0

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.70.1](https://github.com/lobehub/lobe-chat/compare/v0.70.0...v0.70.1)
+
+<sup>Released on **2023-09-08**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor settingsSelectors to globalSelectors.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor settingsSelectors to globalSelectors ([38917e8](https://github.com/lobehub/lobe-chat/commit/38917e8))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.70.0](https://github.com/lobehub/lobe-chat/compare/v0.69.1...v0.70.0)
+
+<sup>Released on **2023-09-08**</sup>
+
+#### ✨ Features
+
+- **misc**: Refactor to url state.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Refactor to url state, closes [#157](https://github.com/lobehub/lobe-chat/issues/157) ([2efac2b](https://github.com/lobehub/lobe-chat/commit/2efac2b))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.69.1](https://github.com/lobehub/lobe-chat/compare/v0.69.0...v0.69.1)
 
 <sup>Released on **2023-09-06**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.69.1",
+  "version": "0.70.1",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/src/const/url.ts

@@ -1,4 +1,5 @@
 import pkg from '../../package.json';
+import { INBOX_SESSION_ID } from './session';
 
 export const GITHUB = pkg.homepage;
 export const CHANGELOG = `${pkg.homepage}/blob/master/CHANGELOG.md`;
@@ -8,3 +9,5 @@ export const DISCORD = 'https://discord.gg/AYFPHvv2jT';
 
 export const PLUGINS_INDEX_URL =
   process.env.PLUGINS_INDEX_URL ?? 'https://chat-plugins.lobehub.com';
+
+export const SESSION_CHAT_URL = (id: string = INBOX_SESSION_ID) => `/chat#session=${id}`;

package/src/features/MobileTabBar/index.tsx

@@ -7,6 +7,7 @@ import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useGlobalStore } from '@/store/global';
+import { useSessionStore } from '@/store/session';
 
 const useStyles = createStyles(({ css, token }) => ({
   active: css`
@@ -20,6 +21,7 @@ export default memo<{ className?: string }>(({ className }) => {
   const [tab, setTab] = useGlobalStore((s) => [s.sidebarKey, s.switchSideBar]);
   const { t } = useTranslation('common');
   const { styles } = useStyles();
+  const switchSession = useSessionStore((s) => s.switchSession);
   const items: MobileTabBarProps['items'] = useMemo(
     () => [
       {
@@ -28,7 +30,7 @@ export default memo<{ className?: string }>(({ className }) => {
         ),
         key: 'chat',
         onClick: () => {
-          Router.push('/chat');
+          switchSession();
         },
         title: t('tab.chat'),
       },

package/src/features/SideBar/TopActions.tsx

@@ -5,6 +5,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { GlobalStore } from '@/store/global';
+import { useSessionStore } from '@/store/session';
 
 export interface TopActionProps {
   setTab: GlobalStore['switchSideBar'];
@@ -13,7 +14,7 @@ export interface TopActionProps {
 
 const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
   const { t } = useTranslation('common');
-
+  const switchBackToChat = useSessionStore((s) => s.switchBackToChat);
   return (
     <>
       <ActionIcon
@@ -22,7 +23,7 @@ const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
         onClick={() => {
           // 如果已经在 chat 路径下了，那么就不用再跳转了
           if (Router.asPath.startsWith('/chat')) return;
-          Router.push('/chat');
+          switchBackToChat();
           setTab('chat');
         }}
         size="large"
@@ -31,7 +32,7 @@ const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
       <ActionIcon
         active={tab === 'market'}
         icon={Sticker}
-        onClick={() => setTab('market')}
+        // onClick={() => setTab('market')}
         size="large"
         title={t('tab.market')}
       />

package/src/helpers/export.ts

@@ -1,4 +1,4 @@
-import { settingsSelectors, useGlobalStore } from '@/store/global';
+import { globalSelectors, useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { createConfigFile, exportConfigFile } from '@/utils/config';
@@ -6,7 +6,7 @@ import { createConfigFile, exportConfigFile } from '@/utils/config';
 const getSessions = () => sessionSelectors.exportSessions(useSessionStore.getState());
 const getSession = (id: string) => sessionSelectors.getSessionById(id)(useSessionStore.getState());
 
-const getSettings = () => settingsSelectors.exportSettings(useGlobalStore.getState());
+const getSettings = () => globalSelectors.exportSettings(useGlobalStore.getState());
 
 // =============   导出所有角色   ============= //
 

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

@@ -4,21 +4,19 @@ import Router from 'next/router';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { INBOX_SESSION_ID } from '@/const/session';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
-import { agentSelectors } from '@/store/session/selectors';
+import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 
-const MobileHeader = memo<{ settings?: boolean }>(({ settings = true }) => {
+const MobileHeader = memo(() => {
   const { t } = useTranslation('common');
 
-  const [id, title, model] = useSessionStore((s) => [
-    s.activeId,
+  const [isInbox, title, model] = useSessionStore((s) => [
+    sessionSelectors.isInboxSession(s),
     agentSelectors.currentAgentTitle(s),
     agentSelectors.currentAgentModel(s),
   ]);
 
-  const isInbox = id === INBOX_SESSION_ID;
   const [toggleConfig] = useGlobalStore((s) => [s.toggleMobileTopic]);
 
   const displayTitle = isInbox ? t('inbox.title') : title;
@@ -30,11 +28,11 @@ const MobileHeader = memo<{ settings?: boolean }>(({ settings = true }) => {
       right={
         <>
           <ActionIcon icon={LayoutList} onClick={() => toggleConfig()} />
-          {settings && (
+          {!isInbox && (
             <ActionIcon
               icon={Settings}
               onClick={() => {
-                Router.push(`/chat/${id}/setting`);
+                Router.push({ hash: location.hash, pathname: `/chat/setting` });
               }}
             />
           )}

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

@@ -7,31 +7,30 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { INBOX_SESSION_ID } from '@/const/session';
 import { useGlobalStore } from '@/store/global';
 import { useSessionChatInit, useSessionStore } from '@/store/session';
-import { agentSelectors } from '@/store/session/selectors';
+import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 
 import PluginTag from './PluginTag';
 import ShareButton from './ShareButton';
 
-const Header = memo<{ settings?: boolean }>(({ settings = true }) => {
+const Header = memo(() => {
   const init = useSessionChatInit();
 
   const { t } = useTranslation('common');
 
-  const [id, title, description, avatar, backgroundColor, model, plugins] = useSessionStore((s) => [
-    s.activeId,
-
-    agentSelectors.currentAgentTitle(s),
-    agentSelectors.currentAgentDescription(s),
-    agentSelectors.currentAgentAvatar(s),
-    agentSelectors.currentAgentBackgroundColor(s),
-    agentSelectors.currentAgentModel(s),
-    agentSelectors.currentAgentPlugins(s),
-  ]);
+  const [isInbox, title, description, avatar, backgroundColor, model, plugins] = useSessionStore(
+    (s) => [
+      sessionSelectors.isInboxSession(s),
+      agentSelectors.currentAgentTitle(s),
+      agentSelectors.currentAgentDescription(s),
+      agentSelectors.currentAgentAvatar(s),
+      agentSelectors.currentAgentBackgroundColor(s),
+      agentSelectors.currentAgentModel(s),
+      agentSelectors.currentAgentPlugins(s),
+    ],
+  );
 
-  const isInbox = id === INBOX_SESSION_ID;
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
     s.preference.showChatSideBar,
     s.toggleChatSideBar,
@@ -77,11 +76,11 @@ const Header = memo<{ settings?: boolean }>(({ settings = true }) => {
             size={{ fontSize: 24 }}
             title={t('roleAndArchive')}
           />
-          {settings && (
+          {!isInbox && (
             <ActionIcon
               icon={Settings}
               onClick={() => {
-                Router.push(`/chat/${id}/setting`);
+                Router.push({ hash: location.hash, pathname: `/chat/setting` });
               }}
               size={{ fontSize: 24 }}
               title={t('header.session', { ns: 'setting' })}

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

@@ -4,12 +4,12 @@ import { memo } from 'react';
 import Mobile from './Mobile';
 import PC from './PC';
 
-const Header = memo<{ settings?: boolean }>((props) => {
+const Header = memo(() => {
   const { mobile } = useResponsive();
 
-  if (mobile) return <Mobile {...props} />;
+  if (mobile) return <Mobile />;
 
-  return <PC {...props} />;
+  return <PC />;
 });
 
 export default Header;

package/src/pages/chat/{SessionList → features/SessionList}/Inbox.tsx

@@ -6,6 +6,7 @@ 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 { useSessionStore } from '@/store/session';
 
 const { Item } = List;
@@ -14,7 +15,7 @@ const Inbox = memo(() => {
   const ref = useRef(null);
   const isHovering = useHover(ref);
   const { t } = useTranslation('common');
-  const [activeId] = useSessionStore((s) => [s.activeId]);
+  const [activeId, switchSession] = useSessionStore((s) => [s.activeId, s.switchSession]);
 
   const avatarRender = useMemo(
     () => (
@@ -29,7 +30,13 @@ const Inbox = memo(() => {
   );
 
   return (
-    <Link href={'/chat'}>
+    <Link
+      href={SESSION_CHAT_URL()}
+      onClick={(e) => {
+        e.preventDefault();
+        switchSession(INBOX_SESSION_ID);
+      }}
+    >
       <Item
         active={activeId === INBOX_SESSION_ID}
         avatar={avatarRender}

package/src/pages/chat/{SessionList → features/SessionList}/List/Item/index.tsx

@@ -6,7 +6,7 @@ import { memo, useMemo, useRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
-import { settingsSelectors, useGlobalStore } from '@/store/global';
+import { globalSelectors, useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 
@@ -36,7 +36,7 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
   const isHovering = useHover(ref);
 
   const { styles } = useStyles();
-  const [defaultModel] = useGlobalStore((s) => [settingsSelectors.currentAgentConfig(s).model]);
+  const [defaultModel] = useGlobalStore((s) => [globalSelectors.defaultAgentConfig(s).model]);
 
   const [
     active,

package/src/pages/chat/{SessionList → features/SessionList}/List/index.tsx

@@ -2,6 +2,7 @@ import isEqual from 'fast-deep-equal';
 import Link from 'next/link';
 import { memo } from 'react';
 
+import { SESSION_CHAT_URL } from '@/const/url';
 import { useSessionHydrated, useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 
@@ -11,6 +12,7 @@ import SkeletonList from './SkeletonList';
 
 const SessionList = memo(() => {
   const list = useSessionStore(sessionSelectors.sessionList, isEqual);
+  const activeSession = useSessionStore((s) => s.activeSession);
 
   const isInit = useSessionHydrated();
 
@@ -18,7 +20,14 @@ const SessionList = memo(() => {
     <SkeletonList />
   ) : list.length > 0 ? (
     list.map(({ id }) => (
-      <Link href={`/chat/${id}`} key={id}>
+      <Link
+        href={SESSION_CHAT_URL(id)}
+        key={id}
+        onClick={(e) => {
+          e.preventDefault();
+          activeSession(id);
+        }}
+      >
         <SessionItem id={id} />
       </Link>
     ))

package/src/pages/chat/features/Sidebar/index.tsx

@@ -8,6 +8,8 @@ import { Flexbox } from 'react-layout-kit';
 import SafeSpacing from '@/components/SafeSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/slices/session/selectors';
 
 import Mobile from './Mobile';
 import SystemRole from './SystemRole';
@@ -37,13 +39,15 @@ interface SideBarProps {
   mobile?: boolean;
   systemRole?: boolean;
 }
-const SideBar = memo<SideBarProps>(({ systemRole = true, mobile }) => {
+const SideBar = memo<SideBarProps>(({ mobile }) => {
   const { styles } = useStyles(mobile);
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
     s.preference.showChatSideBar,
     s.toggleChatSideBar,
   ]);
 
+  const isInbox = useSessionStore(sessionSelectors.isInboxSession);
+
   const { t } = useTranslation('common');
 
   const topic = (
@@ -79,7 +83,7 @@ const SideBar = memo<SideBarProps>(({ systemRole = true, mobile }) => {
         style={{ flex: 'none', height: '100%', minWidth: CHAT_SIDEBAR_WIDTH }}
       >
         <SafeSpacing />
-        {systemRole && <SystemRole mobile={mobile} />}
+        {!isInbox && <SystemRole mobile={mobile} />}
 
         {topic}
       </DraggablePanelContainer>

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

@@ -1,11 +1,10 @@
 import { useResponsive } from 'antd-style';
 import Head from 'next/head';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { INBOX_SESSION_ID } from '@/const/session';
-import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import Conversation from './features/Conversation';
@@ -15,13 +14,12 @@ import Layout from './layout';
 import Mobile from './mobile';
 
 const Chat = memo(() => {
-  const { t } = useTranslation('common');
   const { mobile } = useResponsive();
-  const pageTitle = genSiteHeadTitle(t('inbox.title'));
-
-  useOnFinishHydrationSession(() => {
-    useSessionStore.getState().activeSession(INBOX_SESSION_ID);
-  });
+  const [avatar, title] = useSessionStore((s) => [
+    agentSelectors.currentAgentAvatar(s),
+    agentSelectors.currentAgentTitle(s),
+  ]);
+  const pageTitle = genSiteHeadTitle([avatar, title].filter(Boolean).join(' '));
 
   return (
     <>
@@ -32,10 +30,10 @@ const Chat = memo(() => {
         <Mobile />
       ) : (
         <Layout>
-          <Header settings={false} />
+          <Header />
           <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
             <Conversation />
-            <SideBar systemRole={false} />
+            <SideBar />
           </Flexbox>
         </Layout>
       )}

package/src/pages/chat/layout.tsx

@@ -4,13 +4,18 @@ import { Flexbox } from 'react-layout-kit';
 
 import AppLayout from '@/layout/AppLayout';
 import { useSwitchSideBarOnInit } from '@/store/global';
+import { usePluginStore } from '@/store/plugin';
 
-import { Sessions } from './SessionList';
+import { Sessions } from './features/SessionList';
 
 const ChatLayout = memo<PropsWithChildren>(({ children }) => {
   const { mobile } = useResponsive();
+
   useSwitchSideBarOnInit('chat');
 
+  const useFetchPluginList = usePluginStore((s) => s.useFetchPluginList);
+  useFetchPluginList();
+
   return (
     <AppLayout>
       <Sessions />

package/src/pages/chat/{[id] → mobile}/index.page.tsx

@@ -1,20 +1,18 @@
-import { useResponsive } from 'antd-style';
 import Head from 'next/head';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import AppMobileLayout from '@/layout/AppMobileLayout';
+import Header from '@/pages/chat/features/Header';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import Conversation from '../features/Conversation';
-import Header from '../features/Header';
 import SideBar from '../features/Sidebar';
-import Layout from './layout';
-import Mobile from './mobile';
+import ChatLayout from '../layout';
 
 const Chat = memo(() => {
-  const { mobile } = useResponsive();
   const [avatar, title] = useSessionStore((s) => [
     agentSelectors.currentAgentAvatar(s),
     agentSelectors.currentAgentTitle(s),
@@ -27,22 +25,14 @@ const Chat = memo(() => {
       <Head>
         <title>{pageTitle}</title>
       </Head>
-      {mobile ? (
-        <Mobile>
+      <AppMobileLayout navBar={<Header />}>
+        <ChatLayout>
           <Flexbox height={'calc(100vh - 44px)'} horizontal>
             <Conversation mobile />
             <SideBar mobile />
           </Flexbox>
-        </Mobile>
-      ) : (
-        <Layout>
-          <Header />
-          <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
-            <Conversation />
-            <SideBar />
-          </Flexbox>
-        </Layout>
-      )}
+        </ChatLayout>
+      </AppMobileLayout>
     </>
   );
 });

package/src/pages/chat/mobile.tsx

@@ -2,10 +2,10 @@ import { useTheme } from 'antd-style';
 import { memo } from 'react';
 
 import AppMobileLayout from '@/layout/AppMobileLayout';
-import Header from '@/pages/chat/SessionList/Header';
 import { useSwitchSideBarOnInit } from '@/store/global';
 
-import { Sessions } from './SessionList';
+import { Sessions } from './features/SessionList';
+import Header from './features/SessionList/Header';
 
 const ChatMobileLayout = memo(() => {
   useSwitchSideBarOnInit('chat');

package/src/pages/chat/{[id]/setting → setting}/Header.tsx

@@ -7,7 +7,6 @@ import {
 } from '@lobehub/ui';
 import { Dropdown, MenuProps } from 'antd';
 import { HardDriveDownload, Share2 } from 'lucide-react';
-import Router from 'next/router';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -16,7 +15,7 @@ import { useSessionStore } from '@/store/session';
 
 const Header = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('setting');
-  const id = useSessionStore((s) => s.activeId);
+  const [id, onBack] = useSessionStore((s) => [s.activeId, s.switchBackToChat]);
 
   const items = useMemo<MenuProps['items']>(
     () => [
@@ -46,7 +45,7 @@ const Header = memo<{ mobile?: boolean }>(({ mobile }) => {
     return (
       <MobileNavBar
         center={<MobileNavBarTitle title={t('header.session')} />}
-        onBackClick={() => Router.back()}
+        onBackClick={onBack}
         right={
           <>
             <ActionIcon icon={Share2} title={t('share', { ns: 'common' })} />
@@ -62,7 +61,7 @@ const Header = memo<{ mobile?: boolean }>(({ mobile }) => {
   return (
     <ChatHeader
       left={<ChatHeaderTitle title={t('header.session')} />}
-      onBackClick={() => Router.back()}
+      onBackClick={onBack}
       right={
         <>
           <ActionIcon icon={Share2} size={{ fontSize: 24 }} title={t('share', { ns: 'common' })} />

package/src/pages/index.page.tsx

@@ -1,19 +1,25 @@
-import { memo } from 'react';
+import { memo, useEffect } from 'react';
 
 import { useSessionHydrated, useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 
-import Chat from './chat/index.page';
 import Loading from './index/Loading';
 import Welcome from './welcome/index.page';
 
 const Home = memo(() => {
   const hydrated = useSessionHydrated();
-  const hasSession = useSessionStore(sessionSelectors.hasSessionList);
+  const [hasSession, switchSession] = useSessionStore((s) => [
+    sessionSelectors.hasSessionList(s),
+    s.switchSession,
+  ]);
+
+  useEffect(() => {
+    if (hasSession) switchSession();
+  }, [hasSession]);
 
   if (!hydrated) return <Loading />;
 
-  return !hasSession ? <Welcome /> : <Chat />;
+  return !hasSession ? <Welcome /> : <Loading />;
 });
 
 export default Home;

package/src/pages/settings/Header.tsx

@@ -1,15 +1,17 @@
 import { ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
-import Router from 'next/router';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useSessionStore } from '@/store/session';
+
 const Header = memo(() => {
   const { t } = useTranslation('setting');
+  const [switchBackToChat] = useSessionStore((s) => [s.switchBackToChat]);
 
   return (
     <ChatHeader
       left={<ChatHeaderTitle title={t('header.global')} />}
-      onBackClick={() => Router.back()}
+      onBackClick={switchBackToChat}
       showBackButton
     />
   );

package/src/pages/settings/Settings/Agent.tsx

@@ -2,11 +2,11 @@ import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 
 import AgentSetting from '@/features/AgentSetting';
-import { settingsSelectors, useGlobalStore } from '@/store/global';
+import { globalSelectors, useGlobalStore } from '@/store/global';
 
 const Agent = memo(() => {
-  const config = useGlobalStore(settingsSelectors.currentAgentConfig, isEqual);
-  const meta = useGlobalStore(settingsSelectors.currentAgentMeta, isEqual);
+  const config = useGlobalStore(globalSelectors.defaultAgentConfig, isEqual);
+  const meta = useGlobalStore(globalSelectors.defaultAgentMeta, isEqual);
   const [updateAgent] = useGlobalStore((s) => [s.updateDefaultAgent]);
 
   return (

package/src/pages/settings/Settings/Common.tsx

@@ -12,7 +12,7 @@ import { FORM_STYLE } from '@/const/layoutTokens';
 import { DEFAULT_SETTINGS } from '@/const/settings';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { options } from '@/locales/options';
-import { settingsSelectors, useGlobalStore } from '@/store/global';
+import { globalSelectors, useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { ConfigKeys } from '@/types/settings';
 
@@ -29,7 +29,7 @@ const Common = memo(() => {
   const [form] = AntForm.useForm();
   const clearSessions = useSessionStore((s) => s.clearSessions);
 
-  const settings = useGlobalStore(settingsSelectors.currentSettings, isEqual);
+  const settings = useGlobalStore(globalSelectors.currentSettings, isEqual);
   const [setThemeMode, setSettings, resetSettings] = useGlobalStore((s) => [
     s.switchThemeMode,
     s.setSettings,

package/src/pages/welcome/Banner/index.tsx

@@ -3,12 +3,13 @@ import { useSize } from 'ahooks';
 import { Button, Upload } from 'antd';
 import { SendHorizonal } from 'lucide-react';
 import Link from 'next/link';
-import Router from 'next/router';
 import { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { SESSION_CHAT_URL } from '@/const/url';
 import { useImportConfig } from '@/hooks/useImportConfig';
+import { useSessionStore } from '@/store/session';
 
 import { useStyles } from '../style';
 import Hero from './Hero';
@@ -22,9 +23,10 @@ const Banner = memo<{ mobile?: boolean }>(() => {
 
   const { styles } = useStyles();
 
+  const switchSession = useSessionStore((s) => s.switchSession);
   const handleImport = useCallback((e: any) => {
     importConfig(e);
-    Router.push('/chat');
+    switchSession();
   }, []);
 
   return (
@@ -37,7 +39,13 @@ const Banner = memo<{ mobile?: boolean }>(() => {
           <Upload maxCount={1} onChange={handleImport} showUploadList={false}>
             <Button size={'large'}>{t('button.import')}</Button>
           </Upload>
-          <Link href={'/chat'}>
+          <Link
+            href={SESSION_CHAT_URL()}
+            onClick={(e) => {
+              e.preventDefault();
+              switchSession();
+            }}
+          >
             <Button size={'large'} type={'primary'}>
               <Flexbox align={'center'} gap={4} horizontal>
                 {t('button.start')}

package/src/store/global/selectors.ts

@@ -1,20 +1,18 @@
-import { merge } from 'lodash-es';
-
 import { DEFAULT_AGENT_META } from '@/const/meta';
 import { DEFAULT_AGENT, DEFAULT_AGENT_CONFIG, DEFAULT_SETTINGS } from '@/const/settings';
 import { GlobalSettings } from '@/types/settings';
+import { merge } from '@/utils/merge';
 
 import { GlobalStore } from './store';
 
 const currentSettings = (s: GlobalStore) => merge({}, DEFAULT_SETTINGS, s.settings);
 
-const currentDefaultAgent = (s: GlobalStore) => merge({}, DEFAULT_AGENT, s.settings.defaultAgent);
+const defaultAgent = (s: GlobalStore) => merge({}, DEFAULT_AGENT, s.settings.defaultAgent);
 
-const currentAgentConfig = (s: GlobalStore) =>
-  merge({}, DEFAULT_AGENT_CONFIG, currentDefaultAgent(s).config);
+const defaultAgentConfig = (s: GlobalStore) =>
+  merge({}, DEFAULT_AGENT_CONFIG, defaultAgent(s).config);
 
-const currentAgentMeta = (s: GlobalStore) =>
-  merge({}, DEFAULT_AGENT_META, currentDefaultAgent(s).meta);
+const defaultAgentMeta = (s: GlobalStore) => merge({}, DEFAULT_AGENT_META, defaultAgent(s).meta);
 
 export const exportSettings = (s: GlobalStore) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -23,10 +21,10 @@ export const exportSettings = (s: GlobalStore) => {
   return settings as GlobalSettings;
 };
 
-export const settingsSelectors = {
-  currentAgentConfig,
-  currentAgentMeta,
-  currentDefaultAgent,
+export const globalSelectors = {
   currentSettings,
+  defaultAgent,
+  defaultAgentConfig,
+  defaultAgentMeta,
   exportSettings,
 };

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

@@ -0,0 +1,95 @@
+import { isEmpty } from 'lodash-es';
+import { PersistStorage } from 'zustand/middleware';
+import { StorageValue } from 'zustand/middleware/persist';
+
+import { createKeyMapper } from './keyMapper';
+import { HyperStorageOptions } from './type';
+import { createUrlSearch } from './urlSearch';
+
+export const createHyperStorage = <T extends object>(
+  options: HyperStorageOptions,
+): PersistStorage<T> => {
+  const hasUrl = !!options.url;
+
+  const { setUrlSearch, getUrlSearch } = createUrlSearch(options.url?.mode);
+
+  const { mapStateKeyToStorageKey, getStateKeyFromStorageKey } = createKeyMapper(options);
+
+  return {
+    getItem: (name): 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);
+        version = localState.version;
+        for (const [k, v] of Object.entries(localState.state)) {
+          const key = getStateKeyFromStorageKey(k, 'localStorage');
+          if (key) state[key] = v;
+        }
+      }
+
+      // ============== 处理 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;
+          }
+        }
+      }
+
+      return { state, version };
+    },
+    removeItem: (key): void => {
+      // ============== 处理 URL Storage  ============== //
+      if (hasUrl) {
+        const searchParameters = new URLSearchParams(getUrlSearch());
+
+        const storageKey = getStateKeyFromStorageKey(key, 'url');
+        if (storageKey) searchParameters.delete(storageKey);
+
+        setUrlSearch(searchParameters);
+      }
+    },
+    setItem: (name, newValue) => {
+      // ============== 处理 Local Storage  ============== //
+      const localState: Record<string, any> = {};
+      for (const [k, v] of Object.entries(newValue.state)) {
+        const localKey = mapStateKeyToStorageKey(k, 'localStorage');
+        if (localKey) localState[localKey] = v;
+      }
+
+      localStorage.setItem(name, JSON.stringify({ ...newValue, state: localState }));
+
+      // ============== 处理 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);
+      }
+    },
+  };
+};

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

@@ -0,0 +1,53 @@
+import { HyperStorageOptions } from './type';
+
+export const createKeyMapper = (options: HyperStorageOptions) => {
+  const mapStateKeyToStorageKey = (
+    key: string,
+    mode: keyof HyperStorageOptions = 'localStorage',
+  ) => {
+    const selectors = options[mode]?.selectors;
+    if (!selectors) return key;
+
+    let storageKey: string | undefined;
+
+    if (!selectors) return key;
+
+    for (const selector of selectors) {
+      if (typeof selector === 'string') {
+        if (selector === key) storageKey = key;
+      } else {
+        if (selector[key]) storageKey = selector[key];
+      }
+    }
+
+    return storageKey;
+  };
+
+  const getStateKeyFromStorageKey = (
+    key: string,
+    mode: keyof HyperStorageOptions = 'localStorage',
+  ) => {
+    const selectors = options[mode]?.selectors;
+    if (!selectors) return key;
+
+    let stateKey: string | undefined;
+
+    for (const item of selectors) {
+      // 对象如果是 字符串，直接返回该 item key
+      if (typeof item === 'string') {
+        if (item === key) stateKey = key;
+      } else {
+        for (const [k, v] of Object.entries(item)) {
+          if (v === key) stateKey = k;
+        }
+      }
+    }
+
+    return stateKey;
+  };
+
+  return {
+    getStateKeyFromStorageKey,
+    mapStateKeyToStorageKey,
+  };
+};

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

@@ -0,0 +1,14 @@
+export type StorageSelector = string | Record<string, string>;
+
+export interface HyperStorageOptions {
+  localStorage?: {
+    selectors: StorageSelector[];
+  };
+  url?: {
+    /**
+     * @default 'hash'
+     */
+    mode?: 'hash' | 'search';
+    selectors: StorageSelector[];
+  };
+}

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

@@ -0,0 +1,17 @@
+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()),
+  };
+};

package/src/store/session/slices/chat/selectors/token.ts

@@ -5,25 +5,24 @@ import { agentSelectors } from '@/store/session/slices/agentConfig';
 import type { SessionStore } from '../../../store';
 import { currentChatsWithHistoryConfig } from './chat';
 
+// TODO: We should find a smaller package to do this. gpt-tokenizer has 2M Size
+const count = (text: string) => encode(text).length;
+
 export const systemRoleSel = (s: SessionStore): string => {
   const config = agentSelectors.currentAgentConfig(s);
 
   return config.systemRole;
 };
 
-const systemRoleTokens = (s: SessionStore): number[] => {
+export const systemRoleTokenCount = (s: SessionStore): number => {
   const systemRole = systemRoleSel(s);
 
-  return encode(systemRole || '');
+  return count(systemRole || '');
 };
 
-const chatsTokens = (s: SessionStore): number[] => {
+export const chatsTokenCount = (s: SessionStore): number => {
   const chats = currentChatsWithHistoryConfig(s);
-  return encode(chats.map((m) => m.content).join(''));
+  return count(chats.map((m) => m.content).join(''));
 };
 
-export const chatsTokenCount = (s: SessionStore) => chatsTokens(s).length;
-
-export const systemRoleTokenCount = (s: SessionStore) => systemRoleTokens(s).length;
-
-export const totalTokenCount = (s: SessionStore) => chatsTokens(s).length + systemRoleTokenCount(s);
+export const totalTokenCount = (s: SessionStore) => chatsTokenCount(s) + systemRoleTokenCount(s);

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

@@ -4,6 +4,7 @@ import Router from 'next/router';
 import { StateCreator } from 'zustand/vanilla';
 
 import { INBOX_SESSION_ID } from '@/const/session';
+import { SESSION_CHAT_URL } from '@/const/url';
 import { useGlobalStore } from '@/store/global';
 import { SessionStore } from '@/store/session';
 import { LobeAgentSession, LobeSessions } from '@/types/session';
@@ -54,12 +55,14 @@ export interface SessionAction {
    */
   removeSession: (sessionId: string) => void;
 
+  switchBackToChat: () => void;
+
   /**
    * @title 切换会话
    * @param sessionId - 会话索引
    * @returns void
    */
-  switchSession: (sessionId?: string) => Promise<void>;
+  switchSession: (sessionId?: string) => void;
 }
 
 export const createSessionSlice: StateCreator<
@@ -69,7 +72,7 @@ export const createSessionSlice: StateCreator<
   SessionAction
 > = (set, get) => ({
   activeSession: (sessionId) => {
-    set({ activeId: sessionId }, false, t('activeSession'));
+    set({ activeId: sessionId, activeTopicId: undefined }, false, t('activeSession'));
   },
 
   clearSessions: () => {
@@ -144,18 +147,24 @@ export const createSessionSlice: StateCreator<
     get().dispatchSession({ id: sessionId, type: 'removeSession' });
 
     if (sessionId === get().activeId) {
-      Router.push('/chat');
+      get().switchSession();
     }
   },
 
-  switchSession: async (sessionId) => {
+  switchBackToChat: () => {
+    const { activeId } = get();
+
+    const id = activeId || INBOX_SESSION_ID;
+
+    get().activeSession(id);
+
+    Router.push(SESSION_CHAT_URL(id));
+  },
+  switchSession: (sessionId = INBOX_SESSION_ID) => {
     if (get().activeId === sessionId) return;
 
-    if (sessionId) {
-      get().activeSession(sessionId);
-    }
+    get().activeSession(sessionId);
 
-    // 新会话
-    await Router.push(`/chat/${sessionId}`);
+    Router.push(SESSION_CHAT_URL(sessionId));
   },
 });

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

@@ -9,9 +9,8 @@ export interface SessionState {
   /**
    * @title 当前活动的会话
    * @description 当前正在编辑或查看的会话
-   * @default null
    */
-  activeId: string | null;
+  activeId: string | undefined;
   // 默认会话
   inbox: LobeAgentSession;
   searchKeywords: string;
@@ -39,7 +38,7 @@ export const initInbox = merge({}, initLobeSession, {
 } as Partial<LobeAgentSession>);
 
 export const initialSessionState: SessionState = {
-  activeId: null,
+  activeId: undefined,
   inbox: initInbox,
   searchKeywords: '',
   sessions: {},

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

@@ -1,3 +1,6 @@
+import { INBOX_SESSION_ID } from '@/const/session';
+import { SessionStore } from '@/store/session';
+
 import { exportAgents, exportSessions, getExportAgent } from './export';
 import {
   currentSession,
@@ -8,6 +11,8 @@ import {
   sessionList,
 } from './list';
 
+const isInboxSession = (s: SessionStore) => s.activeId === INBOX_SESSION_ID;
+
 export const sessionSelectors = {
   currentSession,
   currentSessionSafe,
@@ -17,5 +22,6 @@ export const sessionSelectors = {
   getSessionById,
   getSessionMetaById,
   hasSessionList,
+  isInboxSession,
   sessionList,
 };

package/src/store/session/store.ts

@@ -5,6 +5,7 @@ import { StateCreator } from 'zustand/vanilla';
 
 import { isDev } from '@/utils/env';
 
+import { createHyperStorage } from '../middleware/createHyperStorage';
 import { SessionStoreState, initialState } from './initialState';
 import { AgentAction, createAgentSlice } from './slices/agentConfig/action';
 import { ChatAction, createChatSlice } from './slices/chat/actions';
@@ -22,20 +23,27 @@ const createStore: StateCreator<SessionStore, [['zustand/devtools', never]]> = (
 
 //  ===============  persist 本地缓存中间件配置 ============ //
 
-type SessionPersist = Pick<SessionStore, 'sessions' | 'inbox'>;
-
 const LOBE_CHAT = 'LOBE_CHAT';
 
-const persistOptions: PersistOptions<SessionStore, SessionPersist> = {
+const persistOptions: PersistOptions<SessionStore> = {
   name: LOBE_CHAT,
 
-  partialize: (s) => ({
-    inbox: s.inbox,
-    sessions: s.sessions,
-  }),
-
   // 手动控制 Hydration ，避免 ssr 报错
   skipHydration: true,
+
+  storage: createHyperStorage({
+    localStorage: {
+      selectors: ['inbox', 'sessions'],
+    },
+    url: {
+      mode: 'hash',
+      selectors: [
+        // map state key to storage key
+        { activeId: 'session' },
+        { activeTopicId: 'topic' },
+      ],
+    },
+  }),
   version: 0,
 };
 

package/src/pages/chat/[id]/layout.tsx

@@ -1,34 +0,0 @@
-import { useRouter } from 'next/router';
-import { PropsWithChildren, memo } from 'react';
-import { shallow } from 'zustand/shallow';
-
-import { usePluginStore } from '@/store/plugin';
-import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
-
-import ChatLayout from '../layout';
-
-const Layout = memo<PropsWithChildren>(({ children }) => {
-  const useFetchPluginList = usePluginStore((s) => s.useFetchPluginList);
-  const [activeSession, toggleTopic] = useSessionStore((s) => {
-    return [s.activeSession, s.toggleTopic];
-  }, shallow);
-
-  const router = useRouter();
-  const { id } = router.query;
-
-  useOnFinishHydrationSession(() => {
-    // 1. 正常激活会话
-    if (typeof id === 'string') {
-      activeSession(id);
-    }
-
-    // 将话题重置为默认值
-    toggleTopic();
-  }, [id]);
-
-  useFetchPluginList();
-
-  return <ChatLayout>{children}</ChatLayout>;
-});
-
-export default Layout;

package/src/pages/chat/[id]/mobile.tsx

@@ -1,31 +0,0 @@
-import { useRouter } from 'next/router';
-import { PropsWithChildren, memo } from 'react';
-import { shallow } from 'zustand/shallow';
-
-import AppMobileLayout from '@/layout/AppMobileLayout';
-import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
-
-import Header from '../features/Header';
-
-const MobileLayout = memo<PropsWithChildren>(({ children }) => {
-  const [activeSession, toggleTopic] = useSessionStore((s) => {
-    return [s.activeSession, s.toggleTopic];
-  }, shallow);
-
-  const router = useRouter();
-  const { id } = router.query;
-
-  useOnFinishHydrationSession(() => {
-    // 1. 正常激活会话
-    if (typeof id === 'string') {
-      activeSession(id);
-    }
-
-    // 将话题重置为默认值
-    toggleTopic();
-  }, [id]);
-
-  return <AppMobileLayout navBar={<Header />}>{children}</AppMobileLayout>;
-});
-
-export default MobileLayout;

package/src/store/middleware/createHashStorage.ts

@@ -1,49 +0,0 @@
-import { isEmpty } from 'lodash-es';
-import { PersistStorage } from 'zustand/middleware';
-
-import { Compressor } from '@/utils/compass';
-
-export const createHashStorage = <T extends object>(): PersistStorage<T> => {
-  return {
-    getItem: async () => {
-      const searchParameters = new URLSearchParams(location.hash.slice(1));
-      const state: any = {};
-      const pool = [...searchParameters.entries()].map(async ([k, v]) => {
-        const string_ = await Compressor.decompressAsync(v);
-
-        try {
-          state[k] = JSON.parse(string_);
-        } catch {
-          state[k] = string_;
-        }
-      });
-
-      await Promise.all(pool);
-
-      return { state } as any;
-    },
-    removeItem: (key): void => {
-      const searchParameters = new URLSearchParams(location.hash.slice(1));
-      searchParameters.delete(key);
-      location.hash = searchParameters.toString();
-    },
-    setItem: async (_, newValue) => {
-      const searchParameters = new URLSearchParams(location.hash.slice(1));
-
-      const pool = Object.entries(newValue.state).map(async ([k, v]) => {
-        if (isEmpty(v)) {
-          searchParameters.delete(k);
-          return;
-        }
-        if (typeof v === 'string') {
-          searchParameters.set(k, await Compressor.compressAsync(v));
-        } else {
-          searchParameters.set(k, await Compressor.compressAsync(JSON.stringify(v)));
-        }
-      });
-      await Promise.all(pool);
-
-      location.hash = searchParameters.toString();
-    },
-  };
-};