@lobehub/lobehub 2.0.0-next.332 → 2.0.0-next.334

package/docs/development/basic/feature-development-frontend.zh-CN.mdx

@@ -1,3 +1,7 @@
+---
+title: 如何开发一个新功能：前端实现
+---
+
 # 如何开发一个新功能：前端实现
 
 LobeChat 基于 Next.js 框架构建，使用 TypeScript 作为主要开发语言。在开发新功能时，我们需要遵循一定的开发流程，以确保代码的质量和稳定性。大致的流程分为以下五步：
@@ -76,7 +80,8 @@ const ChatPage = () => {
       renderItem={(message) => (
         <List.Item>
           <Typography.Text>{message.content}</Typography.Text>
-        </List.Item>
+       
+</List.Item>
       )}
     />
   );
@@ -86,6 +91,7 @@ export default ChatPage;
 ```
 
 > **关于功能组件组织方式的说明**：LobeChat 使用两种模式来组织功能组件：
+>
 > - **全局功能**（`src/features/`）：跨应用共享的组件，如 `ChatInput`、`Conversation` 等
 > - **页面专属功能**（`src/app/<page>/features/`）：仅在特定页面路由中使用的组件
 >
@@ -113,11 +119,13 @@ const ChatPage = () => {
         renderItem={(message) => (
           <List.Item>
             <Typography.Text>{message.content}</Typography.Text>
-          </List.Item>
+         
+</List.Item>
         )}
       />
       <Button onClick={handleSend}>Send</Button>
-    </>
+   
+</>
   );
 };
 

package/docs/development/basic/feature-development.mdx

@@ -1,3 +1,7 @@
+---
+title: LobeChat Feature Development Complete Guide
+---
+
 # LobeChat Feature Development Complete Guide
 
 This document aims to guide developers on how to develop a complete feature in LobeChat.
@@ -362,7 +366,8 @@ const OpeningQuestions = memo(() => {
         {isRepeat && (
           <p className={styles.repeatError}>{t('settingOpening.openingQuestions.repeat')}</p>
         )}
-      </Flexbox>
+     
+</Flexbox>
 
       <div className={styles.questionsList}>
         {openingQuestions.length > 0 ? (
@@ -378,7 +383,8 @@ const OpeningQuestions = memo(() => {
                   onClick={() => removeQuestion(item.content)}
                   type="text"
                 />
-              </SortableList.Item>
+             
+</SortableList.Item>
             )}
           />
         ) : (
@@ -387,8 +393,10 @@ const OpeningQuestions = memo(() => {
             description={t('settingOpening.openingQuestions.empty')}
           />
         )}
-      </div>
-    </Flexbox>
+     
+</div>
+   
+</Flexbox>
   );
 });
 
@@ -440,7 +448,8 @@ const WelcomeMessage = () => {
       {chatItem}
       {/* Render guiding questions */}
       <OpeningQuestions mobile={mobile} questions={openingQuestions} />
-    </Flexbox>
+   
+</Flexbox>
   ) : (
     chatItem
   );

package/docs/development/basic/feature-development.zh-CN.mdx

@@ -1,3 +1,7 @@
+---
+title: LobeChat 功能开发完全指南
+---
+
 # LobeChat 功能开发完全指南
 
 本文档旨在指导开发者了解如何在 LobeChat 中开发一块完整的功能需求。
@@ -362,7 +366,8 @@ const OpeningQuestions = memo(() => {
         {isRepeat && (
           <p className={styles.repeatError}>{t('settingOpening.openingQuestions.repeat')}</p>
         )}
-      </Flexbox>
+     
+</Flexbox>
 
       <div className={styles.questionsList}>
         {openingQuestions.length > 0 ? (
@@ -378,7 +383,8 @@ const OpeningQuestions = memo(() => {
                   onClick={() => removeQuestion(item.content)}
                   type="text"
                 />
-              </SortableList.Item>
+             
+</SortableList.Item>
             )}
           />
         ) : (
@@ -387,8 +393,10 @@ const OpeningQuestions = memo(() => {
             description={t('settingOpening.openingQuestions.empty')}
           />
         )}
-      </div>
-    </Flexbox>
+     
+</div>
+   
+</Flexbox>
   );
 });
 
@@ -440,7 +448,8 @@ const WelcomeMessage = () => {
       {chatItem}
       {/* 渲染引导性问题 */}
       <OpeningQuestions mobile={mobile} questions={openingQuestions} />
-    </Flexbox>
+   
+</Flexbox>
   ) : (
     chatItem
   );

package/docs/development/basic/folder-structure.mdx

@@ -1,3 +1,7 @@
+---
+title: Directory Structure
+---
+
 # Directory Structure
 
 The directory structure of LobeChat is as follows:
@@ -73,17 +77,20 @@ app
 ### Architecture Explanation
 
 **Route Groups:**
+
 - `(backend)` - Contains all server-side API routes, middleware, and backend services
 - `[variants]` - Dynamic route group handling different platform variants and main application pages
 - `@modal` - Parallel routes for modal dialogs using Next.js parallel routing
 
 **Platform Organization:**
+
 - The architecture supports multiple platforms (web, desktop, mobile) through route organization
 - Desktop-specific routes are in the `desktop/` directory
 - Mobile-specific routes are organized under `(main)/(mobile)/`
 - Shared layouts and components are in `_layout/` directories
 
 **API Architecture:**
+
 - REST APIs in `(backend)/api/` and `(backend)/webapi/`
 - tRPC endpoints organized by runtime environment (edge, lambda, async, desktop)
 - Authentication and OIDC handling in dedicated route groups

package/docs/development/basic/folder-structure.zh-CN.mdx

@@ -1,3 +1,7 @@
+---
+title: 目录架构
+---
+
 # 目录架构
 
 LobeChat 的文件夹目录架构如下：
@@ -73,17 +77,20 @@ app
 ### 架构说明
 
 **路由组：**
+
 - `(backend)` - 包含所有服务端 API 路由、中间件和后端服务
 - `[variants]` - 处理不同平台变体和主应用页面的动态路由组
 - `@modal` - 使用 Next.js 并行路由的模态框对话框并行路由
 
 **平台组织：**
+
 - 架构通过路由组织支持多个平台（Web、桌面端、移动端）
 - 桌面端专用路由位于 `desktop/` 目录中
 - 移动端专用路由组织在 `(main)/(mobile)/` 下
 - 共享布局和组件位于 `_layout/` 目录中
 
 **API 架构：**
+
 - `(backend)/api/` 和 `(backend)/webapi/` 中的 REST API
 - 按运行时环境组织的 tRPC 端点（edge、lambda、async、desktop）
 - 专用路由组中的身份验证和 OIDC 处理

package/docs/development/basic/resources.mdx

@@ -1,3 +1,7 @@
+---
+title: Resources and References
+---
+
 # 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:

package/docs/development/basic/resources.zh-CN.mdx

@@ -1,3 +1,7 @@
+---
+title: 资源与参考
+---
+
 # 资源与参考
 
 LobeChat 的设计和开发离不开社区和生态中的优秀项目。我们在设计和开发过程中使用或参考了一些优秀的资源和指南。以下是一些主要的参考资源，供开发者在开发和学习过程中参考：

package/docs/development/basic/setup-development.mdx

@@ -1,3 +1,7 @@
+---
+title: Environment Setup Guide
+---
+
 # Environment Setup Guide
 
 Welcome to the LobeChat development environment setup guide.

package/docs/development/basic/setup-development.zh-CN.mdx

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

package/docs/development/basic/test.mdx

@@ -1,3 +1,7 @@
+---
+title: Testing Guide
+---
+
 # Testing Guide
 
 LobeChat's testing strategy includes unit testing and end-to-end (E2E) testing. Below are detailed explanations of each type of testing:

package/docs/development/basic/test.zh-CN.mdx

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

package/docs/development/basic/work-with-server-side-database.mdx

@@ -1,3 +1,7 @@
+---
+title: Work with Server-Side Database
+---
+
 # Work with Server-Side Database
 
 LobeChat provides a battery-included experience with its client-side database.
@@ -19,7 +23,6 @@ cp docker-compose/local/.env.example docker-compose/local/.env
 
 Edit `docker-compose/local/.env` as needed for your development setup. This file contains all necessary environment variables for the Docker services and configures:
 
-- **Service Mode**: `NEXT_PUBLIC_SERVICE_MODE=server`
 - **Database**: PostgreSQL with connection string
 - **Authentication**: NextAuth with Casdoor SSO
 - **Storage**: MinIO S3-compatible storage
@@ -80,7 +83,6 @@ The image generation feature requires:
 
 - **PostgreSQL**: Stores metadata about generated images
 - **MinIO/S3**: Stores the actual image files
-- **Server Mode**: Required for file handling (`NEXT_PUBLIC_SERVICE_MODE=server`)
 
 ### Storage Configuration
 
@@ -138,14 +140,13 @@ await fetch(uploadUrl, {
 });
 ```
 
-
 ### Service URLs
 
 When running with Docker Compose development setup:
 
 - **PostgreSQL**: `postgres://postgres@localhost:5432/lobechat`
 - **MinIO API**: `http://localhost:9000`
-- **MinIO Console**: `http://localhost:9001` (admin/CHANGE_THIS_PASSWORD_IN_PRODUCTION)
+- **MinIO Console**: `http://localhost:9001` (admin/CHANGE\_THIS\_PASSWORD\_IN\_PRODUCTION)
 - **Application**: `http://localhost:3010`
 
 ### Reset Services
@@ -164,7 +165,6 @@ docker-compose -f docker-compose.development.yml up -d
 pnpm db:migrate
 ```
 
-
 ### Troubleshooting
 
 #### Port Conflicts

package/docs/development/basic/work-with-server-side-database.zh-CN.mdx

@@ -1,3 +1,7 @@
+---
+title: 使用服务端数据库
+---
+
 # 使用服务端数据库
 
 LobeChat 提供了内置的客户端数据库体验。
@@ -19,7 +23,6 @@ cp docker-compose/local/.env.example docker-compose/local/.env
 
 根据需要编辑 `docker-compose/local/.env` 文件以适应你的开发设置。此文件包含 Docker 服务所需的所有环境变量，配置了：
 
-- **服务模式**: `NEXT_PUBLIC_SERVICE_MODE=server`
 - **数据库**: 带连接字符串的 PostgreSQL
 - **身份验证**: 带 Casdoor SSO 的 NextAuth
 - **存储**: MinIO S3 兼容存储
@@ -80,7 +83,6 @@ docker-compose -f docker-compose.development.yml ps
 
 - **PostgreSQL**：存储生成图像的元数据
 - **MinIO/S3**：存储实际的图像文件
-- **服务器模式**：文件处理所需（`NEXT_PUBLIC_SERVICE_MODE=server`）
 
 ### 存储配置
 
@@ -138,14 +140,13 @@ await fetch(uploadUrl, {
 });
 ```
 
-
 ### 服务地址
 
 运行 Docker Compose 开发环境时：
 
 - **PostgreSQL**：`postgres://postgres@localhost:5432/lobechat`
 - **MinIO API**：`http://localhost:9000`
-- **MinIO 控制台**：`http://localhost:9001` (admin/CHANGE_THIS_PASSWORD_IN_PRODUCTION)
+- **MinIO 控制台**：`http://localhost:9001` (admin/CHANGE\_THIS\_PASSWORD\_IN\_PRODUCTION)
 - **应用程序**：`http://localhost:3010`
 
 ### 重置服务
@@ -164,7 +165,6 @@ docker-compose -f docker-compose.development.yml up -d
 pnpm db:migrate
 ```
 
-
 ### 故障排除
 
 #### 端口冲突

package/docs/development/internationalization/add-new-locale.mdx

@@ -1,3 +1,7 @@
+---
+title: New Locale Guide
+---
+
 # New Locale Guide
 
 LobeChat uses [lobe-i18n](https://github.com/lobehub/lobe-cli-toolbox/tree/master/packages/lobe-i18n) as the i18n solution, which allows for quick addition of new language support in the application.

package/docs/development/internationalization/add-new-locale.zh-CN.mdx

@@ -1,3 +1,7 @@
+---
+title: 新语种添加指南
+---
+
 # 新语种添加指南
 
 LobeChat 使用 [lobe-i18n](https://github.com/lobehub/lobe-cli-toolbox/tree/master/packages/lobe-i18n) 作为 i18n 解决方案，可以在应用中快速添加新的语言支持。

package/docs/development/internationalization/internationalization-implementation.mdx

@@ -1,3 +1,7 @@
+---
+title: Internationalization Implementation Guide
+---
+
 # Internationalization Implementation Guide
 
 Welcome to the LobeChat Internationalization Implementation Guide. This document will guide you through understanding the internationalization mechanism of LobeChat, including file structure and how to add new languages. LobeChat uses `i18next` and `lobe-i18n` as the internationalization solution, aiming to provide users with seamless multilingual support.

package/docs/development/internationalization/internationalization-implementation.zh-CN.mdx

@@ -1,3 +1,7 @@
+---
+title: 国际化实现指南
+---
+
 # 国际化实现指南
 
 欢迎阅读 LobeChat 国际化实现指南。本文档将指导你了解 LobeChat 的国际化机制，包括文件结构、如何添加新语种。LobeChat 采用 `i18next` 和 `lobe-i18n` 作为国际化解决方案，旨在为用户提供流畅的多语言支持。

package/docs/development/others/lighthouse.mdx

@@ -1,3 +1,7 @@
+---
+title: Lighthouse Reports
+---
+
 # Lighthouse Reports
 
 ## Chat Page

package/docs/development/others/lighthouse.zh-CN.mdx

@@ -1,3 +1,7 @@
+---
+title: Lighthouse 测试报告
+---
+
 # Lighthouse 测试报告
 
 ## Chat 聊天页面

package/docs/development/start.mdx

@@ -1,3 +1,7 @@
+---
+title: Technical Development Getting Started Guide
+---
+
 # 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.

package/docs/development/start.zh-CN.mdx

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

package/docs/development/state-management/state-management-intro.mdx

@@ -1,3 +1,7 @@
+---
+title: Best Practices for State Management
+---
+
 # Best Practices for State Management
 
 LobeChat differs from traditional CRUD web applications in that it involves a large amount of rich interactive capabilities. Therefore, it is crucial to design a data flow architecture that is easy to develop and maintain. This document will introduce the best practices for data flow management in LobeChat.
@@ -167,8 +171,6 @@ const createStore: StateCreator<SessionStore, [['zustand/devtools', never]]> = (
   ...createSessionSlice(...parameters),
 });
 
-
-
 //  ===============  Implement useStore ============ //
 
 export const useSessionStore = createWithEqualityFn<SessionStore>()(

package/docs/development/state-management/state-management-intro.zh-CN.mdx

@@ -1,3 +1,7 @@
+---
+title: 状态管理最佳实践
+---
+
 # 状态管理最佳实践
 
 LobeChat 不同于传统 CRUD 的网页，存在大量的富交互能力，如何设计一个易于开发与易于维护的数据流架构非常重要。本篇文档将介绍 LobeChat 中的数据流管理最佳实践。
@@ -159,8 +163,6 @@ const createStore: StateCreator<SessionStore, [['zustand/devtools', never]]> = (
   ...createSessionSlice(...parameters),
 });
 
-
-
 //  ===============  实装 useStore ============ //
 
 export const useSessionStore = createWithEqualityFn<SessionStore>()(

package/docs/development/state-management/state-management-selectors.mdx

@@ -1,3 +1,7 @@
+---
+title: Data Store Selector
+---
+
 # 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.
@@ -51,7 +55,8 @@ import { pluginSelectors } from '@/store/plugin/selectors';
 const Render = ({ plugins }) => {
   const list = usePluginStore(pluginSelectors.displayPluginList);
 
-  return <> ... </>;
+  return <> ...
+</>;
 };
 ```
 

package/docs/development/state-management/state-management-selectors.zh-CN.mdx

@@ -1,3 +1,7 @@
+---
+title: 数据存储取数模块
+---
+
 # 数据存储取数模块
 
 selectors 是 LobeChat 数据流研发框架下的取数模块，它的作用是从 store 中以特定特务逻辑取出数据，供组件消费使用。
@@ -32,7 +36,8 @@ import { pluginSelectors } from '@/store/tool/selectors';
 const Render = () => {
   const list = useToolStore(pluginSelectors.installedPluginMetaList);
 
-  return <> ... </>;
+  return <> ...
+</>;
 };
 ```
 

package/docs/development/tests/integration-testing.zh-CN.mdx

@@ -1,3 +1,7 @@
+---
+title: 集成测试指南
+---
+
 # 集成测试指南
 
 ## 概述

package/docs/self-hosting/advanced/analytics.mdx

@@ -1,8 +1,8 @@
 ---
 title: Integrating Data Analytics Services in LobeChat for User Usage Analysis
 description: >-
-  Learn how to integrate free/open-source data analytics services in LobeChat to collect user usage data efficiently.
-
+  Learn how to integrate free/open-source data analytics services in LobeChat to
+  collect user usage data efficiently.
 tags:
   - LobeChat
   - data analytics

package/docs/self-hosting/advanced/auth/better-auth/apple.mdx

@@ -0,0 +1,132 @@
+---
+title: Configuring Apple Authentication for LobeChat
+description: >-
+  Learn how to configure Apple Sign In for LobeChat, including creating
+  credentials in Apple Developer Portal and setting up environment variables.
+tags:
+  - Apple
+  - Authentication
+  - LobeChat
+  - Single Sign-On
+---
+
+# Configuring Apple Authentication
+
+<Callout type={'warning'}>
+  Apple Sign In requires a paid Apple Developer account ($99/year) and does not
+  support localhost. You must use a domain with HTTPS for both development and
+  production.
+</Callout>
+
+<Steps>
+  ### Create an App ID
+
+  1. Go to [Apple Developer Portal](https://developer.apple.com/account/resources/identifiers/list)
+  2. Navigate to **Certificates, Identifiers & Profiles** > **Identifiers**
+  3. Click **+** to register a new identifier
+  4. Select **App IDs** > **App** type > **Continue**
+  5. Fill in:
+     - **Description**: e.g., `LobeChat`
+     - **Bundle ID**: e.g., `com.yourcompany.lobechat`
+  6. Enable **Sign In with Apple** capability
+  7. Click **Continue** > **Register**
+
+  ### Create a Services ID
+
+  1. Go back to **Identifiers**, click **+**
+  2. Select **Services IDs** > **Continue**
+  3. Fill in:
+     - **Description**: e.g., `LobeChat Web`
+     - **Identifier**: e.g., `com.yourcompany.lobechat.web` (this is your Client ID)
+  4. Click **Continue** > **Register**
+
+  ### Configure Services ID
+
+  1. Click on the created Services ID
+  2. Enable **Sign In with Apple**
+  3. Click **Configure**
+  4. Select your Primary App ID
+  5. Add domains and callback URLs:
+     - **Domains**: `your-domain.com`
+     - **Return URLs**: `https://your-domain.com/api/auth/callback/apple`
+  6. Click **Save** > **Continue** > **Save**
+
+  <Callout type={'info'}>
+    Callback URL format:
+
+    - Production: `https://your-domain.com/api/auth/callback/apple`
+    - Apple does **not** support localhost or HTTP URLs
+  </Callout>
+
+  ### Create a Sign In Key
+
+  1. Navigate to **Keys**, click **+**
+  2. Fill in key name
+  3. Enable **Sign In with Apple**, click **Configure**
+  4. Select your Primary App ID
+  5. Click **Save** > **Continue** > **Register**
+  6. **Download the key file** (`.p8`) - you can only download it once
+  7. Note down:
+     - **Key ID**: shown on the key page
+     - **Team ID**: shown in top right corner of developer portal
+
+  ### Generate Client Secret
+
+  Apple requires a JWT as the client secret. Generate it using your `.p8` key file:
+
+  ```js
+  // Example using Node.js
+  const jwt = require('jsonwebtoken');
+  const fs = require('fs');
+
+  const privateKey = fs.readFileSync('AuthKey_XXXXX.p8');
+  const token = jwt.sign({}, privateKey, {
+    algorithm: 'ES256',
+    expiresIn: '180d', // Max 6 months
+    issuer: 'YOUR_TEAM_ID',
+    audience: 'https://appleid.apple.com',
+    subject: 'YOUR_SERVICES_ID', // Client ID
+    keyid: 'YOUR_KEY_ID',
+  });
+  ```
+
+  <Callout type={'warning'}>
+    The JWT expires after maximum 180 days. You need to regenerate and update it
+    before expiration.
+  </Callout>
+
+  ### Configure Environment Variables
+
+  | Environment Variable               | Type     | Description                                                     |
+  | ---------------------------------- | -------- | --------------------------------------------------------------- |
+  | `AUTH_SECRET`                      | Required | Session encryption key, generate with `openssl rand -base64 32` |
+  | `AUTH_SSO_PROVIDERS`               | Required | Set to `apple`                                                  |
+  | `AUTH_APPLE_CLIENT_ID`             | Required | Your Services ID                                                |
+  | `AUTH_APPLE_CLIENT_SECRET`         | Required | The generated JWT                                               |
+  | `AUTH_APPLE_APP_BUNDLE_IDENTIFIER` | Optional | App Bundle ID (for native app integration)                      |
+
+  <Callout type={'tip'}>
+    Go to [📘 Environment Variables](/docs/self-hosting/environment-variables/auth#apple)
+    for detailed information.
+  </Callout>
+</Steps>
+
+<Callout type={'info'}>
+  After successful deployment, users will be able to authenticate with Apple and
+  use LobeChat.
+</Callout>
+
+## Common Issues
+
+### localhost Not Supported
+
+Apple Sign In does not support localhost or non-HTTPS URLs. For local development, use a tunneling service like ngrok or deploy to a staging environment with HTTPS.
+
+### Secret Expiration
+
+The JWT client secret expires after 180 days maximum. Set a reminder to regenerate it before expiration.
+
+## Related Resources
+
+- [Apple Developer Portal](https://developer.apple.com/account)
+- [Sign In with Apple Documentation](https://developer.apple.com/sign-in-with-apple/)