@lobehub/chat 1.96.2 → 1.96.3

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

@@ -1,7 +1,6 @@
 'use client';
 
-import { Grid, Tag } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { Grid, Tag, Text } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -25,9 +24,9 @@ const List = memo(() => {
     return (
       <Flexbox gap={24} paddingBlock={'0 16px'}>
         <Flexbox align={'center'} gap={4} horizontal>
-          <Typography.Text style={{ fontSize: 16, fontWeight: 'bold' }}>
+          <Text strong style={{ fontSize: 16 }}>
             {t('list.title.enabled')}
-          </Typography.Text>
+          </Text>
         </Flexbox>
         <Grid gap={16} rows={3}>
           {loadingArr.map((item) => (
@@ -41,9 +40,9 @@ const List = memo(() => {
     <>
       <Flexbox gap={24}>
         <Flexbox align={'center'} gap={8} horizontal>
-          <Typography.Text style={{ fontSize: 18, fontWeight: 'bold' }}>
+          <Text strong style={{ fontSize: 18 }}>
             {t('list.title.enabled')}
-          </Typography.Text>
+          </Text>
           <Tag>{enabledList.length}</Tag>
         </Flexbox>
         <Grid gap={16} rows={3}>
@@ -54,9 +53,9 @@ const List = memo(() => {
       </Flexbox>
       <Flexbox gap={24}>
         <Flexbox align={'center'} gap={8} horizontal>
-          <Typography.Text style={{ fontSize: 18, fontWeight: 'bold' }}>
+          <Text strong style={{ fontSize: 18 }}>
             {t('list.title.disabled')}
-          </Typography.Text>
+          </Text>
           <Tag>{disabledList.length}</Tag>
         </Flexbox>
         <Grid gap={16} rows={3}>

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

@@ -1,7 +1,6 @@
 'use client';
 
-import { ActionIcon, ScrollShadow } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { ActionIcon, ScrollShadow, Text } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { ArrowDownUpIcon } from 'lucide-react';
 import { useState } from 'react';
@@ -39,9 +38,9 @@ const ProviderList = () => {
         justify={'space-between'}
         style={{ fontSize: 12, marginTop: 8 }}
       >
-        <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+        <Text style={{ fontSize: 12 }} type={'secondary'}>
           {t('menu.list.enabled')}
-        </Typography.Text>
+        </Text>
         <ActionIcon
           icon={ArrowDownUpIcon}
           onClick={() => {
@@ -63,9 +62,9 @@ const ProviderList = () => {
       {enabledModelProviderList.map((item) => (
         <ProviderItem {...item} key={item.id} />
       ))}
-      <Typography.Text style={{ fontSize: 12, marginTop: 8 }} type={'secondary'}>
+      <Text style={{ fontSize: 12, marginTop: 8 }} type={'secondary'}>
         {t('menu.list.disabled')}
-      </Typography.Text>
+      </Text>
       {disabledModelProviderList.map((item) => (
         <ProviderItem {...item} key={item.id} />
       ))}

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

@@ -1,5 +1,4 @@
-import { Button } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { Button, Text } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { ChevronDown } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -22,9 +21,9 @@ const DisabledModels = memo(() => {
   return (
     disabledModels.length > 0 && (
       <Flexbox>
-        <Typography.Text style={{ fontSize: 12, marginTop: 8 }} type={'secondary'}>
+        <Text style={{ fontSize: 12, marginTop: 8 }} type={'secondary'}>
           {t('providerModels.list.disabled')}
-        </Typography.Text>
+        </Text>
         {displayModels.map((item) => (
           <ModelItem {...item} key={item.id} />
         ))}

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

@@ -1,5 +1,4 @@
-import { ActionIcon } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { ActionIcon, Text } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { ArrowDownUpIcon, ToggleLeft } from 'lucide-react';
 import { useState } from 'react';
@@ -24,9 +23,9 @@ const EnabledModelList = () => {
   return (
     <>
       <Flexbox horizontal justify={'space-between'}>
-        <Typography.Text style={{ fontSize: 12, marginTop: 8 }} type={'secondary'}>
+        <Text style={{ fontSize: 12, marginTop: 8 }} type={'secondary'}>
           {t('providerModels.list.enabled')}
-        </Typography.Text>
+        </Text>
         {!isEmpty && (
           <Flexbox horizontal>
             <ActionIcon
@@ -66,9 +65,9 @@ const EnabledModelList = () => {
       </Flexbox>
       {isEmpty ? (
         <Center padding={12}>
-          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+          <Text style={{ fontSize: 12 }} type={'secondary'}>
             {t('providerModels.list.enabledEmpty')}
-          </Typography.Text>
+          </Text>
         </Center>
       ) : (
         <Flexbox gap={2}>

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

@@ -1,6 +1,6 @@
 import { ModelIcon } from '@lobehub/icons';
-import { ActionIcon, Tag, copyToClipboard } from '@lobehub/ui';
-import { App, Switch, Typography } from 'antd';
+import { ActionIcon, Tag, Text, copyToClipboard } from '@lobehub/ui';
+import { App, Switch } from 'antd';
 import { createStyles, useTheme } from 'antd-style';
 import { LucidePencil, TrashIcon } from 'lucide-react';
 import { memo, use, useState } from 'react';
@@ -297,11 +297,9 @@ const ModelItem = memo<ModelItemProps>(
             </Flexbox>
             <Flexbox align={'baseline'} gap={8} horizontal>
               {content.length > 0 && (
-                <Typography.Text
-                  style={{ color: theme.colorTextSecondary, fontSize: 12, marginBottom: 0 }}
-                >
+                <Text style={{ color: theme.colorTextSecondary, fontSize: 12, marginBottom: 0 }}>
                   {content.join(' · ')}
-                </Typography.Text>
+                </Text>
               )}
             </Flexbox>
           </Flexbox>

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

@@ -1,5 +1,5 @@
-import { ActionIcon, Button, Dropdown } from '@lobehub/ui';
-import { App, Skeleton, Space, Typography } from 'antd';
+import { ActionIcon, Button, Dropdown, Text } from '@lobehub/ui';
+import { App, Skeleton, Space } from 'antd';
 import { useTheme } from 'antd-style';
 import { CircleX, EllipsisVertical, LucideRefreshCcwDot, PlusIcon } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -65,14 +65,14 @@ const ModelTitle = memo<ModelFetcherProps>(
       >
         <Flexbox align={'center'} gap={0} horizontal justify={'space-between'}>
           <Flexbox align={'center'} gap={8} horizontal>
-            <Typography.Text style={{ fontSize: 16, fontWeight: 'bold' }}>
+            <Text strong style={{ fontSize: 16 }}>
               {t('providerModels.list.title')}
-            </Typography.Text>
+            </Text>
 
             {isLoading ? (
               <Skeleton.Button active style={{ height: 22 }} />
             ) : (
-              <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+              <Text style={{ fontSize: 12 }} type={'secondary'}>
                 <div style={{ display: 'flex', lineHeight: '24px' }}>
                   {t('providerModels.list.total', { count: totalModels })}
                   {hasRemoteModels && (
@@ -89,7 +89,7 @@ const ModelTitle = memo<ModelFetcherProps>(
                     />
                   )}
                 </div>
-              </Typography.Text>
+              </Text>
             )}
           </Flexbox>
           {isLoading ? (

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

@@ -1,7 +1,6 @@
 'use client';
 
-import { ActionIcon } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { ActionIcon, Text } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { ToggleRightIcon } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -26,9 +25,9 @@ const SearchResult = memo(() => {
   return (
     <>
       <Flexbox horizontal justify={'space-between'}>
-        <Typography.Text style={{ fontSize: 12, marginTop: 8 }} type={'secondary'}>
+        <Text style={{ fontSize: 12, marginTop: 8 }} type={'secondary'}>
           {t('providerModels.list.searchResult', { count: filteredModels.length })}
-        </Typography.Text>
+        </Text>
         {!isEmpty && (
           <Flexbox horizontal>
             <ActionIcon

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

@@ -1,7 +1,6 @@
 'use client';
 
-import { EditableText } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { EditableText, Text } from '@lobehub/ui';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -39,7 +38,7 @@ const DeviceName = memo(() => {
           }}
           style={{ cursor: 'pointer' }}
         >
-          <Typography.Text type={'secondary'}>{t('sync.device.deviceName.hint')}</Typography.Text>
+          <Text type={'secondary'}>{t('sync.device.deviceName.hint')}</Text>
         </Flexbox>
       )}
       <EditableText

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { Typography } from 'antd';
+import { Text } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { rgba } from 'polished';
 import { memo } from 'react';
@@ -65,9 +65,9 @@ const DeviceCard = memo<DeviceCardProps>(({ browser, os }) => {
       <Flexbox className={styles.container} padding={4}>
         <Flexbox horizontal paddingBlock={8} paddingInline={12}>
           <div>
-            <Typography style={{ fontSize: 18, fontWeight: 'bold' }}>
+            <Text strong style={{ fontSize: 18 }}>
               {t('sync.device.title')}
-            </Typography>
+            </Text>
           </div>
         </Flexbox>
         <Flexbox

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 FormGroupItemType, Input, InputPassword, Tooltip } from '@lobehub/ui';
-import { Form as AntForm, Switch, Typography } from 'antd';
+import { Form, type FormGroupItemType, Input, InputPassword, Text, Tooltip } from '@lobehub/ui';
+import { Form as AntForm, Switch } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -80,9 +80,9 @@ const WebRTC = memo(() => {
           <SiWebrtc style={{ flex: 'none' }} />
           {t('sync.webrtc.title')}
         </Flexbox>
-        <Typography.Text style={{ fontWeight: 'normal' }} type={'secondary'}>
+        <Text style={{ fontWeight: 'normal' }} type={'secondary'}>
           {t('sync.webrtc.desc')}
-        </Typography.Text>
+        </Text>
       </Flexbox>
     ),
   };

package/src/app/[variants]/oauth/consent/[uid]/ClientError.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Typography } from 'antd';
+import { Text } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import React, { memo } from 'react';
 import { Center } from 'react-layout-kit';
@@ -12,8 +12,6 @@ interface ClientProps {
   };
 }
 
-const { Title, Paragraph } = Typography;
-
 const useStyles = createStyles(({ css, token }) => ({
   container: css`
     width: 100%;
@@ -32,10 +30,10 @@ const ConsentClientError = memo<ClientProps>(({ error }) => {
   return (
     <Center className={styles.container}>
       <div className={styles.error}>
-        <Title level={2} style={{ color: 'inherit' }}>
+        <Text as={'h2'} style={{ color: 'inherit' }}>
           {error.title}
-        </Title>
-        <Paragraph style={{ color: 'inherit' }}>{error.message}</Paragraph>
+        </Text>
+        <Text style={{ color: 'inherit' }}>{error.message}</Text>
       </div>
     </Center>
   );

package/src/app/[variants]/oauth/consent/[uid]/Consent.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Button } from '@lobehub/ui';
-import { Card, Divider, Typography } from 'antd';
+import { Button, Text } from '@lobehub/ui';
+import { Card, Divider } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -22,8 +22,6 @@ interface ClientProps {
   uid: string;
 }
 
-const { Title, Text, Paragraph } = Typography;
-
 const useStyles = createStyles(({ css, token }) => ({
   authButton: css`
     width: 100%;
@@ -106,6 +104,7 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
   title: css`
     margin-block-end: ${token.marginLG}px;
+    font-size: 24px;
     color: ${token.colorTextBase};
     text-align: center;
   `,
@@ -132,17 +131,17 @@ const ConsentClient = memo<ClientProps>(
             isFirstParty={clientMetadata.isFirstParty}
             logoUrl={clientMetadata.logo}
           />
-          <Title className={styles.title} level={3}>
+          <Text as={'h3'} className={styles.title}>
             {t('consent.title', { clientName: clientDisplayName })}
-          </Title>
+          </Text>
         </Flexbox>
         <Card className={styles.card}>
           <Flexbox gap={8}>
             <Flexbox gap={12}>
-              <Paragraph>{t('consent.description', { clientName: clientDisplayName })}</Paragraph>
+              <Text>{t('consent.description', { clientName: clientDisplayName })}</Text>
 
               <div className={styles.scopes}>
-                <Paragraph type={'secondary'}>{t('consent.permissionsTitle')}</Paragraph>
+                <Text type={'secondary'}>{t('consent.permissionsTitle')}</Text>
                 {scopes.map((scope) => (
                   <div className={styles.scope} key={scope}>
                     <Text>{getScopeDescription(scope, t)}</Text>

package/src/app/[variants]/oauth/consent/[uid]/Login.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Avatar, Button } from '@lobehub/ui';
-import { Card, Skeleton, Typography } from 'antd';
+import { Avatar, Button, Text } from '@lobehub/ui';
+import { Card, Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -21,8 +21,6 @@ interface LoginConfirmProps {
   uid: string;
 }
 
-const { Title } = Typography;
-
 const useStyles = createStyles(({ css, token }) => ({
   authButton: css`
     width: 100%;
@@ -75,9 +73,9 @@ const LoginConfirmClient = memo<LoginConfirmProps>(({ uid, clientMetadata }) =>
           logoUrl={clientMetadata.logo}
         />
       </Flexbox>
-      <Title className={styles.title} level={3}>
+      <Text as={'h3'} className={styles.title}>
         {titleText}
-      </Title>
+      </Text>
 
       <Card className={styles.card}>
         <Flexbox gap={64}>

package/src/app/[variants]/oauth/handoff/Client.tsx

@@ -1,14 +1,13 @@
 'use client';
 
-import { Spin, Typography } from 'antd';
+import { Text } from '@lobehub/ui';
+import { Spin } from 'antd';
 import { createStyles } from 'antd-style';
 import { useSearchParams } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
-const { Title, Paragraph } = Typography;
-
 const useStyles = createStyles(({ css, token }) => ({
   container: css`
     width: 100%;
@@ -30,6 +29,7 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
   title: css`
     margin-block-end: ${token.marginLG}px;
+    font-size: 24px;
   `,
 }));
 
@@ -86,10 +86,10 @@ const AuthHandoffPage = () => {
     <Center className={styles.container} gap={12}>
       {!isError && <Spin size="large" />}
       <Flexbox align="center" className={styles.content} gap={16}>
-        <Title className={styles.title} level={3}>
+        <Text as={'h3'} className={styles.title}>
           {status.title}
-        </Title>
-        <Paragraph className={styles.message}>{status.desc}</Paragraph>
+        </Text>
+        <Text className={styles.message}>{status.desc}</Text>
       </Flexbox>
     </Center>
   );

package/src/components/InitProgress/index.tsx

@@ -1,5 +1,5 @@
-import { Icon } from '@lobehub/ui';
-import { Progress, Typography } from 'antd';
+import { Icon, Text } from '@lobehub/ui';
+import { Progress } from 'antd';
 import { useTheme } from 'antd-style';
 import { Loader2 } from 'lucide-react';
 import { ReactNode, memo } from 'react';
@@ -33,7 +33,7 @@ const InitProgress = memo<InitingProps>(({ activeStage, stages }) => {
       />
       <Flexbox align={'center'} gap={4} horizontal>
         {stage?.icon ? stage?.icon : <Icon icon={Loader2} spin />}
-        <Typography.Text type={'secondary'}>{stage?.text}</Typography.Text>
+        <Text type={'secondary'}>{stage?.text}</Text>
       </Flexbox>
     </Center>
   );

package/src/components/Loading/CircleLoading/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { Icon } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { Icon, Text } from '@lobehub/ui';
 import { LoaderCircle } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
@@ -14,9 +13,9 @@ export default () => {
         <div>
           <Icon icon={LoaderCircle} size={'large'} spin />
         </div>
-        <Typography.Text style={{ letterSpacing: '0.1em' }} type={'secondary'}>
+        <Text style={{ letterSpacing: '0.1em' }} type={'secondary'}>
           {t('loading')}
-        </Typography.Text>
+        </Text>
       </Flexbox>
     </Center>
   );

package/src/components/ModelSelect/index.tsx

@@ -1,6 +1,5 @@
 import { IconAvatarProps, ModelIcon, ProviderIcon } from '@lobehub/icons';
-import { Avatar, Icon, Tag, Tooltip } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { Avatar, Icon, Tag, Text, Tooltip } from '@lobehub/ui';
 import { createStyles, useResponsive } from 'antd-style';
 import {
   Infinity,
@@ -188,11 +187,9 @@ export const ModelItemRender = memo<ModelItemRenderProps>(({ showInfoTag = true,
         style={{ flexShrink: 1, minWidth: 0, overflow: 'hidden' }}
       >
         <ModelIcon model={model.id} size={20} />
-        <Typography.Text
-          style={mobile ? { maxWidth: '60vw', overflowX: 'auto', whiteSpace: 'nowrap' } : {}}
-        >
+        <Text style={mobile ? { maxWidth: '60vw', overflowX: 'auto', whiteSpace: 'nowrap' } : {}}>
           {model.displayName || model.id}
-        </Typography.Text>
+        </Text>
       </Flexbox>
       {showInfoTag && <ModelInfoTags {...model} />}
     </Flexbox>

package/src/components/StatisticCard/TitleWithPercentage.tsx

@@ -1,13 +1,10 @@
-import { Tag } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { Tag, Text } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
 import { CSSProperties, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { calcGrowthPercentage } from './growthPercentage';
 
-const { Title } = Typography;
-
 interface TitleWithPercentageProps {
   count?: number;
   inverseColor?: boolean;
@@ -43,9 +40,9 @@ const TitleWithPercentage = memo<TitleWithPercentageProps>(
           position: 'inherit',
         }}
       >
-        <Title
+        <Text
+          as={'h2'}
           ellipsis={{ rows: 1, tooltip: title }}
-          level={2}
           style={{
             fontSize: 'inherit',
             fontWeight: 'inherit',
@@ -55,7 +52,7 @@ const TitleWithPercentage = memo<TitleWithPercentageProps>(
           }}
         >
           {title}
-        </Title>
+        </Text>
         {count && prvCount && percentage && percentage !== 0 ? (
           <Tag
             style={{

package/src/components/StatisticCard/index.tsx

@@ -2,13 +2,12 @@ import {
   StatisticCard as AntdStatisticCard,
   StatisticCardProps as AntdStatisticCardProps,
 } from '@ant-design/pro-components';
-import { Spin, Typography } from 'antd';
+import { Text } from '@lobehub/ui';
+import { Spin } from 'antd';
 import { createStyles, useResponsive } from 'antd-style';
 import { adjustHue } from 'polished';
 import { memo } from 'react';
 
-const { Title } = Typography;
-
 const useStyles = createStyles(
   ({ isDarkMode, css, token, prefixCls, responsive }, highlight: string = '#000') => ({
     card: css`
@@ -182,9 +181,9 @@ const StatisticCard = memo<StatisticCardProps>(
         extra={loading ? <Spin percent={'auto'} size={'small'} /> : extra}
         title={
           typeof title === 'string' ? (
-            <Title
-              ellipsis={{ rows: 1, tooltip: title }}
-              level={2}
+            <Text
+              as={'h2'}
+              ellipsis={{ rows: 1, tooltip: true }}
               style={{
                 fontSize: 'inherit',
                 fontWeight: 'inherit',
@@ -194,7 +193,7 @@ const StatisticCard = memo<StatisticCardProps>(
               }}
             >
               {title}
-            </Title>
+            </Text>
           ) : (
             title
           )

package/src/features/AgentSetting/AgentPlugin/index.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import { Avatar, Button, Form, type FormGroupItemType, Tag, Tooltip } from '@lobehub/ui';
-import { Empty, Space, Switch, Typography } from 'antd';
+import { Empty, Space, Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { LucideTrash2, Store } from 'lucide-react';
+import Link from 'next/link';
 import { memo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
@@ -130,7 +131,7 @@ const AgentPlugin = memo(() => {
         description={
           <Trans i18nKey={'plugin.empty'} ns={'setting'}>
             暂无安装插件，
-            <Typography.Link
+            <Link
               href={'/'}
               onClick={(e) => {
                 e.preventDefault();
@@ -138,7 +139,7 @@ const AgentPlugin = memo(() => {
               }}
             >
               前往插件市场
-            </Typography.Link>
+            </Link>
             安装
           </Trans>
         }

package/src/features/ChatInput/Desktop/FilePreview/FileItem/index.tsx

@@ -1,5 +1,4 @@
-import { ActionIcon } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { ActionIcon, Text } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { Trash2Icon } from 'lucide-react';
 import { memo } from 'react';
@@ -64,9 +63,9 @@ const FileItem = memo<FileItemProps>((props) => {
         <Content {...props} />
       </Center>
       <Flexbox flex={1} gap={4} style={{ paddingBottom: 4, paddingInline: 4 }}>
-        <Typography.Text ellipsis={{ tooltip: true }} style={{ fontSize: 12, maxWidth: 100 }}>
+        <Text ellipsis={{ tooltip: true }} style={{ fontSize: 12, maxWidth: 100 }}>
           {file.name}
-        </Typography.Text>
+        </Text>
 
         <UploadDetail size={file.size} status={status} tasks={tasks} uploadState={uploadState} />
       </Flexbox>