@lobehub/chat 1.83.8 → 1.84.0

package/src/features/Portal/Thread/Header/New.tsx

@@ -1,5 +1,5 @@
 import { Icon } from '@lobehub/ui';
-import { Checkbox, Typography } from 'antd';
+import { Switch, Typography } from 'antd';
 import { GitBranch } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -11,26 +11,27 @@ import { ThreadType } from '@/types/topic';
 
 const NewThreadHeader = () => {
   const { t } = useTranslation('thread');
+
   const [newThreadMode] = useChatStore((s) => [portalThreadSelectors.newThreadMode(s)]);
 
   return (
-    <Flexbox>
-      <Flexbox align={'center'} gap={8} horizontal style={{ marginInlineStart: 8 }}>
-        <Icon icon={GitBranch} size={{ fontSize: 20 }} />
-        <Typography.Text className={oneLineEllipsis} style={{ fontSize: 16, fontWeight: 'bold' }}>
-          {t('newPortalThread.title')}
-        </Typography.Text>
-        <Checkbox
+    <Flexbox align={'center'} gap={8} horizontal style={{ marginInlineStart: 4 }}>
+      <Icon icon={GitBranch} size={18} />
+      <Typography.Text className={oneLineEllipsis} ellipsis={true} style={{ fontSize: 14 }}>
+        {t('newPortalThread.title')}
+      </Typography.Text>
+      <Flexbox align={'center'} gap={8} horizontal>
+        <Switch
           checked={newThreadMode === ThreadType.Continuation}
           onChange={(e) => {
             useChatStore.setState({
-              newThreadMode: e.target.checked ? ThreadType.Continuation : ThreadType.Standalone,
+              newThreadMode: e ? ThreadType.Continuation : ThreadType.Standalone,
             });
           }}
+          size={'small'}
           style={{ marginInlineStart: 12 }}
-        >
-          {t('newPortalThread.includeContext')}
-        </Checkbox>
+        />
+        {t('newPortalThread.includeContext')}
       </Flexbox>
     </Flexbox>
   );

package/src/features/Portal/Thread/Header/index.tsx

@@ -1,4 +1,5 @@
 import { ActionIcon } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
 import { ArrowLeftRight, XIcon } from 'lucide-react';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -9,6 +10,7 @@ import { useChatStore } from '@/store/chat';
 import Title from './Title';
 
 const Header = memo(() => {
+  const theme = useTheme();
   const [hasPortal, portalThreadId, closeThreadPortal, switchThread] = useChatStore((s) => [
     !!s.portalThreadId,
     s.portalThreadId,
@@ -19,7 +21,7 @@ const Header = memo(() => {
   return (
     <SidebarHeader
       actions={
-        <Flexbox horizontal>
+        <Flexbox gap={4} horizontal>
           {hasPortal && (
             <ActionIcon
               icon={ArrowLeftRight}
@@ -29,12 +31,17 @@ const Header = memo(() => {
                 switchThread(portalThreadId);
                 closeThreadPortal();
               }}
+              size={'small'}
             />
           )}
-          <ActionIcon icon={XIcon} onClick={closeThreadPortal} />
+          <ActionIcon icon={XIcon} onClick={closeThreadPortal} size={'small'} />
         </Flexbox>
       }
-      style={{ paddingBlock: 8, paddingInline: 8 }}
+      paddingBlock={6}
+      paddingInline={8}
+      style={{
+        background: `linear-gradient(to bottom, ${theme.colorBgContainerSecondary}, ${theme.colorFillQuaternary})`,
+      }}
       title={<Title />}
     />
   );

package/src/features/Setting/SettingContainer.tsx

@@ -1,40 +1,33 @@
 'use client';
 
-import { useResponsive } from 'antd-style';
-import { usePathname } from 'next/navigation';
+import { useResponsive, useTheme } from 'antd-style';
 import { PropsWithChildren, ReactNode, memo } from 'react';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
 interface SettingContainerProps extends FlexboxProps {
   addonAfter?: ReactNode;
   addonBefore?: ReactNode;
-
   maxWidth?: number;
+  variant?: 'default' | 'secondary';
 }
 const SettingContainer = memo<PropsWithChildren<SettingContainerProps>>(
-  ({
-    id = 'lobe-desktop-scroll-container',
-    maxWidth = 1024,
-    children,
-    addonAfter,
-    addonBefore,
-    style,
-    ...rest
-  }) => {
+  ({ variant, maxWidth = 1024, children, addonAfter, addonBefore, style, ...rest }) => {
     const { mobile = false } = useResponsive();
-    const pathname = usePathname();
 
-    const isProviderPath = pathname.startsWith('/settings/provider');
+    const theme = useTheme();
 
-    return isProviderPath ? (
-      children
-    ) : (
+    return (
       <Flexbox
         align={'center'}
         height={'100%'}
-        id={id}
         paddingBlock={mobile ? undefined : 32}
-        style={{ overflowX: 'hidden', overflowY: 'auto', ...style }}
+        style={{
+          background:
+            variant === 'secondary' ? theme.colorBgContainerSecondary : theme.colorBgContainer,
+          overflowX: 'hidden',
+          overflowY: 'auto',
+          ...style,
+        }}
         width={'100%'}
         {...rest}
       >

package/src/features/ShareModal/ShareImage/Preview.tsx

@@ -1,5 +1,6 @@
 import { ModelTag } from '@lobehub/icons';
-import { Avatar, ChatHeaderTitle, Markdown } from '@lobehub/ui';
+import { Avatar, Markdown } from '@lobehub/ui';
+import { ChatHeaderTitle } from '@lobehub/ui/chat';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';

package/src/features/ShareModal/ShareImage/index.tsx

@@ -1,5 +1,5 @@
-import { Form, type FormItemProps, Icon } from '@lobehub/ui';
-import { Button, Segmented, Switch } from 'antd';
+import { Button, Form, type FormItemProps, Segmented } from '@lobehub/ui';
+import { Switch } from 'antd';
 import { CopyIcon } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -41,6 +41,7 @@ const ShareImage = memo<{ mobile?: boolean }>(({ mobile }) => {
     {
       children: <Switch />,
       label: t('shareModal.withSystemRole'),
+      layout: 'horizontal',
       minWidth: undefined,
       name: 'withSystemRole',
       valuePropName: 'checked',
@@ -48,6 +49,7 @@ const ShareImage = memo<{ mobile?: boolean }>(({ mobile }) => {
     {
       children: <Switch />,
       label: t('shareModal.withBackground'),
+      layout: 'horizontal',
       minWidth: undefined,
       name: 'withBackground',
       valuePropName: 'checked',
@@ -55,6 +57,7 @@ const ShareImage = memo<{ mobile?: boolean }>(({ mobile }) => {
     {
       children: <Switch />,
       label: t('shareModal.withFooter'),
+      layout: 'horizontal',
       minWidth: undefined,
       name: 'withFooter',
       valuePropName: 'checked',
@@ -73,7 +76,7 @@ const ShareImage = memo<{ mobile?: boolean }>(({ mobile }) => {
     <>
       <Button
         block
-        icon={<Icon icon={CopyIcon} />}
+        icon={CopyIcon}
         loading={copyLoading}
         onClick={() => onCopy()}
         size={isMobile ? undefined : 'large'}
@@ -81,13 +84,7 @@ const ShareImage = memo<{ mobile?: boolean }>(({ mobile }) => {
       >
         {t('copy', { ns: 'common' })}
       </Button>
-      <Button
-        block
-        loading={loading}
-        onClick={onDownload}
-        size={isMobile ? undefined : 'large'}
-        variant={'filled'}
-      >
+      <Button block loading={loading} onClick={onDownload} size={isMobile ? undefined : 'large'}>
         {t('shareModal.download')}
       </Button>
     </>
@@ -97,7 +94,7 @@ const ShareImage = memo<{ mobile?: boolean }>(({ mobile }) => {
     <>
       <Flexbox className={styles.body} gap={16} horizontal={!isMobile}>
         <Preview title={title} {...fieldValue} />
-        <Flexbox className={styles.sidebar} gap={16}>
+        <Flexbox className={styles.sidebar} gap={12}>
           <Form
             initialValues={DEFAULT_FIELD_VALUE}
             items={settings}

package/src/features/ShareModal/ShareJSON/Preview.tsx

@@ -8,7 +8,7 @@ const Preview = memo<{ content: string }>(({ content }) => {
 
   return (
     <div className={styles.preview} style={{ padding: 16 }}>
-      <Highlighter language={'json'} type={'pure'} wrap>
+      <Highlighter language={'json'} variant={'borderless'} wrap>
         {content}
       </Highlighter>
     </div>

package/src/features/ShareModal/ShareJSON/index.tsx

@@ -1,5 +1,5 @@
-import { Form, type FormItemProps, Icon, copyToClipboard } from '@lobehub/ui';
-import { App, Button, Switch } from 'antd';
+import { Button, Form, type FormItemProps, copyToClipboard } from '@lobehub/ui';
+import { App, Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { CopyIcon } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -34,6 +34,7 @@ const ShareImage = memo(() => {
     {
       children: <Switch />,
       label: t('shareModal.withSystemRole'),
+      layout: 'horizontal',
       minWidth: undefined,
       name: 'withSystemRole',
       valuePropName: 'checked',
@@ -41,6 +42,7 @@ const ShareImage = memo(() => {
     {
       children: <Switch />,
       label: t('shareModal.includeTool'),
+      layout: 'horizontal',
       minWidth: undefined,
       name: 'includeTool',
       valuePropName: 'checked',
@@ -61,7 +63,7 @@ const ShareImage = memo(() => {
     <>
       <Button
         block
-        icon={<Icon icon={CopyIcon} />}
+        icon={CopyIcon}
         onClick={async () => {
           await copyToClipboard(content);
           message.success(t('copySuccess', { defaultValue: 'Copy Success', ns: 'common' }));
@@ -77,7 +79,6 @@ const ShareImage = memo(() => {
           exportFile(content, `${title}.json`);
         }}
         size={isMobile ? undefined : 'large'}
-        variant={'filled'}
       >
         {t('shareModal.downloadFile')}
       </Button>
@@ -88,7 +89,7 @@ const ShareImage = memo(() => {
     <>
       <Flexbox className={styles.body} gap={16} horizontal={!isMobile}>
         <Preview content={content} />
-        <Flexbox className={styles.sidebar} gap={16}>
+        <Flexbox className={styles.sidebar} gap={12}>
           <Form
             initialValues={DEFAULT_FIELD_VALUE}
             items={settings}

package/src/features/ShareModal/ShareText/index.tsx

@@ -1,5 +1,5 @@
-import { Form, type FormItemProps, Icon, copyToClipboard } from '@lobehub/ui';
-import { App, Button, Switch } from 'antd';
+import { Button, Form, type FormItemProps, copyToClipboard } from '@lobehub/ui';
+import { App, Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { CopyIcon } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -35,6 +35,7 @@ const ShareText = memo(() => {
     {
       children: <Switch />,
       label: t('shareModal.withSystemRole'),
+      layout: 'horizontal',
       minWidth: undefined,
       name: 'withSystemRole',
       valuePropName: 'checked',
@@ -42,6 +43,7 @@ const ShareText = memo(() => {
     {
       children: <Switch />,
       label: t('shareModal.withRole'),
+      layout: 'horizontal',
       minWidth: undefined,
       name: 'withRole',
       valuePropName: 'checked',
@@ -49,6 +51,7 @@ const ShareText = memo(() => {
     {
       children: <Switch />,
       label: t('shareModal.includeUser'),
+      layout: 'horizontal',
       minWidth: undefined,
       name: 'includeUser',
       valuePropName: 'checked',
@@ -56,6 +59,7 @@ const ShareText = memo(() => {
     {
       children: <Switch />,
       label: t('shareModal.includeTool'),
+      layout: 'horizontal',
       minWidth: undefined,
       name: 'includeTool',
       valuePropName: 'checked',
@@ -80,7 +84,7 @@ const ShareText = memo(() => {
     <>
       <Button
         block
-        icon={<Icon icon={CopyIcon} />}
+        icon={CopyIcon}
         onClick={async () => {
           await copyToClipboard(content);
           message.success(t('copySuccess', { defaultValue: 'Copy Success', ns: 'common' }));
@@ -96,7 +100,6 @@ const ShareText = memo(() => {
           exportFile(content, `${title}.md`);
         }}
         size={isMobile ? undefined : 'large'}
-        variant={'filled'}
       >
         {t('shareModal.downloadFile')}
       </Button>
@@ -107,7 +110,7 @@ const ShareText = memo(() => {
     <>
       <Flexbox className={styles.body} gap={16} horizontal={!isMobile}>
         <Preview content={content} />
-        <Flexbox className={styles.sidebar} gap={16}>
+        <Flexbox className={styles.sidebar} gap={12}>
           <Form
             initialValues={DEFAULT_FIELD_VALUE}
             items={settings}

package/src/features/ShareModal/index.tsx

@@ -1,5 +1,4 @@
-import { Modal, type ModalProps } from '@lobehub/ui';
-import { Segmented, SegmentedProps } from 'antd';
+import { Modal, type ModalProps, Segmented, type SegmentedProps } from '@lobehub/ui';
 import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -44,7 +43,6 @@ const ShareModal = memo<ModalProps>(({ onCancel, open }) => {
       allowFullscreen
       centered={false}
       footer={null}
-      maxHeight={false}
       onCancel={onCancel}
       open={open}
       title={t('share', { ns: 'common' })}
@@ -57,6 +55,7 @@ const ShareModal = memo<ModalProps>(({ onCancel, open }) => {
           options={options}
           style={{ width: '100%' }}
           value={tab}
+          variant={'filled'}
         />
         {tab === Tab.Screenshot && <ShareImage mobile={isMobile} />}
         {tab === Tab.Text && <ShareText />}

package/src/features/SyncStatusInspector/DisableSync.tsx

@@ -1,5 +1,5 @@
-import { Icon, Tag } from '@lobehub/ui';
-import { Badge, Button, Popover } from 'antd';
+import { Button, Icon, Tag } from '@lobehub/ui';
+import { Badge, Popover } from 'antd';
 import { TooltipPlacement } from 'antd/es/tooltip';
 import { LucideCloudCog, LucideCloudy } from 'lucide-react';
 import Link from 'next/link';

package/src/features/SyncStatusInspector/EnableSync.tsx

@@ -1,5 +1,5 @@
-import { ActionIcon, Avatar, Icon } from '@lobehub/ui';
-import { Divider, Popover, Switch, Tag, Typography } from 'antd';
+import { ActionIcon, Avatar, Icon, Tag } from '@lobehub/ui';
+import { Divider, Popover, Switch, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import { TooltipPlacement } from 'antd/es/tooltip';
 import isEqual from 'fast-deep-equal';
@@ -81,7 +81,7 @@ const EnableSync = memo<EnableSyncProps>(({ hiddenActions, placement = 'bottomLe
                     <Icon
                       color={theme.purple}
                       icon={user.isMobile ? LucideSmartphone : LucideLaptop}
-                      size={{ fontSize: 24 }}
+                      size={24}
                     />
                   }
                   background={theme.purple1}

package/src/features/SyncStatusInspector/EnableTag.tsx

@@ -1,5 +1,5 @@
-import { Icon, Tooltip } from '@lobehub/ui';
-import { Badge, Tag } from 'antd';
+import { Icon, Tag, Tooltip } from '@lobehub/ui';
+import { Badge } from 'antd';
 import { LucideCloudy, LucideRefreshCw, LucideRouter, LucideWifiOff } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';

package/src/features/User/PlanTag.tsx

@@ -1,5 +1,4 @@
-import { Tooltip } from '@lobehub/ui';
-import { Tag } from 'antd';
+import { Tag, Tooltip } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
 import { CSSProperties, memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';

package/src/features/User/UserAvatar.tsx

@@ -59,7 +59,7 @@ const UserAvatar = forwardRef<HTMLDivElement, UserAvatarProps>(
       <Avatar
         alt={isSignedIn && !!username ? username : BRANDING_NAME}
         avatar={isSignedIn && !!avatar ? avatar : DEFAULT_USER_AVATAR_URL}
-        background={isSignedIn && avatar ? background : undefined}
+        background={isSignedIn && avatar ? background : 'transparent'}
         className={cx(clickable && styles.clickable, className)}
         ref={ref}
         size={size}

package/src/features/User/UserLoginOrSignup/Community.tsx

@@ -1,4 +1,4 @@
-import { Button } from 'antd';
+import { Button } from '@lobehub/ui';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';

package/src/features/User/UserPanel/LangButton.tsx

@@ -55,7 +55,7 @@ const LangButton = memo<{ placement?: PopoverProps['placement'] }>(({ placement
     >
       <ActionIcon
         icon={Languages}
-        size={{ blockSize: 32, fontSize: 16 }}
+        size={{ blockSize: 32, size: 16 }}
         style={{ border: `1px solid ${theme.colorFillSecondary}` }}
       />
     </Popover>

package/src/features/User/UserPanel/ThemeButton.tsx

@@ -62,7 +62,7 @@ const ThemeButton = memo<{ placement?: PopoverProps['placement'] }>(({ placement
     >
       <ActionIcon
         icon={themeIcons[themeMode]}
-        size={{ blockSize: 32, fontSize: 16 }}
+        size={{ blockSize: 32, size: 16 }}
         style={{ border: `1px solid ${theme.colorFillSecondary}` }}
       />
     </Popover>

package/src/features/User/UserPanel/useMenu.tsx

@@ -1,4 +1,5 @@
-import { DiscordIcon, Hotkey, Icon } from '@lobehub/ui';
+import { Hotkey, Icon } from '@lobehub/ui';
+import { DiscordIcon } from '@lobehub/ui/icons';
 import { Badge } from 'antd';
 import { ItemType } from 'antd/es/menu/interface';
 import {

package/src/hooks/useHotkeys/filesScope.ts

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+import { useHotkeysContext } from 'react-hotkeys-hook';
+
+import { FOLDER_WIDTH } from '@/const/layoutTokens';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+import { HotkeyEnum, HotkeyScopeEnum } from '@/types/hotkey';
+
+import { useHotkeyById } from './useHotkeyById';
+
+export const useToggleFilesLeftPanelHotkey = () => {
+  const showFilePanel = useGlobalStore(systemStatusSelectors.showFilePanel);
+  const updateSystemStatus = useGlobalStore((s) => s.updateSystemStatus);
+
+  return useHotkeyById(HotkeyEnum.ToggleLeftPanel, () =>
+    updateSystemStatus({
+      filePanelWidth: showFilePanel ? 0 : FOLDER_WIDTH,
+      showFilePanel: !showFilePanel,
+    }),
+  );
+};
+
+// 注册聚合
+
+export const useRegisterFilesHotkeys = () => {
+  const { enableScope, disableScope } = useHotkeysContext();
+
+  // Layout
+  useToggleFilesLeftPanelHotkey();
+
+  useEffect(() => {
+    enableScope(HotkeyScopeEnum.Files);
+    return () => disableScope(HotkeyScopeEnum.Files);
+  }, []);
+
+  return null;
+};

package/src/hooks/useHotkeys/index.ts

@@ -1,2 +1,3 @@
 export * from './chatScope';
+export * from './filesScope';
 export * from './globalScope';

package/src/hooks/useScreenshot.ts

@@ -1,4 +1,4 @@
-import { SegmentedProps } from 'antd';
+import type { SegmentedProps } from '@lobehub/ui';
 import dayjs from 'dayjs';
 import { domToJpeg, domToPng, domToSvg, domToWebp } from 'modern-screenshot';
 import { useCallback, useState } from 'react';

package/src/layout/GlobalProvider/Locale.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { ConfigProvider } from 'antd';
+import { useTheme } from 'antd-style';
 import dayjs from 'dayjs';
 import { PropsWithChildren, memo, useEffect, useState } from 'react';
 import { isRtlLang } from 'rtl-detect';
@@ -35,6 +36,7 @@ const Locale = memo<LocaleLayoutProps>(({ children, defaultLang, antdLocale }) =
   const [i18n] = useState(createI18nNext(defaultLang));
   const [lang, setLang] = useState(defaultLang);
   const [locale, setLocale] = useState(antdLocale);
+  const theme = useTheme();
 
   // if run on server side, init i18n instance everytime
   if (isOnServerSide) {
@@ -80,7 +82,45 @@ const Locale = memo<LocaleLayoutProps>(({ children, defaultLang, antdLocale }) =
   const documentDir = isRtlLang(lang!) ? 'rtl' : 'ltr';
 
   return (
-    <ConfigProvider direction={documentDir} locale={locale}>
+    <ConfigProvider
+      direction={documentDir}
+      locale={locale}
+      theme={{
+        components: {
+          Button: {
+            borderRadiusSM: 6,
+            contentFontSizeSM: 12,
+            defaultActiveBorderColor: theme.colorBorder,
+            defaultActiveColor: theme.colorText,
+            groupBorderColor: theme.colorBorder,
+          },
+          DatePicker: {
+            activeBorderColor: theme.colorBorder,
+            hoverBorderColor: theme.colorBorder,
+          },
+          Input: {
+            activeBorderColor: theme.colorBorder,
+            hoverBorderColor: theme.colorBorder,
+          },
+          InputNumber: {
+            activeBorderColor: theme.colorBorder,
+            hoverBorderColor: theme.colorBorder,
+          },
+          Mentions: {
+            activeBorderColor: theme.colorBorder,
+            hoverBorderColor: theme.colorBorder,
+          },
+          Select: {
+            activeBorderColor: theme.colorBorder,
+            hoverBorderColor: theme.colorBorder,
+          },
+          Typography: {
+            titleMarginBottom: 0,
+            titleMarginTop: 0,
+          },
+        },
+      }}
+    >
       {children}
     </ConfigProvider>
   );

package/src/layout/GlobalProvider/index.tsx

@@ -40,15 +40,15 @@ const GlobalLayout = async ({
   const serverConfig = await getServerGlobalConfig();
   return (
     <StyleRegistry>
-      <Locale antdLocale={antdLocale} defaultLang={userLocale}>
-        <AppTheme
-          customFontFamily={appEnv.CUSTOM_FONT_FAMILY}
-          customFontURL={appEnv.CUSTOM_FONT_URL}
-          defaultAppearance={appearance}
-          defaultNeutralColor={neutralColor as any}
-          defaultPrimaryColor={primaryColor as any}
-          globalCDN={appEnv.CDN_USE_GLOBAL}
-        >
+      <AppTheme
+        customFontFamily={appEnv.CUSTOM_FONT_FAMILY}
+        customFontURL={appEnv.CUSTOM_FONT_URL}
+        defaultAppearance={appearance}
+        defaultNeutralColor={neutralColor as any}
+        defaultPrimaryColor={primaryColor as any}
+        globalCDN={appEnv.CDN_USE_GLOBAL}
+      >
+        <Locale antdLocale={antdLocale} defaultLang={userLocale}>
           <ServerConfigStoreProvider
             featureFlags={serverFeatureFlags}
             isMobile={isMobile}
@@ -62,9 +62,9 @@ const GlobalLayout = async ({
               {process.env.NODE_ENV === 'development' && <DevPanel />}
             </Suspense>
           </ServerConfigStoreProvider>
-        </AppTheme>
-        <AntdV5MonkeyPatch />
-      </Locale>
+        </Locale>
+      </AppTheme>
+      <AntdV5MonkeyPatch />
     </StyleRegistry>
   );
 };