@lobehub/lobehub 2.0.4 → 2.0.6

package/.eslintrc.js

@@ -20,6 +20,7 @@ config.rules['unicorn/no-array-for-each'] = 0;
 config.rules['unicorn/prefer-number-properties'] = 0;
 config.rules['unicorn/prefer-query-selector'] = 0;
 config.rules['unicorn/no-array-callback-reference'] = 0;
+config.rules['@typescript-eslint/no-use-before-define'] = 0;
 // FIXME: Linting error in src/app/[variants]/(main)/chat/features/Migration/DBReader.ts, the fundamental solution should be upgrading typescript-eslint
 config.rules['@typescript-eslint/no-useless-constructor'] = 0;
 config.rules['@next/next/no-img-element'] = 0;

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 2.0.6](https://github.com/lobehub/lobe-chat/compare/v2.0.5...v2.0.6)
+
+<sup>Released on **2026-01-27**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: The klavis in onboarding connect timeout fixed.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: The klavis in onboarding connect timeout fixed, closes [#11918](https://github.com/lobehub/lobe-chat/issues/11918) ([bc165be](https://github.com/lobehub/lobe-chat/commit/bc165be))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 2.0.5](https://github.com/lobehub/lobe-chat/compare/v2.0.4...v2.0.5)
+
+<sup>Released on **2026-01-27**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Update the artifact prompt.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Update the artifact prompt, closes [#11907](https://github.com/lobehub/lobe-chat/issues/11907) ([217e689](https://github.com/lobehub/lobe-chat/commit/217e689))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 2.0.4](https://github.com/lobehub/lobe-chat/compare/v2.0.3...v2.0.4)
 
 <sup>Released on **2026-01-27**</sup>

package/changelog/v2.json

@@ -1,4 +1,22 @@
 [
+  {
+    "children": {
+      "fixes": [
+        "The klavis in onboarding connect timeout fixed."
+      ]
+    },
+    "date": "2026-01-27",
+    "version": "2.0.6"
+  },
+  {
+    "children": {
+      "fixes": [
+        "Update the artifact prompt."
+      ]
+    },
+    "date": "2026-01-27",
+    "version": "2.0.5"
+  },
   {
     "children": {
       "fixes": [

package/docs/self-hosting/advanced/auth/clerk-to-betterauth.mdx

@@ -63,6 +63,8 @@ For small self-hosted deployments, the simplest approach is to let users reset t
 
    Remove Clerk variables and add Better Auth variables:
 
+   <GenerateSecret envName="AUTH_SECRET" />
+
    ```bash
    # Remove these
    # NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=xxx

package/docs/self-hosting/advanced/auth/clerk-to-betterauth.zh-CN.mdx

@@ -61,6 +61,8 @@ tags:
 
    移除 Clerk 变量并添加 Better Auth 变量：
 
+   <GenerateSecret envName="AUTH_SECRET" />
+
    ```bash
    # 移除这些
    # NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=xxx

package/docs/self-hosting/advanced/auth/nextauth-to-betterauth.mdx

@@ -116,6 +116,8 @@ For small self-hosted deployments, the simplest approach is to let users re-logi
 
    Remove NextAuth variables and add Better Auth variables:
 
+   <GenerateSecret envName="AUTH_SECRET" />
+
    ```bash
    # Remove these
    # NEXT_AUTH_SECRET=xxx

package/docs/self-hosting/advanced/auth/nextauth-to-betterauth.zh-CN.mdx

@@ -111,6 +111,8 @@ Better Auth 支持更多功能，以下是新增的环境变量：
 
    移除 NextAuth 变量并添加 Better Auth 变量：
 
+   <GenerateSecret envName="AUTH_SECRET" />
+
    ```bash
    # 移除这些
    # NEXT_AUTH_SECRET=xxx

package/docs/self-hosting/platform/docker.mdx

@@ -58,6 +58,12 @@ Here is the process for deploying the LobeHub server database version on a Linux
 
   ### Create a file named `lobe-chat.env` to store environment variables:
 
+  Click the buttons below to generate required secrets:
+
+  <GenerateSecret envName="KEY_VAULTS_SECRET" />
+
+  <GenerateSecret envName="AUTH_SECRET" />
+
   ```shell
   # Website domain
   APP_URL=https://your-prod-domain.com

package/docs/self-hosting/platform/docker.zh-CN.mdx

@@ -54,6 +54,12 @@ tags:
 
   ### 创建名为 `lobe-chat.env` 文件用于存放环境变量：
 
+  点击下方按钮生成所需密钥：
+
+  <GenerateSecret envName="KEY_VAULTS_SECRET" />
+
+  <GenerateSecret envName="AUTH_SECRET" />
+
   ```shell
   # 网站域名
   APP_URL=https://your-prod-domain.com

package/docs/self-hosting/platform/vercel.mdx

@@ -114,55 +114,6 @@ The server-side database needs to be paired with a user authentication service t
   <Callout type={'info'}>
     For advanced features like SSO providers, magic link login, and email verification, see [Authentication Service](/docs/self-hosting/advanced/auth).
   </Callout>
-
-  ### Add Public and Private Key Environment Variables in Vercel
-
-  In Vercel's deployment environment variables, add the `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` and `CLERK_SECRET_KEY` environment variables. You can click on "API Keys" in the menu, then copy the corresponding values and paste them into Vercel's environment variables.
-
-  <Image alt={'Find the corresponding public and private key environment variables in Clerk'} src={'/blog/assets28616219/89883703-7a1a-4a11-b944-5d804544e57c.webp'} />
-
-  The environment variables required for this step are as follows:
-
-  ```shell
-  NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_live_xxxxxxxxxxx
-  CLERK_SECRET_KEY=sk_live_xxxxxxxxxxxxxxxxxxxxxx
-  ```
-
-  Add the above variables to Vercel:
-
-  <Image alt={'Add Clerk public and private key environment variables in Vercel'} src={'/blog/assets28616219/2bfa13df-6e20-4768-97c0-4dad06c85a2f.webp'} />
-
-  ### Create and Configure Webhook in Clerk
-
-  Since we let Clerk fully handle user authentication and management, we need Clerk to notify our application and store data in the database when there are changes in the user's lifecycle (create, update, delete). We achieve this requirement through the Webhook provided by Clerk.
-
-  We need to add an endpoint in Clerk's Webhooks to inform Clerk to send notifications to this endpoint when a user's information changes.
-
-  <Image alt={'Add Webhooks endpoint in Clerk'} src={'/blog/assets28616219/f50f47fb-5e8e-4930-bf4e-8cf6f5b8afb9.webp'} />
-
-  Fill in the endpoint with the URL of your Vercel project, such as `https://your-project.vercel.app/api/webhooks/clerk`. Then, subscribe to events by checking the three user events (`user.created`, `user.deleted`, `user.updated`), and click create.
-
-  <Callout type={'warning'}>
-    The `https://` in the URL is essential to maintain the integrity of the URL.
-  </Callout>
-
-  <Image alt={'Configure URL and user events when adding Clerk Webhooks'} src={'/blog/assets28616219/0249ea56-ab17-4aa9-a56c-9ebd556c2645.webp'} />
-
-  ### Add Webhook Secret to Vercel Environment Variables
-
-  After creation, you can find the secret of this Webhook in the bottom right corner:
-
-  <Image alt={'View Clerk Webhooks secret'} src={'/blog/assets28616219/fab4abb2-584b-49de-9340-813382951635.webp'} />
-
-  The environment variable corresponding to this secret is `CLERK_WEBHOOK_SECRET`:
-
-  ```shell
-  CLERK_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxx
-  ```
-
-  Add it to Vercel's environment variables:
-
-  <Image alt={'Add Clerk Webhooks secret in Vercel'} src={'/blog/assets28616219/5fdc9479-007f-46ab-9d6e-a9603e949116.webp'} />
 </Steps>
 
 By completing these steps, you have successfully configured the authentication service. Next, we will configure the S3 storage service.

package/docs/self-hosting/platform/vercel.zh-CN.mdx

@@ -114,53 +114,6 @@ tags:
   <Callout type={'info'}>
     如需 SSO 登录、魔法链接登录、邮箱验证等高级功能，请参阅 [身份验证服务](/zh/docs/self-hosting/advanced/auth)。
   </Callout>
-
-  ### 在 Vercel 中添加公、私钥环境变量
-
-  在 Vercel 的部署环境变量中，添加 `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` 和 `CLERK_SECRET_KEY` 环境变量。你可以在菜单中点击「API Keys」，然后复制对应的值填入 Vercel 的环境变量中。
-
-  <Image alt={'在 Clerk 中找到对应的公私钥环境变量'} src={'/blog/assets28616219/89883703-7a1a-4a11-b944-5d804544e57c.webp'} />
-
-  此步骤所需的环境变量如下：
-
-  ```shell
-  NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_live_xxxxxxxxxxx
-  CLERK_SECRET_KEY=sk_live_xxxxxxxxxxxxxxxxxxxxxx
-  ```
-
-  添加上述变量到 Vercel 中：
-
-  <Image alt={'在 Vercel 中添加 Clerk 公私钥环境变量'} src={'/blog/assets28616219/2bfa13df-6e20-4768-97c0-4dad06c85a2f.webp'} />
-
-  ### 在 Clerk 中创建并配置 Webhook
-
-  由于我们让 Clerk 完全接管用户鉴权与管理，因此我们需要在 Clerk 用户生命周期变更时（创建、更新、删除）中通知我们的应用并存储落库。我们通过 Clerk 提供的 Webhook 来实现这一诉求。
-
-  我们需要在 Clerk 的 Webhooks 中添加一个端点（Endpoint），告诉 Clerk 当用户发生变更时，向这个端点发送通知。
-
-  <Image alt={'Clerk 添加 Webhooks 端点'} src={'/blog/assets28616219/f50f47fb-5e8e-4930-bf4e-8cf6f5b8afb9.webp'} />
-
-  在 endpoint 中填写你的 Vercel 项目的 URL，如 `https://your-project.vercel.app/api/webhooks/clerk`。然后在订阅事件（Subscribe to events）中，勾选 user 的三个事件（`user.created` 、`user.deleted`、`user.updated`），然后点击创建。
-
-  <Callout type={'warning'}>URL 的`https://`不可缺失，须保持 URL 的完整性</Callout>
-
-  <Image alt={'添加 Clerk Webhooks 时，配置 URL 和用户事件'} src={'/blog/assets28616219/0249ea56-ab17-4aa9-a56c-9ebd556c2645.webp'} />
-
-  ### 将 Webhook 秘钥添加到 Vercel 环境变量
-
-  创建完毕后，可以在右下角找到该 Webhook 的秘钥：
-
-  <Image alt={'查看 Clerk Webhooks 秘钥'} src={'/blog/assets28616219/fab4abb2-584b-49de-9340-813382951635.webp'} />
-
-  这个秘钥所对应的环境变量名为 `CLERK_WEBHOOK_SECRET`：
-
-  ```shell
-  CLERK_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxx
-  ```
-
-  将其添加到 Vercel 的环境变量中：
-
-  <Image alt={'在 Vercel 中 添加 Clerk Webhooks 秘钥'} src={'/blog/assets28616219/5fdc9479-007f-46ab-9d6e-a9603e949116.webp'} />
 </Steps>
 
 这样，你已经成功配置了身份验证服务。接下来我们将配置 S3 存储服务。

package/docs/self-hosting/start.mdx

@@ -16,24 +16,4 @@ tags:
 
 LobeHub supports various deployment platforms, including Vercel, Docker, and Docker Compose. You can choose a deployment platform that suits you to build your own Lobe Chat.
 
-## Quick Deployment
-
-For users who are new to LobeHub, we recommend using the client-side database mode for quick deployment. The advantage of this mode is that deployment can be quickly completed with just one command/button, making it easy for you to quickly get started and experience LobeHub.
-
-You can follow the guide below for quick deployment of LobeHub:
-
 <PlatformCards urlPrefix={'platform'} />
-
-<Callout>
-  In the client-side database mode, data is stored locally on the user's device, without
-  cross-device synchronization, and does not support advanced features such as file uploads and
-  knowledge base.
-</Callout>
-
-## Advanced Mode: Server-Side Database
-
-For users who are already familiar with LobeHub or need cross-device synchronization, you can deploy a version with a server-side database to access a more complete and powerful LobeHub.
-
-<Cards>
-  <Card href={'/docs/self-hosting/server-database'} title={'Server-Side Database Deployment Guide'} />
-</Cards>

package/docs/self-hosting/start.zh-CN.mdx

@@ -20,22 +20,4 @@ tags:
 
 LobeHub 支持多种部署平台，包括 Vercel、Docker、 Docker Compose 、阿里云计算巢 和腾讯轻量云 等，你可以选择适合自己的部署平台进行部署，构建属于自己的 Lobe Chat。
 
-## 快速部署
-
-对于第一次了解 LobeHub 的用户，我们推荐使用客户端数据库的模式快速部署，该模式的优势是一行指令 / 一个按钮即可快捷完成部署，便于你快速上手与体验 LobeHub。
-
-你可以通过以下指南快速部署 LobeHub：
-
 <PlatformCards urlPrefix={'platform'} />
-
-<Callout>
-  客户端数据库模式下数据均保留在用户本地，不会跨多端同步，也不支持文件上传、知识库等进阶功能。
-</Callout>
-
-## 进阶模式：服务端数据库
-
-针对已经了解 LobeHub 的用户，或需要多端同步的用户，可以自行部署带有服务端数据库的版本，进而获得更完整、功能更强大的 LobeHub。
-
-<Cards rows={1}>
-  <Card href={'/zh/docs/self-hosting/server-database'} title={'服务端数据库部署指南'} />
-</Cards>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "LobeHub - an open-source,comprehensive AI Agent framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/(backend)/api/workflows/memory-user-memory/pipelines/persona/update-writing/route.ts

@@ -8,39 +8,39 @@ import {
 } from '@/server/services/memory/userMemory/persona/service';
 
 const workflowPayloadSchema = z.object({
-  userId: z.string().optional(),
   userIds: z.array(z.string()).optional(),
 });
 
 export const { POST } = serve(async (context) => {
-  const payload = workflowPayloadSchema.parse(context.requestPayload || {});
+  const payload = await context.run('memory:pipelines:persona:update-writing:parse-payload', () =>
+    workflowPayloadSchema.parse(context.requestPayload || {}),
+  );
   const db = await getServerDB();
 
-  const userIds = Array.from(
-    new Set([...(payload.userIds || []), ...(payload.userId ? [payload.userId] : [])]),
-  ).filter(Boolean);
-
+  const userIds = Array.from(new Set(payload.userIds || [])).filter(Boolean);
   if (userIds.length === 0) {
-    return { message: 'userId or userIds is required', processedUsers: 0 };
+    throw new Error('No user IDs provided for persona update.');
   }
 
   const service = new UserPersonaService(db);
-  const results = [];
 
-  for (const userId of userIds) {
-    const context = await buildUserPersonaJobInput(db, userId);
-    const result = await service.composeWriting({ ...context, userId });
-    results.push({
-      diffId: result.diff?.id,
-      documentId: result.document.id,
-      userId,
-      version: result.document.version,
-    });
-  }
+  await Promise.all(
+    userIds.map(async (userId) =>
+      context.run(`memory:pipelines:persona:update-writing:users:${userId}`, async () => {
+        const context = await buildUserPersonaJobInput(db, userId);
+        const result = await service.composeWriting({ ...context, userId });
+        return {
+          diffId: result.diff?.id,
+          documentId: result.document.id,
+          userId,
+          version: result.document.version,
+        };
+      }),
+    ),
+  );
 
   return {
     message: 'User persona processed via workflow.',
     processedUsers: userIds.length,
-    results,
   };
 });

package/src/app/[variants]/(main)/agent/features/Conversation/AgentWelcome/ToolAuthAlert.tsx

@@ -104,7 +104,7 @@ const KlavisToolAuthItem = memo<KlavisToolAuthItemProps>(({ tool, onAuthComplete
         try {
           await refreshKlavisServerTools(identifier);
         } catch (error) {
-          console.error('[Klavis] Failed to check auth status:', error);
+          console.debug('[Klavis] Polling check (expected during auth):', error);
         }
       }, POLL_INTERVAL_MS);
 
@@ -129,7 +129,8 @@ const KlavisToolAuthItem = memo<KlavisToolAuthItemProps>(({ tool, onAuthComplete
               windowCheckIntervalRef.current = null;
             }
             oauthWindowRef.current = null;
-            refreshKlavisServerTools(identifier);
+            // Start polling after window closes
+            startFallbackPolling(identifier);
           }
         } catch {
           if (windowCheckIntervalRef.current) {

package/src/app/[variants]/(main)/settings/skill/features/KlavisSkillItem.tsx

@@ -120,7 +120,7 @@ const KlavisSkillItem = memo<KlavisSkillItemProps>(({ serverType, server }) => {
         try {
           await refreshKlavisServerTools(serverName);
         } catch (error) {
-          console.error('[Klavis] Failed to check auth status:', error);
+          console.debug('[Klavis] Polling check (expected during auth):', error);
         }
       }, POLL_INTERVAL_MS);
 
@@ -145,8 +145,8 @@ const KlavisSkillItem = memo<KlavisSkillItemProps>(({ serverType, server }) => {
               windowCheckIntervalRef.current = null;
             }
             oauthWindowRef.current = null;
-            await refreshKlavisServerTools(serverName);
-            setIsWaitingAuth(false);
+            // Start polling after window closes
+            startFallbackPolling(serverName);
           }
         } catch {
           console.log('[Klavis] COOP blocked window.closed access, falling back to polling');

package/src/app/[variants]/onboarding/components/KlavisServerList/hooks/useKlavisOAuth.ts

@@ -5,6 +5,7 @@ import { KlavisServerStatus } from '@/store/tool/slices/klavisStore';
 
 const POLL_INTERVAL_MS = 1000;
 const POLL_TIMEOUT_MS = 15_000;
+const WINDOW_CLOSED_POLL_TIMEOUT_MS = 4000; // Shorter timeout when window is closed
 
 interface UseKlavisOAuthProps {
   serverStatus?: KlavisServerStatus;
@@ -50,14 +51,14 @@ export const useKlavisOAuth = ({ serverStatus }: UseKlavisOAuthProps) => {
   }, [serverStatus, isWaitingAuth, cleanup]);
 
   const startFallbackPolling = useCallback(
-    (serverName: string) => {
+    (serverName: string, timeoutMs: number = POLL_TIMEOUT_MS) => {
       if (pollIntervalRef.current) return;
 
       pollIntervalRef.current = setInterval(async () => {
         try {
           await refreshKlavisServerTools(serverName);
         } catch (error) {
-          console.error('[Klavis] Failed to check auth status:', error);
+          console.debug('[Klavis] Polling check (expected during auth):', error);
         }
       }, POLL_INTERVAL_MS);
 
@@ -67,7 +68,7 @@ export const useKlavisOAuth = ({ serverStatus }: UseKlavisOAuthProps) => {
           pollIntervalRef.current = null;
         }
         setIsWaitingAuth(false);
-      }, POLL_TIMEOUT_MS);
+      }, timeoutMs);
     },
     [refreshKlavisServerTools],
   );
@@ -77,23 +78,29 @@ export const useKlavisOAuth = ({ serverStatus }: UseKlavisOAuthProps) => {
       windowCheckIntervalRef.current = setInterval(() => {
         try {
           if (oauthWindow.closed) {
+            // Stop monitoring window
             if (windowCheckIntervalRef.current) {
               clearInterval(windowCheckIntervalRef.current);
               windowCheckIntervalRef.current = null;
             }
             oauthWindowRef.current = null;
-            refreshKlavisServerTools(serverName);
+
+            // Start polling to check auth status after window closes
+            // Use shorter timeout since user has closed the window
+            // Keep loading state until we confirm success or timeout
+            startFallbackPolling(serverName, WINDOW_CLOSED_POLL_TIMEOUT_MS);
           }
         } catch {
           if (windowCheckIntervalRef.current) {
             clearInterval(windowCheckIntervalRef.current);
             windowCheckIntervalRef.current = null;
           }
+          // Use default timeout for fallback polling
           startFallbackPolling(serverName);
         }
       }, 500);
     },
-    [refreshKlavisServerTools, startFallbackPolling],
+    [startFallbackPolling],
   );
 
   const openOAuthWindow = useCallback(

package/src/components/DebugNode.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { type ReactNode, useEffect } from 'react';
+
+interface DebugNodeProps {
+  children?: ReactNode;
+  trace: string;
+}
+
+const DebugNode = ({ children, trace }: DebugNodeProps) => {
+  if (process.env.NODE_ENV !== 'development') return null;
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    // eslint-disable-next-line no-console
+    console.log(`[DebugNode] Suspense fallback active: ${trace}`);
+  }, [trace]);
+
+  return children ?? null;
+};
+
+export default DebugNode;

package/src/features/ChatInput/ActionBar/Tools/KlavisServerItem.tsx

@@ -88,7 +88,7 @@ const KlavisServerItem = memo<KlavisServerItemProps>(
           try {
             await refreshKlavisServerTools(serverName);
           } catch (error) {
-            console.error('[Klavis] Failed to check auth status:', error);
+            console.debug('[Klavis] Polling check (expected during auth):', error);
           }
         }, POLL_INTERVAL_MS);
 
@@ -121,8 +121,8 @@ const KlavisServerItem = memo<KlavisServerItemProps>(
               }
               oauthWindowRef.current = null;
 
-              // 窗口关闭后立即检查一次认证状态
-              refreshKlavisServerTools(serverName);
+              // 窗口关闭后开始轮询检查认证状态
+              startFallbackPolling(serverName);
             }
           } catch {
             // COOP 阻止了访问，降级到轮询方案

package/src/features/ChatInput/ActionBar/Tools/ToolItem.tsx

@@ -1,6 +1,7 @@
 import { Flexbox } from '@lobehub/ui';
-import { memo } from 'react';
+import { Suspense, memo } from 'react';
 
+import DebugNode from '@/components/DebugNode';
 import PluginTag from '@/components/Plugins/PluginTag';
 import { useToolStore } from '@/store/tool';
 import { customPluginSelectors } from '@/store/tool/selectors';
@@ -11,18 +12,20 @@ const ToolItem = memo<CheckboxItemProps>(({ id, onUpdate, label, checked }) => {
   const isCustom = useToolStore((s) => customPluginSelectors.isCustomPlugin(id)(s));
 
   return (
-    <CheckboxItem
-      checked={checked}
-      hasPadding={false}
-      id={id}
-      label={
-        <Flexbox align={'center'} gap={8} horizontal>
-          {label || id}
-          {isCustom && <PluginTag showText={false} type={'customPlugin'} />}
-        </Flexbox>
-      }
-      onUpdate={onUpdate}
-    />
+    <Suspense fallback={<DebugNode trace="ActionBar/Tools/ToolItem" />}>
+      <CheckboxItem
+        checked={checked}
+        hasPadding={false}
+        id={id}
+        label={
+          <Flexbox align={'center'} gap={8} horizontal>
+            {label || id}
+            {isCustom && <PluginTag showText={false} type={'customPlugin'} />}
+          </Flexbox>
+        }
+        onUpdate={onUpdate}
+      />
+    </Suspense>
   );
 });