@lobehub/chat 0.120.2 → 0.120.4

package/docs/Development/Contributing-Guidelines.zh-CN.md

@@ -2,6 +2,19 @@
 
 欢迎来到 LobeChat 的代码风格与贡献指南。本指南将帮助您理解我们的代码规范和贡献流程，确保代码的一致性和项目的顺利进行。
 
+## TOC
+
+- [代码风格](#代码风格)
+  - [ESLint](#eslint)
+  - [Prettier](#prettier)
+  - [remarklint](#remarklint)
+  - [stylelint](#stylelint)
+- [贡献流程](#贡献流程)
+  - [Gitmoji](#gitmoji)
+  - [Semantic Release](#semantic-release)
+  - [Commitlint](#commitlint)
+  - [如何贡献](#如何贡献)
+
 ## 代码风格
 
 在 LobeChat 中，我们使用 `@lobehub/lint` 程序包来统一代码风格。该程序包内置了 `ESLint`、`Prettier`、`remarklint` 和 `stylelint` 的配置，以确保我们的 JavaScript、Markdown 和 CSS 文件遵循相同的编码标准。

package/docs/Development/Internationalization-Implementation.md

@@ -0,0 +1,125 @@
+# Internationalization Implementation Guide
+
+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.
+
+## File Structure
+
+In the LobeChat project, internationalization-related files are organized as follows:
+
+- `src/locales/default`: Contains translation files for the default development language (Chinese), which we use as Chinese.
+- `locales`: Contains folders for all supported languages, with each language folder containing the respective translation files generated by lobe-i18n.
+
+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.
+
+```
+src/locales
+├── create.ts
+├── default
+│   ├── chat.ts
+│   ├── common.ts
+│   ├── error.ts
+│   ├── index.ts
+│   ├── market.ts
+│   ├── migration.ts
+│   ├── plugin.ts
+│   ├── setting.ts
+│   ├── tool.ts
+│   └── welcome.ts
+└── resources.ts
+```
+
+The file structure generated by lobe-i18n is as follows:
+
+```
+locales
+├── ar
+│   ├── chat.json
+│   ├── common.json
+│   ├── error.json
+│   └── ... (other translation files)
+├── de-DE
+│   ├── chat.json
+│   ├── common.json
+│   ├── error.json
+│   └── ... (other translation files)
+├── en-US
+├── ... (other language directories)
+├── zh-CN
+└── zh-TW
+```
+
+## Core Implementation Logic
+
+The internationalization core implementation logic of LobeChat is as follows:
+
+- Initialize and configure using the `i18next` library.
+- Automatically detect the user's language preference using `i18next-browser-languagedetector`.
+- Dynamically load translation resources using `i18next-resources-to-backend`.
+- Set the direction of the HTML document (LTR or RTL) based on the user's language preference.
+
+Here is a simplified pseudo code example to illustrate the core implementation logic of internationalization in LobeChat:
+
+```ts
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import resourcesToBackend from 'i18next-resources-to-backend';
+import { isRtlLang } from 'rtl-detect';
+
+// Create i18n instance and configure
+const createI18nInstance = (lang) => {
+  const i18nInstance = i18n
+    .use(LanguageDetector) // Use language detection
+    .use(
+      resourcesToBackend((language, namespace) => {
+        // Dynamically load translation resources for the corresponding language
+        return import(`path/to/locales/${language}/${namespace}.json`);
+      }),
+    );
+
+  // Listen for language change events and dynamically set document direction
+  i18nInstance.on('languageChanged', (language) => {
+    const direction = isRtlLang(language) ? 'rtl' : 'ltr';
+    document.documentElement.dir = direction; // Set HTML document direction
+  });
+
+  // Initialize i18n instance
+  i18nInstance.init({
+    // Relevant configurations
+  });
+
+  return i18nInstance;
+};
+```
+
+In this example, we demonstrate how to use `i18next` and related plugins to initialize internationalization settings. We dynamically import translation resources and respond to language change events to adjust the text direction of the page. This process provides LobeChat with flexible multilingual support capabilities.
+
+## Adding Support for New Languages
+
+We have already supported a variety of languages globally through the following efforts:
+
+- [✨ feat: adding Arabic Language Support #1049](https://github.com/lobehub/lobe-chat/pull/1049)
+- [🌐 style: Add Vietnamese files and add the vi-VN option in the General Settings #860](https://github.com/lobehub/lobe-chat/pull/860)
+- [🌐 style: support it-IT nl-NL and pl-PL locales #759](https://github.com/lobehub/lobe-chat/pull/759)
+- [🌐 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).
+
+## Resources and Further Reading
+
+- [i18next Official Documentation](https://www.i18next.com/)
+- [lobe-i18n Tool Description](https://github.com/lobehub/lobe-cli-toolbox/tree/master/packages/lobe-i18n)
+
+By following this guide, you can better understand and participate in the internationalization work of LobeChat, providing a seamless multilingual experience for global users.

package/docs/Development/Internationalization-Implementation.zh-CN.md

@@ -1,7 +1,15 @@
-# LobeChat 国际化实现指南
+# 国际化实现指南
 
 欢迎阅读 LobeChat 国际化实现指南。本文档将指导你了解 LobeChat 的国际化机制，包括文件结构、如何添加新语种。LobeChat 采用 `i18next` 和 `lobe-i18n` 作为国际化解决方案，旨在为用户提供流畅的多语言支持。
 
+## TOC
+
+- [国际化概述](#国际化概述)
+- [文件结构](#文件结构)
+- [核心实现逻辑](#核心实现逻辑)
+- [添加新的语言支持](#添加新的语言支持)
+- [资源和进一步阅读](#资源和进一步阅读)
+
 ## 国际化概述
 
 国际化（Internationalization，简称为 i18n）是一个让应用能够适应不同语言和地区的过程。在 LobeChat 中，我们支持多种语言，并通过 `i18next` 库来实现语言的动态切换和内容的本地化。我们的目标是让 LobeChat 能够为全球用户提供本地化的体验。

package/docs/Development/State-Management/State-Management-Intro.md

@@ -0,0 +1,224 @@
+# 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                                                                                                                                                                                                                                                                                                                                                                      |
+| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| store    | The store contains the application's state and actions. It allows access to and modification of the state during application rendering.                                                                                                                                                                                                                                          |
+| state    | State refers to the data of the application, storing the current state of the application. Any change in the state will **trigger a re-rendering** to reflect the new state.                                                                                                                                                                                                     |
+| action   | An action is an operation function that describes the interactive events occurring in the application. Actions are typically triggered by user interactions, network requests, or timers. Actions can be **synchronous** or **asynchronous**.                                                                                                                                    |
+| reducer  | A reducer is a pure function that takes the current state and action as parameters and returns a new state. It is used to update the application's state based on the action type. A reducer is a pure function with no side effects, therefore it is always a **synchronous** function.                                                                                         |
+| selector | A selector is a function used to retrieve specific data from the application's state. It takes the application's state as a parameter and returns computed or transformed data. Selectors can combine parts of the state or multiple states to generate derived data. Selectors are commonly used to map the application's state to a component's props for the component's use. |
+| slice    | A slice is a concept used to express a part of the data model state. It specifies a state slice and its related state, action, reducer, and selector. Using slices, a large store can be divided into smaller, maintainable subtypes.                                                                                                                                            |
+
+## Hierarchical Structure
+
+The structure of the Store can vary greatly depending on the complexity:
+
+- **Low Complexity**: Generally includes 2 to 5 states and 3 to 4 actions. In this case, the structure usually consists of a `store.ts` and an `initialState.ts`.
+
+```bash
+DataFill/store
+├── index.ts
+└── initialState.ts
+```
+
+- **Moderate Complexity**: Typically involves 5 to 15 states and 5 to 10 actions, with the possibility of selectors for derived states and reducers to simplify data changes. The structure usually includes a `store.ts`, an `initialState.ts`, and a `selectors.ts`/`reducer.ts`.
+
+```bash
+IconPicker/store
+├── index.ts
+├── initialState.ts
+├── selectors.ts
+└── store.ts
+```
+
+```bash
+SortableList/store
+├── index.ts
+├── initialState.ts
+├── listDataReducer.ts
+└── store.ts
+```
+
+- **Medium Complexity**: Involves 15 to 30 states and 10 to 20 actions, often requiring the use of multiple slices to manage different actions. The following code represents the internal data flow of the `SortableTree` component:
+
+```bash
+SortableTree/store
+├── index.ts
+├── initialState.ts
+├── selectors.ts
+├── slices
+│ ├── crudSlice.ts
+│ ├── dndSlice.ts
+│ └── selectionSlice.ts
+├── store.ts
+└── treeDataReducer.ts
+```
+
+- **High Complexity**: Involves over 30 states and 20 actions, requiring modular cohesion using slices. Each slice declares its own initState, actions, reducers, and selectors.
+
+The directory structure of the previous version of SessionStore for LobeChat, with high complexity, implements a large amount of business logic. However, with the modularization of slices and the fractal architecture, it is easy to find the corresponding modules, making it easy to maintain and iterate on new features.
+
+```bash
+LobeChat SessionStore
+├── index.ts
+├── initialState.ts
+├── selectors.ts
+├── slices
+│ ├── agentConfig
+│ │ ├── action.ts
+│ │ ├── index.ts
+│ │ ├── initialState.ts
+│ │ └── selectors.ts
+│ ├── chat
+│ │ ├── actions
+│ │ │ ├── index.ts
+│ │ │ ├── message.ts
+│ │ │ └── topic.ts
+│ │ ├── index.ts
+│ │ ├── initialState.ts
+│ │ ├── reducers
+│ │ │ ├── message.ts
+│ │ │ └── topic.ts
+│ │ ├── selectors
+│ │ │ ├── chat.ts
+│ │ │ ├── index.ts
+│ │ │ ├── token.ts
+│ │ │ ├── topic.ts
+│ │ │ └── utils.ts
+│ │ └── utils.ts
+│ └── session
+│ ├── action.ts
+│ ├── index.ts
+│ ├── initialState.ts
+│ ├── reducers
+│ │ └── session.ts
+│ └── selectors
+│ ├── export.ts
+│ ├── index.ts
+│ └── list.ts
+└── store.ts
+```
+
+Based on the provided directory structure of LobeChat SessionStore, we can update the previous document and convert the examples to the implementation of LobeChat's SessionStore. The following is a portion of the updated document:
+
+### Best Practices for LobeChat SessionStore Directory Structure
+
+In the LobeChat application, session management is a complex functional module, so we use the Slice pattern to organize the data flow. Below is the directory structure of LobeChat SessionStore, where each directory and file has its specific purpose:
+
+```bash
+src/store/session
+├── helpers.ts                         # Helper functions
+├── hooks                              # Custom React hooks
+│   ├── index.ts                       # Export file for hooks
+│   ├── useEffectAfterHydrated.ts      # Hook for effects after session hydration
+│   ├── useOnFinishHydrationSession.ts # Hook for session hydration completion
+│   ├── useSessionChatInit.ts          # Hook for session chat initialization
+│   └── useSessionHydrated.ts          # Hook for session hydration status
+├── index.ts                           # Aggregated export file for SessionStore
+├── initialState.ts                    # Aggregated initialState for all slices
+├── selectors.ts                       # Selectors exported from various slices
+├── slices                             # Separated functional modules
+│   ├── agent                          # State and operations related to agents
+│   │   ├── action.ts                  # Action definitions related to agents
+│   │   ├── index.ts                   # Entry file for agent slice
+│   │   ├── selectors.test.ts          # Tests for agent-related selectors
+│   │   └── selectors.ts               # Selector definitions related to agents
+│   └── session                        # State and operations related to sessions
+│   ├── action.test.ts                 # Tests for session-related actions
+│   ├── action.ts                      # Action definitions related to sessions
+│   ├── helpers.ts                     # Helper functions related to sessions
+│   ├── initialState.ts                # Initial state for session slice
+│   └── selectors                      # Session-related selectors and their tests
+│   ├── export.ts                      # Aggregated export for session selectors
+│   ├── index.ts                       # Entry file for session selectors
+│   ├── list.test.ts                   # Tests for list selectors
+│   └── list.ts                        # Definitions for list-related selectors
+└── store.ts                           # Creation and usage of SessionStore
+```
+
+## Implementation of SessionStore
+
+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
+
+```ts
+import { PersistOptions, devtools, persist, subscribeWithSelector } from 'zustand/middleware';
+import { shallow } from 'zustand/shallow';
+import { devtools } from 'zustand/middleware';
+import { createWithEqualityFn } from 'zustand/traditional';
+
+import { SessionStoreState, initialState } from './initialState';
+import { AgentAction, createAgentSlice } from './slices/agent/action';
+import { SessionAction, createSessionSlice } from './slices/session/action';
+
+//  ===============  Aggregate createStoreFn ============ //
+
+export type SessionStore = SessionAction & AgentAction & SessionStoreState;
+const createStore: StateCreator<SessionStore, [['zustand/devtools', never]]> = (...parameters) => ({
+  ...initialState,
+  ...createAgentSlice(...parameters),
+  ...createSessionSlice(...parameters),
+});
+
+
+
+//  ===============  Implement useStore ============ //
+
+export const useSessionStore = createWithEqualityFn<SessionStore>()(
+  persist(
+    subscribeWithSelector(
+      devtools(createStore, {
+        name: 'LobeChat_Session' + (isDev ? '_DEV' : ''),
+      }),
+    ),
+    persistOptions,
+  ),
+  shallow,
+);
+
+```
+
+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 and the state and actions of each Slice to create a complete SessionStore.
+
+#### slices/session/action.ts
+
+```ts
+import { StateCreator } from 'zustand';
+
+import { SessionStore } from '@/store/session';
+
+export interface SessionActions {
+  /**
+   * A custom hook that uses SWR to fetch sessions data.
+   */
+  useFetchSessions: () => SWRResponse<any>;
+}
+
+export const createSessionSlice: StateCreator<
+  SessionStore,
+  [['zustand/devtools', never]],
+  [],
+  SessionAction
+> = (set, get) => ({
+  useFetchSessions: () => {
+    // ...logic for initializing sessions
+  },
+  // ...implementation of other actions
+});
+```
+
+In the `action.ts` file, we define a `SessionActions` interface to describe session-related actions and implement a `useFetchSessions` function to create these actions. Then, we merge these actions with the initial state to form the session-related Slice.
+
+Through this layered and modular approach, we can ensure that LobeChat's SessionStore is clear, maintainable, and easy to extend and test.

package/docs/Development/State-Management/{index.zh-CN.md → State-Management-Intro.zh-CN.md}

@@ -2,6 +2,13 @@
 
 LobeChat 不同于传统 CRUD 的网页，存在大量的富交互能力，如何设计一个易于开发与易于维护的数据流架构非常重要。本篇文档将介绍 LobeChat 中的数据流管理最佳实践。
 
+## TOC
+
+- [概念要素](#概念要素)
+- [结构分层](#结构分层)
+  - [LobeChat SessionStore 目录结构最佳实践](#lobechat-sessionstore-目录结构最佳实践)
+- [SessionStore 的实现](#sessionstore-的实现)
+
 ## 概念要素
 
 | 概念名词 | 解释                                                                                                                                                                                                                                                                 |
@@ -105,41 +112,31 @@ LobeChat SessionStore
 └── store.ts
 ```
 
-根据您提供的 LobeChat SessionStore 的目录结构，我们可以更新前面的文档，并将示例转换为 LobeChat 的 SessionStore 的实现案例。以下是转换后的文档部分：
-
 ### LobeChat SessionStore 目录结构最佳实践
 
-在 LobeChat 应用中，由于会话管理是一个复杂的功能模块，因此我们采用了 Slice 模式来组织数据流。下面是 LobeChat SessionStore 的目录结构，其中每个目录和文件都有其特定的用途：
+在 LobeChat 应用中，由于会话管理是一个复杂的功能模块，因此我们采用了 [slice 模式](https://github.com/pmndrs/zustand/blob/main/docs/guides/slices-pattern.md) 来组织数据流。下面是 LobeChat SessionStore 的目录结构，其中每个目录和文件都有其特定的用途：
 
-```bash
+```fish
 src/store/session
-├── helpers.ts                         # 辅助函数
-├── hooks                              # 自定义 React 钩子
-│   ├── index.ts                       # 钩子的出口文件
-│   ├── useEffectAfterHydrated.ts      # 会话加载后的效果钩子
-│   ├── useOnFinishHydrationSession.ts # 会话水合完成钩子
-│   ├── useSessionChatInit.ts          # 会话聊天初始化钩子
-│   └── useSessionHydrated.ts          # 会话水合状态钩子
 ├── index.ts                           # SessionStore 的聚合导出文件
 ├── initialState.ts                    # 聚合了所有 slice 的 initialState
 ├── selectors.ts                       # 从各个 slices 导出的 selector
-├── slices                             # 分离的功能模块
-│   ├── agent                          # 代理相关的状态和操作
-│   │   ├── action.ts                  # 代理相关的 action 定义
-│   │   ├── index.ts                   # 代理 slice 的入口文件
-│   │   ├── selectors.test.ts          # 代理相关 selector 的测试
-│   │   └── selectors.ts               # 代理相关的 selector 定义
-│   └── session                        # 会话相关的状态和操作
-│   ├── action.test.ts                 # 会话相关 action 的测试
-│   ├── action.ts                      # 会话相关的 action 定义
-│   ├── helpers.ts                     # 会话相关的辅助函数
-│   ├── initialState.ts                # 会话 slice 的 initialState
-│   └── selectors                      # 会话相关的 selector 与其测试
-│   ├── export.ts                      # 会话 selector 的聚合导出
-│   ├── index.ts                       # 会话 selector 的入口文件
-│   ├── list.test.ts                   # 列表 selector 的测试
-│   └── list.ts                        # 列表相关的 selector 定义
-└── store.ts                           # SessionStore 的创建和使用
+├── store.ts                           # SessionStore 的创建和使用
+├── helpers.ts                         # 辅助函数
+└── slices                             # 各个独立的功能切片
+    ├── agent                          # 助理 Slice
+    │   ├── action.ts                  
+    │   ├── index.ts                   
+    │   └── selectors.ts               
+    └── session                        # 会话 Slice
+        ├── action.ts                  
+        ├── helpers.ts                 
+        ├── initialState.ts                
+        └── selectors                      
+            ├── export.ts                  
+            ├── list.ts                   
+            └── index.ts
+
 ```
 
 ## SessionStore 的实现

package/docs/Home.md

@@ -17,6 +17,7 @@ LobeChat is a open-source, extensible ([Function Calling][fc-url]), high-perform
 ### 🤯 Usage
 
 - [Custom Agents Guide](https://github.com/lobehub/lobe-chat/wiki/Usage-Agents) | [自定义助手指南](https://github.com/lobehub/lobe-chat/wiki/Usage-Agents.zh-CN)
+- [Plugin Usage](https://github.com/lobehub/lobe-chat/wiki/Plugins) | [插件使用](https://github.com/lobehub/lobe-chat/wiki/Plugins.zh-CN)
 - [Topic Guide](https://github.com/lobehub/lobe-chat/wiki/Usage-Topics) | [话题指南](https://github.com/lobehub/lobe-chat/wiki/Usage-Topics.zh-CN)
 
 <br/>
@@ -27,7 +28,7 @@ LobeChat is a open-source, extensible ([Function Calling][fc-url]), high-perform
 - [Deploying with Azure OpenAI](https://github.com/lobehub/lobe-chat/wiki/Deploy-with-Azure-OpenAI) | [使用 Azure OpenAI 部署](https://github.com/lobehub/lobe-chat/wiki/Deploy-with-Azure-OpenAI.zh-CN)
 - [Environment Variables](https://github.com/lobehub/lobe-chat/wiki/Environment-Variable) | [环境变量](https://github.com/lobehub/lobe-chat/wiki/Environment-Variable.zh-CN)
 - [Upstream Sync](https://github.com/lobehub/lobe-chat/wiki/Upstream-Sync) | [自部署保持更新](https://github.com/lobehub/lobe-chat/wiki/Upstream-Sync.zh-CN)
-- [Common Error](https://github.com/lobehub/lobe-chat/wiki/Common-Error) | [常见问题](https://github.com/lobehub/lobe-chat/wiki/Common-Error.zh-CN)
+- [Frequently Asked Questions](https://github.com/lobehub/lobe-chat/wiki/Common-Error) | [常见问题](https://github.com/lobehub/lobe-chat/wiki/Common-Error.zh-CN)
 - [Data Statistics](https://github.com/lobehub/lobe-chat/wiki/Analytics) | [数据统计](https://github.com/lobehub/lobe-chat/wiki/Analytics.zh-CN)
 
 <br/>
@@ -35,22 +36,24 @@ LobeChat is a open-source, extensible ([Function Calling][fc-url]), high-perform
 ### ⌨️ Development
 
 - [Technical Development Getting Started Guide](https://github.com/lobehub/lobe-chat/wiki/index) | [技术开发上手指南](https://github.com/lobehub/lobe-chat/wiki/index.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)
+- [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)
-- [State-Management](https://github.com/lobehub/lobe-chat/wiki/State-Management) | [状态管理](https://github.com/lobehub/lobe-chat/wiki/State-Management.zh-CN)
-  - [Selectors](https://github.com/lobehub/lobe-chat/wiki/State-Management/Selectors) | [取数模块](https://github.com/lobehub/lobe-chat/wiki/State-Management/Selectors.zh-CN)
+- [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)
-- [Testing Guide](https://github.com/lobehub/lobe-chat/wiki/Test) | [测试指南](https://github.com/lobehub/lobe-chat/wiki/Test.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)
 - [New Locale Guide](https://github.com/lobehub/lobe-chat/wiki/Add-New-Locale) | [新语种添加指南](https://github.com/lobehub/lobe-chat/wiki/Add-New-Locale.zh-CN)
+- [Testing Guide](https://github.com/lobehub/lobe-chat/wiki/Test) | [测试指南](https://github.com/lobehub/lobe-chat/wiki/Test.zh-CN)
 - [Resources and References](https://github.com/lobehub/lobe-chat/wiki/Resources) | [资源与参考](https://github.com/lobehub/lobe-chat/wiki/Resources.zh-CN)
 
 <br/>
 
 ### 🤖 Agents
 
-- [Agent Index and Submit](https://github.com/lobehub/lobe-chat-agents) | [助手市场与提交](https://github.com/lobehub/lobe-chat-agents/blob/main/README.zh-CN.md)
+- [Agent Index and Submit](https://github.com/lobehub/lobe-chat-agents) | [助手索引与提交](https://github.com/lobehub/lobe-chat-agents/blob/main/README.zh-CN.md)
 
 <br/>
 

package/docs/_Sidebar.md

@@ -9,6 +9,7 @@
 #### 🤯 Usage
 
 - [Custom Agents Guide](https://github.com/lobehub/lobe-chat/wiki/Usage-Agents) | [自定义助手指南](https://github.com/lobehub/lobe-chat/wiki/Usage-Agents.zh-CN)
+- [Plugin Usage](https://github.com/lobehub/lobe-chat/wiki/Plugins) | [插件使用](https://github.com/lobehub/lobe-chat/wiki/Plugins.zh-CN)
 - [Topic Guide](https://github.com/lobehub/lobe-chat/wiki/Usage-Topics) | [话题指南](https://github.com/lobehub/lobe-chat/wiki/Usage-Topics.zh-CN)
 
 #### 🛳 Self-Hosting
@@ -17,26 +18,28 @@
 - [Deploying with Azure OpenAI](https://github.com/lobehub/lobe-chat/wiki/Deploy-with-Azure-OpenAI) | [使用 Azure OpenAI 部署](https://github.com/lobehub/lobe-chat/wiki/Deploy-with-Azure-OpenAI.zh-CN)
 - [Environment Variables](https://github.com/lobehub/lobe-chat/wiki/Environment-Variable) | [环境变量](https://github.com/lobehub/lobe-chat/wiki/Environment-Variable.zh-CN)
 - [Upstream Sync](https://github.com/lobehub/lobe-chat/wiki/Upstream-Sync) | [自部署保持更新](https://github.com/lobehub/lobe-chat/wiki/Upstream-Sync.zh-CN)
-- [Common Error](https://github.com/lobehub/lobe-chat/wiki/Common-Error) | [常见问题](https://github.com/lobehub/lobe-chat/wiki/Common-Error.zh-CN)
+- [Frequently Asked Questions](https://github.com/lobehub/lobe-chat/wiki/Common-Error) | [常见问题](https://github.com/lobehub/lobe-chat/wiki/Common-Error.zh-CN)
 - [Data Statistics](https://github.com/lobehub/lobe-chat/wiki/Analytics) | [数据统计](https://github.com/lobehub/lobe-chat/wiki/Analytics.zh-CN)
 
 #### ⌨️ Development
 
-- [Technical Development Getting Started Guide](https://github.com/lobehub/lobe-chat/wiki/index) | [技术开发上手指南](https://github.com/lobehub/lobe-chat/wiki/index.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)
+- [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)
-- [State-Management](https://github.com/lobehub/lobe-chat/wiki/State-Management) | [状态管理](https://github.com/lobehub/lobe-chat/wiki/State-Management.zh-CN)
-  - [Data Store Selector](https://github.com/lobehub/lobe-chat/wiki/State-Management/Selectors) | [取数模块](https://github.com/lobehub/lobe-chat/wiki/State-Management/Selectors.zh-CN)
+- [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)
-- [Testing Guide](https://github.com/lobehub/lobe-chat/wiki/Test) | [测试指南](https://github.com/lobehub/lobe-chat/wiki/Test.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)
 - [New Locale Guide](https://github.com/lobehub/lobe-chat/wiki/Add-New-Locale) | [新语种添加指南](https://github.com/lobehub/lobe-chat/wiki/Add-New-Locale.zh-CN)
+- [Testing Guide](https://github.com/lobehub/lobe-chat/wiki/Test) | [测试指南](https://github.com/lobehub/lobe-chat/wiki/Test.zh-CN)
 - [Resources and References](https://github.com/lobehub/lobe-chat/wiki/Resources) | [资源与参考](https://github.com/lobehub/lobe-chat/wiki/Resources.zh-CN)
 
 #### 🤖 Agents
 
-- [Agent Index and Submit](https://github.com/lobehub/lobe-chat-agents) | [助手市场与提交](https://github.com/lobehub/lobe-chat-agents/blob/main/README.zh-CN.md)
+- [Agent Index and Submit](https://github.com/lobehub/lobe-chat-agents) | [助手索引与提交](https://github.com/lobehub/lobe-chat-agents/blob/main/README.zh-CN.md)
 
 #### 🧩 Plugins
 

package/locales/ar/common.json

@@ -51,6 +51,7 @@
     "title": "استيراد البيانات"
   },
   "lang": {
+    "ar": "العربية",
     "bn": "البنغالية",
     "cs-CZ": "التشيكية",
     "da-DK": "الدنماركية",

package/locales/ar/setting.json

@@ -252,9 +252,7 @@
     "fontSize": {
       "desc": "حجم الخط لمحتوى المحادثة",
       "marks": {
-        "large": "كبير",
-        "normal": "عادي",
-        "small": "صغير"
+        "normal": "عادي"
       },
       "title": "حجم الخط"
     },

package/locales/de-DE/common.json

@@ -51,6 +51,7 @@
     "title": "Daten importieren"
   },
   "lang": {
+    "ar": "Arabisch",
     "bn": "Bengalisch",
     "cs-CZ": "Tschechisch",
     "da-DK": "Dänisch",

package/locales/de-DE/setting.json

@@ -252,9 +252,7 @@
     "fontSize": {
       "desc": "Schriftgröße für Chat-Inhalte",
       "marks": {
-        "large": "Groß",
-        "normal": "Normal",
-        "small": "Klein"
+        "normal": "Normal"
       },
       "title": "Schriftgröße"
     },

package/locales/en-US/common.json

@@ -51,6 +51,7 @@
     "title": "Import Data"
   },
   "lang": {
+    "ar": "Arabic",
     "bn": "Bengali",
     "cs-CZ": "Czech",
     "da-DK": "Danish",

package/locales/en-US/setting.json

@@ -252,9 +252,7 @@
     "fontSize": {
       "desc": "Font size for chat content",
       "marks": {
-        "large": "Large",
-        "normal": "Normal",
-        "small": "Small"
+        "normal": "Normal"
       },
       "title": "Font Size"
     },

package/locales/es-ES/common.json

@@ -51,6 +51,7 @@
     "title": "Importar datos"
   },
   "lang": {
+    "ar": "árabe",
     "bn": "bengalí",
     "cs-CZ": "checo",
     "da-DK": "danés",