@lobehub/chat 0.120.3 → 0.120.4

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.120.4](https://github.com/lobehub/lobe-chat/compare/v0.120.3...v0.120.4)
+
+<sup>Released on **2024-01-21**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Refactor url state management and fix some detail experience.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Refactor url state management and fix some detail experience, closes [#1117](https://github.com/lobehub/lobe-chat/issues/1117) ([a355d2c](https://github.com/lobehub/lobe-chat/commit/a355d2c))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.120.3](https://github.com/lobehub/lobe-chat/compare/v0.120.2...v0.120.3)
 
 <sup>Released on **2024-01-19**</sup>

package/README.md

@@ -184,14 +184,14 @@ e-commerce platform data access, and various third-party services.
 
 <!-- PLUGIN LIST -->
 
-| Recent Submits                                                                                                 | Description                                                                                                                                                                                                                                 |
-| -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Midjourney](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **LobeHub** on **2024-01-18**</sup>  | Unleash creativity with Midjourney, effortlessly generating unique AI-driven images through simple prompts. Add visual flair to your conversations with Midjourney's artistic touch.<br/>`ai-image-generation` `midjourney` `visualization` |
-| [GIF Search](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **giphy** on **2024-01-17**</sup>    | Search through a wide range of gifs - Powered by Giphy.<br/>`gif` `image` `search`                                                                                                                                                          |
-| [Asset Ovi](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **assetovi** on **2024-01-17**</sup>  | Search and preview millions of 3D assets for games, AIGC, AR/VR and others.<br/>`3-d` `assets` `search`                                                                                                                                     |
-| [Astrodaily](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **360macky** on **2024-01-17**</sup> | Search and discover NASA images.<br/>`nasa` `search` `image`                                                                                                                                                                                |
+| Recent Submits                                                                                                         | Description                                                                                                                                                                                                                                 |
+| ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [AskYourPDF](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **askyourpdf** on **2024-01-20**</sup>       | Unlock the power of your PDFs!, dive into your documents, find answers, and bring information to your fingertips.<br/>`pdf` `document` `web`                                                                                                |
+| [Savvy Trader AI](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **savvytrader** on **2024-01-20**</sup> | Realtime stock, crypto and other investment data.<br/>`stock` `analyze`                                                                                                                                                                     |
+| [Midjourney](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **LobeHub** on **2024-01-18**</sup>          | Unleash creativity with Midjourney, effortlessly generating unique AI-driven images through simple prompts. Add visual flair to your conversations with Midjourney's artistic touch.<br/>`ai-image-generation` `midjourney` `visualization` |
+| [GIF Search](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **efficiency** on **2024-01-17**</sup>       | Search through a wide range of gifs - Powered by Giphy.<br/>`gif` `image` `search`                                                                                                                                                          |
 
-> 📊 Total plugins: [<kbd>**21**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
+> 📊 Total plugins: [<kbd>**20**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
 
  <!-- PLUGIN LIST -->
 
@@ -225,12 +225,12 @@ Our marketplace is not just a showcase platform but also a collaborative space.
 
 | Recent Submits                                                                                                                                                                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [PromptGPT](https://chat-preview.lobehub.com/market?agent=prompt-gpt)<br/><sup>By **[110rever](https://github.com/110rever)** on **2024-01-19**</sup>                               | A customized GPT model named PromptGPT. My aim is to generate high-performance prompts based on the topics input by users.<br/>`generation` `artificial-intelligence` `interaction` `customized-experience` `feedback-mechanism` `best-practices` `step-by-step-guidance` `language-flexibility` `boundaries`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
 | [Tech Explorer AI](https://chat-preview.lobehub.com/market?agent=tech-explorer-ai)<br/><sup>By **[110rever](https://github.com/110rever)** on **2024-01-19**</sup>                  | Technology exploration AI capability: - Conduct comprehensive technical research - Provide predictive insights based on statistical data and trend analysis - Optimize research methodology - Maintain data accuracy and completeness - Infer limitations in the absence of complete data: - Only answer questions related to technology - Do not provide general purchasing advice - Provide product technology discussion through step-by-step guidance User interaction: - Provide clear and concise dialogue - Provide multilingual options Support objective: To provide accurate information and analyze predictions to deepen the understanding of technology among users.<br/>`technical-research` `data-analysis` `research-methods` `data-accuracy` `inference` `user-interaction` |
 | [AE Script Development Expert](https://chat-preview.lobehub.com/market?agent=ae-script-development)<br/><sup>By **[Wutpeach](https://github.com/Wutpeach)** on **2024-01-18**</sup> | An expert in AE script development, proficient in JavaScript programming, understanding of AE software principles, capable of debugging and optimizing scripts.<br/>`script-development` `programmer` `adobe-after-effects` `java-script` `algorithm-design` `debugging` `optimization` `coding-standards` `user-communication` `script-usage-instructions`                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | [Code Companion](https://chat-preview.lobehub.com/market?agent=code-companion)<br/><sup>By **[110rever](https://github.com/110rever)** on **2024-01-18**</sup>                      | The best companion for programmers<br/>`code` `dev` `program`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| [William](https://chat-preview.lobehub.com/market?agent=unreal-engine-development-engineer)<br/><sup>By **[Wutpeach](https://github.com/Wutpeach)** on **2024-01-16**</sup>         | Unreal Engine expert, proficient in C++ programming, rendering, memory, thread and other pipeline architectures, UE application on Android platform, comprehensive artistic cognition, familiar with Shader writing, proficient in 3D art asset production process and tools.<br/>`unreal-engine` `c-programming` `rendering-pipeline` `memory-management` `thread-architecture`                                                                                                                                                                                                                                                                                                                                                                                                             |
 
-> 📊 Total agents: [<kbd>**102**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+> 📊 Total agents: [<kbd>**103**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

package/README.zh-CN.md

@@ -168,14 +168,14 @@ LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地
 
 <!-- PLUGIN LIST -->
 
-| 最近新增                                                                                                       | 插件描述                                                                                                                                                                        |
-| -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Midjourney](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **LobeHub** on **2024-01-18**</sup>  | 通过简单的提示轻松释放创造力，利用 Midjourney 生成独特的 AI 驱动图像。通过 Midjourney 的艺术触感为您的对话增添视觉魅力。<br/>`ai-image-generation` `midjourney` `visualization` |
-| [GIF 搜索](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **giphy** on **2024-01-17**</sup>      | 搜索各种各样的 GIF - 由 Giphy 提供动力。<br/>`gif` `图片` `搜索`                                                                                                                |
-| [Asset Ovi](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **assetovi** on **2024-01-17**</sup>  | 搜索和预览数百万款用于游戏、AIGC、AR/VR 等领域的 3D 资产。<br/>`3-d` `资产` `搜索`                                                                                              |
-| [Astrodaily](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **360macky** on **2024-01-17**</sup> | 搜索和发现 NASA 图像。<br/>`nasa` `搜索` `图像`                                                                                                                                 |
+| 最近新增                                                                                                               | 插件描述                                                                                                                                                                        |
+| ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [AskYourPDF](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **askyourpdf** on **2024-01-20**</sup>       | 释放 PDF 的力量！深入文档，寻找答案，让信息触手可及。<br/>`pdf` `document` `web`                                                                                                |
+| [Savvy Trader AI](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **savvytrader** on **2024-01-20**</sup> | 实时股票、加密货币和其他投资数据。<br/>`股票` `分析`                                                                                                                            |
+| [Midjourney](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **LobeHub** on **2024-01-18**</sup>          | 通过简单的提示轻松释放创造力，利用 Midjourney 生成独特的 AI 驱动图像。通过 Midjourney 的艺术触感为您的对话增添视觉魅力。<br/>`ai-image-generation` `midjourney` `visualization` |
+| [GIF 搜索](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **efficiency** on **2024-01-17**</sup>         | 搜索各种各样的 GIF - 由 Giphy 提供动力。<br/>`gif` `图片` `搜索`                                                                                                                |
 
-> 📊 Total plugins: [<kbd>**21**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
+> 📊 Total plugins: [<kbd>**20**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
 
  <!-- PLUGIN LIST -->
 
@@ -203,14 +203,14 @@ LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地
 
 <!-- AGENT LIST -->
 
-| 最近新增                                                                                                                                                                    | 助手说明                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Tech Explorer AI](https://chat-preview.lobehub.com/market?agent=tech-explorer-ai)<br/><sup>By **[110rever](https://github.com/110rever)** on **2024-01-19**</sup>          | 技术探索人工智能能力：- 进行全面的技术研究 - 基于统计数据和趋势分析提供预测性见解 - 优化研究方法论 - 保持数据准确性和完整性 - 推断在没有完整数据的情况下的局限性：- 仅回答与技术相关的问题 - 不提供一般性的购买建议 - 通过逐步指导提供产品技术讨论用户交互：- 提供清晰简洁的对话 - 提供多语言选项支持目标：为用户提供准确的信息并分析预测，以加深他们对技术的理解。<br/>`技术研究` `数据分析` `研究方法` `数据准确性` `推断` `用户交互` |
-| [AE 脚本开发专家](https://chat-preview.lobehub.com/market?agent=ae-script-development)<br/><sup>By **[Wutpeach](https://github.com/Wutpeach)** on **2024-01-18**</sup>      | AE 脚本开发专家，精通 JavaScript 编程，理解 AE 软件工作原理，能够调试和优化脚本。<br/>`脚本开发` `程序员` `adobe-after-effects` `java-script` `算法设计` `调试` `优化` `编程规范` `用户沟通` `脚本使用说明`                                                                                                                                                                                                                             |
-| [Code Companion](https://chat-preview.lobehub.com/market?agent=code-companion)<br/><sup>By **[110rever](https://github.com/110rever)** on **2024-01-18**</sup>              | 程序员的最佳伴侣<br/>`code` `dev` `program`                                                                                                                                                                                                                                                                                                                                                                                             |
-| [William](https://chat-preview.lobehub.com/market?agent=unreal-engine-development-engineer)<br/><sup>By **[Wutpeach](https://github.com/Wutpeach)** on **2024-01-16**</sup> | 虚幻引擎专家，精通 C++ 编程，渲染、内存、线程等管线架构，UE 在安卓平台应用，全面的美术认知，熟悉 Shader 编写，熟练掌握 3D 美术资产制作流程与工具。<br/>`虚幻引擎` `c-编程` `渲染管线` `内存管理` `线程架构`                                                                                                                                                                                                                             |
+| 最近新增                                                                                                                                                               | 助手说明                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [PromptGPT](https://chat-preview.lobehub.com/market?agent=prompt-gpt)<br/><sup>By **[110rever](https://github.com/110rever)** on **2024-01-19**</sup>                  | 一个名为 PromptGPT 的定制 GPT 模型。我的目标是基于用户输入的主题生成高性能提示。<br/>`生成` `人工智能` `交互` `定制体验` `反馈机制` `最佳实践` `逐步指导` `语言灵活性` `边界`                                                                                                                                                                                                                                                           |
+| [Tech Explorer AI](https://chat-preview.lobehub.com/market?agent=tech-explorer-ai)<br/><sup>By **[110rever](https://github.com/110rever)** on **2024-01-19**</sup>     | 技术探索人工智能能力：- 进行全面的技术研究 - 基于统计数据和趋势分析提供预测性见解 - 优化研究方法论 - 保持数据准确性和完整性 - 推断在没有完整数据的情况下的局限性：- 仅回答与技术相关的问题 - 不提供一般性的购买建议 - 通过逐步指导提供产品技术讨论用户交互：- 提供清晰简洁的对话 - 提供多语言选项支持目标：为用户提供准确的信息并分析预测，以加深他们对技术的理解。<br/>`技术研究` `数据分析` `研究方法` `数据准确性` `推断` `用户交互` |
+| [AE 脚本开发专家](https://chat-preview.lobehub.com/market?agent=ae-script-development)<br/><sup>By **[Wutpeach](https://github.com/Wutpeach)** on **2024-01-18**</sup> | AE 脚本开发专家，精通 JavaScript 编程，理解 AE 软件工作原理，能够调试和优化脚本。<br/>`脚本开发` `程序员` `adobe-after-effects` `java-script` `算法设计` `调试` `优化` `编程规范` `用户沟通` `脚本使用说明`                                                                                                                                                                                                                             |
+| [Code Companion](https://chat-preview.lobehub.com/market?agent=code-companion)<br/><sup>By **[110rever](https://github.com/110rever)** on **2024-01-18**</sup>         | 程序员的最佳伴侣<br/>`code` `dev` `program`                                                                                                                                                                                                                                                                                                                                                                                             |
 
-> 📊 Total agents: [<kbd>**102**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+> 📊 Total agents: [<kbd>**103**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

package/docs/Home.md

@@ -40,8 +40,8 @@ LobeChat is a open-source, extensible ([Function Calling][fc-url]), high-perform
 - [Environment Setup Guide](https://github.com/lobehub/lobe-chat/wiki/Setup-Development) | [环境设置指南](https://github.com/lobehub/lobe-chat/wiki/Setup-Development.zh-CN)
 - [Architecture Design](https://github.com/lobehub/lobe-chat/wiki/Architecture) | [架构设计](https://github.com/lobehub/lobe-chat/wiki/Architecture.zh-CN)
 - [Directory Structure](https://github.com/lobehub/lobe-chat/wiki/Folder-Structure) | [目录架构](https://github.com/lobehub/lobe-chat/wiki/Folder-Structure.zh-CN)
-- [Best Practices for State Management](https://github.com/lobehub/lobe-chat/wiki/State-Management) | [状态管理最佳实践](https://github.com/lobehub/lobe-chat/wiki/State-Management)
-  - [Data Store Selector](https://github.com/lobehub/lobe-chat/wiki/State-Management) | [数据存储取数模块](https://github.com/lobehub/lobe-chat/wiki/State-Management)
+- [Best Practices for State Management](https://github.com/lobehub/lobe-chat/wiki/State-Management-Intro) | [状态管理最佳实践](https://github.com/lobehub/lobe-chat/wiki/State-Management-Intro.zh-CN)
+  - [Data Store Selector](https://github.com/lobehub/lobe-chat/wiki/State-Management-Selector) | [数据存储取数模块](https://github.com/lobehub/lobe-chat/wiki/State-Management-Selector.zh-CN)
 - [Conversation API Implementation Logic](https://github.com/lobehub/lobe-chat/wiki/Chat-API) | [会话 API 实现逻辑](https://github.com/lobehub/lobe-chat/wiki/Chat-API.zh-CN)
 - [How to Develop a New Feature](https://github.com/lobehub/lobe-chat/wiki/Feature-Development) | [如何开发一个新功能](https://github.com/lobehub/lobe-chat/wiki/Feature-Development.zh-CN)
 - [Internationalization Implementation Guide](https://github.com/lobehub/lobe-chat/wiki/Internationalization-Implementation) | [国际化实现指南](https://github.com/lobehub/lobe-chat/wiki/Internationalization-Implementation.zh-CN)

package/docs/_Sidebar.md

@@ -23,13 +23,13 @@
 
 #### ⌨️ Development
 
-- [Technical Development Getting Started Guide](https://github.com/lobehub/lobe-chat/wiki/index) | [技术开发上手指南](https://github.com/lobehub/lobe-chat/wiki/index.zh-CN)
+- [Technical Development Getting Started Guide](https://github.com/lobehub/lobe-chat/wiki/Intro) | [技术开发上手指南](https://github.com/lobehub/lobe-chat/wiki/Intro.zh-CN)
 - [Code Style and Contribution Guidelines](https://github.com/lobehub/lobe-chat/wiki/Contributing-Guidelines) | [代码风格与贡献指南](https://github.com/lobehub/lobe-chat/wiki/Contributing-Guidelines.zh-CN)
 - [Environment Setup Guide](https://github.com/lobehub/lobe-chat/wiki/Setup-Development) | [环境设置指南](https://github.com/lobehub/lobe-chat/wiki/Setup-Development.zh-CN)
 - [Architecture Design](https://github.com/lobehub/lobe-chat/wiki/Architecture) | [架构设计](https://github.com/lobehub/lobe-chat/wiki/Architecture.zh-CN)
 - [Directory Structure](https://github.com/lobehub/lobe-chat/wiki/Folder-Structure) | [目录架构](https://github.com/lobehub/lobe-chat/wiki/Folder-Structure.zh-CN)
-- [Best Practices for State Management](https://github.com/lobehub/lobe-chat/wiki/State-Management) | [状态管理最佳实践](https://github.com/lobehub/lobe-chat/wiki/State-Management)
-  - [Data Store Selector](https://github.com/lobehub/lobe-chat/wiki/State-Management) | [数据存储取数模块](https://github.com/lobehub/lobe-chat/wiki/State-Management)
+- [Best Practices for State Management](https://github.com/lobehub/lobe-chat/wiki/State-Management-Intro) | [状态管理最佳实践](https://github.com/lobehub/lobe-chat/wiki/State-Management-Intro.zh-CN)
+  - [Data Store Selector](https://github.com/lobehub/lobe-chat/wiki/State-Management-Selector) | [数据存储取数模块](https://github.com/lobehub/lobe-chat/wiki/State-Management-Selector.zh-CN)
 - [Conversation API Implementation Logic](https://github.com/lobehub/lobe-chat/wiki/Chat-API) | [会话 API 实现逻辑](https://github.com/lobehub/lobe-chat/wiki/Chat-API.zh-CN)
 - [How to Develop a New Feature](https://github.com/lobehub/lobe-chat/wiki/Feature-Development) | [如何开发一个新功能](https://github.com/lobehub/lobe-chat/wiki/Feature-Development.zh-CN)
 - [Internationalization Implementation Guide](https://github.com/lobehub/lobe-chat/wiki/Internationalization-Implementation) | [国际化实现指南](https://github.com/lobehub/lobe-chat/wiki/Internationalization-Implementation.zh-CN)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.120.3",
+  "version": "0.120.4",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -105,6 +105,7 @@
     "modern-screenshot": "^4",
     "nanoid": "^5",
     "next": "^14.0.2",
+    "nuqs": "^1.15.4",
     "openai": "^4.17.3",
     "polished": "^4",
     "posthog-js": "^1",
@@ -135,7 +136,7 @@
     "yaml": "^2",
     "zod": "^3",
     "zustand": "^4.4",
-    "zustand-utils": "^1"
+    "zustand-utils": "^1.3.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^18",

package/src/app/chat/(desktop)/features/ChatHeader.tsx

@@ -9,7 +9,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
-import { useSessionChatInit, useSessionStore } from '@/store/session';
+import { useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';
 
@@ -19,11 +19,12 @@ import ShareButton from '../../features/ChatHeader/ShareButton';
 
 const Left = memo(() => {
   const { t } = useTranslation('chat');
-  const init = useSessionChatInit();
+
   const router = useRouter();
 
-  const [isInbox, title, description, avatar, backgroundColor, model, plugins] = useSessionStore(
-    (s) => [
+  const [init, isInbox, title, description, avatar, backgroundColor, model, plugins] =
+    useSessionStore((s) => [
+      sessionSelectors.isSomeSessionActive(s),
       sessionSelectors.isInboxSession(s),
       agentSelectors.currentAgentTitle(s),
       agentSelectors.currentAgentDescription(s),
@@ -31,8 +32,7 @@ const Left = memo(() => {
       agentSelectors.currentAgentBackgroundColor(s),
       agentSelectors.currentAgentModel(s),
       agentSelectors.currentAgentPlugins(s),
-    ],
-  );
+    ]);
 
   const displayTitle = isInbox ? t('inbox.title') : title;
   const displayDesc = isInbox ? t('inbox.desc') : description;

package/src/app/chat/{features → (desktop)/features/SideBar}/SystemRole/index.tsx

@@ -9,33 +9,36 @@ import useMergeState from 'use-merge-value';
 
 import AgentInfo from '@/features/AgentInfo';
 import { useGlobalStore } from '@/store/global';
-import { useSessionChatInit, useSessionStore } from '@/store/session';
-import { agentSelectors } from '@/store/session/selectors';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';
 
-import SidebarHeader from '../SidebarHeader';
+import SidebarHeader from '../../../../components/SidebarHeader';
 import { useStyles } from './style';
 
 const SystemRole = memo(() => {
   const router = useRouter();
   const [editing, setEditing] = useState(false);
   const { styles } = useStyles();
-  const [systemRole, meta, updateAgentConfig] = useSessionStore((s) => [
+
+  const [init, systemRole, meta, updateAgentConfig] = useSessionStore((s) => [
+    sessionSelectors.isSomeSessionActive(s),
     agentSelectors.currentAgentSystemRole(s),
     agentSelectors.currentAgentMeta(s),
     s.updateAgentConfig,
   ]);
+
   const [showSystemRole, toggleSystemRole] = useGlobalStore((s) => [
     s.preference.showSystemRole,
     s.toggleSystemRole,
   ]);
+
   const [open, setOpen] = useMergeState(false, {
     defaultValue: showSystemRole,
     onChange: toggleSystemRole,
     value: showSystemRole,
   });
 
-  const init = useSessionChatInit();
   const { t } = useTranslation('common');
 
   const handleOpenWithEdit = () => {

package/src/app/chat/(desktop)/features/{SideBar.tsx → SideBar/index.tsx}

@@ -3,15 +3,14 @@ import { createStyles } from 'antd-style';
 import dynamic from 'next/dynamic';
 import { memo } from 'react';
 
+import TopicListContent from '@/app/chat/features/TopicListContent';
 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/selectors';
 
-import TopicListContent from '../../features/TopicListContent';
-
-const SystemRole = dynamic(() => import('../../features/SystemRole'));
+const SystemRole = dynamic(() => import('./SystemRole'));
 
 const useStyles = createStyles(({ css, token }) => ({
   content: css`

package/src/app/chat/(mobile)/index.tsx

@@ -1,17 +1,30 @@
 'use client';
 
-import { memo } from 'react';
+import { useRouter } from 'next/navigation';
+import { memo, useEffect } from 'react';
+
+import AppLayoutMobile from '@/layout/AppLayout.mobile';
+import { useSwitchSideBarOnInit } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/slices/common/initialState';
 
 import PageTitle from '../features/PageTitle';
+import SessionHeader from './features/SessionHeader';
 import SessionList from './features/SessionList';
-import Layout from './layout.mobile';
 
 const ChatMobilePage = memo(() => {
+  useSwitchSideBarOnInit(SidebarTabKey.Chat);
+
+  const router = useRouter();
+  useEffect(() => {
+    router.prefetch('/chat/mobile');
+    router.prefetch('/settings');
+  }, []);
+
   return (
-    <Layout>
+    <AppLayoutMobile navBar={<SessionHeader />} showTabBar>
       <PageTitle />
       <SessionList />
-    </Layout>
+    </AppLayoutMobile>
   );
 });
 

package/src/app/chat/(mobile)/mobile/page.tsx

@@ -1,3 +1,31 @@
-import Index from './index';
+'use client';
 
-export default () => <Index />;
+import dynamic from 'next/dynamic';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import ChatHeader from '@/app/chat/(mobile)/features/ChatHeader';
+import Conversation from '@/features/Conversation';
+import AppLayoutMobile from '@/layout/AppLayout.mobile';
+import { useSessionStore } from '@/store/session';
+
+import ChatInput from '../features/ChatInput';
+
+const TopicList = dynamic(() => import('../features/TopicList'));
+
+const Chat = memo(() => {
+  // due to mobile side don't have sessionList, so we need to fetch sessions here
+  // refs: https://github.com/lobehub/lobe-chat/pull/541
+  const useFetchSessions = useSessionStore((s) => s.useFetchSessions);
+  useFetchSessions();
+
+  return (
+    <AppLayoutMobile navBar={<ChatHeader />}>
+      <Flexbox height={'calc(100% - 44px)'} horizontal>
+        <Conversation chatInput={<ChatInput />} mobile />
+        <TopicList />
+      </Flexbox>
+    </AppLayoutMobile>
+  );
+});
+export default Chat;

package/src/app/chat/components/SessionHydration/index.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { useResponsive } from 'antd-style';
+import { useRouter } from 'next/navigation';
+import { useQueryState } from 'nuqs';
+import { parseAsString } from 'nuqs/parsers';
+import { memo, useEffect } from 'react';
+import { createStoreUpdater } from 'zustand-utils';
+
+import { useSessionStore } from '@/store/session';
+
+// sync outside state to useSessionStore
+const SessionHydration = memo(() => {
+  const useStoreUpdater = createStoreUpdater(useSessionStore);
+
+  const { mobile } = useResponsive();
+  useStoreUpdater('isMobile', mobile);
+
+  const router = useRouter();
+  // TODO: 后续可以把 router 从 useSessionStore 移除
+  useStoreUpdater('router', router);
+
+  // two-way bindings the url and session store
+  const [session, setSession] = useQueryState(
+    'session',
+    parseAsString.withDefault('inbox').withOptions({ history: 'replace', throttleMs: 500 }),
+  );
+  useStoreUpdater('activeId', session);
+
+  useEffect(() => {
+    const unsubscribe = useSessionStore.subscribe(
+      (s) => s.activeId,
+      (state) => setSession(state),
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  return null;
+});
+
+export default SessionHydration;

package/src/app/chat/features/SessionListContent/DefaultMode.tsx

@@ -16,13 +16,18 @@ const SessionListContent = memo(() => {
   const { t } = useTranslation('chat');
   const unpinnedSessionList = useSessionStore(sessionSelectors.unpinnedSessionList, isEqual);
   const pinnedList = useSessionStore(sessionSelectors.pinnedSessionList, isEqual);
-  const hasPinnedSessionList = useSessionStore(sessionSelectors.hasPinnedSessionList);
+  const [hasPinnedSessionList, useFetchSessions] = useSessionStore((s) => [
+    sessionSelectors.hasPinnedSessionList(s),
+    s.useFetchSessions,
+  ]);
 
   const [sessionGroupKeys, updatePreference] = useGlobalStore((s) => [
     preferenceSelectors.sessionGroupKeys(s),
     s.updatePreference,
   ]);
 
+  useFetchSessions();
+
   const items = [
     hasPinnedSessionList && {
       children: <SessionList dataSource={pinnedList} />,

package/src/app/chat/features/SessionListContent/List/index.tsx

@@ -4,7 +4,8 @@ import { memo } from 'react';
 import LazyLoad from 'react-lazy-load';
 
 import { SESSION_CHAT_URL } from '@/const/url';
-import { useSessionHydrated, useSessionStore } from '@/store/session';
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/selectors';
 import { LobeAgentSession } from '@/types/session';
 
 import AddButton from './AddButton';
@@ -21,9 +22,12 @@ interface SessionListProps {
   dataSource: LobeAgentSession[];
 }
 const SessionList = memo<SessionListProps>(({ dataSource }) => {
-  const [activeSession, switchSession] = useSessionStore((s) => [s.activeSession, s.switchSession]);
+  const [activeSession, switchSession, isInit] = useSessionStore((s) => [
+    s.activeSession,
+    s.switchSession,
+    sessionSelectors.isSessionListInit(s),
+  ]);
   const { styles } = useStyles();
-  const isInit = useSessionHydrated();
 
   const { mobile } = useResponsive();
 

package/src/app/chat/features/TopicListContent/Header.tsx

@@ -8,7 +8,7 @@ import { Flexbox } from 'react-layout-kit';
 import { useChatStore } from '@/store/chat';
 import { topicSelectors } from '@/store/chat/selectors';
 
-import SidebarHeader from '../SidebarHeader';
+import SidebarHeader from '../../components/SidebarHeader';
 import TopicSearchBar from './TopicSearchBar';
 
 const Header = memo(() => {

package/src/app/chat/page.tsx

@@ -2,6 +2,7 @@ import { isMobileDevice } from '@/utils/responsive';
 
 import DesktopPage from './(desktop)';
 import MobilePage from './(mobile)';
+import SessionHydration from './components/SessionHydration';
 import Migration from './features/Migration';
 
 const Page = () => {
@@ -10,9 +11,12 @@ const Page = () => {
   const Page = mobile ? MobilePage : DesktopPage;
 
   return (
-    <Migration>
-      <Page />
-    </Migration>
+    <>
+      <Migration>
+        <Page />
+      </Migration>
+      <SessionHydration />
+    </>
   );
 };
 

package/src/app/home/Redirect.tsx

@@ -24,11 +24,11 @@ const Redirect = memo(() => {
       useGlobalStore.getState().switchSideBar(SidebarTabKey.Chat);
 
       if (hasData) {
-        router.push('/chat');
+        router.replace('/chat');
 
         switchSession();
       } else {
-        router.push('/welcome');
+        router.replace('/welcome');
       }
     });
   }, []);

package/src/app/metadata.ts

@@ -1,9 +1,14 @@
 import { Metadata } from 'next';
 
+import { getServerConfig } from '@/config/server';
+
 import pkg from '../../package.json';
 
 const title = 'LobeChat';
 const { description, homepage } = pkg;
+
+const { METADATA_BASE_URL = 'https://chat-preview.lobehub.com/' } = getServerConfig();
+
 const metadata: Metadata = {
   appleWebApp: {
     statusBarStyle: 'black-translucent',
@@ -18,6 +23,7 @@ const metadata: Metadata = {
       'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/favicon.ico',
   },
   manifest: '/manifest.json',
+  metadataBase: new URL(METADATA_BASE_URL),
   openGraph: {
     description: description,
     images: [

package/src/app/welcome/features/Banner/index.tsx

@@ -3,11 +3,13 @@
 import { Icon } from '@lobehub/ui';
 import { Button } from 'antd';
 import { SendHorizonal } from 'lucide-react';
+import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import DataImporter from '@/features/DataImporter';
+import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 
 import Hero from './Hero';
@@ -15,13 +17,10 @@ import { useStyles } from './style';
 
 const Banner = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('welcome');
+  const router = useRouter();
   const { styles } = useStyles();
-  const [switchSession, switchBackToChat, router, isMobile] = useSessionStore((s) => [
-    s.switchSession,
-    s.switchBackToChat,
-    s.router,
-    s.isMobile,
-  ]);
+  const [switchSession] = useSessionStore((s) => [s.switchSession]);
+  const [switchBackToChat, isMobile] = useGlobalStore((s) => [s.switchBackToChat, s.isMobile]);
 
   return (
     <>
@@ -46,7 +45,7 @@ const Banner = memo<{ mobile?: boolean }>(({ mobile }) => {
         </DataImporter>
         <Button
           block={mobile}
-          onClick={() => (isMobile ? router?.push('/chat') : switchBackToChat())}
+          onClick={() => (isMobile ? router.push('/chat') : switchBackToChat())}
           size={'large'}
           type={'primary'}
         >

package/src/components/StoreHydration/ChatHydration/index.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useQueryState } from 'nuqs';
+import { memo, useEffect } from 'react';
+import { createStoreUpdater } from 'zustand-utils';
+
+import { useChatStore } from '@/store/chat';
+
+// sync outside state to useChatStore
+const ChatHydration = memo(() => {
+  const useStoreUpdater = createStoreUpdater(useChatStore);
+
+  // two-way bindings the topic params to chat store
+  const [topic, setTopic] = useQueryState('topic', { history: 'replace', throttleMs: 500 });
+  useStoreUpdater('activeTopicId', topic);
+
+  useEffect(() => {
+    const unsubscribe = useChatStore.subscribe(
+      (s) => s.activeTopicId,
+      (state) => {
+        setTopic(!state ? null : state);
+      },
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  return null;
+});
+
+export default ChatHydration;