@lobehub/chat 0.124.2 → 0.125.0

package/locales/zh-CN/setting.json

@@ -263,6 +263,22 @@
       "placeholder": "请输入访问密码",
       "title": "访问密码"
     },
+    "oauth": {
+      "info": {
+        "desc": "已登录",
+        "title": "账户信息"
+      },
+      "signin": {
+        "action": "登录",
+        "desc": "使用 SSO 登录以解锁应用",
+        "title": "登录账号"
+      },
+      "signout": {
+        "action": "退出登录",
+        "confirm": "确认退出？",
+        "success": "退出登录成功"
+      }
+    },
     "title": "系统设置"
   },
   "settingTTS": {

package/locales/zh-TW/common.json

@@ -108,6 +108,7 @@
     "zhipu": "智譜AI"
   },
   "noDescription": "暫無描述",
+  "oauth": "單一登錄（SSO）",
   "ok": "確定",
   "password": "密碼",
   "pin": "置頂",

package/locales/zh-TW/error.json

@@ -94,6 +94,12 @@
     },
     "closeMessage": "關閉提示",
     "confirm": "確認並重試",
+    "oauth": {
+      "description": "管理員已開啟統一登錄認證，點擊下方按鈕登錄，即可解鎖應用",
+      "success": "登錄成功",
+      "title": "登錄帳號",
+      "welcome": "歡迎你！"
+    },
     "password": {
       "description": "管理員已啟用應用程式加密，輸入應用程式密碼後即可解鎖應用程式。密碼只需填寫一次。",
       "placeholder": "請輸入密碼",

package/locales/zh-TW/setting.json

@@ -263,6 +263,22 @@
       "placeholder": "請輸入訪問密碼",
       "title": "訪問密碼"
     },
+    "oauth": {
+      "info": {
+        "desc": "已登錄",
+        "title": "帳戶資訊"
+      },
+      "signin": {
+        "action": "登錄",
+        "desc": "使用 SSO 登錄以解鎖應用",
+        "title": "登錄帳號"
+      },
+      "signout": {
+        "action": "退出登錄",
+        "confirm": "確認退出？",
+        "success": "退出登錄成功"
+      }
+    },
     "title": "系統設定"
   },
   "settingTTS": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.124.2",
+  "version": "0.125.0",
   "description": "Lobe Chat - an open-source, high-performance chatbot 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",
@@ -105,6 +105,7 @@
     "modern-screenshot": "^4",
     "nanoid": "^5",
     "next": "^14.1",
+    "next-auth": "beta",
     "numeral": "^2.0.6",
     "nuqs": "^1.15.4",
     "openai": "^4.22",

package/src/app/api/auth.ts

@@ -4,9 +4,15 @@ import { ChatErrorType } from '@/types/fetch';
 interface AuthConfig {
   accessCode?: string | null;
   apiKey?: string | null;
+  oauthAuthorized?: boolean;
 }
 
-export const checkAuth = ({ apiKey, accessCode }: AuthConfig) => {
+export const checkAuth = ({ apiKey, accessCode, oauthAuthorized }: AuthConfig) => {
+  // If authorized by oauth
+  if (oauthAuthorized) {
+    return { auth: true };
+  }
+
   const { ACCESS_CODES } = getServerConfig();
 
   // if apiKey exist

package/src/app/api/chat/[provider]/agentRuntime.ts

@@ -83,7 +83,7 @@ class AgentRuntime {
     const apiVersion = azureOpenAI?.apiVersion || AZURE_API_VERSION;
 
     return new LobeOpenAI({
-      apiKey: azureOpenAI?.useAzure ? azureApiKey : apiKey,
+      apiKey: useAzure ? azureApiKey : apiKey,
       azureOptions: {
         apiVersion,
         model: azureOpenAI?.model,

package/src/app/api/chat/[provider]/route.ts

@@ -1,6 +1,6 @@
 import { getPreferredRegion } from '@/app/api/config';
 import { createErrorResponse } from '@/app/api/errorResponse';
-import { LOBE_CHAT_AUTH_HEADER } from '@/const/auth';
+import { LOBE_CHAT_AUTH_HEADER, OAUTH_AUTHORIZED } from '@/const/auth';
 import {
   AgentInitErrorPayload,
   AgentRuntimeError,
@@ -10,7 +10,7 @@ import {
 import { ChatErrorType } from '@/types/fetch';
 import { ChatStreamPayload } from '@/types/openai/chat';
 
-import { checkPasswordOrUseUserApiKey, getJWTPayload } from '../auth';
+import { checkAuthMethod, getJWTPayload } from '../auth';
 import AgentRuntime from './agentRuntime';
 
 export const runtime = 'edge';
@@ -25,11 +25,13 @@ export const POST = async (req: Request, { params }: { params: { provider: strin
   try {
     // get Authorization from header
     const authorization = req.headers.get(LOBE_CHAT_AUTH_HEADER);
+    const oauthAuthorized = !!req.headers.get(OAUTH_AUTHORIZED);
+
     if (!authorization) throw AgentRuntimeError.createError(ChatErrorType.Unauthorized);
 
     // check the Auth With payload
     const payload = await getJWTPayload(authorization);
-    checkPasswordOrUseUserApiKey(payload.accessCode, payload.apiKey);
+    checkAuthMethod(payload.accessCode, payload.apiKey, oauthAuthorized);
 
     const body = await req.clone().json();
     agentRuntime = await AgentRuntime.initializeWithUserPayload(params.provider, payload, {

package/src/app/api/chat/auth.ts

@@ -31,14 +31,22 @@ export const getJWTPayload = async (token: string): Promise<JWTPayload> => {
 };
 
 /**
- * Check if the provided access code is valid or if a user API key should be used.
+ * Check if the provided access code is valid, a user API key should be used or the OAuth 2 header is provided.
  *
  * @param {string} accessCode - The access code to check.
  * @param {string} apiKey - The user API key.
+ * @param {boolean} oauthAuthorized - Whether the OAuth 2 header is provided.
  * @throws {AgentRuntimeError} If the access code is invalid and no user API key is provided.
  */
-export const checkPasswordOrUseUserApiKey = (accessCode?: string, apiKey?: string) => {
-  const { ACCESS_CODES } = getServerConfig();
+export const checkAuthMethod = (
+  accessCode?: string,
+  apiKey?: string,
+  oauthAuthorized?: boolean,
+) => {
+  const { ACCESS_CODES, ENABLE_OAUTH_SSO } = getServerConfig();
+
+  // if OAuth 2 header is provided
+  if (ENABLE_OAUTH_SSO && oauthAuthorized) return;
 
   // if apiKey exist
   if (apiKey) return;

package/src/app/api/chat/google/route.ts

@@ -1,6 +1,6 @@
 import { createErrorResponse } from '@/app/api/errorResponse';
 import { getServerConfig } from '@/config/server';
-import { LOBE_CHAT_AUTH_HEADER } from '@/const/auth';
+import { LOBE_CHAT_AUTH_HEADER, OAUTH_AUTHORIZED } from '@/const/auth';
 import {
   AgentInitErrorPayload,
   AgentRuntimeError,
@@ -11,7 +11,7 @@ import {
 import { ChatErrorType } from '@/types/fetch';
 import { ChatStreamPayload } from '@/types/openai/chat';
 
-import { checkPasswordOrUseUserApiKey, getJWTPayload } from '../auth';
+import { checkAuthMethod, getJWTPayload } from '../auth';
 
 // due to the Chinese region does not support accessing Google
 // we need to use proxy to access it
@@ -49,11 +49,13 @@ export const POST = async (req: Request) => {
   try {
     // get Authorization from header
     const authorization = req.headers.get(LOBE_CHAT_AUTH_HEADER);
+    const oauthAuthorized = !!req.headers.get(OAUTH_AUTHORIZED);
+
     if (!authorization) throw AgentRuntimeError.createError(ChatErrorType.Unauthorized);
 
     // check the Auth With payload
     const payload = await getJWTPayload(authorization);
-    checkPasswordOrUseUserApiKey(payload.accessCode, payload.apiKey);
+    checkAuthMethod(payload.accessCode, payload.apiKey, oauthAuthorized);
 
     const { GOOGLE_API_KEY } = getServerConfig();
     const apiKey = payload?.apiKey || GOOGLE_API_KEY;

package/src/app/api/config/route.ts

@@ -7,11 +7,18 @@ export const runtime = 'edge';
  * get Server config to client
  */
 export const GET = async () => {
-  const { CUSTOM_MODELS, ENABLED_MOONSHOT, ENABLED_ZHIPU, ENABLED_AWS_BEDROCK, ENABLED_GOOGLE } =
-    getServerConfig();
+  const {
+    CUSTOM_MODELS,
+    ENABLED_MOONSHOT,
+    ENABLED_ZHIPU,
+    ENABLED_AWS_BEDROCK,
+    ENABLED_GOOGLE,
+    ENABLE_OAUTH_SSO,
+  } = getServerConfig();
 
   const config: GlobalServerConfig = {
     customModelName: CUSTOM_MODELS,
+    enabledOAuthSSO: ENABLE_OAUTH_SSO,
     languageModel: {
       bedrock: { enabled: ENABLED_AWS_BEDROCK },
       google: { enabled: ENABLED_GOOGLE },

package/src/app/api/oauth/[...nextauth]/route.ts

@@ -0,0 +1,3 @@
+export { GET, POST } from '../next-auth';
+
+export const runtime = 'edge'; // optional

package/src/app/api/oauth/next-auth.ts

@@ -0,0 +1,21 @@
+import NextAuth from 'next-auth';
+import Auth0 from 'next-auth/providers/auth0';
+
+import { getServerConfig } from '@/config/server';
+
+const { AUTH0_CLIENT_ID, AUTH0_CLIENT_SECRET, AUTH0_ISSUER } = getServerConfig();
+
+const nextAuth = NextAuth({
+  providers: [
+    Auth0({
+      clientId: AUTH0_CLIENT_ID,
+      clientSecret: AUTH0_CLIENT_SECRET,
+      issuer: AUTH0_ISSUER,
+    }),
+  ],
+});
+
+export const {
+  handlers: { GET, POST },
+  auth,
+} = nextAuth;

package/src/app/api/openai/createBizOpenAI/index.ts

@@ -14,9 +14,10 @@ import { createOpenai } from './createOpenai';
  * if auth not pass ,just return error response
  */
 export const createBizOpenAI = (req: Request, model: string): Response | OpenAI => {
-  const { apiKey, accessCode, endpoint, useAzure, apiVersion } = getOpenAIAuthFromRequest(req);
+  const { apiKey, accessCode, endpoint, useAzure, apiVersion, oauthAuthorized } =
+    getOpenAIAuthFromRequest(req);
 
-  const result = checkAuth({ accessCode, apiKey });
+  const result = checkAuth({ accessCode, apiKey, oauthAuthorized });
 
   if (!result.auth) {
     return createErrorResponse(result.error as ErrorType);

package/src/app/api/plugin/gateway/route.ts

@@ -7,12 +7,15 @@ import { ChatErrorType, ErrorType } from '@/types/fetch';
 
 import { parserPluginSettings } from './settings';
 
-const checkAuth = (accessCode: string | null) => {
-  const { ACCESS_CODES, PLUGIN_SETTINGS } = getServerConfig();
+const checkAuth = (accessCode: string | null, oauthAuthorized: boolean | null) => {
+  const { ACCESS_CODES, PLUGIN_SETTINGS, ENABLE_OAUTH_SSO } = getServerConfig();
 
   // if there is no plugin settings, just skip the auth
   if (!PLUGIN_SETTINGS) return { auth: true };
 
+  // If authorized by oauth
+  if (oauthAuthorized && ENABLE_OAUTH_SSO) return { auth: true };
+
   // if accessCode doesn't exist
   if (!ACCESS_CODES.length) return { auth: true };
 
@@ -30,9 +33,9 @@ const defaultPluginSettings = parserPluginSettings(PLUGIN_SETTINGS);
 const handler = createGatewayOnEdgeRuntime({ defaultPluginSettings, pluginsIndexUrl });
 
 export const POST = async (req: Request) => {
-  const { accessCode } = getOpenAIAuthFromRequest(req);
+  const { accessCode, oauthAuthorized } = getOpenAIAuthFromRequest(req);
 
-  const result = checkAuth(accessCode);
+  const result = checkAuth(accessCode, oauthAuthorized);
 
   if (!result.auth) {
     return createErrorResponse(result.error as ErrorType);

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

@@ -2,6 +2,7 @@ import { Form, type ItemGroup, SelectWithImg, SliderWithInput } from '@lobehub/u
 import { Form as AntForm, App, Button, Input, Select } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { AppWindow, Monitor, Moon, Palette, Sun } from 'lucide-react';
+import { signIn, signOut, useSession } from 'next-auth/react';
 import { memo, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -23,12 +24,16 @@ type SettingItemGroup = ItemGroup;
 
 export interface SettingsCommonProps {
   showAccessCodeConfig: boolean;
+  showOAuthLogin: boolean;
 }
 
-const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig }) => {
+const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig, showOAuthLogin }) => {
   const { t } = useTranslation('setting');
   const [form] = AntForm.useForm();
 
+  const { data: session, status } = useSession();
+  const isOAuthLoggedIn = status === 'authenticated' && session && session.user;
+
   const [clearSessions, clearSessionGroups] = useSessionStore((s) => [
     s.clearSessions,
     s.clearSessionGroups,
@@ -49,6 +54,22 @@ const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig }) => {
 
   const { message, modal } = App.useApp();
 
+  const handleSignOut = useCallback(() => {
+    modal.confirm({
+      centered: true,
+      okButtonProps: { danger: true },
+      onOk: () => {
+        signOut();
+        message.success(t('settingSystem.oauth.signout.success'));
+      },
+      title: t('settingSystem.oauth.signout.confirm'),
+    });
+  }, []);
+
+  const handleSignIn = useCallback(() => {
+    signIn('auth0');
+  }, []);
+
   const handleReset = useCallback(() => {
     modal.confirm({
       centered: true,
@@ -196,6 +217,23 @@ const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig }) => {
         label: t('settingSystem.accessCode.title'),
         name: 'password',
       },
+      {
+        children: isOAuthLoggedIn ? (
+          <Button onClick={handleSignOut}>{t('settingSystem.oauth.signout.action')}</Button>
+        ) : (
+          <Button onClick={handleSignIn} type="primary">
+            {t('settingSystem.oauth.signin.action')}
+          </Button>
+        ),
+        desc: isOAuthLoggedIn
+          ? `${session.user?.email} ${t('settingSystem.oauth.info.desc')}`
+          : t('settingSystem.oauth.signin.desc'),
+        hidden: !showOAuthLogin,
+        label: isOAuthLoggedIn
+          ? t('settingSystem.oauth.info.title')
+          : t('settingSystem.oauth.signin.title'),
+        minWidth: undefined,
+      },
       {
         children: (
           <Button danger onClick={handleReset} type="primary">

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

@@ -3,7 +3,7 @@ import { getServerConfig } from '@/config/server';
 import Index from './index';
 
 export default () => {
-  const { SHOW_ACCESS_CODE_CONFIG } = getServerConfig();
+  const { SHOW_ACCESS_CODE_CONFIG, ENABLE_OAUTH_SSO } = getServerConfig();
 
-  return <Index showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} />;
+  return <Index showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} showOAuthLogin={ENABLE_OAUTH_SSO} />;
 };

package/src/app/settings/llm/Bedrock/index.tsx

@@ -74,7 +74,7 @@ const BedrockProvider = memo(() => {
         ),
         desc: t('llm.Bedrock.checker.desc'),
         label: t('llm.checker.title'),
-        minWidth: undefined,
+        minWidth: '100%',
       },
     ],
     defaultActive: enabled,

package/src/app/settings/llm/Google/index.tsx

@@ -47,7 +47,7 @@ const GoogleProvider = memo(() => {
         children: <Checker model={'gemini-pro'} provider={ModelProvider.Google} />,
         desc: t('llm.checker.desc'),
         label: t('llm.checker.title'),
-        minWidth: undefined,
+        minWidth: '100%',
       },
     ],
     defaultActive: enabled,

package/src/app/settings/llm/Moonshot/index.tsx

@@ -47,7 +47,7 @@ const MoonshotProvider = memo(() => {
         children: <Checker model={'moonshot-v1-8k'} provider={ModelProvider.Moonshot} />,
         desc: t('llm.checker.desc'),
         label: t('llm.checker.title'),
-        minWidth: undefined,
+        minWidth: '100%',
       },
     ],
     defaultActive: enabled,

package/src/app/settings/llm/Zhipu/index.tsx

@@ -48,7 +48,7 @@ const ZhipuProvider = memo(() => {
         children: <Checker model={'glm-3-turbo'} provider={ModelProvider.ZhiPu} />,
         desc: t('llm.checker.desc'),
         label: t('llm.checker.title'),
-        minWidth: undefined,
+        minWidth: '100%',
       },
     ],
     defaultActive: enabled,

package/src/app/settings/page.tsx

@@ -9,9 +9,9 @@ const Page = () => {
 
   const Page = mobile ? MobilePage : DesktopPage;
 
-  const { SHOW_ACCESS_CODE_CONFIG } = getServerConfig();
+  const { SHOW_ACCESS_CODE_CONFIG, ENABLE_OAUTH_SSO } = getServerConfig();
 
-  return <Page showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} />;
+  return <Page showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} showOAuthLogin={ENABLE_OAUTH_SSO} />;
 };
 
 export default Page;

package/src/chains/summaryTitle.ts

@@ -1,7 +1,7 @@
 import { chatHelpers } from '@/store/chat/helpers';
 import { globalHelpers } from '@/store/global/helpers';
 import { LanguageModel } from '@/types/llm';
-import { OpenAIChatMessage, ChatStreamPayload } from '@/types/openai/chat';
+import { ChatStreamPayload, OpenAIChatMessage } from '@/types/openai/chat';
 
 export const chainSummaryTitle = async (
   messages: OpenAIChatMessage[],

package/src/config/server/app.ts

@@ -47,5 +47,10 @@ export const getAppConfig = () => {
       : 'https://chat-plugins.lobehub.com',
 
     PLUGIN_SETTINGS: process.env.PLUGIN_SETTINGS,
+
+    ENABLE_OAUTH_SSO: !!process.env.ENABLE_OAUTH_SSO,
+    AUTH0_CLIENT_ID: process.env.AUTH0_CLIENT_ID || '',
+    AUTH0_CLIENT_SECRET: process.env.AUTH0_CLIENT_SECRET || '',
+    AUTH0_ISSUER: process.env.AUTH0_ISSUER || '',
   };
 };

package/src/const/auth.ts

@@ -1,5 +1,7 @@
 export const LOBE_CHAT_AUTH_HEADER = 'X-lobe-chat-auth';
 
+export const OAUTH_AUTHORIZED = 'X-oauth-authorized';
+
 export const JWT_SECRET_KEY = 'LobeHub · LobeChat';
 export const NON_HTTP_PREFIX = 'http_nosafe';
 

package/src/const/fetch.ts

@@ -7,6 +7,8 @@ export const AZURE_OPENAI_API_VERSION = 'X-azure-openai-api-version';
 
 export const LOBE_CHAT_ACCESS_CODE = 'X-lobe-chat-access-code';
 
+export const OAUTH_AUTHORIZED = 'X-oauth-authorized';
+
 /**
  * @deprecated
  */
@@ -16,8 +18,10 @@ export const getOpenAIAuthFromRequest = (req: Request) => {
   const accessCode = req.headers.get(LOBE_CHAT_ACCESS_CODE);
   const useAzureStr = req.headers.get(USE_AZURE_OPENAI);
   const apiVersion = req.headers.get(AZURE_OPENAI_API_VERSION);
+  const oauthAuthorizedStr = req.headers.get(OAUTH_AUTHORIZED);
 
+  const oauthAuthorized = !!oauthAuthorizedStr;
   const useAzure = !!useAzureStr;
 
-  return { accessCode, apiKey, apiVersion, endpoint, useAzure };
+  return { accessCode, apiKey, apiVersion, endpoint, oauthAuthorized, useAzure };
 };

package/src/features/ChatInput/ActionBar/Clear.tsx

@@ -21,9 +21,11 @@ const Clear = memo(() => {
     clearImageList();
   }, []);
 
-  const actionTitle: any = confirmOpened
-    ? void 0
-    : <HotKeys desc={t('clearCurrentMessages', { ns: 'chat' })} keys={hotkeys} />
+  const actionTitle: any = confirmOpened ? (
+    void 0
+  ) : (
+    <HotKeys desc={t('clearCurrentMessages', { ns: 'chat' })} keys={hotkeys} />
+  );
 
   return (
     <Popconfirm
@@ -35,11 +37,7 @@ const Clear = memo(() => {
       placement={'topRight'}
       title={t('confirmClearCurrentMessages', { ns: 'chat' })}
     >
-      <ActionIcon
-        icon={Eraser}
-        placement={'bottom'}
-        title={actionTitle}
-      />
+      <ActionIcon icon={Eraser} placement={'bottom'} title={actionTitle} />
     </Popconfirm>
   );
 });

package/src/features/Conversation/Error/InvalidAccessCode.tsx

@@ -1,16 +1,22 @@
 import { Icon } from '@lobehub/ui';
 import { Segmented } from 'antd';
-import { AsteriskSquare, KeySquare } from 'lucide-react';
+import { SegmentedLabeledOption } from 'antd/es/segmented';
+import { AsteriskSquare, KeySquare, ScanFace } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { useGlobalStore } from '@/store/global';
+import { commonSelectors } from '@/store/global/selectors';
+
 import APIKeyForm from './APIKeyForm';
 import AccessCodeForm from './AccessCodeForm';
+import OAuthForm from './OAuthForm';
 import { ErrorActionContainer } from './style';
 
 enum Tab {
   Api = 'api',
+  Oauth = 'oauth',
   Password = 'password',
 }
 
@@ -21,27 +27,39 @@ interface InvalidAccessCodeProps {
 
 const InvalidAccessCode = memo<InvalidAccessCodeProps>(({ id, provider }) => {
   const { t } = useTranslation('error');
-  const [mode, setMode] = useState<Tab>(Tab.Password);
+  const isEnabledOAuth = useGlobalStore(commonSelectors.enabledOAuthSSO);
+  const defaultTab = isEnabledOAuth ? Tab.Oauth : Tab.Password;
+  const [mode, setMode] = useState<Tab>(defaultTab);
 
   return (
     <ErrorActionContainer>
       <Segmented
         block
         onChange={(value) => setMode(value as Tab)}
-        options={[
-          {
-            icon: <Icon icon={AsteriskSquare} />,
-            label: t('unlock.tabs.password'),
-            value: Tab.Password,
-          },
-          { icon: <Icon icon={KeySquare} />, label: t('unlock.tabs.apiKey'), value: Tab.Api },
-        ]}
+        options={
+          [
+            isEnabledOAuth
+              ? {
+                  icon: <Icon icon={ScanFace} />,
+                  label: t('oauth', { ns: 'common' }),
+                  value: Tab.Oauth,
+                }
+              : undefined,
+            {
+              icon: <Icon icon={AsteriskSquare} />,
+              label: t('unlock.tabs.password'),
+              value: Tab.Password,
+            },
+            { icon: <Icon icon={KeySquare} />, label: t('unlock.tabs.apiKey'), value: Tab.Api },
+          ].filter(Boolean) as SegmentedLabeledOption[]
+        }
         style={{ width: '100%' }}
         value={mode}
       />
       <Flexbox gap={24}>
         {mode === Tab.Password && <AccessCodeForm id={id} />}
         {mode === Tab.Api && <APIKeyForm id={id} provider={provider} />}
+        {isEnabledOAuth && mode === Tab.Oauth && <OAuthForm id={id} />}
       </Flexbox>
     </ErrorActionContainer>
   );