@lobehub/chat 1.83.8 → 1.84.0

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}

package/src/app/[variants]/(main)/discover/(list)/_layout/Desktop/Nav.tsx

@@ -1,12 +1,11 @@
 'use client';
 
-import { ChatHeader } from '@lobehub/ui/chat';
-import { Button } from 'antd';
+import { Tabs } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import { rgba } from 'polished';
 import { memo, useState } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Center, Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
 import { useQueryRoute } from '@/hooks/useQueryRoute';
@@ -16,28 +15,26 @@ import { MAX_WIDTH } from '../../../features/const';
 import { useNav } from '../../../features/useNav';
 import { useScroll } from './useScroll';
 
-export const useStyles = createStyles(({ css, token }) => ({
-  activeNavItem: css`
-    background: ${token.colorFillTertiary};
-  `,
-  container: css`
-    position: absolute;
-    z-index: 9;
-    inset-block-start: 64px;
-    inset-inline: 0 0;
+export const useStyles = createStyles(({ cx, stylish, css, token }) => ({
+  container: cx(
+    stylish.blur,
+    css`
+      position: absolute;
+      z-index: 9;
+      inset-block-start: 52px;
+      inset-inline: 0 0;
 
-    height: auto;
-    padding-block: 4px;
-    border-color: transparent;
+      padding-block: 4px;
+      border-block-end: 1px solid ${token.colorBorderSecondary};
 
-    transition: all 0.3s ${token.motionEaseInOut};
-  `,
+      background: ${rgba(token.colorBgContainerSecondary, 0.9)};
+
+      transition: all 0.3s ${token.motionEaseInOut};
+    `,
+  ),
   hide: css`
     transform: translateY(-150%);
   `,
-  navItem: css`
-    font-weight: 500;
-  `,
 }));
 
 const Nav = memo(() => {
@@ -60,58 +57,37 @@ const Nav = memo(() => {
   const isHome = pathname === '/discover';
   const isProviders = pathname === '/discover/providers';
 
-  const navBar = items
-    .map((item: any) => {
-      const isActive = item.key === activeKey;
-
-      const href = item.key === DiscoverTab.Home ? '/discover' : urlJoin('/discover', item.key);
-
-      return (
-        <Link
-          href={href}
-          key={item.key}
-          onClick={(e) => {
-            e.preventDefault();
-            router.push(href);
-          }}
-        >
-          <Button
-            className={cx(styles.navItem, isActive && styles.activeNavItem)}
-            icon={item.icon}
-            type={'text'}
-          >
-            {item.label}
-          </Button>
-        </Link>
-      );
-    })
-    .filter(Boolean);
-
   return (
-    <ChatHeader
-      className={cx(styles.container, hide && styles.hide)}
-      styles={{
-        center: {
-          flex: 'none',
-          justifyContent: 'space-between',
+    <Center className={cx(styles.container, hide && styles.hide)} height={46}>
+      <Flexbox
+        style={{
           maxWidth: MAX_WIDTH,
           width: '100%',
-        },
-        left: { flex: 1 },
-        right: { flex: 1 },
-      }}
-    >
-      <Flexbox align={'center'} gap={4} horizontal>
-        {navBar}
-      </Flexbox>
-      {!isHome && !isProviders && (
+        }}
+      >
         <Flexbox align={'center'} gap={4} horizontal>
-          {/* ↓ cloud slot ↓ */}
-
-          {/* ↑ cloud slot ↑ */}
+          <Tabs
+            activeKey={activeKey}
+            compact
+            items={items as any}
+            onChange={(key) => {
+              const href = key === DiscoverTab.Home ? '/discover' : urlJoin('/discover', key);
+              router.push(href);
+            }}
+            style={{
+              fontWeight: 500,
+            }}
+          />
         </Flexbox>
-      )}
-    </ChatHeader>
+        {!isHome && !isProviders && (
+          <Flexbox align={'center'} gap={4} horizontal>
+            {/* ↓ cloud slot ↓ */}
+
+            {/* ↑ cloud slot ↑ */}
+          </Flexbox>
+        )}
+      </Flexbox>
+    </Center>
   );
 });
 

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { ActionIcon } from '@lobehub/ui';
-import { MobileNavBar } from '@lobehub/ui/mobile';
+import { ChatHeader } from '@lobehub/ui/mobile';
 import { createStyles } from 'antd-style';
 import { SearchIcon } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -29,7 +29,7 @@ const Header = memo(() => {
   const [showSearch, setShowSearch] = useState(false);
 
   return (
-    <MobileNavBar
+    <ChatHeader
       center={
         showSearch && (
           <Flexbox align={'center'} className={styles.search} paddingBlock={8} paddingInline={16}>
@@ -37,7 +37,6 @@ const Header = memo(() => {
           </Flexbox>
         )
       }
-      contentStyles={{ center: { display: 'none' } }}
       left={<Nav />}
       right={
         showSearch ? (
@@ -56,6 +55,7 @@ const Header = memo(() => {
         ...mobileHeaderSticky,
         overflow: 'unset',
       }}
+      styles={{ center: { display: 'none' } }}
     />
   );
 });

package/src/app/[variants]/(main)/discover/(list)/_layout/Mobile/Nav.tsx

@@ -46,7 +46,7 @@ const Nav = memo(() => {
           color={theme.colorText}
           icon={MenuIcon}
           onClick={() => setOpen(true)}
-          size={{ blockSize: 32, fontSize: 18 }}
+          size={{ blockSize: 32, size: 18 }}
         />
         {activeItem?.label}
       </Flexbox>
@@ -74,6 +74,7 @@ const Nav = memo(() => {
         zIndex={10}
       >
         <Menu
+          compact
           items={items}
           onClick={({ key }) => {
             if (key === DiscoverTab.Home) {
@@ -84,7 +85,6 @@ const Nav = memo(() => {
           }}
           selectable
           selectedKeys={[activeKey]}
-          variant={'compact'}
         />
       </Drawer>
     </>

package/src/app/[variants]/(main)/discover/(list)/assistants/features/Card.tsx

@@ -63,18 +63,17 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
 export interface AssistantCardProps
   extends Omit<DiscoverAssistantItem, 'suggestions' | 'socialData' | 'config'> {
   className?: string;
+  compact?: boolean;
   href: string;
   showCategory?: boolean;
   style?: CSSProperties;
-  variant?: 'default' | 'compact';
 }
 
 const AssistantCard = memo<AssistantCardProps>(
-  ({ showCategory, className, meta, createdAt, author, variant, style, href }) => {
+  ({ showCategory, className, meta, createdAt, author, compact, style, href }) => {
     const { avatar, title, description, tags = [], category } = meta;
     const { cx, styles, theme } = useStyles();
     const categoryItem = useCategoryItem(category, 12);
-    const isCompact = variant === 'compact';
     const router = useRouter();
     const user = (
       <Flexbox
@@ -90,7 +89,7 @@ const AssistantCard = memo<AssistantCardProps>(
 
     return (
       <Flexbox className={cx(styles.container, className)} gap={24} style={style}>
-        {!isCompact && (
+        {!compact && (
           <div
             onClick={() => {
               router.push(href);
@@ -103,7 +102,7 @@ const AssistantCard = memo<AssistantCardProps>(
           <Link href={href}>
             <Flexbox gap={12}>
               <Flexbox
-                align={isCompact ? 'flex-start' : 'flex-end'}
+                align={compact ? 'flex-start' : 'flex-end'}
                 gap={16}
                 horizontal
                 justify={'space-between'}
@@ -114,7 +113,7 @@ const AssistantCard = memo<AssistantCardProps>(
                   gap={8}
                   style={{
                     overflow: 'hidden',
-                    paddingTop: isCompact ? 4 : 0,
+                    paddingTop: compact ? 4 : 0,
                     position: 'relative',
                   }}
                 >
@@ -122,14 +121,14 @@ const AssistantCard = memo<AssistantCardProps>(
                     className={styles.title}
                     ellipsis={{ rows: 1, tooltip: title }}
                     level={3}
-                    style={{ fontSize: isCompact ? 16 : 18 }}
+                    style={{ fontSize: compact ? 16 : 18 }}
                   >
                     {title}
                   </Title>
-                  {isCompact && user}
+                  {compact && user}
                 </Flexbox>
 
-                {isCompact ? (
+                {compact ? (
                   <Avatar avatar={avatar} size={40} style={{ display: 'block' }} title={title} />
                 ) : (
                   <Center
@@ -149,7 +148,7 @@ const AssistantCard = memo<AssistantCardProps>(
                 )}
               </Flexbox>
 
-              {!isCompact && (
+              {!compact && (
                 <Flexbox gap={8} horizontal style={{ fontSize: 12 }}>
                   {user}
                   <time className={styles.time} dateTime={new Date(createdAt).toISOString()}>
@@ -181,7 +180,7 @@ const AssistantCard = memo<AssistantCardProps>(
                   });
                   return (
                     <Link href={url} key={index}>
-                      <Tag style={{ margin: 0 }}>{startCase(tag).trim()}</Tag>
+                      <Tag>{startCase(tag).trim()}</Tag>
                     </Link>
                   );
                 })

package/src/app/[variants]/(main)/discover/(list)/assistants/features/List.tsx

@@ -42,10 +42,10 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
           initialItemCount={24}
           itemContent={(_, item) => (
             <Card
+              compact
               href={urlJoin('/discover/assistant/', item.identifier)}
               key={item.identifier}
               showCategory
-              variant={'compact'}
               {...item}
             />
           )}
@@ -78,10 +78,10 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
             initialItemCount={12}
             itemContent={(_, item) => (
               <Card
+                compact
                 href={urlJoin('/discover/assistant/', item.identifier)}
                 key={item.identifier}
                 showCategory={!category}
-                variant={'compact'}
                 {...item}
               />
             )}

package/src/app/[variants]/(main)/discover/(list)/assistants/features/useCategory.tsx

@@ -28,7 +28,7 @@ export const useCategory = (fontsize?: number) => {
 
   const { t } = useTranslation('discover');
 
-  const size = fontsize ? { fontSize: fontsize } : ICON_SIZE;
+  const size = fontsize || ICON_SIZE;
 
   return [
     {