@lobehub/chat 0.119.13 → 0.120.1

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

@@ -0,0 +1,117 @@
+# LobeChat 国际化实现指南
+
+欢迎阅读 LobeChat 国际化实现指南。本文档将指导你了解 LobeChat 的国际化机制，包括文件结构、如何添加新语种。LobeChat 采用 `i18next` 和 `lobe-i18n` 作为国际化解决方案，旨在为用户提供流畅的多语言支持。
+
+## 国际化概述
+
+国际化（Internationalization，简称为 i18n）是一个让应用能够适应不同语言和地区的过程。在 LobeChat 中，我们支持多种语言，并通过 `i18next` 库来实现语言的动态切换和内容的本地化。我们的目标是让 LobeChat 能够为全球用户提供本地化的体验。
+
+## 文件结构
+
+在 LobeChat 的项目中，国际化相关的文件被组织如下：
+
+- `src/locales/default`: 包含默认开发语言（中文）的翻译文件，我们作为中文。
+- `locales`: 包含所有支持的语言文件夹，每个语言文件夹中包含相应语言的翻译文件，这些翻译文件通过 lobe-i18n 自动生成。
+
+在 `src/locales` 这个目录结构中，`default` 文件夹包含了原始的翻译文件（中文），其他每个语言文件夹则包含了相应语言的 JSON 翻译文件。每个语言文件夹中的文件对应 `default` 文件夹中的 TypeScript 文件，确保了各语种之间的翻译文件结构一致性。
+
+```
+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
+```
+
+通过 lobe-i18n 自动生成的文件结构如下：
+
+```
+locales
+├── ar
+│   ├── chat.json
+│   ├── common.json
+│   ├── error.json
+│   └── ... (其他翻译文件)
+├── de-DE
+│   ├── chat.json
+│   ├── common.json
+│   ├── error.json
+│   └── ... (其他翻译文件)
+├── en-US
+├── ... (其他语种目录）
+├── zh-CN
+└── zh-TW
+```
+
+## 核心实现逻辑
+
+LobeChat 的国际化核心实现逻辑如下：
+
+- 使用 `i18next` 库进行初始化和配置。
+- 使用 `i18next-browser-languagedetector` 自动检测用户的语言偏好。
+- 使用 `i18next-resources-to-backend` 动态加载翻译资源。
+- 根据用户的语言偏好，设置 HTML 文档的方向（LTR 或 RTL）。
+
+以下是一个简化的伪代码示例，用以说明 LobeChat 国际化的核心实现逻辑：
+
+```ts
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import resourcesToBackend from 'i18next-resources-to-backend';
+import { isRtlLang } from 'rtl-detect';
+
+// 创建 i18n 实例并配置
+const createI18nInstance = (lang) => {
+  const i18nInstance = i18n
+    .use(LanguageDetector) // 使用语言检测
+    .use(
+      resourcesToBackend((language, namespace) => {
+        // 动态加载对应语言的翻译资源
+        return import(`path/to/locales/${language}/${namespace}.json`);
+      }),
+    );
+
+  // 监听语言变化事件，动态设置文档方向
+  i18nInstance.on('languageChanged', (language) => {
+    const direction = isRtlLang(language) ? 'rtl' : 'ltr';
+    document.documentElement.dir = direction; // 设置 HTML 文档方向
+  });
+
+  // 初始化 i18n 实例
+  i18nInstance.init({
+    // 相关配置
+  });
+
+  return i18nInstance;
+};
+```
+
+在这个示例中，我们展示了如何使用 `i18next` 和相关插件来初始化国际化设置。我们动态导入了翻译资源，并响应语言变化事件来调整页面的文本方向。这个过程为 LobeChat 提供了灵活的多语言支持能力。
+
+## 添加新的语言支持
+
+我们通过以下工作，已经支持了全球多种语言：
+
+- [✨ 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)
+
+要添加新的语种支持， 详细步骤请参考：[新语种添加指南](Add-New-Locale.zh-CN)。
+
+## 资源和进一步阅读
+
+- [i18next 官方文档](https://www.i18next.com/)
+- [lobe-i18n 工具说明](https://github.com/lobehub/lobe-cli-toolbox/tree/master/packages/lobe-i18n)
+
+通过遵循本指南，你可以更好地理解和参与到 LobeChat 的国际化工作中，为全球用户提供无缝的多语言体验。

package/docs/Development/State-Management/Selectors.zh-CN.md

@@ -0,0 +1,49 @@
+# 数据存储取数模块
+
+selectors 是 LobeChat 数据流研发框架下的取数模块，它的作用是从 store 中以特定特务逻辑取出数据，供组件消费使用。
+
+以 `src/store/tool/slices/plugin/selectors.ts` 为例：
+
+这个 TypeScript 代码段定义了一个名为 `pluginSelectors` 的对象，该对象包含一系列用于从插件存储状态中检索数据的选择器函数。选择器是一种从 zustand 中提取和派生数据的函数。这个特定的例子是为了管理与前端应用程序的插件系统相关的状态。
+
+下面是一些关键点的说明：
+
+- `getCustomPluginById`: 根据插件 ID 返回自定义插件信息。
+- `getInstalledPluginById`: 根据插件 ID 返回已安装插件的信息。
+- `getPluginManifestById`: 根据插件 ID 返回插件清单。
+- `getPluginMetaById`: 根据插件 ID 返回插件元数据。
+- `getPluginSettingsById`: 根据插件 ID 返回插件设置。
+- `installedCustomPluginMetaList`: 返回所有已安装的自定义插件的元数据列表。
+- `installedPluginManifestList`: 返回所有已安装插件的清单列表。
+- `installedPluginMetaList`: 返回所有已安装插件的元数据列表。
+- `installedPlugins`: 返回所有已安装插件的列表。
+- `isPluginHasUI`: 根据插件 ID 确定插件是否有 UI 组件。
+- `isPluginInstalled`: 根据插件 ID 检查插件是否已安装。
+- `storeAndInstallPluginsIdList`: 返回 store 中和已安装插件的所有 ID 列表。
+
+选择器通过将复杂的状态选择逻辑封装在单独的函数中，使得在应用程序的其他部分调用状态数据时，代码更加简洁和直观。此外，由于使用了 TypeScript，每个函数都可以具有明确的输入和输出类型，这有助于提高代码的可靠性和开发效率。
+
+在组件中，只需引入相应的选择器即可直接获取最终消费的数据：
+
+```tsx | pure
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+
+const Render = () => {
+  const list = useToolStore(pluginSelectors.installedPluginMetaList);
+
+  return <> ... </>;
+};
+```
+
+这样实现的好处在于：
+
+1. **解耦和重用**：通过将选择器独立于组件，我们可以在多个组件之间复用这些选择器而不需要重写取数逻辑。这减少了重复代码，提高了开发效率，并且使得代码库更加干净和易于维护。
+2. **性能优化**：选择器可以用来计算派生数据，这样可以避免在每个组件中重复计算相同的数据。当状态发生变化时，只有依赖于这部分状态的选择器才会重新计算，从而减少不必要的渲染和计算。
+3. **易于测试**：选择器是纯函数，它们仅依赖于传入的参数。这意味着它们可以在隔离的环境中进行测试，无需模拟整个 store 或组件树。
+4. **类型安全**：由于 LobeChat 使用 TypeScript，每个选择器都有明确的输入和输出类型定义。这为开发者提供了自动完成和编译时检查的优势，减少了运行时错误。
+5. **可维护性**：选择器集中了状态的读取逻辑，使得跟踪状态的变化和管理更加直观。如果状态结构发生变化，我们只需要更新相应的选择器，而不是搜索和替换整个代码库中的多个位置。
+6. **可组合性**：选择器可以组合其他选择器，以创建更复杂的选择逻辑。这种模式允许开发者构建一个选择器层次结构，使得状态选择更加灵活和强大。
+7. **简化组件逻辑**：组件不需要知道状态的结构或如何获取和计算需要的数据。组件只需调用选择器即可获取渲染所需的数据，这使得组件逻辑变得更简单和清晰。
+
+通过这样的设计，LobeChat 的开发者可以更专注于构建用户界面和业务逻辑，而不必担心数据的获取和处理细节。这种模式也为未来可能的状态结构变更提供了更好的适应性和扩展性。

package/docs/Development/State-Management/index.zh-CN.md

@@ -0,0 +1,219 @@
+# 状态管理最佳实践
+
+LobeChat 不同于传统 CRUD 的网页，存在大量的富交互能力，如何设计一个易于开发与易于维护的数据流架构非常重要。本篇文档将介绍 LobeChat 中的数据流管理最佳实践。
+
+## 概念要素
+
+| 概念名词 | 解释                                                                                                                                                                                                                                                                 |
+| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| store    | 状态库 (store)，包含存储应用的状态、动作。允许在应用渲染中访问和修改状态。                                                                                                                                                                                           |
+| state    | 状态 (state) 是指应用程序的数据，存储了应用程序的当前状态，状态的变化**一定会触发应用的重新渲染**，以反映新的状态。                                                                                                                                                  |
+| action   | 动作 (action) 是一个操作函数，它描述了应用程序中发生的交互事件。动作通常是由用户交互、网络请求或定时器等触发。 action 可以是**同步**的，也可以是**异步**的。                                                                                                         |
+| reducer  | 归约器 (reducer) 是一个纯函数，它接收当前状态和动作作为参数，并返回一个新的状态。它用于根据动作类型来更新应用程序的状态。Reducer 是一个纯函数，不存在副作用，因此一定是 **同步** 函数。                                                                              |
+| selector | 选择器 (selector) 是一个函数，用于从应用程序的状态中获取特定的数据。它接收应用程序的状态作为参数，并返回经过计算或转换后的数据。Selector 可以将状态的一部分或多个状态组合起来，以生成派生的数据。Selector 通常用于将应用程序的状态映射到组件的 props，以供组件使用。 |
+| slice    | 切片 (slice) 是一个概念，用于表达数据模型状态的一部分。它指定了一个状态切片（slice），以及与该切片相关的 state、action、reducer 和 selector。使用 Slice 可以将大型的 Store 拆分为更小的、可维护的子类型。                                                            |
+
+## 结构分层
+
+在不同的复杂度下，我们可以将 Store 的结构组织可以由很大的不同：
+
+- **较低复杂度**：一般包含 2\~5 个 state 、3 \~ 4 个 action。此时的结构一般直接一个 `store.ts` + 一个 `initialState.ts` 即可。
+
+```bash
+DataFill/store
+├── index.ts
+└── initialState.ts
+```
+
+- **一般复杂度** ：一般复杂度存在 5 \~ 15 个 state、 5 \~ 10 个 action，可能会存在 selector 实现派生状态，也有可能存在 reducer 简化部分数据变更的复杂度。此时的结构一般为一个 `store.ts` + 一个 `initialState.ts` + 一个 `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
+```
+
+- **中等复杂度** ： 中等复杂度存在 15 \~ 30 个 state、 10 \~ 20 个 action，大概率会存在 selector 来聚合派生状态，大概率存在 reducer 简化部分数据变更的复杂度。
+
+此时结构，用单一的 action store 已经较难维护，往往会拆解出来多个 slice 用于管理不同的 action。 下方的代码代表了 `SortableTree` 组件的内部数据流：
+
+```bash
+SortableTree/store
+├── index.ts
+├── initialState.ts
+├── selectors.ts
+├── slices
+├── crudSlice.ts
+├── dndSlice.ts
+└── selectionSlice.ts
+├── store.ts
+└── treeDataReducer.ts
+```
+
+- 高等复杂度：高等复杂度存在 30 个以上的 state、 20 个以上的 action。必然需要 slice 做模块化内聚。在每个 slice 中都各自声明了各自的 initState、 action、reducer 与 selector。
+
+下述这个数据流的目录结构是之前一版 SessionStore，具有很高的复杂度，实现了大量的业务逻辑。但借助于 slice 的模块化和分形架构的心智，我们可以很容易地找到对应的模块，新增功能与迭代都很易于维护。
+
+```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
+```
+
+根据您提供的 LobeChat SessionStore 的目录结构，我们可以更新前面的文档，并将示例转换为 LobeChat 的 SessionStore 的实现案例。以下是转换后的文档部分：
+
+### LobeChat SessionStore 目录结构最佳实践
+
+在 LobeChat 应用中，由于会话管理是一个复杂的功能模块，因此我们采用了 Slice 模式来组织数据流。下面是 LobeChat SessionStore 的目录结构，其中每个目录和文件都有其特定的用途：
+
+```bash
+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 的创建和使用
+```
+
+## SessionStore 的实现
+
+在 LobeChat 中，SessionStore 被设计为管理会话状态和逻辑的核心模块。它由多个 Slices 组成，每个 Slice 管理一部分相关的状态和逻辑。下面是一个简化的 SessionStore 的实现示例：
+
+#### 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';
+
+//  ===============  聚合 createStoreFn ============ //
+
+export type SessionStore = SessionAction & AgentAction & SessionStoreState;
+const createStore: StateCreator<SessionStore, [['zustand/devtools', never]]> = (...parameters) => ({
+  ...initialState,
+  ...createAgentSlice(...parameters),
+  ...createSessionSlice(...parameters),
+});
+
+
+
+//  ===============  实装 useStore ============ //
+
+export const useSessionStore = createWithEqualityFn<SessionStore>()(
+  persist(
+    subscribeWithSelector(
+      devtools(createStore, {
+        name: 'LobeChat_Session' + (isDev ? '_DEV' : ''),
+      }),
+    ),
+    persistOptions,
+  ),
+  shallow,
+);
+
+```
+
+在这个 `store.ts` 文件中，我们创建了一个 `useSessionStore` 钩子，它使用 `zustand` 库来创建一个全局状态管理器。我们将 initialState 和每个 Slice 的状态和动作合并，以创建完整的 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: () => {
+    // ...初始化会话的逻辑
+  },
+  // ...其他动作的实现
+});
+```
+
+在 `action.ts` 文件中，我们定义了一个 `SessionActions` 接口来描述会话相关的动作，并且实现了一个 `useFetchSessions` 函数来创建这些动作。然后，我们将这些动作与初始状态合并，以形成会话相关的 Slice。
+
+通过这种结构分层和模块化的方法，我们可以确保 LobeChat 的 SessionStore 是清晰、可维护的，同时也便于扩展和测试。

package/docs/Development/index.zh-CN.md

@@ -6,6 +6,10 @@
 
 - [基础技术栈](#基础技术栈)
 - [文件夹目录架构](#文件夹目录架构)
+- [本地开发环境设置](#本地开发环境设置)
+- [代码风格与贡献指南](#代码风格与贡献指南)
+- [国际化实现指南](#国际化实现指南)
+- [附录：资源与参考](#附录资源与参考)
 
 ## 基础技术栈
 
@@ -40,4 +44,65 @@ src
 └── utils      # 通用的工具函数
 ```
 
-有关目录架构的详细介绍，详见： [文件夹目录架构](Folder-Structure.zh-CN.md)
+有关目录架构的详细介绍，详见： [文件夹目录架构](Folder-Structure.zh-CN)
+
+## 本地开发环境设置
+
+本节将概述搭建开发环境并进行本地开发。 在开始之前，请确保你的本地环境中已安装 Node.js、Git 以及你选择的包管理器（Bun 或 PNPM）。
+
+我们推荐使用 WebStorm 作为你的集成开发环境（IDE）。
+
+1. **获取代码**：克隆 LobeChat 的代码库到本地：
+
+```bash
+git clone https://github.com/lobehub/lobe-chat.git
+```
+
+2. **安装依赖**：进入项目目录，并安装所需依赖：
+
+```bash
+cd lobe-chat
+# 如果你使用 Bun
+bun install
+# 如果你使用 PNPM
+pnpm install
+```
+
+3. **运行与调试**：启动本地开发服务器，开始你的开发之旅：
+
+```bash
+# 使用 Bun 启动开发服务器
+bun run dev
+# 访问 http://localhost:3010 查看应用
+```
+
+现在，你应该可以在浏览器中看到 LobeChat 的欢迎页面。详细的环境配置指南，请参考 [开发环境设置指南](Setup-Development.zh-CN)。
+
+## 代码风格与贡献指南
+
+在 LobeChat 项目中，我们十分重视代码的质量和一致性。为此，我们制定了一系列的代码风格规范和贡献流程，以确保每位开发者都能顺利地参与到项目中。以下是你作为开发者需要遵守的代码风格和贡献准则。
+
+- **代码风格**：我们使用 `@lobehub/lint` 统一代码风格，包括 ESLint、Prettier、remarklint 和 stylelint 配置。请遵守我们的代码规范，以保持代码的一致性和可读性。
+- **贡献流程**：我们采用 gitmoji 和 semantic release 作为代码提交和发布流程。请使用 gitmoji 标注您的提交信息，并确保遵循 semantic release 的规范，以便我们的自动化系统能够正确处理版本控制和发布。
+
+所有的贡献都将经过代码审查。维护者可能会提出修改建议或要求。请积极响应审查意见，并及时做出调整，我们期待你的参与和贡献。
+
+详细的代码风格和贡献指南，请参考 [代码风格与贡献指南](Contributing-Guidelines.zh-CN)。
+
+## 国际化实现指南
+
+LobeChat 采用 `i18next` 和 `lobe-i18n` 实现多语言支持，确保用户全球化体验。
+
+国际化文件位于 `src/locales`，包含默认语言（中文）。 我们会通过 `lobe-i18n` 自动生成其他的语言 JSON 文件。
+
+如果要添加新语种，需遵循特定步骤，详见 [新语种添加指南](Add-New-Locale.zh-CN)。 我们鼓励你参与我们的国际化努力，共同为全球用户提供更好的服务。
+
+详细的国际化实现指南指南，请参考 [国际化实现指南](Internationalization-Implementation.zh-CN)。
+
+## 附录：资源与参考
+
+为了支持开发者更好地理解和使用 LobeChat 的技术栈，我们提供了一份详尽的资源与参考列表 —— [LobeChat 资源与参考](https://github.com/lobehub/lobe-chat/wiki/Resources.zh-CN) - 访问我们维护的资源列表，包括教程、文章和其他有用的链接。
+
+我们鼓励开发者利用这些资源深入学习和提升技能，通过 [LobeChat GitHub Discussions](https://github.com/lobehub/lobe-chat/discussions) 或者 [Discord](https://discord.com/invite/AYFPHvv2jT) 加入社区讨论，提出问题或分享你的经验。
+
+如果你有任何疑问，或者需要进一步的帮助，请不要犹豫，请通过上述渠道与我们联系。

package/docs/Home.md

@@ -12,8 +12,6 @@ LobeChat is a open-source, extensible ([Function Calling][fc-url]), high-perform
 
 ![](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)
 
-[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)
-
 <!-- DOCS LIST -->
 
 ### 🤯 Usage
@@ -40,10 +38,12 @@ 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)
-- [Data Store Selector](https://github.com/lobehub/lobe-chat/wiki/Data-Store-Selectors) | [数据存储取数模块](https://github.com/lobehub/lobe-chat/wiki/Data-Store-Selectors.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)
 - [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)
+- [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)
 - [Resources and References](https://github.com/lobehub/lobe-chat/wiki/Resources) | [资源与参考](https://github.com/lobehub/lobe-chat/wiki/Resources.zh-CN)
 
 <br/>

package/docs/_Sidebar.md

@@ -6,8 +6,6 @@
 
 <!-- DOCS LIST -->
 
-[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)
-
 #### 🤯 Usage
 
 - [Custom Agents Guide](https://github.com/lobehub/lobe-chat/wiki/Usage-Agents) | [自定义助手指南](https://github.com/lobehub/lobe-chat/wiki/Usage-Agents.zh-CN)
@@ -28,10 +26,12 @@
 - [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)
-- [Data Store Selector](https://github.com/lobehub/lobe-chat/wiki/Data-Store-Selectors) | [数据存储取数模块](https://github.com/lobehub/lobe-chat/wiki/Data-Store-Selectors.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)
 - [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)
+- [Testing Guide](https://github.com/lobehub/lobe-chat/wiki/Test) | [测试指南](https://github.com/lobehub/lobe-chat/wiki/Test.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)
 - [Resources and References](https://github.com/lobehub/lobe-chat/wiki/Resources) | [资源与参考](https://github.com/lobehub/lobe-chat/wiki/Resources.zh-CN)
 
 #### 🤖 Agents

package/locales/ar/chat.json

@@ -0,0 +1,96 @@
+{
+  "agentDefaultMessage": "مرحبًا، أنا **{{name}}**، يمكنك البدء في الدردشة معي على الفور، أو يمكنك الانتقال إلى [إعدادات المساعد](/chat/settings#session={{id}}) لتحسين معلوماتي.",
+  "agentDefaultMessageWithSystemRole": "مرحبًا، أنا **{{name}}**، {{systemRole}}، دعنا نبدأ الدردشة!",
+  "backToBottom": "العودة إلى الأسفل",
+  "clearCurrentMessages": "مسح رسائل الجلسة الحالية",
+  "confirmClearCurrentMessages": "سيتم مسح رسائل الجلسة الحالية قريبًا، وبمجرد المسح لن يمكن استعادتها، يرجى تأكيد الإجراء الخاص بك",
+  "confirmRemoveSessionItemAlert": "سيتم حذف هذا المساعد قريبًا، وبمجرد الحذف لن يمكن استعادته، يرجى تأكيد الإجراء الخاص بك",
+  "defaultAgent": "المساعد الافتراضي",
+  "defaultSession": "المساعد الافتراضي",
+  "duplicateTitle": "{{title}} نسخة",
+  "historyRange": "نطاق التاريخ",
+  "inbox": {
+    "defaultMessage": "مرحبًا، أنا مساعدك الذكي، يمكنك أن تسألني أي شيء وسأحاول الإجابة عليك. إذا كنت بحاجة إلى مساعد أكثر احترافية أو مخصصة، يمكنك النقر على `+` لإنشاء مساعد مخصص",
+    "desc": "قم بتشغيل مجموعة الدماغ وأشعل شرارة التفكير. مساعدك الذكي، هنا حيث يمكنك التواصل بكل شيء",
+    "title": "دردشة عشوائية"
+  },
+  "input": {
+    "onlyAdd": "إضافة الرسالة فقط",
+    "send": "إرسال",
+    "sendWithCmdEnter": "اضغط {{meta}} + Enter للإرسال",
+    "sendWithEnter": "اضغط Enter للإرسال",
+    "stop": "توقف",
+    "warp": "تغيير السطر"
+  },
+  "messageAction": {
+    "delAndRegenerate": "حذف وإعادة الإنشاء",
+    "regenerate": "إعادة الإنشاء"
+  },
+  "newAgent": "مساعد جديد",
+  "noDescription": "لا توجد وصف",
+  "pin": "تثبيت",
+  "pinOff": "إلغاء التثبيت",
+  "regenerate": "إعادة الإنشاء",
+  "roleAndArchive": "الدور والأرشيف",
+  "searchAgentPlaceholder": "البحث عن مساعد ومحادثة...",
+  "sendPlaceholder": "أدخل محتوى الدردشة...",
+  "sessionList": "قائمة المساعدين",
+  "shareModal": {
+    "download": "تحميل اللقطة",
+    "imageType": "نوع الصورة",
+    "screenshot": "لقطة شاشة",
+    "settings": "إعدادات التصدير",
+    "shareToShareGPT": "إنشاء رابط مشاركة ShareGPT",
+    "withBackground": "تضمين صورة الخلفية",
+    "withFooter": "تضمين تذييل",
+    "withPluginInfo": "تضمين معلومات البرنامج المساعد",
+    "withSystemRole": "تضمين دور المساعد"
+  },
+  "stt": {
+    "action": "إدخال صوتي",
+    "loading": "جارٍ التعرف...",
+    "prettifying": "جارٍ التجميل..."
+  },
+  "temp": "مؤقت",
+  "tokenDetail": "إعداد الدور: {{systemRoleToken}} · رسائل الجلسة: {{chatsToken}} · إعداد الأدوات: {{toolsToken}}",
+  "tokenTag": {
+    "overload": "تجاوز الحد",
+    "remained": "متبقي",
+    "used": "مستخدم"
+  },
+  "topic": {
+    "actions": {
+      "autoRename": "إعادة تسمية ذكية",
+      "duplicate": "إنشاء نسخة",
+      "export": "تصدير الموضوع"
+    },
+    "confirmRemoveAll": "سيتم حذف جميع المواضيع قريبًا، وبمجرد الحذف لن يمكن استعادتها، يرجى التحلي بالحذر.",
+    "confirmRemoveTopic": "سيتم حذف هذا الموضوع قريبًا، وبمجرد الحذف لن يمكن استعادته، يرجى التحلي بالحذر.",
+    "confirmRemoveUnstarred": "سيتم حذف المواضيع غير المحفوظة قريبًا، وبمجرد الحذف لن يمكن استعادتها، يرجى التحلي بالحذر.",
+    "defaultTitle": "الموضوع الافتراضي",
+    "guide": {
+      "desc": "انقر فوق زر الإرسال الأيسر لحفظ الجلسة الحالية كموضوع تاريخي وبدء جلسة جديدة",
+      "title": "قائمة المواضيع"
+    },
+    "openNewTopic": "فتح موضوع جديد",
+    "removeAll": "حذف جميع المواضيع",
+    "removeUnstarred": "حذف المواضيع غير المحفوظة",
+    "saveCurrentMessages": "حفظ الجلسة الحالية كموضوع",
+    "searchPlaceholder": "البحث في المواضيع...",
+    "title": "الموضوع"
+  },
+  "translate": {
+    "action": "ترجمة",
+    "clear": "مسح الترجمة"
+  },
+  "tts": {
+    "action": "قراءة صوتية",
+    "clear": "مسح الصوت"
+  },
+  "updateAgent": "تحديث معلومات المساعد",
+  "upload": {
+    "actionTooltip": "تحميل الصورة",
+    "dragDesc": "اسحب الملفات إلى هنا، يدعم تحميل عدة صور. اضغط على Shift لإرسال الصور مباشرة",
+    "dragTitle": "تحميل الصورة"
+  }
+}