@lobehub/chat 0.89.4 → 0.89.6

package/CHANGELOG.md

@@ -2,6 +2,49 @@
 
 # Changelog
 
+### [Version 0.89.6](https://github.com/lobehub/lobe-chat/compare/v0.89.5...v0.89.6)
+
+<sup>Released on **2023-10-15**</sup>
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.89.5](https://github.com/lobehub/lobe-chat/compare/v0.89.4...v0.89.5)
+
+<sup>Released on **2023-10-15**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix fallback to en when the locale is zh, fix reset button not clear plugin settings.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix fallback to en when the locale is zh ([ff2c00e](https://github.com/lobehub/lobe-chat/commit/ff2c00e))
+- **misc**: Fix reset button not clear plugin settings ([aa1e657](https://github.com/lobehub/lobe-chat/commit/aa1e657))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.89.4](https://github.com/lobehub/lobe-chat/compare/v0.89.3...v0.89.4)
 
 <sup>Released on **2023-10-15**</sup>

package/README.md

@@ -8,7 +8,7 @@
 
 <h1>Lobe Chat</h1>
 
-LobeChat is an open-source, extensible ([Function Calling][fc-link]), high-performance chatbot framework. <br/> It supports one-click free deployment of your private ChatGPT/LLM web application.
+LobeChat is an open-source, extensible ([Function Calling][fc-link]) high-performance chatbot framework. <br/> It supports one-click free deployment of your private ChatGPT/LLM web application.
 
 **English** · [简体中文](./README.zh-CN.md) · [Changelog](./CHANGELOG.md) · [Wiki][github-wiki-link] · [Report Bug][github-issues-link] · [Request Feature][github-issues-link]
 
@@ -66,14 +66,14 @@ LobeChat is an open-source, extensible ([Function Calling][fc-link]), high-perfo
 
 ## 👋🏻 Getting Started & Join Our Community
 
-Please be aware that LobeChat is currently under active development，feedback is welcome for any [issues][issues-link] encountered.
+Please be aware that LobeChat is currently under active development, and feedback is welcome for any [issues][issues-link] encountered.
 
 | [![][vercel-shield-badge]][vercel-link]   | No installation or registration necessary! Visit our website to experience it firsthand.                           |
 | :---------------------------------------- | :----------------------------------------------------------------------------------------------------------------- |
 | [![][discord-shield-badge]][discord-link] | Join our Discord community! This is where you can connect with developers and other enthusiastic users of LobeHub. |
 
 > **Important**\
-> **Star Us**，You will receive all releases notifications from GitHub without any delay \~ ⭐️
+> **Star Us**, You will receive all release notifications from GitHub without any delay \~ ⭐️
 
 ![](https://gw.alipayobjects.com/zos/kitchen/0hcO8QiU9c/star.webp)
 
@@ -86,12 +86,12 @@ Please be aware that LobeChat is currently under active development，feedback i
 
 ## ✨ Features
 
-- [x] 💨 **Quick Deployment**: Using the Vercel platform, you can deploy with just one click and complete the process within 1 minute, without any complex configuration;
+- [x] 💨 **Quick Deployment**: Using the Vercel platform, you can deploy with just one click and complete the process within 1 minute without any complex configuration;
 - [x] 💎 **Exquisite UI Design**: With a carefully designed interface, it offers an elegant appearance and smooth interaction. It supports light and dark themes and is mobile-friendly. PWA support provides a more native-like experience;
 - [x] 🗣️ **Smooth Conversation Experience**: Fluid responses ensure a smooth conversation experience. It fully supports Markdown rendering, including code highlighting, LaTex formulas, Mermaid flowcharts, and more;
 - [x] 🧩 **Plugin Support & Custom Plugin Development**: Conversations are extendable with plugins. Users can install and use various plugins, such as search engines, web extraction, etc. It also supports the development of custom plugins to meet custom needs;
 - [x] 🔒 **Privacy Protection**: All data is stored locally in the user's browser, ensuring user privacy;
-- [x] 🤖 **Customizable Agent Roles**: Users can create, share, and debug personalized dialogue agent roles according to their needs, providing more flexible and personalized dialogue functions;
+- [x] 🤖 **Customizable Agent Roles**: Users can create, share, and debug personalized dialogue agent roles according to their needs, providing more flexible and customized dialogue functions;
 - [x] 🌐 **Custom Domain**: If users have their own domain, they can bind it to the platform for quick access to the dialogue agent from anywhere.
 - [x] 🏬 **Role Market**: A Role Market is provided where users can select their preferred dialogue agent roles, enriching the content and style of the dialogue;
 
@@ -110,7 +110,7 @@ Please be aware that LobeChat is currently under active development，feedback i
 
 #### `1` Function Calling Plugin System
 
-By building a powerful plugin ecosystem, ChatGPT not only can provide real-time news updates, but it can also assist you in easily querying documents and accessing various e-commerce data. This allows ChatGPT to play a key role in a wider range of fields. If you are interested in writing plugins, we provide detailed component development documentation, SDKs, and template files in the [🧩 Plugin System](#-Plugin-System) section below. Let's work together to make ChatGPT more powerful and easier to use.
+By building a robust plugin ecosystem, ChatGPT cannot only provide real-time news updates but can also assist you in efficiently querying documents and accessing various e-commerce data. This allows ChatGPT to play a vital role in a wider range of fields. If you are interested in writing plugins, we provide detailed component development documentation, SDKs, and template files in the [🧩 Plugin System](#-Plugin-System) section below. Let's work together to make ChatGPT more powerful and easier to use.
 
 <br/>
 
@@ -118,7 +118,7 @@ By building a powerful plugin ecosystem, ChatGPT not only can provide real-time
 
 #### `2` Prompt Agent Market
 
-In our agent market, we have accumulated a large number of practical prompt agents that have been used in daily work and study. You can also share your agents here and iterate and optimize your prompt agents with more people. You can submit your agents through [🤖/🏪 Submit Agents][submit-agents-link], and our automated i18n workflow will automatically translate your agents into multiple languages, allowing users around the world to enjoy your wisdom.
+In our agent market, we have accumulated a large number of practical, prompt agents that have been used in daily work and study. You can also share your agents here and iterate and optimize your prompt agents with more people. You can submit your agents through [🤖/🏪 Submit Agents][submit-agents-link], and our automated i18n workflow will automatically translate your agents into multiple languages, allowing users worldwide to enjoy your wisdom.
 
 <br/>
 
@@ -176,22 +176,26 @@ We have carried out a series of optimization designs for mobile devices to enhan
 
 ## 🛳 Self Hosting
 
-LobeChat provides [Self-Hosted Version][deploy-link] with Vercel and [Docker Image][docker-release-link]. This allows you to deploy your own chatbot within a few minutes, without any prior knowledge.
-
-<br/>
+LobeChat provides Self-Hosted Version with Vercel and [Docker Image][docker-release-link]. This allows you to deploy your own chatbot within a few minutes without any prior knowledge.
 
 ### `A` Deploying with Vercel
 
 If you want to deploy this service yourself on Vercel, you can follow these steps:
 
 - Prepare your [OpenAI API Key](https://platform.openai.com/account/api-keys).
-- Click the button below to start deployment: Deploy with Vercel. Log in directly with your GitHub account and remember to fill in the API Key and access code CODE on the environment variable page;
+- Click the button below to start deployment: Deploy with Vercel. Log in directly with your GitHub account, and remember to fill in the `OPENAI_API_KEY`(required) and `ACCESS_CODE` (recommended) on the environment variable section;
 - After deployment, you can start using it;
-- Bind a custom domain (optional): The DNS of the domain assigned by Vercel is polluted in some areas, binding a custom domain can connect directly.
+- Bind a custom domain (optional): The DNS of the domain assigned by Vercel is polluted in some areas; binding a custom domain can connect directly.
+
+<div align="center">
+
+[![][deploy-button-image]][deploy-link]
+
+</div>
 
 #### Keep Updated
 
-If you have deployed your own project following the one-click deployment steps in the README, you might encounter constant prompts indicating "updates available". This is because Vercel defaults to creating a new project instead of forking this one, resulting in an inability to accurately detect updates.
+If you have deployed your own project following the one-click deployment steps in the README, you might encounter constant prompts indicating "updates available." This is because Vercel defaults to creating a new project instead of forking this one, resulting in an inability to detect updates accurately.
 
 > **Important**\
 > We suggest you redeploy using the following steps, [📘 Maintaining Updates with LobeChat Self-Deployment](https://github.com/lobehub/lobe-chat/wiki/Upstream-Sync).
@@ -231,13 +235,13 @@ $ docker run -d -p 3210:3210 \
 
 ### Environment Variable
 
-This project provides some additional configuration items, set with environment variables:
+This project provides some additional configuration items set with environment variables:
 
 | Environment Variable | Required | Description                                                                                                                                   | Example                                                                                   |
 | -------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
 | `OPENAI_API_KEY`     | Yes      | This is the API key you apply on the OpenAI account page                                                                                      | `sk-xxxxxx...xxxxxx`                                                                      |
 | `OPENAI_PROXY_URL`   | No       | If you manually configure the OpenAI interface proxy, you can use this configuration item to override the default OpenAI API request base URL | `https://api.chatanywhere.cn/v1`<br/>The default value is<br/>`https://api.openai.com/v1` |
-| `ACCESS_CODE`        | No       | Add a password to access this service, the password should be a 6-digit number or letter                                                      | `awCT74` or `e3@09!`                                                                      |
+| `ACCESS_CODE`        | No       | Add a password to access this service; the password should be a 6-digit number or letter                                                      | `awCT74` or `e3@09!`                                                                      |
 
 > **Note**\
 > The complete list of environment variables can be found in the [📘 Environment Variables](https://github.com/lobehub/lobe-chat/wiki/Environment-Variable)
@@ -264,12 +268,12 @@ This project provides some additional configuration items, set with environment
 
 ## 🧩 Plugins
 
-Plugins provide a means to extend the [Function Calling][fc-link] capabilities of LobeChat. They can be used to introduce new function calls, and even new ways to render message results. If you are interested in plugin development, please refer to our [📘 Plugin Development Guide](https://github.com/lobehub/lobe-chat/wiki/Plugin-Development) in the Wiki.
+Plugins provide a means to extend the [Function Calling][fc-link] capabilities of LobeChat. They can be used to introduce new function calls and even new ways to render message results. If you are interested in plugin development, please refer to our [📘 Plugin Development Guide](https://github.com/lobehub/lobe-chat/wiki/Plugin-Development) in the Wiki.
 
 - [lobe-chat-plugins][lobe-chat-plugins]: This is the plugin index for LobeChat. It accesses index.json from this repository to display a list of available plugins for LobeChat to the user.
 - [chat-plugin-template][chat-plugin-template]: This is the plugin template for LobeChat plugin development.
 - [@lobehub/chat-plugin-sdk][chat-plugin-sdk]: The LobeChat Plugin SDK assists you in creating exceptional chat plugins for Lobe Chat.
-- [@lobehub/chat-plugins-gateway][chat-plugins-gateway]: The LobeChat Plugins Gateway is a backend service that serves as a gateway for LobeChat plugins. We deploy this service using Vercel. The primary API POST /api/v1/runner is deployed as an Edge Function.
+- [@lobehub/chat-plugins-gateway][chat-plugins-gateway]: The LobeChat Plugins Gateway is a backend service that provides a gateway for LobeChat plugins. We deploy this service using Vercel. The primary API POST /api/v1/runner is deployed as an Edge Function.
 
 > **Note**\
 > The plugin system is currently undergoing major development. You can learn more in the following issues:
@@ -315,7 +319,7 @@ $ bun dev
 
 ## 🤝 Contributing
 
-Contributions of all types are more than welcome, if you are interested in contributing code, feel free to check out our GitHub [Issues][github-issues-link] and [Projects][github-project-link] to get stuck in to show us what you’re made of.
+Contributions of all types are more than welcome; if you are interested in contributing code, feel free to check out our GitHub [Issues][github-issues-link] and [Projects][github-project-link] to get stuck in to show us what you’re made of.
 
 [![][pr-welcome-shield]][pr-welcome-link]
 [![][submit-agents-shield]][submit-agents-link]
@@ -331,9 +335,9 @@ Contributions of all types are more than welcome, if you are interested in contr
 
 ## 🔗 More Products
 
-- **[🤯 Lobe Theme][lobe-theme] :** The modern theme for stable diffusion webui, exquisite interface design, highly customizable UI, and efficiency boosting features.
+- **[🤯 Lobe Theme][lobe-theme]:** The modern theme for stable diffusion webui, exquisite interface design, highly customizable UI, and efficiency-boosting features.
 - **[🌏 Lobe i18n][lobe-i18n] :** Lobe i18n is an automation tool for the i18n (internationalization) translation process, powered by ChatGPT. It supports features such as automatic splitting of large files, incremental updates, and customization options for the OpenAI model, API proxy, and temperature.
-- **[💌 Lobe Commit][lobe-commit] :** Lobe Commit is a CLI tool that leverages Langchain/ChatGPT to generate Gitmoji-based commit messages.
+- **[💌 Lobe Commit][lobe-commit]:** Lobe Commit is a CLI tool that leverages Langchain/ChatGPT to generate Gitmoji-based commit messages.
 
 <div align="right">
 
@@ -371,7 +375,8 @@ This project is [MIT](./LICENSE) licensed.
 [codespaces-shield]: https://github.com/codespaces/badge.svg
 [contributors-contrib]: https://contrib.rocks/image?repo=lobehub/lobe-chat
 [contributors-link]: https://github.com/lobehub/lobe-chat/graphs/contributors
-[deploy-link]: https://vercel.com/new/clone?repository-link=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat&env=OPENAI_API_KEY&envDescription=Find%20your%20OpenAI%20API%20Key%20by%20click%20the%20right%20Learn%20More%20button.%20%20&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&project-name=lobe-chat&repository-name=lobe-chat
+[deploy-button-image]: https://vercel.com/button
+[deploy-link]: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat&env=OPENAI_API_KEY&envDescription=Find%20your%20OpenAI%20API%20Key%20by%20click%20the%20right%20Learn%20More%20button.&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&project-name=lobe-chat&repository-name=lobe-chat
 [discord-link]: https://discord.gg/AYFPHvv2jT
 [discord-shield]: https://img.shields.io/discord/1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=flat-square
 [discord-shield-badge]: https://img.shields.io/discord/1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=for-the-badge

package/README.zh-CN.md

@@ -178,7 +178,7 @@ LobeChat 提供了两种独特的主题模式 - 明亮模式和暗黑模式，
 
 ## 🛳 开箱即用
 
-LobeChat 提供了 Vercel 的 [自托管版本][deploy-link] 和 [Docker 镜像][docker-release-link]，这使你可以在几分钟内构建自己的聊天机器人，无需任何基础知识。
+LobeChat 提供了 Vercel 的 自托管版本 和 [Docker 镜像][docker-release-link]，这使你可以在几分钟内构建自己的聊天机器人，无需任何基础知识。
 
 <br/>
 
@@ -187,10 +187,16 @@ LobeChat 提供了 Vercel 的 [自托管版本][deploy-link] 和 [Docker 镜像]
 如果想在 Vercel 上部署该服务，可以按照以下步骤进行操作：
 
 - 准备好你的 [OpenAI API Key](https://platform.openai.com/account/api-keys) 。
-- 点击下方按钮开始部署： Deploy with Vercel，直接使用 GitHub 账号登录即可，记得在环境变量页填入 API Key 和页面访问密码 CODE；
+- 点击下方按钮开始部署： Deploy with Vercel，直接使用 GitHub 账号登录即可，记得在环境变量页填入 `OPENAI_API_KEY` （必填） and `ACCESS_CODE`（推荐）；
 - 部署完毕后，即可开始使用；
 - 绑定自定义域名（可选）：Vercel 分配的域名 DNS 在某些区域被污染了，绑定自定义域名即可直连。
 
+<div align="center">
+
+[![][deploy-button-image]][deploy-link]
+
+</div>
+
 #### 保持更新
 
 如果你根据 README 中的一键部署步骤部署了自己的项目，你可能会发现总是被提示 “有可用更新”。这是因为 Vercel 默认为你创建新项目而非 fork 本项目，这将导致无法准确检测更新。
@@ -373,7 +379,8 @@ This project is [MIT](./LICENSE) licensed.
 [codespaces-shield]: https://github.com/codespaces/badge.svg
 [contributors-contrib]: https://contrib.rocks/image?repo=lobehub/lobe-chat
 [contributors-link]: https://github.com/lobehub/lobe-chat/graphs/contributors
-[deploy-link]: https://vercel.com/new/clone?repository-link=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat&env=OPENAI_API_KEY&envDescription=Find%20your%20OpenAI%20API%20Key%20by%20click%20the%20right%20Learn%20More%20button.%20%20&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&project-name=lobe-chat&repository-name=lobe-chat
+[deploy-button-image]: https://vercel.com/button
+[deploy-link]: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat&env=OPENAI_API_KEY&envDescription=Find%20your%20OpenAI%20API%20Key%20by%20click%20the%20right%20Learn%20More%20button.&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&project-name=lobe-chat&repository-name=lobe-chat
 [discord-link]: https://discord.gg/AYFPHvv2jT
 [discord-shield]: https://img.shields.io/discord/1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=flat-square
 [discord-shield-badge]: https://img.shields.io/discord/1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=for-the-badge

package/docs/Development-Guide/Architecture.zh-CN.md

@@ -0,0 +1,37 @@
+## 架构设计
+
+LobeChat 是一个基于 Next.js 框架构建的 AI 会话应用，旨在提供一个 AI 生产力平台，使用户能够与 AI 进行自然语言交互。以下是 LobeChat 的架构设计介稿：
+
+## 应用架构概览
+
+LobeChat 的整体架构由前端、EdgeRuntime API、Agents 市场、插件市场和独立插件组成。这些组件相互协作，以提供完整的 AI 体验。
+
+## 前端架构
+
+LobeChat 的前端采用 Next.js 框架，利用其强大的 SSR（服务器端渲染）能力和路由功能。前端使用了一系列技术栈，包括 antd 组件库和 lobe-ui AIGC 组件库、zustand 状态管理、swr 请求库、i18next 国际化库等。这些技术栈共同支持了 LobeChat 的功能和特性。
+
+前端架构中的组件包括 app、components、config、const、features、helpers、hooks、layout、locales、migrations、prompts、services、store、styles、types 和 utils。每个组件都有特定的职责，并与其他组件协同工作，以实现不同的功能。
+
+## Edge Runtime API
+
+Edge Runtime API 是 LobeChat 的核心组件之一，负责处理 AI 会话的核心逻辑。它提供了与 AI 引擎的交互接口，包括自然语言处理、意图识别和回复生成等。EdgeRuntime API 与前端进行通信，接收用户的输入并返回相应的回复。
+
+## Agents 市场
+
+Agents 市场是 LobeChat 的一个重要组成部分，它提供了各种不同场景的 AI Agent，用于处理特定的任务和领域。Agents 市场还提供了使用和上传 Agent 的功能，使用户能够发现其他人制作的 Agent ，也可以一键分享自己的 Agent 到市场上。
+
+## 插件市场
+
+插件市场是 LobeChat 的另一个关键组件，它提供了各种插件，用于扩展 LobeChat 的功能和特性。插件可以是独立的功能模块，也可以与 Agents 市场的 Agent 进行集成。在会话中，助手将自动识别用户的输入，并识别适合的插件并传递给相应的插件进行处理，并返回处理结果。
+
+## 安全性和性能优化
+
+LobeChat 的安全性策略包括身份验证和权限管理。用户需要进行身份验证后才能使用 LobeChat，同时根据用户的权限进行相应的操作限制。
+
+为了优化性能，LobeChat 使用了 Next.js 的 SSR 功能，实现了快速的页面加载和响应时间。此外，还采用了一系列的性能优化措施，包括代码分割、缓存和资源压缩等。
+
+## 开发和部署流程
+
+LobeChat 的开发流程包括版本控制、测试、持续集成和持续部署。开发团队使用版本控制系统进行代码管理，并进行单元测试和集成测试以确保代码质量。持续集成和持续部署流程确保了代码的快速交付和部署。
+
+以上是 LobeChat 的架构设计介绍简介，详细解释了各个组件的职责和协作方式，以及设计决策对应用功能和性能的影响。

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

@@ -0,0 +1,127 @@
+# LobeChat 会话 API 实现逻辑
+
+LobeChat 的大模型 AI 实现主要依赖于 OpenAI 的 API，包括后端的核心会话 API 和前端的集成 API。接下来，我们将分别介绍后端和前端的实现思路和代码。
+
+## 后端实现
+
+以下代码中移除了鉴权、错误处理等逻辑，仅保留了核心的主要功能逻辑。
+
+### 核心会话 API
+
+在 `src/app/api/openai/chat/handler.ts` 文件中，我们定义了 `POST` 方法，该方法首先从请求中解析出 payload 数据（即客户端发送的会话内容），然后从请求中获取 OpenAI 的授权信息。之后，我们创建一个 `openai` 对象，并调用 `createChatCompletion` 方法，该方法负责发送会话请求到 OpenAI 并返回结果。
+
+```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 });
+};
+```
+
+### 会话结果处理
+
+在 `src/app/api/openai/chat/createChatCompletion.ts` 文件中，我们定义了 `createChatCompletion` 方法，该方法首先对 payload 数据进行预处理，然后调用 OpenAI 的 `chat.completions.create` 方法发送请求，并使用 [Vercel AI SDK](https://sdk.vercel.ai/docs) 中的 `OpenAIStream` 将返回的结果转化为流式响应。
+
+```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);
+};
+```
+
+## 前端实现
+
+### 前端集成
+
+在 `src/services/chatModel.ts` 文件中，我们定义了 `fetchChatModel` 方法，该方法首先对 payload 数据进行前置处理，然后发送 POST 请求到后端的 `/chat` 接口，并将请求结果返回。
+
+```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,
+  });
+};
+```
+
+### 使用流式获取结果
+
+在 `src/utils/fetch.ts` 文件中，我们定义了 `fetchSSE` 方法，该方法使用流式方法获取数据，当读取到新的数据块时，会调用 `onMessageHandle` 回调函数处理数据块，进而实现打字机输出效果。
+
+```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;
+};
+```
+
+以上就是 LobeChat 会话 API 的核心实现。在理解了这些核心代码的基础上，便可以进一步扩展和优化 LobeChat 的 AI 功能。

package/docs/Development-Guide/Feature-Development.zh-CN.md

@@ -0,0 +1,118 @@
+## 如何开发一个新功能
+
+LobeChat 基于 Next.js 框架构建，使用 TypeScript 作为主要开发语言。在开发新功能时，我们需要遵循一定的开发流程，以确保代码的质量和稳定性。大致的流程分为以下五步：
+
+1. 路由：定义路由 (`src/app`)
+2. 数据结构： 定义数据结构 ( `src/types` )
+3. 业务功能实现： zustand store (`src/store`)
+4. 页面展示：书写静态组件 / 页面 (`src/app/<new-page>/features/<new-feature>.tsx`)
+5. 功能绑定：绑定 store 与页面的触发 (`const  [state,function]= useNewStore(s=>[s.state,s.function])`)
+
+我们以 "会话消息" 功能为例，以下是实现这个功能的简要步骤：
+
+## 1. 定义路由
+
+在 `src/app` 目录下，我们需要定义一个新的路由来承载 "会话消息" 页面。一般来说，我们会在 `src/app` 下创建一个新的文件夹，例如 `chat`，并且在这个文件夹中创建 `page.tsx`文件，在该文件中导出 React 组件作为页面的主体。
+
+```tsx
+// src/app/chat/page.tsx
+import ChatPage from './features/chat';
+
+export default ChatPage;
+```
+
+## 2. 定义数据结构
+
+在 `src/types` 目录下，我们需要定义 "会话消息" 的数据结构。例如，我们创建一个 `chat.ts` 文件，并在其中定义 `ChatMessage` 类型：
+
+```ts
+// src/types/chat.ts
+
+export type ChatMessage = {
+  id: string;
+  content: string;
+  timestamp: number;
+  sender: 'user' | 'bot';
+};
+```
+
+## 3. 创建 Zustand Store
+
+在 `src/store` 目录下，我们需要创建一个新的 Zustand Store 来管理 "会话消息" 的状态。例如，我们创建一个 `chatStore.ts` 文件，并在其中定义一个 Zustand Store：
+
+```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. 创建页面与组件
+
+在 `src/app/<new-page>/features/<new-feature>.tsx` 中，我们需要创建一个新的页面或组件来显示 "会话消息"。在这个文件中，我们可以使用上面创建的 Zustand Store，以及 Ant Design 的组件来构建 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. 功能绑定
+
+在页面或组件中，我们需要将 Zustand Store 的状态和方法绑定到 UI 上。在上面的示例中，我们已经将 `messages` 状态绑定到了列表的 `dataSource` 属性上。现在，我们还需要一个方法来添加新的消息。我们可以在 Zustand Store 中定义这个方法，然后在页面或组件中使用它：
+
+```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;
+```
+
+以上就是在 LobeChat 中实现 "会话消息" 功能的步骤。当然，在 LobeChat 的实际开发中，真实场景所面临的业务诉求和场景远比上述 demo 复杂，请根据实际情况进行开发。

package/docs/Development-Guide/Resources.zh-CN.md

@@ -0,0 +1,19 @@
+# 资源与参考
+
+LobeChat 的设计和开发离不开社区和生态中的优秀项目。我们在设计和开发过程中使用或参考了一些优秀的资源和指南。以下是一些主要的参考资源，供开发者在开发和学习过程中参考：
+
+1. **OpenAI API 指南**：我们使用 OpenAI 的 API 来获取和处理 AI 的会话数据。你可以查看 [OpenAI API 指南](https://platform.openai.com/docs/api-reference/introduction) 了解更多详情。
+
+2. **OpenAI SDK**：我们使用 OpenAI 的 Node.js SDK 来与 OpenAI 的 API 交互。你可以在 [OpenAI SDK](https://github.com/openai/openai-node) 的 GitHub 仓库中查看源码和文档。
+
+3. **AI SDK**：我们使用 Vercel 的 AI SDK 来获取和处理 AI 的会话数据。你可以查看 [AI SDK](https://sdk.vercel.ai/docs) 的文档来了解更多详情。
+
+4. **LangChain**：我们早期的会话功能是基于 LangChain 实现的。你可以访问 [LangChain](https://langchain.com) 来了解更多关于它的信息。
+
+5. **Chat-Next-Web**：Chat Next Web 是一个优秀的项目，LobeChat 的部分功能、Workflow 等参考了它的实现。你可以在 [Chat-Next-Web](https://github.com/Yidadaa/ChatGPT-Next-Web) 的 GitHub 仓库中查看源码和文档。
+
+6. **Next.js 文档**：我们的项目是基于 Next.js 构建的，你可以查看 [Next.js 文档](https://nextjs.org/docs) 来了解更多关于 Next.js 的信息。
+
+7. **FlowGPT**：FlowGPT 是目前全球最大的 Prompt 社区，LobeChat 中的一些 Agent 来自 FlowGPT 的活跃作者。你可以访问 [FlowGPT](https://flowgpt.com/) 来了解更多关于它的信息。
+
+我们会持续更新和补充这个列表，为开发者提供更多的参考资源。

package/docs/Development-Guide/Test.zh-CN.md

@@ -0,0 +1,79 @@
+# LobeChat 测试指南
+
+LobeChat 的测试策略包括单元测试和端到端 (E2E) 测试。下面是每种测试的详细说明：
+
+## 单元测试
+
+单元测试用于测试应用中的独立单元（如组件、函数、工具函数等）的功能。我们使用 [vitest][vitest-url] 进行单元测试。
+
+要运行单元测试，可以使用以下命令：
+
+```
+npm run test
+```
+
+这将运行所有的单元测试，并生成测试报告。
+
+我们鼓励开发者在编写代码时，同时编写对应的单元测试，以确保代码的质量和稳定性。
+
+## 🚧 端到端测试
+
+端到端测试用于测试应用在真实环境中的功能和性能。它模拟用户的真实操作，并验证应用在不同场景下的表现。
+
+在 LobeChat 中，目前暂时没有集成端到端测试，我们会在后续迭代中逐步引入端到端测试。
+
+## 开发测试
+
+### 1. 单元测试
+
+单元测试是针对应用中的最小可测试单元进行的测试，通常是针对函数、组件或模块进行的测试。在 LobeChat 中，我们使用 [vitest][vitest-url] 进行单元测试。
+
+#### 编写测试用例
+
+在编写单元测试之前，您需要创建一个与被测试文件相同的目录，并将测试文件命名为 `<filename>.test.ts`。例如，如果要测试 `src/utils/formatDate.ts` 文件，测试文件应命名为 `src/utils/formatDate.test.ts`。
+
+在测试文件中，您可以使用 `describe` 和 `it` 函数来组织和编写测试用例。`describe` 函数用于创建测试套件，`it` 函数用于编写具体的测试用例。
+
+```typescript
+import { formatNumber } from './formatNumber';
+
+describe('formatNumber', () => {
+  it('should format number with comma separator', () => {
+    const result = formatNumber(1000);
+    expect(result).toBe('1,000');
+  });
+
+  it('should return the same number if it is less than 1000', () => {
+    const result = formatNumber(500);
+    expect(result).toBe('500');
+  });
+});
+```
+
+在测试用例中，您可以使用 `expect` 函数来断言测试结果是否符合预期。`expect` 函数可以与各种匹配器（matchers）一起使用，例如 `toBe`、`toEqual`、`toBeTruthy` 等。
+
+#### 运行单元测试
+
+通过运行以下命令来执行单元测试：
+
+```
+npm run test
+```
+
+这将运行所有的单元测试，并输出测试结果。
+
+## 测试策略
+
+为了编写有效的测试用例，您可以考虑以下测试策略：
+
+- **边界条件测试**：测试输入的边界条件，例如最小值、最大值、空值等。
+- **异常情况测试**：测试处理异常情况的代码，例如错误处理、异常情况下的回退等。
+- **功能测试**：测试应用的各个功能模块是否正常工作，包括用户交互、数据处理等。
+- **兼容性测试**：测试应用在不同浏览器和设备上的兼容性。
+- **性能测试**：测试应用在不同负载下的性能表现，例如响应时间、资源占用等。
+
+同时，请确保您的测试用例具有良好的覆盖率，覆盖到应用中的关键代码和功能。
+
+通过合理编写和执行单元测试、集成测试和端到端测试，您可以提高应用的质量和稳定性，并及时发现和修复潜在的问题。
+
+[vitest-url]: https://vitest.dev/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.89.4",
+  "version": "0.89.6",
   "description": "An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application",
   "keywords": [
     "chatbot",

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

@@ -13,7 +13,7 @@ import ChatInput from './features/ChatInput';
 import SideBar from './features/SideBar';
 import Layout from './layout.desktop';
 
-const Mobile: FC = dynamic(() => import('../(mobile)')) as FC;
+const Mobile: FC = dynamic(() => import('../(mobile)'), { ssr: false }) as FC;
 
 const DesktopPage = memo(() => (
   <ResponsiveIndex Mobile={Mobile}>

package/src/app/chat/settings/(desktop)/index.tsx

@@ -8,7 +8,7 @@ import ResponsiveIndex from '@/components/ResponsiveIndex';
 import EditPage from '../features/EditPage';
 import Layout from './layout.desktop';
 
-const Mobile: FC = dynamic(() => import('../(mobile)')) as FC;
+const Mobile: FC = dynamic(() => import('../(mobile)'), { ssr: false }) as FC;
 
 const ChatSettings = memo(() => (
   <ResponsiveIndex Mobile={Mobile}>

package/src/app/market/(desktop)/index.tsx

@@ -11,7 +11,8 @@ import { AgentsMarketIndexItem } from '@/types/market';
 import Index from '../index';
 import Layout from './layout.desktop';
 
-const Mobile: FC = dynamic(() => import('../(mobile)')) as FC;
+const Mobile: FC = dynamic(() => import('../(mobile)'), { ssr: false }) as FC;
+
 export default memo<{ defaultAgents?: AgentsMarketIndexItem[] }>(({ defaultAgents }) => (
   <ResponsiveIndex Mobile={Mobile}>
     <Layout>

package/src/app/settings/(desktop)/index.tsx

@@ -8,7 +8,7 @@ import ResponsiveIndex from '@/components/ResponsiveIndex';
 import Common from '../common';
 import Layout from './layout.desktop';
 
-const Mobile: FC = dynamic(() => import('../(mobile)')) as FC;
+const Mobile: FC = dynamic(() => import('../(mobile)'), { ssr: false }) as FC;
 
 export default memo(() => (
   <ResponsiveIndex Mobile={Mobile}>

package/src/app/settings/(desktop)/layout.responsive.tsx

@@ -7,7 +7,7 @@ import ResponsiveLayout from '@/layout/ResponsiveLayout.client';
 
 import DesktopLayout from './layout.desktop';
 
-const MobileLayout = dynamic(() => import('../(mobile)/layout.mobile')) as FC;
+const MobileLayout = dynamic(() => import('../(mobile)/layout.mobile'), { ssr: false }) as FC;
 
 export default memo(({ children }: PropsWithChildren) => (
   <ResponsiveLayout Desktop={DesktopLayout} Mobile={MobileLayout}>

package/src/app/settings/common/Common.tsx

@@ -11,6 +11,7 @@ import { DEFAULT_SETTINGS } from '@/const/settings';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { localeOptions } from '@/locales/options';
 import { settingsSelectors, useGlobalStore } from '@/store/global';
+import { usePluginStore } from '@/store/plugin';
 import { useSessionStore } from '@/store/session';
 import { switchLang } from '@/utils/switchLang';
 
@@ -22,6 +23,7 @@ const Common = memo(() => {
   const { t } = useTranslation('setting');
   const [form] = AntForm.useForm();
   const clearSessions = useSessionStore((s) => s.clearSessions);
+  const resetPluginSettings = usePluginStore((s) => s.resetPluginSettings);
 
   const settings = useGlobalStore(settingsSelectors.currentSettings, isEqual);
   const [setThemeMode, setSettings, resetSettings] = useGlobalStore((s) => [
@@ -45,6 +47,7 @@ const Common = memo(() => {
       title: t('danger.reset.confirm'),
     });
   }, []);
+
   const handleClear = useCallback(() => {
     modal.confirm({
       cancelText: t('cancel', { ns: 'common' }),
@@ -55,6 +58,7 @@ const Common = memo(() => {
       okText: t('ok', { ns: 'common' }),
       onOk: () => {
         clearSessions();
+        resetPluginSettings();
         message.success(t('danger.clear.success'));
       },
       title: t('danger.clear.confirm'),

package/src/app/welcome/(desktop)/index.tsx

@@ -9,7 +9,7 @@ import Footer from './features/Footer';
 import Showcase from './features/Showcase';
 import Layout from './layout.desktop';
 
-const Mobile: FC = dynamic(() => import('../(mobile)')) as FC;
+const Mobile: FC = dynamic(() => import('../(mobile)'), { ssr: false }) as FC;
 
 export default memo(() => (
   <ResponsiveIndex Mobile={Mobile}>

package/src/features/AgentSetting/AgentMeta/index.tsx

@@ -13,7 +13,7 @@ import { SessionLoadingState } from '../store/initialState';
 import AutoGenerateInput from './AutoGenerateInput';
 import BackgroundSwatches from './BackgroundSwatches';
 
-const EmojiPicker = dynamic(() => import('@/components/EmojiPicker'));
+const EmojiPicker = dynamic(() => import('@/components/EmojiPicker'), { ssr: false });
 
 const AgentMeta = memo(() => {
   const { t } = useTranslation('setting');

package/src/features/PluginDevModal/MetaForm.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { pluginSelectors, usePluginStore } from '@/store/plugin';
 
-const EmojiPicker = dynamic(() => import('@/components/EmojiPicker'));
+const EmojiPicker = dynamic(() => import('@/components/EmojiPicker'), { ssr: false });
 
 const MetaForm = memo<{ form: FormInstance; mode?: 'edit' | 'create' }>(({ form, mode }) => {
   const isEditMode = mode === 'edit';

package/src/locales/resources/index.ts

@@ -10,6 +10,7 @@ const resources = {
   'ja-JP': ja_JP,
   'ko-KR': ko_KR,
   'ru-RU': ru_RU,
+  'zh': zh_CN,
   'zh-CN': zh_CN,
   'zh-TW': zh_TW,
 } as const;

package/src/store/plugin/slices/plugin/action.ts

@@ -20,13 +20,14 @@ import { PluginDispatch, pluginManifestReducer } from './reducers/manifest';
 const t = setNamespace('plugin');
 
 /**
- * 代理行为接口
+ * 插件接口
  */
 export interface PluginAction {
   checkLocalEnabledPlugins: (sessions: LobeSessions) => void;
   deletePluginSettings: (id: string) => void;
   dispatchPluginManifest: (payload: PluginDispatch) => void;
   fetchPluginManifest: (identifier: string) => Promise<void>;
+  resetPluginSettings: () => void;
   updateManifestLoadingState: (key: string, value: boolean | undefined) => void;
   updatePluginSettings: <T>(id: string, settings: Partial<T>) => void;
   useFetchPluginList: () => SWRResponse<LobeChatPluginsMarketIndex>;
@@ -71,7 +72,6 @@ export const createPluginSlice: StateCreator<
 
     set({ pluginManifestMap: nextManifest }, false, t('dispatchPluginManifest', payload));
   },
-
   fetchPluginManifest: async (name) => {
     const plugin = pluginSelectors.getPluginMetaById(name)(get());
     // 1. 校验文件
@@ -113,6 +113,9 @@ export const createPluginSlice: StateCreator<
     // 4. 存储 manifest 信息
     get().dispatchPluginManifest({ id: plugin.identifier, plugin: data, type: 'addManifest' });
   },
+  resetPluginSettings: () => {
+    set({ pluginsSettings: {} }, false, t('resetPluginSettings'));
+  },
   updateManifestLoadingState: (key, value) => {
     set(
       produce((draft) => {