@lobehub/chat 1.0.0 → 1.0.2

package/contributing/Basic/Folder-Structure.md

@@ -0,0 +1,40 @@
+# Directory Structure
+
+The directory structure of LobeChat is as follows:
+
+```bash
+src
+├── app        # Main logic and state management related code for the application
+├── components # Reusable UI components
+├── config     # Application configuration files, including client-side and server-side environment variables
+├── const      # Used to define constants, such as action types, route names, etc.
+├── features   # Function modules related to business functions, such as agent settings, plugin development pop-ups, etc.
+├── hooks      # Custom utility hooks reused throughout the application
+├── layout     # Application layout components, such as navigation bars, sidebars, etc.
+├── locales    # Internationalization language files
+├── services   # Encapsulated backend service interfaces, such as HTTP requests
+├── store      # Zustand store for state management
+├── types      # TypeScript type definition files
+└── utils      # Common utility functions
+```
+
+## app
+
+In the `app` folder, we organize each route page according to the app router's [Route Groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups) to separately handle the implementation of desktop and mobile code. Taking the file structure of the `welcome` page as an example:
+
+```bash
+welcome
+├── (desktop)               # Desktop implementation
+│   ├── features            # Desktop-specific features
+│   ├── index.tsx           # Main entry file for desktop
+│   └── layout.desktop.tsx  # Desktop layout component
+├── (mobile)                # Mobile implementation
+│   ├── features            # Mobile-specific features
+│   ├── index.tsx           # Main entry file for mobile
+│   └── layout.mobile.tsx   # Mobile layout component
+├── features                # This folder contains features code shared by both desktop and mobile, such as the Banner component
+│   └── Banner
+└── page.tsx                # This is the main entry file for the page, used to load desktop or mobile code based on the device type
+```
+
+In this way, we can clearly distinguish and manage desktop and mobile code, while also easily reusing code required on both devices, thereby improving development efficiency and maintaining code cleanliness and maintainability.

package/contributing/Basic/Folder-Structure.zh-CN.md

@@ -0,0 +1,40 @@
+# 目录架构
+
+LobeChat 的文件夹目录架构如下：
+
+```bash
+src
+├── app        # 应用主要逻辑和状态管理相关的代码
+├── components # 可复用的 UI 组件
+├── config     # 应用的配置文件，包含客户端环境变量与服务端环境变量
+├── const      # 用于定义常量，如 action 类型、路由名等
+├── features   # 与业务功能相关的功能模块，如 Agent 设置、插件开发弹窗等
+├── hooks      # 全应用复用自定义的工具 Hooks
+├── layout     # 应用的布局组件，如导航栏、侧边栏等
+├── locales    # 国际化的语言文件
+├── services   # 封装的后端服务接口，如 HTTP 请求
+├── store      # 用于状态管理的 zustand store
+├── types      # TypeScript 的类型定义文件
+└── utils      # 通用的工具函数
+```
+
+## app
+
+在 `app` 文件夹中，我们将每个路由页面按照 app router 的 [Route Groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups) 进行组织，以此来分别处理桌面端和移动端的代码实现。以 `welcome` 页面的文件结构为例：
+
+```bash
+welcome
+├── (desktop)               # 桌面端实现
+│   ├── features            # 桌面端特有的功能
+│   ├── index.tsx           # 桌面端的主入口文件
+│   └── layout.desktop.tsx  # 桌面端的布局组件
+├── (mobile)                # 移动端实现
+│   ├── features            # 移动端特有的功能
+│   ├── index.tsx           # 移动端的主入口文件
+│   └── layout.mobile.tsx   # 移动端的布局组件
+├── features                # 此文件夹包含双端共享的特性代码，如 Banner 组件
+│   └── Banner
+└── page.tsx                # 此为页面的主入口文件，用于根据设备类型选择加载桌面端或移动端的代码
+```
+
+通过这种方式，我们可以清晰地区分和管理桌面端和移动端的代码，同时也能方便地复用在两种设备上都需要的代码，从而提高开发效率并保持代码的整洁和可维护性。

package/contributing/Basic/Intro.md

@@ -0,0 +1,111 @@
+# Technical Development Getting Started Guide
+
+Welcome to the LobeChat Technical Development Getting Started Guide. LobeChat is an AI conversation application built on the Next.js framework, incorporating a range of technology stacks to achieve diverse functionalities and features. This guide will detail the main technical components of LobeChat and how to configure and use these technologies in your development environment.
+
+#### TOC
+
+- [Basic Technology Stack](#basic-technology-stack)
+- [Folder Directory Structure](#folder-directory-structure)
+- [Local Development Environment Setup](#local-development-environment-setup)
+- [Code Style and Contribution Guide](#code-style-and-contribution-guide)
+- [Internationalization Implementation Guide](#internationalization-implementation-guide)
+- [Appendix: Resources and References](#appendix-resources-and-references)
+
+## Basic Technology Stack
+
+The core technology stack of LobeChat is as follows:
+
+- **Framework**: We chose [Next.js](https://nextjs.org/), a powerful React framework that provides key features such as server-side rendering, routing framework, and Router Handler.
+- **Component Library**: We use [Ant Design (antd)](https://ant.design/) as the basic component library, along with [lobe-ui](https://github.com/lobehub/lobe-ui) as our business component library.
+- **State Management**: We selected [zustand](https://github.com/pmndrs/zustand), a lightweight and easy-to-use state management library.
+- **Network Requests**: We use [swr](https://swr.vercel.app/), a React Hooks library for data fetching.
+- **Routing**: For routing management, we directly use the solution provided by [Next.js](https://nextjs.org/).
+- **Internationalization**: We use [i18next](https://www.i18next.com/) to support multiple languages in the application.
+- **Styling**: We use [antd-style](https://github.com/ant-design/antd-style), a CSS-in-JS library that complements Ant Design.
+- **Unit Testing**: We use [vitest](https://github.com/vitest-dev/vitest) for unit testing.
+
+## Folder Directory Structure
+
+The folder directory structure of LobeChat is as follows:
+
+```bash
+src
+├── app        # Code related to the main logic and state management of the application
+├── components # Reusable UI components
+├── config     # Application configuration files, including client and server environment variables
+├── const      # Used to define constants, such as action types, route names, etc.
+├── features   # Business-related feature modules, such as Agent settings, plugin development pop-ups, etc.
+├── hooks      # Custom utility Hooks reusable across the application
+├── layout     # Application layout components, such as navigation bars, sidebars, etc.
+├── locales    # Language files for internationalization
+├── services   # Encapsulated backend service interfaces, such as HTTP requests
+├── store      # Zustand store for state management
+├── types      # TypeScript type definition files
+└── utils      # General utility functions
+```
+
+For a detailed introduction to the directory structure, see: [Folder Directory Structure](Folder-Structure.zh-CN.md)
+
+## Local Development Environment Setup
+
+This section outlines setting up the development environment and local development. Before starting, please ensure that Node.js, Git, and your chosen package manager (Bun or PNPM) are installed in your local environment.
+
+We recommend using WebStorm as your integrated development environment (IDE).
+
+1. **Get the code**: Clone the LobeChat code repository locally:
+
+```bash
+git clone https://github.com/lobehub/lobe-chat.git
+```
+
+2. **Install dependencies**: Enter the project directory and install the required dependencies:
+
+```bash
+cd lobe-chat
+# If you use Bun
+bun install
+# If you use PNPM
+pnpm install
+```
+
+3. **Run and debug**: Start the local development server and begin your development journey:
+
+```bash
+# Start the development server with Bun
+bun run dev
+# Visit http://localhost:3010 to view the application
+```
+
+> \[!IMPORTANT]\
+> If you encounter the error "Could not find 'stylelint-config-recommended'" when installing dependencies with `npm`, please reinstall the dependencies using `pnpm` or `bun`.
+
+Now, you should be able to see the welcome page of LobeChat in your browser. For a detailed environment setup guide, please refer to [Development Environment Setup Guide](Setup-Development.zh-CN.md).
+
+## Code Style and Contribution Guide
+
+In the LobeChat project, we place great emphasis on the quality and consistency of the code. For this reason, we have established a series of code style standards and contribution processes to ensure that every developer can smoothly participate in the project. Here are the code style and contribution guidelines you need to follow as a developer.
+
+- **Code Style**: We use `@lobehub/lint` to unify the code style, including ESLint, Prettier, remarklint, and stylelint configurations. Please adhere to our code standards to maintain code consistency and readability.
+- **Contribution Process**: We use gitmoji and semantic release for code submission and release processes. Please use gitmoji to annotate your commit messages and ensure compliance with the semantic release standards so that our automation systems can correctly handle version control and releases.
+
+All contributions will undergo code review. Maintainers may suggest modifications or requirements. Please respond actively to review comments and make timely adjustments. We look forward to your participation and contribution.
+
+For detailed code style and contribution guidelines, please refer to [Code Style and Contribution Guide](Contributing-Guidelines.zh-CN.md).
+
+## Internationalization Implementation Guide
+
+LobeChat uses `i18next` and `lobe-i18n` to implement multilingual support, ensuring a global user experience.
+
+Internationalization files are located in `src/locales`, containing the default language (Chinese). We generate other language JSON files automatically through `lobe-i18n`.
+
+If you want to add a new language, follow specific steps detailed in [New Language Addition Guide](../Internationalization/Add-New-Locale.zh-CN.md). We encourage you to participate in our internationalization efforts to provide better services to global users.
+
+For a detailed guide on internationalization implementation, please refer to [Internationalization Implementation Guide](../Internationalization/Internationalization-Implementation.zh-CN.md).
+
+## Appendix: Resources and References
+
+To support developers in better understanding and using the technology stack of LobeChat, we provide a comprehensive list of resources and references — [LobeChat Resources and References](https://github.com/lobehub/lobe-chat/wiki/Resources.zh-CN) - Visit our maintained list of resources, including tutorials, articles, and other useful links.
+
+We encourage developers to utilize these resources to deepen their learning and enhance their skills, join community discussions through [LobeChat GitHub Discussions](https://github.com/lobehub/lobe-chat/discussions) or [Discord](https://discord.com/invite/AYFPHvv2jT), ask questions, or share your experiences.
+
+If you have any questions or need further assistance, please do not hesitate to contact us through the above channels.

package/contributing/Basic/Intro.zh-CN.md

@@ -0,0 +1,111 @@
+# 技术开发上手指南
+
+欢迎来到 LobeChat 技术开发上手指南。LobeChat 是一款基于 Next.js 框架构建的 AI 会话应用，它汇集了一系列的技术栈，以实现多样化的功能和特性。本指南将详细介绍 LobeChat 的主要技术组成，以及如何在你的开发环境中配置和使用这些技术。
+
+#### TOC
+
+- [基础技术栈](#基础技术栈)
+- [文件夹目录架构](#文件夹目录架构)
+- [本地开发环境设置](#本地开发环境设置)
+- [代码风格与贡献指南](#代码风格与贡献指南)
+- [国际化实现指南](#国际化实现指南)
+- [附录：资源与参考](#附录资源与参考)
+
+## 基础技术栈
+
+LobeChat 的核心技术栈如下：
+
+- **框架**：我们选择了 [Next.js](https://nextjs.org/)，这是一款强大的 React 框架，为我们的项目提供了服务端渲染、路由框架、Router Handler 等关键功能。
+- **组件库**：我们使用了 [Ant Design (antd)](https://ant.design/) 作为基础组件库，同时引入了 [lobe-ui](https://github.com/lobehub/lobe-ui) 作为我们的业务组件库。
+- **状态管理**：我们选用了 [zustand](https://github.com/pmndrs/zustand)，一款轻量级且易于使用的状态管理库。
+- **网络请求**：我们采用 [swr](https://swr.vercel.app/)，这是一款用于数据获取的 React Hooks 库。
+- **路由**：路由管理我们直接使用 [Next.js](https://nextjs.org/) 自身提供的解决方案。
+- **国际化**：我们使用 [i18next](https://www.i18next.com/) 来实现应用的多语言支持。
+- **样式**：我们使用 [antd-style](https://github.com/ant-design/antd-style)，这是一款与 Ant Design 配套的 CSS-in-JS 库。
+- **单元测试**：我们使用 [vitest](https://github.com/vitest-dev/vitest) 进行单元测试。
+
+## 文件夹目录架构
+
+LobeChat 的文件夹目录架构如下：
+
+```bash
+src
+├── app        # 应用主要逻辑和状态管理相关的代码
+├── components # 可复用的 UI 组件
+├── config     # 应用的配置文件，包含客户端环境变量与服务端环境变量
+├── const      # 用于定义常量，如 action 类型、路由名等
+├── features   # 与业务功能相关的功能模块，如 Agent 设置、插件开发弹窗等
+├── hooks      # 全应用复用自定义的工具 Hooks
+├── layout     # 应用的布局组件，如导航栏、侧边栏等
+├── locales    # 国际化的语言文件
+├── services   # 封装的后端服务接口，如 HTTP 请求
+├── store      # 用于状态管理的 zustand store
+├── types      # TypeScript 的类型定义文件
+└── utils      # 通用的工具函数
+```
+
+有关目录架构的详细介绍，详见： [文件夹目录架构](Folder-Structure.zh-CN.md)
+
+## 本地开发环境设置
+
+本节将概述搭建开发环境并进行本地开发。 在开始之前，请确保你的本地环境中已安装 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 查看应用
+```
+
+> \[!IMPORTANT]\
+> 如果使用`npm`安装依赖出现`Could not find "stylelint-config-recommended"`错误，请使用 `pnpm` 或者 `bun` 重新安装依赖。
+
+现在，你应该可以在浏览器中看到 LobeChat 的欢迎页面。详细的环境配置指南，请参考 [开发环境设置指南](Setup-Development.zh-CN.md)。
+
+## 代码风格与贡献指南
+
+在 LobeChat 项目中，我们十分重视代码的质量和一致性。为此，我们制定了一系列的代码风格规范和贡献流程，以确保每位开发者都能顺利地参与到项目中。以下是你作为开发者需要遵守的代码风格和贡献准则。
+
+- **代码风格**：我们使用 `@lobehub/lint` 统一代码风格，包括 ESLint、Prettier、remarklint 和 stylelint 配置。请遵守我们的代码规范，以保持代码的一致性和可读性。
+- **贡献流程**：我们采用 gitmoji 和 semantic release 作为代码提交和发布流程。请使用 gitmoji 标注您的提交信息，并确保遵循 semantic release 的规范，以便我们的自动化系统能够正确处理版本控制和发布。
+
+所有的贡献都将经过代码审查。维护者可能会提出修改建议或要求。请积极响应审查意见，并及时做出调整，我们期待你的参与和贡献。
+
+详细的代码风格和贡献指南，请参考 [代码风格与贡献指南](Contributing-Guidelines.zh-CN.md)。
+
+## 国际化实现指南
+
+LobeChat 采用 `i18next` 和 `lobe-i18n` 实现多语言支持，确保用户全球化体验。
+
+国际化文件位于 `src/locales`，包含默认语言（中文）。 我们会通过 `lobe-i18n` 自动生成其他的语言 JSON 文件。
+
+如果要添加新语种，需遵循特定步骤，详见 [新语种添加指南](../Internationalization/Add-New-Locale.zh-CN.md)。 我们鼓励你参与我们的国际化努力，共同为全球用户提供更好的服务。
+
+详细的国际化实现指南指南，请参考 [国际化实现指南](../Internationalization/Internationalization-Implementation.zh-CN.md)。
+
+## 附录：资源与参考
+
+为了支持开发者更好地理解和使用 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/contributing/Basic/Resources.md

@@ -0,0 +1,19 @@
+# Resources and References
+
+The design and development of LobeChat would not have been possible without the excellent projects in the community and ecosystem. We have used or referred to some outstanding resources and guides in the design and development process. Here are some key reference resources for developers to refer to during the development and learning process:
+
+1. **OpenAI API Guide**: We use OpenAI's API to access and process AI conversation data. You can check out the [OpenAI API Guide](https://platform.openai.com/docs/api-reference/introduction) for more details.
+
+2. **OpenAI SDK**: We use OpenAI's Node.js SDK to interact with OpenAI's API. You can view the source code and documentation on the [OpenAI SDK](https://github.com/openai/openai-node) GitHub repository.
+
+3. **AI SDK**: We use Vercel's AI SDK to access and process AI conversation data. You can refer to the documentation of [AI SDK](https://sdk.vercel.ai/docs) for more details.
+
+4. **LangChain**: Our early conversation feature was implemented based on LangChain. You can visit [LangChain](https://langchain.com) to learn more about it.
+
+5. **Chat-Next-Web**: Chat Next Web is an excellent project, and some of LobeChat's features and workflows are referenced from its implementation. You can view the source code and documentation on the [Chat-Next-Web](https://github.com/Yidadaa/ChatGPT-Next-Web) GitHub repository.
+
+6. **Next.js Documentation**: Our project is built on Next.js, and you can refer to the [Next.js Documentation](https://nextjs.org/docs) for more information about Next.js.
+
+7. **FlowGPT**: FlowGPT is currently the world's largest Prompt community, and some of the agents in LobeChat come from active authors in FlowGPT. You can visit [FlowGPT](https://flowgpt.com/) to learn more about it.
+
+We will continue to update and supplement this list to provide developers with more reference resources.

package/contributing/Basic/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/contributing/Basic/Setup-Development.md

@@ -0,0 +1,69 @@
+# Environment Setup Guide
+
+Welcome to the LobeChat development environment setup guide.
+
+#### TOC
+
+- [Online Development](#online-development)
+- [Local Development](#local-development)
+  - [Development Environment Requirements](#development-environment-requirements)
+  - [Project Setup](#project-setup)
+
+## Online Development
+
+If you have access to GitHub Codespaces, you can click the button below to enter the online development environment with just one click:
+
+[![][codespaces-shield]][codespaces-link]
+
+## Local Development
+
+Before starting development on LobeChat, you need to install and configure some necessary software and tools in your local environment. This document will guide you through these steps.
+
+### Development Environment Requirements
+
+First, you need to install the following software:
+
+- Node.js: LobeChat is built on Node.js, so you need to install Node.js. We recommend installing the latest stable version.
+- Yarn: We use Yarn as the preferred package manager. You can download and install it from the Yarn official website.
+- PNPM: We use PNPM as an auxiliary package manager. You can download and install it from the PNPM official website.
+- Git: We use Git for version control. You can download and install it from the Git official website.
+- IDE: You can choose your preferred integrated development environment (IDE). We recommend using WebStorm, a powerful IDE particularly suitable for TypeScript development.
+
+### Project Setup
+
+After installing the above software, you can start setting up the LobeChat project.
+
+1. **Get the code**: First, you need to clone the LobeChat codebase from GitHub. Run the following command in the terminal:
+
+```bash
+git clone https://github.com/lobehub/lobe-chat.git
+```
+
+2. **Install dependencies**: Then, navigate to the project directory and use Yarn to install the project's dependencies:
+
+```bash
+cd lobe-chat
+yarn install
+```
+
+If you are using PNPM, you can execute:
+
+```bash
+cd lobe-chat
+pnpm install
+```
+
+3. **Start the development server**: After installing the dependencies, you can start the development server:
+
+```bash
+yarn run dev
+```
+
+Now, you can open `http://localhost:3010` in your browser, and you should see the welcome page of LobeChat. This indicates that you have successfully set up the development environment.
+
+![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/274655364-414bc31e-8511-47a3-af17-209b530effc7.png)
+
+During the development process, if you encounter any issues with environment setup or have any questions about LobeChat development, feel free to ask us at any time. We look forward to seeing your contributions!
+
+[codespaces-link]: https://codespaces.new/lobehub/lobe-chat
+[codespaces-shield]: https://github.com/codespaces/badge.svg

package/contributing/Basic/Setup-Development.zh-CN.md

@@ -0,0 +1,69 @@
+# 环境设置指南
+
+欢迎阅读 LobeChat 的开发环境设置指南。
+
+#### TOC
+
+- [在线开发](#在线开发)
+- [本地开发](#本地开发)
+  - [开发环境需求](#开发环境需求)
+  - [项目设置](#项目设置)
+
+## 在线开发
+
+如果你有 GitHub Codespaces 的使用权限，可以点击下方按钮一键进入在线开发环境：
+
+[![][codespaces-shield]][codespaces-link]
+
+## 本地开发
+
+在开始开发 LobeChat 之前，你需要在本地环境中安装和配置一些必要的软件和工具。本文档将指导你完成这些步骤。
+
+### 开发环境需求
+
+首先，你需要安装以下软件：
+
+- Node.js：LobeChat 是基于 Node.js 构建的，因此你需要安装 Node.js。我们建议安装最新的稳定版。
+- Bun：我们使用 Bun 作为首选包管理器。你可以从 Bun 的官方网站上下载并安装。
+- PNPM：我们使用 PNPM 作为辅助包管理器。你可以从 pnpm 的官方网站上下载并安装。
+- Git：我们使用 Git 进行版本控制。你可以从 Git 的官方网站上下载并安装。
+- IDE：你可以选择你喜欢的集成开发环境（IDE）。我们推荐使用 WebStorm，它是一款功能强大的 IDE，特别适合 TypeScript 开发。
+
+### 项目设置
+
+完成上述软件的安装后，你可以开始设置 LobeChat 项目了。
+
+1. **获取代码**：首先，你需要从 GitHub 上克隆 LobeChat 的代码库。在终端中运行以下命令：
+
+```bash
+git clone https://github.com/lobehub/lobe-chat.git
+```
+
+2. **安装依赖**：然后，进入项目目录，并使用 bun 安装项目的依赖包：
+
+```bash
+cd lobe-chat
+bun i
+```
+
+如果你使用 pnpm ，可以执行:
+
+```bash
+cd lobe-chat
+pnpm i
+```
+
+3. **启动开发服务器**：安装完依赖后，你可以启动开发服务器：
+
+```bash
+bun run dev
+```
+
+现在，你可以在浏览器中打开 `http://localhost:3010`，你应该能看到 LobeChat 的欢迎页面。这表明你已经成功地设置了开发环境。
+
+![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/274655364-414bc31e-8511-47a3-af17-209b530effc7.png)
+
+在开发过程中，如果你在环境设置上遇到任何问题，或者有任何关于 LobeChat 开发的问题，欢迎随时向我们提问。我们期待看到你的贡献！
+
+[codespaces-link]: https://codespaces.new/lobehub/lobe-chat
+[codespaces-shield]: https://github.com/codespaces/badge.svg

package/contributing/Basic/Test.md

@@ -0,0 +1,87 @@
+# Testing Guide
+
+LobeChat's testing strategy includes unit testing and end-to-end (E2E) testing. Below are detailed explanations of each type of testing:
+
+#### TOC
+
+- [Unit Testing](#unit-testing)
+- [🚧 End-to-End Testing](#-end-to-end-testing)
+- [Development Testing](#development-testing)
+  - [1. Unit Testing](#1-unit-testing)
+- [Testing Strategy](#testing-strategy)
+
+## Unit Testing
+
+Unit testing is used to test the functionality of independent units in the application, such as components, functions, utility functions, etc. We use [vitest][vitest-url] for unit testing.
+
+To run unit tests, you can use the following command:
+
+```
+npm run test
+```
+
+This will run all unit tests and generate a test report.
+
+We encourage developers to write corresponding unit tests while writing code to ensure the quality and stability of the code.
+
+## 🚧 End-to-End Testing
+
+End-to-end testing is used to test the functionality and performance of the application in a real environment. It simulates real user operations and verifies the application's performance in different scenarios.
+
+Currently, there is no integrated end-to-end testing in LobeChat. We will gradually introduce end-to-end testing in subsequent iterations.
+
+## Development Testing
+
+### 1. Unit Testing
+
+Unit testing is conducted on the smallest testable units in the application, usually functions, components, or modules. In LobeChat, we use [vitest][vitest-url] for unit testing.
+
+#### Writing Test Cases
+
+Before writing unit tests, you need to create a directory with the same name as the file to be tested and name the test file `<filename>.test.ts`. For example, if you want to test the `src/utils/formatDate.ts` file, the test file should be named `src/utils/formatDate.test.ts`.
+
+In the test file, you can use the `describe` and `it` functions to organize and write test cases. The `describe` function is used to create a test suite, and the `it` function is used to write specific test cases.
+
+```typescript
+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');
+  });
+});
+```
+
+In test cases, you can use the `expect` function to assert whether the test results meet expectations. The `expect` function can be used with various matchers, such as `toBe`, `toEqual`, `toBeTruthy`, etc.
+
+#### Running Unit Tests
+
+Execute unit tests by running the following command:
+
+```
+npm run test
+```
+
+This will run all unit tests and output the test results.
+
+## Testing Strategy
+
+To write effective test cases, you can consider the following testing strategies:
+
+- **Boundary Testing**: Test the boundary conditions of inputs, such as minimum value, maximum value, empty value, etc.
+- **Exception Testing**: Test the code handling exceptional cases, such as error handling, fallback in exceptional situations, etc.
+- **Functional Testing**: Test whether various functional modules of the application work properly, including user interaction, data processing, etc.
+- **Compatibility Testing**: Test the compatibility of the application on different browsers and devices.
+- **Performance Testing**: Test the performance of the application under different loads, such as response time, resource utilization, etc.
+
+Also, ensure that your test cases have good coverage, covering critical code and functionality in the application.
+
+By properly writing and executing unit tests, integration tests, and end-to-end tests, you can improve the quality and stability of the application and promptly identify and fix potential issues.
+
+[vitest-url]: https://vitest.dev/

package/contributing/Basic/Test.zh-CN.md

@@ -0,0 +1,87 @@
+# 测试指南
+
+LobeChat 的测试策略包括单元测试和端到端 (E2E) 测试。下面是每种测试的详细说明：
+
+#### TOC
+
+- [单元测试](#单元测试)
+- [🚧 端到端测试](#-端到端测试)
+- [开发测试](#开发测试)
+  - [1. 单元测试](#1-单元测试)
+- [测试策略](#测试策略)
+
+## 单元测试
+
+单元测试用于测试应用中的独立单元（如组件、函数、工具函数等）的功能。我们使用 [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/