♻️ feat: refactor to url state (lobehub#157)

* ✨ feat: support hash state

* ♻️ refactor: refactor page to query mode

* 🚚 refactor: move SessionList

* ♻️ refactor: refactor the chat session url

* ♻️ refactor: refactor the router state

* 🐛 fix: fix topic problem

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}`;

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'),
       },

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')}
       />

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` });
               }}
             />
           )}

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' })}

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;

src/pages/chat/SessionList/Inbox.tsx → src/pages/chat/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}

src/pages/chat/SessionList/List/index.tsx → src/pages/chat/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,14 +12,22 @@ import SkeletonList from './SkeletonList';
 
 const SessionList = memo(() => {
   const list = useSessionStore(sessionSelectors.sessionList, isEqual);
+  const activeSession = useSessionStore((s) => s.activeSession);
 
   const isInit = useSessionHydrated();
 
   return !isInit ? (
     <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>
     ))

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>

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>
       )}