@lobehub/chat 1.83.8 → 1.84.0

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

@@ -1,24 +1,33 @@
-import { Icon } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Button } from '@lobehub/ui';
 import { Plus } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { useActionSWR } from '@/libs/swr';
+import { useServerConfigStore } from '@/store/serverConfig';
 import { useSessionStore } from '@/store/session';
 
 const AddButton = memo<{ groupId?: string }>(({ groupId }) => {
   const { t } = useTranslation('chat');
   const createSession = useSessionStore((s) => s.createSession);
-
+  const mobile = useServerConfigStore((s) => s.isMobile);
   const { mutate, isValidating } = useActionSWR(['session.createSession', groupId], () => {
     return createSession({ group: groupId });
   });
 
   return (
-    <Flexbox style={{ margin: '12px 16px' }}>
-      <Button block icon={<Icon icon={Plus} />} loading={isValidating} onClick={() => mutate()}>
+    <Flexbox flex={1} padding={mobile ? 16 : 0}>
+      <Button
+        block
+        icon={Plus}
+        loading={isValidating}
+        onClick={() => mutate()}
+        style={{
+          marginTop: 8,
+        }}
+        variant={'filled'}
+      >
         {t('newAgent')}
       </Button>
     </Flexbox>

package/src/app/[variants]/(main)/chat/@session/features/SessionListContent/List/Item/Actions.tsx

@@ -1,5 +1,5 @@
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { App, Dropdown } from 'antd';
+import { ActionIcon, Dropdown, Icon } from '@lobehub/ui';
+import { App } from 'antd';
 import { createStyles } from 'antd-style';
 import { ItemType } from 'antd/es/menu/interface';
 import isEqual from 'fast-deep-equal';
@@ -186,7 +186,7 @@ const Actions = memo<ActionProps>(({ group, id, openCreateGroupModal, setOpen })
         icon={MoreVertical}
         size={{
           blockSize: 28,
-          fontSize: 16,
+          size: 16,
         }}
       />
     </Dropdown>

package/src/app/[variants]/(main)/chat/@session/features/SessionListContent/List/Item/index.tsx

@@ -78,9 +78,19 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
         avatarBackground={avatarBackground}
         date={updateAt?.valueOf()}
         description={description}
+        key={id}
         loading={loading}
         pin={pin}
         showAction={open}
+        styles={{
+          container: {
+            gap: 12,
+          },
+          content: {
+            gap: 6,
+            maskImage: `linear-gradient(90deg, #000 90%, transparent)`,
+          },
+        }}
         title={title}
       />
       <CreateGroupModal

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

@@ -1,4 +1,4 @@
-import { Avatar, List, ListItemProps } from '@lobehub/ui';
+import { Avatar, List, type ListItemProps } from '@lobehub/ui';
 import { useHover } from 'ahooks';
 import { createStyles } from 'antd-style';
 import { memo, useMemo, useRef } from 'react';
@@ -40,7 +40,7 @@ const ListItem = memo<ListItemProps & { avatar: string; avatarBackground?: strin
           avatar={avatar}
           background={avatarBackground}
           shape="circle"
-          size={46}
+          size={40}
         />
       ),
       [isHovering, avatar, avatarBackground],

package/src/app/[variants]/(main)/chat/@session/features/SessionListContent/Modals/ConfigGroupModal/GroupItem.tsx

@@ -74,11 +74,7 @@ const GroupItem = memo<SessionGroupItem>(({ id, name }) => {
           }}
           onEditingChange={(e) => setEditing(e)}
           showEditIcon={false}
-          size={'small'}
-          style={{
-            height: 28,
-          }}
-          type={'pure'}
+          style={{ height: 28 }}
           value={name}
         />
       )}

package/src/app/[variants]/(main)/chat/@session/features/SessionListContent/Modals/ConfigGroupModal/index.tsx

@@ -1,5 +1,4 @@
-import { Icon, Modal, type ModalProps, SortableList } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Button, Modal, type ModalProps, SortableList } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { Plus } from 'lucide-react';
@@ -66,7 +65,7 @@ const ConfigGroupModal = memo<ModalProps>(({ open, onCancel }) => {
         />
         <Button
           block
-          icon={<Icon icon={Plus} />}
+          icon={Plus}
           loading={loading}
           onClick={async () => {
             setLoading(true);

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

@@ -32,8 +32,8 @@ const SessionSearchBar = memo<{ mobile?: boolean }>(({ mobile }) => {
       placeholder={t('searchAgentPlaceholder')}
       shortKey={hotkey}
       spotlight={!mobile}
-      type={mobile ? 'block' : 'ghost'}
       value={keywords}
+      variant={'filled'}
     />
   );
 });

package/src/app/[variants]/(main)/chat/_layout/Desktop/SessionPanel.tsx

@@ -11,11 +11,24 @@ import { FOLDER_WIDTH } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 
+import { TOOGLE_PANEL_BUTTON_ID } from '../../features/TogglePanelButton';
+
 export const useStyles = createStyles(({ css, token }) => ({
   panel: css`
     height: 100%;
     color: ${token.colorTextSecondary};
-    background: ${token.colorBgContainer};
+    background: ${token.colorBgLayout};
+
+    #${TOOGLE_PANEL_BUTTON_ID} {
+      opacity: 0;
+      transition: opacity 0.15s ${token.motionEaseInOut};
+    }
+
+    &:hover {
+      #${TOOGLE_PANEL_BUTTON_ID} {
+        opacity: 1;
+      }
+    }
   `,
 }));
 

package/src/app/[variants]/(main)/chat/_layout/Desktop/Workspace.tsx

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

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

@@ -6,6 +6,7 @@ import InitClientDB from '@/features/InitClientDB';
 import { LayoutProps } from '../type';
 import RegisterHotkeys from './RegisterHotkeys';
 import SessionPanel from './SessionPanel';
+import Workspace from './Workspace';
 
 const Layout = ({ children, session }: LayoutProps) => {
   return (
@@ -17,9 +18,7 @@ const Layout = ({ children, session }: LayoutProps) => {
         width={'100%'}
       >
         <SessionPanel>{session}</SessionPanel>
-        <Flexbox flex={1} style={{ overflow: 'hidden', position: 'relative' }}>
-          {children}
-        </Flexbox>
+        <Workspace>{children}</Workspace>
       </Flexbox>
       <InitClientDB bottom={60} />
       {/* ↓ cloud slot ↓ */}

package/src/app/[variants]/(main)/chat/features/Migration/ExportConfigButton.tsx

@@ -1,4 +1,4 @@
-import { Button } from 'antd';
+import { Button } from '@lobehub/ui';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/app/[variants]/(main)/chat/features/Migration/Failed.tsx

@@ -1,5 +1,5 @@
-import { Alert, Highlighter, Icon } from '@lobehub/ui';
-import { Button, Popconfirm, Result } from 'antd';
+import { Alert, Button, Highlighter, Icon } from '@lobehub/ui';
+import { Popconfirm, Result } from 'antd';
 import { useTheme } from 'antd-style';
 import { createStore, del, get, set } from 'idb-keyval';
 import { ShieldAlert } from 'lucide-react';
@@ -44,7 +44,7 @@ const Failed = memo<FailedProps>(({ error, state, setUpgradeStatus, setError, up
           {!!error && (
             <Alert
               extra={
-                <Highlighter copyButtonSize={'small'} language={'json'}>
+                <Highlighter actionIconSize={'small'} language={'json'}>
                   {JSON.stringify(error)}
                 </Highlighter>
               }

package/src/app/[variants]/(main)/chat/features/Migration/Modal.tsx

@@ -1,5 +1,5 @@
-import { Icon } from '@lobehub/ui';
-import { Button, Result } from 'antd';
+import { Button, Icon } from '@lobehub/ui';
+import { Result } from 'antd';
 import { CheckCircle, CpuIcon } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';

package/src/app/[variants]/(main)/chat/features/Migration/Start.tsx

@@ -82,7 +82,7 @@ const MigrationStart = memo<UpgradeButtonProps>((props) => {
           return (
             <Flexbox align={'flex-start'} gap={24} horizontal key={item.title}>
               <Center className={styles.iconCtn}>
-                <Icon className={styles.icon} icon={item.avatar} size={{ fontSize: 36 }} />
+                <Icon className={styles.icon} icon={item.avatar} size={36} />
               </Center>
               <Flexbox gap={8}>
                 <p className={styles.title}>{item.title}</p>

package/src/app/[variants]/(main)/chat/features/Migration/UpgradeButton.tsx

@@ -1,4 +1,4 @@
-import { Button } from 'antd';
+import { Button } from '@lobehub/ui';
 import { ReactNode, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -57,10 +57,10 @@ const UpgradeButton = memo<UpgradeButtonProps>(
 
     return (
       <Button
+        color={primary ? undefined : 'default'}
         loading={upgradeStatus === UpgradeStatus.UPGRADING}
         onClick={upgrade}
         size={'large'}
-        type={primary ? 'primary' : undefined}
       >
         {children ?? t('dbV1.action.upgrade')}
       </Button>

package/src/app/[variants]/(main)/chat/features/TogglePanelButton.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { ActionIcon, Tooltip } from '@lobehub/ui';
+import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+import { HotkeyEnum } from '@/types/hotkey';
+
+export const TOOGLE_PANEL_BUTTON_ID = 'toggle-panel-button';
+
+const TogglePanelButton = memo(() => {
+  const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.ToggleLeftPanel));
+
+  const { t } = useTranslation(['chat', 'hotkey']);
+
+  const showSessionPanel = useGlobalStore(systemStatusSelectors.showSessionPanel);
+  const updateSystemStatus = useGlobalStore((s) => s.updateSystemStatus);
+
+  return (
+    <Tooltip hotkey={hotkey} title={t('toggleLeftPanel.title', { ns: 'hotkey' })}>
+      <ActionIcon
+        icon={showSessionPanel ? PanelLeftClose : PanelLeftOpen}
+        id={TOOGLE_PANEL_BUTTON_ID}
+        onClick={() => {
+          updateSystemStatus({
+            sessionsWidth: showSessionPanel ? 0 : 320,
+            showSessionPanel: !showSessionPanel,
+          });
+        }}
+        size={DESKTOP_HEADER_ICON_SIZE}
+      />
+    </Tooltip>
+  );
+});
+
+export default TogglePanelButton;

package/src/app/[variants]/(main)/chat/settings/_layout/Mobile/Header.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { MobileNavBar, MobileNavBarTitle } from '@lobehub/ui/mobile';
+import { ChatHeader } from '@lobehub/ui/mobile';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -14,8 +14,8 @@ const Header = memo(() => {
   const router = useQueryRoute();
 
   return (
-    <MobileNavBar
-      center={<MobileNavBarTitle title={t('header.session')} />}
+    <ChatHeader
+      center={<ChatHeader.Title title={t('header.session')} />}
       onBackClick={() => router.push('/chat')}
       right={<HeaderContent />}
       showBackButton

package/src/app/[variants]/(main)/chat/settings/features/HeaderContent.tsx

@@ -1,5 +1,4 @@
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { Button, Dropdown, MenuProps } from 'antd';
+import { ActionIcon, Button, Dropdown, type MenuProps } from '@lobehub/ui';
 import { HardDriveDownload } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -51,7 +50,7 @@ export const HeaderContent = memo<{ mobile?: boolean; modal?: boolean }>(({ moda
       {!isServerMode && (
         <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
           {modal ? (
-            <Button block icon={<Icon icon={HardDriveDownload} />}>
+            <Button block icon={HardDriveDownload} variant={'filled'}>
               {t('export', { ns: 'common' })}
             </Button>
           ) : (

package/src/app/[variants]/(main)/chat/settings/features/SubmitAgentButton/SubmitAgentModal.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Alert, Modal, type ModalProps } from '@lobehub/ui';
-import { Button, Divider, Input } from 'antd';
+import { Alert, Button, Input, Modal, type ModalProps } from '@lobehub/ui';
+import { Divider } from 'antd';
 import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { kebabCase } from 'lodash-es';

package/src/app/[variants]/(main)/chat/settings/features/SubmitAgentButton/index.tsx

@@ -1,5 +1,4 @@
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { Button } from 'antd';
+import { ActionIcon, Button } from '@lobehub/ui';
 import { Share2 } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -17,7 +16,7 @@ const SubmitAgentButton = memo<{ modal?: boolean }>(({ modal }) => {
   return (
     <>
       {modal ? (
-        <Button block icon={<Icon icon={Share2} />} onClick={() => setIsModalOpen(true)}>
+        <Button block icon={Share2} onClick={() => setIsModalOpen(true)} variant={'filled'}>
           {t('submitAgentModal.tooltips')}
         </Button>
       ) : (

package/src/app/[variants]/(main)/chat/settings/page.tsx

@@ -1,19 +1,13 @@
 'use client';
 
-import { TabsNav } from '@lobehub/ui';
+import { Tabs } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import PageTitle from '@/components/PageTitle';
 import { INBOX_SESSION_ID } from '@/const/session';
-import { AgentSettingsProvider } from '@/features/AgentSetting';
-import AgentChat from '@/features/AgentSetting/AgentChat';
-import AgentMeta from '@/features/AgentSetting/AgentMeta';
-import AgentModal from '@/features/AgentSetting/AgentModal';
-import AgentPlugin from '@/features/AgentSetting/AgentPlugin';
-import AgentPrompt from '@/features/AgentSetting/AgentPrompt';
-import AgentTTS from '@/features/AgentSetting/AgentTTS';
 import { useInitAgentConfig } from '@/hooks/useInitAgentConfig';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
@@ -22,9 +16,12 @@ import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfi
 import { useSessionStore } from '@/store/session';
 import { sessionMetaSelectors } from '@/store/session/selectors';
 
+import AgentSettings from '../../../../../features/AgentSetting/AgentSettings';
+
 const EditPage = memo(() => {
   const { t } = useTranslation('setting');
   const [tab, setTab] = useState(ChatSettingsTabs.Prompt);
+  const theme = useTheme();
 
   const [id, updateAgentMeta, title] = useSessionStore((s) => [
     s.activeId,
@@ -44,8 +41,8 @@ const EditPage = memo(() => {
   return (
     <>
       <PageTitle title={t('header.sessionWithName', { name: title })} />
-
-      <TabsNav
+      <Tabs
+        compact
         items={[
           {
             key: ChatSettingsTabs.Prompt,
@@ -73,23 +70,19 @@ const EditPage = memo(() => {
           }) as any,
         ]}
         onChange={(value) => setTab(value as ChatSettingsTabs)}
-        variant={'compact'}
+        style={{
+          borderBottom: `1px solid ${theme.colorBorderSecondary}`,
+        }}
       />
-      <AgentSettingsProvider
+      <AgentSettings
         config={config}
         id={id}
         loading={isLoading}
         meta={meta}
         onConfigChange={updateAgentConfig}
         onMetaChange={updateAgentMeta}
-      >
-        {tab === ChatSettingsTabs.Prompt && <AgentPrompt modal />}
-        {tab === ChatSettingsTabs.Meta && <AgentMeta />}
-        {tab === ChatSettingsTabs.Chat && <AgentChat />}
-        {tab === ChatSettingsTabs.Modal && <AgentModal />}
-        {tab === ChatSettingsTabs.TTS && <AgentTTS />}
-        {tab === ChatSettingsTabs.Plugin && <AgentPlugin />}
-      </AgentSettingsProvider>
+        tab={tab}
+      />
     </>
   );
 });

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { MobileNavBar } from '@lobehub/ui';
+import { ChatHeader } from '@lobehub/ui/mobile';
 import { usePathname, useRouter } from 'next/navigation';
 import { memo } from 'react';
 import urlJoin from 'url-join';
@@ -14,7 +14,7 @@ const Header = memo(() => {
   const path = pathname.split('/').filter(Boolean)[1];
 
   return (
-    <MobileNavBar
+    <ChatHeader
       onBackClick={() => router.push(urlJoin('/discover', `${path}s`))}
       showBackButton
       style={mobileHeaderSticky}

package/src/app/[variants]/(main)/discover/(detail)/assistant/[slug]/features/ConversationExample/index.tsx

@@ -1,6 +1,8 @@
 'use client';
 
-import { ChatList, Icon, MobileChatInputArea, MobileChatSendButton } from '@lobehub/ui';
+import { Icon } from '@lobehub/ui';
+import { ChatList } from '@lobehub/ui/chat';
+import { ChatInputArea, ChatSendButton } from '@lobehub/ui/mobile';
 import { useTheme } from 'antd-style';
 import { BotMessageSquare, LoaderCircle } from 'lucide-react';
 import { memo } from 'react';
@@ -80,6 +82,9 @@ const ConversationExample = memo<ConversationExampleProps>(({ data }) => {
                 updateAt: 1_686_437_950_084,
               },
             ]}
+            renderActions={{
+              default: () => null,
+            }}
             renderMessages={{
               default: ({ id, editableContent }) => <div id={id}>{editableContent}</div>,
             }}
@@ -88,9 +93,9 @@ const ConversationExample = memo<ConversationExampleProps>(({ data }) => {
       )}
       <Flexbox flex={'none'}>
         {data?.examples && data.examples?.length > 0 && <TopicList data={data?.examples} />}
-        <MobileChatInputArea
+        <ChatInputArea
           style={{ background: 'none', border: 'none' }}
-          textAreaRightAddons={<MobileChatSendButton />}
+          textAreaRightAddons={<ChatSendButton />}
         />
       </Flexbox>
     </HighlightBlock>

package/src/app/[variants]/(main)/discover/(detail)/assistant/[slug]/features/Header.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { Avatar, Icon, Tag } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Avatar, Button, Icon, Tag } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { startCase } from 'lodash-es';
 import { ChevronRight } from 'lucide-react';
@@ -104,9 +103,7 @@ const Header = memo<HeaderProps>(({ identifier, data, mobile }) => {
               })}
               key={tag}
             >
-              <Tag key={tag} style={{ margin: 0 }}>
-                {startCase(tag).trim()}
-              </Tag>
+              <Tag key={tag}>{startCase(tag).trim()}</Tag>
             </Link>
           ))}
         </Flexbox>

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

@@ -1,5 +1,4 @@
-import { Icon } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Button, Icon } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { ChevronRight } from 'lucide-react';
 import Link from 'next/link';

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

@@ -70,7 +70,7 @@ const HighlightBlock = memo<HighlightBlockProps>(({ avatar, title, icon, childre
         horizontal
         padding={16}
       >
-        <Icon icon={icon} size={{ fontSize: 20 }} style={{ zIndex: 1 }} />
+        <Icon icon={icon} size={20} style={{ zIndex: 1 }} />
         <h2 style={{ fontSize: 16, fontWeight: 'bold', margin: 0, zIndex: 1 }}>{title}</h2>
         <CardBanner avatar={avatar} className={styles.background} size={mobile ? 64 : 512} />
       </Flexbox>

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

@@ -1,5 +1,14 @@
-import { ActionIcon, Avatar, CopyButton, Icon, Input, Modal, Tag } from '@lobehub/ui';
-import { Button, ButtonProps, Skeleton, Typography } from 'antd';
+import {
+  ActionIcon,
+  Avatar,
+  Button,
+  ButtonProps,
+  CopyButton,
+  Input,
+  Modal,
+  Tag,
+} from '@lobehub/ui';
+import { Skeleton, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import { startCase } from 'lodash-es';
 import { LinkIcon, Share2Icon } from 'lucide-react';
@@ -100,9 +109,7 @@ const ShareButton = memo<ShareButtonProps>(({ meta, ...rest }) => {
             {meta.hashtags && (
               <Flexbox align={'center'} gap={4} horizontal justify={'center'} wrap={'wrap'}>
                 {meta.hashtags.map((tag, index) => (
-                  <Tag key={index} style={{ margin: 0 }}>
-                    {startCase(tag).trim()}
-                  </Tag>
+                  <Tag key={index}>{startCase(tag).trim()}</Tag>
                 ))}
               </Flexbox>
             )}
@@ -115,20 +122,20 @@ const ShareButton = memo<ShareButtonProps>(({ meta, ...rest }) => {
               <ActionIcon
                 className={styles.icon}
                 icon={item.icon as any}
-                size={{ blockSize: 36, borderRadius: 18, fontSize: 16 }}
+                size={{ blockSize: 36, borderRadius: 18, size: 16 }}
                 title={item.title}
               />
             </Link>
           ))}
         </Flexbox>
         <Flexbox align={'center'} gap={8} horizontal width={'100%'}>
-          <Input type={'block'} value={meta.url} />
+          <Input value={meta.url} variant={'filled'} />
           <CopyButton
             className={styles.copy}
             color={theme.colorBgLayout}
             content={meta.url}
             icon={LinkIcon}
-            size={{ blockSize: 36, fontSize: 16 }}
+            size={{ blockSize: 36, size: 16 }}
           />
         </Flexbox>
       </Center>
@@ -139,12 +146,7 @@ const ShareButton = memo<ShareButtonProps>(({ meta, ...rest }) => {
 
   return (
     <>
-      <Button
-        icon={<Icon icon={Share2Icon} />}
-        onClick={() => setOpen(true)}
-        size={'large'}
-        {...rest}
-      />
+      <Button icon={Share2Icon} onClick={() => setOpen(true)} size={'large'} {...rest} />
       <Modal
         footer={null}
         onCancel={() => setOpen(false)}

package/src/app/[variants]/(main)/discover/(detail)/model/[...slugs]/features/Actions.tsx

@@ -6,10 +6,10 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
+import { ModelInfoTags } from '@/components/ModelSelect';
 import { OFFICIAL_URL } from '@/const/url';
 import { DiscoverModelItem, DiscoverProviderItem } from '@/types/discover';
 
-import ModelFeatureTags from '../../../../features/ModelFeatureTags';
 import ShareButton from '../../../features/ShareButton';
 import ChatWithModel from './ChatWithModel';
 
@@ -28,13 +28,7 @@ const ModelActions = memo<ModelActionsProps>(({ identifier, providerData, data }
         meta={{
           avatar: <ModelIcon model={identifier} size={64} type={'avatar'} />,
           desc: data.meta.description && t(`${identifier}.description`),
-          tags: (
-            <ModelFeatureTags
-              functionCall={data.meta.functionCall}
-              tokens={data.meta.contextWindowTokens}
-              vision={data.meta.vision}
-            />
-          ),
+          tags: <ModelInfoTags directionReverse {...data.meta} />,
           title: data.meta.title,
           url: urlJoin(OFFICIAL_URL, '/discover/model', identifier),
         }}

package/src/app/[variants]/(main)/discover/(detail)/model/[...slugs]/features/ChatWithModel.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { ProviderIcon } from '@lobehub/icons';
-import { Icon } from '@lobehub/ui';
-import { Button, Dropdown } from 'antd';
+import { Button, Icon } from '@lobehub/ui';
+import { Dropdown } from 'antd';
 import { createStyles } from 'antd-style';
 import { ChevronDownIcon } from 'lucide-react';
 import Link from 'next/link';