@lobehub/chat 1.83.7 → 1.84.0

package/src/app/[variants]/(main)/settings/system-agent/features/createForm.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { Form, Icon, type ItemGroup } from '@lobehub/ui';
-import type { FormItemProps } from '@lobehub/ui/es/Form/components/FormItem';
-import { Form as AntForm, Button, Switch } from 'antd';
+import { Button, Form, type FormGroupItemType, type FormItemProps } from '@lobehub/ui';
+import { Form as AntForm, Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { PencilIcon } from 'lucide-react';
 import { memo } from 'react';
@@ -17,8 +16,6 @@ import { type UserSystemAgentConfigKey } from '@/types/user/settings';
 
 import { useSyncSystemAgent } from './useSync';
 
-type SettingItemGroup = ItemGroup;
-
 interface SystemAgentFormProps {
   allowCustomPrompt?: boolean;
   allowDisable?: boolean;
@@ -36,7 +33,7 @@ const SystemAgentForm = memo(
     const [form] = AntForm.useForm();
     const value = settings[systemAgentKey];
 
-    const systemAgentSettings: SettingItemGroup = {
+    const systemAgentSettings: FormGroupItemType = {
       children: [
         {
           children: (
@@ -65,7 +62,7 @@ const SystemAgentForm = memo(
           ) : (
             <Button
               block
-              icon={<Icon icon={PencilIcon} />}
+              icon={PencilIcon}
               onClick={async () => {
                 await updateSystemAgent(systemAgentKey, { customPrompt: defaultPrompt });
               }}

package/src/app/[variants]/(main)/settings/tts/features/OpenAI.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Form, type ItemGroup } from '@lobehub/ui';
-import { Select } from 'antd';
+import { Form, type FormGroupItemType } from '@lobehub/ui';
+import { Select } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,8 +12,6 @@ import { settingsSelectors } from '@/store/user/selectors';
 
 import { opeanaiSTTOptions, opeanaiTTSOptions } from './const';
 
-type SettingItemGroup = ItemGroup;
-
 const TTS_SETTING_KEY = 'tts';
 
 const OpenAI = memo(() => {
@@ -22,7 +20,7 @@ const OpenAI = memo(() => {
   const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
   const [setSettings] = useUserStore((s) => [s.setSettings]);
 
-  const openai: SettingItemGroup = {
+  const openai: FormGroupItemType = {
     children: [
       {
         children: <Select options={opeanaiTTSOptions} />,
@@ -45,7 +43,7 @@ const OpenAI = memo(() => {
       items={[openai]}
       itemsType={'group'}
       onValuesChange={setSettings}
-      variant={'pure'}
+      variant={'borderless'}
       {...FORM_STYLE}
     />
   );

package/src/app/[variants]/(main)/settings/tts/features/STT.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Form, type ItemGroup } from '@lobehub/ui';
-import { Select, Switch } from 'antd';
+import { Form, type FormGroupItemType, Select } from '@lobehub/ui';
+import { Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,8 +12,6 @@ import { settingsSelectors } from '@/store/user/selectors';
 
 import { sttOptions } from './const';
 
-type SettingItemGroup = ItemGroup;
-
 const TTS_SETTING_KEY = 'tts';
 
 const STT = memo(() => {
@@ -22,7 +20,7 @@ const STT = memo(() => {
   const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
   const [setSettings] = useUserStore((s) => [s.setSettings]);
 
-  const stt: SettingItemGroup = {
+  const stt: FormGroupItemType = {
     children: [
       {
         children: <Select options={sttOptions} />,
@@ -34,6 +32,7 @@ const STT = memo(() => {
         children: <Switch />,
         desc: t('settingTTS.sttAutoStop.desc'),
         label: t('settingTTS.sttAutoStop.title'),
+        layout: 'horizontal',
         minWidth: undefined,
         name: [TTS_SETTING_KEY, 'sttAutoStop'],
         valuePropName: 'checked',
@@ -49,7 +48,7 @@ const STT = memo(() => {
       items={[stt]}
       itemsType={'group'}
       onValuesChange={setSettings}
-      variant={'pure'}
+      variant={'borderless'}
       {...FORM_STYLE}
     />
   );

package/src/app/[variants]/(main)/settings/tts/features/const.tsx

@@ -1,5 +1,5 @@
 import { OpenAI } from '@lobehub/icons';
-import { SelectProps } from 'antd';
+import type { SelectProps } from '@lobehub/ui';
 
 import { LabelRenderer } from '@/components/ModelSelect';
 

package/src/app/[variants]/@modal/(.)changelog/modal/features/ReadDetail.tsx

@@ -13,6 +13,8 @@ import urlJoin from 'url-join';
 import { OFFICIAL_SITE } from '@/const/url';
 import { useShare } from '@/hooks/useShare';
 
+const ICON_SIZE = { blockSize: 28, size: 16 };
+
 const useStyles = createStyles(
   ({ css, token }) => css`
     position: relative;
@@ -35,39 +37,19 @@ const ReadDetail = memo<{ desc: string; postId: string; title: string }>(
     return (
       <Flexbox align={'center'} className={styles} gap={4} horizontal>
         <Link href={x.link} style={{ color: 'inherit' }} target={'_blank'}>
-          <ActionIcon
-            fill={theme.colorTextSecondary}
-            icon={x.icon}
-            size={{ blockSize: 28, fontSize: 16 }}
-          />
+          <ActionIcon fill={theme.colorTextSecondary} icon={x.icon} size={ICON_SIZE} />
         </Link>
         <Link href={telegram.link} style={{ color: 'inherit' }} target={'_blank'}>
-          <ActionIcon
-            fill={theme.colorTextSecondary}
-            icon={telegram.icon}
-            size={{ blockSize: 28, fontSize: 16 }}
-          />
+          <ActionIcon fill={theme.colorTextSecondary} icon={telegram.icon} size={ICON_SIZE} />
         </Link>
         <Link href={reddit.link} style={{ color: 'inherit' }} target={'_blank'}>
-          <ActionIcon
-            fill={theme.colorTextSecondary}
-            icon={reddit.icon}
-            size={{ blockSize: 28, fontSize: 16 }}
-          />
+          <ActionIcon fill={theme.colorTextSecondary} icon={reddit.icon} size={ICON_SIZE} />
         </Link>
         <Link href={mastodon.link} style={{ color: 'inherit' }} target={'_blank'}>
-          <ActionIcon
-            fill={theme.colorTextSecondary}
-            icon={mastodon.icon}
-            size={{ blockSize: 28, fontSize: 16 }}
-          />
+          <ActionIcon fill={theme.colorTextSecondary} icon={mastodon.icon} size={ICON_SIZE} />
         </Link>
         <Link href={whatsapp.link} style={{ color: 'inherit' }} target={'_blank'}>
-          <ActionIcon
-            fill={theme.colorTextSecondary}
-            icon={whatsapp.icon}
-            size={{ blockSize: 28, fontSize: 16 }}
-          />
+          <ActionIcon fill={theme.colorTextSecondary} icon={whatsapp.icon} size={ICON_SIZE} />
         </Link>
         <Divider style={{ height: '100%' }} type={'vertical'} />
         <Link href={url} style={{ color: 'inherit', flex: 1 }} target={'_blank'}>
@@ -79,11 +61,7 @@ const ReadDetail = memo<{ desc: string; postId: string; title: string }>(
             width={'100%'}
           >
             {t('readDetails')}
-            <Icon
-              color={theme.colorTextSecondary}
-              icon={ChevronRightIcon}
-              size={{ fontSize: 20 }}
-            />
+            <Icon color={theme.colorTextSecondary} icon={ChevronRightIcon} size={20} />
           </Flexbox>
         </Link>
       </Flexbox>

package/src/app/[variants]/loading/Client/Error.tsx

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

package/src/app/[variants]/oauth/consent/[uid]/Consent.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import { Button, Card, Divider, Typography } from 'antd';
+import { Button } from '@lobehub/ui';
+import { Card, Divider, Typography } from 'antd';
 import { createStyles } from 'antd-style';
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 

package/src/app/[variants]/oauth/consent/[uid]/Login.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Avatar } from '@lobehub/ui';
-import { Button, Card, Skeleton, Typography } from 'antd';
+import { Avatar, Button } from '@lobehub/ui';
+import { Card, Skeleton, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';

package/src/app/[variants]/oauth/consent/[uid]/failed/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Icon } from '@lobehub/ui';
-import { Button, Card, Result } from 'antd';
+import { Button, Icon } from '@lobehub/ui';
+import { Card, Result } from 'antd';
 import { XCircle } from 'lucide-react';
 import Link from 'next/link';
 import React, { memo } from 'react';

package/src/app/desktop/devtools/page.tsx

@@ -58,13 +58,14 @@ const DevTools = memo(() => {
           topActions={items.map((item) => (
             <ActionIcon
               active={tab === item.key}
+              icon={item.icon}
               key={item.key}
               onClick={() => setTab(item.key)}
-              placement={'right'}
               title={item.key}
-            >
-              {item.icon}
-            </ActionIcon>
+              tooltipProps={{
+                placement: 'right',
+              }}
+            />
           ))}
         />
         {items.map((item) => (

package/src/components/404/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { FluentEmoji } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Button, FluentEmoji } from '@lobehub/ui';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';

package/src/components/Cell/index.tsx

@@ -42,10 +42,10 @@ const Cell = memo<CellProps>(({ label, icon, onClick, type }) => {
       padding={16}
     >
       <Flexbox align={'center'} gap={12} horizontal>
-        {icon && <Icon color={theme.colorPrimaryBorder} icon={icon} size={{ fontSize: 20 }} />}
+        {icon && <Icon color={theme.colorPrimaryBorder} icon={icon} size={{ size: 20 }} />}
         {label}
       </Flexbox>
-      <Icon color={theme.colorBorder} icon={ChevronRight} size={{ fontSize: 16 }} />
+      <Icon color={theme.colorBorder} icon={ChevronRight} size={{ size: 16 }} />
     </Flexbox>
   );
 });

package/src/components/DragUpload/index.tsx

@@ -11,7 +11,7 @@ import { Center, Flexbox } from 'react-layout-kit';
 import { getContainer, useDragUpload } from './useDragUpload';
 
 const BLOCK_SIZE = 64;
-const ICON_SIZE = 36;
+const ICON_SIZE = { size: 36, strokeWidth: 1.5 };
 
 const useStyles = createStyles(({ css, token }) => {
   return {
@@ -90,7 +90,7 @@ const DragUpload = memo<DragUploadProps>(({ enabledFiles = true, onUploadFiles }
               }}
               width={BLOCK_SIZE}
             >
-              <Icon icon={FileImage} size={{ fontSize: ICON_SIZE, strokeWidth: 1.5 }} />
+              <Icon icon={FileImage} size={ICON_SIZE} />
             </Center>
             <Center
               className={styles.icon}
@@ -101,7 +101,7 @@ const DragUpload = memo<DragUploadProps>(({ enabledFiles = true, onUploadFiles }
               }}
               width={BLOCK_SIZE}
             >
-              <Icon icon={FileUpIcon} size={{ fontSize: ICON_SIZE, strokeWidth: 1.5 }} />
+              <Icon icon={FileUpIcon} size={ICON_SIZE} />
             </Center>
             <Center
               className={styles.icon}
@@ -112,7 +112,7 @@ const DragUpload = memo<DragUploadProps>(({ enabledFiles = true, onUploadFiles }
               }}
               width={BLOCK_SIZE}
             >
-              <Icon icon={FileText} size={{ fontSize: ICON_SIZE, strokeWidth: 1.5 }} />
+              <Icon icon={FileText} size={ICON_SIZE} />
             </Center>
           </Flexbox>
           <Flexbox align={'center'} gap={8} style={{ textAlign: 'center' }}>

package/src/components/Error/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { FluentEmoji } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Button, FluentEmoji } from '@lobehub/ui';
 import Link from 'next/link';
 import { memo, useLayoutEffect } from 'react';
 import { useTranslation } from 'react-i18next';

package/src/components/FeatureList/index.tsx

@@ -48,7 +48,7 @@ const FeatureList = memo<FeatureListProps>(({ data }) => {
         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/components/FileIcon/index.tsx

@@ -8,7 +8,7 @@ interface FileListProps {
   fileType?: string;
   isDirectory?: boolean;
   size?: number;
-  variant?: 'pure' | 'file' | 'folder';
+  variant?: 'raw' | 'file' | 'folder';
 }
 
 const FileIcon = memo<FileListProps>(({ fileName, size, variant = 'file', isDirectory }) => {

package/src/components/FileParsingStatus/EmbeddingStatus.tsx

@@ -1,5 +1,4 @@
-import { Icon, Tooltip } from '@lobehub/ui';
-import { Tag } from 'antd';
+import { Icon, Tag, Tooltip } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { BoltIcon, RotateCwIcon } from 'lucide-react';
 import { darken, lighten } from 'polished';

package/src/components/FileParsingStatus/index.tsx

@@ -1,5 +1,5 @@
-import { Icon, Tooltip } from '@lobehub/ui';
-import { Badge, Button, Tag } from 'antd';
+import { Button, Icon, Tag, Tooltip } from '@lobehub/ui';
+import { Badge } from 'antd';
 import { createStyles } from 'antd-style';
 import { BoltIcon, Loader2Icon, RotateCwIcon } from 'lucide-react';
 import { darken, lighten } from 'polished';

package/src/components/FormInput/FormInput.tsx

@@ -1,5 +1,5 @@
-import { Input } from 'antd';
-import { InputRef, InputProps as Props } from 'antd/es/input/Input';
+import { Input, InputProps as Props } from '@lobehub/ui';
+import { InputRef } from 'antd/es/input/Input';
 import { memo, useEffect, useRef, useState } from 'react';
 
 interface FormInputProps extends Omit<Props, 'onChange'> {

package/src/components/FormInput/FormPassword.tsx

@@ -1,5 +1,5 @@
-import { Input } from 'antd';
-import { InputRef, InputProps as Props } from 'antd/es/input/Input';
+import { InputPassword, InputProps as Props } from '@lobehub/ui';
+import { InputRef } from 'antd/es/input/Input';
 import { memo, useEffect, useRef, useState } from 'react';
 
 interface FormPasswordProps extends Omit<Props, 'onChange'> {
@@ -17,7 +17,7 @@ const FormPassword = memo<FormPasswordProps>(({ onChange, value: defaultValue, .
   }, [defaultValue]);
 
   return (
-    <Input.Password
+    <InputPassword
       onBlur={() => {
         onChange?.(value);
       }}

package/src/components/FunctionModal/style.tsx

@@ -28,6 +28,10 @@ export const useStyles = createStyles(({ css, token, prefixCls, isDarkMode, resp
         margin-block-start: 0;
         padding: 16px;
       }
+
+      .${prefixCls}-modal-confirm-paragraph {
+        max-width: 100%;
+      }
     `,
     wrap: css`
       overflow: hidden auto;
@@ -35,4 +39,4 @@ export const useStyles = createStyles(({ css, token, prefixCls, isDarkMode, resp
   };
 });
 
-export const closeIcon = <Icon icon={XIcon} size={{ fontSize: 20 }} />;
+export const closeIcon = <Icon icon={XIcon} size={20} />;

package/src/components/GroupIcon/index.tsx

@@ -17,7 +17,7 @@ const GroupIcon = memo<{ icon: LucideIcon }>(({ icon }) => {
 
   return (
     <Center className={styles.icon} flex={'none'} height={40} width={40}>
-      <Icon icon={icon} size={{ fontSize: 24 }} />
+      <Icon icon={icon} size={24} />
     </Center>
   );
 });

package/src/components/IndexCard/index.tsx

@@ -113,7 +113,7 @@ const IndexCard = memo<IndexCardProps>(
                     className={styles.more}
                     icon={ChevronRight}
                     onClick={onMoreClick}
-                    size={{ blockSize: 32, borderRadius: '50%', fontSize: 16 }}
+                    size={{ blockSize: 32, borderRadius: '50%', size: 16 }}
                     title={moreTooltip}
                   />
                 )}
@@ -129,7 +129,7 @@ const IndexCard = memo<IndexCardProps>(
             <ActionIcon
               icon={ChevronDown}
               onClick={onExpand}
-              size={{ blockSize: 24, borderRadius: '50%', fontSize: 16 }}
+              size={{ blockSize: 24, borderRadius: '50%', size: 16 }}
             />
           </Center>
         )}

package/src/components/MaxTokenSlider.tsx

@@ -1,4 +1,5 @@
-import { InputNumber, Slider } from 'antd';
+import { InputNumber } from '@lobehub/ui';
+import { Slider } from 'antd';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -90,8 +91,7 @@ const MaxTokenSlider = memo<MaxTokenSliderProps>(({ value, onChange, defaultValu
           min={0}
           onChange={(e) => {
             if (!e && e !== 0) return;
-
-            updateWithRealValue(e);
+            updateWithRealValue(e as number);
           }}
           step={4 * Kibi}
           value={token}

package/src/components/Menu/index.tsx

@@ -60,11 +60,10 @@ const useStyles = createStyles(({ css, token, prefixCls }) => ({
 }));
 
 export interface MenuProps extends AntdMenuProps {
-  variant?: 'default' | 'compact';
+  compact?: boolean;
 }
 
-const Menu = memo<MenuProps>(({ className, selectable = false, variant, ...rest }) => {
-  const isCompact = variant === 'compact';
+const Menu = memo<MenuProps>(({ className, selectable = false, compact, ...rest }) => {
   const { cx, styles, theme } = useStyles();
   return (
     <ConfigProvider
@@ -77,8 +76,8 @@ const Menu = memo<MenuProps>(({ className, selectable = false, variant, ...rest
             itemBorderRadius: theme.borderRadius,
             itemColor: selectable ? theme.colorTextSecondary : theme.colorText,
             itemHoverBg: theme.colorFillTertiary,
-            itemMarginBlock: isCompact ? 0 : 4,
-            itemMarginInline: isCompact ? 0 : 4,
+            itemMarginBlock: compact ? 0 : 4,
+            itemMarginInline: compact ? 0 : 4,
             itemSelectedBg: theme.colorFillSecondary,
             paddingXS: -8,
           },
@@ -86,7 +85,7 @@ const Menu = memo<MenuProps>(({ className, selectable = false, variant, ...rest
       }}
     >
       <AntdMenu
-        className={cx(styles.menu, isCompact && styles.compact, className)}
+        className={cx(styles.menu, compact && styles.compact, className)}
         mode="vertical"
         selectable={selectable}
         {...rest}