@lobehub/chat 1.83.7 → 1.84.0

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';

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { ModelIcon } from '@lobehub/icons';
-import { Button } from 'antd';
+import { Button } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import dayjs from 'dayjs';
 import Link from 'next/link';
@@ -9,9 +9,9 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { ModelInfoTags } from '@/components/ModelSelect';
 import { DiscoverModelItem } from '@/types/discover';
 
-import ModelFeatureTags from '../../../../features/ModelFeatureTags';
 import Back from '../../../features/Back';
 
 export const useStyles = createStyles(({ css, token }) => ({
@@ -79,11 +79,7 @@ const Header = memo<HeaderProps>(({ identifier, data, mobile }) => {
         )}
       </Flexbox>
       {data.meta.description && <div>{t(`${identifier}.description`, { ns: 'models' })}</div>}
-      <ModelFeatureTags
-        functionCall={data.meta.functionCall}
-        tokens={data.meta.contextWindowTokens}
-        vision={data.meta.vision}
-      />
+      <ModelInfoTags directionReverse {...data.meta} />
     </Flexbox>
   );
 });

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

@@ -5,10 +5,9 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
+import { ModelInfoTags } from '@/components/ModelSelect';
 import { DiscoverModelItem } from '@/types/discover';
 
-import ModelFeatureTags from '../../../../../features/ModelFeatureTags';
-
 const { Paragraph, Title } = Typography;
 
 const useStyles = createStyles(({ css, token, isDarkMode }) => ({
@@ -45,7 +44,7 @@ export interface SuggestionItemProps
     FlexboxProps {}
 
 const SuggestionItem = memo<SuggestionItemProps>(({ className, meta, identifier }) => {
-  const { title, description, contextWindowTokens, vision, functionCall } = meta;
+  const { title, description } = meta;
   const { t } = useTranslation('models');
   const { cx, styles } = useStyles();
 
@@ -67,7 +66,7 @@ const SuggestionItem = memo<SuggestionItemProps>(({ className, meta, identifier
           {t(`${identifier}.description`)}
         </Paragraph>
       )}
-      <ModelFeatureTags functionCall={functionCall} tokens={contextWindowTokens} vision={vision} />
+      <ModelInfoTags directionReverse {...meta} />
     </Flexbox>
   );
 });

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

@@ -5,9 +5,9 @@ import {
   ChartColumnBig,
   Delete,
   FileMinus,
-  Pickaxe,
   LucideIcon,
   MessageSquareText,
+  Pickaxe,
   Thermometer,
 } from 'lucide-react';
 import { memo } from 'react';
@@ -106,7 +106,7 @@ const ParameterList = memo<ParameterListProps>(({ data }) => {
           key: item.key,
           label: (
             <Flexbox align={'center'} gap={8} horizontal>
-              <Icon icon={item.icon} size={{ fontSize: 16 }} />
+              <Icon icon={item.icon} size={16} />
               {item.label}
               <Tag>{item.key}</Tag>
             </Flexbox>

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

@@ -1,7 +1,6 @@
 import { ModelTag, ProviderCombine } from '@lobehub/icons';
-import { ActionIcon, Grid, Icon, Tooltip } from '@lobehub/ui';
-import { Tag } from 'antd';
-import { createStyles, useResponsive } from 'antd-style';
+import { ActionIcon, Grid, Icon, Tag, Tooltip } from '@lobehub/ui';
+import { useResponsive, useTheme } from 'antd-style';
 import { BadgeCheck, BookIcon, ChevronRightIcon, KeyIcon } from 'lucide-react';
 import Link from 'next/link';
 import { memo, useMemo } from 'react';
@@ -16,13 +15,6 @@ import { formatPriceByCurrency, formatTokenNumber } from '@/utils/format';
 
 import Statistic, { type StatisticProps } from '../../../../../components/Statistic';
 
-const useStyles = createStyles(({ css, token }) => ({
-  tagGreen: css`
-    color: ${token.colorSuccess};
-    background: ${token.colorSuccessBgHover};
-  `,
-}));
-
 interface ProviderItemProps extends DiscoverProviderItem {
   mobile?: boolean;
   modelId: string;
@@ -31,7 +23,7 @@ interface ProviderItemProps extends DiscoverProviderItem {
 const ProviderItem = memo<ProviderItemProps>(({ mobile, modelId, identifier }) => {
   const { t } = useTranslation('discover');
   const { xl = true } = useResponsive();
-  const { styles, theme } = useStyles();
+  const theme = useTheme();
   const isLobeHub = identifier === 'lobehub';
 
   const isMobile = mobile || !xl;
@@ -80,22 +72,17 @@ const ProviderItem = memo<ProviderItemProps>(({ mobile, modelId, identifier }) =
         <ModelTag model={modelId} style={{ background: theme.colorFillQuaternary, margin: 0 }} />
         {isLobeHub && (
           <Tooltip title={t('models.providerInfo.officialTooltip')}>
-            <Tag
-              bordered={false}
-              className={styles.tagGreen}
-              icon={<Icon icon={BadgeCheck} />}
-              style={{ margin: 0 }}
-            />
+            <Tag color={'success'} icon={<Icon icon={BadgeCheck} />} />
           </Tooltip>
         )}
         {!isLobeHub && (
           <Tooltip title={t('models.providerInfo.apiTooltip')}>
-            <Tag bordered={false} icon={<Icon icon={KeyIcon} />} style={{ margin: 0 }} />
+            <Tag icon={<Icon icon={KeyIcon} />} />
           </Tooltip>
         )}
         <Tooltip title={t('models.guide')}>
           <Link href={urlJoin(BASE_PROVIDER_DOC_URL, identifier)} target={'_blank'}>
-            <Tag bordered={false} icon={<Icon icon={BookIcon} />} style={{ margin: 0 }} />
+            <Tag icon={<Icon icon={BookIcon} />} />
           </Link>
         </Tooltip>
       </Flexbox>

package/src/app/[variants]/(main)/discover/(detail)/plugin/[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';
@@ -80,7 +79,13 @@ const Header = memo<HeaderProps>(({ identifier, data, mobile }) => {
               <>
                 <Icon color={theme.colorTextSecondary} icon={ChevronRight} />
                 <Link href={urlJoin('/discover/plugins', data.meta?.category || '')}>
-                  <Button className={styles.tag} shape={'round'} size={'small'}>
+                  <Button
+                    className={styles.tag}
+                    color={'default'}
+                    shape={'round'}
+                    size={'small'}
+                    variant={'filled'}
+                  >
                     {t(`category.plugin.${data.meta?.category}` as any)}
                   </Button>
                 </Link>

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

@@ -1,6 +1,7 @@
 'use client';
 
-import { App, Button, Skeleton } from 'antd';
+import { Button } from '@lobehub/ui';
+import { App, Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { TabsNav, Tag } from '@lobehub/ui';
+import { Tabs, Tag } from '@lobehub/ui';
 import { Empty, Skeleton, Table } from 'antd';
 import { useTheme } from 'antd-style';
 import { PuzzleIcon } from 'lucide-react';
@@ -37,14 +37,14 @@ const ParameterList = memo<ParameterListProps>(({ data }) => {
 
     content = (
       <>
-        <TabsNav
+        <Tabs
           activeKey={active as any}
+          compact
           items={api.map((item, index) => ({
             key: index as any,
             label: item.name,
           }))}
           onChange={(key) => setActive(key as any)}
-          variant={'compact'}
         />
         <Flexbox
           padding={16}

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { ProviderCombine } from '@lobehub/icons';
-import { Button } from 'antd';
+import { Button } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import Link from 'next/link';
 import { memo } from 'react';

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

@@ -9,11 +9,11 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
+import { ModelInfoTags } from '@/components/ModelSelect';
 import { DiscoverModelItem } from '@/types/discover';
 import { formatPriceByCurrency, formatTokenNumber } from '@/utils/format';
 
 import Statistic, { type StatisticProps } from '../../../../../components/Statistic';
-import ModelFeatureTags from '../../../../../features/ModelFeatureTags';
 
 const { Paragraph, Title } = Typography;
 
@@ -47,7 +47,7 @@ export interface SuggestionItemProps
 }
 
 const ModelItem = memo<SuggestionItemProps>(({ mobile, meta, identifier }) => {
-  const { title, contextWindowTokens, vision, functionCall } = meta;
+  const { title } = meta;
   const { xl = true } = useResponsive();
   const { t } = useTranslation('discover');
   const { styles, theme } = useStyles();
@@ -98,7 +98,7 @@ const ModelItem = memo<SuggestionItemProps>(({ mobile, meta, identifier }) => {
           </Flexbox>
         </Flexbox>
       </Link>
-      <ModelFeatureTags functionCall={functionCall} tokens={contextWindowTokens} vision={vision} />
+      <ModelInfoTags directionReverse {...meta} />
     </Flexbox>
   );
 

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

@@ -1,8 +1,8 @@
 'use client';
 
 import { ProviderIcon } from '@lobehub/icons';
-import { Icon } from '@lobehub/ui';
-import { Button, Divider } from 'antd';
+import { Button } from '@lobehub/ui';
+import { Divider } from 'antd';
 import { useTheme } from 'antd-style';
 import { Brain, ChevronsUpDown } from 'lucide-react';
 import { Fragment, memo, useState } from 'react';
@@ -45,7 +45,7 @@ const ModelList = memo<ModelListProps>(({ mobile, modelData, identifier }) => {
       ))}
       {modelData.length > DEFAULT_LENGTH && !showAll && (
         <Flexbox padding={16}>
-          <Button icon={<Icon icon={ChevronsUpDown} />} onClick={() => setShowAll(true)}>
+          <Button icon={ChevronsUpDown} onClick={() => setShowAll(true)}>
             {t('providers.showAllModels')}{' '}
             <span style={{ color: theme.colorTextDescription }}>
               (+{modelData.length - DEFAULT_LENGTH})

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

@@ -1,7 +1,7 @@
 'use client';
 
-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, SquareArrowOutUpRight } from 'lucide-react';
 import Link from 'next/link';
@@ -35,7 +35,7 @@ const ProviderConfig = memo<ProviderConfigProps>(({ data, identifier }) => {
     router.push(isDeprecatedEdition ? '/settings/llm' : `/settings/provider/${identifier}`);
   };
 
-  const icon = <Icon icon={SquareArrowOutUpRight} size={{ fontSize: 16 }} />;
+  const icon = <Icon icon={SquareArrowOutUpRight} size={16} />;
 
   const items = [
     data.meta?.url && {
@@ -60,7 +60,7 @@ const ProviderConfig = memo<ProviderConfigProps>(({ data, identifier }) => {
 
   if (!items || items?.length === 0)
     return (
-      <Button size={'large'} style={{ flex: 1 }} type={'primary'}>
+      <Button block size={'large'} style={{ flex: 1 }} type={'primary'}>
         {t('providers.config')}
       </Button>
     );

package/src/app/[variants]/(main)/discover/(list)/(home)/features/AssistantList.tsx

@@ -19,10 +19,10 @@ const AssistantList = memo<{ data: DiscoverAssistantItem[] }>(({ data }) => {
       ))}
       {data.slice(8, 16).map((item) => (
         <Card
+          compact
           href={urlJoin('/discover/assistant/', item.identifier)}
           key={item.identifier}
           showCategory
-          variant={'compact'}
           {...item}
         />
       ))}

package/src/app/[variants]/(main)/discover/(list)/(home)/features/PluginList.tsx

@@ -11,8 +11,8 @@ const PluginList = memo<{ data: DiscoverPlugintem[] }>(({ data }) => {
     <Grid maxItemWidth={280} rows={4}>
       {data.map((item) => (
         <Card
+          compact
           showCategory
-          variant={'compact'}
           {...item}
           href={urlJoin('/discover/plugin/', item.identifier)}
           key={item.identifier}