@lobehub/chat 1.77.18 → 1.79.0

package/{contributing/Basic/Setup-Development.zh-CN.md → docs/development/basic/setup-development.zh-CN.mdx}

@@ -2,13 +2,6 @@
 
 欢迎阅读 LobeChat 的开发环境设置指南。
 
-#### TOC
-
-- [在线开发](#在线开发)
-- [本地开发](#本地开发)
-  - [开发环境需求](#开发环境需求)
-  - [项目设置](#项目设置)
-
 ## 在线开发
 
 如果你有 GitHub Codespaces 的使用权限，可以点击下方按钮一键进入在线开发环境：

package/{contributing/Basic/Test.md → docs/development/basic/test.mdx}

@@ -2,21 +2,13 @@
 
 LobeChat's testing strategy includes unit testing and end-to-end (E2E) testing. Below are detailed explanations of each type of testing:
 
-#### TOC
-
-- [Unit Testing](#unit-testing)
-- [🚧 End-to-End Testing](#-end-to-end-testing)
-- [Development Testing](#development-testing)
-  - [1. Unit Testing](#1-unit-testing)
-- [Testing Strategy](#testing-strategy)
-
 ## Unit Testing
 
 Unit testing is used to test the functionality of independent units in the application, such as components, functions, utility functions, etc. We use [vitest][vitest-url] for unit testing.
 
 To run unit tests, you can use the following command:
 
-```
+```bash
 npm run test
 ```
 
@@ -42,7 +34,7 @@ Before writing unit tests, you need to create a directory with the same name as
 
 In the test file, you can use the `describe` and `it` functions to organize and write test cases. The `describe` function is used to create a test suite, and the `it` function is used to write specific test cases.
 
-```typescript
+```ts
 import { formatNumber } from './formatNumber';
 
 describe('formatNumber', () => {
@@ -64,7 +56,7 @@ In test cases, you can use the `expect` function to assert whether the test resu
 
 Execute unit tests by running the following command:
 
-```
+```bash
 npm run test
 ```
 

package/{contributing/Basic/Test.zh-CN.md → docs/development/basic/test.zh-CN.mdx}

@@ -2,21 +2,13 @@
 
 LobeChat 的测试策略包括单元测试和端到端 (E2E) 测试。下面是每种测试的详细说明：
 
-#### TOC
-
-- [单元测试](#单元测试)
-- [🚧 端到端测试](#-端到端测试)
-- [开发测试](#开发测试)
-  - [1. 单元测试](#1-单元测试)
-- [测试策略](#测试策略)
-
 ## 单元测试
 
 单元测试用于测试应用中的独立单元（如组件、函数、工具函数等）的功能。我们使用 [vitest][vitest-url] 进行单元测试。
 
 要运行单元测试，可以使用以下命令：
 
-```
+```bash
 npm run test
 ```
 
@@ -42,7 +34,7 @@ npm run test
 
 在测试文件中，您可以使用 `describe` 和 `it` 函数来组织和编写测试用例。`describe` 函数用于创建测试套件，`it` 函数用于编写具体的测试用例。
 
-```typescript
+```ts
 import { formatNumber } from './formatNumber';
 
 describe('formatNumber', () => {
@@ -64,7 +56,7 @@ describe('formatNumber', () => {
 
 通过运行以下命令来执行单元测试：
 
-```
+```bash
 npm run test
 ```
 

package/{contributing/Internationalization/Add-New-Locale.md → docs/development/internationalization/add-new-locale.mdx}

@@ -2,14 +2,6 @@
 
 LobeChat uses [lobe-i18n](https://github.com/lobehub/lobe-cli-toolbox/tree/master/packages/lobe-i18n) as the i18n solution, which allows for quick addition of new language support in the application.
 
-## TOC
-
-- [Adding New Language Support](#adding-new-language-support)
-  - [Step 1: Update the Internationalization Configuration File](#step-1-update-the-internationalization-configuration-file)
-  - [Step 2: Automatically Translate Language Files](#step-2-automatically-translate-language-files)
-  - [Step 3: Submit and Review Your Changes](#step-3-submit-and-review-your-changes)
-  - [Additional Information](#additional-information)
-
 ## Adding New Language Support
 
 To add new language internationalization support in LobeChat (for example, adding Vietnamese `vi-VN`), please follow the steps below:

package/{contributing/Internationalization/Add-New-Locale.zh-CN.md → docs/development/internationalization/add-new-locale.zh-CN.mdx}

@@ -2,14 +2,6 @@
 
 LobeChat 使用 [lobe-i18n](https://github.com/lobehub/lobe-cli-toolbox/tree/master/packages/lobe-i18n) 作为 i18n 解决方案，可以在应用中快速添加新的语言支持。
 
-## TOC
-
-- [添加新的语言支持](#添加新的语言支持)
-  - [步骤 1: 更新国际化配置文件](#步骤-1-更新国际化配置文件)
-  - [步骤 2: 自动翻译语言文件](#步骤-2-自动翻译语言文件)
-  - [步骤 3: 提交和审查你的更改](#步骤-3-提交和审查你的更改)
-  - [附加信息](#附加信息)
-
 ## 添加新的语言支持
 
 为了在 LobeChat 中添加新的语言国际化支持，（例如添加越南语 `vi-VN`)，请按照以下步骤操作：

package/{contributing/Internationalization/Internationalization-Implementation.md → docs/development/internationalization/internationalization-implementation.mdx}

@@ -2,14 +2,6 @@
 
 Welcome to the LobeChat Internationalization Implementation Guide. This document will guide you through understanding the internationalization mechanism of LobeChat, including file structure and how to add new languages. LobeChat uses `i18next` and `lobe-i18n` as the internationalization solution, aiming to provide users with seamless multilingual support.
 
-## TOC
-
-- [Internationalization Overview](#internationalization-overview)
-- [File Structure](#file-structure)
-- [Core Implementation Logic](#core-implementation-logic)
-- [Adding Support for New Languages](#adding-support-for-new-languages)
-- [Resources and Further Reading](#resources-and-further-reading)
-
 ## Internationalization Overview
 
 Internationalization (i18n for short) is the process of enabling an application to adapt to different languages and regions. In LobeChat, we support multiple languages and achieve dynamic language switching and content localization through the `i18next` library. Our goal is to provide a localized experience for global users.
@@ -23,7 +15,7 @@ In the LobeChat project, internationalization-related files are organized as fol
 
 In the directory structure of `src/locales`, the `default` folder contains the original translation files (Chinese), while each other language folder contains JSON translation files for the respective language. The files in each language folder correspond to the TypeScript files in the `default` folder, ensuring consistency in the structure of translation files across languages.
 
-```
+```bash
 src/locales
 ├── create.ts
 ├── default
@@ -42,7 +34,7 @@ src/locales
 
 The file structure generated by lobe-i18n is as follows:
 
-```
+```bash
 locales
 ├── ar
 │   ├── chat.json
@@ -115,7 +107,7 @@ We have already supported a variety of languages globally through the following
 - [🌐 feat(locale): Add fr-FR (#637) #645](https://github.com/lobehub/lobe-chat/pull/645)
 - [🌐 Add russian localy #137](https://github.com/lobehub/lobe-chat/pull/137)
 
-To add support for new languages, please refer to the detailed steps in the [New Locale Addition Guide](Add-New-Locale.en-US).
+To add support for new languages, please refer to the detailed steps in the [New Locale Addition Guide](add-new-locale).
 
 ## Resources and Further Reading
 

package/{contributing/Internationalization/Internationalization-Implementation.zh-CN.md → docs/development/internationalization/internationalization-implementation.zh-CN.mdx}

@@ -2,14 +2,6 @@
 
 欢迎阅读 LobeChat 国际化实现指南。本文档将指导你了解 LobeChat 的国际化机制，包括文件结构、如何添加新语种。LobeChat 采用 `i18next` 和 `lobe-i18n` 作为国际化解决方案，旨在为用户提供流畅的多语言支持。
 
-## TOC
-
-- [国际化概述](#国际化概述)
-- [文件结构](#文件结构)
-- [核心实现逻辑](#核心实现逻辑)
-- [添加新的语言支持](#添加新的语言支持)
-- [资源和进一步阅读](#资源和进一步阅读)
-
 ## 国际化概述
 
 国际化（Internationalization，简称为 i18n）是一个让应用能够适应不同语言和地区的过程。在 LobeChat 中，我们支持多种语言，并通过 `i18next` 库来实现语言的动态切换和内容的本地化。我们的目标是让 LobeChat 能够为全球用户提供本地化的体验。
@@ -23,7 +15,7 @@
 
 在 `src/locales` 这个目录结构中，`default` 文件夹包含了原始的翻译文件（中文），其他每个语言文件夹则包含了相应语言的 JSON 翻译文件。每个语言文件夹中的文件对应 `default` 文件夹中的 TypeScript 文件，确保了各语种之间的翻译文件结构一致性。
 
-```
+```bash
 src/locales
 ├── create.ts
 ├── default
@@ -42,7 +34,7 @@ src/locales
 
 通过 lobe-i18n 自动生成的文件结构如下：
 
-```
+```bash
 locales
 ├── ar
 │   ├── chat.json
@@ -115,7 +107,7 @@ const createI18nInstance = (lang) => {
 - [🌐 feat(locale): Add fr-FR (#637) #645](https://github.com/lobehub/lobe-chat/pull/645)
 - [🌐 Add russian localy #137](https://github.com/lobehub/lobe-chat/pull/137)
 
-要添加新的语种支持， 详细步骤请参考：[新语种添加指南](Add-New-Locale.zh-CN.md)。
+要添加新的语种支持， 详细步骤请参考：[新语种添加指南](/zh/docs/development/internationalization/add-new-locale)。
 
 ## 资源和进一步阅读
 

package/{contributing/Others/Lighthouse.md → docs/development/others/lighthouse.mdx}

@@ -1,28 +1,23 @@
 # Lighthouse Reports
 
-#### TOC
-
-- [Chat Page](#chat-page)
-- [Discover Page](#discover-page)
-
 ## Chat Page
 
 > **Info**\
-> <https://lobechat.com/chat>
+> [https://lobechat.com/chat](https://lobechat.com/chat)
 
-|                   Desktop                    |                   Mobile                    |
-| :------------------------------------------: | :-----------------------------------------: |
-|              ![][chat-desktop]               |              ![][chat-mobile]               |
+|                   Desktop                   |                   Mobile                   |
+| :-----------------------------------------: | :----------------------------------------: |
+|              ![][chat-desktop]              |              ![][chat-mobile]              |
 | [⚡️ Lighthouse Report][chat-desktop-report] | [⚡️ Lighthouse Report][chat-mobile-report] |
 
 ## Discover Page
 
 > **Info**\
-> <https://lobechat.com/discover>
+> [https://lobechat.com/discover](https://lobechat.com/discover)
 
-|                     Desktop                      |                     Mobile                      |
-| :----------------------------------------------: | :---------------------------------------------: |
-|              ![][discover-desktop]               |              ![][discover-mobile]               |
+|                     Desktop                     |                     Mobile                     |
+| :---------------------------------------------: | :--------------------------------------------: |
+|              ![][discover-desktop]              |              ![][discover-mobile]              |
 | [⚡️ Lighthouse Report][discover-desktop-report] | [⚡️ Lighthouse Report][discover-mobile-report] |
 
 [chat-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/desktop/pagespeed.svg

package/{contributing/Others/Lighthouse.zh-CN.md → docs/development/others/lighthouse.zh-CN.mdx}

@@ -1,28 +1,23 @@
 # Lighthouse 测试报告
 
-#### TOC
-
-- [Chat 聊天页面](#chat-聊天页面)
-- [Discover 发现页面](#discover-发现页面)
-
 ## Chat 聊天页面
 
 > **Info**\
-> <https://lobechat.com/chat>
+> [https://lobechat.com/chat](https://lobechat.com/chat)
 
-|                   Desktop                    |                   Mobile                    |
-| :------------------------------------------: | :-----------------------------------------: |
-|              ![][chat-desktop]               |              ![][chat-mobile]               |
+|                   Desktop                   |                   Mobile                   |
+| :-----------------------------------------: | :----------------------------------------: |
+|              ![][chat-desktop]              |              ![][chat-mobile]              |
 | [⚡️ Lighthouse Report][chat-desktop-report] | [⚡️ Lighthouse Report][chat-mobile-report] |
 
 ## Discover 发现页面
 
 > **Info**\
-> <https://lobechat.com/discover>
+> [https://lobechat.com/discover](https://lobechat.com/discover)
 
-|                     Desktop                      |                     Mobile                      |
-| :----------------------------------------------: | :---------------------------------------------: |
-|              ![][discover-desktop]               |              ![][discover-mobile]               |
+|                     Desktop                     |                     Mobile                     |
+| :---------------------------------------------: | :--------------------------------------------: |
+|              ![][discover-desktop]              |              ![][discover-mobile]              |
 | [⚡️ Lighthouse Report][discover-desktop-report] | [⚡️ Lighthouse Report][discover-mobile-report] |
 
 [chat-desktop]: https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/desktop/pagespeed.svg

package/{contributing/Basic/Intro.md → docs/development/start.mdx}

@@ -2,15 +2,6 @@
 
 Welcome to the LobeChat Technical Development Getting Started Guide. LobeChat is an AI conversation application built on the Next.js framework, incorporating a range of technology stacks to achieve diverse functionalities and features. This guide will detail the main technical components of LobeChat and how to configure and use these technologies in your development environment.
 
-#### TOC
-
-- [Basic Technology Stack](#basic-technology-stack)
-- [Folder Directory Structure](#folder-directory-structure)
-- [Local Development Environment Setup](#local-development-environment-setup)
-- [Code Style and Contribution Guide](#code-style-and-contribution-guide)
-- [Internationalization Implementation Guide](#internationalization-implementation-guide)
-- [Appendix: Resources and References](#appendix-resources-and-references)
-
 ## Basic Technology Stack
 
 The core technology stack of LobeChat is as follows:
@@ -44,7 +35,7 @@ src
 └── utils      # General utility functions
 ```
 
-For a detailed introduction to the directory structure, see: [Folder Directory Structure](Folder-Structure.zh-CN.md)
+For a detailed introduction to the directory structure, see: [Folder Directory Structure](/docs/development/basic/folder-structure)
 
 ## Local Development Environment Setup
 
@@ -79,7 +70,7 @@ bun run dev
 > \[!IMPORTANT]\
 > If you encounter the error "Could not find 'stylelint-config-recommended'" when installing dependencies with `npm`, please reinstall the dependencies using `pnpm` or `bun`.
 
-Now, you should be able to see the welcome page of LobeChat in your browser. For a detailed environment setup guide, please refer to [Development Environment Setup Guide](Setup-Development.zh-CN.md).
+Now, you should be able to see the welcome page of LobeChat in your browser. For a detailed environment setup guide, please refer to [Development Environment Setup Guide](/docs/development/basic/setup-development).
 
 ## Code Style and Contribution Guide
 
@@ -90,7 +81,7 @@ In the LobeChat project, we place great emphasis on the quality and consistency
 
 All contributions will undergo code review. Maintainers may suggest modifications or requirements. Please respond actively to review comments and make timely adjustments. We look forward to your participation and contribution.
 
-For detailed code style and contribution guidelines, please refer to [Code Style and Contribution Guide](Contributing-Guidelines.zh-CN.md).
+For detailed code style and contribution guidelines, please refer to [Code Style and Contribution Guide](/docs/development/basic/contributing-guidelines).
 
 ## Internationalization Implementation Guide
 
@@ -98,13 +89,13 @@ LobeChat uses `i18next` and `lobe-i18n` to implement multilingual support, ensur
 
 Internationalization files are located in `src/locales`, containing the default language (Chinese). We generate other language JSON files automatically through `lobe-i18n`.
 
-If you want to add a new language, follow specific steps detailed in [New Language Addition Guide](../Internationalization/Add-New-Locale.zh-CN.md). We encourage you to participate in our internationalization efforts to provide better services to global users.
+If you want to add a new language, follow specific steps detailed in [New Language Addition Guide](/docs/development/internationalization/add-new-locale). We encourage you to participate in our internationalization efforts to provide better services to global users.
 
-For a detailed guide on internationalization implementation, please refer to [Internationalization Implementation Guide](../Internationalization/Internationalization-Implementation.zh-CN.md).
+For a detailed guide on internationalization implementation, please refer to [Internationalization Implementation Guide](/docs/development/internationalization/internationalization-implementation).
 
 ## Appendix: Resources and References
 
-To support developers in better understanding and using the technology stack of LobeChat, we provide a comprehensive list of resources and references — [LobeChat Resources and References](https://github.com/lobehub/lobe-chat/wiki/Resources.zh-CN) - Visit our maintained list of resources, including tutorials, articles, and other useful links.
+To support developers in better understanding and using the technology stack of LobeChat, we provide a comprehensive list of resources and references — [LobeChat Resources and References](/docs/development/basic/resources) - Visit our maintained list of resources, including tutorials, articles, and other useful links.
 
 We encourage developers to utilize these resources to deepen their learning and enhance their skills, join community discussions through [LobeChat GitHub Discussions](https://github.com/lobehub/lobe-chat/discussions) or [Discord](https://discord.com/invite/AYFPHvv2jT), ask questions, or share your experiences.
 

package/{contributing/Basic/Intro.zh-CN.md → docs/development/start.zh-CN.mdx}

@@ -2,15 +2,6 @@
 
 欢迎来到 LobeChat 技术开发上手指南。LobeChat 是一款基于 Next.js 框架构建的 AI 会话应用，它汇集了一系列的技术栈，以实现多样化的功能和特性。本指南将详细介绍 LobeChat 的主要技术组成，以及如何在你的开发环境中配置和使用这些技术。
 
-#### TOC
-
-- [基础技术栈](#基础技术栈)
-- [文件夹目录架构](#文件夹目录架构)
-- [本地开发环境设置](#本地开发环境设置)
-- [代码风格与贡献指南](#代码风格与贡献指南)
-- [国际化实现指南](#国际化实现指南)
-- [附录：资源与参考](#附录资源与参考)
-
 ## 基础技术栈
 
 LobeChat 的核心技术栈如下：
@@ -44,7 +35,7 @@ src
 └── utils      # 通用的工具函数
 ```
 
-有关目录架构的详细介绍，详见： [文件夹目录架构](Folder-Structure.zh-CN.md)
+有关目录架构的详细介绍，详见： [文件夹目录架构](/zh/docs/development/basic/folder-structure)
 
 ## 本地开发环境设置
 
@@ -79,7 +70,7 @@ bun run dev
 > \[!IMPORTANT]\
 > 如果使用`npm`安装依赖出现`Could not find "stylelint-config-recommended"`错误，请使用 `pnpm` 或者 `bun` 重新安装依赖。
 
-现在，你应该可以在浏览器中看到 LobeChat 的欢迎页面。详细的环境配置指南，请参考 [开发环境设置指南](Setup-Development.zh-CN.md)。
+现在，你应该可以在浏览器中看到 LobeChat 的欢迎页面。详细的环境配置指南，请参考 [开发环境设置指南](/zh/docs/development/basic/setup-development)。
 
 ## 代码风格与贡献指南
 
@@ -90,7 +81,7 @@ bun run dev
 
 所有的贡献都将经过代码审查。维护者可能会提出修改建议或要求。请积极响应审查意见，并及时做出调整，我们期待你的参与和贡献。
 
-详细的代码风格和贡献指南，请参考 [代码风格与贡献指南](Contributing-Guidelines.zh-CN.md)。
+详细的代码风格和贡献指南，请参考 [代码风格与贡献指南](/zh/docs/development/basic/contributing-guidelines)。
 
 ## 国际化实现指南
 
@@ -98,13 +89,13 @@ LobeChat 采用 `i18next` 和 `lobe-i18n` 实现多语言支持，确保用户
 
 国际化文件位于 `src/locales`，包含默认语言（中文）。 我们会通过 `lobe-i18n` 自动生成其他的语言 JSON 文件。
 
-如果要添加新语种，需遵循特定步骤，详见 [新语种添加指南](../Internationalization/Add-New-Locale.zh-CN.md)。 我们鼓励你参与我们的国际化努力，共同为全球用户提供更好的服务。
+如果要添加新语种，需遵循特定步骤，详见 [新语种添加指南](/zh/docs/development/internationalization/add-new-locale)。 我们鼓励你参与我们的国际化努力，共同为全球用户提供更好的服务。
 
-详细的国际化实现指南指南，请参考 [国际化实现指南](../Internationalization/Internationalization-Implementation.zh-CN.md)。
+详细的国际化实现指南，请参考 [国际化实现指南](/zh/docs/development/internationalization/internationalization-implementation)。
 
 ## 附录：资源与参考
 
-为了支持开发者更好地理解和使用 LobeChat 的技术栈，我们提供了一份详尽的资源与参考列表 —— [LobeChat 资源与参考](https://github.com/lobehub/lobe-chat/wiki/Resources.zh-CN) - 访问我们维护的资源列表，包括教程、文章和其他有用的链接。
+为了支持开发者更好地理解和使用 LobeChat 的技术栈，我们提供了一份详尽的资源与参考列表 —— [LobeChat 资源与参考](/zh/docs/development/basic/resources) - 访问我们维护的资源列表，包括教程、文章和其他有用的链接。
 
 我们鼓励开发者利用这些资源深入学习和提升技能，通过 [LobeChat GitHub Discussions](https://github.com/lobehub/lobe-chat/discussions) 或者 [Discord](https://discord.com/invite/AYFPHvv2jT) 加入社区讨论，提出问题或分享你的经验。
 

package/{contributing/State-Management/State-Management-Intro.md → docs/development/state-management/state-management-intro.mdx}

@@ -1,14 +1,9 @@
+{/* eslint-disable no-irregular-whitespace */}
+
 # Best Practices for State Management
 
 LobeChat differs from traditional CRUD web applications in that it involves a large amount of rich interactive capabilities. Therefore, it is crucial to design a data flow architecture that is easy to develop and maintain. This document will introduce the best practices for data flow management in LobeChat.
 
-## TOC
-
-- [Key Concepts](#key-concepts)
-- [Hierarchical Structure](#hierarchical-structure)
-  - [Best Practices for LobeChat SessionStore Directory Structure](#best-practices-for-lobechat-sessionstore-directory-structure)
-- [Implementation of SessionStore](#implementation-of-sessionstore)
-
 ## Key Concepts
 
 | Concept  | Explanation                                                                                                                                                                                                                                                                                                                                                                      |
@@ -151,7 +146,7 @@ src/store/session
 
 In LobeChat, the SessionStore is designed as the core module for managing session state and logic. It consists of multiple Slices, with each Slice managing a relevant portion of state and logic. Below is a simplified example of the SessionStore implementation:
 
-#### store.ts
+### store.ts
 
 ```ts
 import { PersistOptions, devtools, persist, subscribeWithSelector } from 'zustand/middleware';
@@ -192,7 +187,7 @@ export const useSessionStore = createWithEqualityFn<SessionStore>()(
 
 In this `store.ts` file, we create a `useSessionStore` hook that uses the `zustand` library to create a global state manager. We merge the initialState with the actions from each Slice to create a complete SessionStore.
 
-#### slices/session/action.ts
+### slices/session/action.ts
 
 ```ts
 import { StateCreator } from 'zustand';

package/{contributing/State-Management/State-Management-Intro.zh-CN.md → docs/development/state-management/state-management-intro.zh-CN.mdx}

@@ -1,24 +1,19 @@
+{/* eslint-disable no-irregular-whitespace */}
+
 # 状态管理最佳实践
 
 LobeChat 不同于传统 CRUD 的网页，存在大量的富交互能力，如何设计一个易于开发与易于维护的数据流架构非常重要。本篇文档将介绍 LobeChat 中的数据流管理最佳实践。
 
-## TOC
-
-- [概念要素](#概念要素)
-- [结构分层](#结构分层)
-  - [LobeChat SessionStore 目录结构最佳实践](#lobechat-sessionstore-目录结构最佳实践)
-- [SessionStore 的实现](#sessionstore-的实现)
-
 ## 概念要素
 
-| 概念名词 | 解释                                                                                                                                                                                                                                                                 |
-| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| store    | 状态库 (store)，包含存储应用的状态、动作。允许在应用渲染中访问和修改状态。                                                                                                                                                                                           |
-| state    | 状态 (state) 是指应用程序的数据，存储了应用程序的当前状态，状态的变化**一定会触发应用的重新渲染**，以反映新的状态。                                                                                                                                                  |
-| action   | 动作 (action) 是一个操作函数，它描述了应用程序中发生的交互事件。动作通常是由用户交互、网络请求或定时器等触发。 action 可以是**同步**的，也可以是**异步**的。                                                                                                         |
-| reducer  | 归约器 (reducer) 是一个纯函数，它接收当前状态和动作作为参数，并返回一个新的状态。它用于根据动作类型来更新应用程序的状态。Reducer 是一个纯函数，不存在副作用，因此一定是 **同步** 函数。                                                                              |
+| 概念名词     | 解释                                                                                                                                                   |
+| -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| store    | 状态库 (store)，包含存储应用的状态、动作。允许在应用渲染中访问和修改状态。                                                                                                            |
+| state    | 状态 (state) 是指应用程序的数据，存储了应用程序的当前状态，状态的变化**一定会触发应用的重新渲染**，以反映新的状态。                                                                                     |
+| action   | 动作 (action) 是一个操作函数，它描述了应用程序中发生的交互事件。动作通常是由用户交互、网络请求或定时器等触发。 action 可以是**同步**的，也可以是**异步**的。                                                          |
+| reducer  | 归约器 (reducer) 是一个纯函数，它接收当前状态和动作作为参数，并返回一个新的状态。它用于根据动作类型来更新应用程序的状态。Reducer 是一个纯函数，不存在副作用，因此一定是 **同步** 函数。                                             |
 | selector | 选择器 (selector) 是一个函数，用于从应用程序的状态中获取特定的数据。它接收应用程序的状态作为参数，并返回经过计算或转换后的数据。Selector 可以将状态的一部分或多个状态组合起来，以生成派生的数据。Selector 通常用于将应用程序的状态映射到组件的 props，以供组件使用。 |
-| slice    | 切片 (slice) 是一个概念，用于表达数据模型状态的一部分。它指定了一个状态切片（slice），以及与该切片相关的 state、action、reducer 和 selector。使用 Slice 可以将大型的 Store 拆分为更小的、可维护的子类型。                                                            |
+| slice    | 切片 (slice) 是一个概念，用于表达数据模型状态的一部分。它指定了一个状态切片（slice），以及与该切片相关的 state、action、reducer 和 selector。使用 Slice 可以将大型的 Store 拆分为更小的、可维护的子类型。                    |
 
 ## 结构分层
 
@@ -143,7 +138,7 @@ src/store/session
 
 在 LobeChat 中，SessionStore 被设计为管理会话状态和逻辑的核心模块。它由多个 Slices 组成，每个 Slice 管理一部分相关的状态和逻辑。下面是一个简化的 SessionStore 的实现示例：
 
-#### store.ts
+### store.ts
 
 ```ts
 import { PersistOptions, devtools, persist, subscribeWithSelector } from 'zustand/middleware';
@@ -184,7 +179,7 @@ export const useSessionStore = createWithEqualityFn<SessionStore>()(
 
 在这个 `store.ts` 文件中，我们创建了一个 `useSessionStore` 钩子，它使用 `zustand` 库来创建一个全局状态管理器。我们将 initialState 和每个 Slice 的动作合并，以创建完整的 SessionStore。
 
-#### slices/session/action.ts
+### slices/session/action.ts
 
 ```ts
 import { StateCreator } from 'zustand';

package/docs/self-hosting/advanced/auth/next-auth/keycloak.mdx

@@ -0,0 +1,119 @@
+---
+title: Configuring Keycloak Authentication Service in LobeChat
+description: >-
+  Learn how to configure the Keycloak authentication service in LobeChat,
+  including deployment, creation, permission settings, and environment
+  variables.
+tags:
+  - Keycloak Authentication
+  - Environment Variable Configuration
+  - Single Sign-On
+  - LobeChat
+---
+
+# Configuring Keycloak Authentication Service in LobeChat
+
+[Keycloak](https://www.keycloak.org/) is an open-source identity and access management solution that provides single sign-on, identity brokering, and social login features, suitable for modern applications and services.
+
+<Callout type={'tip'}>
+  If you want to privately deploy Keycloak, we recommend using it together with LobeChat via Docker Compose deployment for easier service management.
+</Callout>
+
+## Keycloak Configuration Process
+
+If you deploy using a local network IP, this guide assumes:
+
+- Your LobeChat database version IP/port is `http://LOBECHAT_IP:3210`.
+- Your privately deployed Keycloak domain is `http://KEYCLOAK_IP:8080`.
+
+If you deploy using a public network, this guide assumes:
+
+- Your LobeChat database version domain is `https://lobe.example.com`.
+- Your privately deployed Keycloak domain is `https://lobe-auth-api.example.com`.
+
+<Steps>
+  ### Create Keycloak Realm and Client
+
+  Access your privately deployed Keycloak admin console (default is `http://localhost:8080/admin`) and log in with the administrator account.
+
+  1. Create a new Realm
+     - Click the dropdown menu in the upper left corner and select "Create Realm"
+     - Enter a name, such as "LobeChat", then click "Create"
+
+  2. Create a Client
+     - Select "Clients" from the left menu, then click "Create client"
+     - Fill in the following information:
+       - Client ID: `lobechat`
+       - Client type: `OpenID Connect`
+       - Click "Next"
+     - On the "Capability config" page:
+       - Enable "Client authentication"
+       - Enable "Standard flow"
+       - Click "Next"
+     - On the "Login settings" page:
+       - Valid redirect URIs:
+         - Local development environment: `http://localhost:3210/api/auth/callback/keycloak`
+         - Local network IP deployment: `http://LOBECHAT_IP:3210/api/auth/callback/keycloak`
+         - Public environment: `https://lobe.example.com/api/auth/callback/keycloak`
+       - Web origins: Add your LobeChat domain or IP
+       - Click "Save"
+
+  3. Get Client Secret
+     - On the client details page, switch to the "Credentials" tab
+     - Copy the "Client secret" value, which will be needed later
+
+  ### Configure Users and Roles (Optional)
+
+  1. Create Users
+     - Select "Users" from the left menu, then click "Add user"
+     - Fill in the user information and click "Create"
+     - On the user details page, switch to the "Credentials" tab
+     - Set a password, and disable the "Temporary" option if needed
+     - Click "Set Password" to save
+
+  2. Create Roles and Permissions
+     - Select "Realm roles" from the left menu
+     - Click "Create role"
+     - Create necessary roles, such as "admin", "user", etc.
+     - Assign roles to users: On the user details page, switch to the "Role mapping" tab and assign appropriate roles
+
+  ### Disable Registration (Optional)
+
+  To ensure the security of your application, it's recommended to control Keycloak's registration functionality.
+
+  1. Select "Realm settings" from the left menu
+  2. Switch to the "Login" tab
+  3. In the "User registration" section, disable the "User registration" option
+  4. Click "Save" to save the settings
+
+  <Callout type={'warning'}>
+    If registration is not disabled, anyone might be able to register and log in to your application. Please configure according to your security requirements.
+  </Callout>
+
+  ### Configure Environment Variables
+
+  Set the obtained client ID and client secret as `AUTH_KEYCLOAK_ID` and `AUTH_KEYCLOAK_SECRET` in the LobeChat environment variables.
+
+  Configure the LobeChat environment variable `AUTH_KEYCLOAK_ISSUER` as:
+
+  - `http://localhost:8080/realms/LobeChat` for local development environment
+  - `http://KEYCLOAK_IP:8080/realms/LobeChat` for privately deployed Keycloak on a local network
+  - `https://lobe-auth-api.example.com/realms/LobeChat` for Keycloak deployed in a public environment
+
+  When deploying LobeChat, you need to configure the following environment variables:
+
+  | Environment Variable      | Type     | Description                                                                                                                                                                              |
+  | ------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+  | `NEXT_AUTH_SECRET`        | Required | Key used to encrypt Auth.js session tokens. You can generate a key using: `openssl rand -base64 32`                                                                                      |
+  | `NEXT_AUTH_SSO_PROVIDERS` | Required | Select the single sign-on provider for LobeChat. For Keycloak, fill in `keycloak`.                                                                                                       |
+  | `AUTH_KEYCLOAK_ID`        | Required | Keycloak client ID                                                                                                                                                                       |
+  | `AUTH_KEYCLOAK_SECRET`    | Required | Keycloak client secret                                                                                                                                                                   |
+  | `AUTH_KEYCLOAK_ISSUER`    | Required | OpenID Connect issuer URL for the Keycloak provider, in the format `{keycloak_url}/realms/{realm_name}`                                                                                  |
+  | `NEXTAUTH_URL`            | Required | This URL specifies the callback address for Auth.js during OAuth verification. Only needed when the default generated redirect address is incorrect. `https://lobe.example.com/api/auth` |
+
+  <Callout type={'tip'}>
+    Visit [📘 Environment Variables](/zh/docs/self-hosting/environment-variables/auth#keycloak) for details on related variables.
+  </Callout>
+</Steps>
+
+<Callout type={'info'}>After successful deployment, users will be able to authenticate through Keycloak and use LobeChat.</Callout>