@lobehub/chat 1.96.1 → 1.96.3

package/src/features/ChatInput/components/UploadDetail/UploadStatus.tsx

@@ -1,6 +1,6 @@
 import { CheckCircleFilled } from '@ant-design/icons';
-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 { Loader2Icon } from 'lucide-react';
 import { memo } from 'react';
@@ -26,9 +26,9 @@ const UploadStatus = memo<UploadStateProps>(({ status, size, uploadState }) => {
       return (
         <Flexbox align={'center'} gap={4} horizontal>
           <Icon icon={Loader2Icon} size={12} spin />
-          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+          <Text style={{ fontSize: 12 }} type={'secondary'}>
             {t('upload.preview.status.pending')}
-          </Typography.Text>
+          </Text>
         </Flexbox>
       );
     }
@@ -37,9 +37,9 @@ const UploadStatus = memo<UploadStateProps>(({ status, size, uploadState }) => {
       return (
         <Flexbox align={'center'} gap={4} horizontal>
           <Progress percent={uploadState?.progress} size={14} type="circle" />
-          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+          <Text style={{ fontSize: 12 }} type={'secondary'}>
             {formatSize(size * ((uploadState?.progress || 0) / 100), 0)} / {formatSize(size)}
-          </Typography.Text>
+          </Text>
         </Flexbox>
       );
     }
@@ -48,9 +48,9 @@ const UploadStatus = memo<UploadStateProps>(({ status, size, uploadState }) => {
       return (
         <Flexbox align={'center'} gap={4} horizontal>
           <Progress percent={uploadState?.progress} size={14} type="circle" />
-          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+          <Text style={{ fontSize: 12 }} type={'secondary'}>
             {formatSize(size)}
-          </Typography.Text>
+          </Text>
         </Flexbox>
       );
     }
@@ -59,9 +59,9 @@ const UploadStatus = memo<UploadStateProps>(({ status, size, uploadState }) => {
       return (
         <Flexbox align={'center'} gap={4} horizontal>
           <CheckCircleFilled style={{ color: theme.colorSuccess, fontSize: 12 }} />
-          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+          <Text style={{ fontSize: 12 }} type={'secondary'}>
             {formatSize(size)}
-          </Typography.Text>
+          </Text>
         </Flexbox>
       );
     }

package/src/features/ChatInput/components/UploadDetail/index.tsx

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Text } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -34,9 +34,9 @@ const UploadDetail = memo<UploadDetailProps>(({ uploadState, status, size, tasks
     <Flexbox align={'center'} gap={8} height={22} horizontal>
       <UploadStatus size={size} status={status} uploadState={uploadState} />
       {!!tasks && Object.keys(tasks).length === 0 ? (
-        <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+        <Text style={{ fontSize: 12 }} type={'secondary'}>
           {t('upload.preview.prepareTasks')}
-        </Typography.Text>
+        </Text>
       ) : (
         <div>
           <FileParsingStatus {...tasks} className={styles.status} hideEmbeddingButton />

package/src/features/Conversation/Messages/Assistant/FileChunks/Item/index.tsx

@@ -1,5 +1,4 @@
-import { Tooltip } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { Text, Tooltip } from '@lobehub/ui';
 import { memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
@@ -33,7 +32,7 @@ const ChunkItem = memo<ChunkItemProps>(({ id, fileId, similarity, text, filename
     >
       <FileIcon fileName={filename} fileType={fileType} size={20} variant={'raw'} />
       <Flexbox gap={12} horizontal justify={'space-between'} style={{ maxWidth: 200 }}>
-        <Typography.Text ellipsis={{ tooltip: false }}>{filename}</Typography.Text>
+        <Text ellipsis>{filename}</Text>
         {/*<Typography.Text*/}
         {/*  ellipsis={{ suffix: '...' }}*/}
         {/*  style={{ fontSize: 12, lineHeight: 1 }}*/}

package/src/features/Conversation/Messages/User/BelowMessage.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 isEqual from 'fast-deep-equal';
 import { RotateCwIcon, Trash2 } from 'lucide-react';
@@ -50,9 +49,9 @@ export const UserBelowMessage = memo<ChatMessage>(({ ragQuery, content, id }) =>
     !isEqual(ragQuery, content) && (
       <Flexbox className={styles.container}>
         <Flexbox align={'center'} className={styles.content} gap={4} horizontal>
-          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+          <Text style={{ fontSize: 12 }} type={'secondary'}>
             {ragQuery}
-          </Typography.Text>
+          </Text>
         </Flexbox>
         <Flexbox className={styles.action} horizontal>
           <ActionIcon

package/src/features/Conversation/Messages/User/FileListViewer/Item.tsx

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Text } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -43,8 +43,8 @@ const FileItem = memo<ChatFileItem>(({ id, fileType, size, name }) => {
     >
       <FileIcon fileName={name} fileType={fileType} />
       <Flexbox style={{ overflow: 'hidden' }}>
-        <Typography.Text ellipsis>{name}</Typography.Text>
-        <Typography.Text type={'secondary'}>{formatSize(size)}</Typography.Text>
+        <Text ellipsis>{name}</Text>
+        <Text type={'secondary'}>{formatSize(size)}</Text>
       </Flexbox>
     </Flexbox>
   );

package/src/features/Conversation/components/History/index.tsx

@@ -1,6 +1,5 @@
 import { ModelTag } from '@lobehub/icons';
-import { Icon, Markdown } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { Icon, Markdown, Text } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { ScrollText } from 'lucide-react';
 import { memo } from 'react';
@@ -50,7 +49,7 @@ const History = memo(() => {
             <Center height={20} width={20}>
               <Icon icon={ScrollText} size={16} style={{ color: theme.colorTextDescription }} />
             </Center>
-            <Typography.Text type={'secondary'}>{t('historySummary')}</Typography.Text>
+            <Text type={'secondary'}>{t('historySummary')}</Text>
             {model && (
               <div>
                 <ModelTag model={model} />

package/src/features/DataImporter/ImportDetail.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Button, Modal } from '@lobehub/ui';
-import { Table, Typography } from 'antd';
+import { Button, Modal, Text } from '@lobehub/ui';
+import { Table } from 'antd';
 import { createStyles } from 'antd-style';
 import { Info } from 'lucide-react';
 import { useState } from 'react';
@@ -10,8 +10,6 @@ import { Flexbox } from 'react-layout-kit';
 
 import { ImportPgDataStructure } from '@/types/export';
 
-const { Text } = Typography;
-
 const getNonEmptyTables = (data: ImportPgDataStructure) => {
   const result = [];
 

package/src/features/ElectronTitlebar/Connection/Waiting.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import { useWatchBroadcast } from '@lobechat/electron-client-ipc';
-import { Button, Icon } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { Button, Icon, Text } from '@lobehub/ui';
 import { createStyles, cx, keyframes } from 'antd-style';
 import { WifiIcon } from 'lucide-react';
 import { memo } from 'react';
@@ -10,8 +9,6 @@ import { useTranslation } from 'react-i18next';
 
 import { useElectronStore } from '@/store/electron';
 
-const { Text, Title } = Typography;
-
 const airdropPulse = keyframes`
     0% {
       transform: translate(-50%, -50%) scale(0.8);
@@ -189,9 +186,9 @@ const WaitingOAuth = memo<WaitingOAuthProps>(({ setWaiting, setIsOpen }) => {
 
           <Icon className={styles.radarIcon} icon={WifiIcon} size={40} />
         </div>
-        <Title className={styles.title} level={4}>
+        <Text as={'h4'} className={styles.title}>
           {t('waitingOAuth.title')}
-        </Title>
+        </Text>
         <Text className={styles.description}>{t('waitingOAuth.description')}</Text>
         <Button onClick={handleCancel}>{t('waitingOAuth.cancel')}</Button>{' '}
         <Text className={styles.helpText}>{t('waitingOAuth.helpText')}</Text>

package/src/features/FileManager/FileList/EmptyStatus.tsx

@@ -1,5 +1,5 @@
-import { FileTypeIcon, Icon } from '@lobehub/ui';
-import { Typography, Upload } from 'antd';
+import { FileTypeIcon, Icon, Text } from '@lobehub/ui';
+import { Upload } from 'antd';
 import { createStyles, useTheme } from 'antd-style';
 import { ArrowUpIcon, PlusIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
@@ -76,8 +76,8 @@ const EmptyStatus = ({ showKnowledgeBase, knowledgeBaseId }: EmptyStatusProps) =
   return (
     <Center gap={24} height={'100%'} style={{ paddingBottom: 100 }} width={'100%'}>
       <Flexbox justify={'center'} style={{ textAlign: 'center' }}>
-        <Typography.Title level={4}>{t('FileManager.emptyStatus.title')}</Typography.Title>
-        <Typography.Text type={'secondary'}>{t('FileManager.emptyStatus.or')}</Typography.Text>
+        <Text as={'h4'}>{t('FileManager.emptyStatus.title')}</Text>
+        <Text type={'secondary'}>{t('FileManager.emptyStatus.or')}</Text>
       </Flexbox>
       <Flexbox gap={12} horizontal>
         {showKnowledgeBase && (

package/src/features/FileManager/FileList/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Typography } from 'antd';
+import { Text } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { useQueryState } from 'nuqs';
 import { rgba } from 'polished';
@@ -109,9 +109,9 @@ const FileList = memo<FileListProps>(({ knowledgeBaseId, category }) => {
           components={{
             Footer: () => (
               <Center style={{ height: 64 }}>
-                <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+                <Text style={{ fontSize: 12 }} type={'secondary'}>
                   {t('FileManager.bottom')}
-                </Typography.Text>
+                </Text>
               </Center>
             ),
           }}

package/src/features/FileManager/UploadDock/Item.tsx

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Text } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { ReactNode, memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -52,41 +52,41 @@ const UploadItem = memo<UploadItemProps>(({ file, status, uploadState }) => {
         ].filter(Boolean);
 
         return (
-          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+          <Text style={{ fontSize: 12 }} type={'secondary'}>
             {uploadState?.progress ? formatSize(size * (uploadState.progress / 100)) : '-'}/
             {formatSize(size)}
             {textArray.length === 0 ? '' : ' · ' + textArray.join(' · ')}
-          </Typography.Text>
+          </Text>
         );
       }
       case 'pending': {
         return (
-          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+          <Text style={{ fontSize: 12 }} type={'secondary'}>
             {formatSize(size)} · {t('uploadDock.body.item.pending')}
-          </Typography.Text>
+          </Text>
         );
       }
 
       case 'processing': {
         return (
-          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+          <Text style={{ fontSize: 12 }} type={'secondary'}>
             {formatSize(size)} · {t('uploadDock.body.item.processing')}
-          </Typography.Text>
+          </Text>
         );
       }
 
       case 'success': {
         return (
-          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+          <Text style={{ fontSize: 12 }} type={'secondary'}>
             {formatSize(size)} · {t('uploadDock.body.item.done')}
-          </Typography.Text>
+          </Text>
         );
       }
       case 'error': {
         return (
-          <Typography.Text style={{ fontSize: 12 }} type={'danger'}>
+          <Text style={{ fontSize: 12 }} type={'danger'}>
             {formatSize(size)} · {t('uploadDock.body.item.error')}
-          </Typography.Text>
+          </Text>
         );
       }
       default: {

package/src/features/FileManager/UploadDock/index.tsx

@@ -1,6 +1,5 @@
 import { CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons';
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { ActionIcon, Icon, Text } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { UploadIcon, XIcon } from 'lucide-react';
@@ -149,7 +148,7 @@ const UploadDock = memo(() => {
             ))}
           </Flexbox>
           <Center style={{ height: 40, minHeight: 40 }}>
-            <Typography.Text
+            <Text
               onClick={() => {
                 setExpand(false);
               }}
@@ -157,7 +156,7 @@ const UploadDock = memo(() => {
               type={'secondary'}
             >
               {t('uploadDock.body.collapse')}
-            </Typography.Text>
+            </Text>
           </Center>
         </Flexbox>
       ) : (

package/src/features/FileManager/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Typography } from 'antd';
+import { Text } from '@lobehub/ui';
 import dynamic from 'next/dynamic';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -21,11 +21,9 @@ const FileManager = memo<FileManagerProps>(({ title, knowledgeBaseId, category }
     <>
       <Header knowledgeBaseId={knowledgeBaseId} />
       <Flexbox gap={12} height={'100%'}>
-        <Typography.Text
-          style={{ fontSize: 16, fontWeight: 'bold', marginBlock: 16, marginInline: 24 }}
-        >
+        <Text strong style={{ fontSize: 16, marginBlock: 16, marginInline: 24 }}>
           {title}
-        </Typography.Text>
+        </Text>
         <FileList category={category} knowledgeBaseId={knowledgeBaseId} />
       </Flexbox>
       <UploadDock />

package/src/tools/local-system/Render/ReadLocalFile/ReadFileView.tsx

@@ -1,6 +1,5 @@
 import { LocalReadFileResult } from '@lobechat/electron-client-ipc';
-import { ActionIcon, Icon, Markdown } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { ActionIcon, Icon, Markdown, Text } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { AlignLeft, Asterisk, ChevronDownIcon, ExternalLink, FolderOpen } from 'lucide-react';
 import React, { memo, useState } from 'react';
@@ -118,9 +117,9 @@ const ReadFileView = memo<ReadFileViewProps>(
           <Flexbox align={'center'} flex={1} gap={0} horizontal style={{ overflow: 'hidden' }}>
             <FileIcon fileName={filename} fileType={fileType} size={24} variant={'raw'} />
             <Flexbox horizontal>
-              <Typography.Text className={styles.fileName} ellipsis>
+              <Text className={styles.fileName} ellipsis>
                 {filename}
-              </Typography.Text>
+              </Text>
               {/* Actions on Hover */}
               <Flexbox className={styles.actions} gap={2} horizontal style={{ marginLeft: 8 }}>
                 <ActionIcon
@@ -174,9 +173,9 @@ const ReadFileView = memo<ReadFileViewProps>(
         </Flexbox>
 
         {/* Path */}
-        <Typography.Text className={styles.path} ellipsis type={'secondary'}>
+        <Text className={styles.path} ellipsis type={'secondary'}>
           {path}
-        </Typography.Text>
+        </Text>
 
         {isExpanded && (
           <Flexbox className={styles.previewBox} style={{ maxHeight: 240, overflow: 'auto' }}>

package/src/tools/web-browsing/Portal/PageContent/index.tsx

@@ -1,5 +1,5 @@
-import { Alert, CopyButton, Highlighter, Icon, Markdown, Segmented } from '@lobehub/ui';
-import { Descriptions, Typography } from 'antd';
+import { Alert, CopyButton, Highlighter, Icon, Markdown, Segmented, Text } from '@lobehub/ui';
+import { Descriptions } from 'antd';
 import { createStyles } from 'antd-style';
 import { ExternalLink } from 'lucide-react';
 import Link from 'next/link';
@@ -148,12 +148,9 @@ const PageContent = memo<PageContentProps>(({ result }) => {
           </Flexbox>
         </Flexbox>
         {description && (
-          <Typography.Paragraph
-            className={styles.description}
-            ellipsis={{ expandable: false, rows: 4 }}
-          >
+          <Text className={styles.description} ellipsis={{ rows: 4 }}>
             {description}
-          </Typography.Paragraph>
+          </Text>
         )}
         <Flexbox align={'center'} className={styles.url} gap={4} horizontal>
           {result.data.siteName && <div>{result.data.siteName} · </div>}

package/src/tools/web-browsing/Portal/Search/ResultList/SearchItem/TitleExtra.tsx

@@ -1,5 +1,4 @@
-import { Tag, Tooltip } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { Tag, Text, Tooltip } from '@lobehub/ui';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -27,12 +26,12 @@ const TitleExtra = memo<TitleExtraProps>(({ category, score, highlight, engines
             {score.toFixed(1)}
           </Tag>
         ) : (
-          <Typography.Text
+          <Text
             style={{ textAlign: 'center', width: 32, wordBreak: 'keep-all' }}
             type={'secondary'}
           >
             {score.toFixed(1)}
-          </Typography.Text>
+          </Text>
         )}
       </Tooltip>
       <CategoryAvatar category={category || 'general'} />

package/src/tools/web-browsing/Portal/Search/ResultList/SearchItem/Video.tsx

@@ -1,4 +1,5 @@
-import { Avatar as AntAvatar, Typography } from 'antd';
+import { Text } from '@lobehub/ui';
+import { Avatar as AntAvatar } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -122,9 +123,9 @@ const VideoItem = memo<SearchResultProps>(
                   score={score}
                 />
               </Flexbox>
-              <Typography.Text className={styles.url} type={'secondary'}>
+              <Text className={styles.url} type={'secondary'}>
                 {url}
-              </Typography.Text>
+              </Text>
               <Flexbox className={styles.desc}>{content}</Flexbox>
             </Flexbox>
           </Flexbox>

package/src/tools/web-browsing/Portal/Search/ResultList/SearchItem/index.tsx

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Text } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -78,9 +78,9 @@ const SearchItem = memo<SearchResultProps>((props) => {
               score={score}
             />
           </Flexbox>
-          <Typography.Text className={styles.url} type={'secondary'}>
+          <Text className={styles.url} type={'secondary'}>
             {url}
-          </Typography.Text>
+          </Text>
           <Flexbox className={styles.desc}>{content}</Flexbox>
         </Flexbox>
       </Flexbox>

package/src/tools/web-browsing/Render/PageContent/Result.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { CrawlErrorResult, CrawlSuccessResult } from '@lobechat/web-crawler';
-import { Alert, Highlighter, Icon } from '@lobehub/ui';
-import { Descriptions, Typography } from 'antd';
+import { Alert, Highlighter, Icon, Text } from '@lobehub/ui';
+import { Descriptions } from 'antd';
 import { createStyles } from 'antd-style';
 import { ExternalLink } from 'lucide-react';
 import Link from 'next/link';
@@ -13,8 +13,6 @@ import { Center, Flexbox } from 'react-layout-kit';
 import { useChatStore } from '@/store/chat';
 import { WebBrowsingManifest } from '@/tools/web-browsing';
 
-const { Paragraph } = Typography;
-
 const useStyles = createStyles(({ token, css }) => {
   return {
     cardBody: css`
@@ -146,9 +144,9 @@ const CrawlerResultCard = memo<CrawlerData>(({ result, messageId, crawler, origi
             </Center>
           </Link>
         </Flexbox>
-        <Paragraph className={styles.description} ellipsis={{ expandable: false, rows: 2 }}>
+        <Text className={styles.description} ellipsis={{ rows: 2 }}>
           {description || result.content?.slice(0, 40)}
-        </Paragraph>
+        </Text>
       </Flexbox>
       <div className={styles.footer}>
         <Descriptions

package/src/tools/web-browsing/Render/Search/SearchResult/SearchResultItem.tsx

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Text } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import Link from 'next/link';
 import { memo } from 'react';
@@ -54,9 +54,9 @@ const SearchResultItem = memo<UniformSearchResult>(({ url, title }) => {
         <div className={styles.title}>{title}</div>
         <Flexbox align={'center'} gap={4} horizontal>
           <WebFavicon size={14} title={title} url={url} />
-          <Typography.Text className={styles.url} type={'secondary'}>
+          <Text className={styles.url} type={'secondary'}>
             {host.replace('www.', '')}
-          </Typography.Text>
+          </Text>
         </Flexbox>
       </Flexbox>
     </Link>

package/src/tools/web-browsing/components/SearchBar.tsx

@@ -1,5 +1,5 @@
-import { Button, Input, Select, Tooltip } from '@lobehub/ui';
-import { Checkbox, Radio, Space, Typography } from 'antd';
+import { Button, Input, Select, Text, Tooltip } from '@lobehub/ui';
+import { Checkbox, Radio, Space } from 'antd';
 import { SearchIcon } from 'lucide-react';
 import { ReactNode, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -115,9 +115,9 @@ const SearchBar = memo<SearchBarProps>(
           />
         ) : (
           <Flexbox align={'flex-start'} gap={8} horizontal>
-            <Typography.Text style={{ marginTop: 2, wordBreak: 'keep-all' }} type={'secondary'}>
+            <Text style={{ marginTop: 2, wordBreak: 'keep-all' }} type={'secondary'}>
               {t('search.searchEngine.title')}
-            </Typography.Text>
+            </Text>
             <Checkbox.Group
               onChange={(checkedValue) => {
                 setEngines(checkedValue);
@@ -164,9 +164,9 @@ const SearchBar = memo<SearchBarProps>(
           />
         ) : (
           <Flexbox align="flex-start" gap={8} horizontal>
-            <Typography.Text style={{ marginTop: 2, wordBreak: 'keep-all' }} type={'secondary'}>
+            <Text style={{ marginTop: 2, wordBreak: 'keep-all' }} type={'secondary'}>
               {t('search.searchCategory.title')}
-            </Typography.Text>
+            </Text>
             <Checkbox.Group
               onChange={(checkedValue) => setCategories(checkedValue)}
               options={Object.keys(CATEGORY_ICON_MAP).map((item) => ({
@@ -184,7 +184,7 @@ const SearchBar = memo<SearchBarProps>(
         )}
 
         <Flexbox align={'center'} gap={16} horizontal wrap={'wrap'}>
-          <Typography.Text type={'secondary'}>{t('search.searchTimeRange.title')}</Typography.Text>
+          <Text type={'secondary'}>{t('search.searchTimeRange.title')}</Text>
           <Radio.Group
             onChange={(e) => setTimeRange(e.target.value)}
             optionType="button"