@lobehub/chat 1.96.2 → 1.96.3

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 # Changelog
 
+### [Version 1.96.3](https://github.com/lobehub/lobe-chat/compare/v1.96.2...v1.96.3)
+
+<sup>Released on **2025-06-22**</sup>
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.96.2](https://github.com/lobehub/lobe-chat/compare/v1.96.1...v1.96.2)
 
 <sup>Released on **2025-06-22**</sup>

package/README.md

@@ -40,6 +40,11 @@ One-click **FREE** deployment of your private OpenAI ChatGPT/Claude/Gemini/Groq/
 <sup>Pioneering the new age of thinking and creating. Built for you, the Super Individual.</sup>
 
 [![][github-trending-shield]][github-trending-url]
+<br />
+<br />
+<a href="https://vercel.com/oss">
+  <img alt="Vercel OSS Program" src="https://vercel.com/oss/program-badge.svg" />
+</a>
 
 ![][image-overview]
 

package/changelog/v1.json

@@ -1,4 +1,9 @@
 [
+  {
+    "children": {},
+    "date": "2025-06-22",
+    "version": "1.96.3"
+  },
   {
     "children": {
       "improvements": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.96.2",
+  "version": "1.96.3",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -150,7 +150,7 @@
     "@lobehub/chat-plugins-gateway": "^1.9.0",
     "@lobehub/icons": "^2.2.0",
     "@lobehub/tts": "^2.0.1",
-    "@lobehub/ui": "^2.1.15",
+    "@lobehub/ui": "^2.5.6",
     "@modelcontextprotocol/sdk": "^1.12.1",
     "@neondatabase/serverless": "^1.0.0",
     "@next/third-parties": "^15.3.3",
@@ -186,6 +186,7 @@
     "file-type": "^20.5.0",
     "framer-motion": "^12.15.0",
     "gpt-tokenizer": "^2.9.0",
+    "gray-matter": "^4.0.3",
     "html-to-text": "^9.0.5",
     "i18next": "^24.2.3",
     "i18next-browser-languagedetector": "^8.1.0",
@@ -202,6 +203,7 @@
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.522.0",
     "mammoth": "^1.9.1",
+    "markdown-to-txt": "^2.0.1",
     "mdast-util-to-markdown": "^2.1.2",
     "modern-screenshot": "^4.6.0",
     "nanoid": "^5.1.5",
@@ -232,7 +234,7 @@
     "react-confetti": "^6.4.0",
     "react-dom": "^19.1.0",
     "react-fast-marquee": "^1.6.5",
-    "react-hotkeys-hook": "^4.6.2",
+    "react-hotkeys-hook": "^5.1.0",
     "react-i18next": "^15.5.2",
     "react-layout-kit": "^1.9.1",
     "react-lazy-load": "^4.0.1",
@@ -276,7 +278,7 @@
     "@commitlint/cli": "^19.8.1",
     "@edge-runtime/vm": "^5.0.0",
     "@huggingface/tasks": "^0.15.9",
-    "@lobehub/i18n-cli": "^1.22.0",
+    "@lobehub/i18n-cli": "^1.23.0",
     "@lobehub/lint": "^1.26.2",
     "@lobehub/seo-cli": "^1.6.0",
     "@next/bundle-analyzer": "^15.3.3",
@@ -325,14 +327,12 @@
     "fake-indexeddb": "^6.0.1",
     "fs-extra": "^11.3.0",
     "glob": "^11.0.2",
-    "gray-matter": "^4.0.3",
     "happy-dom": "^17.5.6",
     "husky": "^9.1.7",
     "just-diff": "^6.0.2",
     "lint-staged": "^15.5.2",
     "lodash": "^4.17.21",
     "markdown-table": "^3.0.4",
-    "markdown-to-txt": "^2.0.1",
     "mcp-hello-world": "^1.1.2",
     "mime": "^4.0.7",
     "node-fetch": "^3.3.2",
@@ -366,13 +366,6 @@
     ],
     "overrides": {
       "mdast-util-gfm-autolink-literal": "2.0.0"
-    },
-    "packageExtensions": {
-      "@inkjs/ui": {
-        "dependencies": {
-          "react": "^18"
-        }
-      }
     }
   }
 }

package/src/app/[variants]/(auth)/next-auth/signin/AuthSignInBox.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { Button } from '@lobehub/ui';
+import { Button, Text } from '@lobehub/ui';
 import { LobeChat } from '@lobehub/ui/brand';
-import { Col, Flex, Row, Skeleton, Typography } from 'antd';
+import { Col, Flex, Row, Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
 import { AuthError } from 'next-auth';
 import { signIn } from 'next-auth/react';
@@ -15,8 +15,6 @@ import AuthIcons from '@/components/NextAuth/AuthIcons';
 import { DOCUMENTS_REFER_URL, PRIVACY_URL, TERMS_URL } from '@/const/url';
 import { useUserStore } from '@/store/user';
 
-const { Title, Paragraph } = Typography;
-
 const useStyles = createStyles(({ css, token }) => ({
   button: css`
     text-transform: capitalize;
@@ -111,13 +109,15 @@ export default memo(() => {
         <Flex gap="large" vertical>
           {/* Header */}
           <div className={styles.text}>
-            <Title className={styles.title} level={4}>
+            <Text as={'h4'} className={styles.title}>
               <div>
                 <LobeChat size={48} />
               </div>
               {t('signIn.start.title', { applicationName: 'LobeChat' })}
-            </Title>
-            <Paragraph className={styles.description}>{t('signIn.start.subtitle')}</Paragraph>
+            </Text>
+            <Text as={'p'} className={styles.description}>
+              {t('signIn.start.subtitle')}
+            </Text>
           </div>
           {/* Content */}
           <Flex gap="small" vertical>

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/Files/FileItem/File.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 { Trash } from 'lucide-react';
 import { memo } from 'react';
@@ -53,7 +52,7 @@ const FileItem = memo<FileItemProps>(({ id, onRemove, file, status, uploadState,
     <Flexbox align={'center'} className={styles.container} gap={12} horizontal key={id}>
       <FileIcon fileName={file.name} fileType={file.type} />
       <Flexbox style={{ overflow: 'hidden' }}>
-        <Typography.Text ellipsis={{ tooltip: false }}>{file.name}</Typography.Text>
+        <Text ellipsis>{file.name}</Text>
         <UploadDetail size={file.size} status={status} tasks={tasks} uploadState={uploadState} />
       </Flexbox>
       <ActionIcon

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatList/ChatItem/Thread.tsx

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Text } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { CSSProperties, memo } from 'react';
@@ -44,10 +44,10 @@ const Thread = memo<ThreadProps>(({ id, placement, style }) => {
       <div style={{ width: 40 }} />
       <Flexbox className={styles.container} gap={4} padding={4} style={{ width: 'fit-content' }}>
         <Flexbox gap={8} horizontal paddingInline={6}>
-          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+          <Text style={{ fontSize: 12 }} type={'secondary'}>
             {t('thread.title')}
             {threads.length}
-          </Typography.Text>
+          </Text>
         </Flexbox>
         <Flexbox>
           {threads.map((thread) => (

package/src/app/[variants]/(main)/chat/(workspace)/@topic/features/TopicListContent/SearchResult/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Typography } from 'antd';
+import { Text } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import React, { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -37,7 +37,7 @@ const SearchResult = memo(() => {
   if (topics.length === 0)
     return (
       <Center paddingBlock={12}>
-        <Typography.Text type={'secondary'}>{t('searchResultEmpty')}</Typography.Text>
+        <Text type={'secondary'}>{t('searchResultEmpty')}</Text>
       </Center>
     );
 

package/src/app/[variants]/(main)/chat/(workspace)/@topic/features/TopicListContent/ThreadItem/Content.tsx

@@ -1,5 +1,5 @@
-import { ActionIcon, Dropdown, EditableText, Icon, type MenuProps } from '@lobehub/ui';
-import { App, Typography } from 'antd';
+import { ActionIcon, Dropdown, EditableText, Icon, type MenuProps, Text } from '@lobehub/ui';
+import { App } from 'antd';
 import { createStyles } from 'antd-style';
 import { MoreVertical, PencilLine, Trash } from 'lucide-react';
 import { memo, useMemo } from 'react';
@@ -30,7 +30,6 @@ const useStyles = createStyles(({ css, token }) => ({
     text-align: start;
   `,
 }));
-const { Paragraph } = Typography;
 
 interface TopicContentProps {
   active?: boolean;
@@ -109,13 +108,14 @@ const Content = memo<TopicContentProps>(({ id, title, active, showMore }) => {
             <BubblesLoading />
           </Flexbox>
         ) : (
-          <Paragraph
+          <Text
+            as={'p'}
             className={cx(styles.title, active && styles.active)}
             ellipsis={{ rows: 1, tooltip: { placement: 'left', title } }}
             style={{ margin: 0 }}
           >
             {title}
-          </Paragraph>
+          </Text>
         )
       ) : (
         <EditableText

package/src/app/[variants]/(main)/chat/(workspace)/@topic/features/TopicListContent/TopicItem/DefaultContent.tsx

@@ -1,13 +1,10 @@
-import { Icon, Tag } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { Icon, Tag, Text } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
 import { MessageSquareDashed } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-const { Paragraph } = Typography;
-
 const DefaultContent = memo(() => {
   const { t } = useTranslation('topic');
 
@@ -18,9 +15,9 @@ const DefaultContent = memo(() => {
       <Flexbox align={'center'} height={24} justify={'center'} width={24}>
         <Icon color={theme.colorTextDescription} icon={MessageSquareDashed} />
       </Flexbox>
-      <Paragraph ellipsis={{ rows: 1 }} style={{ margin: 0 }}>
+      <Text ellipsis={{ rows: 1 }} style={{ margin: 0 }}>
         {t('defaultTitle')}
-      </Paragraph>
+      </Text>
       <Tag>{t('temp')}</Tag>
     </Flexbox>
   );

package/src/app/[variants]/(main)/chat/(workspace)/@topic/features/TopicListContent/TopicItem/TopicContent.tsx

@@ -1,5 +1,5 @@
-import { ActionIcon, Dropdown, EditableText, Icon, type MenuProps } from '@lobehub/ui';
-import { App, Typography } from 'antd';
+import { ActionIcon, Dropdown, EditableText, Icon, type MenuProps, Text } from '@lobehub/ui';
+import { App } from 'antd';
 import { createStyles } from 'antd-style';
 import {
   LucideCopy,
@@ -32,7 +32,6 @@ const useStyles = createStyles(({ css }) => ({
     text-align: start;
   `,
 }));
-const { Paragraph } = Typography;
 
 interface TopicContentProps {
   fav?: boolean;
@@ -167,13 +166,13 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav, showMore }) => {
             <BubblesLoading />
           </Flexbox>
         ) : (
-          <Paragraph
+          <Text
             className={styles.title}
             ellipsis={{ rows: 1, tooltip: { placement: 'left', title } }}
             style={{ margin: 0 }}
           >
             {title}
-          </Paragraph>
+          </Text>
         )
       ) : (
         <EditableText

package/src/app/[variants]/(main)/chat/@session/features/SessionSearchBar.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { SearchBar } from '@lobehub/ui';
-import { memo } from 'react';
+import { type ChangeEvent, memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useSessionStore } from '@/store/session';
@@ -11,6 +11,7 @@ import { HotkeyEnum } from '@/types/hotkey';
 
 const SessionSearchBar = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('chat');
+  const isLoaded = useUserStore((s) => s.isLoaded);
   const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.Search));
 
   const [keywords, useSearchSessions, updateSearchKeywords] = useSessionStore((s) => [
@@ -21,14 +22,19 @@ const SessionSearchBar = memo<{ mobile?: boolean }>(({ mobile }) => {
 
   const { isValidating } = useSearchSessions(keywords);
 
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      updateSearchKeywords(e.target.value);
+    },
+    [updateSearchKeywords],
+  );
+
   return (
     <SearchBar
       allowClear
       enableShortKey={!mobile}
-      loading={isValidating}
-      onChange={(e) => {
-        updateSearchKeywords(e.target.value);
-      }}
+      loading={!isLoaded || isValidating}
+      onChange={handleChange}
       placeholder={t('searchAgentPlaceholder')}
       shortKey={hotkey}
       spotlight={!mobile}

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

@@ -1,5 +1,5 @@
-import { ActionIcon, Dropdown, EditableText, Icon, type MenuProps } from '@lobehub/ui';
-import { App, Typography } from 'antd';
+import { ActionIcon, Dropdown, EditableText, Icon, type MenuProps, Text } from '@lobehub/ui';
+import { App } from 'antd';
 import { createStyles } from 'antd-style';
 import { LucideLoader2, MoreVertical, PencilLine, Trash } from 'lucide-react';
 import { memo, useMemo } from 'react';
@@ -31,8 +31,6 @@ const useStyles = createStyles(({ css }) => ({
   `,
 }));
 
-const { Paragraph } = Typography;
-
 interface KnowledgeBaseItemProps {
   id: string;
   name: string;
@@ -118,13 +116,13 @@ const Content = memo<KnowledgeBaseItemProps>(({ id, name, showMore }) => {
             <BubblesLoading />
           </Flexbox>
         ) : (
-          <Paragraph
+          <Text
             className={styles.title}
             ellipsis={{ rows: 1, tooltip: { placement: 'left', title: name } }}
             style={{ margin: 0, opacity: isLoading ? 0.6 : undefined }}
           >
             {name}
-          </Paragraph>
+          </Text>
         )
       ) : (
         <EditableText

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

@@ -1,7 +1,6 @@
 'use client';
 
-import { Icon } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { Icon, Text } from '@lobehub/ui';
 import { createStyles, useTheme } from 'antd-style';
 import { Database, FileImage, FileText, FileUpIcon, LibraryBig, SearchCheck } from 'lucide-react';
 import Link from 'next/link';
@@ -128,8 +127,10 @@ const NotSupportClient = () => {
       </Flexbox>
 
       <Flexbox justify={'center'} style={{ textAlign: 'center' }}>
-        <Typography.Title>{t('notSupportGuide.title')}</Typography.Title>
-        <Typography.Text type={'secondary'}>
+        <Text as={'h1'} style={{ fontSize: 32 }}>
+          {t('notSupportGuide.title')}
+        </Text>
+        <Text type={'secondary'}>
           <Trans i18nKey={'notSupportGuide.desc'} ns={'file'}>
             当前部署实例为客户端数据库模式，无法使用文件管理功能。请切换到
             <Link href={DATABASE_SELF_HOSTING_URL}>服务端数据库部署模式</Link>
@@ -140,7 +141,7 @@ const NotSupportClient = () => {
               {LOBE_CHAT_CLOUD}
             </Link>
           </Trans>
-        </Typography.Text>
+        </Text>
       </Flexbox>
 
       <Flexbox style={{ marginTop: 40 }}>

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

@@ -1,7 +1,7 @@
 'use client';
 
-import { ActionIcon, Button } from '@lobehub/ui';
-import { Divider, Typography } from 'antd';
+import { ActionIcon, Button, Text } from '@lobehub/ui';
+import { Divider } from 'antd';
 import { useTheme } from 'antd-style';
 import { ArrowLeftIcon, DownloadIcon } from 'lucide-react';
 import { useRouter } from 'next/navigation';
@@ -42,12 +42,12 @@ const Header = memo<HeaderProps>(({ filename, url }) => {
           {t('back')}
         </Button>
         <Divider type={'vertical'} />
-        <Typography.Title
-          level={1}
+        <Text
+          as={'h1'}
           style={{ fontSize: 16, lineHeight: 1.5, marginBottom: 0, paddingInlineStart: 8 }}
         >
           {filename}
-        </Typography.Title>
+        </Text>
       </Flexbox>
       <Flexbox>
         <ActionIcon

package/src/app/[variants]/(main)/repos/[id]/evals/dataset/DatasetDetail/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { ProColumns, ProTable } from '@ant-design/pro-components';
-import { ActionIcon, Button } from '@lobehub/ui';
-import { Typography, Upload } from 'antd';
+import { ActionIcon, Button, Text } from '@lobehub/ui';
+import { Upload } from 'antd';
 import { createStyles } from 'antd-style';
 import { Edit2Icon, Trash2Icon } from 'lucide-react';
 import { parseAsInteger, useQueryState } from 'nuqs';
@@ -64,7 +64,7 @@ const DatasetDetail = () => {
               {referenceFiles?.map((file) => (
                 <Flexbox gap={4} horizontal key={file.id}>
                   <FileIcon fileName={file.name} fileType={file.fileType} size={20} />
-                  <Typography.Text ellipsis={{ tooltip: true }}>{file.name}</Typography.Text>
+                  <Text ellipsis={{ tooltip: true }}>{file.name}</Text>
                 </Flexbox>
               ))}
             </Flexbox>

package/src/app/[variants]/(main)/repos/[id]/evals/evaluation/EvaluationList/index.tsx

@@ -2,9 +2,10 @@
 
 import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
 import { ActionIcon, Button, ButtonProps, Icon } from '@lobehub/ui';
-import { App, Typography } from 'antd';
+import { App } from 'antd';
 import { createStyles } from 'antd-style';
 import { DownloadIcon, PlayIcon, RotateCcwIcon, Trash2Icon } from 'lucide-react';
+import Link from 'next/link';
 import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -57,13 +58,13 @@ const EvaluationList = ({ knowledgeBaseId }: { knowledgeBaseId: string }) => {
       dataIndex: ['dataset', 'id'],
       render: (dom, entity) => {
         return (
-          <Typography.Link
+          <Link
             href={`/repos/${knowledgeBaseId}/evals/dataset?id=${entity.dataset.id}`}
             style={{ color: 'initial' }}
             target={'_blank'}
           >
             {entity.dataset.name}
-          </Typography.Link>
+          </Link>
         );
       },
       title: t('evaluation.table.columns.datasetId.title'),

package/src/app/[variants]/(main)/repos/[id]/features/Menu/Head/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Typography } from 'antd';
+import { Text } from '@lobehub/ui';
 import { memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
@@ -16,7 +16,9 @@ const Head = memo<{ name?: string }>(({ name }) => {
           <RepoIcon />
         </Center>
 
-        <Typography.Text style={{ fontSize: 16, fontWeight: 'bold' }}>{name}</Typography.Text>
+        <Text ellipsis strong style={{ fontSize: 16 }}>
+          {name}
+        </Text>
       </Flexbox>
     </Flexbox>
   );

package/src/app/[variants]/(main)/settings/llm/components/ProviderModelList/CustomModelOption.tsx

@@ -1,6 +1,6 @@
 import { ModelIcon } from '@lobehub/icons';
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { App, Typography } from 'antd';
+import { ActionIcon, Icon, Text } from '@lobehub/ui';
+import { App } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { LucideArrowRight, LucideSettings, LucideTrash2 } from 'lucide-react';
 import { memo } from 'react';
@@ -45,10 +45,10 @@ const CustomModelOption = memo<CustomModelOptionProps>(({ id, provider }) => {
         <ModelIcon model={id} size={32} />
         <Flexbox direction={'vertical'} style={{ flex: 1, overflow: 'hidden' }}>
           <Flexbox align={'center'} gap={8} horizontal>
-            <Typography.Text ellipsis>{modelCard?.displayName || id}</Typography.Text>
+            <Text ellipsis>{modelCard?.displayName || id}</Text>
             <ModelInfoTags id={id} {...modelCard} isCustom />
           </Flexbox>
-          <Typography.Text ellipsis style={{ fontSize: 12, marginTop: '4px' }} type={'secondary'}>
+          <Text ellipsis style={{ fontSize: 12, marginTop: '4px' }} type={'secondary'}>
             {id}
             {!!modelCard?.deploymentName && (
               <>
@@ -56,7 +56,7 @@ const CustomModelOption = memo<CustomModelOptionProps>(({ id, provider }) => {
                 {modelCard?.deploymentName}
               </>
             )}
-          </Typography.Text>
+          </Text>
         </Flexbox>
       </Flexbox>
 

package/src/app/[variants]/(main)/settings/llm/components/ProviderModelList/ModelFetcher.tsx

@@ -1,5 +1,4 @@
-import { ActionIcon, Icon, Tooltip } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { ActionIcon, Icon, Text, Tooltip } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import dayjs from 'dayjs';
 import isEqual from 'fast-deep-equal';
@@ -61,7 +60,7 @@ const ModelFetcher = memo<ModelFetcherProps>(({ provider }) => {
   const { mutate, isValidating } = useFetchProviderModelList(provider, enabledAutoFetch);
 
   return (
-    <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+    <Text style={{ fontSize: 12 }} type={'secondary'}>
       <Flexbox align={'center'} gap={0} horizontal justify={'space-between'}>
         <div style={{ display: 'flex', lineHeight: '24px' }}>
           {t('llm.modelList.total', { count: totalModels })}
@@ -100,7 +99,7 @@ const ModelFetcher = memo<ModelFetcherProps>(({ provider }) => {
           </Flexbox>
         </Tooltip>
       </Flexbox>
-    </Typography.Text>
+    </Text>
   );
 });
 export default ModelFetcher;

package/src/app/[variants]/(main)/settings/llm/components/ProviderModelList/Option.tsx

@@ -1,6 +1,5 @@
 import { ModelIcon } from '@lobehub/icons';
-import { ActionIcon, Tooltip } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { ActionIcon, Text, Tooltip } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { Recycle } from 'lucide-react';
@@ -47,9 +46,9 @@ const OptionRender = memo<OptionRenderProps>(({ displayName, id, provider, isAzu
             {displayName}
             <ModelInfoTags directionReverse placement={'top'} {...model!} />
           </Flexbox>
-          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+          <Text style={{ fontSize: 12 }} type={'secondary'}>
             {id}
-          </Typography.Text>
+          </Text>
         </Flexbox>
       </Flexbox>
       {removed && (

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

@@ -1,6 +1,6 @@
 import { ProviderCombine, ProviderIcon } from '@lobehub/icons';
-import { Avatar } from '@lobehub/ui';
-import { Divider, Skeleton, Typography } from 'antd';
+import { Avatar, Text } from '@lobehub/ui';
+import { Divider, Skeleton } from 'antd';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,8 +11,6 @@ import { AiProviderListItem } from '@/types/aiProvider';
 import EnableSwitch from './EnableSwitch';
 import { useStyles } from './style';
 
-const { Paragraph } = Typography;
-
 interface ProviderCardProps extends AiProviderListItem {
   loading?: boolean;
 }
@@ -57,23 +55,18 @@ const ProviderCard = memo<ProviderCardProps>(
                         type={'avatar'}
                       />
                     )}
-                    <Typography.Text style={{ fontSize: 16, fontWeight: 'bold' }}>
-                      {name || id}
-                    </Typography.Text>
+                    <Text style={{ fontSize: 16, fontWeight: 'bold' }}>{name || id}</Text>
                   </Flexbox>
                 )}
               </Flexbox>
-              <Paragraph
+              <Text
                 className={styles.desc}
                 ellipsis={{
                   rows: 2,
-                  tooltip: {
-                    arrow: false,
-                  },
                 }}
               >
                 {source === 'custom' ? description : t(`${id}.description`)}
-              </Paragraph>
+              </Text>
             </Flexbox>
           </Link>
           <Divider style={{ margin: '4px 0' }} />