@lobehub/chat 1.83.7 → 1.84.0

package/src/components/ModelSelect/index.tsx

@@ -1,5 +1,5 @@
 import { IconAvatarProps, ModelIcon, ProviderIcon } from '@lobehub/icons';
-import { Avatar, Icon, Tooltip } from '@lobehub/ui';
+import { Avatar, Icon, Tag, Tooltip } from '@lobehub/ui';
 import { Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import {
@@ -12,28 +12,18 @@ import {
   ToyBrick,
 } from 'lucide-react';
 import numeral from 'numeral';
-import { rgba } from 'polished';
 import { FC, memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
+import { Flexbox } from 'react-layout-kit';
 
 import { ModelAbilities } from '@/types/aiModel';
 import { AiProviderSourceType } from '@/types/aiProvider';
 import { ChatModelCard } from '@/types/llm';
 import { formatTokenNumber } from '@/utils/format';
 
-const useStyles = createStyles(({ css, token, isDarkMode }) => ({
-  custom: css`
-    width: 36px;
-    height: 20px;
-    border-radius: 4px;
+export const TAG_CLASSNAME = 'lobe-model-info-tags';
 
-    font-family: ${token.fontFamilyCode};
-    font-size: 12px;
-    color: ${rgba(token.colorWarning, 0.75)};
-
-    background: ${token.colorWarningBg};
-  `,
+const useStyles = createStyles(({ css, token }) => ({
   tag: css`
     cursor: default;
 
@@ -45,26 +35,6 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
     height: 20px;
     border-radius: 4px;
   `,
-  tagBlue: css`
-    color: ${token.geekblue};
-    background: ${token.geekblue1};
-  `,
-  tagCyan: css`
-    color: ${isDarkMode ? token.cyan7 : token.cyan10};
-    background: ${isDarkMode ? token.cyan1 : token.cyan2};
-  `,
-  tagGreen: css`
-    color: ${token.green};
-    background: ${token.green1};
-  `,
-  tagGreenDeep: css`
-    color: ${token.green9};
-    background: ${token.green3};
-  `,
-  tagPurple: css`
-    color: ${token.purple};
-    background: ${token.purple1};
-  `,
   token: css`
     width: 36px;
     height: 20px;
@@ -88,19 +58,24 @@ interface ModelInfoTagsProps extends ModelAbilities {
 export const ModelInfoTags = memo<ModelInfoTagsProps>(
   ({ directionReverse, placement = 'right', ...model }) => {
     const { t } = useTranslation('components');
-    const { styles, cx } = useStyles();
+    const { styles } = useStyles();
 
     return (
-      <Flexbox direction={directionReverse ? 'horizontal-reverse' : 'horizontal'} gap={4}>
+      <Flexbox
+        className={TAG_CLASSNAME}
+        direction={directionReverse ? 'horizontal-reverse' : 'horizontal'}
+        gap={4}
+        width={'fit-content'}
+      >
         {model.files && (
           <Tooltip
             placement={placement}
             styles={{ root: { pointerEvents: 'none' } }}
             title={t('ModelSelect.featureTag.file')}
           >
-            <div className={cx(styles.tag, styles.tagGreen)} style={{ cursor: 'pointer' }} title="">
+            <Tag className={styles.tag} color={'success'} size={'small'}>
               <Icon icon={LucidePaperclip} />
-            </div>
+            </Tag>
           </Tooltip>
         )}
         {model.imageOutput && (
@@ -109,9 +84,9 @@ export const ModelInfoTags = memo<ModelInfoTagsProps>(
             styles={{ root: { pointerEvents: 'none' } }}
             title={t('ModelSelect.featureTag.imageOutput')}
           >
-            <div className={cx(styles.tag, styles.tagGreen)} style={{ cursor: 'pointer' }} title="">
+            <Tag className={styles.tag} color={'success'} size={'small'}>
               <Icon icon={LucideImage} />
-            </div>
+            </Tag>
           </Tooltip>
         )}
         {model.vision && (
@@ -120,9 +95,9 @@ export const ModelInfoTags = memo<ModelInfoTagsProps>(
             styles={{ root: { pointerEvents: 'none' } }}
             title={t('ModelSelect.featureTag.vision')}
           >
-            <div className={cx(styles.tag, styles.tagGreen)} style={{ cursor: 'pointer' }} title="">
+            <Tag className={styles.tag} color={'success'} size={'small'}>
               <Icon icon={LucideEye} />
-            </div>
+            </Tag>
           </Tooltip>
         )}
         {model.functionCall && (
@@ -133,9 +108,9 @@ export const ModelInfoTags = memo<ModelInfoTagsProps>(
             }}
             title={t('ModelSelect.featureTag.functionCall')}
           >
-            <div className={cx(styles.tag, styles.tagBlue)} style={{ cursor: 'pointer' }} title="">
+            <Tag className={styles.tag} color={'info'} size={'small'}>
               <Icon icon={ToyBrick} />
-            </div>
+            </Tag>
           </Tooltip>
         )}
         {model.reasoning && (
@@ -144,9 +119,9 @@ export const ModelInfoTags = memo<ModelInfoTagsProps>(
             styles={{ root: { pointerEvents: 'none' } }}
             title={t('ModelSelect.featureTag.reasoning')}
           >
-            <div className={cx(styles.tag, styles.tagPurple)} style={{ cursor: 'pointer' }}>
+            <Tag className={styles.tag} color={'purple'} size={'small'}>
               <Icon icon={AtomIcon} />
-            </div>
+            </Tag>
           </Tooltip>
         )}
         {model.search && (
@@ -155,9 +130,9 @@ export const ModelInfoTags = memo<ModelInfoTagsProps>(
             styles={{ root: { pointerEvents: 'none' } }}
             title={t('ModelSelect.featureTag.search')}
           >
-            <div className={cx(styles.tag, styles.tagCyan)} style={{ cursor: 'pointer' }} title="">
+            <Tag className={styles.tag} color={'cyan'} size={'small'}>
               <Icon icon={LucideGlobe} />
-            </div>
+            </Tag>
           </Tooltip>
         )}
         {typeof model.contextWindowTokens === 'number' && (
@@ -173,13 +148,13 @@ export const ModelInfoTags = memo<ModelInfoTagsProps>(
                   : numeral(model.contextWindowTokens).format('0,0'),
             })}
           >
-            <Center className={styles.token} title="">
+            <Tag className={styles.token} size={'small'}>
               {model.contextWindowTokens === 0 ? (
                 <Infinity size={17} strokeWidth={1.6} />
               ) : (
                 formatTokenNumber(model.contextWindowTokens as number)
               )}
-            </Center>
+            </Tag>
           </Tooltip>
         )}
       </Flexbox>
@@ -193,14 +168,17 @@ interface ModelItemRenderProps extends ChatModelCard {
 
 export const ModelItemRender = memo<ModelItemRenderProps>(({ showInfoTag = true, ...model }) => {
   return (
-    <Flexbox align={'center'} gap={32} horizontal justify={'space-between'}>
-      <Flexbox align={'center'} gap={8} horizontal>
+    <Flexbox
+      align={'center'}
+      gap={32}
+      horizontal
+      justify={'space-between'}
+      style={{ overflow: 'hidden', position: 'relative' }}
+    >
+      <Flexbox align={'center'} gap={8} horizontal style={{ overflow: 'hidden' }}>
         <ModelIcon model={model.id} size={20} />
-        <Typography.Paragraph ellipsis={false} style={{ marginBottom: 0 }}>
-          {model.displayName || model.id}
-        </Typography.Paragraph>
+        <Typography.Text ellipsis>{model.displayName || model.id}</Typography.Text>
       </Flexbox>
-
       {showInfoTag && <ModelInfoTags {...model} />}
     </Flexbox>
   );

package/src/components/NextAuth/AuthIcons.tsx

@@ -27,13 +27,13 @@ const iconComponents: { [key: string]: React.ElementType } = {
 
 /**
  * Get the auth icons component for the given id
- * @param id 
+ * @param id
  * @param size default is 36
- * @returns 
+ * @returns
  */
 const AuthIcons = (id: string, size = 36) => {
   const IconComponent = iconComponents[id] || iconComponents.default;
-  return <IconComponent size={size}/>;
+  return <IconComponent size={size} />;
 };
 
 export default AuthIcons;

package/src/components/Notification/index.tsx

@@ -33,7 +33,8 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
     inset-inline-start: 8px;
   `,
   wrapper: css`
-    background: linear-gradient(
+    background:
+      linear-gradient(
         180deg,
         ${rgba(token.colorBgContainer, 0)},
         ${token.colorBgContainer} ${isDarkMode ? '80' : '140'}px

package/src/components/OllamaSetupGuide/index.tsx

@@ -1,4 +1,4 @@
-import { Highlighter, Snippet, TabsNav } from '@lobehub/ui';
+import { Highlighter, Snippet, Tabs } from '@lobehub/ui';
 import { Steps } from 'antd';
 import { createStyles } from 'antd-style';
 import Link from 'next/link';
@@ -30,7 +30,7 @@ const SetupGuide = memo(() => {
   const { styles } = useStyles();
   const { t } = useTranslation('components');
   return (
-    <TabsNav
+    <Tabs
       items={[
         {
           children: (

package/src/components/RepoIcon/index.tsx

@@ -9,14 +9,7 @@ interface RepoIconProps {
 const RepoIcon = memo<RepoIconProps>(({ size = 20 }) => {
   const theme = useTheme();
 
-  return (
-    <Icon
-      color={theme.geekblue}
-      fill={theme.geekblue3}
-      icon={BookTextIcon}
-      size={{ fontSize: size }}
-    />
-  );
+  return <Icon color={theme.geekblue} fill={theme.geekblue3} icon={BookTextIcon} size={size} />;
 });
 
 export default RepoIcon;

package/src/components/SafeSpacing/index.tsx

@@ -1,4 +1,4 @@
-import { MobileSafeArea, type MobileSafeAreaProps } from '@lobehub/ui';
+import { SafeArea, type SafeAreaProps } from '@lobehub/ui/mobile';
 import { memo } from 'react';
 
 import { HEADER_HEIGHT, MOBILE_NABBAR_HEIGHT, MOBILE_TABBAR_HEIGHT } from '@/const/layoutTokens';
@@ -6,7 +6,7 @@ import { HEADER_HEIGHT, MOBILE_NABBAR_HEIGHT, MOBILE_TABBAR_HEIGHT } from '@/con
 interface SafeSpacingProps {
   height?: number;
   mobile?: boolean;
-  position?: MobileSafeAreaProps['position'];
+  position?: SafeAreaProps['position'];
 }
 
 const SafeSpacing = memo<SafeSpacingProps>(({ height, position = 'top', mobile }) => {
@@ -19,7 +19,7 @@ const SafeSpacing = memo<SafeSpacingProps>(({ height, position = 'top', mobile }
   return (
     <>
       <div style={{ flex: 'none', height: height || h }} />
-      {mobile && <MobileSafeArea position={position} />}
+      {mobile && <SafeArea position={position} />}
     </>
   );
 });

package/src/components/SidebarHeader/index.tsx

@@ -1,6 +1,6 @@
 import { createStyles } from 'antd-style';
-import { CSSProperties, type ReactNode, memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { type ReactNode, memo } from 'react';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
 const useStyles = createStyles(({ css }) => ({
   header: css`
@@ -8,14 +8,13 @@ const useStyles = createStyles(({ css }) => ({
   `,
 }));
 
-interface SidebarHeaderProps {
+interface SidebarHeaderProps extends Omit<FlexboxProps, 'title'> {
   actions?: ReactNode;
   onClick?: () => void;
-  style?: CSSProperties;
   title: ReactNode;
 }
 
-const SidebarHeader = memo<SidebarHeaderProps>(({ title, style, actions, onClick }) => {
+const SidebarHeader = memo<SidebarHeaderProps>(({ title, style, actions, onClick, ...rest }) => {
   const { styles } = useStyles();
 
   return (
@@ -25,9 +24,10 @@ const SidebarHeader = memo<SidebarHeaderProps>(({ title, style, actions, onClick
       distribution={'space-between'}
       horizontal
       onClick={onClick}
-      padding={14}
+      paddingBlock={14}
       paddingInline={16}
       style={style}
+      {...rest}
     >
       <Flexbox align={'center'} gap={4} horizontal width={'100%'}>
         {title}

package/src/components/StatisticCard/TitleWithPercentage.tsx

@@ -1,4 +1,5 @@
-import { Tag, Typography } from 'antd';
+import { Tag } from '@lobehub/ui';
+import { Typography } from 'antd';
 import { useTheme } from 'antd-style';
 import { CSSProperties, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';

package/src/components/StatisticCard/index.tsx

@@ -153,7 +153,7 @@ const useStyles = createStyles(
       border-radius: ${token.borderRadius}px;
       background: ${token.colorFillSecondary};
     `,
-    pure: css`
+    raw: css`
       border: none !important;
       background: transparent !important;
     `,
@@ -162,20 +162,20 @@ const useStyles = createStyles(
 
 interface StatisticCardProps extends AntdStatisticCardProps {
   highlight?: string;
-  variant?: 'pure' | 'card';
+  variant?: 'raw' | 'card';
 }
 
 const StatisticCard = memo<StatisticCardProps>(
   ({ title, className, highlight, variant, loading, extra, ...rest }) => {
     const { cx, styles } = useStyles(highlight);
     const { mobile } = useResponsive();
-    const isPure = variant === 'pure';
+    const isPure = variant === 'raw';
     return (
       <AntdStatisticCard
         bordered={!mobile}
         className={cx(
           styles.container,
-          isPure ? styles.pure : styles.card,
+          isPure ? styles.raw : styles.card,
           highlight && styles.highlight,
           className,
         )}

package/src/components/TextArea/index.tsx

@@ -1,5 +1,5 @@
-import { Input } from 'antd';
-import { TextAreaProps as Props, TextAreaRef } from 'antd/es/input/TextArea';
+import { TextArea as LobeTextArea, TextAreaProps as Props } from '@lobehub/ui';
+import { TextAreaRef } from 'antd/es/input/TextArea';
 import { memo, useRef, useState } from 'react';
 
 interface TextAreaProps extends Omit<Props, 'onChange'> {
@@ -13,7 +13,7 @@ const TextArea = memo<TextAreaProps>(({ onChange, value: defaultValue, ...props
   const [value, setValue] = useState(defaultValue as string);
 
   return (
-    <Input.TextArea
+    <LobeTextArea
       onBlur={() => {
         onChange?.(value);
       }}

package/src/components/mdx/Image.tsx

@@ -28,13 +28,12 @@ const ImageWrapper: FC<{ alt: string; src: string }> = async ({ alt, src, ...res
       <Image
         alt={alt}
         height={height}
-        // @ts-ignore
         placeholder={
           <Img
             alt={alt}
             height={height}
             src={base64}
-            style={{ filter: 'blur(24px)', scale: 1.2 }}
+            style={{ filter: 'blur(24px)', height: 'auto', scale: 1.2, width: '100%' }}
             width={DEFAULT_WIDTH}
           />
         }

package/src/config/aiModels/ai21.ts

@@ -6,8 +6,7 @@ const ai21ChatModels: AIChatModelCard[] = [
       functionCall: true,
     },
     contextWindowTokens: 256_000,
-    description:
-      '在同级别中最高效的模型，兼顾速度与质量，具备更小的体积。',
+    description: '在同级别中最高效的模型，兼顾速度与质量，具备更小的体积。',
     displayName: 'Jamba Mini',
     enabled: true,
     id: 'jamba-mini',
@@ -23,8 +22,7 @@ const ai21ChatModels: AIChatModelCard[] = [
       functionCall: true,
     },
     contextWindowTokens: 256_000,
-    description:
-      '我们最强大、最先进的模型，专为处理企业级复杂任务而设计，具备卓越的性能。',
+    description: '我们最强大、最先进的模型，专为处理企业级复杂任务而设计，具备卓越的性能。',
     displayName: 'Jamba Large',
     enabled: true,
     id: 'jamba-large',

package/src/config/aiModels/ai360.ts

@@ -40,8 +40,7 @@ const ai360ChatModels: AIChatModelCard[] = [
       search: true,
     },
     contextWindowTokens: 8000,
-    description:
-      '360智脑系列效果最好的主力千亿级大模型，广泛适用于各领域复杂任务场景。',
+    description: '360智脑系列效果最好的主力千亿级大模型，广泛适用于各领域复杂任务场景。',
     displayName: '360GPT2 Pro',
     enabled: true,
     id: '360gpt2-pro',
@@ -61,8 +60,7 @@ const ai360ChatModels: AIChatModelCard[] = [
       search: true,
     },
     contextWindowTokens: 8000,
-    description:
-      '360智脑系列效果最好的主力千亿级大模型，广泛适用于各领域复杂任务场景。',
+    description: '360智脑系列效果最好的主力千亿级大模型，广泛适用于各领域复杂任务场景。',
     displayName: '360GPT Pro',
     id: '360gpt-pro',
     pricing: {
@@ -77,8 +75,7 @@ const ai360ChatModels: AIChatModelCard[] = [
   },
   {
     contextWindowTokens: 16_000,
-    description:
-      '翻译专用模型，深度微调优化，翻译效果领先。',
+    description: '翻译专用模型，深度微调优化，翻译效果领先。',
     displayName: '360GPT Pro Trans',
     id: '360gpt-pro-trans',
     pricing: {
@@ -90,8 +87,7 @@ const ai360ChatModels: AIChatModelCard[] = [
   },
   {
     contextWindowTokens: 7000,
-    description:
-      '兼顾性能和效果的百亿级大模型，适合对性能/成本要求较高 的场景。',
+    description: '兼顾性能和效果的百亿级大模型，适合对性能/成本要求较高 的场景。',
     displayName: '360GPT Turbo',
     enabled: true,
     id: '360gpt-turbo',

package/src/config/aiModels/azure.ts

@@ -58,8 +58,7 @@ const azureChatModels: AIChatModelCard[] = [
       deploymentName: 'gpt-4.1',
     },
     contextWindowTokens: 1_047_576,
-    description:
-      'GPT-4.1 是我们用于复杂任务的旗舰模型。它非常适合跨领域解决问题。',
+    description: 'GPT-4.1 是我们用于复杂任务的旗舰模型。它非常适合跨领域解决问题。',
     displayName: 'GPT-4.1',
     enabled: true,
     id: 'gpt-4.1',

package/src/config/aiModels/azureai.ts

@@ -73,8 +73,7 @@ const azureChatModels: AIChatModelCard[] = [
       vision: true,
     },
     contextWindowTokens: 1_047_576,
-    description:
-      'GPT-4.1 是我们用于复杂任务的旗舰模型。它非常适合跨领域解决问题。',
+    description: 'GPT-4.1 是我们用于复杂任务的旗舰模型。它非常适合跨领域解决问题。',
     displayName: 'GPT-4.1',
     enabled: true,
     id: 'gpt-4.1',

package/src/config/aiModels/cohere.ts

@@ -14,9 +14,9 @@ const cohereChatModels: AIChatModelCard[] = [
     maxOutput: 8000,
     pricing: {
       input: 2.5,
-      output: 10
+      output: 10,
     },
-    type: 'chat'
+    type: 'chat',
   },
   {
     abilities: {
@@ -30,9 +30,9 @@ const cohereChatModels: AIChatModelCard[] = [
     maxOutput: 4000,
     pricing: {
       input: 3,
-      output: 15
+      output: 15,
     },
-    type: 'chat'
+    type: 'chat',
   },
   {
     abilities: {
@@ -47,9 +47,9 @@ const cohereChatModels: AIChatModelCard[] = [
     maxOutput: 4000,
     pricing: {
       input: 2.5,
-      output: 10
+      output: 10,
     },
-    type: 'chat'
+    type: 'chat',
   },
   {
     abilities: {
@@ -63,26 +63,25 @@ const cohereChatModels: AIChatModelCard[] = [
     maxOutput: 4000,
     pricing: {
       input: 0.15,
-      output: 0.6
+      output: 0.6,
     },
-    type: 'chat'
+    type: 'chat',
   },
   {
     abilities: {
       functionCall: true,
     },
     contextWindowTokens: 128_000,
-    description:
-      'command-r-08-2024 是 Command R 模型的更新版本，于 2024 年 8 月发布。',
+    description: 'command-r-08-2024 是 Command R 模型的更新版本，于 2024 年 8 月发布。',
     displayName: 'Command R 2408',
     enabled: true,
     id: 'command-r-08-2024',
     maxOutput: 4000,
     pricing: {
       input: 0.15,
-      output: 0.6
+      output: 0.6,
     },
-    type: 'chat'
+    type: 'chat',
   },
   {
     abilities: {
@@ -96,9 +95,9 @@ const cohereChatModels: AIChatModelCard[] = [
     maxOutput: 4000,
     pricing: {
       input: 0.5,
-      output: 1.5
+      output: 1.5,
     },
-    type: 'chat'
+    type: 'chat',
   },
   {
     abilities: {
@@ -112,9 +111,9 @@ const cohereChatModels: AIChatModelCard[] = [
     maxOutput: 4000,
     pricing: {
       input: 0.0375,
-      output: 0.15
+      output: 0.15,
     },
-    type: 'chat'
+    type: 'chat',
   },
   {
     contextWindowTokens: 4000,
@@ -125,9 +124,9 @@ const cohereChatModels: AIChatModelCard[] = [
     maxOutput: 4000,
     pricing: {
       input: 1,
-      output: 2
+      output: 2,
     },
-    type: 'chat'
+    type: 'chat',
   },
   {
     abilities: {
@@ -141,22 +140,21 @@ const cohereChatModels: AIChatModelCard[] = [
     maxOutput: 4000,
     pricing: {
       input: 1,
-      output: 2
+      output: 2,
     },
-    type: 'chat'
+    type: 'chat',
   },
   {
     contextWindowTokens: 4000,
-    description:
-      '一个更小、更快的 Command 版本，几乎同样强大，但速度更快。',
+    description: '一个更小、更快的 Command 版本，几乎同样强大，但速度更快。',
     displayName: 'Command Light',
     id: 'command-light',
     maxOutput: 4000,
     pricing: {
       input: 0.3,
-      output: 0.6
+      output: 0.6,
     },
-    type: 'chat'
+    type: 'chat',
   },
   {
     contextWindowTokens: 4000,
@@ -167,9 +165,9 @@ const cohereChatModels: AIChatModelCard[] = [
     maxOutput: 4000,
     pricing: {
       input: 0.3,
-      output: 0.6
+      output: 0.6,
     },
-    type: 'chat'
+    type: 'chat',
   },
   {
     contextWindowTokens: 128_000,
@@ -181,9 +179,9 @@ const cohereChatModels: AIChatModelCard[] = [
     maxOutput: 4000,
     pricing: {
       input: 0.5,
-      output: 1.5
+      output: 1.5,
     },
-    type: 'chat'
+    type: 'chat',
   },
   {
     contextWindowTokens: 8000,
@@ -195,9 +193,9 @@ const cohereChatModels: AIChatModelCard[] = [
     maxOutput: 4000,
     pricing: {
       input: 0.5,
-      output: 1.5
+      output: 1.5,
     },
-    type: 'chat'
+    type: 'chat',
   },
   {
     abilities: {
@@ -212,9 +210,9 @@ const cohereChatModels: AIChatModelCard[] = [
     maxOutput: 4000,
     pricing: {
       input: 0.5,
-      output: 1.5
+      output: 1.5,
     },
-    type: 'chat'
+    type: 'chat',
   },
   {
     abilities: {
@@ -229,11 +227,11 @@ const cohereChatModels: AIChatModelCard[] = [
     maxOutput: 4000,
     pricing: {
       input: 0.5,
-      output: 1.5
+      output: 1.5,
     },
-    type: 'chat'
+    type: 'chat',
   },
-]
+];
 
 export const allModels = [...cohereChatModels];