@lobehub/chat 1.83.7 → 1.84.0

package/src/app/[variants]/(main)/settings/provider/ProviderMenu/AddNew.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { Icon, Tooltip } from '@lobehub/ui';
-import { Button } from 'antd';
+import { ActionIcon } from '@lobehub/ui';
 import { PlusIcon } from 'lucide-react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -13,15 +12,19 @@ const AddNewProvider = () => {
   const [open, setOpen] = useState(false);
 
   return (
-    <Tooltip title={t('menu.addCustomProvider')}>
-      <Button
-        color={'default'}
-        icon={<Icon icon={PlusIcon} />}
+    <>
+      <ActionIcon
+        icon={PlusIcon}
         onClick={() => setOpen(true)}
+        size={{
+          blockSize: 34,
+          size: 18,
+        }}
+        title={t('menu.addCustomProvider')}
         variant={'filled'}
       />
       <CreateNewProvider onClose={() => setOpen(false)} open={open} />
-    </Tooltip>
+    </>
   );
 };
 

package/src/app/[variants]/(main)/settings/provider/ProviderMenu/All.tsx

@@ -19,7 +19,7 @@ const All = memo(() => {
     <Link className={cx(styles.container, pathname === ALL_PATH && styles.active)} href={ALL_PATH}>
       <Flexbox gap={8} horizontal>
         <Center width={24}>
-          <Icon icon={WalletCards} size={{ fontSize: 18 }} />
+          <Icon icon={WalletCards} size={18} />
         </Center>
         {t('menu.all')}
       </Flexbox>

package/src/app/[variants]/(main)/settings/provider/ProviderMenu/List.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ActionIcon } from '@lobehub/ui';
+import { ActionIcon, ScrollShadow } from '@lobehub/ui';
 import { Typography } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { ArrowDownUpIcon } from 'lucide-react';
@@ -31,7 +31,7 @@ const ProviderList = () => {
 
   const isMobile = useIsMobile();
   return (
-    <Flexbox gap={4} padding={'0 12px'} style={{ marginBottom: 12 }}>
+    <ScrollShadow gap={4} height={'100%'} paddingInline={12} size={4} style={{ paddingBottom: 32 }}>
       {!isMobile && <All />}
       <Flexbox
         align={'center'}
@@ -69,7 +69,7 @@ const ProviderList = () => {
       {disabledModelProviderList.map((item) => (
         <ProviderItem {...item} key={item.id} />
       ))}
-    </Flexbox>
+    </ScrollShadow>
   );
 };
 

package/src/app/[variants]/(main)/settings/provider/ProviderMenu/SortProviderModal/index.tsx

@@ -1,5 +1,5 @@
-import { Modal, SortableList } from '@lobehub/ui';
-import { App, Button } from 'antd';
+import { Button, Modal, SortableList } from '@lobehub/ui';
+import { App } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';

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

@@ -29,15 +29,27 @@ const Layout = memo(({ children, mobile }: ProviderMenuProps) => {
 
   useFetchAiProviderList();
 
-  const width = mobile ? undefined : 260;
+  const width = mobile ? undefined : 280;
   return (
-    <Flexbox style={{ minWidth: width, overflow: mobile ? undefined : 'scroll' }} width={width}>
+    <Flexbox
+      style={{
+        background: theme.colorBgLayout,
+        borderRight: `1px solid ${theme.colorBorderSecondary}`,
+        minWidth: width,
+        overflow: mobile ? undefined : 'scroll',
+      }}
+      width={width}
+    >
       <Flexbox
         gap={8}
         horizontal
         justify={'space-between'}
         padding={'16px 12px 12px'}
-        style={{ background: theme.colorBgLayout, position: 'sticky', top: 0, zIndex: 50 }}
+        style={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 50,
+        }}
         width={'100%'}
       >
         <SearchBar
@@ -45,8 +57,8 @@ const Layout = memo(({ children, mobile }: ProviderMenuProps) => {
           onChange={(e) => useAiInfraStore.setState({ providerSearchKeyword: e.target.value })}
           placeholder={t('menu.searchProviders')}
           style={{ width: '100%' }}
-          type={'block'}
           value={providerSearchKeyword}
+          variant={'filled'}
         />
         <AddNew />
       </Flexbox>

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

@@ -0,0 +1,13 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { PropsWithChildren, memo } from 'react';
+
+import SettingContainer from '@/features/Setting/SettingContainer';
+
+const Container = memo<PropsWithChildren>(({ children }) => {
+  const path = usePathname();
+  const isRoot = path === '/settings/provider';
+  return <SettingContainer variant={isRoot ? 'secondary' : undefined}>{children}</SettingContainer>;
+});
+export default Container;

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

@@ -0,0 +1,20 @@
+import { PropsWithChildren } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import NProgress from '@/components/NProgress';
+
+import ProviderMenu from '../../ProviderMenu';
+import Container from './Container';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return (
+    <>
+      <NProgress />
+      <Flexbox horizontal width={'100%'}>
+        <ProviderMenu />
+        <Container>{children}</Container>
+      </Flexbox>
+    </>
+  );
+};
+export default Layout;

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

@@ -1,7 +1,14 @@
 import { ProviderIcon } from '@lobehub/icons';
-import { FormModal, Icon } from '@lobehub/ui';
-import type { FormItemProps } from '@lobehub/ui/es/Form/components/FormItem';
-import { App, Input, Select } from 'antd';
+import {
+  type FormItemProps,
+  FormModal,
+  Icon,
+  Input,
+  InputPassword,
+  Select,
+  TextArea,
+} from '@lobehub/ui';
+import { App } from 'antd';
 import { BrainIcon } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { memo, useState } from 'react';
@@ -67,7 +74,7 @@ const CreateNewProvider = memo<CreateNewProviderProps>(({ onClose, open }) => {
     },
     {
       children: (
-        <Input.TextArea
+        <TextArea
           placeholder={t('createNewAiProvider.description.placeholder')}
           style={{ minHeight: 80 }}
           variant={'filled'}
@@ -111,7 +118,7 @@ const CreateNewProvider = memo<CreateNewProviderProps>(({ onClose, open }) => {
       rules: [{ message: t('createNewAiProvider.sdkType.required'), required: true }],
     },
     {
-      children: <Input allowClear placeholder={'https://xxxx-proxy.com/v1'} variant={'filled'} />,
+      children: <Input allowClear placeholder={'https://xxxx-proxy.com/v1'} />,
       label: t('createNewAiProvider.proxyUrl.title'),
       minWidth: 400,
       name: [KeyVaultsConfigKey, LLMProviderBaseUrlKey],
@@ -119,7 +126,7 @@ const CreateNewProvider = memo<CreateNewProviderProps>(({ onClose, open }) => {
     },
     {
       children: (
-        <Input.Password
+        <InputPassword
           autoComplete={'new-password'}
           placeholder={t('createNewAiProvider.apiKey.placeholder')}
           variant={'filled'}
@@ -134,6 +141,7 @@ const CreateNewProvider = memo<CreateNewProviderProps>(({ onClose, open }) => {
   return (
     <FormModal
       destroyOnClose
+      height={'90%'}
       items={[
         {
           children: basicItems,
@@ -144,7 +152,6 @@ const CreateNewProvider = memo<CreateNewProviderProps>(({ onClose, open }) => {
           title: t('createNewAiProvider.configTitle'),
         },
       ]}
-      maxHeight={'90%'}
       onCancel={onClose}
       onFinish={onFinish}
       open={open}

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

@@ -1,4 +1,5 @@
-import { Checkbox, Form, FormInstance, Input } from 'antd';
+import { Input } from '@lobehub/ui';
+import { Checkbox, Form, FormInstance } from 'antd';
 import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 

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

@@ -1,5 +1,5 @@
-import { Modal } from '@lobehub/ui';
-import { Button, FormInstance } from 'antd';
+import { Button, Modal } from '@lobehub/ui';
+import { FormInstance } from 'antd';
 import { memo, use, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

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

@@ -1,5 +1,5 @@
-import { Icon } from '@lobehub/ui';
-import { Button, Typography } from 'antd';
+import { Button } from '@lobehub/ui';
+import { Typography } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { ChevronDown } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -31,13 +31,11 @@ const DisabledModels = memo(() => {
         {!showMore && disabledModels.length > 10 && (
           <Button
             block
-            color={'default'}
-            icon={<Icon icon={ChevronDown} />}
+            icon={ChevronDown}
             onClick={() => {
               setShowMore(true);
             }}
             size={'small'}
-            variant={'filled'}
           >
             {t('providerModels.list.disabledActions.showMore')}
           </Button>

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

@@ -1,5 +1,4 @@
-import { Icon } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Button, Icon } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { BrainIcon, LucideRefreshCcwDot, PlusIcon } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -67,7 +66,7 @@ const EmptyState = memo<{ provider: string }>(({ provider }) => {
 
       <Flexbox gap={8} horizontal>
         <Button
-          icon={<Icon icon={PlusIcon} />}
+          icon={PlusIcon}
           onClick={() => {
             setShowModal(true);
           }}

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

@@ -1,5 +1,5 @@
-import { Modal } from '@lobehub/ui';
-import { Button, FormInstance } from 'antd';
+import { Button, Modal } from '@lobehub/ui';
+import { FormInstance } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { memo, use, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -37,7 +37,6 @@ const ModelConfigModal = memo<ModelConfigModalProps>(({ id, open, setOpen }) =>
         <Button key="cancel" onClick={closeModal}>
           {t('cancel')}
         </Button>,
-
         <Button
           key="ok"
           loading={loading}

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

@@ -26,7 +26,7 @@ export const useStyles = createStyles(({ css, token, cx }) => {
     config,
     container: css`
       position: relative;
-      border-radius: 12px;
+      border-radius: ${token.borderRadiusLG}px;
       transition: all 200ms ease-in-out;
 
       &:hover {

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

@@ -1,7 +1,5 @@
-import { Icon } from '@lobehub/ui';
-import { Input, InputProps } from 'antd';
-import { SearchIcon } from 'lucide-react';
-import { memo, useState } from 'react';
+import { InputProps, SearchBar } from '@lobehub/ui';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 interface SearchProps {
@@ -12,24 +10,14 @@ interface SearchProps {
 
 const Search = memo<SearchProps>(({ value, onChange, variant }) => {
   const { t } = useTranslation('modelProvider');
-  const [keyword, setValue] = useState<string>(value);
 
   return (
-    <Input
+    <SearchBar
       allowClear
-      onBlur={() => {
-        onChange(keyword);
-      }}
-      onChange={(e) => {
-        setValue(e.target.value);
-      }}
-      onPressEnter={() => {
-        onChange(keyword);
-      }}
+      defaultValue={value}
+      onSearch={(keyword) => onChange(keyword)}
       placeholder={t('providerModels.list.search')}
-      prefix={<Icon icon={SearchIcon} />}
       size={'small'}
-      value={keyword}
       variant={variant}
     />
   );

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

@@ -1,5 +1,5 @@
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { App, Button, Dropdown, Skeleton, Space, Typography } from 'antd';
+import { ActionIcon, Button, Dropdown } from '@lobehub/ui';
+import { App, Skeleton, Space, Typography } from 'antd';
 import { useTheme } from 'antd-style';
 import { CircleX, EllipsisVertical, LucideRefreshCcwDot, PlusIcon } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -57,7 +57,7 @@ const ModelTitle = memo<ModelFetcherProps>(
         gap={12}
         paddingBlock={8}
         style={{
-          background: theme.colorBgLayout,
+          background: theme.colorBgContainer,
           position: 'sticky',
           top: mobile ? -2 : -16,
           zIndex: 15,
@@ -107,7 +107,7 @@ const ModelTitle = memo<ModelFetcherProps>(
               <Space.Compact>
                 {showModelFetcher && (
                   <Button
-                    icon={<Icon icon={LucideRefreshCcwDot} />}
+                    icon={LucideRefreshCcwDot}
                     loading={fetchRemoteModelsLoading}
                     onClick={async () => {
                       setFetchRemoteModelsLoading(true);
@@ -128,7 +128,7 @@ const ModelTitle = memo<ModelFetcherProps>(
                 {showAddNewModel && (
                   <>
                     <Button
-                      icon={<Icon icon={PlusIcon} />}
+                      icon={PlusIcon}
                       onClick={() => {
                         setShowModal(true);
                       }}
@@ -157,7 +157,7 @@ const ModelTitle = memo<ModelFetcherProps>(
                     ],
                   }}
                 >
-                  <Button icon={<Icon icon={EllipsisVertical} />} size={'small'} />
+                  <Button icon={EllipsisVertical} size={'small'} />
                 </Dropdown>
               </Space.Compact>
             </Flexbox>

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

@@ -1,5 +1,5 @@
-import { Modal, SortableList } from '@lobehub/ui';
-import { App, Button } from 'antd';
+import { Button, Modal, SortableList } from '@lobehub/ui';
+import { App } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';

package/src/app/[variants]/(main)/settings/provider/features/ProviderConfig/Checker.tsx

@@ -2,8 +2,7 @@
 
 import { CheckCircleFilled } from '@ant-design/icons';
 import { ModelIcon } from '@lobehub/icons';
-import { Alert, Highlighter, Icon } from '@lobehub/ui';
-import { Button, Select, Space } from 'antd';
+import { Alert, Button, Highlighter, Icon, Select } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
 import { Loader2Icon } from 'lucide-react';
 import { ReactNode, memo, useState } from 'react';
@@ -25,7 +24,7 @@ const Error = memo<{ error: ChatMessageError }>(({ error }) => {
       <Alert
         extra={
           <Flexbox>
-            <Highlighter copyButtonSize={'small'} language={'json'} type={'pure'}>
+            <Highlighter actionIconSize={'small'} language={'json'} variant={'borderless'}>
               {JSON.stringify(error.body || error, null, 2)}
             </Highlighter>
           </Flexbox>
@@ -72,7 +71,7 @@ const Checker = memo<ConnectionCheckerProps>(
       // Clear previous check results immediately
       setPass(false);
       setError(undefined);
-      
+
       let isError = false;
 
       await chatService.fetchPresetTaskResult({
@@ -126,7 +125,7 @@ const Checker = memo<ConnectionCheckerProps>(
 
     return (
       <Flexbox gap={8}>
-        <Space.Compact block>
+        <Flexbox gap={8} horizontal>
           <Select
             listItemHeight={36}
             onSelect={async (value) => {
@@ -152,7 +151,7 @@ const Checker = memo<ConnectionCheckerProps>(
           <Button disabled={isProviderConfigUpdating} loading={loading} onClick={checkConnection}>
             {t('llm.checker.button')}
           </Button>
-        </Space.Compact>
+        </Flexbox>
 
         {pass && (
           <Flexbox gap={4} horizontal>

package/src/app/[variants]/(main)/settings/provider/features/ProviderConfig/UpdateProviderInfo/SettingModal.tsx

@@ -1,7 +1,6 @@
 import { ProviderIcon } from '@lobehub/icons';
-import { FormModal, Icon } from '@lobehub/ui';
-import type { FormItemProps } from '@lobehub/ui/es/Form/components/FormItem';
-import { App, Button, Input, Select } from 'antd';
+import { Button, type FormItemProps, FormModal, Icon, Input, Select, TextArea } from '@lobehub/ui';
+import { App } from 'antd';
 import { BrainIcon } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { memo, useState } from 'react';
@@ -61,7 +60,7 @@ const CreateNewProvider = memo<CreateNewProviderProps>(({ onClose, open, initial
     },
     {
       children: (
-        <Input.TextArea
+        <TextArea
           placeholder={t('createNewAiProvider.description.placeholder')}
           style={{ minHeight: 80 }}
           variant={'filled'}

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

@@ -1,7 +1,6 @@
 'use client';
 
-import { Icon, Tooltip } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Button, Tooltip } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { SettingsIcon } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -21,15 +20,14 @@ const UpdateProviderInfo = memo(() => {
     <>
       <Tooltip title={t('updateAiProvider.tooltip')}>
         <Button
-          color={'default'}
-          icon={<Icon icon={SettingsIcon} />}
+          icon={SettingsIcon}
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
             setOpen(true);
           }}
           size={'small'}
-          variant={'text'}
+          type={'text'}
         />
       </Tooltip>
       {open && providerConfig && (

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

@@ -1,7 +1,14 @@
 'use client';
 
 import { ProviderCombine } from '@lobehub/icons';
-import { Avatar, Form, type FormItemProps, Icon, type ItemGroup, Tooltip } from '@lobehub/ui';
+import {
+  Avatar,
+  Form,
+  type FormGroupItemType,
+  type FormItemProps,
+  Icon,
+  Tooltip,
+} from '@lobehub/ui';
 import { useDebounceFn } from 'ahooks';
 import { Skeleton, Switch } from 'antd';
 import { createStyles } from 'antd-style';
@@ -292,7 +299,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
     ].filter(Boolean) as FormItemProps[];
 
     const logoUrl = data?.logo ?? logo;
-    const model: ItemGroup = {
+    const model: FormGroupItemType = {
       children: configItems,
 
       defaultActive: true,
@@ -353,7 +360,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
         onValuesChange={(_, values) => {
           debouncedUpdate(id, values);
         }}
-        variant={'pure'}
+        variant={'borderless'}
         {...FORM_STYLE}
       />
     );

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

@@ -1,7 +1,7 @@
 'use client';
 
-import { Form, Icon, type ItemGroup } from '@lobehub/ui';
-import { App, Button } from 'antd';
+import { Button, Form, type FormGroupItemType, Icon } from '@lobehub/ui';
+import { App } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { HardDriveDownload, HardDriveUpload } from 'lucide-react';
 import { useCallback } from 'react';
@@ -53,7 +53,7 @@ const AdvancedActions = () => {
     });
   }, []);
 
-  const system: ItemGroup = {
+  const system: FormGroupItemType = {
     children: [
       {
         children: (
@@ -82,7 +82,7 @@ const AdvancedActions = () => {
       },
       {
         children: (
-          <Button danger onClick={handleClear} type="primary">
+          <Button danger onClick={handleClear} type={'primary'}>
             {t('danger.clear.action')}
           </Button>
         ),
@@ -99,7 +99,7 @@ const AdvancedActions = () => {
       initialValues={settings}
       items={[system]}
       itemsType={'group'}
-      variant={'pure'}
+      variant={'borderless'}
       {...FORM_STYLE}
     />
   );

package/src/app/[variants]/(main)/settings/sync/features/DeviceInfo/DeviceName.tsx

@@ -44,17 +44,17 @@ const DeviceName = memo(() => {
       )}
       <EditableText
         editing={editing}
-        onBlur={(e) => {
-          updateDeviceName(e.target.value);
+        inputProps={{
+          placeholder: t('sync.device.deviceName.placeholder'),
         }}
+        onBlur={(e) => updateDeviceName(e.target.value)}
         onChange={(e) => {
           updateDeviceName(e);
         }}
         onEditingChange={setEditing}
-        placeholder={t('sync.device.deviceName.placeholder')}
         size={'large'}
-        type={'block'}
         value={deviceName}
+        variant={'filled'}
       />
     </Flexbox>
   );

package/src/app/[variants]/(main)/settings/sync/features/WebRTC/ChannelNameInput.tsx

@@ -1,5 +1,4 @@
-import { ActionIcon } from '@lobehub/ui';
-import { Input, InputProps } from 'antd';
+import { ActionIcon, Input, InputProps } from '@lobehub/ui';
 import { FormInstance } from 'antd/es/form/hooks/useForm';
 import { LucideDices } from 'lucide-react';
 import { memo, useState } from 'react';

package/src/app/[variants]/(main)/settings/sync/features/WebRTC/SyncSwitch/index.css

@@ -119,7 +119,8 @@
   height: 2em;
 
   background-color: hsl(var(--hue), 10%, 15%);
-  background-image: radial-gradient(
+  background-image:
+    radial-gradient(
       88% 88% at 50% 50%,
       hsl(var(--hue), 10%, 20%) 47%,
       hsla(var(--hue), 10%, 20%, 0%) 50%

package/src/app/[variants]/(main)/settings/sync/features/WebRTC/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { SiWebrtc } from '@icons-pack/react-simple-icons';
-import { Form, type ItemGroup, Tooltip } from '@lobehub/ui';
-import { Form as AntForm, Input, Switch, Typography } from 'antd';
+import { Form, type FormGroupItemType, Input, InputPassword, Tooltip } from '@lobehub/ui';
+import { Form as AntForm, Switch, Typography } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -14,8 +14,6 @@ import { useUserStore } from '@/store/user';
 
 import ChannelNameInput from './ChannelNameInput';
 
-type SettingItemGroup = ItemGroup;
-
 const WebRTC = memo(() => {
   const { t } = useTranslation('setting');
   const [form] = Form.useForm();
@@ -27,7 +25,7 @@ const WebRTC = memo(() => {
   const channelName = AntForm.useWatch(['sync', 'webrtc', 'channelName'], form);
   const signaling = AntForm.useWatch(['sync', 'webrtc', 'signaling'], form);
 
-  const config: SettingItemGroup = {
+  const config: FormGroupItemType = {
     children: [
       {
         children: <Input placeholder={t('sync.webrtc.signaling.placeholder')} />,
@@ -43,7 +41,7 @@ const WebRTC = memo(() => {
       },
       {
         children: (
-          <Input.Password
+          <InputPassword
             autoComplete={'nw-password'}
             placeholder={t('sync.webrtc.channelPassword.placeholder')}
           />
@@ -96,7 +94,7 @@ const WebRTC = memo(() => {
       itemsType={'group'}
       onFinish={setSettings}
       onValuesChange={setSettings}
-      variant={'pure'}
+      variant={'borderless'}
       {...FORM_STYLE}
     />
   );