🔨 chore: Add docs workflow (#658)

* 🔧 chore: Add docs workflow and update docs files

* 📝 docs: Update wiki docs link

.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);
     },
   },
 });

README.md

@@ -308,7 +308,7 @@ Beside these features, LobeChat also have much better basic technique undergroun
 
 > \[!NOTE]
 >
-> The complete list of reports can be found in the [📘 Lighthouse Reports](https://github.com/lobehub/lobe-chat/wiki/Lighthouse)
+> The complete list of reports can be found in the [📘 Lighthouse Reports](https://github.com/lobehub/lobe-chat/wiki/Others/Lighthouse)
 
 |                   Desktop                   |                   Mobile                   |
 | :-----------------------------------------: | :----------------------------------------: |
@@ -348,7 +348,7 @@ If you have deployed your own project following the one-click deployment steps i
 
 > \[!TIP]
 >
-> We suggest you redeploy using the following steps, [📘 Maintaining Updates with LobeChat Self-Deployment](https://github.com/lobehub/lobe-chat/wiki/Upstream-Sync).
+> We suggest you redeploy using the following steps, [📘 Maintaining Updates with LobeChat Self-Deployment](https://github.com/lobehub/lobe-chat/wiki/Deployment/Upstream-Sync).
 
 <br/>
 
@@ -381,7 +381,7 @@ $ docker run -d -p 3210:3210 \
 
 > \[!NOTE]
 >
-> For detailed instructions on deploying with Docker, please refer to the [📘 Docker Deployment Guide](https://github.com/lobehub/lobe-chat/wiki/Docker-Deployment)
+> For detailed instructions on deploying with Docker, please refer to the [📘 Docker Deployment Guide](https://github.com/lobehub/lobe-chat/wiki/Deployment/Docker-Deployment)
 
 <br/>
 
@@ -398,7 +398,7 @@ This project provides some additional configuration items set with environment v
 
 > \[!NOTE]
 >
-> The complete list of environment variables can be found in the [📘 Environment Variables](https://github.com/lobehub/lobe-chat/wiki/Environment-Variable)
+> The complete list of environment variables can be found in the [📘 Environment Variables](https://github.com/lobehub/lobe-chat/wiki/Deployment/Environment-Variable)
 
 <div align="right">
 
@@ -423,7 +423,7 @@ This project provides some additional configuration items set with environment v
 
 ## 🧩 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/Plugins/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.

README.zh-CN.md

@@ -278,7 +278,7 @@ LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地
 
 > \[!NOTE]
 >
-> 完整测试报告可见 [📘 Lighthouse 性能测试](https://github.com/lobehub/lobe-chat/wiki/Lighthouse.zh-CN)
+> 完整测试报告可见 [📘 Lighthouse 性能测试](https://github.com/lobehub/lobe-chat/wiki/Others/Lighthouse.zh-CN)
 
 |                    Desktop                    |                    Mobile                    |
 | :-------------------------------------------: | :------------------------------------------: |
@@ -320,7 +320,7 @@ LobeChat 提供了 Vercel 的 自托管版本 和 [Docker 镜像][docker-release
 
 > \[!TIP]
 >
-> 我们建议按照 [📘 LobeChat 自部署保持更新](https://github.com/lobehub/lobe-chat/wiki/Upstream-Sync.zh-CN) 步骤重新部署。
+> 我们建议按照 [📘 LobeChat 自部署保持更新](https://github.com/lobehub/lobe-chat/wiki/Deployment/Upstream-Sync.zh-CN) 步骤重新部署。
 
 <br/>
 
@@ -353,7 +353,7 @@ $ docker run -d -p 3210:3210 \
 
 > \[!NOTE]
 >
-> 有关 Docker 部署的详细说明，详见 [📘 使用 Docker 部署](https://github.com/lobehub/lobe-chat/wiki/Docker-Deployment.zh-CN)
+> 有关 Docker 部署的详细说明，详见 [📘 使用 Docker 部署](https://github.com/lobehub/lobe-chat/wiki/Deployment/Docker-Deployment.zh-CN)
 
 <br/>
 
@@ -370,7 +370,7 @@ $ docker run -d -p 3210:3210 \
 
 > \[!NOTE]
 >
-> 完整环境变量可见 [📘环境变量](https://github.com/lobehub/lobe-chat/wiki/Environment-Variable.zh-CN)
+> 完整环境变量可见 [📘环境变量](https://github.com/lobehub/lobe-chat/wiki/Deployment/Environment-Variable.zh-CN)
 
 <div align="right">
 
@@ -395,7 +395,7 @@ $ docker run -d -p 3210:3210 \
 
 ## 🧩 插件体系
 
-插件提供了扩展 LobeChat [Function Calling][fc-link] 能力的方法。可以用于引入新的 Function Calling，甚至是新的消息结果渲染方式。如果你对插件开发感兴趣，请在 Wiki 中查阅我们的 [📘 插件开发指引](https://github.com/lobehub/lobe-chat/wiki/Plugin-Development.zh-CN) 。
+插件提供了扩展 LobeChat [Function Calling][fc-link] 能力的方法。可以用于引入新的 Function Calling，甚至是新的消息结果渲染方式。如果你对插件开发感兴趣，请在 Wiki 中查阅我们的 [📘 插件开发指引](https://github.com/lobehub/lobe-chat/wiki/Plugins/Plugin-Development.zh-CN) 。
 
 - [lobe-chat-plugins][lobe-chat-plugins]：这是 LobeChat 的插件索引。它从该仓库的 index.json 中获取插件列表并显示给用户。
 - [chat-plugin-template][chat-plugin-template]: Chat Plugin 插件开发模版，你可以通过项目模版快速新建插件项目。

docs/Deployment/Analytics.md

@@ -0,0 +1,15 @@
+# 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.
+
+## 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

docs/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`
 

docs/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`
 

docs/Development/Architecture.md

@@ -0,0 +1,37 @@
+# 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:
+
+## 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.

docs/Development/Architecture.zh-CN.md

@@ -1,4 +1,4 @@
-## 架构设计
+# 架构设计
 
 LobeChat 是一个基于 Next.js 框架构建的 AI 会话应用，旨在提供一个 AI 生产力平台，使用户能够与 AI 进行自然语言交互。以下是 LobeChat 的架构设计介稿：
 

docs/Development/Chat-API.md

@@ -0,0 +1,127 @@
+# 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.
+
+## 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.

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

@@ -1,4 +1,4 @@
-# LobeChat 会话 API 实现逻辑
+# 会话 API 实现逻辑
 
 LobeChat 的大模型 AI 实现主要依赖于 OpenAI 的 API，包括后端的核心会话 API 和前端的集成 API。接下来，我们将分别介绍后端和前端的实现思路和代码。
 

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.

docs/Development/Data-Store-Selectors.zh-CN.md

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

docs/Development/Feature-Development.md

@@ -0,0 +1,118 @@
+# 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:
+
+## 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.

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

@@ -1,4 +1,4 @@
-## 如何开发一个新功能
+# 如何开发一个新功能
 
 LobeChat 基于 Next.js 框架构建，使用 TypeScript 作为主要开发语言。在开发新功能时，我们需要遵循一定的开发流程，以确保代码的质量和稳定性。大致的流程分为以下五步：
 

docs/Development/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.

docs/Development/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.

docs/Development/Steup-Development.md

@@ -0,0 +1,62 @@
+# Environment Setup Guide
+
+Welcome to the LobeChat development environment setup guide.
+
+## 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

docs/Development/Steup-Development.zh-CN.md

@@ -1,4 +1,4 @@
-# LobeChat 环境设置指南
+# 环境设置指南
 
 欢迎阅读 LobeChat 的开发环境设置指南。
 

docs/Development/Test.md

@@ -0,0 +1,79 @@
+# Testing Guide
+
+LobeChat's testing strategy includes unit testing and end-to-end (E2E) testing. Below are detailed explanations of each type of testing:
+
+## 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/

docs/Development/Test.zh-CN.md

@@ -1,4 +1,4 @@
-# LobeChat 测试指南
+# 测试指南
 
 LobeChat 的测试策略包括单元测试和端到端 (E2E) 测试。下面是每种测试的详细说明：
 

docs/Development/index.md

@@ -0,0 +1,38 @@
+# 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, which integrates a series of technology stacks to achieve diverse functions and features. This guide will provide a detailed introduction to the main technical components of LobeChat and how to configure and use these technologies in your development environment.
+
+## Basic Technology Stack
+
+The core technology stack of LobeChat includes:
+
+- **Framework**: We have chosen [Next.js](https://nextjs.org/), a powerful React framework that provides key features such as server-side rendering, routing framework, and Router Handler for our project.
+- **Component Library**: We use [Ant Design (antd)](https://ant.design/) as the basic component library, and also introduce [lobe-ui](https://github.com/lobehub/lobe-ui) as our business component library.
+- **State Management**: We have opted for [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/) itself.
+- **Internationalization**: We use [i18next](https://www.i18next.com/) to implement multi-language support for 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        # Main logic of the application and code related to state management
+├── components # Reusable UI components
+├── config     # Application configuration files, including client-side environment variables and server-side environment variables
+├── const      # Used to define constants, such as action types, route names, etc.
+├── features   # Function modules related to business features, 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    # 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      # Common utility functions
+```
+
+For a detailed introduction to the directory structure, please refer to: [Folder Directory Structure](Folder-Structure.en-US.md)

docs/Development/index.zh-CN.md

@@ -1,4 +1,4 @@
-# LobeChat 技术开发上手指南
+# 技术开发上手指南
 
 欢迎来到 LobeChat 技术开发上手指南。LobeChat 是一款基于 Next.js 框架构建的 AI 会话应用，它汇集了一系列的技术栈，以实现多样化的功能和特性。本指南将详细介绍 LobeChat 的主要技术组成，以及如何在你的开发环境中配置和使用这些技术。
 

docs/Home.md

@@ -12,42 +12,61 @@ LobeChat is a open-source, extensible ([Function Calling][fc-url]), high-perform
 
 ![](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)
 
+<!-- DOCS LIST -->
+
 ### 🤯 LobeChat Usage
 
-- [Custom Agents Guide](Usage-Agents) | [自定义助手指南](Usage-Agents.zh-CN)
-- [Topics Guide](Usage-Topics) | [话题指南](Usage-Topics.zh-CN)
+- [Custom Agents Guide](https://github.com/lobehub/lobe-chat/wiki/Usage/Usage-Agents) | [自定义助手指南](https://github.com/lobehub/lobe-chat/wiki/Usage/Usage-Agentszh-CN)
+- [Topic Guide](https://github.com/lobehub/lobe-chat/wiki/Usage/Usage-Topics) | [话题指南](https://github.com/lobehub/lobe-chat/wiki/Usage/Usage-Topicszh-CN)
 
 ---
 
-#### 🛳 Self Hosting
+### 🛳 Self Hosting
 
-- [Environment Variables](Environment-Variable) | [环境变量](Environment-Variable.zh-CN)
-- [Maintaining Updates with LobeChat Self-Deployment](Upstream-Sync) | [自部署保持更新](Upstream-Sync.zh-CN)
-- [Deploying with Azure OpenAI](Deploy-with-Azure-OpenAI) | [使用 Azure OpenAI 部署](Deploy-with-Azure-OpenAI.zh-CN)
-- [Docker Deployment Guide](Docker-Deployment) | [Docker 部署指引](Docker-Deployment.zh-CN)
+- [Data Statistics](https://github.com/lobehub/lobe-chat/wiki/Deployment/Analytics) | [数据统计](https://github.com/lobehub/lobe-chat/wiki/Deployment/Analyticszh-CN)
+- [Deploying with Azure OpenAI](https://github.com/lobehub/lobe-chat/wiki/Deployment/Deploy-with-Azure-OpenAI) | [使用 Azure OpenAI 部署](https://github.com/lobehub/lobe-chat/wiki/Deployment/Deploy-with-Azure-OpenAIzh-CN)
+- [Docker Deployment Guide](https://github.com/lobehub/lobe-chat/wiki/Deployment/Docker-Deployment) | [Docker 部署指引](https://github.com/lobehub/lobe-chat/wiki/Deployment/Docker-Deploymentzh-CN)
+- [LobeChat Environment Variables](https://github.com/lobehub/lobe-chat/wiki/Deployment/Environment-Variable) | [LobeChat 环境变量](https://github.com/lobehub/lobe-chat/wiki/Deployment/Environment-Variablezh-CN)
+- [Maintaining Updates with LobeChat Self-Deployment](https://github.com/lobehub/lobe-chat/wiki/Deployment/Upstream-Sync) | [LobeChat 自部署保持更新](https://github.com/lobehub/lobe-chat/wiki/Deployment/Upstream-Synczh-CN)
+
+---
+
+### ⌨️ Development
+
+- [Technical Development Getting Started Guide](https://github.com/lobehub/lobe-chat/wiki/Development/index) | [技术开发上手指南](https://github.com/lobehub/lobe-chat/wiki/Development/indexzh-CN)
+- [Architecture Design](https://github.com/lobehub/lobe-chat/wiki/Development/Architecture) | [架构设计](https://github.com/lobehub/lobe-chat/wiki/Development/Architecturezh-CN)
+- [Conversation API Implementation Logic](https://github.com/lobehub/lobe-chat/wiki/Development/Chat-API) | [会话 API 实现逻辑](https://github.com/lobehub/lobe-chat/wiki/Development/Chat-APIzh-CN)
+- [Data Store Selector](https://github.com/lobehub/lobe-chat/wiki/Development/Data-Store-Selectors) | [数据存储取数模块](https://github.com/lobehub/lobe-chat/wiki/Development/Data-Store-Selectorszh-CN)
+- [Directory Structure](https://github.com/lobehub/lobe-chat/wiki/Development/Folder-Structure) | [目录架构](https://github.com/lobehub/lobe-chat/wiki/Development/Folder-Structurezh-CN)
+- [Environment Setup Guide](https://github.com/lobehub/lobe-chat/wiki/Development/Steup-Development) | [环境设置指南](https://github.com/lobehub/lobe-chat/wiki/Development/Steup-Developmentzh-CN)
+- [How to Develop a New Feature](https://github.com/lobehub/lobe-chat/wiki/Development/Feature-Development) | [如何开发一个新功能](https://github.com/lobehub/lobe-chat/wiki/Development/Feature-Developmentzh-CN)
+- [Resources and References](https://github.com/lobehub/lobe-chat/wiki/Development/Resources) | [资源与参考](https://github.com/lobehub/lobe-chat/wiki/Development/Resourceszh-CN)
+- [Testing Guide](https://github.com/lobehub/lobe-chat/wiki/Development/Test) | [测试指南](https://github.com/lobehub/lobe-chat/wiki/Development/Testzh-CN)
 
 ---
 
 ### 🤖 Agents
 
-- [Agent Index and Submit][agent-index] | [助手索引与提交][agent-index-cn]
+- [Agent Index and Submit](https://github.com/lobehub/lobe-chat-agents) | [助手索引与提交](https://github.com/lobehub/lobe-chat-agents/blob/main/README.zh-CN.md)
 
 ---
 
 ### 🧩 Plugins
 
-- [Plugin Index and Submit][plugin-index] | [插件索引与提交][plugin-index-cn]
-- [Plugin Development](Plugin-Development) | [插件开发](Plugin-Development.zh-CN)
-- [Plugin SDK Docs][plugin-sdk] | [插件 SDK 文档][plugin-skd-cn]
+- [LobeChat Plugin Development](https://github.com/lobehub/lobe-chat/wiki/Plugins/Plugin-Development) | [LobeChat 插件开发](https://github.com/lobehub/lobe-chat/wiki/Plugins/Plugin-Developmentzh-CN)
+- [Plugin Index and Submit](https://github.com/lobehub/lobe-chat-plugins) | [插件索引与提交](https://github.com/lobehub/lobe-chat-plugins/blob/main/README.zh-CN.md)
+- [Plugin SDK Docs](https://chat-plugin-sdk.lobehub.com) | [插件 SDK 文档](https://chat-plugin-sdk.lobehub.com)
 
 ---
 
-#### 📊 Other
+### 📊 Others
 
-- [Lighthouse Report](Lighthouse) | [性能测试](Lighthouse.zh-CN)
+- [Lighthouse Reports](https://github.com/lobehub/lobe-chat/wiki/Others/Lighthouse) | [Lighthouse 测试报告](https://github.com/lobehub/lobe-chat/wiki/Others/Lighthousezh-CN)
 
 ---
 
+ <!-- DOCS LIST -->
+
 <details><summary><h4>📝 License</h4></summary>
 
 [![][fossa-license-shield]][fossa-license-url]
@@ -59,14 +78,8 @@ This project is [MIT][license-url] licensed.
 
 <!-- LINK GROUP -->
 
-[agent-index]: https://github.com/lobehub/lobe-chat-agents
-[agent-index-cn]: https://github.com/lobehub/lobe-chat-agents/blob/main/README.zh-CN.md
 [fc-url]: https://sspai.com/post/81986
 [fossa-license-shield]: https://app.fossa.com/api/projects/git%2Bgithub.com%2Flobehub%2Flobe-chat.svg?type=large
 [fossa-license-url]: https://app.fossa.com/projects/git%2Bgithub.com%2Flobehub%2Flobe-chat
 [license-url]: https://github.com/lobehub/lobe-chat/blob/main/LICENSE
-[plugin-index]: https://github.com/lobehub/lobe-chat-plugins
-[plugin-index-cn]: https://github.com/lobehub/lobe-chat-plugins/blob/main/README.zh-CN.md
-[plugin-sdk]: https://chat-plugin-sdk.lobehub.com
-[plugin-skd-cn]: https://chat-plugin-sdk.lobehub.com
 [profile-url]: https://github.com/lobehub

docs/_Sidebar.md

@@ -4,37 +4,47 @@
 
 - [TOC](Home) | [目录](Home)
 
+<!-- DOCS LIST -->
+
 #### 🤯 LobeChat Usage
 
-- [Custom Agents Guide](Usage-Agents) | [中文](Usage-Agents.zh-CN)
-- [Topics Guide](Usage-Topics) | [中文](Usage-Topics.zh-CN)
+- [Custom Agents Guide](https://github.com/lobehub/lobe-chat/wiki/Usage/Usage-Agents) | [中文](https://github.com/lobehub/lobe-chat/wiki/Usage/Usage-Agentszh-CN)
+- [Topic Guide](https://github.com/lobehub/lobe-chat/wiki/Usage/Usage-Topics) | [中文](https://github.com/lobehub/lobe-chat/wiki/Usage/Usage-Topicszh-CN)
 
 #### 🛳 Self Hosting
 
-- [Environment Variables](Environment-Variable) | [中文](Environment-Variable.zh-CN)
-- [Upstream Sync](Upstream-Sync) | [中文](Upstream-Sync.zh-CN)
-- [Deploying with Azure OpenAI](Deploy-with-Azure-OpenAI) | [中文](Deploy-with-Azure-OpenAI.zh-CN)
-- [Docker Deployment Guide](Docker-Deployment) | [中文](Docker-Deployment.zh-CN)
+- [Data Statistics](https://github.com/lobehub/lobe-chat/wiki/Deployment/Analytics) | [中文](https://github.com/lobehub/lobe-chat/wiki/Deployment/Analyticszh-CN)
+- [Deploying with Azure OpenAI](https://github.com/lobehub/lobe-chat/wiki/Deployment/Deploy-with-Azure-OpenAI) | [中文](https://github.com/lobehub/lobe-chat/wiki/Deployment/Deploy-with-Azure-OpenAIzh-CN)
+- [Docker Deployment Guide](https://github.com/lobehub/lobe-chat/wiki/Deployment/Docker-Deployment) | [中文](https://github.com/lobehub/lobe-chat/wiki/Deployment/Docker-Deploymentzh-CN)
+- [LobeChat Environment Variables](https://github.com/lobehub/lobe-chat/wiki/Deployment/Environment-Variable) | [中文](https://github.com/lobehub/lobe-chat/wiki/Deployment/Environment-Variablezh-CN)
+- [Maintaining Updates with LobeChat Self-Deployment](https://github.com/lobehub/lobe-chat/wiki/Deployment/Upstream-Sync) | [中文](https://github.com/lobehub/lobe-chat/wiki/Deployment/Upstream-Synczh-CN)
+
+#### ⌨️ Development
+
+- [Technical Development Getting Started Guide](https://github.com/lobehub/lobe-chat/wiki/Development/index) | [中文](https://github.com/lobehub/lobe-chat/wiki/Development/indexzh-CN)
+- [Architecture Design](https://github.com/lobehub/lobe-chat/wiki/Development/Architecture) | [中文](https://github.com/lobehub/lobe-chat/wiki/Development/Architecturezh-CN)
+- [Conversation API Implementation Logic](https://github.com/lobehub/lobe-chat/wiki/Development/Chat-API) | [中文](https://github.com/lobehub/lobe-chat/wiki/Development/Chat-APIzh-CN)
+- [Data Store Selector](https://github.com/lobehub/lobe-chat/wiki/Development/Data-Store-Selectors) | [中文](https://github.com/lobehub/lobe-chat/wiki/Development/Data-Store-Selectorszh-CN)
+- [Directory Structure](https://github.com/lobehub/lobe-chat/wiki/Development/Folder-Structure) | [中文](https://github.com/lobehub/lobe-chat/wiki/Development/Folder-Structurezh-CN)
+- [Environment Setup Guide](https://github.com/lobehub/lobe-chat/wiki/Development/Steup-Development) | [中文](https://github.com/lobehub/lobe-chat/wiki/Development/Steup-Developmentzh-CN)
+- [How to Develop a New Feature](https://github.com/lobehub/lobe-chat/wiki/Development/Feature-Development) | [中文](https://github.com/lobehub/lobe-chat/wiki/Development/Feature-Developmentzh-CN)
+- [Resources and References](https://github.com/lobehub/lobe-chat/wiki/Development/Resources) | [中文](https://github.com/lobehub/lobe-chat/wiki/Development/Resourceszh-CN)
+- [Testing Guide](https://github.com/lobehub/lobe-chat/wiki/Development/Test) | [中文](https://github.com/lobehub/lobe-chat/wiki/Development/Testzh-CN)
 
 #### 🤖 Agents
 
-- [Agent Index][agent-index] | [中文][agent-index-cn]
+- [Agent Index and Submit](https://github.com/lobehub/lobe-chat-agents) | [中文](https://github.com/lobehub/lobe-chat-agents/blob/main/README.zh-CN.md)
 
 #### 🧩 Plugins
 
-- [Plugin Index][plugin-index] | [中文][plugin-index-cn]
-- [Plugin Development](Plugin-Development) | [中文](Plugin-Development.zh-CN)
-- [Plugin SDK Docs][plugin-sdk] | [中文][plugin-skd-cn]
+- [LobeChat Plugin Development](https://github.com/lobehub/lobe-chat/wiki/Plugins/Plugin-Development) | [中文](https://github.com/lobehub/lobe-chat/wiki/Plugins/Plugin-Developmentzh-CN)
+- [Plugin Index and Submit](https://github.com/lobehub/lobe-chat-plugins) | [中文](https://github.com/lobehub/lobe-chat-plugins/blob/main/README.zh-CN.md)
+- [Plugin SDK Docs](https://chat-plugin-sdk.lobehub.com) | [中文](https://chat-plugin-sdk.lobehub.com)
 
-#### 📊 Other
+#### 📊 Others
 
-- [Lighthouse Report](Lighthouse) | [中文](Lighthouse.zh-CN)
+- [Lighthouse Reports](https://github.com/lobehub/lobe-chat/wiki/Others/Lighthouse) | [中文](https://github.com/lobehub/lobe-chat/wiki/Others/Lighthousezh-CN)
+
+ <!-- DOCS LIST -->
 
 <!-- LINK GROUP -->
-
-[agent-index]: https://github.com/lobehub/lobe-chat-agents
-[agent-index-cn]: https://github.com/lobehub/lobe-chat-agents/blob/main/README.zh-CN.md
-[plugin-index]: https://github.com/lobehub/lobe-chat-plugins
-[plugin-index-cn]: https://github.com/lobehub/lobe-chat-plugins/blob/main/README.zh-CN.md
-[plugin-sdk]: https://chat-plugin-sdk.lobehub.com
-[plugin-skd-cn]: https://chat-plugin-sdk.lobehub.com

package.json

@@ -30,6 +30,7 @@
     "build:analyze": "ANALYZE=true next build",
     "build:docker": "DOCKER=true next build",
     "dev": "next dev -p 3010",
+    "docs": "lobe-i18n md && npm run workflow:docs",
     "i18n": "npm run workflow:i18n && lobe-i18n",
     "lint": "npm run lint:ts && npm run lint:style && npm run type-check && npm run lint:circular",
     "lint:circular": "dpdm src/**/*.ts  --warning false  --tree false  --exit-code circular:1  -T true",
@@ -46,6 +47,7 @@
     "test:coverage": "vitest run --coverage --passWithNoTests",
     "test:update": "vitest -u",
     "type-check": "tsc --noEmit",
+    "workflow:docs": "bun scripts/docsWorkflow/index.ts",
     "workflow:i18n": "ts-node --project ./tsconfig.json scripts/i18nWorkflow/index.ts",
     "workflow:readme": "bun scripts/readmeWorkflow/index.ts"
   },
@@ -153,18 +155,23 @@
     "dpdm": "^3",
     "eslint": "^8",
     "fake-indexeddb": "^5",
+    "glob": "^10",
     "husky": "^8",
     "jsdom": "^23.0.0",
     "lint-staged": "^15",
     "lodash": "^4",
     "markdown-table": "^3",
     "node-fetch": "^3",
+    "p-map": "^7",
     "prettier": "^3",
     "remark-cli": "^11",
+    "remark-parse": "^10",
     "semantic-release": "^21",
     "stylelint": "^15",
     "ts-node": "^10",
     "typescript": "^5",
+    "unified": "^11",
+    "unist-util-visit": "^5",
     "vitest": "0.34.6"
   },
   "publishConfig": {

scripts/docsWorkflow/const.ts

@@ -0,0 +1,14 @@
+import { globSync } from 'glob';
+import { resolve } from 'node:path';
+
+export const WIKI_URL = 'https://github.com/lobehub/lobe-chat/wiki/';
+export const ROOT = resolve(__dirname, '../..');
+export const DOCS_DIR = resolve(ROOT, 'docs');
+export const HOME_PATH = resolve(DOCS_DIR, 'Home.md');
+export const SIDEBAR_PATH = resolve(DOCS_DIR, '_Sidebar.md');
+export const docsFiles = globSync(resolve(DOCS_DIR, '**/*.md'), {
+  ignore: ['Home.md', '_Sidebar.md', '_Footer.md'],
+  nodir: true,
+}).filter((file) => !file.includes('.zh-CN.md'));
+
+export const SPLIT = '<!-- DOCS LIST -->';

scripts/docsWorkflow/index.ts

@@ -0,0 +1,73 @@
+import { consola } from 'consola';
+import { relative, resolve } from 'node:path';
+import pMap from 'p-map';
+import urlJoin from 'url-join';
+
+import { DOCS_DIR, HOME_PATH, SIDEBAR_PATH, WIKI_URL, docsFiles } from './const';
+import toc from './toc';
+import { genMdLink, getTitle, updateDocs } from './utils';
+
+const run = async () => {
+  consola.info(`Find ${docsFiles.length} entry doc files`);
+  const docs: any = await pMap(toc, async (item) => {
+    const childrenFiles = docsFiles.filter((file) => file.includes(resolve(DOCS_DIR, item.dir)));
+
+    const children: any = await pMap(childrenFiles, async (path) => {
+      const links = {
+        cn: urlJoin(WIKI_URL, relative(DOCS_DIR, path).replace('.md', 'zh-CN')),
+        en: urlJoin(WIKI_URL, relative(DOCS_DIR, path).replace('.md', '')),
+      };
+      const paths = {
+        cn: path.replace('.md', '.zh-CN.md'),
+        en: path,
+      };
+      const titles = {
+        cn: await getTitle(paths.cn),
+        en: await getTitle(paths.en),
+      };
+      return {
+        links,
+        paths,
+        titles,
+      };
+    });
+    return {
+      children: children,
+      ...item,
+    };
+  });
+
+  let homeContent = '';
+  let sidebarContent = '';
+
+  docs.forEach((item: any) => {
+    homeContent += `### ${item.title}\n\n`;
+    sidebarContent += `#### ${item.title}\n\n`;
+    const data = [...(item.children || []), ...(item.extra || [])];
+    data
+      .sort((a, b) => {
+        if (a.links.en.includes('index')) return -1;
+        if (b.links.en.includes('index')) return 1;
+        return a.titles.en.localeCompare(b.titles.en);
+      })
+      .forEach((child: any) => {
+        homeContent += `  - ${genMdLink(child.titles.en, child.links.en)} | ${genMdLink(
+          child.titles.cn,
+          child.links.cn,
+        )}\n`;
+        sidebarContent += `- ${genMdLink(child.titles.en, child.links.en)} | ${genMdLink(
+          '中文',
+          child.links.cn,
+        )}\n`;
+      });
+    homeContent += `\n\n---\n\n`;
+    sidebarContent += `\n\n`;
+  });
+
+  updateDocs(HOME_PATH, homeContent);
+  consola.success(`Update Home.md`);
+  updateDocs(SIDEBAR_PATH, sidebarContent);
+  consola.success(`Update _Sidebar.md`);
+};
+
+run();

scripts/docsWorkflow/toc.ts

@@ -0,0 +1,60 @@
+export default [
+  {
+    dir: 'Usage',
+    title: '🤯 LobeChat Usage',
+  },
+  {
+    dir: 'Deployment',
+    title: '🛳 Self Hosting',
+  },
+  {
+    dir: 'Development',
+    title: '⌨️ Development',
+  },
+  {
+    dir: 'Agents',
+    extra: [
+      {
+        links: {
+          cn: 'https://github.com/lobehub/lobe-chat-agents/blob/main/README.zh-CN.md',
+          en: 'https://github.com/lobehub/lobe-chat-agents',
+        },
+        titles: {
+          cn: '助手索引与提交',
+          en: 'Agent Index and Submit',
+        },
+      },
+    ],
+    title: '🤖 Agents',
+  },
+  {
+    dir: 'Plugins',
+    extra: [
+      {
+        links: {
+          cn: 'https://chat-plugin-sdk.lobehub.com',
+          en: 'https://chat-plugin-sdk.lobehub.com',
+        },
+        titles: {
+          cn: '插件 SDK 文档',
+          en: 'Plugin SDK Docs',
+        },
+      },
+      {
+        links: {
+          cn: 'https://github.com/lobehub/lobe-chat-plugins/blob/main/README.zh-CN.md',
+          en: 'https://github.com/lobehub/lobe-chat-plugins',
+        },
+        titles: {
+          cn: '插件索引与提交',
+          en: 'Plugin Index and Submit',
+        },
+      },
+    ],
+    title: '🧩 Plugins',
+  },
+  {
+    dir: 'Others',
+    title: '📊 Others',
+  },
+];

scripts/docsWorkflow/utils.ts

@@ -0,0 +1,38 @@
+import { readFileSync, writeFileSync } from 'node:fs';
+import remarkGfm from 'remark-gfm';
+import remarkParse from 'remark-parse';
+import { unified } from 'unified';
+import { visit } from 'unist-util-visit';
+
+import { SPLIT } from './const';
+
+export const updateDocs = (path: string, content: string) => {
+  const md = readFileSync(path, 'utf8');
+  const mds = md.split(SPLIT);
+  mds[1] = [' ', content, ' '].join('\n\n');
+  const result = mds.join(SPLIT);
+  writeFileSync(path, result, 'utf8');
+};
+
+export const convertMarkdownToMdast = async (md: string) => {
+  // @ts-ignore
+  return unified().use(remarkParse).use(remarkGfm).parse(md.trim());
+};
+
+export const getTitle = async (path: string) => {
+  const md = readFileSync(path, 'utf8');
+  const mdast: any = await convertMarkdownToMdast(md);
+
+  let title = '';
+  visit(mdast, 'heading', (node) => {
+    if (node.depth !== 1) return;
+    visit(node, 'text', (heading) => {
+      title += heading.value;
+    });
+  });
+  return title;
+};
+
+export const genMdLink = (title: string, url: string) => {
+  return `[${title}](${url})`;
+};