@lobehub/chat 1.84.2 → 1.84.4

package/locales/ru-RU/plugin.json

@@ -1,4 +1,5 @@
 {
+  "confirm": "Подтвердить",
   "debug": {
     "arguments": "Аргументы вызова",
     "function_call": "Вызов функции",
@@ -80,6 +81,13 @@
         "required": "Пожалуйста, введите идентификатор службы MCP"
       },
       "previewManifest": "Предварительный просмотр файла описания плагина",
+      "quickImport": "БыстImport JSON конфигурации",
+      "quickImportError": {
+        "empty": "Ввод не может быть пустым",
+        "invalidJson": "Недопустимый формат JSON",
+        "invalidStructure": "Недопустимая структура JSON"
+      },
+      "stdioNotSupported": "Текущая среда не поддерживает MCP плагин типа stdio",
       "testConnection": "Проверить соединение",
       "testConnectionTip": "Плагин MCP может быть использован только после успешной проверки соединения",
       "type": {
@@ -147,8 +155,18 @@
       "schema": "Схема"
     },
     "preview": {
+      "api": {
+        "noParams": "У этого инструмента нет параметров",
+        "noResults": "Не найдены API, соответствующие условиям поиска",
+        "params": "Параметры:",
+        "searchPlaceholder": "Поиск инструмента..."
+      },
       "card": "Предпросмотр плагина",
       "desc": "Предпросмотр описания плагина",
+      "empty": {
+        "desc": "После завершения конфигурации вы сможете просмотреть возможности поддерживаемых инструментов плагина здесь",
+        "title": "Начните предварительный просмотр после настройки плагина"
+      },
       "title": "Предпросмотр названия плагина"
     },
     "save": "Установить плагин",

package/locales/tr-TR/plugin.json

@@ -1,4 +1,5 @@
 {
+  "confirm": "Onayla",
   "debug": {
     "arguments": "Argümanlar",
     "function_call": "Fonksiyon Çağrısı",
@@ -80,6 +81,13 @@
         "required": "Lütfen MCP hizmet tanımlayıcısını girin"
       },
       "previewManifest": "Eklenti tanım dosyasını önizle",
+      "quickImport": "Hızlı JSON Yapılandırması İçe Aktar",
+      "quickImportError": {
+        "empty": "Girdi boş olamaz",
+        "invalidJson": "Geçersiz JSON formatı",
+        "invalidStructure": "JSON formatı geçersiz"
+      },
+      "stdioNotSupported": "Mevcut ortam stdio türündeki MCP eklentisini desteklemiyor",
       "testConnection": "Bağlantıyı test et",
       "testConnectionTip": "Bağlantı başarılı olduktan sonra MCP eklentisi normal şekilde kullanılabilir",
       "type": {
@@ -147,8 +155,18 @@
       "schema": "Şema"
     },
     "preview": {
+      "api": {
+        "noParams": "Bu aracın parametreleri yok",
+        "noResults": "Arama koşullarına uyan API bulunamadı",
+        "params": "Parametreler:",
+        "searchPlaceholder": "Aracı ara..."
+      },
       "card": "Eklenti Görünümünü Önizle",
       "desc": "Eklenti Açıklamasını Önizle",
+      "empty": {
+        "desc": "Yapılandırmayı tamamladıktan sonra, burada eklentinin desteklediği araç yeteneklerini önizleyebileceksiniz",
+        "title": "Eklentiyi yapılandırdıktan sonra önizlemeye başlayın"
+      },
       "title": "Eklenti Adı Önizlemesi"
     },
     "save": "Eklentiyi Yükle",

package/locales/vi-VN/plugin.json

@@ -1,4 +1,5 @@
 {
+  "confirm": "Xác nhận",
   "debug": {
     "arguments": "Tham số gọi",
     "function_call": "Gọi hàm",
@@ -80,6 +81,13 @@
         "required": "Vui lòng nhập định danh dịch vụ MCP"
       },
       "previewManifest": "Xem trước tệp mô tả plugin",
+      "quickImport": "Nhập khẩu nhanh cấu hình JSON",
+      "quickImportError": {
+        "empty": "Nội dung nhập vào không được để trống",
+        "invalidJson": "Định dạng JSON không hợp lệ",
+        "invalidStructure": "Định dạng JSON không hợp lệ"
+      },
+      "stdioNotSupported": "Môi trường hiện tại không hỗ trợ plugin MCP loại stdio",
       "testConnection": "Kiểm tra kết nối",
       "testConnectionTip": "Chỉ sau khi kiểm tra kết nối thành công, plugin MCP mới có thể được sử dụng bình thường",
       "type": {
@@ -147,8 +155,18 @@
       "schema": "Schema"
     },
     "preview": {
+      "api": {
+        "noParams": "Công cụ này không có tham số",
+        "noResults": "Không tìm thấy API nào phù hợp với điều kiện tìm kiếm",
+        "params": "Tham số:",
+        "searchPlaceholder": "Tìm kiếm công cụ..."
+      },
       "card": "Xem trước hiệu ứng plugin",
       "desc": "Xem trước mô tả plugin",
+      "empty": {
+        "desc": "Sau khi hoàn thành cấu hình, bạn sẽ có thể xem trước khả năng của các công cụ hỗ trợ plugin tại đây",
+        "title": "Bắt đầu xem trước sau khi cấu hình plugin"
+      },
       "title": "Xem trước tên plugin"
     },
     "save": "Cài đặt plugin",

package/locales/zh-CN/plugin.json

@@ -1,4 +1,5 @@
 {
+  "confirm": "确定",
   "debug": {
     "arguments": "调用参数",
     "function_call": "函数调用",
@@ -80,6 +81,13 @@
         "required": "请输入 MCP 服务标识符"
       },
       "previewManifest": "预览插件描述文件",
+      "quickImport": "快速导入 JSON 配置",
+      "quickImportError": {
+        "empty": "输入内容不能为空",
+        "invalidJson": "无效的 JSON 格式",
+        "invalidStructure": "JSON 格式无效"
+      },
+      "stdioNotSupported": "当前环境不支持 stdio 类型的 MCP 插件",
       "testConnection": "测试连接",
       "testConnectionTip": "测试连接成功后 MCP 插件才可以被正常使用",
       "type": {
@@ -147,8 +155,18 @@
       "schema": "Schema"
     },
     "preview": {
+      "api": {
+        "noParams": "该工具没有参数",
+        "noResults": "未找到符合搜索条件的 API",
+        "params": "参数:",
+        "searchPlaceholder": "搜索工具..."
+      },
       "card": "预览插件展示效果",
       "desc": "预览插件描述",
+      "empty": {
+        "desc": "完成配置后，将能够在此处预览插件支持的工具能力",
+        "title": "配置插件后开始预览"
+      },
       "title": "插件名称预览"
     },
     "save": "安装插件",

package/locales/zh-TW/plugin.json

@@ -1,4 +1,5 @@
 {
+  "confirm": "確定",
   "debug": {
     "arguments": "參數",
     "function_call": "函式呼叫",
@@ -80,6 +81,13 @@
         "required": "請輸入 MCP 服務標識符"
       },
       "previewManifest": "預覽插件描述文件",
+      "quickImport": "快速匯入 JSON 配置",
+      "quickImportError": {
+        "empty": "輸入內容不能為空",
+        "invalidJson": "無效的 JSON 格式",
+        "invalidStructure": "JSON 格式無效"
+      },
+      "stdioNotSupported": "當前環境不支持 stdio 類型的 MCP 插件",
       "testConnection": "測試連接",
       "testConnectionTip": "測試連接成功後 MCP 插件才可以被正常使用",
       "type": {
@@ -147,8 +155,18 @@
       "schema": "Schema"
     },
     "preview": {
+      "api": {
+        "noParams": "該工具沒有參數",
+        "noResults": "未找到符合搜索條件的 API",
+        "params": "參數：",
+        "searchPlaceholder": "搜索工具..."
+      },
       "card": "外掛顯示預覽",
       "desc": "外掛描述預覽",
+      "empty": {
+        "desc": "完成配置後，將能夠在此處預覽插件支持的工具能力",
+        "title": "配置插件後開始預覽"
+      },
       "title": "外掛名稱預覽"
     },
     "save": "安裝插件",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.84.2",
+  "version": "1.84.4",
   "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",
@@ -146,7 +146,7 @@
     "@lobehub/chat-plugins-gateway": "^1.9.0",
     "@lobehub/icons": "^2.0.0",
     "@lobehub/tts": "^2.0.0",
-    "@lobehub/ui": "^2.0.1",
+    "@lobehub/ui": "^2.0.6",
     "@modelcontextprotocol/sdk": "^1.10.1",
     "@neondatabase/serverless": "^1.0.0",
     "@next/third-parties": "^15.3.0",

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/InputArea/index.tsx

@@ -27,8 +27,9 @@ const useStyles = createStyles(({ css, token }) => {
       position: absolute;
       inset-inline-start: 14px;
     `,
-    expandTextArea: css`
+    textarea: css`
       flex: 1;
+      transition: none !important;
     `,
   };
 });
@@ -114,7 +115,7 @@ const MobileChatInputArea = forwardRef<TextAreaRef, MobileChatInputAreaProps>(
           >
             <TextArea
               autoSize={expand ? false : { maxRows: 6, minRows: 0 }}
-              className={cx(expand && styles.expandTextArea)}
+              className={styles.textarea}
               onBlur={(e) => {
                 onInput?.(e.target.value);
                 setIsFocused(false);

package/src/app/[variants]/(main)/chat/_layout/Desktop/RegisterHotkeys.tsx

@@ -1,10 +1,13 @@
 'use client';
 
+import { memo } from 'react';
+
 import { useRegisterChatHotkeys } from '@/hooks/useHotkeys';
 
-const RegisterHotkeys = () => {
+const RegisterHotkeys = memo(() => {
   useRegisterChatHotkeys();
-  return null;
-};
+
+  return '';
+});
 
 export default RegisterHotkeys;

package/src/app/[variants]/(main)/chat/settings/page.tsx

@@ -7,22 +7,20 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import PageTitle from '@/components/PageTitle';
-import { INBOX_SESSION_ID } from '@/const/session';
+import { useCategory } from '@/features/AgentSetting/AgentCategory/useCategory';
+import AgentSettings from '@/features/AgentSetting/AgentSettings';
 import { useInitAgentConfig } from '@/hooks/useInitAgentConfig';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { ChatSettingsTabs } from '@/store/global/initialState';
-import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useSessionStore } from '@/store/session';
 import { sessionMetaSelectors } from '@/store/session/selectors';
 
-import AgentSettings from '../../../../../features/AgentSetting/AgentSettings';
-
 const EditPage = memo(() => {
   const { t } = useTranslation('setting');
   const [tab, setTab] = useState(ChatSettingsTabs.Prompt);
   const theme = useTheme();
-
+  const cateItems = useCategory();
   const [id, updateAgentMeta, title] = useSessionStore((s) => [
     s.activeId,
     s.updateSessionMeta,
@@ -36,39 +34,12 @@ const EditPage = memo(() => {
 
   const { isLoading } = useInitAgentConfig();
 
-  const { enablePlugins } = useServerConfigStore(featureFlagsSelectors);
-
   return (
     <>
       <PageTitle title={t('header.sessionWithName', { name: title })} />
       <Tabs
         compact
-        items={[
-          {
-            key: ChatSettingsTabs.Prompt,
-            label: t('settingAgent.prompt.title'),
-          },
-          (id !== INBOX_SESSION_ID && {
-            key: ChatSettingsTabs.Meta,
-            label: t('settingAgent.title'),
-          }) as any,
-          {
-            key: ChatSettingsTabs.Chat,
-            label: t('settingChat.title'),
-          },
-          {
-            key: ChatSettingsTabs.Modal,
-            label: t('settingModel.title'),
-          },
-          {
-            key: ChatSettingsTabs.TTS,
-            label: t('settingTTS.title'),
-          },
-          (enablePlugins && {
-            key: ChatSettingsTabs.Plugin,
-            label: t('settingPlugin.title'),
-          }) as any,
-        ]}
+        items={cateItems as any}
         onChange={(value) => setTab(value as ChatSettingsTabs)}
         style={{
           borderBottom: `1px solid ${theme.colorBorderSecondary}`,

package/src/app/[variants]/(main)/settings/_layout/Desktop/Header.tsx

@@ -15,7 +15,7 @@ const useStyles = createStyles(({ token, css }) => ({
     position: relative;
     flex: none;
     height: 54px;
-    background: ${token.colorBgContainer};
+    background: ${token.colorBgLayout};
   `,
   title: css`
     font-size: 18px;
@@ -52,6 +52,11 @@ const Header = memo<HeaderProps>(({ children, getContainer, title }) => {
             }
           />
         }
+        styles={{
+          left: {
+            padding: 0,
+          },
+        }}
       />
       <Drawer
         getContainer={getContainer}
@@ -61,7 +66,7 @@ const Header = memo<HeaderProps>(({ children, getContainer, title }) => {
         placement={'left'}
         rootStyle={{ position: 'absolute' }}
         style={{
-          background: theme.colorBgContainer,
+          background: theme.colorBgLayout,
           borderRight: `1px solid ${theme.colorSplit}`,
         }}
         styles={{

package/src/app/[variants]/(main)/settings/_layout/Mobile/Header.tsx

@@ -2,12 +2,14 @@
 
 import { Tag } from '@lobehub/ui';
 import { ChatHeader } from '@lobehub/ui/mobile';
+import { usePathname } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { enableAuth } from '@/const/auth';
 import { useActiveSettingsKey } from '@/hooks/useActiveTabKey';
+import { useProviderName } from '@/hooks/useProviderName';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
 import { SettingsTabs } from '@/store/global/initialState';
@@ -21,6 +23,9 @@ const Header = memo(() => {
   const showMobileWorkspace = useShowMobileWorkspace();
   const activeSettingsKey = useActiveSettingsKey();
   const isSessionActive = useSessionStore((s) => !!s.activeId);
+  const pathname = usePathname();
+  const isProvider = pathname.includes('/settings/provider/');
+  const providerName = useProviderName(activeSettingsKey);
 
   const handleBackClick = () => {
     if (isSessionActive && showMobileWorkspace) {
@@ -29,13 +34,16 @@ const Header = memo(() => {
       router.push(enableAuth ? '/me/settings' : '/me');
     }
   };
+
   return (
     <ChatHeader
       center={
         <ChatHeader.Title
           title={
             <Flexbox align={'center'} gap={8} horizontal>
-              <span style={{ lineHeight: 1.2 }}> {t(`tab.${activeSettingsKey}`)}</span>
+              <span style={{ lineHeight: 1.2 }}>
+                {isProvider ? providerName : t(`tab.${activeSettingsKey}`)}
+              </span>
               {activeSettingsKey === SettingsTabs.Sync && (
                 <Tag bordered={false} color={'warning'}>
                   {t('tab.experiment')}

package/src/app/[variants]/(main)/settings/agent/_layout/Desktop.tsx

@@ -10,7 +10,7 @@ const Layout = ({ children }: PropsWithChildren) => {
   return (
     <>
       <NProgress />
-      <Flexbox horizontal width={'100%'}>
+      <Flexbox height={'100%'} horizontal width={'100%'}>
         <AgentMenu />
         <SettingContainer>{children}</SettingContainer>
       </Flexbox>

package/src/app/[variants]/(main)/settings/agent/_layout/Mobile.tsx

@@ -1,14 +1,7 @@
-'use client';
-
-import { usePathname } from 'next/navigation';
 import { PropsWithChildren } from 'react';
 
-import ProviderMenu from '../AgentMenu';
-
 const Layout = ({ children }: PropsWithChildren) => {
-  const pathname = usePathname();
-
-  return pathname === '/settings/agent' ? <ProviderMenu mobile /> : children;
+  return children;
 };
 
 export default Layout;

package/src/app/[variants]/(main)/settings/agent/index.tsx

@@ -1,38 +1,58 @@
 'use client';
 
+import { Tabs } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { useQueryState } from 'nuqs';
 import { memo } from 'react';
 
 import { INBOX_SESSION_ID } from '@/const/session';
 import { AgentSettings } from '@/features/AgentSetting';
+import { useCategory } from '@/features/AgentSetting/AgentCategory/useCategory';
 import { ChatSettingsTabs } from '@/store/global/initialState';
+import { useServerConfigStore } from '@/store/serverConfig';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 
 const Page = memo(() => {
-  const [tab] = useQueryState('tab', {
+  const cateItems = useCategory();
+  const [tab, setTab] = useQueryState('tab', {
     defaultValue: ChatSettingsTabs.Prompt,
   });
   const config = useUserStore(settingsSelectors.defaultAgentConfig, isEqual);
   const meta = useUserStore(settingsSelectors.defaultAgentMeta, isEqual);
   const [updateAgent] = useUserStore((s) => [s.updateDefaultAgent]);
   const isUserStateInit = useUserStore((s) => s.isUserStateInit);
+  const theme = useTheme();
+  const mobile = useServerConfigStore((s) => s.isMobile);
 
   return (
-    <AgentSettings
-      config={config}
-      id={INBOX_SESSION_ID}
-      loading={!isUserStateInit}
-      meta={meta}
-      onConfigChange={(config) => {
-        updateAgent({ config });
-      }}
-      onMetaChange={(meta) => {
-        updateAgent({ meta });
-      }}
-      tab={tab as ChatSettingsTabs}
-    />
+    <>
+      {mobile && (
+        <Tabs
+          activeKey={tab}
+          compact
+          items={cateItems as any}
+          onChange={(value) => setTab(value as ChatSettingsTabs)}
+          style={{
+            borderBottom: `1px solid ${theme.colorBorderSecondary}`,
+          }}
+        />
+      )}
+      <AgentSettings
+        config={config}
+        id={INBOX_SESSION_ID}
+        loading={!isUserStateInit}
+        meta={meta}
+        onConfigChange={(config) => {
+          updateAgent({ config });
+        }}
+        onMetaChange={(meta) => {
+          updateAgent({ meta });
+        }}
+        tab={tab as ChatSettingsTabs}
+      />
+    </>
   );
 });
 

package/src/app/[variants]/(main)/settings/common/features/Common.tsx

@@ -60,6 +60,7 @@ const Common = memo(() => {
         ),
         desc: t('danger.reset.desc'),
         label: t('danger.reset.title'),
+        layout: 'horizontal',
         minWidth: undefined,
       },
     ],

package/src/app/[variants]/(main)/settings/provider/features/ModelList/index.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useTheme } from 'antd-style';
 import { Suspense, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -48,12 +49,21 @@ interface ModelListProps extends ProviderSettingsContextValue {
 const ModelList = memo<ModelListProps>(
   ({ id, showModelFetcher, sdkType, showAddNewModel, showDeployName, modelEditable = true }) => {
     const mobile = useIsMobile();
+    const theme = useTheme();
 
     return (
       <ProviderSettingsContext
         value={{ modelEditable, sdkType, showAddNewModel, showDeployName, showModelFetcher }}
       >
-        <Flexbox gap={16} paddingInline={mobile ? 12 : 0}>
+        <Flexbox
+          gap={16}
+          paddingInline={mobile ? 12 : 0}
+          style={{
+            background: mobile ? theme.colorBgContainer : undefined,
+            paddingBottom: 16,
+            paddingTop: 8,
+          }}
+        >
           <ModelTitle
             provider={id}
             showAddNewModel={showAddNewModel}

package/src/app/[variants]/(main)/settings/storage/Advanced.tsx

@@ -64,6 +64,7 @@ const AdvancedActions = () => {
           </DataImporter>
         ),
         label: t('storage.actions.import.title'),
+        layout: 'horizontal',
         minWidth: undefined,
       },
       {
@@ -78,6 +79,7 @@ const AdvancedActions = () => {
           </Button>
         ),
         label: t('storage.actions.export.title'),
+        layout: 'horizontal',
         minWidth: undefined,
       },
       {
@@ -88,6 +90,7 @@ const AdvancedActions = () => {
         ),
         desc: t('danger.clear.desc'),
         label: t('danger.clear.title'),
+        layout: 'horizontal',
         minWidth: undefined,
       },
     ],

package/src/features/ChatInput/ActionBar/Params/ParamsControls.tsx

@@ -14,21 +14,21 @@ import {
 } from '@/features/ModelParamsControl';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
+import { useServerConfigStore } from '@/store/serverConfig';
 
 interface ParamsControlsProps {
   setUpdating: (updating: boolean) => void;
 }
 const ParamsControls = memo<ParamsControlsProps>(({ setUpdating }) => {
   const { t } = useTranslation('setting');
-
+  const mobile = useServerConfigStore((s) => s.isMobile);
   const updateAgentConfig = useAgentStore((s) => s.updateAgentConfig);
 
   const config = useAgentStore(agentSelectors.currentAgentConfig, isEqual);
 
-  const items: FormItemProps[] = [
+  let items: FormItemProps[] = [
     {
       children: <Temperature />,
-      desc: <Tag>temperature</Tag>,
       label: (
         <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>
           {t('settingModel.temperature.title')}
@@ -36,10 +36,10 @@ const ParamsControls = memo<ParamsControlsProps>(({ setUpdating }) => {
         </Flexbox>
       ),
       name: ['params', 'temperature'],
+      tag: 'temperature',
     },
     {
       children: <TopP />,
-      desc: <Tag>top_p</Tag>,
       label: (
         <Flexbox gap={8} horizontal>
           {t('settingModel.topP.title')}
@@ -47,10 +47,10 @@ const ParamsControls = memo<ParamsControlsProps>(({ setUpdating }) => {
         </Flexbox>
       ),
       name: ['params', 'top_p'],
+      tag: 'top_p',
     },
     {
       children: <PresencePenalty />,
-      desc: <Tag>presence_penalty</Tag>,
       label: (
         <Flexbox gap={8} horizontal>
           {t('settingModel.presencePenalty.title')}
@@ -58,10 +58,10 @@ const ParamsControls = memo<ParamsControlsProps>(({ setUpdating }) => {
         </Flexbox>
       ),
       name: ['params', 'presence_penalty'],
+      tag: 'presence_penalty',
     },
     {
       children: <FrequencyPenalty />,
-      desc: <Tag>frequency_penalty</Tag>,
       label: (
         <Flexbox gap={8} horizontal>
           {t('settingModel.frequencyPenalty.title')}
@@ -69,6 +69,7 @@ const ParamsControls = memo<ParamsControlsProps>(({ setUpdating }) => {
         </Flexbox>
       ),
       name: ['params', 'frequency_penalty'],
+      tag: 'frequency_penalty',
     },
   ];
 
@@ -76,7 +77,9 @@ const ParamsControls = memo<ParamsControlsProps>(({ setUpdating }) => {
     <Form
       initialValues={config}
       itemMinWidth={200}
-      items={items}
+      items={
+        mobile ? items : items.map(({ tag, ...item }) => ({ ...item, desc: <Tag>{tag}</Tag> }))
+      }
       itemsType={'flat'}
       onValuesChange={debounce(async (values) => {
         setUpdating(true);
@@ -84,6 +87,13 @@ const ParamsControls = memo<ParamsControlsProps>(({ setUpdating }) => {
         setUpdating(false);
       }, 500)}
       style={{ fontSize: 12 }}
+      styles={{
+        group: {
+          background: 'transparent',
+          paddingBottom: mobile ? 16 : 0,
+          paddingInline: 0,
+        },
+      }}
       variant={'borderless'}
     />
   );