@lobehub/chat 1.83.8 → 1.84.0

package/src/app/[variants]/(main)/discover/(list)/models/features/Card.tsx

@@ -6,10 +6,9 @@ import { CSSProperties, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { ModelInfoTags } from '@/components/ModelSelect';
 import { DiscoverModelItem } from '@/types/discover';
 
-import ModelFeatureTags from '../../../features/ModelFeatureTags';
-
 const { Paragraph, Title } = Typography;
 
 const useStyles = createStyles(({ css, token, isDarkMode }) => ({
@@ -74,7 +73,7 @@ export interface ModelCardProps extends DiscoverModelItem {
 }
 
 const ModelCard = memo<ModelCardProps>(({ className, meta, identifier, style, href }) => {
-  const { description, title, functionCall, vision, contextWindowTokens } = meta;
+  const { description, title } = meta;
   const { t } = useTranslation('models');
   const { cx, styles } = useStyles();
 
@@ -109,12 +108,7 @@ const ModelCard = memo<ModelCardProps>(({ className, meta, identifier, style, hr
               {t(`${identifier}.description`)}
             </Paragraph>
           )}
-
-          <ModelFeatureTags
-            functionCall={functionCall}
-            tokens={contextWindowTokens}
-            vision={vision}
-          />
+          <ModelInfoTags directionReverse {...meta} />
         </Flexbox>
       </Flexbox>
     </Link>

package/src/app/[variants]/(main)/discover/(list)/plugins/features/Card.tsx

@@ -64,22 +64,21 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
 interface PluginCardProps
   extends Omit<DiscoverPlugintem, 'manifest' | 'suggestions' | 'socialData'> {
   className?: string;
+  compact?: boolean;
   href: string;
   showCategory?: boolean;
   style?: CSSProperties;
-  variant?: 'default' | 'compact';
 }
 
 const PluginCard = memo<PluginCardProps>(
-  ({ className, showCategory, meta, createdAt, author, variant, style, href }) => {
+  ({ className, showCategory, meta, createdAt, author, compact, style, href }) => {
     const { avatar, title, description, tags = [], category } = meta;
     const categoryItem = useCategoryItem(category, 12);
     const { cx, styles, theme } = useStyles();
-    const isCompact = variant === 'compact';
 
     return (
       <Flexbox className={cx(styles.container, className)} gap={24} style={style}>
-        {!isCompact && <CardBanner avatar={avatar} />}
+        {!compact && <CardBanner avatar={avatar} />}
         <Flexbox gap={12} padding={16}>
           <Link href={href}>
             <Flexbox gap={12}>
@@ -93,7 +92,7 @@ const PluginCard = memo<PluginCardProps>(
                 <Title className={styles.title} ellipsis={{ rows: 1, tooltip: title }} level={3}>
                   {title}
                 </Title>
-                {isCompact ? (
+                {compact ? (
                   <Avatar avatar={avatar} size={40} style={{ display: 'block' }} title={title} />
                 ) : (
                   <Center
@@ -120,7 +119,7 @@ const PluginCard = memo<PluginCardProps>(
               </Flexbox>
               <Flexbox gap={8} horizontal style={{ fontSize: 12 }}>
                 <div style={{ color: theme.colorTextSecondary }}>@{author}</div>
-                {!isCompact && (
+                {!compact && (
                   <time className={styles.time} dateTime={new Date(createdAt).toISOString()}>
                     {createdAt}
                   </time>
@@ -134,9 +133,7 @@ const PluginCard = memo<PluginCardProps>(
           <Flexbox gap={6} horizontal style={{ flexWrap: 'wrap' }}>
             {showCategory && categoryItem ? (
               <Link href={urlJoin('/discover/plugins', categoryItem.key)}>
-                <Tag icon={categoryItem.icon} style={{ margin: 0 }}>
-                  {categoryItem.label}
-                </Tag>
+                <Tag icon={categoryItem.icon}>{categoryItem.label}</Tag>
               </Link>
             ) : (
               tags
@@ -149,7 +146,7 @@ const PluginCard = memo<PluginCardProps>(
                   });
                   return (
                     <Link href={url} key={index}>
-                      <Tag style={{ margin: 0 }}>{startCase(tag).trim()}</Tag>
+                      <Tag>{startCase(tag).trim()}</Tag>
                     </Link>
                   );
                 })

package/src/app/[variants]/(main)/discover/(list)/plugins/features/List.tsx

@@ -41,8 +41,8 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
           initialItemCount={24}
           itemContent={(_, item) => (
             <Card
+              compact
               showCategory
-              variant={'compact'}
               {...item}
               href={urlJoin('/discover/plugin/', item.identifier)}
               key={item.identifier}
@@ -77,8 +77,8 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
             initialItemCount={12}
             itemContent={(_, item) => (
               <Card
+                compact
                 showCategory={!category}
-                variant={'compact'}
                 {...item}
                 href={urlJoin('/discover/plugin/', item.identifier)}
                 key={item.identifier}

package/src/app/[variants]/(main)/discover/(list)/plugins/features/useCategory.tsx

@@ -22,7 +22,7 @@ export const useCategory = (fontsize?: number) => {
 
   const { t } = useTranslation('discover');
 
-  const size = fontsize ? { fontSize: fontsize } : ICON_SIZE;
+  const size = fontsize || ICON_SIZE;
 
   return [
     {

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

@@ -0,0 +1,25 @@
+'use client';
+
+import { useTheme } from 'antd-style';
+import { PropsWithChildren, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const Container = memo<PropsWithChildren>(({ children }) => {
+  const theme = useTheme();
+
+  return (
+    <Flexbox
+      height={'100%'}
+      style={{
+        background: theme.colorBgContainerSecondary,
+        overflow: 'hidden',
+        position: 'relative',
+      }}
+      width={'100%'}
+    >
+      {children}
+    </Flexbox>
+  );
+});
+
+export default Container;

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

@@ -1,18 +1,18 @@
 import { PropsWithChildren } from 'react';
-import { Flexbox } from 'react-layout-kit';
 
 import NProgress from '@/components/NProgress';
 
+import Container from './Container';
 import Header from './Header';
 
 const Layout = ({ children }: PropsWithChildren) => {
   return (
     <>
       <NProgress />
-      <Flexbox height={'100%'} style={{ overflow: 'hidden', position: 'relative' }} width={'100%'}>
+      <Container>
         <Header />
         {children}
-      </Flexbox>
+      </Container>
       {/* ↓ cloud slot ↓ */}
 
       {/* ↑ cloud slot ↑ */}

package/src/app/[variants]/(main)/discover/components/CategoryContainer.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-const CategoryContainer = memo<PropsWithChildren<{ top?: number }>>(({ children, top = 64 }) => {
+const CategoryContainer = memo<PropsWithChildren<{ top?: number }>>(({ children, top = 52 }) => {
   return (
     <Flexbox
       as={'aside'}

package/src/app/[variants]/(main)/discover/components/CategoryMenu.tsx

@@ -4,7 +4,7 @@ import { ConfigProvider, Menu, MenuProps } from 'antd';
 import { useTheme } from 'antd-style';
 import { memo } from 'react';
 
-export const ICON_SIZE = { fontSize: '1.25em' };
+export const ICON_SIZE = { size: '1.25em' };
 
 const CategoryMenu = memo<MenuProps>(({ style, ...rest }) => {
   const theme = useTheme();

package/src/app/[variants]/(main)/discover/components/Title.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { Icon } from '@lobehub/ui';
-import { Button, Tag } from 'antd';
+import { Button, Icon, Tag } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { ChevronRight } from 'lucide-react';
 import Link from 'next/link';
@@ -54,9 +53,7 @@ const Title = memo<TitleProps>(({ tag, children, moreLink, more }) => {
       {tag ? (
         <Flexbox align={'center'} gap={8} horizontal>
           {title}
-          <Tag bordered={false} className={styles.tag}>
-            {tag}
-          </Tag>
+          <Tag className={styles.tag}>{tag}</Tag>
         </Flexbox>
       ) : (
         title

package/src/app/[variants]/(main)/discover/features/CreateButton/Inner.tsx

@@ -1,5 +1,5 @@
-import { Icon, Typography } from '@lobehub/ui';
-import { Button, Divider, Tag } from 'antd';
+import { Button, Icon, Tag, Typography } from '@lobehub/ui';
+import { Divider } from 'antd';
 import { Github, Settings, Share2 } from 'lucide-react';
 import Image from 'next/image';
 import { memo } from 'react';
@@ -41,7 +41,7 @@ const Inner = memo(() => {
       <p>{t('createGuide.func2.desc')}</p>
       <br />
       <Button
-        icon={<Icon icon={Github} />}
+        icon={Github}
         onClick={() => window.open(AGENTS_INDEX_GITHUB, '__blank')}
         type={'primary'}
       >

package/src/app/[variants]/(main)/discover/features/CreateButton/index.tsx

@@ -1,5 +1,5 @@
-import { ActionIcon, Icon, Modal } from '@lobehub/ui';
-import { Button, Skeleton } from 'antd';
+import { ActionIcon, Button, Modal } from '@lobehub/ui';
+import { Skeleton } from 'antd';
 import { useResponsive } from 'antd-style';
 import { Brush } from 'lucide-react';
 import dynamic from 'next/dynamic';
@@ -26,7 +26,7 @@ const CreateButton = memo<{ mobile?: boolean }>(({ mobile }) => {
         title={t('create')}
       />
     ) : (
-      <Button icon={<Icon icon={Brush} />} onClick={() => setIsModalOpen(true)}>
+      <Button icon={Brush} onClick={() => setIsModalOpen(true)}>
         {t('create')}
       </Button>
     );

package/src/app/[variants]/(main)/discover/features/LikeButton.tsx

@@ -1,5 +1,5 @@
-import { Icon, Tooltip } from '@lobehub/ui';
-import { Button, Space } from 'antd';
+import { Button, Icon, Tooltip } from '@lobehub/ui';
+import { Space } from 'antd';
 import { ThumbsDownIcon, ThumbsUpIcon } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -28,12 +28,13 @@ const LikeButton = memo<LikeButtonProps>(
         <Space.Compact style={{ flex: 1.75 }}>
           <Tooltip title={t('like')}>
             <Button
+              block
               className={styles.number}
-              icon={<Icon icon={ThumbsUpIcon} />}
+              icon={ThumbsUpIcon}
               onClick={() => onLikeClick?.(!isLiked)}
               size={'large'}
               style={{ flex: 1 }}
-              type={isLiked ? 'primary' : 'default'}
+              type={isLiked ? 'primary' : undefined}
             >
               {formatShortenNumber(count)}
             </Button>

package/src/app/[variants]/(main)/discover/features/StoreSearchBar.tsx

@@ -77,8 +77,8 @@ const StoreSearchBar = memo<StoreSearchBarProps>(({ mobile, onBlur, onFocus, ...
       spotlight={!mobile}
       style={{ width: mobile || active ? '100%' : 'min(480px,100%)' }}
       styles={{ input: { width: '100%' } }}
-      type={'block'}
       value={searchKey ? String(searchKey) : ''}
+      variant={'filled'}
       {...rest}
     />
   );

package/src/app/[variants]/(main)/discover/features/useNav.tsx

@@ -9,11 +9,12 @@ import type { MenuProps } from '@/components/Menu';
 import { useDiscoverTab } from '@/hooks/useDiscoverTab';
 import { DiscoverTab } from '@/types/discover';
 
+const ICON_SIZE = 16;
+
 export const useNav = () => {
   const pathname = usePathname();
   const type = useDiscoverTab();
   const { t } = useTranslation('discover');
-  const iconSize = { fontSize: 16 };
 
   const activeKey = useMemo(() => {
     for (const value of Object.values(DiscoverTab)) {
@@ -29,27 +30,27 @@ export const useNav = () => {
   const items: MenuProps['items'] = useMemo(
     () => [
       {
-        icon: <Icon icon={House} size={iconSize} />,
+        icon: <Icon icon={House} size={ICON_SIZE} />,
         key: DiscoverTab.Home,
         label: t('tab.home'),
       },
       {
-        icon: <Icon icon={Bot} size={iconSize} />,
+        icon: <Icon icon={Bot} size={ICON_SIZE} />,
         key: DiscoverTab.Assistants,
         label: t('tab.assistants'),
       },
       {
-        icon: <Icon icon={Puzzle} size={iconSize} />,
+        icon: <Icon icon={Puzzle} size={ICON_SIZE} />,
         key: DiscoverTab.Plugins,
         label: t('tab.plugins'),
       },
       {
-        icon: <Icon icon={Brain} size={iconSize} />,
+        icon: <Icon icon={Brain} size={ICON_SIZE} />,
         key: DiscoverTab.Models,
         label: t('tab.models'),
       },
       {
-        icon: <Icon icon={BrainCircuit} size={iconSize} />,
+        icon: <Icon icon={BrainCircuit} size={ICON_SIZE} />,
         key: DiscoverTab.Providers,
         label: t('tab.providers'),
       },

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { MobileNavBar } from '@lobehub/ui/mobile';
+import { ChatHeader } from '@lobehub/ui/mobile';
 import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import urlJoin from 'url-join';
@@ -15,8 +15,7 @@ const Header = memo(() => {
   const type = useDiscoverTab();
 
   return (
-    <MobileNavBar
-      contentStyles={{ center: { display: 'none' }, left: { flex: 'none' } }}
+    <ChatHeader
       onBackClick={() => router.push(urlJoin('/discover', type as string))}
       right={<StoreSearchBar autoFocus={false} mobile style={{ width: '100%' }} />}
       showBackButton
@@ -24,6 +23,7 @@ const Header = memo(() => {
         ...mobileHeaderSticky,
         overflow: 'unset',
       }}
+      styles={{ center: { display: 'none' }, left: { flex: 'none' } }}
     />
   );
 });

package/src/app/[variants]/(main)/discover/search/_layout/Mobile/Nav.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { TabsNav } from '@lobehub/ui';
+import { Tabs } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -35,8 +35,9 @@ const Nav = memo(() => {
 
   return (
     <Flexbox style={{ paddingInline: 16 }}>
-      <TabsNav
+      <Tabs
         activeKey={activeKey}
+        compact
         items={items
           .filter((item: any) => item?.key !== DiscoverTab.Home)
           .map((item: any) => ({
@@ -47,7 +48,6 @@ const Nav = memo(() => {
               </div>
             ),
           }))}
-        variant={'compact'}
       />
     </Flexbox>
   );

package/src/app/[variants]/(main)/files/(content)/@menu/features/FileMenu/index.tsx

@@ -82,13 +82,13 @@ const FileMenu = memo(() => {
   return (
     <Flexbox>
       <Menu
+        compact
         items={items}
         onClick={({ key }) => {
           setActiveKey(key);
         }}
         selectable
         selectedKeys={[activeKey]}
-        variant={'compact'}
       />
     </Flexbox>
   );

package/src/app/[variants]/(main)/files/(content)/@menu/features/KnowledgeBase/Item/Content.tsx

@@ -1,5 +1,5 @@
-import { ActionIcon, EditableText, Icon } from '@lobehub/ui';
-import { App, Dropdown, type MenuProps, Typography } from 'antd';
+import { ActionIcon, Dropdown, EditableText, Icon, type MenuProps } from '@lobehub/ui';
+import { App, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import { LucideLoader2, MoreVertical, PencilLine, Trash } from 'lucide-react';
 import { memo, useMemo } from 'react';
@@ -129,6 +129,10 @@ const Content = memo<KnowledgeBaseItemProps>(({ id, name, showMore }) => {
       ) : (
         <EditableText
           editing={editing}
+          inputProps={{
+            autoFocus: true,
+            maxLength: 64,
+          }}
           onChangeEnd={(v) => {
             if (name !== v) {
               updateKnowledgeBase(id, { name: v });
@@ -140,9 +144,7 @@ const Content = memo<KnowledgeBaseItemProps>(({ id, name, showMore }) => {
           }}
           onEditingChange={toggleEditing}
           showEditIcon={false}
-          size={'small'}
           style={{ height: 28 }}
-          type={'pure'}
           value={name}
         />
       )}

package/src/app/[variants]/(main)/files/(content)/NotSupportClient.tsx

@@ -13,7 +13,7 @@ import { LOBE_CHAT_CLOUD } from '@/const/branding';
 import { DATABASE_SELF_HOSTING_URL, OFFICIAL_URL, UTM_SOURCE } from '@/const/url';
 
 const BLOCK_SIZE = 100;
-const ICON_SIZE = 72;
+const ICON_SIZE = { size: 72, strokeWidth: 1.5 };
 
 const useStyles = createStyles(({ css, token }) => ({
   actionTitle: css`
@@ -100,7 +100,7 @@ const NotSupportClient = () => {
           }}
           width={BLOCK_SIZE}
         >
-          <Icon icon={FileImage} size={{ fontSize: ICON_SIZE, strokeWidth: 1.5 }} />
+          <Icon icon={FileImage} size={ICON_SIZE} />
         </Center>
         <Center
           className={styles.icon}
@@ -112,7 +112,7 @@ const NotSupportClient = () => {
           }}
           width={BLOCK_SIZE}
         >
-          <Icon icon={FileUpIcon} size={{ fontSize: ICON_SIZE, strokeWidth: 1.5 }} />
+          <Icon icon={FileUpIcon} size={ICON_SIZE} />
         </Center>
         <Center
           className={styles.icon}
@@ -123,7 +123,7 @@ const NotSupportClient = () => {
           }}
           width={BLOCK_SIZE}
         >
-          <Icon icon={FileText} size={{ fontSize: ICON_SIZE, strokeWidth: 1.5 }} />
+          <Icon icon={FileText} size={ICON_SIZE} />
         </Center>
       </Flexbox>
 

package/src/app/[variants]/(main)/files/(content)/_layout/Desktop/Container.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { useTheme } from 'antd-style';
+import { PropsWithChildren, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const Container = memo<PropsWithChildren>(({ children }) => {
+  const theme = useTheme();
+
+  return (
+    <Flexbox
+      flex={1}
+      style={{
+        background: theme.colorBgContainerSecondary,
+        overflow: 'hidden',
+        position: 'relative',
+      }}
+    >
+      {children}
+    </Flexbox>
+  );
+});
+
+export default Container;

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

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

package/src/app/[variants]/(main)/files/(content)/_layout/Desktop/index.tsx

@@ -3,6 +3,8 @@ import { Flexbox } from 'react-layout-kit';
 import FilePanel from '@/features/FileSidePanel';
 
 import { LayoutProps } from '../type';
+import Container from './Container';
+import RegisterHotkeys from './RegisterHotkeys';
 
 const Layout = ({ children, menu, modal }: LayoutProps) => {
   return (
@@ -10,14 +12,13 @@ const Layout = ({ children, menu, modal }: LayoutProps) => {
       <Flexbox
         height={'100%'}
         horizontal
-        style={{ maxWidth: 'calc(100vw - 64px)', overflow: 'hidden', position: 'relative' }}
+        style={{ maxWidth: '100%', overflow: 'hidden', position: 'relative' }}
         width={'100%'}
       >
         <FilePanel>{menu}</FilePanel>
-        <Flexbox flex={1} style={{ overflow: 'hidden', position: 'relative' }}>
-          {children}
-        </Flexbox>
+        <Container>{children}</Container>
       </Flexbox>
+      <RegisterHotkeys />
       {modal}
     </>
   );

package/src/app/[variants]/(main)/files/[id]/Header.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { Button, Divider, Typography } from 'antd';
+import { ActionIcon, Button } from '@lobehub/ui';
+import { Divider, Typography } from 'antd';
 import { useTheme } from 'antd-style';
 import { ArrowLeftIcon, DownloadIcon } from 'lucide-react';
 import { useRouter } from 'next/navigation';
@@ -32,7 +32,7 @@ const Header = memo<HeaderProps>(({ filename, url }) => {
     >
       <Flexbox align={'baseline'} horizontal>
         <Button
-          icon={<Icon icon={ArrowLeftIcon} />}
+          icon={ArrowLeftIcon}
           onClick={() => {
             router.push('/files');
           }}

package/src/app/[variants]/(main)/files/features/FileDetail.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Icon } from '@lobehub/ui';
-import { Descriptions, Divider, Tag } from 'antd';
+import { Icon, Tag } from '@lobehub/ui';
+import { Descriptions, Divider } from 'antd';
 import { useTheme } from 'antd-style';
 import dayjs from 'dayjs';
 import { BoltIcon } from 'lucide-react';

package/src/app/[variants]/(main)/profile/(home)/Client.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { Form, type ItemGroup } from '@lobehub/ui';
+import { Form, type FormGroupItemType, Input } from '@lobehub/ui';
+import { Skeleton } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -13,39 +14,49 @@ import { authSelectors, userProfileSelectors } from '@/store/user/selectors';
 
 import SSOProvidersList from './features/SSOProvidersList';
 
-type SettingItemGroup = ItemGroup;
-
-const Client = memo<{ mobile?: boolean }>(() => {
+const Client = memo<{ mobile?: boolean }>(({ mobile }) => {
   const [isLoginWithNextAuth, isLogin] = useUserStore((s) => [
     authSelectors.isLoginWithNextAuth(s),
     authSelectors.isLogin(s),
   ]);
-  const [nickname, username, userProfile] = useUserStore((s) => [
+  const [nickname, username, userProfile, loading] = useUserStore((s) => [
     userProfileSelectors.nickName(s),
     userProfileSelectors.username(s),
     userProfileSelectors.userProfile(s),
+    !s.isLoaded,
   ]);
 
   const [form] = Form.useForm();
   const { t } = useTranslation('auth');
 
-  const profile: SettingItemGroup = {
+  if (loading)
+    return (
+      <Skeleton
+        active
+        paragraph={{ rows: 6 }}
+        style={{ padding: mobile ? 16 : undefined }}
+        title={false}
+      />
+    );
+
+  const profile: FormGroupItemType = {
     children: [
       {
         children: enableAuth && !isLogin ? <UserAvatar /> : <AvatarWithUpload />,
         label: t('profile.avatar'),
+        layout: 'horizontal',
         minWidth: undefined,
       },
       {
-        children: nickname || username,
+        children: <Input disabled />,
         label: t('profile.username'),
-        minWidth: undefined,
+        name: 'username',
       },
       {
-        children: userProfile?.email || '--',
+        children: <Input disabled />,
         hidden: !isLoginWithNextAuth || !userProfile?.email,
         label: t('profile.email'),
-        minWidth: undefined,
+        name: 'email',
       },
       {
         children: <SSOProvidersList />,
@@ -58,7 +69,17 @@ const Client = memo<{ mobile?: boolean }>(() => {
     title: t('tab.profile'),
   };
   return (
-    <Form form={form} items={[profile]} itemsType={'group'} variant={'pure'} {...FORM_STYLE} />
+    <Form
+      form={form}
+      initialValues={{
+        email: userProfile?.email || '--',
+        username: nickname || username,
+      }}
+      items={[profile]}
+      itemsType={'group'}
+      variant={'borderless'}
+      {...FORM_STYLE}
+    />
   );
 });