@lobehub/chat 0.111.3 → 0.111.5

package/.i18nrc.js

@@ -12,11 +12,13 @@ module.exports = defineConfig({
     jsonMode: true,
   },
   markdown: {
-    entry: ['./README.md'],
-    outputLocales: ['zh_CN'],
-    outputExtensions: (locale) => {
-      if (locale === 'en_US') return '.md';
-      return `.${locale.replace('_', '-')}.md`;
+    entry: ['./README.zh-CN.md', './docs/**/*.zh-CN.md'],
+    entryLocale: 'zh-CN',
+    entryExtension: '.zh-CN.md',
+    outputLocales: ['en-US'],
+    outputExtensions: (locale, { getDefaultExtension }) => {
+      if (locale === 'en-US') return '.md';
+      return getDefaultExtension(locale);
     },
   },
 });

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.111.5](https://github.com/lobehub/lobe-chat/compare/v0.111.4...v0.111.5)
+
+<sup>Released on **2023-12-14**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Wrong locale language in en_US.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Wrong locale language in en_US, closes [#660](https://github.com/lobehub/lobe-chat/issues/660) ([e1c31ee](https://github.com/lobehub/lobe-chat/commit/e1c31ee))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.111.4](https://github.com/lobehub/lobe-chat/compare/v0.111.3...v0.111.4)
+
+<sup>Released on **2023-12-14**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Revert "🐛 fix: clean up gpt-3.5 model".
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Revert "🐛 fix: clean up gpt-3.5 model", closes [#653](https://github.com/lobehub/lobe-chat/issues/653) ([b8b14fc](https://github.com/lobehub/lobe-chat/commit/b8b14fc))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.111.3](https://github.com/lobehub/lobe-chat/compare/v0.111.2...v0.111.3)
 
 <sup>Released on **2023-12-14**</sup>

package/README.md

@@ -206,12 +206,12 @@ Our marketplace is not just a showcase platform but also a collaborative space.
 
 | Recent Submits                                                                                                                                                                       | Description                                                                                                                                                                                                                                                                                                                                                                                                 |
 | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Stable Diffusion Prompts Crafter](https://chat-preview.lobehub.com/market?agent=stable-diffusion)<br/><sup>By **[ShinChven](https://github.com/ShinChven)** on **2023-12-14**</sup> | This GPT helps create precise prompts for Stable Diffusion. You will get descriptions, prompts, and negative prompts. prompts and negative prompts are in plain text code blocks for easy copy.<br/>`stable-diffusion`                                                                                                                                                                                      |
 | [Dream Analyst](https://chat-preview.lobehub.com/market?agent=dream-psychoanalyst)<br/><sup>By **[ghyghoo8](https://github.com/ghyghoo8)** on **2023-12-13**</sup>                   | Input a dream and I will help you analyze it.<br/>`dream` `master` `think`                                                                                                                                                                                                                                                                                                                                  |
 | [Payroll Game](https://chat-preview.lobehub.com/market?agent=payroll-game)<br/><sup>By **[ghyghoo8](https://github.com/ghyghoo8)** on **2023-12-13**</sup>                           | In this salary negotiation game, you'll be facing the notorious 'Iron Rooster,' a boss known for being tight-fisted. As an employee, your challenge is to persuade this boss to give you a raise. However, no matter how reasonable your arguments are, the 'Iron Rooster' always finds a way to reject them. Get ready with your arguments for a clever and humorous showdown!<br/>`game` `boss` `payroll` |
 | [Python Coder Gradio](https://chat-preview.lobehub.com/market?agent=gradio-coding)<br/><sup>By **[Igroshka](https://github.com/Igroshka)** on **2023-12-12**</sup>                   | Python programmer experienced with Gradio for Hugging Face.<br/>`programming` `assistant` `python`                                                                                                                                                                                                                                                                                                          |
-| [English Translation Expert](https://chat-preview.lobehub.com/market?agent=translate-eng-expert)<br/><sup>By **[caolixiang](https://github.com/caolixiang)** on **2023-12-12**</sup> | Perfect Translation<br/>`translate` `expert` `english`                                                                                                                                                                                                                                                                                                                                                      |
 
-> 📊 Total agents: [<kbd>**63**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+> 📊 Total agents: [<kbd>**64**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

package/README.zh-CN.md

@@ -92,7 +92,7 @@ LobeChat 是开源的高性能聊天机器人框架，支持语音合成、多
 
 ![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/284072129-382bdf30-e3d6-4411-b5a0-249710b8ba08.png)
 
-LobeChat 已经支持 OpenAI 最新的 [`gpt-4-vsion`](https://platform.openai.com/docs/guides/vision) 支持视觉识别的模型，这是一个具备视觉识别能力的多模态智能。
+LobeChat 已经支持 OpenAI 最新的 [`gpt-4-vision`](https://platform.openai.com/docs/guides/vision) 支持视觉识别的模型，这是一个具备视觉识别能力的多模态智能。
 用户可以轻松上传图片或者拖拽图片到对话框中，助手将能够识别图片内容，并在此基础上进行智能对话，构建更智能、更多元化的聊天场景。
 
 这一特性打开了新的互动方式，使得交流不再局限于文字，而是可以涵盖丰富的视觉元素。无论是日常使用中的图片分享，还是在特定行业内的图像解读，助手都能提供出色的对话体验。
@@ -183,12 +183,12 @@ LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地
 
 | 最近新增                                                                                                                                                               | 助手说明                                                                                                                                                                                                                                         |
 | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [稳定扩散促使手艺者](https://chat-preview.lobehub.com/market?agent=stable-diffusion)<br/><sup>By **[ShinChven](https://github.com/ShinChven)** on **2023-12-14**</sup> | 这个 GPT 帮助创建稳定扩散的精确提示。您将获得描述、提示和负面提示。提示和负面提示以纯文本代码块的形式呈现，便于复制。<br/>`stable-diffusion`                                                                                                     |
 | [梦境分析师](https://chat-preview.lobehub.com/market?agent=dream-psychoanalyst)<br/><sup>By **[ghyghoo8](https://github.com/ghyghoo8)** on **2023-12-13**</sup>        | 输入一段梦境，帮你分析分析<br/>`dream` `master` `think`                                                                                                                                                                                          |
 | [工资谈判游戏](https://chat-preview.lobehub.com/market?agent=payroll-game)<br/><sup>By **[ghyghoo8](https://github.com/ghyghoo8)** on **2023-12-13**</sup>             | 在这个工资谈判游戏中，你将面对臭名昭著的 “铁公鸡” 老板，他以吝啬著称。作为员工，你的挑战是说服这位老板给你加薪。然而，无论你的论点多么合理，“铁公鸡” 总能找到拒绝它们的理由。准备好你的论点，迎接一场聪明幽默的对决吧！<br/>`游戏` `老板` `工资` |
 | [Python Gradio 代码师](https://chat-preview.lobehub.com/market?agent=gradio-coding)<br/><sup>By **[Igroshka](https://github.com/Igroshka)** on **2023-12-12**</sup>    | 具有与 Hugging Face 合作的 Gradio 经验的 Python 程序员。<br/>`编程` `助手` `python`                                                                                                                                                              |
-| [英文翻译专家](https://chat-preview.lobehub.com/market?agent=translate-eng-expert)<br/><sup>By **[caolixiang](https://github.com/caolixiang)** on **2023-12-12**</sup> | 完美翻译<br/>`translate` `expert` `english`                                                                                                                                                                                                      |
 
-> 📊 Total agents: [<kbd>**63**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+> 📊 Total agents: [<kbd>**64**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

package/docs/Deployment/Analytics.md

@@ -0,0 +1,20 @@
+# Data Statistics
+
+To better analyze the usage of LobeChat users, we have integrated several free/open-source data statistics services in LobeChat for collecting user usage data, which you can enable as needed.
+
+#### TOC
+
+- [Vercel Analytics](#vercel-analytics)
+- [🚧 Posthog](#-posthog)
+
+## Vercel Analytics
+
+[Vercel Analytics](https://vercel.com/analytics) is a data analysis service launched by Vercel, which can help you collect website visit information, including traffic, sources, and devices used for access.
+
+We have integrated Vercel Analytics into the code, and you can enable it by setting the environment variable `NEXT_PUBLIC_ANALYTICS_VERCEL=1`, and then open the Analytics tab in the Vercel deployment project to view your application's visit information.
+
+Vercel Analytics provides 2500 free Web Analytics Events per month (which can be understood as PV), which is generally sufficient for personal deployment and self-use products.
+
+If you need detailed instructions on using Vercel Analytics, please refer to [Vercel Web Analytics Quick Start](https://vercel.com/docs/analytics/quickstart).
+
+## 🚧 Posthog

package/docs/{Analytics.zh-CN.md → Deployment/Analytics.zh-CN.md}

@@ -2,6 +2,11 @@
 
 为更好地帮助分析 LobeChat 的用户使用情况，我们在 LobeChat 中集成了若干免费 / 开源的数据统计服务，用于收集用户的使用情况，你可以按需开启。
 
+#### TOC
+
+- [Vercel Analytics](#vercel-analytics)
+- [🚧 Posthog](#-posthog)
+
 ## Vercel Analytics
 
 [Vercel Analytics](https://vercel.com/analytics) 是 Vercel 推出的一款数据分析服务，它可以帮助你收集网站的访问情况，包括访问量、访问来源、访问设备等等。

package/docs/{Docker-Deployment.md → Deployment/Docker-Deployment.md}

@@ -6,6 +6,13 @@
 
 We provide [Docker Images][docker-release-link] for you to deploy LobeChat service on your private device.
 
+#### TOC
+
+- [Install Docker container environment](#install-docker-container-environment)
+- [Deploy container image](#deploy-container-image)
+  - [`A` Command deployment (recommended)](#a-command-deployment-recommended)
+  - [`B` Docker Compose](#b-docker-compose)
+
 ## Install Docker container environment
 
 If already installed, skip this step.

package/docs/{Docker-Deployment.zh-CN.md → Deployment/Docker-Deployment.zh-CN.md}

@@ -6,6 +6,13 @@
 
 我们提供了 [Docker 镜像][docker-release-link]，供你在自己的私有设备上部署 LobeChat 服务
 
+#### TOC
+
+- [安装 Docker 容器环境](#安装-docker-容器环境)
+- [部署容器镜像](#部署容器镜像)
+  - [`A` 指令部署（推荐）](#a-指令部署推荐)
+  - [`B` Docker Compose](#b-docker-compose)
+
 ## 安装 Docker 容器环境
 
 如果已安装，请跳过此步

package/docs/{Environment-Variable.md → Deployment/Environment-Variable.md}

@@ -60,7 +60,7 @@ The above example adds `qwen-7b-chat` and `glm-6b` to the model list, removes `g
 
 ## Azure OpenAI
 
-If you need to use Azure OpenAI to provide model services, you can refer to the [Deploy with Azure OpenAI](./Deploy-with-Azure-OpenAI.zh-CN.md) section for detailed steps. Here are the environment variables related to Azure OpenAI.
+If you need to use Azure OpenAI to provide model services, you can refer to the [Deploy with Azure OpenAI](Deploy-with-Azure-OpenAI.zh-CN.md) section for detailed steps. Here are the environment variables related to Azure OpenAI.
 
 ### `USE_AZURE_OPENAI`
 

package/docs/{Environment-Variable.zh-CN.md → Deployment/Environment-Variable.zh-CN.md}

@@ -60,7 +60,7 @@ LobeChat 在部署时提供了一些额外的配置项，使用环境变量进
 
 ## Azure OpenAI
 
-如果你需要使用 Azure OpenAI 来提供模型服务，可以查阅 [使用 Azure OpenAI 部署](./Deploy-with-Azure-OpenAI.zh-CN.md) 章节查看详细步骤，这里将列举和 Azure OpenAI 相关的环境变量。
+如果你需要使用 Azure OpenAI 来提供模型服务，可以查阅 [使用 Azure OpenAI 部署](Deploy-with-Azure-OpenAI.zh-CN.md) 章节查看详细步骤，这里将列举和 Azure OpenAI 相关的环境变量。
 
 ### `USE_AZURE_OPENAI`
 

package/docs/Development/Architecture.md

@@ -0,0 +1,47 @@
+# Architecture Design
+
+LobeChat is an AI conversation application built on the Next.js framework, aiming to provide an AI productivity platform that enables users to interact with AI through natural language. The following is an overview of the architecture design of LobeChat:
+
+#### TOC
+
+- [Application Architecture Overview](#application-architecture-overview)
+- [Frontend Architecture](#frontend-architecture)
+- [Edge Runtime API](#edge-runtime-api)
+- [Agents Market](#agents-market)
+- [Plugin Market](#plugin-market)
+- [Security and Performance Optimization](#security-and-performance-optimization)
+- [Development and Deployment Process](#development-and-deployment-process)
+
+## Application Architecture Overview
+
+The overall architecture of LobeChat consists of the frontend, EdgeRuntime API, Agents Market, Plugin Market, and independent plugins. These components collaborate to provide a complete AI experience.
+
+## Frontend Architecture
+
+The frontend of LobeChat adopts the Next.js framework, leveraging its powerful server-side rendering (SSR) capability and routing functionality. The frontend utilizes a stack of technologies, including the antd component library, lobe-ui AIGC component library, zustand state management, swr request library, i18next internationalization library, and more. These technologies collectively support the functionality and features of LobeChat.
+
+The components in the frontend architecture include app, components, config, const, features, helpers, hooks, layout, locales, migrations, prompts, services, store, styles, types, and utils. Each component has specific responsibilities and collaborates with others to achieve different functionalities.
+
+## Edge Runtime API
+
+The Edge Runtime API is one of the core components of LobeChat, responsible for handling the core logic of AI conversations. It provides interaction interfaces with the AI engine, including natural language processing, intent recognition, and response generation. The EdgeRuntime API communicates with the frontend, receiving user input and returning corresponding responses.
+
+## Agents Market
+
+The Agents Market is a crucial part of LobeChat, providing various AI agents for different scenarios to handle specific tasks and domains. The Agents Market also offers functionality for discovering and uploading agents, allowing users to find agents created by others and easily share their own agents in the market.
+
+## Plugin Market
+
+The Plugin Market is another key component of LobeChat, offering various plugins to extend the functionality and features of LobeChat. Plugins can be independent functional modules or integrated with agents from the Agents Market. During conversations, the assistant automatically identifies user input, recognizes suitable plugins, and passes them to the corresponding plugins for processing and returns the results.
+
+## Security and Performance Optimization
+
+LobeChat's security strategy includes authentication and permission management. Users need to authenticate before using LobeChat, and operations are restricted based on the user's permissions.
+
+To optimize performance, LobeChat utilizes Next.js SSR functionality to achieve fast page loading and response times. Additionally, a series of performance optimization measures are implemented, including code splitting, caching, and resource compression.
+
+## Development and Deployment Process
+
+LobeChat's development process includes version control, testing, continuous integration, and continuous deployment. The development team uses version control systems for code management and conducts unit and integration testing to ensure code quality. Continuous integration and deployment processes ensure rapid delivery and deployment of code.
+
+The above is a brief introduction to the architecture design of LobeChat, detailing the responsibilities and collaboration of each component, as well as the impact of design decisions on application functionality and performance.

package/docs/{Development-Guide → Development}/Architecture.zh-CN.md

@@ -1,7 +1,17 @@
-## 架构设计
+# 架构设计
 
 LobeChat 是一个基于 Next.js 框架构建的 AI 会话应用，旨在提供一个 AI 生产力平台，使用户能够与 AI 进行自然语言交互。以下是 LobeChat 的架构设计介稿：
 
+#### TOC
+
+- [应用架构概览](#应用架构概览)
+- [前端架构](#前端架构)
+- [Edge Runtime API](#edge-runtime-api)
+- [Agents 市场](#agents-市场)
+- [插件市场](#插件市场)
+- [安全性和性能优化](#安全性和性能优化)
+- [开发和部署流程](#开发和部署流程)
+
 ## 应用架构概览
 
 LobeChat 的整体架构由前端、EdgeRuntime API、Agents 市场、插件市场和独立插件组成。这些组件相互协作，以提供完整的 AI 体验。

package/docs/Development/Chat-API.md

@@ -0,0 +1,136 @@
+# Conversation API Implementation Logic
+
+The implementation of LobeChat's large model AI mainly relies on OpenAI's API, including the core conversation API on the backend and the integrated API on the frontend. Next, we will introduce the implementation approach and code for the backend and frontend separately.
+
+#### TOC
+
+- [Backend Implementation](#backend-implementation)
+  - [Core Conversation API](#core-conversation-api)
+  - [Conversation Result Processing](#conversation-result-processing)
+- [Frontend Implementation](#frontend-implementation)
+  - [Frontend Integration](#frontend-integration)
+  - [Using Streaming to Get Results](#using-streaming-to-get-results)
+
+## Backend Implementation
+
+The following code removes authentication, error handling, and other logic, retaining only the core functionality logic.
+
+### Core Conversation API
+
+In the file `src/app/api/openai/chat/handler.ts`, we define a `POST` method, which first parses the payload data from the request (i.e., the conversation content sent by the client), and then retrieves the authorization information from the request. Then, we create an `openai` object and call the `createChatCompletion` method, which is responsible for sending the conversation request to OpenAI and returning the result.
+
+```ts
+export const POST = async (req: Request) => {
+  const payload = await req.json();
+
+  const { apiKey, endpoint } = getOpenAIAuthFromRequest(req);
+
+  const openai = createOpenai(apiKey, endpoint);
+
+  return createChatCompletion({ openai, payload });
+};
+```
+
+### Conversation Result Processing
+
+In the file `src/app/api/openai/chat/createChatCompletion.ts`, we define the `createChatCompletion` method, which first preprocesses the payload data, then calls OpenAI's `chat.completions.create` method to send the request, and uses the `OpenAIStream` from the [Vercel AI SDK](https://sdk.vercel.ai/docs) to convert the returned result into a streaming response.
+
+```ts
+import { OpenAIStream, StreamingTextResponse } from 'ai';
+
+export const createChatCompletion = async ({ payload, openai }: CreateChatCompletionOptions) => {
+  const { messages, ...params } = payload;
+
+  const formatMessages = messages.map((m) => ({
+    content: m.content,
+    name: m.name,
+    role: m.role,
+  }));
+
+  const response = await openai.chat.completions.create(
+    {
+      messages: formatMessages,
+      ...params,
+      stream: true,
+    },
+    { headers: { Accept: '*/*' } },
+  );
+  const stream = OpenAIStream(response);
+  return new StreamingTextResponse(stream);
+};
+```
+
+## Frontend Implementation
+
+### Frontend Integration
+
+In the `src/services/chatModel.ts` file, we define the `fetchChatModel` method, which first preprocesses the payload data, then sends a POST request to the `/chat` endpoint on the backend, and returns the request result.
+
+```ts
+export const fetchChatModel = (
+  { plugins: enabledPlugins, ...params }: Partial<OpenAIStreamPayload>,
+  options?: FetchChatModelOptions,
+) => {
+  const payload = merge(
+    {
+      model: initialLobeAgentConfig.model,
+      stream: true,
+      ...initialLobeAgentConfig.params,
+    },
+    params,
+  );
+
+  const filterFunctions: ChatCompletionFunctions[] = pluginSelectors.enabledSchema(enabledPlugins)(
+    usePluginStore.getState(),
+  );
+
+  const functions = filterFunctions.length === 0 ? undefined : filterFunctions;
+
+  return fetch(OPENAI_URLS.chat, {
+    body: JSON.stringify({ ...payload, functions }),
+    headers: createHeaderWithOpenAI({ 'Content-Type': 'application/json' }),
+    method: 'POST',
+    signal: options?.signal,
+  });
+};
+```
+
+### Using Streaming to Get Results
+
+In the `src/utils/fetch.ts` file, we define the `fetchSSE` method, which uses a streaming approach to retrieve data. When a new data chunk is read, it calls the `onMessageHandle` callback function to process the data chunk, achieving a typewriter-like output effect.
+
+```ts
+export const fetchSSE = async (fetchFn: () => Promise<Response>, options: FetchSSEOptions = {}) => {
+  const response = await fetchFn();
+
+  if (!response.ok) {
+    const chatMessageError = await getMessageError(response);
+
+    options.onErrorHandle?.(chatMessageError);
+    return;
+  }
+
+  const returnRes = response.clone();
+
+  const data = response.body;
+
+  if (!data) return;
+
+  const reader = data.getReader();
+  const decoder = new TextDecoder();
+
+  let done = false;
+
+  while (!done) {
+    const { value, done: doneReading } = await reader.read();
+    done = doneReading;
+    const chunkValue = decoder.decode(value);
+
+    options.onMessageHandle?.(chunkValue);
+  }
+
+  return returnRes;
+};
+```
+
+The above is the core implementation of the LobeChat session API. With an understanding of these core codes, further expansion and optimization of LobeChat's AI functionality can be achieved.

package/docs/{Development-Guide → Development}/Chat-API.zh-CN.md

@@ -1,7 +1,16 @@
-# LobeChat 会话 API 实现逻辑
+# 会话 API 实现逻辑
 
 LobeChat 的大模型 AI 实现主要依赖于 OpenAI 的 API，包括后端的核心会话 API 和前端的集成 API。接下来，我们将分别介绍后端和前端的实现思路和代码。
 
+#### TOC
+
+- [后端实现](#后端实现)
+  - [核心会话 API](#核心会话-api)
+  - [会话结果处理](#会话结果处理)
+- [前端实现](#前端实现)
+  - [前端集成](#前端集成)
+  - [使用流式获取结果](#使用流式获取结果)
+
 ## 后端实现
 
 以下代码中移除了鉴权、错误处理等逻辑，仅保留了核心的主要功能逻辑。

package/docs/Development/Data-Store-Selectors.md

@@ -0,0 +1,68 @@
+# Data Store Selector
+
+Selectors are data retrieval modules under the LobeChat data flow development framework. Their role is to extract data from the store using specific business logic for consumption by components.
+
+Taking `src/store/plugin/selectors.ts` as an example:
+
+This TypeScript code snippet defines an object named `pluginSelectors`, which contains a series of selector functions used to retrieve data from the plugin storage state. Selectors are functions that extract and derive data from a Redux store (or similar state management library). This specific example is for managing the state related to the frontend application's plugin system.
+
+Here are some key points to note:
+
+- `enabledSchema`: A function that returns an array of `ChatCompletionFunctions` filtered based on the enabled plugin list `enabledPlugins`. It appends the plugin identifier as a prefix to the API names to ensure uniqueness and uses the `uniqBy` function from the Lodash library to remove duplicates.
+- `onlinePluginStore`: Returns the current online plugin list.
+- `pluginList`: Returns the list of plugins, including custom plugins and standard plugins.
+- `getPluginMetaById`: Returns the plugin metadata based on the plugin ID.
+- `getDevPluginById`: Returns information about the custom plugins in development.
+- `getPluginManifestById`: Returns the plugin manifest based on the plugin ID.
+- `getPluginSettingsById`: Returns the plugin settings based on the plugin ID.
+- `getPluginManifestLoadingStatus`: Returns the loading status of the plugin manifest (loading, success, or error) based on the plugin ID.
+- `isCustomPlugin`: Checks if the plugin with the given ID is a custom plugin.
+- `displayPluginList`: Returns a processed plugin list, including author, avatar, creation time, description, homepage URL, identifier, and title.
+- `hasPluginUI`: Determines if the plugin has UI components based on the plugin ID.
+
+Selectors are highly modular and maintainable. By encapsulating complex state selection logic in separate functions, they make the code more concise and intuitive when accessing state data in other parts of the application. Additionally, by using TypeScript, each function can have clear input and output types, which helps improve code reliability and development efficiency.
+
+Taking the `displayPluginList` method as an example, its code is as follows:
+
+```ts
+const pluginList = (s: PluginStoreState) => [...s.pluginList, ...s.customPluginList];
+
+const displayPluginList = (s: PluginStoreState) =>
+  pluginList(s).map((p) => ({
+    author: p.author,
+    avatar: p.meta?.avatar,
+    createAt: p.createAt,
+    desc: pluginHelpers.getPluginDesc(p.meta),
+    homepage: p.homepage,
+    identifier: p.identifier,
+    title: pluginHelpers.getPluginTitle(p.meta),
+  }));
+```
+
+- `pluginList` method: Used to retrieve the list of all plugins from the plugin state storage `PluginStoreState`. It creates a new plugin list by combining two arrays: `pluginList` and `customPluginList`.
+- `displayPluginList` method: Calls the `pluginList` method to retrieve the merged plugin list and transforms the `title` and `desc` into text displayed on the UI.
+
+In components, the final consumed data can be directly obtained by importing:
+
+```tsx | pure
+import { usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
+
+const Render = ({ plugins }) => {
+  const list = usePluginStore(pluginSelectors.displayPluginList);
+
+  return <> ... </>;
+};
+```
+
+The benefits of implementing this approach are:
+
+1. **Decoupling and reusability**: By separating selectors from components, we can reuse these selectors across multiple components without rewriting data retrieval logic. This reduces duplicate code, improves development efficiency, and makes the codebase cleaner and easier to maintain.
+2. **Performance optimization**: Selectors can be used to compute derived data, avoiding redundant calculations in each component. When the state changes, only the selectors dependent on that part of the state will recalculate, reducing unnecessary rendering and computation.
+3. **Ease of testing**: Selectors are pure functions, relying only on the passed parameters. This means they can be tested in an isolated environment without the need to simulate the entire store or component tree.
+4. **Type safety**: As LobeChat uses TypeScript, each selector has explicit input and output type definitions. This provides developers with the advantage of auto-completion and compile-time checks, reducing runtime errors.
+5. **Maintainability**: Selectors centralize the logic for reading state, making it more intuitive to track state changes and management. If the state structure changes, only the relevant selectors need to be updated, rather than searching and replacing in multiple places throughout the codebase.
+6. **Composability**: Selectors can be composed with other selectors to create more complex selection logic. This pattern allows developers to build a hierarchy of selectors, making state selection more flexible and powerful.
+7. **Simplified component logic**: Components do not need to know the structure of the state or how to retrieve and compute the required data. Components only need to call selectors to obtain the data needed for rendering, simplifying and clarifying component logic.
+
+With this design, LobeChat developers can focus more on building the user interface and business logic without worrying about the details of data retrieval and processing. This pattern also provides better adaptability and scalability for potential future changes in state structure.

package/docs/{Development-Guide/Data-Store/Selectors.zh-CN.md → Development/Data-Store-Selectors.zh-CN.md}

@@ -1,4 +1,4 @@
-## Selector
+# 数据存储取数模块
 
 selectors 是 LobeChat 数据流研发框架下的取数模块，它的作用是从 store 中以特定特务逻辑取出数据，供组件消费使用。
 

package/docs/Development/Feature-Development.md

@@ -0,0 +1,126 @@
+# How to Develop a New Feature
+
+LobeChat is built on the Next.js framework and uses TypeScript as the primary development language. When developing a new feature, we need to follow a certain development process to ensure the quality and stability of the code. The general process can be divided into the following five steps:
+
+1. Routing: Define routes (`src/app`).
+2. Data Structure: Define data structures (`src/types`).
+3. Business Logic Implementation: Zustand store (`src/store`).
+4. Page Display: Write static components/pages (`src/app/<new-page>/features/<new-feature>.tsx`).
+5. Function Binding: Bind the store with page triggers (`const [state, function] = useNewStore(s => [s.state, s.function])`).
+
+Taking the "Chat Messages" feature as an example, here are the brief steps to implement this feature:
+
+#### TOC
+
+- [1. Define Routes](#1-define-routes)
+- [2. Define Data Structure](#2-define-data-structure)
+- [3. Create Zustand Store](#3-create-zustand-store)
+- [4. Create Page and Components](#4-create-page-and-components)
+- [5. Function Binding](#5-function-binding)
+
+## 1. Define Routes
+
+In the `src/app` directory, we need to define a new route to host the "Chat Messages" page. Generally, we would create a new folder under `src/app`, for example, `chat`, and create a `page.tsx` file within this folder to export a React component as the main body of the page.
+
+```tsx
+// src/app/chat/page.tsx
+import ChatPage from './features/chat';
+
+export default ChatPage;
+```
+
+## 2. Define Data Structure
+
+In the `src/types` directory, we need to define the data structure for "Chat Messages". For example, we create a `chat.ts` file and define the `ChatMessage` type within it:
+
+```ts
+// src/types/chat.ts
+
+export type ChatMessage = {
+  id: string;
+  content: string;
+  timestamp: number;
+  sender: 'user' | 'bot';
+};
+```
+
+## 3. Create Zustand Store
+
+In the `src/store` directory, we need to create a new Zustand Store to manage the state of "Chat Messages". For example, we create a `chatStore.ts` file and define a Zustand Store within it:
+
+```ts
+// src/store/chatStore.ts
+import create from 'zustand';
+
+type ChatState = {
+  messages: ChatMessage[];
+  addMessage: (message: ChatMessage) => void;
+};
+
+export const useChatStore = create<ChatState>((set) => ({
+  messages: [],
+  addMessage: (message) => set((state) => ({ messages: [...state.messages, message] })),
+}));
+```
+
+## 4. Create Page and Components
+
+In `src/app/<new-page>/features/<new-feature>.tsx`, we need to create a new page or component to display "Chat Messages". In this file, we can use the Zustand Store created earlier and Ant Design components to build the UI:
+
+```jsx
+// src/features/chat/index.tsx
+import { List, Typography } from 'antd';
+import { useChatStore } from 'src/store/chatStore';
+
+const ChatPage = () => {
+  const messages = useChatStore((state) => state.messages);
+
+  return (
+    <List
+      dataSource={messages}
+      renderItem={(message) => (
+        <List.Item>
+          <Typography.Text>{message.content}</Typography.Text>
+        </List.Item>
+      )}
+    />
+  );
+};
+
+export default ChatPage;
+```
+
+## 5. Function Binding
+
+In a page or component, we need to bind the Zustand Store's state and methods to the UI. In the example above, we have already bound the `messages` state to the `dataSource` property of the list. Now, we also need a method to add new messages. We can define this method in the Zustand Store and then use it in the page or component:
+
+```jsx
+import { Button } from 'antd';
+
+const ChatPage = () => {
+  const messages = useChatStore((state) => state.messages);
+  const addMessage = useChatStore((state) => state.addMessage);
+
+  const handleSend = () => {
+    addMessage({ id: '1', content: 'Hello, world!', timestamp: Date.now(), sender: 'user' });
+  };
+
+  return (
+    <>
+      <List
+        dataSource={messages}
+        renderItem={(message) => (
+          <List.Item>
+            <Typography.Text>{message.content}</Typography.Text>
+          </List.Item>
+        )}
+      />
+      <Button onClick={handleSend}>Send</Button>
+    </>
+  );
+};
+
+export default ChatPage;
+```
+
+The above is the step to implement the "chat message" feature in LobeChat. Of course, in the actual development of LobeChat, the business requirements and scenarios faced in real situations are far more complex than the above demo. Please develop according to the actual situation.